Add Fans table to hardware status page
Add Fan items at /redfish/v1/Chassis/chassis/Thermal endpoint
to table with expansion row to view details.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1f69e30748f8dec62647468c4fd2e5b3947716d9
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 4397b2c..9c26013 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -128,6 +128,7 @@
},
"pageHardwareStatus": {
"dimmSlot": "DIMM slot",
+ "fans": "Fans",
"powerSupplies": "Power supplies",
"system": "System",
"table": {
diff --git a/src/store/index.js b/src/store/index.js
index b4e030b..c4c0948 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -17,6 +17,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 WebSocketPlugin from './plugins/WebSocketPlugin';
@@ -42,7 +43,8 @@
sslCertificates: SslCertificatesStore,
serverLed: ServerLedStore,
system: SystemStore,
- memory: MemoryStore
+ memory: MemoryStore,
+ fan: FanStore
},
plugins: [WebSocketPlugin]
});
diff --git a/src/store/modules/Health/FanStore.js b/src/store/modules/Health/FanStore.js
new file mode 100644
index 0000000..2de388b
--- /dev/null
+++ b/src/store/modules/Health/FanStore.js
@@ -0,0 +1,35 @@
+import api from '@/store/api';
+
+const FanStore = {
+ namespaced: true,
+ state: {
+ fans: []
+ },
+ getters: {
+ fans: state => state.fans
+ },
+ mutations: {
+ setFanInfo: (state, data) => {
+ state.fans = data.map(fan => {
+ const { MemberId, Status = {}, PartNumber, SerialNumber } = fan;
+ return {
+ id: MemberId,
+ health: Status.Health,
+ partNumber: PartNumber,
+ serialNumber: SerialNumber,
+ statusState: Status.State
+ };
+ });
+ }
+ },
+ actions: {
+ async getFanInfo({ commit }) {
+ return await api
+ .get('/redfish/v1/Chassis/chassis/Thermal')
+ .then(({ data: { Fans = [] } }) => commit('setFanInfo', Fans))
+ .catch(error => console.log(error));
+ }
+ }
+};
+
+export default FanStore;
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index 4d29a3d..c104ea3 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -8,6 +8,9 @@
<!-- DIMM slot table -->
<table-dimm-slot />
+ <!-- Fans table -->
+ <table-fans />
+
<!-- Power supplies table -->
<table-power-supplies />
</b-container>
@@ -18,10 +21,17 @@
import TableSystem from './HardwareStatusTableStystem';
import TablePowerSupplies from './HardwareStatusTablePowerSupplies';
import TableDimmSlot from './HardwareStatusTableDimmSlot';
+import TableFans from './HardwareStatusTableFans';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
export default {
- components: { PageTitle, TableDimmSlot, TablePowerSupplies, TableSystem },
+ components: {
+ PageTitle,
+ TableDimmSlot,
+ TablePowerSupplies,
+ TableSystem,
+ TableFans
+ },
mixins: [LoadingBarMixin],
created() {
this.startLoader();
@@ -31,6 +41,9 @@
const dimmSlotTablePromise = new Promise(resolve => {
this.$root.$on('hardwareStatus::dimmSlot::complete', () => resolve());
});
+ const fansTablePromise = new Promise(resolve => {
+ this.$root.$on('hardwareStatus::fans::complete', () => resolve());
+ });
const powerSuppliesTablePromise = new Promise(resolve => {
this.$root.$on('hardwareStatus::powerSupplies::complete', () =>
resolve()
@@ -41,6 +54,7 @@
Promise.all([
systemTablePromise,
dimmSlotTablePromise,
+ fansTablePromise,
powerSuppliesTablePromise
]).finally(() => this.endLoader());
},
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
new file mode 100644
index 0000000..6cf51a2
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -0,0 +1,108 @@
+<template>
+ <page-section :section-title="$t('pageHardwareStatus.fans')">
+ <b-table
+ sort-icon-left
+ no-sort-reset
+ sort-by="health"
+ :items="fans"
+ :fields="fields"
+ :sort-desc="true"
+ :sort-compare="sortCompare"
+ >
+ <!-- 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>
+ <!-- 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';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+
+export default {
+ components: { IconChevron, PageSection, StatusIcon },
+ mixins: [TableDataFormatter, 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
+ }
+ ]
+ };
+ },
+ computed: {
+ fans() {
+ return this.$store.getters['fan/fans'];
+ }
+ },
+ created() {
+ this.$store.dispatch('fan/getFanInfo').finally(() => {
+ // Emit intial data fetch complete to parent component
+ this.$root.$emit('hardwareStatus::fans::complete');
+ });
+ },
+ methods: {
+ sortCompare(a, b, key) {
+ if (key === 'health') {
+ return this.sortStatus(a, b, key);
+ }
+ }
+ }
+};
+</script>