1<template> 2 <page-section :section-title="$t('pageInventory.system')"> 3 <b-table 4 responsive="md" 5 hover 6 show-empty 7 :items="systems" 8 :fields="fields" 9 :empty-text="$t('global.table.emptyMessage')" 10 :busy="isBusy" 11 > 12 <!-- Expand chevron icon --> 13 <template #cell(expandRow)="row"> 14 <b-button 15 variant="link" 16 data-test-id="hardwareStatus-button-expandSystem" 17 :title="expandRowLabel" 18 class="btn-icon-only" 19 @click="toggleRowDetails(row)" 20 > 21 <icon-chevron /> 22 <span class="sr-only">{{ expandRowLabel }}</span> 23 </b-button> 24 </template> 25 26 <!-- Health --> 27 <template #cell(health)="{ value }"> 28 <status-icon :status="statusIcon(value)" /> 29 {{ value }} 30 </template> 31 32 <template #cell(locationIndicatorActive)="{ item }"> 33 <b-form-checkbox 34 id="identifyLedSwitchSystem" 35 v-model="item.locationIndicatorActive" 36 data-test-id="inventorySystem-toggle-identifyLed" 37 switch 38 @change="toggleIdentifyLedSwitch" 39 > 40 <span v-if="item.locationIndicatorActive"> 41 {{ $t('global.status.on') }} 42 </span> 43 <span v-else>{{ $t('global.status.off') }}</span> 44 </b-form-checkbox> 45 </template> 46 47 <template #row-details="{ item }"> 48 <b-container fluid> 49 <b-row> 50 <b-col class="mt-2" sm="6"> 51 <dl> 52 <!-- Serial number --> 53 <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt> 54 <dd>{{ dataFormatter(item.serialNumber) }}</dd> 55 <!-- Model --> 56 <dt>{{ $t('pageInventory.table.model') }}:</dt> 57 <dd>{{ dataFormatter(item.model) }}</dd> 58 <!-- Asset tag --> 59 <dt>{{ $t('pageInventory.table.assetTag') }}:</dt> 60 <dd class="mb-2"> 61 {{ dataFormatter(item.assetTag) }} 62 </dd> 63 </dl> 64 </b-col> 65 <b-col class="mt-2" sm="6"> 66 <dl> 67 <!-- Status state --> 68 <dt>{{ $t('pageInventory.table.statusState') }}:</dt> 69 <dd>{{ dataFormatter(item.statusState) }}</dd> 70 <!-- Power state --> 71 <dt>{{ $t('pageInventory.table.power') }}:</dt> 72 <dd>{{ dataFormatter(item.powerState) }}</dd> 73 <!-- Health rollup --> 74 <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt> 75 <dd>{{ dataFormatter(item.healthRollup) }}</dd> 76 </dl> 77 </b-col> 78 </b-row> 79 <div class="section-divider mb-3 mt-3"></div> 80 <b-row> 81 <b-col class="mt-1" sm="6"> 82 <dl> 83 <!-- Manufacturer --> 84 <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt> 85 <dd>{{ dataFormatter(item.manufacturer) }}</dd> 86 <!-- Description --> 87 <dt>{{ $t('pageInventory.table.description') }}:</dt> 88 <dd>{{ dataFormatter(item.description) }}</dd> 89 <!-- Sub Model --> 90 <dt>{{ $t('pageInventory.table.subModel') }}:</dt> 91 <dd> 92 {{ dataFormatter(item.subModel) }} 93 </dd> 94 <!-- System Type --> 95 <dt>{{ $t('pageInventory.table.systemType') }}:</dt> 96 <dd> 97 {{ dataFormatter(item.systemType) }} 98 </dd> 99 </dl> 100 </b-col> 101 <b-col sm="6"> 102 <!-- Memory Summary --> 103 <p class="mt-1 mb-2 h6 float-none m-0"> 104 {{ $t('pageInventory.table.memorySummary') }} 105 </p> 106 <dl class="ml-4"> 107 <!-- Total system memory --> 108 <dt>{{ $t('pageInventory.table.totalSystemMemoryGiB') }}:</dt> 109 <dd> 110 {{ dataFormatter(item.totalSystemMemoryGiB) }} 111 {{ $t('unit.GiB') }} 112 </dd> 113 </dl> 114 <!-- Processor Summary --> 115 <p class="mt-1 mb-2 h6 float-none m-0"> 116 {{ $t('pageInventory.table.processorSummary') }} 117 </p> 118 <dl class="ml-4"> 119 <!-- Count --> 120 <dt>{{ $t('pageInventory.table.count') }}:</dt> 121 <dd>{{ dataFormatter(item.processorSummaryCount) }}</dd> 122 <!-- Core Count --> 123 <dt>{{ $t('pageInventory.table.coreCount') }}:</dt> 124 <dd>{{ dataFormatter(item.processorSummaryCoreCount) }}</dd> 125 </dl> 126 </b-col> 127 </b-row> 128 </b-container> 129 </template> 130 </b-table> 131 </page-section> 132</template> 133 134<script> 135import BVToastMixin from '@/components/Mixins/BVToastMixin'; 136import PageSection from '@/components/Global/PageSection'; 137import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; 138 139import StatusIcon from '@/components/Global/StatusIcon'; 140 141import TableRowExpandMixin, { 142 expandRowLabel, 143} from '@/components/Mixins/TableRowExpandMixin'; 144import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 145import { useI18n } from 'vue-i18n'; 146import i18n from '@/i18n'; 147 148export default { 149 components: { IconChevron, PageSection, StatusIcon }, 150 mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], 151 data() { 152 return { 153 $t: useI18n().t, 154 isBusy: true, 155 fields: [ 156 { 157 key: 'expandRow', 158 label: '', 159 tdClass: 'table-row-expand', 160 }, 161 { 162 key: 'id', 163 label: i18n.global.t('pageInventory.table.id'), 164 formatter: this.dataFormatter, 165 }, 166 { 167 key: 'hardwareType', 168 label: i18n.global.t('pageInventory.table.hardwareType'), 169 formatter: this.dataFormatter, 170 tdClass: 'text-nowrap', 171 }, 172 { 173 key: 'health', 174 label: i18n.global.t('pageInventory.table.health'), 175 formatter: this.dataFormatter, 176 tdClass: 'text-nowrap', 177 }, 178 { 179 key: 'locationNumber', 180 label: i18n.global.t('pageInventory.table.locationNumber'), 181 formatter: this.dataFormatter, 182 }, 183 { 184 key: 'locationIndicatorActive', 185 label: i18n.global.t('pageInventory.table.identifyLed'), 186 formatter: this.dataFormatter, 187 }, 188 ], 189 expandRowLabel: expandRowLabel, 190 }; 191 }, 192 computed: { 193 systems() { 194 return this.$store.getters['system/systems']; 195 }, 196 }, 197 created() { 198 this.$store.dispatch('system/getSystem').finally(() => { 199 // Emit initial data fetch complete to parent component 200 this.$root.$emit('hardware-status-system-complete'); 201 this.isBusy = false; 202 }); 203 }, 204 methods: { 205 toggleIdentifyLedSwitch(state) { 206 this.$store 207 .dispatch('system/changeIdentifyLedState', state) 208 .then((message) => this.successToast(message)) 209 .catch(({ message }) => this.errorToast(message)); 210 }, 211 }, 212}; 213</script> 214