diff options
Diffstat (limited to 'src/views/Health/HardwareStatus')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatus.vue | 34 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue | 120 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/index.js | 2 |
3 files changed, 156 insertions, 0 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue new file mode 100644 index 00000000..9f34b534 --- /dev/null +++ b/src/views/Health/HardwareStatus/HardwareStatus.vue @@ -0,0 +1,34 @@ +<template> + <b-container fluid="xl"> + <page-title /> + + <!-- System table --> + <table-system /> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import TableSystem from './HardwareStatusTableStystem'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; + +export default { + components: { PageTitle, TableSystem }, + mixins: [LoadingBarMixin], + created() { + this.startLoader(); + const systemTablePromise = new Promise(resolve => { + this.$root.$on('hardwareStatus::system::complete', () => resolve()); + }); + // Combine all child component Promises to indicate + // when page data load complete + Promise.all([systemTablePromise]).finally(() => this.endLoader()); + }, + beforeRouteLeave(to, from, next) { + // Hide loader if user navigates away from page + // before requests complete + this.hideLoader(); + next(); + } +}; +</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue new file mode 100644 index 00000000..3894eceb --- /dev/null +++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue @@ -0,0 +1,120 @@ +<template> + <page-section :section-title="$t('pageHardwareStatus.system')"> + <b-table :items="systems" :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> + <!-- Asset tag --> + <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt> + <dd>{{ tableFormatter(item.assetTag) }}</dd> + <br /> + <!-- Description --> + <dt>{{ $t('pageHardwareStatus.table.description') }}:</dt> + <dd>{{ tableFormatter(item.description) }}</dd> + <br /> + <!-- Indicator LED --> + <dt>{{ $t('pageHardwareStatus.table.indicatorLed') }}:</dt> + <dd>{{ tableFormatter(item.indicatorLed) }}</dd> + <br /> + <!-- Model --> + <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> + <dd>{{ tableFormatter(item.model) }}</dd> + </dl> + </b-col> + <b-col sm="6" xl="4"> + <dl> + <!-- Power state --> + <dt>{{ $t('pageHardwareStatus.table.powerState') }}:</dt> + <dd>{{ tableFormatter(item.powerState) }}</dd> + <br /> + <!-- 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> + <br /> + <!-- System type --> + <dt>{{ $t('pageHardwareStatus.table.systemType') }}:</dt> + <dd>{{ tableFormatter(item.systemType) }}</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: { + systems() { + return this.$store.getters['system/systems']; + } + }, + created() { + this.$store.dispatch('system/getSystem').finally(() => { + // Emit intial data fetch complete to parent component + this.$root.$emit('hardwareStatus::system::complete'); + }); + } +}; +</script> diff --git a/src/views/Health/HardwareStatus/index.js b/src/views/Health/HardwareStatus/index.js new file mode 100644 index 00000000..25d4551c --- /dev/null +++ b/src/views/Health/HardwareStatus/index.js @@ -0,0 +1,2 @@ +import HardwareStatus from './HardwareStatus.vue'; +export default HardwareStatus; |