17affc529SSandeepa Singh<template> 27affc529SSandeepa Singh <page-section :section-title="$t('pageInventory.dimmSlot')"> 37affc529SSandeepa Singh <b-row class="align-items-end"> 47affc529SSandeepa Singh <b-col sm="6" md="5" xl="4"> 57affc529SSandeepa Singh <search 67affc529SSandeepa Singh @change-search="onChangeSearchInput" 77affc529SSandeepa Singh @clear-search="onClearSearchInput" 87affc529SSandeepa Singh /> 97affc529SSandeepa Singh </b-col> 107affc529SSandeepa Singh <b-col sm="6" md="3" xl="2"> 117affc529SSandeepa Singh <table-cell-count 127affc529SSandeepa Singh :filtered-items-count="filteredRows" 137affc529SSandeepa Singh :total-number-of-cells="dimms.length" 147affc529SSandeepa Singh ></table-cell-count> 157affc529SSandeepa Singh </b-col> 167affc529SSandeepa Singh </b-row> 177affc529SSandeepa Singh <b-table 187affc529SSandeepa Singh sort-icon-left 197affc529SSandeepa Singh no-sort-reset 207affc529SSandeepa Singh hover 217affc529SSandeepa Singh sort-by="health" 227affc529SSandeepa Singh responsive="md" 237affc529SSandeepa Singh show-empty 247affc529SSandeepa Singh :items="dimms" 257affc529SSandeepa Singh :fields="fields" 267affc529SSandeepa Singh :sort-desc="true" 277affc529SSandeepa Singh :sort-compare="sortCompare" 287affc529SSandeepa Singh :filter="searchFilter" 297affc529SSandeepa Singh :empty-text="$t('global.table.emptyMessage')" 307affc529SSandeepa Singh :empty-filtered-text="$t('global.table.emptySearchMessage')" 317affc529SSandeepa Singh @filtered="onFiltered" 327affc529SSandeepa Singh > 337affc529SSandeepa Singh <!-- Expand chevron icon --> 347affc529SSandeepa Singh <template #cell(expandRow)="row"> 357affc529SSandeepa Singh <b-button 367affc529SSandeepa Singh variant="link" 377affc529SSandeepa Singh data-test-id="hardwareStatus-button-expandDimms" 387affc529SSandeepa Singh :title="expandRowLabel" 397affc529SSandeepa Singh class="btn-icon-only" 407affc529SSandeepa Singh @click="toggleRowDetails(row)" 417affc529SSandeepa Singh > 427affc529SSandeepa Singh <icon-chevron /> 437affc529SSandeepa Singh <span class="sr-only">{{ expandRowLabel }}</span> 447affc529SSandeepa Singh </b-button> 457affc529SSandeepa Singh </template> 467affc529SSandeepa Singh 477affc529SSandeepa Singh <!-- Health --> 487affc529SSandeepa Singh <template #cell(health)="{ value }"> 497affc529SSandeepa Singh <status-icon :status="statusIcon(value)" /> 507affc529SSandeepa Singh {{ value }} 517affc529SSandeepa Singh </template> 527affc529SSandeepa Singh 537affc529SSandeepa Singh <template #row-details="{ item }"> 547affc529SSandeepa Singh <b-container fluid> 557affc529SSandeepa Singh <b-row> 567affc529SSandeepa Singh <b-col sm="6" xl="4"> 577affc529SSandeepa Singh <dl> 587affc529SSandeepa Singh <!-- Status state --> 597affc529SSandeepa Singh <dt>{{ $t('pageInventory.table.statusState') }}:</dt> 60*9726f9a7SDixsie Wolmers <dd>{{ dataFormatter(item.statusState) }}</dd> 617affc529SSandeepa Singh </dl> 627affc529SSandeepa Singh </b-col> 637affc529SSandeepa Singh </b-row> 647affc529SSandeepa Singh </b-container> 657affc529SSandeepa Singh </template> 667affc529SSandeepa Singh </b-table> 677affc529SSandeepa Singh </page-section> 687affc529SSandeepa Singh</template> 697affc529SSandeepa Singh 707affc529SSandeepa Singh<script> 717affc529SSandeepa Singhimport PageSection from '@/components/Global/PageSection'; 727affc529SSandeepa Singhimport IconChevron from '@carbon/icons-vue/es/chevron--down/20'; 737affc529SSandeepa Singh 747affc529SSandeepa Singhimport StatusIcon from '@/components/Global/StatusIcon'; 757affc529SSandeepa Singhimport TableCellCount from '@/components/Global/TableCellCount'; 767affc529SSandeepa Singh 77*9726f9a7SDixsie Wolmersimport DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 787affc529SSandeepa Singhimport TableSortMixin from '@/components/Mixins/TableSortMixin'; 797affc529SSandeepa Singhimport Search from '@/components/Global/Search'; 807affc529SSandeepa Singhimport SearchFilterMixin, { 817affc529SSandeepa Singh searchFilter, 827affc529SSandeepa Singh} from '@/components/Mixins/SearchFilterMixin'; 837affc529SSandeepa Singhimport TableRowExpandMixin, { 847affc529SSandeepa Singh expandRowLabel, 857affc529SSandeepa Singh} from '@/components/Mixins/TableRowExpandMixin'; 867affc529SSandeepa Singh 877affc529SSandeepa Singhexport default { 887affc529SSandeepa Singh components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, 897affc529SSandeepa Singh mixins: [ 907affc529SSandeepa Singh TableRowExpandMixin, 91*9726f9a7SDixsie Wolmers DataFormatterMixin, 927affc529SSandeepa Singh TableSortMixin, 937affc529SSandeepa Singh SearchFilterMixin, 947affc529SSandeepa Singh ], 957affc529SSandeepa Singh data() { 967affc529SSandeepa Singh return { 977affc529SSandeepa Singh fields: [ 987affc529SSandeepa Singh { 997affc529SSandeepa Singh key: 'expandRow', 1007affc529SSandeepa Singh label: '', 1017affc529SSandeepa Singh tdClass: 'table-row-expand', 1027affc529SSandeepa Singh sortable: false, 1037affc529SSandeepa Singh }, 1047affc529SSandeepa Singh { 1057affc529SSandeepa Singh key: 'id', 1067affc529SSandeepa Singh label: this.$t('pageInventory.table.id'), 107*9726f9a7SDixsie Wolmers formatter: this.dataFormatter, 1087affc529SSandeepa Singh sortable: true, 1097affc529SSandeepa Singh }, 1107affc529SSandeepa Singh { 1117affc529SSandeepa Singh key: 'health', 1127affc529SSandeepa Singh label: this.$t('pageInventory.table.health'), 113*9726f9a7SDixsie Wolmers formatter: this.dataFormatter, 1147affc529SSandeepa Singh sortable: true, 1157affc529SSandeepa Singh tdClass: 'text-nowrap', 1167affc529SSandeepa Singh }, 1177affc529SSandeepa Singh { 1187affc529SSandeepa Singh key: 'partNumber', 1197affc529SSandeepa Singh label: this.$t('pageInventory.table.partNumber'), 120*9726f9a7SDixsie Wolmers formatter: this.dataFormatter, 1217affc529SSandeepa Singh sortable: true, 1227affc529SSandeepa Singh }, 1237affc529SSandeepa Singh { 1247affc529SSandeepa Singh key: 'serialNumber', 1257affc529SSandeepa Singh label: this.$t('pageInventory.table.serialNumber'), 126*9726f9a7SDixsie Wolmers formatter: this.dataFormatter, 1277affc529SSandeepa Singh sortable: true, 1287affc529SSandeepa Singh }, 1297affc529SSandeepa Singh ], 1307affc529SSandeepa Singh searchFilter: searchFilter, 1317affc529SSandeepa Singh searchTotalFilteredRows: 0, 1327affc529SSandeepa Singh expandRowLabel: expandRowLabel, 1337affc529SSandeepa Singh }; 1347affc529SSandeepa Singh }, 1357affc529SSandeepa Singh computed: { 1367affc529SSandeepa Singh filteredRows() { 1377affc529SSandeepa Singh return this.searchFilter 1387affc529SSandeepa Singh ? this.searchTotalFilteredRows 1397affc529SSandeepa Singh : this.dimms.length; 1407affc529SSandeepa Singh }, 1417affc529SSandeepa Singh dimms() { 1427affc529SSandeepa Singh return this.$store.getters['memory/dimms']; 1437affc529SSandeepa Singh }, 1447affc529SSandeepa Singh }, 1457affc529SSandeepa Singh created() { 1467affc529SSandeepa Singh this.$store.dispatch('memory/getDimms').finally(() => { 1477affc529SSandeepa Singh // Emit initial data fetch complete to parent component 1487affc529SSandeepa Singh this.$root.$emit('hardware-status-dimm-slot-complete'); 1497affc529SSandeepa Singh }); 1507affc529SSandeepa Singh }, 1517affc529SSandeepa Singh methods: { 1527affc529SSandeepa Singh sortCompare(a, b, key) { 1537affc529SSandeepa Singh if (key === 'health') { 1547affc529SSandeepa Singh return this.sortStatus(a, b, key); 1557affc529SSandeepa Singh } 1567affc529SSandeepa Singh }, 1577affc529SSandeepa Singh onFiltered(filteredItems) { 1587affc529SSandeepa Singh this.searchTotalFilteredRows = filteredItems.length; 1597affc529SSandeepa Singh }, 1607affc529SSandeepa Singh }, 1617affc529SSandeepa Singh}; 1627affc529SSandeepa Singh</script> 163