1 <template> 2 <b-container fluid="xl"> 3 <page-title /> 4 5 <!-- Service indicators --> 6 <service-indicator /> 7 8 <!-- Quicklinks section --> 9 <page-section :section-title="$t('pageInventory.quicklinkTitle')"> 10 <b-row class="w-75"> 11 <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4"> 12 <div v-for="item in column" :key="item.id"> 13 <b-link 14 :href="item.href" 15 :data-ref="item.dataRef" 16 @click.prevent="scrollToOffset" 17 > 18 <jump-link /> {{ item.linkText }} 19 </b-link> 20 </div> 21 </b-col> 22 </b-row> 23 </page-section> 24 25 <!-- System table --> 26 <table-system ref="system" /> 27 28 <!-- BMC manager table --> 29 <table-bmc-manager ref="bmc" /> 30 31 <!-- Chassis table --> 32 <table-chassis ref="chassis" /> 33 34 <!-- DIMM slot table --> 35 <table-dimm-slot ref="dimms" /> 36 37 <!-- Fans table --> 38 <table-fans ref="fans" /> 39 40 <!-- Power supplies table --> 41 <table-power-supplies ref="powerSupply" /> 42 43 <!-- Processors table --> 44 <table-processors ref="processors" /> 45 46 <!-- Assembly table --> 47 <table-assembly ref="assembly" /> 48 </b-container> 49 </template> 50 51 <script> 52 import PageTitle from '@/components/Global/PageTitle'; 53 import ServiceIndicator from './InventoryServiceIndicator'; 54 import TableSystem from './InventoryTableSystem'; 55 import TablePowerSupplies from './InventoryTablePowerSupplies'; 56 import TableDimmSlot from './InventoryTableDimmSlot'; 57 import TableFans from './InventoryTableFans'; 58 import TableBmcManager from './InventoryTableBmcManager'; 59 import TableChassis from './InventoryTableChassis'; 60 import TableProcessors from './InventoryTableProcessors'; 61 import TableAssembly from './InventoryTableAssembly'; 62 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; 63 import PageSection from '@/components/Global/PageSection'; 64 import JumpLink16 from '@carbon/icons-vue/es/jump-link/16'; 65 import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; 66 import { chunk } from 'lodash'; 67 import { useI18n } from 'vue-i18n'; 68 import i18n from '@/i18n'; 69 70 export default { 71 components: { 72 PageTitle, 73 ServiceIndicator, 74 TableDimmSlot, 75 TablePowerSupplies, 76 TableSystem, 77 TableFans, 78 TableBmcManager, 79 TableChassis, 80 TableProcessors, 81 TableAssembly, 82 PageSection, 83 JumpLink: JumpLink16, 84 }, 85 mixins: [LoadingBarMixin, JumpLinkMixin], 86 beforeRouteLeave(to, from, next) { 87 // Hide loader if user navigates away from page 88 // before requests complete 89 this.hideLoader(); 90 next(); 91 }, 92 data() { 93 return { 94 $t: useI18n().t, 95 links: [ 96 { 97 id: 'system', 98 dataRef: 'system', 99 href: '#system', 100 linkText: i18n.global.t('pageInventory.system'), 101 }, 102 { 103 id: 'bmc', 104 dataRef: 'bmc', 105 href: '#bmc', 106 linkText: i18n.global.t('pageInventory.bmcManager'), 107 }, 108 { 109 id: 'chassis', 110 dataRef: 'chassis', 111 href: '#chassis', 112 linkText: i18n.global.t('pageInventory.chassis'), 113 }, 114 { 115 id: 'dimms', 116 dataRef: 'dimms', 117 href: '#dimms', 118 linkText: i18n.global.t('pageInventory.dimmSlot'), 119 }, 120 { 121 id: 'fans', 122 dataRef: 'fans', 123 href: '#fans', 124 linkText: i18n.global.t('pageInventory.fans'), 125 }, 126 { 127 id: 'powerSupply', 128 dataRef: 'powerSupply', 129 href: '#powerSupply', 130 linkText: i18n.global.t('pageInventory.powerSupplies'), 131 }, 132 { 133 id: 'processors', 134 dataRef: 'processors', 135 href: '#processors', 136 linkText: i18n.global.t('pageInventory.processors'), 137 }, 138 { 139 id: 'assembly', 140 dataRef: 'assembly', 141 href: '#assembly', 142 linkText: i18n.global.t('pageInventory.assemblies'), 143 }, 144 ], 145 }; 146 }, 147 computed: { 148 quicklinkColumns() { 149 // Chunk links array to 3 array's to display 3 items per column 150 return chunk(this.links, 3); 151 }, 152 }, 153 created() { 154 this.startLoader(); 155 const bmcManagerTablePromise = new Promise((resolve) => { 156 this.$root.$on('hardware-status-bmc-manager-complete', () => resolve()); 157 }); 158 const chassisTablePromise = new Promise((resolve) => { 159 this.$root.$on('hardware-status-chassis-complete', () => resolve()); 160 }); 161 const dimmSlotTablePromise = new Promise((resolve) => { 162 this.$root.$on('hardware-status-dimm-slot-complete', () => resolve()); 163 }); 164 const fansTablePromise = new Promise((resolve) => { 165 this.$root.$on('hardware-status-fans-complete', () => resolve()); 166 }); 167 const powerSuppliesTablePromise = new Promise((resolve) => { 168 this.$root.$on('hardware-status-power-supplies-complete', () => 169 resolve(), 170 ); 171 }); 172 const processorsTablePromise = new Promise((resolve) => { 173 this.$root.$on('hardware-status-processors-complete', () => resolve()); 174 }); 175 const serviceIndicatorPromise = new Promise((resolve) => { 176 this.$root.$on('hardware-status-service-complete', () => resolve()); 177 }); 178 const systemTablePromise = new Promise((resolve) => { 179 this.$root.$on('hardware-status-system-complete', () => resolve()); 180 }); 181 const assemblyTablePromise = new Promise((resolve) => { 182 this.$root.$on('hardware-status-assembly-complete', () => resolve()); 183 }); 184 // Combine all child component Promises to indicate 185 // when page data load complete 186 Promise.all([ 187 bmcManagerTablePromise, 188 chassisTablePromise, 189 dimmSlotTablePromise, 190 fansTablePromise, 191 powerSuppliesTablePromise, 192 processorsTablePromise, 193 serviceIndicatorPromise, 194 systemTablePromise, 195 assemblyTablePromise, 196 ]).finally(() => this.endLoader()); 197 }, 198 }; 199 </script> 200