Add system attention indicators

- Different LEDs and statuses will be added to hardware status page
- Status for power will be shown and LED included is System identify Led

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I8689f7bf3cc02a7a90379ec50b005bf344c091e4

5 files changed, 127 insertions, 25 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index e4fb94a5..4948c9da 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -374,6 +374,11 @@
     "processors": "Processors",
     "quicklinkTitle": "Quick links to hardware components",
     "system": "System",
+    "systemIndicator": {
+      "powerStatus": "Power status",
+      "identifyLed": "System identify LED",
+      "sectionTitle": "System attention indicators"
+    },
     "table": {
       "assetTag": "Asset tag",
       "bmcDateTime": "BMC date and time",
diff --git a/src/store/modules/HardwareStatus/SystemStore.js b/src/store/modules/HardwareStatus/SystemStore.js
index 55f37542..75b645b6 100644
--- a/src/store/modules/HardwareStatus/SystemStore.js
+++ b/src/store/modules/HardwareStatus/SystemStore.js
@@ -16,25 +16,26 @@ const SystemStore = {
       system.description = data.Description;
       system.firmwareVersion = data.BiosVersion;
       system.hardwareType = data.Name;
-      system.health = data.Status.Health;
+      system.health = data.Status?.Health;
       system.id = data.Id;
       system.locationIndicatorActive = data.LocationIndicatorActive;
       system.locationNumber = data.LocationNumber;
       system.manufacturer = data.Manufacturer;
-      system.memorySummaryHealth = data.MemorySummary.Status.Health;
-      system.memorySummaryHealthRollup = data.MemorySummary.Status.HealthRollup;
-      system.memorySummaryState = data.MemorySummary.Status.State;
+      system.memorySummaryHealth = data.MemorySummary?.Status.Health;
+      system.memorySummaryHealthRollup =
+        data.MemorySummary?.Status?.HealthRollup;
+      system.memorySummaryState = data.MemorySummary?.Status?.State;
       system.model = data.Model;
-      system.processorSummaryCount = data.ProcessorSummary.Count;
-      system.processorSummaryHealth = data.ProcessorSummary.Status.Health;
+      system.processorSummaryCount = data.ProcessorSummary?.Count;
+      system.processorSummaryHealth = data.ProcessorSummary?.Status?.Health;
       system.processorSummaryHealthRoll =
-        data.ProcessorSummary.Status.HealthRollup;
-      system.processorSummaryState = data.ProcessorSummary.Status.State;
+        data.ProcessorSummary?.Status.HealthRollup;
+      system.processorSummaryState = data.ProcessorSummary?.Status?.State;
       system.powerState = data.PowerState;
       system.serialNumber = data.SerialNumber;
-      system.healthRollup = data.Status.HealthRollup;
+      system.healthRollup = data.Status?.HealthRollup;
       system.subModel = data.SubModel;
-      system.statusState = data.Status.State;
+      system.statusState = data.Status?.State;
       system.systemType = data.SystemType;
       state.systems = [system];
     },
@@ -42,26 +43,28 @@ const SystemStore = {
   actions: {
     async getSystem({ commit }) {
       return await api
-        .get('/redfish/v1/Systems/system')
+        .get('/redfish/v1')
+        .then((response) =>
+          api.get(`${response.data.Systems['@odata.id']}/system`)
+        )
         .then(({ data }) => commit('setSystemInfo', data))
         .catch((error) => console.log(error));
     },
-    changeIdentifyLedState({ dispatch }, ledState) {
-      api
+    async changeIdentifyLedState({ commit }, ledState) {
+      return await api
         .patch('/redfish/v1/Systems/system', {
           LocationIndicatorActive: ledState,
         })
-        .then(() => dispatch('getSystem'))
         .catch((error) => {
-          dispatch('getSystem');
+          commit('setSystemInfo', this.state.system.systems[0]);
           console.log('error', error);
           if (ledState) {
             throw new Error(
-              i18n.t('pageHardwareStatus.toast.errorEnableIdentifyLed')
+              i18n.t('pageInventory.toast.errorEnableIdentifyLed')
             );
           } else {
             throw new Error(
-              i18n.t('pageHardwareStatus.toast.errorDisableIdentifyLed')
+              i18n.t('pageInventory.toast.errorDisableIdentifyLed')
             );
           }
         });
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index d8b46b25..a729aaa2 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -2,6 +2,9 @@
   <b-container fluid="xl">
     <page-title />
 
+    <!-- Service indicators -->
+    <service-indicator />
+
     <!-- Quicklinks section -->
     <page-section :section-title="$t('pageInventory.quicklinkTitle')">
       <b-row class="w-75">
@@ -44,6 +47,7 @@
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
+import ServiceIndicator from './InventoryServiceIndicator';
 import TableSystem from './InventoryTableSystem';
 import TablePowerSupplies from './InventoryTablePowerSupplies';
 import TableDimmSlot from './InventoryTableDimmSlot';
@@ -54,14 +58,13 @@ import TableProcessors from './InventoryTableProcessors';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import PageSection from '@/components/Global/PageSection';
 import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
-
 import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
-
 import { chunk } from 'lodash';
 
 export default {
   components: {
     PageTitle,
+    ServiceIndicator,
     TableDimmSlot,
     TablePowerSupplies,
     TableSystem,
@@ -141,9 +144,6 @@ export default {
   },
   created() {
     this.startLoader();
-    const systemTablePromise = new Promise((resolve) => {
-      this.$root.$on('hardware-status-system-complete', () => resolve());
-    });
     const bmcManagerTablePromise = new Promise((resolve) => {
       this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
     });
@@ -164,16 +164,23 @@ export default {
     const processorsTablePromise = new Promise((resolve) => {
       this.$root.$on('hardware-status-processors-complete', () => resolve());
     });
+    const serviceIndicatorPromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-service-complete', () => resolve());
+    });
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
     // Combine all child component Promises to indicate
     // when page data load complete
     Promise.all([
-      systemTablePromise,
       bmcManagerTablePromise,
       chassisTablePromise,
       dimmSlotTablePromise,
       fansTablePromise,
       powerSuppliesTablePromise,
       processorsTablePromise,
+      serviceIndicatorPromise,
+      systemTablePromise,
     ]).finally(() => this.endLoader());
   },
 };
diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
new file mode 100644
index 00000000..8acf43c5
--- /dev/null
+++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -0,0 +1,80 @@
+<template>
+  <page-section
+    :section-title="$t('pageInventory.systemIndicator.sectionTitle')"
+  >
+    <div class="form-background pl-4 pt-4 pb-1">
+      <b-row>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt>
+            <dd>
+              {{ $t(powerStatus) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>
+              {{ $t('pageInventory.systemIndicator.identifyLed') }}
+            </dt>
+            <dd>
+              <b-form-checkbox
+                id="identifyLedSwitchService"
+                v-model="systems.locationIndicatorActive"
+                data-test-id="inventoryService-toggle-identifyLed"
+                switch
+                @change="toggleIdentifyLedSwitch"
+              >
+                <span class="sr-only">
+                  {{ $t('pageInventory.systemIndicator.identifyLed') }}
+                </span>
+                <span v-if="systems.locationIndicatorActive">
+                  {{ $t('global.status.on') }}
+                </span>
+                <span v-else>{{ $t('global.status.off') }}</span>
+              </b-form-checkbox>
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </div>
+  </page-section>
+</template>
+<script>
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableDataFormatterMixin],
+  computed: {
+    systems() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData ? systemData : {};
+    },
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    powerStatus() {
+      if (this.serverStatus === 'unreachable') {
+        return `global.status.off`;
+      }
+      return `global.status.${this.serverStatus}`;
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-service-complete');
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index 54129d1f..f2cdb3ed 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -30,12 +30,19 @@
 
       <template #cell(locationIndicatorActive)="{ item }">
         <b-form-checkbox
-          id="identifyLedSwitch"
+          id="identifyLedSwitchSystem"
           v-model="item.locationIndicatorActive"
-          data-test-id="hardwareStatus-toggle-identifyLed"
+          data-test-id="inventorySystem-toggle-identifyLed"
           switch
           @change="toggleIdentifyLedSwitch"
         >
+          <span class="sr-only">
+            {{ $t('pageInventory.table.identifyLed') }}
+          </span>
+          <span v-if="item.locationIndicatorActive">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else>{{ $t('global.status.off') }}</span>
         </b-form-checkbox>
       </template>