1<template> 2 <page-section :section-title="$t('pageInventory.dimmSlot')"> 3 <b-row class="align-items-end"> 4 <b-col sm="6" md="5" xl="4"> 5 <search 6 @change-search="onChangeSearchInput" 7 @clear-search="onClearSearchInput" 8 /> 9 </b-col> 10 <b-col sm="6" md="3" xl="2"> 11 <table-cell-count 12 :filtered-items-count="filteredRows" 13 :total-number-of-cells="dimms.length" 14 ></table-cell-count> 15 </b-col> 16 </b-row> 17 <b-table 18 sort-icon-left 19 no-sort-reset 20 hover 21 sort-by="health" 22 responsive="md" 23 show-empty 24 :items="dimms" 25 :fields="fields" 26 :sort-desc="true" 27 :sort-compare="sortCompare" 28 :filter="searchFilter" 29 :empty-text="$t('global.table.emptyMessage')" 30 :empty-filtered-text="$t('global.table.emptySearchMessage')" 31 @filtered="onFiltered" 32 > 33 <!-- Expand chevron icon --> 34 <template #cell(expandRow)="row"> 35 <b-button 36 variant="link" 37 data-test-id="hardwareStatus-button-expandDimms" 38 :title="expandRowLabel" 39 class="btn-icon-only" 40 @click="toggleRowDetails(row)" 41 > 42 <icon-chevron /> 43 <span class="sr-only">{{ expandRowLabel }}</span> 44 </b-button> 45 </template> 46 47 <!-- Health --> 48 <template #cell(health)="{ value }"> 49 <status-icon :status="statusIcon(value)" /> 50 {{ value }} 51 </template> 52 53 <template #row-details="{ item }"> 54 <b-container fluid> 55 <b-row> 56 <b-col sm="6" xl="4"> 57 <dl> 58 <!-- Status state --> 59 <dt>{{ $t('pageInventory.table.statusState') }}:</dt> 60 <dd>{{ dataFormatter(item.statusState) }}</dd> 61 </dl> 62 </b-col> 63 </b-row> 64 </b-container> 65 </template> 66 </b-table> 67 </page-section> 68</template> 69 70<script> 71import PageSection from '@/components/Global/PageSection'; 72import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; 73 74import StatusIcon from '@/components/Global/StatusIcon'; 75import TableCellCount from '@/components/Global/TableCellCount'; 76 77import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 78import TableSortMixin from '@/components/Mixins/TableSortMixin'; 79import Search from '@/components/Global/Search'; 80import SearchFilterMixin, { 81 searchFilter, 82} from '@/components/Mixins/SearchFilterMixin'; 83import TableRowExpandMixin, { 84 expandRowLabel, 85} from '@/components/Mixins/TableRowExpandMixin'; 86 87export default { 88 components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, 89 mixins: [ 90 TableRowExpandMixin, 91 DataFormatterMixin, 92 TableSortMixin, 93 SearchFilterMixin, 94 ], 95 data() { 96 return { 97 fields: [ 98 { 99 key: 'expandRow', 100 label: '', 101 tdClass: 'table-row-expand', 102 sortable: false, 103 }, 104 { 105 key: 'id', 106 label: this.$t('pageInventory.table.id'), 107 formatter: this.dataFormatter, 108 sortable: true, 109 }, 110 { 111 key: 'health', 112 label: this.$t('pageInventory.table.health'), 113 formatter: this.dataFormatter, 114 sortable: true, 115 tdClass: 'text-nowrap', 116 }, 117 { 118 key: 'partNumber', 119 label: this.$t('pageInventory.table.partNumber'), 120 formatter: this.dataFormatter, 121 sortable: true, 122 }, 123 { 124 key: 'serialNumber', 125 label: this.$t('pageInventory.table.serialNumber'), 126 formatter: this.dataFormatter, 127 sortable: true, 128 }, 129 ], 130 searchFilter: searchFilter, 131 searchTotalFilteredRows: 0, 132 expandRowLabel: expandRowLabel, 133 }; 134 }, 135 computed: { 136 filteredRows() { 137 return this.searchFilter 138 ? this.searchTotalFilteredRows 139 : this.dimms.length; 140 }, 141 dimms() { 142 return this.$store.getters['memory/dimms']; 143 }, 144 }, 145 created() { 146 this.$store.dispatch('memory/getDimms').finally(() => { 147 // Emit initial data fetch complete to parent component 148 this.$root.$emit('hardware-status-dimm-slot-complete'); 149 }); 150 }, 151 methods: { 152 sortCompare(a, b, key) { 153 if (key === 'health') { 154 return this.sortStatus(a, b, key); 155 } 156 }, 157 onFiltered(filteredItems) { 158 this.searchTotalFilteredRows = filteredItems.length; 159 }, 160 }, 161}; 162</script> 163