Add quicklinks to hardware status page

- Renames SetFocusMixin to JumpLinkMixin to better describe what the
mixin is for: jump links like quick links and skip to main content
- Adds scrollToOffset method to JumpLinkMixin methods to scroll to
selected page elements
- Scroll offset is required to show table header below the nav header
- Setting focus is required for accessibility

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I500a2d70727c5a78aeae4a6193ba22a38e4f0b6f

1 files changed, 87 insertions, 8 deletions

diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index 0869e286..0e37f6e8 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -2,26 +2,43 @@
   <b-container fluid="xl">
     <page-title />
 
+    <!-- Quicklinks section -->
+    <page-section :section-title="$t('pageHardwareStatus.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 />
+    <table-system ref="system" />
 
     <!-- BMC manager table -->
-    <table-bmc-manager />
+    <table-bmc-manager ref="bmc" />
 
     <!-- Chassis table -->
-    <table-chassis />
+    <table-chassis ref="chassis" />
 
     <!-- DIMM slot table -->
-    <table-dimm-slot />
+    <table-dimm-slot ref="dimms" />
 
     <!-- Fans table -->
-    <table-fans />
+    <table-fans ref="fans" />
 
     <!-- Power supplies table -->
-    <table-power-supplies />
+    <table-power-supplies ref="powerSupply" />
 
     <!-- Processors table -->
-    <table-processors />
+    <table-processors ref="processors" />
   </b-container>
 </template>
 
@@ -35,6 +52,12 @@ import TableBmcManager from './HardwareStatusTableBmcManager';
 import TableChassis from './HardwareStatusTableChassis';
 import TableProcessors from './HardwareStatusTableProcessors';
 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: {
@@ -46,14 +69,70 @@ export default {
     TableBmcManager,
     TableChassis,
     TableProcessors,
+    PageSection,
+    JumpLink: JumpLink16,
   },
-  mixins: [LoadingBarMixin],
+  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: 'bmc',
+          dataRef: 'bmc',
+          href: '#bmc',
+          linkText: this.$t('pageHardwareStatus.bmcManager'),
+        },
+        {
+          id: 'chassis',
+          dataRef: 'chassis',
+          href: '#chassis',
+          linkText: this.$t('pageHardwareStatus.chassis'),
+        },
+        {
+          id: 'dimms',
+          dataRef: 'dimms',
+          href: '#dimms',
+          linkText: this.$t('pageHardwareStatus.dimmSlot'),
+        },
+        {
+          id: 'fans',
+          dataRef: 'fans',
+          href: '#fans',
+          linkText: this.$t('pageHardwareStatus.fans'),
+        },
+        {
+          id: 'powerSupply',
+          dataRef: 'powerSupply',
+          href: '#powerSupply',
+          linkText: this.$t('pageHardwareStatus.powerSupplies'),
+        },
+        {
+          id: 'processors',
+          dataRef: 'processors',
+          href: '#processors',
+          linkText: this.$t('pageHardwareStatus.processors'),
+        },
+        {
+          id: 'system',
+          dataRef: 'system',
+          href: '#system',
+          linkText: this.$t('pageHardwareStatus.system'),
+        },
+      ],
+    };
+  },
+  computed: {
+    quicklinkColumns() {
+      // Chunk links array to 3 array's to display 3 items per column
+      return chunk(this.links, 3);
+    },
+  },
   created() {
     this.startLoader();
     const systemTablePromise = new Promise((resolve) => {