From 3f4094d08b873e17464a51c817ea7d41177f848d Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:11:28 +0300
Subject: IBS: _ibs UI Theme

---
 .../_ibs/HardwareStatus/Inventory/Inventory.vue    | 198 +++++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 src/views/_ibs/HardwareStatus/Inventory/Inventory.vue

(limited to 'src/views/_ibs/HardwareStatus/Inventory/Inventory.vue')

diff --git a/src/views/_ibs/HardwareStatus/Inventory/Inventory.vue b/src/views/_ibs/HardwareStatus/Inventory/Inventory.vue
new file mode 100644
index 00000000..0cc542e7
--- /dev/null
+++ b/src/views/_ibs/HardwareStatus/Inventory/Inventory.vue
@@ -0,0 +1,198 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <!-- Service indicators -->
+    <div class="service-indicators">
+      <service-indicator />
+    </div>
+
+    <!-- Quicklinks section -->
+    <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+      <b-row class="w-75">
+        <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
+          <div v-for="item in column" :key="item.id">
+            <b-link
+              :href="item.href"
+              :data-ref="item.dataRef"
+              @click.prevent="scrollToOffset"
+            >
+              <jump-link /> {{ item.linkText }}
+            </b-link>
+          </div>
+        </b-col>
+      </b-row>
+    </page-section>
+
+    <!-- System table -->
+    <table-system ref="system" />
+
+    <!-- BMC manager table -->
+    <table-bmc-manager ref="bmc" />
+
+    <!-- Chassis table -->
+    <table-chassis ref="chassis" />
+
+    <!-- DIMM slot table -->
+    <table-dimm-slot ref="dimms" />
+
+    <!-- Fans table -->
+    <table-fans ref="fans" />
+
+    <!-- Power supplies table -->
+    <table-power-supplies ref="powerSupply" />
+
+    <!-- Processors table -->
+    <table-processors ref="processors" />
+
+    <!-- Assembly table -->
+    <table-assembly ref="assembly" />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import ServiceIndicator from './InventoryServiceIndicator';
+import TableSystem from './InventoryTableSystem';
+import TablePowerSupplies from './InventoryTablePowerSupplies';
+import TableDimmSlot from './InventoryTableDimmSlot';
+import TableFans from './InventoryTableFans';
+import TableBmcManager from './InventoryTableBmcManager';
+import TableChassis from './InventoryTableChassis';
+import TableProcessors from './InventoryTableProcessors';
+import TableAssembly from './InventoryTableAssembly';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
+import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+import { chunk } from 'lodash';
+
+export default {
+  components: {
+    PageTitle,
+    ServiceIndicator,
+    TableDimmSlot,
+    TablePowerSupplies,
+    TableSystem,
+    TableFans,
+    TableBmcManager,
+    TableChassis,
+    TableProcessors,
+    TableAssembly,
+    PageSection,
+    JumpLink: JumpLink16,
+  },
+  mixins: [LoadingBarMixin, JumpLinkMixin],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      links: [
+        {
+          id: 'system',
+          dataRef: 'system',
+          href: '#system',
+          linkText: this.$t('pageInventory.system'),
+        },
+        {
+          id: 'bmc',
+          dataRef: 'bmc',
+          href: '#bmc',
+          linkText: this.$t('pageInventory.bmcManager'),
+        },
+        {
+          id: 'chassis',
+          dataRef: 'chassis',
+          href: '#chassis',
+          linkText: this.$t('pageInventory.chassis'),
+        },
+        {
+          id: 'dimms',
+          dataRef: 'dimms',
+          href: '#dimms',
+          linkText: this.$t('pageInventory.dimmSlot'),
+        },
+        {
+          id: 'fans',
+          dataRef: 'fans',
+          href: '#fans',
+          linkText: this.$t('pageInventory.fans'),
+        },
+        {
+          id: 'powerSupply',
+          dataRef: 'powerSupply',
+          href: '#powerSupply',
+          linkText: this.$t('pageInventory.powerSupplies'),
+        },
+        {
+          id: 'processors',
+          dataRef: 'processors',
+          href: '#processors',
+          linkText: this.$t('pageInventory.processors'),
+        },
+        {
+          id: 'assembly',
+          dataRef: 'assembly',
+          href: '#assembly',
+          linkText: this.$t('pageInventory.assemblies'),
+        },
+      ],
+    };
+  },
+  computed: {
+    quicklinkColumns() {
+      // Chunk links array to 3 array's to display 3 items per column
+      return chunk(this.links, 3);
+    },
+  },
+  created() {
+    this.startLoader();
+    const bmcManagerTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
+    });
+    const chassisTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-chassis-complete', () => resolve());
+    });
+    const dimmSlotTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-dimm-slot-complete', () => resolve());
+    });
+    const fansTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-fans-complete', () => resolve());
+    });
+    const powerSuppliesTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-power-supplies-complete', () =>
+        resolve()
+      );
+    });
+    const processorsTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-processors-complete', () => resolve());
+    });
+    const serviceIndicatorPromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-service-complete', () => resolve());
+    });
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
+    const assemblyTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-assembly-complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      bmcManagerTablePromise,
+      chassisTablePromise,
+      dimmSlotTablePromise,
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      processorsTablePromise,
+      serviceIndicatorPromise,
+      systemTablePromise,
+      assemblyTablePromise,
+    ]).finally(() => this.endLoader());
+  },
+};
+</script>
-- 
cgit v1.2.3