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

6 files changed, 182 insertions, 1 deletions

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index f98db35d..5196099b 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 ff57c5d4..b36a18e2 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 44c32467..fc361019 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,14 @@ const routes = [
         }
       },
       {
+        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 78585395..85d69633 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 @@ const PowerControlStore = {
       (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 @@ const PowerControlStore = {
         .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 00000000..8a16b88b
--- /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 00000000..f3e95ac1
--- /dev/null
+++ b/src/views/Control/ManagePowerUsage/index.js
@@ -0,0 +1,2 @@
+import ManagePowerUsage from './ManagePowerUsage.vue';
+export default ManagePowerUsage;