xref: /openbmc/webui-vue/src/views/HardwareStatus/Inventory/Inventory.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
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