diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-08-04 18:15:25 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-18 16:53:15 +0300 |
commit | dc3fa2e0382145126101dc6df04d0338a119824f (patch) | |
tree | 8e21d88b267b9a46631a6dd1c0bd2b9621727b8d /src/views/Health | |
parent | 307382e809bc7d933ee593f68ef354c388ea350e (diff) | |
download | webui-vue-dc3fa2e0382145126101dc6df04d0338a119824f.tar.xz |
Add processors to hardware status page
-Add processors status from given API.
-Created seperate table with all available details.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Iae4346cd0555a9a7d8ec35c0f56f8bce6c4ab653
Diffstat (limited to 'src/views/Health')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatus.vue | 13 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue | 149 |
2 files changed, 160 insertions, 2 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue index 364baad2..fb203381 100644 --- a/src/views/Health/HardwareStatus/HardwareStatus.vue +++ b/src/views/Health/HardwareStatus/HardwareStatus.vue @@ -19,6 +19,9 @@ <!-- Power supplies table --> <table-power-supplies /> + + <!-- Processors table --> + <table-processors /> </b-container> </template> @@ -30,6 +33,7 @@ import TableDimmSlot from './HardwareStatusTableDimmSlot'; import TableFans from './HardwareStatusTableFans'; import TableBmcManager from './HardwareStatusTableBmcManager'; import TableChassis from './HardwareStatusTableChassis'; +import TableProcessors from './HardwareStatusTableProcessors'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; export default { @@ -40,7 +44,8 @@ export default { TableSystem, TableFans, TableBmcManager, - TableChassis + TableChassis, + TableProcessors }, mixins: [LoadingBarMixin], created() { @@ -65,6 +70,9 @@ export default { resolve() ); }); + const processorsTablePromise = new Promise(resolve => { + this.$root.$on('hardwareStatus::processors::complete', () => resolve()); + }); // Combine all child component Promises to indicate // when page data load complete Promise.all([ @@ -73,7 +81,8 @@ export default { chassisTablePromise, dimmSlotTablePromise, fansTablePromise, - powerSuppliesTablePromise + powerSuppliesTablePromise, + processorsTablePromise ]).finally(() => this.endLoader()); }, beforeRouteLeave(to, from, next) { diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue new file mode 100644 index 00000000..dad3ac8e --- /dev/null +++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue @@ -0,0 +1,149 @@ +<template> + <page-section :section-title="$t('pageHardwareStatus.processors')"> + <!-- Search --> + <b-row> + <b-col sm="6" md="5" xl="4"> + <search @changeSearch="onChangeSearchInput" /> + </b-col> + </b-row> + <b-table + sort-icon-left + no-sort-reset + responsive="md" + :items="processors" + :fields="fields" + :sort-desc="true" + :filter="searchFilter" + > + <!-- Expand button --> + <template v-slot:cell(expandRow)="row"> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandProcessors" + @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> + <!-- Name --> + <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> + <dd>{{ tableFormatter(item.name) }}</dd> + <br /> + <!-- Model --> + <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> + <dd>{{ tableFormatter(item.model) }}</dd> + <br /> + <!-- Instruction set --> + <dt>{{ $t('pageHardwareStatus.table.instructionSet') }}:</dt> + <dd>{{ tableFormatter(item.instructionSet) }}</dd> + <br /> + <!-- Manufacturer --> + <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> + <dd>{{ tableFormatter(item.manufacturer) }}</dd> + </dl> + </b-col> + <b-col sm="6" xl="4"> + <dl> + <!-- Architecture --> + <dt> + {{ $t('pageHardwareStatus.table.processorArchitecture') }}: + </dt> + <dd>{{ tableFormatter(item.processorArchitecture) }}</dd> + <br /> + <!-- Type --> + <dt>{{ $t('pageHardwareStatus.table.processorType') }}:</dt> + <dd>{{ tableFormatter(item.processorType) }}</dd> + <br /> + <!-- Total cores --> + <dt>{{ $t('pageHardwareStatus.table.totalCores') }}:</dt> + <dd>{{ tableFormatter(item.totalCores) }}</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 TableSortMixin from '@/components/Mixins/TableSortMixin'; +import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; +import Search from '@/components/Global/Search'; + +export default { + components: { PageSection, IconChevron, StatusIcon, Search }, + mixins: [TableDataFormatterMixin, 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 + } + ], + searchFilter: null + }; + }, + computed: { + processors() { + return this.$store.getters['processors/processors']; + } + }, + created() { + this.$store.dispatch('processors/getProcessorsInfo').finally(() => { + // Emit initial data fetch complete to parent component + this.$root.$emit('hardwareStatus::processors::complete'); + }); + }, + methods: { + onChangeSearchInput(searchValue) { + this.searchFilter = searchValue; + } + } +}; +</script> |