1<template> 2 <page-section :section-title="$t('pageInventory.processors')"> 3 <!-- Search --> 4 <b-row class="align-items-end"> 5 <b-col sm="6" md="5" xl="4"> 6 <search 7 @change-search="onChangeSearchInput" 8 @clear-search="onClearSearchInput" 9 /> 10 </b-col> 11 <b-col sm="6" md="3" xl="2"> 12 <table-cell-count 13 :filtered-items-count="filteredRows" 14 :total-number-of-cells="processors.length" 15 ></table-cell-count> 16 </b-col> 17 </b-row> 18 <b-table 19 sort-icon-left 20 no-sort-reset 21 hover 22 responsive="md" 23 show-empty 24 :items="processors" 25 :fields="fields" 26 :sort-desc="true" 27 :filter="searchFilter" 28 :empty-text="$t('global.table.emptyMessage')" 29 :empty-filtered-text="$t('global.table.emptySearchMessage')" 30 :busy="isBusy" 31 @filtered="onFiltered" 32 > 33 <!-- Expand button --> 34 <template #cell(expandRow)="row"> 35 <b-button 36 variant="link" 37 data-test-id="hardwareStatus-button-expandProcessors" 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 <!-- Health --> 47 <template #cell(health)="{ value }"> 48 <status-icon :status="statusIcon(value)" /> 49 {{ value }} 50 </template> 51 52 <!-- Toggle identify LED --> 53 <template #cell(identifyLed)="row"> 54 <b-form-checkbox 55 v-if="hasIdentifyLed(row.item.identifyLed)" 56 v-model="row.item.identifyLed" 57 name="switch" 58 switch 59 @change="toggleIdentifyLedValue(row.item)" 60 > 61 <span v-if="row.item.identifyLed"> 62 {{ $t('global.status.on') }} 63 </span> 64 <span v-else> {{ $t('global.status.off') }} </span> 65 </b-form-checkbox> 66 <div v-else>--</div> 67 </template> 68 69 <template #row-details="{ item }"> 70 <b-container fluid> 71 <b-row> 72 <b-col class="mt-2" sm="6" xl="6"> 73 <dl> 74 <!-- Name --> 75 <dt>{{ $t('pageInventory.table.name') }}:</dt> 76 <dd>{{ dataFormatter(item.name) }}</dd> 77 <!-- Part Number --> 78 <dt>{{ $t('pageInventory.table.partNumber') }}:</dt> 79 <dd>{{ dataFormatter(item.partNumber) }}</dd> 80 <!-- Serial Number --> 81 <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt> 82 <dd>{{ dataFormatter(item.serialNumber) }}</dd> 83 <!-- Spare Part Number --> 84 <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt> 85 <dd>{{ dataFormatter(item.sparePartNumber) }}</dd> 86 <!-- Model --> 87 <dt>{{ $t('pageInventory.table.model') }}:</dt> 88 <dd>{{ dataFormatter(item.model) }}</dd> 89 <!-- Asset Tag --> 90 <dt>{{ $t('pageInventory.table.assetTag') }}:</dt> 91 <dd>{{ dataFormatter(item.assetTag) }}</dd> 92 </dl> 93 </b-col> 94 <b-col class="mt-2" sm="6" xl="6"> 95 <dl> 96 <!-- Status state --> 97 <dt>{{ $t('pageInventory.table.statusState') }}:</dt> 98 <dd>{{ dataFormatter(item.statusState) }}</dd> 99 <!-- Health Rollup --> 100 <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt> 101 <dd>{{ dataFormatter(item.healthRollup) }}</dd> 102 </dl> 103 </b-col> 104 </b-row> 105 <div class="section-divider mb-3 mt-3"></div> 106 <b-row> 107 <b-col class="mt-1" sm="6" xl="6"> 108 <dl> 109 <!-- Manufacturer --> 110 <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt> 111 <dd>{{ dataFormatter(item.manufacturer) }}</dd> 112 <!-- Processor Type --> 113 <dt>{{ $t('pageInventory.table.processorType') }}:</dt> 114 <dd>{{ dataFormatter(item.processorType) }}</dd> 115 <!-- Processor Architecture --> 116 <dt>{{ $t('pageInventory.table.processorArchitecture') }}:</dt> 117 <dd>{{ dataFormatter(item.processorArchitecture) }}</dd> 118 <!-- Instruction Set --> 119 <dt>{{ $t('pageInventory.table.instructionSet') }}:</dt> 120 <dd>{{ dataFormatter(item.instructionSet) }}</dd> 121 <!-- Version --> 122 <dt>{{ $t('pageInventory.table.version') }}:</dt> 123 <dd>{{ dataFormatter(item.version) }}</dd> 124 </dl> 125 </b-col> 126 <b-col class="mt-1" sm="6" xl="6"> 127 <dl> 128 <!-- Min Speed MHz --> 129 <dt>{{ $t('pageInventory.table.minSpeedMHz') }}:</dt> 130 <dd>{{ dataFormatter(item.minSpeedMHz) }}</dd> 131 <!-- Max Speed MHz --> 132 <dt>{{ $t('pageInventory.table.maxSpeedMHz') }}:</dt> 133 <dd>{{ dataFormatter(item.maxSpeedMHz) }}</dd> 134 <!-- Total Cores --> 135 <dt>{{ $t('pageInventory.table.totalCores') }}:</dt> 136 <dd>{{ dataFormatter(item.totalCores) }}</dd> 137 <!-- Total Threads --> 138 <dt>{{ $t('pageInventory.table.totalThreads') }}:</dt> 139 <dd>{{ dataFormatter(item.totalThreads) }}</dd> 140 </dl> 141 </b-col> 142 </b-row> 143 </b-container> 144 </template> 145 </b-table> 146 </page-section> 147</template> 148 149<script> 150import PageSection from '@/components/Global/PageSection'; 151import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; 152import StatusIcon from '@/components/Global/StatusIcon'; 153import TableCellCount from '@/components/Global/TableCellCount'; 154import BVToastMixin from '@/components/Mixins/BVToastMixin'; 155import TableSortMixin from '@/components/Mixins/TableSortMixin'; 156import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 157import Search from '@/components/Global/Search'; 158import SearchFilterMixin, { 159 searchFilter, 160} from '@/components/Mixins/SearchFilterMixin'; 161import TableRowExpandMixin, { 162 expandRowLabel, 163} from '@/components/Mixins/TableRowExpandMixin'; 164 165export default { 166 components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, 167 mixins: [ 168 BVToastMixin, 169 TableRowExpandMixin, 170 DataFormatterMixin, 171 TableSortMixin, 172 SearchFilterMixin, 173 ], 174 data() { 175 return { 176 isBusy: true, 177 fields: [ 178 { 179 key: 'expandRow', 180 label: '', 181 tdClass: 'table-row-expand', 182 sortable: false, 183 }, 184 { 185 key: 'id', 186 label: this.$t('pageInventory.table.id'), 187 formatter: this.dataFormatter, 188 sortable: true, 189 }, 190 { 191 key: 'health', 192 label: this.$t('pageInventory.table.health'), 193 formatter: this.dataFormatter, 194 sortable: true, 195 tdClass: 'text-nowrap', 196 }, 197 { 198 key: 'locationNumber', 199 label: this.$t('pageInventory.table.locationNumber'), 200 formatter: this.dataFormatter, 201 sortable: true, 202 }, 203 { 204 key: 'identifyLed', 205 label: this.$t('pageInventory.table.identifyLed'), 206 formatter: this.dataFormatter, 207 sortable: false, 208 }, 209 ], 210 searchFilter: searchFilter, 211 searchTotalFilteredRows: 0, 212 expandRowLabel: expandRowLabel, 213 }; 214 }, 215 computed: { 216 filteredRows() { 217 return this.searchFilter 218 ? this.searchTotalFilteredRows 219 : this.processors.length; 220 }, 221 processors() { 222 return this.$store.getters['processors/processors']; 223 }, 224 }, 225 created() { 226 this.$store.dispatch('processors/getProcessorsInfo').finally(() => { 227 // Emit initial data fetch complete to parent component 228 this.$root.$emit('hardware-status-processors-complete'); 229 this.isBusy = false; 230 }); 231 }, 232 methods: { 233 onFiltered(filteredItems) { 234 this.searchTotalFilteredRows = filteredItems.length; 235 }, 236 toggleIdentifyLedValue(row) { 237 this.$store 238 .dispatch('processors/updateIdentifyLedValue', { 239 uri: row.uri, 240 identifyLed: row.identifyLed, 241 }) 242 .catch(({ message }) => this.errorToast(message)); 243 }, 244 // TO DO: remove hasIdentifyLed when the following is merged: 245 // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045 246 hasIdentifyLed(identifyLed) { 247 return typeof identifyLed === 'boolean'; 248 }, 249 }, 250}; 251</script> 252