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