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
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 9c26013..f58054a 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 c4c0948..0f92175 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -18,6 +18,7 @@
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 @@
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 0000000..e9e58e7
--- /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 c104ea3..598313e 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 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 @@
TableDimmSlot,
TablePowerSupplies,
TableSystem,
- TableFans
+ TableFans,
+ TableChassis
},
mixins: [LoadingBarMixin],
created() {
@@ -38,6 +43,9 @@
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 @@
// 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 0000000..48e1f97
--- /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>