Add processors to hardware status page

-Add processors status from given API.
-Created seperate table with all available details.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Iae4346cd0555a9a7d8ec35c0f56f8bce6c4ab653

5 files changed, 230 insertions, 3 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 59705602..0fde2536 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -242,6 +242,7 @@
     "powerSupplies": "Power supplies",
     "bmcManager": "BMC manager",
     "chassis": "Chassis",
+    "processors": "Processors",
     "system": "System",
     "table": {
       "assetTag": "Asset tag",
@@ -254,12 +255,16 @@
       "health": "Health",
       "id": "ID",
       "indicatorLed": "Indicator LED",
+      "instructionSet": "Instruction set",
       "manufacturer": "Manufacturer",
       "maxConcurrentSessions": "Max concurrent sessions",
       "model": "Model",
+      "name": "Name",
       "partNumber": "Part number",
       "powerInputWatts": "Power input watts",
       "powerState": "Power state",
+      "processorArchitecture": "Architecture",
+      "processorType": "Type",
       "serialConsole": "Serial console",
       "serialNumber": "Serial number",
       "serviceEnabled": "Service enabled",
@@ -267,6 +272,7 @@
       "statusHealthRollup": "Status (Health rollup)",
       "statusState": "Status (State)",
       "systemType": "System type",
+      "totalCores": "Total cores",
       "uuid": "UUID"
     }
   },
diff --git a/src/store/index.js b/src/store/index.js
index 392344d0..2e7c97aa 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -20,6 +20,7 @@ import MemoryStore from './modules/Health/MemoryStore';
 import FanStore from './modules/Health/FanStore';
 import ChassisStore from './modules/Health/ChassisStore';
 import BmcStore from './modules/Health/BmcStore';
+import ProcessorStore from './modules/Health/ProcessorStore';
 
 import WebSocketPlugin from './plugins/WebSocketPlugin';
 import DateTimeStore from './modules/Configuration/DateTimeSettingsStore';
@@ -50,7 +51,8 @@ export default new Vuex.Store({
     memory: MemoryStore,
     fan: FanStore,
     chassis: ChassisStore,
-    bmc: BmcStore
+    bmc: BmcStore,
+    processors: ProcessorStore
   },
   plugins: [WebSocketPlugin]
 });
diff --git a/src/store/modules/Health/ProcessorStore.js b/src/store/modules/Health/ProcessorStore.js
new file mode 100644
index 00000000..8680f652
--- /dev/null
+++ b/src/store/modules/Health/ProcessorStore.js
@@ -0,0 +1,61 @@
+import api from '@/store/api';
+
+const ProcessorStore = {
+  namespaced: true,
+  state: {
+    processors: null
+  },
+  getters: {
+    processors: state => state.processors
+  },
+  mutations: {
+    setProcessorsInfo: (state, data) => {
+      state.processors = data.map(processor => {
+        const {
+          Id,
+          Status = {},
+          PartNumber,
+          SerialNumber,
+          InstructionSet,
+          Manufacturer,
+          Model,
+          Name,
+          ProcessorArchitecture,
+          ProcessorType,
+          TotalCores
+        } = processor;
+        return {
+          id: Id,
+          health: Status.Health,
+          partNumber: PartNumber,
+          serialNumber: SerialNumber,
+          statusState: Status.State,
+          instructionSet: InstructionSet,
+          manufacturer: Manufacturer,
+          model: Model,
+          name: Name,
+          processorArchitecture: ProcessorArchitecture,
+          processorType: ProcessorType,
+          totalCores: TotalCores
+        };
+      });
+    }
+  },
+  actions: {
+    async getProcessorsInfo({ commit }) {
+      return await api
+        .get('/redfish/v1/Systems/system/Processors')
+        .then(({ data: { Members = [] } }) =>
+          Members.map(member => api.get(member['@odata.id']))
+        )
+        .then(promises => api.all(promises))
+        .then(response => {
+          const data = response.map(({ data }) => data);
+          commit('setProcessorsInfo', data);
+        })
+        .catch(error => console.log(error));
+    }
+  }
+};
+
+export default ProcessorStore;
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index 364baad2..fb203381 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -19,6 +19,9 @@
 
     <!-- Power supplies table -->
     <table-power-supplies />
+
+    <!-- Processors table -->
+    <table-processors />
   </b-container>
 </template>
 
@@ -30,6 +33,7 @@ import TableDimmSlot from './HardwareStatusTableDimmSlot';
 import TableFans from './HardwareStatusTableFans';
 import TableBmcManager from './HardwareStatusTableBmcManager';
 import TableChassis from './HardwareStatusTableChassis';
+import TableProcessors from './HardwareStatusTableProcessors';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
@@ -40,7 +44,8 @@ export default {
     TableSystem,
     TableFans,
     TableBmcManager,
-    TableChassis
+    TableChassis,
+    TableProcessors
   },
   mixins: [LoadingBarMixin],
   created() {
@@ -65,6 +70,9 @@ export default {
         resolve()
       );
     });
+    const processorsTablePromise = new Promise(resolve => {
+      this.$root.$on('hardwareStatus::processors::complete', () => resolve());
+    });
     // Combine all child component Promises to indicate
     // when page data load complete
     Promise.all([
@@ -73,7 +81,8 @@ export default {
       chassisTablePromise,
       dimmSlotTablePromise,
       fansTablePromise,
-      powerSuppliesTablePromise
+      powerSuppliesTablePromise,
+      processorsTablePromise
     ]).finally(() => this.endLoader());
   },
   beforeRouteLeave(to, from, next) {
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
new file mode 100644
index 00000000..dad3ac8e
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -0,0 +1,149 @@
+<template>
+  <page-section :section-title="$t('pageHardwareStatus.processors')">
+    <!-- Search -->
+    <b-row>
+      <b-col sm="6" md="5" xl="4">
+        <search @changeSearch="onChangeSearchInput" />
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      responsive="md"
+      :items="processors"
+      :fields="fields"
+      :sort-desc="true"
+      :filter="searchFilter"
+    >
+      <!-- Expand button -->
+      <template v-slot:cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandProcessors"
+          @click="row.toggleDetails"
+        >
+          <icon-chevron />
+        </b-button>
+      </template>
+      <!-- Health -->
+      <template v-slot:cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+      <template v-slot:row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt>
+                <dd>{{ tableFormatter(item.name) }}</dd>
+                <br />
+                <!-- Model -->
+                <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt>
+                <dd>{{ tableFormatter(item.model) }}</dd>
+                <br />
+                <!-- Instruction set -->
+                <dt>{{ $t('pageHardwareStatus.table.instructionSet') }}:</dt>
+                <dd>{{ tableFormatter(item.instructionSet) }}</dd>
+                <br />
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
+                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Architecture -->
+                <dt>
+                  {{ $t('pageHardwareStatus.table.processorArchitecture') }}:
+                </dt>
+                <dd>{{ tableFormatter(item.processorArchitecture) }}</dd>
+                <br />
+                <!-- Type -->
+                <dt>{{ $t('pageHardwareStatus.table.processorType') }}:</dt>
+                <dd>{{ tableFormatter(item.processorType) }}</dd>
+                <br />
+                <!-- Total cores -->
+                <dt>{{ $t('pageHardwareStatus.table.totalCores') }}:</dt>
+                <dd>{{ tableFormatter(item.totalCores) }}</dd>
+                <br />
+                <!-- Status state -->
+                <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
+                <dd>{{ tableFormatter(item.statusState) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import Search from '@/components/Global/Search';
+
+export default {
+  components: { PageSection, IconChevron, StatusIcon, Search },
+  mixins: [TableDataFormatterMixin, TableSortMixin],
+  data() {
+    return {
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false
+        },
+        {
+          key: 'id',
+          label: this.$t('pageHardwareStatus.table.id'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'health',
+          label: this.$t('pageHardwareStatus.table.health'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageHardwareStatus.table.partNumber'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          formatter: this.tableFormatter,
+          sortable: true
+        }
+      ],
+      searchFilter: null
+    };
+  },
+  computed: {
+    processors() {
+      return this.$store.getters['processors/processors'];
+    }
+  },
+  created() {
+    this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardwareStatus::processors::complete');
+    });
+  },
+  methods: {
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
+    }
+  }
+};
+</script>