diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-06-08 21:03:11 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-06-18 00:04:55 +0300 |
commit | e24b17d2f599a34895acb9eccff3144af55484c5 (patch) | |
tree | 5576908d3fdd2966872f4dd763237e85a682e81a /src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue | |
parent | b1f559f03e3f464c1b8b19a9327158be0ecafe62 (diff) | |
download | webui-vue-e24b17d2f599a34895acb9eccff3144af55484c5.tar.xz |
Add DIMM slot table to hardware status page
Add items at /redfish/v1/Systems/system/Memory endpoint to
DIMM slot table. The table is sortable and has a row expansion
to view details. The code is currently missing most properties
needed to match the design. This table will need to be revisited
when all properties are available.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I07cacf3403fe84431cb9fe0e4315069fc7baf27d
Diffstat (limited to 'src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue new file mode 100644 index 00000000..e8207ef2 --- /dev/null +++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue @@ -0,0 +1,108 @@ +<template> + <page-section :section-title="$t('pageHardwareStatus.dimmSlot')"> + <b-table + sort-icon-left + no-sort-reset + sort-by="health" + :items="dimms" + :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: { + dimms() { + return this.$store.getters['memory/dimms']; + } + }, + created() { + this.$store.dispatch('memory/getDimms').finally(() => { + // Emit intial data fetch complete to parent component + this.$root.$emit('hardwareStatus::dimmSlot::complete'); + }); + }, + methods: { + sortCompare(a, b, key) { + if (key === 'health') { + return this.sortStatus(a, b, key); + } + } + } +}; +</script> |