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