Add power supplies table to hardware status page
Adds items at /redfish/v1/Chassis/chassis/Power endpoint in
Power supplies table. Table is sortable and has a row expansion
to view details.
- Table sort mixin to reuse sort method for status values
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ib2953ad06be3fa25e9dbbbed34e37d09154431f5
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index 9f34b53..2860e59 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -4,25 +4,36 @@
<!-- System table -->
<table-system />
+
+ <!-- Power supplies table -->
+ <table-power-supplies />
</b-container>
</template>
<script>
import PageTitle from '@/components/Global/PageTitle';
import TableSystem from './HardwareStatusTableStystem';
+import TablePowerSupplies from './HardwareStatusTablePowerSupplies';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
export default {
- components: { PageTitle, TableSystem },
+ components: { PageTitle, TablePowerSupplies, TableSystem },
mixins: [LoadingBarMixin],
created() {
this.startLoader();
const systemTablePromise = new Promise(resolve => {
this.$root.$on('hardwareStatus::system::complete', () => resolve());
});
+ const powerSuppliesTablePromise = new Promise(resolve => {
+ this.$root.$on('hardwareStatus::powerSupplies::complete', () =>
+ resolve()
+ );
+ });
// Combine all child component Promises to indicate
// when page data load complete
- Promise.all([systemTablePromise]).finally(() => this.endLoader());
+ Promise.all([systemTablePromise, powerSuppliesTablePromise]).finally(() =>
+ this.endLoader()
+ );
},
beforeRouteLeave(to, from, next) {
// Hide loader if user navigates away from page
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
new file mode 100644
index 0000000..3e066b7
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -0,0 +1,131 @@
+<template>
+ <page-section :section-title="$t('pageHardwareStatus.powerSupplies')">
+ <b-table
+ sort-icon-left
+ no-sort-reset
+ sort-by="health"
+ :items="powerSupplies"
+ :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>
+ <!-- Efficiency percent -->
+ <dt>{{ $t('pageHardwareStatus.table.efficiencyPercent') }}:</dt>
+ <dd>{{ tableFormatter(item.efficiencyPercent) }}</dd>
+ <br />
+ <!-- Firmware version -->
+ <dt>{{ $t('pageHardwareStatus.table.firmwareVersion') }}:</dt>
+ <dd>{{ tableFormatter(item.firmwareVersion) }}</dd>
+ <br />
+ <!-- Indicator LED -->
+ <dt>{{ $t('pageHardwareStatus.table.indicatorLed') }}:</dt>
+ <dd>{{ tableFormatter(item.indicatorLed) }}</dd>
+ </dl>
+ </b-col>
+ <b-col sm="6" xl="4">
+ <dl>
+ <!-- Model -->
+ <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt>
+ <dd>{{ tableFormatter(item.model) }}</dd>
+ <br />
+ <!-- Power input watts -->
+ <dt>{{ $t('pageHardwareStatus.table.powerInputWatts') }}:</dt>
+ <dd>{{ tableFormatter(item.powerInputWatts) }}</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';
+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: {
+ powerSupplies() {
+ return this.$store.getters['powerSupply/powerSupplies'];
+ }
+ },
+ created() {
+ this.$store.dispatch('powerSupply/getPowerSupply').finally(() => {
+ // Emit intial data fetch complete to parent component
+ this.$root.$emit('hardwareStatus::powerSupplies::complete');
+ });
+ },
+ methods: {
+ sortCompare(a, b, key) {
+ if (key === 'health') {
+ return this.sortStatus(a, b, key);
+ }
+ }
+ }
+};
+</script>