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