diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-06-15 23:25:46 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-06-18 00:06:33 +0300 |
commit | b89a53c8d4a740c959b12938445917c3df5d3d4b (patch) | |
tree | 4d7c5b01a25d1d06d314b0e6e461be4f1adb6479 /src | |
parent | e24b17d2f599a34895acb9eccff3144af55484c5 (diff) | |
download | webui-vue-b89a53c8d4a740c959b12938445917c3df5d3d4b.tar.xz |
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
Diffstat (limited to 'src')
-rw-r--r-- | src/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/store/index.js | 4 | ||||
-rw-r--r-- | src/store/modules/Health/FanStore.js | 35 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatus.vue | 16 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableFans.vue | 108 |
5 files changed, 162 insertions, 2 deletions
diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 4397b2cc..9c260138 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 b4e030ba..c4c0948f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -17,6 +17,7 @@ import ServerLedStore from './modules/Control/ServerLedStore'; 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 @@ export default new Vuex.Store({ 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 00000000..2de388bf --- /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 4d29a3d9..c104ea33 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 PageTitle from '@/components/Global/PageTitle'; 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 @@ export default { 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 @@ export default { 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 00000000..6cf51a2a --- /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> |