Add manage power usage page
-The page is used to control the power.
-Maximum power can be set between 1 to 10000.
-The API used to get and set the power
limit:/redfish/v1/Chassis/chassis/Power
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I1cab4876e9149d92de75014d7680ac11410ca4fe
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index f98db35..5196099 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -34,7 +34,7 @@
<icon-expand class="icon-expand" />
</b-button>
<b-collapse id="control-menu" tag="ul" class="nav-item__nav">
- <b-nav-item href="javascript:void(0)">
+ <b-nav-item to="/control/manage-power-usage">
{{ $t('appNavigation.managePowerUsage') }}
</b-nav-item>
<b-nav-item to="/control/reboot-bmc">
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index ff57c5d..b36a18e 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -25,6 +25,7 @@
"form": {
"fieldRequired": "Field required",
"invalidFormat": "Invalid format",
+ "invalidValue": "Invalid value",
"lengthMustBeBetween": "Length must be between %{min} – %{max} characters",
"mustBeAtLeast": "Must be at least %{value}",
"required": "Required",
@@ -245,6 +246,16 @@
"solConsole": "Serial over LAN console"
}
},
+ "pageManagePowerUsage": {
+ "description": "Set a power cap to keep power consumption at or below the specified value in watts",
+ "powerCapLabel": "Power cap value (in watts)",
+ "powerCapLabelTextInfo": " Value must be between %{min} and %{max}",
+ "powerCapSettingData": "Apply power cap",
+ "powerCapSettingLabel": "Power cap setting",
+ "powerConsumption": "Current power consumption",
+ "serverPowCapSetting": "Server power cap setting"
+ },
+
"pageRebootBmc": {
"rebootBmc": "Reboot BMC",
"rebootInformation": "When you reboot the BMC, your web browser loses contact with the BMC for several minutes. When the BMC is back online, you may need to log in again.",
diff --git a/src/router/index.js b/src/router/index.js
index 44c3246..fc36101 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,14 @@
}
},
{
+ path: '/control/manage-power-usage',
+ name: 'manage-power-usage',
+ component: () => import('@/views/Control/ManagePowerUsage'),
+ meta: {
+ title: 'appPageTitle.managePowerUsage'
+ }
+ },
+ {
path: '/control/reboot-bmc',
name: 'reboot-bmc',
component: () => import('@/views/Control/RebootBmc'),
diff --git a/src/store/modules/Control/PowerControlStore.js b/src/store/modules/Control/PowerControlStore.js
index 7858539..85d6963 100644
--- a/src/store/modules/Control/PowerControlStore.js
+++ b/src/store/modules/Control/PowerControlStore.js
@@ -1,4 +1,5 @@
import api from '../../api';
+import i18n from '@/i18n';
const PowerControlStore = {
namespaced: true,
@@ -17,6 +18,9 @@
(state.powerConsumptionValue = powerConsumptionValue)
},
actions: {
+ setPowerCapUpdatedValue({ commit }, value) {
+ commit('setPowerCapValue', value);
+ },
async getPowerControl({ commit }) {
return await api
.get('/redfish/v1/Chassis/chassis/Power')
@@ -32,6 +36,23 @@
.catch(error => {
console.log('Power control', error);
});
+ },
+ async setPowerControl(_, powerCapValue) {
+ const data = {
+ PowerControl: [{ PowerLimit: { LimitInWatts: powerCapValue } }]
+ };
+
+ return await api
+ .patch('/redfish/v1/Chassis/chassis/Power', data)
+ .then(() =>
+ i18n.t('pageServerPowerOperations.toast.successSaveSettings')
+ )
+ .catch(error => {
+ console.log(error);
+ throw new Error(
+ i18n.t('pageServerPowerOperations.toast.errorSaveSettings')
+ );
+ });
}
}
};
diff --git a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
new file mode 100644
index 0000000..8a16b88
--- /dev/null
+++ b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
@@ -0,0 +1,139 @@
+<template>
+ <b-container fluid="xl">
+ <page-title :description="$t('pageManagePowerUsage.description')" />
+
+ <b-row>
+ <b-col sm="8" md="6" xl="12">
+ <dl>
+ <dt>{{ $t('pageManagePowerUsage.powerConsumption') }}</dt>
+ <dd>
+ {{
+ powerConsumptionValue
+ ? `${powerConsumptionValue} W`
+ : $t('global.status.notAvailable')
+ }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+
+ <b-form @submit.prevent="submitForm">
+ <b-row>
+ <b-col sm="8" md="6" xl="12">
+ <b-form-group
+ :label="$t('pageManagePowerUsage.powerCapSettingLabel')"
+ >
+ <b-form-checkbox
+ v-model="isPowerCapFieldEnabled"
+ name="power-cap-setting"
+ >
+ {{ $t('pageManagePowerUsage.powerCapSettingData') }}
+ </b-form-checkbox>
+ </b-form-group>
+ </b-col>
+ </b-row>
+
+ <b-row>
+ <b-col sm="8" md="6" xl="3">
+ <b-form-group
+ id="input-group-1"
+ :label="$t('pageManagePowerUsage.powerCapLabel')"
+ label-for="input-1"
+ >
+ <b-form-text id="power-help-text">
+ {{
+ $t('pageManagePowerUsage.powerCapLabelTextInfo', {
+ min: 1,
+ max: 10000
+ })
+ }}
+ </b-form-text>
+
+ <b-form-input
+ id="input-1"
+ v-model.number="powerCapValue"
+ :disabled="!isPowerCapFieldEnabled"
+ type="number"
+ aria-describedby="power-help-text"
+ :state="getValidationState($v.powerCapValue)"
+ ></b-form-input>
+
+ <b-form-invalid-feedback id="input-live-feedback" role="alert">
+ <template v-if="!$v.powerCapValue.required">
+ {{ $t('global.form.fieldRequired') }}
+ </template>
+ <template v-else-if="!$v.powerCapValue.between">
+ {{ $t('global.form.invalidValue') }}
+ </template>
+ </b-form-invalid-feedback>
+ </b-form-group>
+ </b-col>
+ </b-row>
+
+ <b-button variant="primary" type="submit">
+ {{ $t('global.action.save') }}
+ </b-button>
+ </b-form>
+ </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { requiredIf, between } from 'vuelidate/lib/validators';
+import { mapGetters } from 'vuex';
+
+export default {
+ name: 'ManagePowerUsage',
+ components: { PageTitle },
+ mixins: [VuelidateMixin, BVToastMixin],
+ computed: {
+ ...mapGetters({
+ powerConsumptionValue: 'powerControl/powerConsumptionValue'
+ }),
+
+ /**
+ Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
+ The input field is enabled when the powercapValue property is not null.
+ **/
+ isPowerCapFieldEnabled: {
+ get() {
+ return this.powerCapValue !== null;
+ },
+ set(value) {
+ let newValue = value ? '' : null;
+ this.$v.$reset();
+ this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
+ }
+ },
+ powerCapValue: {
+ get() {
+ return this.$store.getters['powerControl/powerCapValue'];
+ },
+ set(value) {
+ this.$v.$touch();
+ this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
+ }
+ }
+ },
+ validations: {
+ powerCapValue: {
+ between: between(1, 10000),
+ required: requiredIf(function() {
+ return this.isPowerCapFieldEnabled;
+ })
+ }
+ },
+ methods: {
+ submitForm() {
+ this.$v.$touch();
+ if (this.$v.$invalid) return;
+ this.$store
+ .dispatch('powerControl/setPowerControl', this.powerCapValue)
+ .then(message => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ }
+ }
+};
+</script>
diff --git a/src/views/Control/ManagePowerUsage/index.js b/src/views/Control/ManagePowerUsage/index.js
new file mode 100644
index 0000000..f3e95ac
--- /dev/null
+++ b/src/views/Control/ManagePowerUsage/index.js
@@ -0,0 +1,2 @@
+import ManagePowerUsage from './ManagePowerUsage.vue';
+export default ManagePowerUsage;