Add Chassis table to hardware status page

Add each chassis at /redfish/v1/Chassis endpoint to a table
with an expansion row to view property details.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I8d4c64fecac3857e0d4ece9fad81d9035e236c92

5 files changed, 179 insertions, 2 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 9c260138..f58054a8 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -130,15 +130,18 @@
     "dimmSlot": "DIMM slot",
     "fans": "Fans",
     "powerSupplies": "Power supplies",
+    "chassis": "Chassis",
     "system": "System",
     "table": {
         "assetTag": "Asset tag",
+        "chassisType": "Chassis type",
         "description": "Description",
         "efficiencyPercent": "Efficiency percent",
         "firmwareVersion": "Firmware version",
         "health": "Health",
         "id": "ID",
         "indicatorLed": "Indicator LED",
+        "manufacturer": "Manufacturer",
         "model": "Model",
         "partNumber": "Part number",
         "powerInputWatts": "Power input watts",
diff --git a/src/store/index.js b/src/store/index.js
index c4c0948f..0f921759 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -18,6 +18,7 @@ import SystemStore from './modules/Health/SystemStore';
 import PowerSupplyStore from './modules/Health/PowerSupplyStore';
 import MemoryStore from './modules/Health/MemoryStore';
 import FanStore from './modules/Health/FanStore';
+import ChassisStore from './modules/Health/ChassisStore';
 
 import WebSocketPlugin from './plugins/WebSocketPlugin';
 
@@ -44,7 +45,8 @@ export default new Vuex.Store({
     serverLed: ServerLedStore,
     system: SystemStore,
     memory: MemoryStore,
-    fan: FanStore
+    fan: FanStore,
+    chassis: ChassisStore
   },
   plugins: [WebSocketPlugin]
 });
diff --git a/src/store/modules/Health/ChassisStore.js b/src/store/modules/Health/ChassisStore.js
new file mode 100644
index 00000000..e9e58e72
--- /dev/null
+++ b/src/store/modules/Health/ChassisStore.js
@@ -0,0 +1,55 @@
+import api from '@/store/api';
+
+const ChassisStore = {
+  namespaced: true,
+  state: {
+    chassis: []
+  },
+  getters: {
+    chassis: state => state.chassis
+  },
+  mutations: {
+    setChassisInfo: (state, data) => {
+      state.chassis = data.map(chassis => {
+        const {
+          Id,
+          Status = {},
+          PartNumber,
+          SerialNumber,
+          ChassisType,
+          Manufacturer,
+          PowerState
+        } = chassis;
+
+        return {
+          id: Id,
+          health: Status.Health,
+          partNumber: PartNumber,
+          serialNumber: SerialNumber,
+          chassisType: ChassisType,
+          manufacturer: Manufacturer,
+          powerState: PowerState,
+          statusState: Status.State,
+          healthRollup: Status.HealthRollup
+        };
+      });
+    }
+  },
+  actions: {
+    async getChassisInfo({ commit }) {
+      return await api
+        .get('/redfish/v1/Chassis')
+        .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('setChassisInfo', data);
+        })
+        .catch(error => console.log(error));
+    }
+  }
+};
+
+export default ChassisStore;
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index c104ea33..598313e1 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -5,6 +5,9 @@
     <!-- System table -->
     <table-system />
 
+    <!-- Chassis table -->
+    <table-chassis />
+
     <!-- DIMM slot table -->
     <table-dimm-slot />
 
@@ -22,6 +25,7 @@ import TableSystem from './HardwareStatusTableStystem';
 import TablePowerSupplies from './HardwareStatusTablePowerSupplies';
 import TableDimmSlot from './HardwareStatusTableDimmSlot';
 import TableFans from './HardwareStatusTableFans';
+import TableChassis from './HardwareStatusTableChassis';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
@@ -30,7 +34,8 @@ export default {
     TableDimmSlot,
     TablePowerSupplies,
     TableSystem,
-    TableFans
+    TableFans,
+    TableChassis
   },
   mixins: [LoadingBarMixin],
   created() {
@@ -38,6 +43,9 @@ export default {
     const systemTablePromise = new Promise(resolve => {
       this.$root.$on('hardwareStatus::system::complete', () => resolve());
     });
+    const chassisTablePromise = new Promise(resolve => {
+      this.$root.$on('hardwareStatus::chassis::complete', () => resolve());
+    });
     const dimmSlotTablePromise = new Promise(resolve => {
       this.$root.$on('hardwareStatus::dimmSlot::complete', () => resolve());
     });
@@ -53,6 +61,7 @@ export default {
     // when page data load complete
     Promise.all([
       systemTablePromise,
+      chassisTablePromise,
       dimmSlotTablePromise,
       fansTablePromise,
       powerSuppliesTablePromise
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
new file mode 100644
index 00000000..48e1f97e
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -0,0 +1,108 @@
+<template>
+  <page-section :section-title="$t('pageHardwareStatus.chassis')">
+    <b-table :items="chassis" :fields="fields">
+      <!-- Expand chevron icon -->
+      <template v-slot:cell(expandRow)="row">
+        <b-button variant="link" @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>
+                <!-- Chassis type -->
+                <dt>{{ $t('pageHardwareStatus.table.chassisType') }}:</dt>
+                <dd>{{ tableFormatter(item.chassisType) }}</dd>
+                <br />
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
+                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
+                <br />
+                <!-- Power state -->
+                <dt>{{ $t('pageHardwareStatus.table.powerState') }}:</dt>
+                <dd>{{ tableFormatter(item.powerState) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Health rollup -->
+                <dt>
+                  {{ $t('pageHardwareStatus.table.statusHealthRollup') }}:
+                </dt>
+                <dd>{{ tableFormatter(item.healthRollup) }}</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 TableDataFormatter from '@/components/Mixins/TableDataFormatter';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [TableDataFormatter],
+  data() {
+    return {
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand'
+        },
+        {
+          key: 'id',
+          label: this.$t('pageHardwareStatus.table.id'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'health',
+          label: this.$t('pageHardwareStatus.table.health'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageHardwareStatus.table.partNumber'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          formatter: this.tableFormatter
+        }
+      ]
+    };
+  },
+  computed: {
+    chassis() {
+      return this.$store.getters['chassis/chassis'];
+    }
+  },
+  created() {
+    this.$store.dispatch('chassis/getChassisInfo').finally(() => {
+      // Emit intial data fetch complete to parent component
+      this.$root.$emit('hardwareStatus::chassis::complete');
+    });
+  }
+};
+</script>