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>
52import PageTitle from '@/components/Global/PageTitle';
53import ServiceIndicator from './InventoryServiceIndicator';
54import TableSystem from './InventoryTableSystem';
55import TablePowerSupplies from './InventoryTablePowerSupplies';
56import TableDimmSlot from './InventoryTableDimmSlot';
57import TableFans from './InventoryTableFans';
58import TableBmcManager from './InventoryTableBmcManager';
59import TableChassis from './InventoryTableChassis';
60import TableProcessors from './InventoryTableProcessors';
61import TableAssembly from './InventoryTableAssembly';
62import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
63import PageSection from '@/components/Global/PageSection';
64import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
65import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
66import { chunk } from 'lodash';
67
68export default {
69  components: {
70    PageTitle,
71    ServiceIndicator,
72    TableDimmSlot,
73    TablePowerSupplies,
74    TableSystem,
75    TableFans,
76    TableBmcManager,
77    TableChassis,
78    TableProcessors,
79    TableAssembly,
80    PageSection,
81    JumpLink: JumpLink16,
82  },
83  mixins: [LoadingBarMixin, JumpLinkMixin],
84  beforeRouteLeave(to, from, next) {
85    // Hide loader if user navigates away from page
86    // before requests complete
87    this.hideLoader();
88    next();
89  },
90  data() {
91    return {
92      links: [
93        {
94          id: 'system',
95          dataRef: 'system',
96          href: '#system',
97          linkText: this.$t('pageInventory.system'),
98        },
99        {
100          id: 'bmc',
101          dataRef: 'bmc',
102          href: '#bmc',
103          linkText: this.$t('pageInventory.bmcManager'),
104        },
105        {
106          id: 'chassis',
107          dataRef: 'chassis',
108          href: '#chassis',
109          linkText: this.$t('pageInventory.chassis'),
110        },
111        {
112          id: 'dimms',
113          dataRef: 'dimms',
114          href: '#dimms',
115          linkText: this.$t('pageInventory.dimmSlot'),
116        },
117        {
118          id: 'fans',
119          dataRef: 'fans',
120          href: '#fans',
121          linkText: this.$t('pageInventory.fans'),
122        },
123        {
124          id: 'powerSupply',
125          dataRef: 'powerSupply',
126          href: '#powerSupply',
127          linkText: this.$t('pageInventory.powerSupplies'),
128        },
129        {
130          id: 'processors',
131          dataRef: 'processors',
132          href: '#processors',
133          linkText: this.$t('pageInventory.processors'),
134        },
135        {
136          id: 'assembly',
137          dataRef: 'assembly',
138          href: '#assembly',
139          linkText: this.$t('pageInventory.assemblies'),
140        },
141      ],
142    };
143  },
144  computed: {
145    quicklinkColumns() {
146      // Chunk links array to 3 array's to display 3 items per column
147      return chunk(this.links, 3);
148    },
149  },
150  created() {
151    this.startLoader();
152    const bmcManagerTablePromise = new Promise((resolve) => {
153      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
154    });
155    const chassisTablePromise = new Promise((resolve) => {
156      this.$root.$on('hardware-status-chassis-complete', () => resolve());
157    });
158    const dimmSlotTablePromise = new Promise((resolve) => {
159      this.$root.$on('hardware-status-dimm-slot-complete', () => resolve());
160    });
161    const fansTablePromise = new Promise((resolve) => {
162      this.$root.$on('hardware-status-fans-complete', () => resolve());
163    });
164    const powerSuppliesTablePromise = new Promise((resolve) => {
165      this.$root.$on('hardware-status-power-supplies-complete', () =>
166        resolve()
167      );
168    });
169    const processorsTablePromise = new Promise((resolve) => {
170      this.$root.$on('hardware-status-processors-complete', () => resolve());
171    });
172    const serviceIndicatorPromise = new Promise((resolve) => {
173      this.$root.$on('hardware-status-service-complete', () => resolve());
174    });
175    const systemTablePromise = new Promise((resolve) => {
176      this.$root.$on('hardware-status-system-complete', () => resolve());
177    });
178    const assemblyTablePromise = new Promise((resolve) => {
179      this.$root.$on('hardware-status-assembly-complete', () => resolve());
180    });
181    // Combine all child component Promises to indicate
182    // when page data load complete
183    Promise.all([
184      bmcManagerTablePromise,
185      chassisTablePromise,
186      dimmSlotTablePromise,
187      fansTablePromise,
188      powerSuppliesTablePromise,
189      processorsTablePromise,
190      serviceIndicatorPromise,
191      systemTablePromise,
192      assemblyTablePromise,
193    ]).finally(() => this.endLoader());
194  },
195};
196</script>
197