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

6 files changed, 119 insertions, 24 deletions

diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index c979759b..ab4adb63 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import SetFocusMixin from '@/components/Mixins/SetFocusMixin';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
 export default {
   name: 'PageContainer',
-  mixins: [SetFocusMixin],
+  mixins: [JumpLinkMixin],
   created() {
     this.$root.$on('skip-navigation', () => {
       this.setFocus(this.$el);
diff --git a/src/components/Mixins/JumpLinkMixin.js b/src/components/Mixins/JumpLinkMixin.js
new file mode 100644
index 00000000..b038527b
--- /dev/null
+++ b/src/components/Mixins/JumpLinkMixin.js
@@ -0,0 +1,27 @@
+const JumpLinkMixin = {
+  methods: {
+    setFocus(element) {
+      element.setAttribute('tabindex', '-1');
+      element.focus();
+      // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+      element.removeAttribute('tabindex');
+    },
+    scrollToOffset(event) {
+      // Select element to scroll to
+      const ref = event.target.getAttribute('data-ref');
+      const element = this.$refs[ref].$el;
+
+      // Set focus and tabindex on selected element
+      this.setFocus(element);
+
+      // Set scroll offset below header
+      const offset = element.offsetTop - 50;
+      window.scroll({
+        top: offset,
+        behavior: 'smooth',
+      });
+    },
+  },
+};
+
+export default JumpLinkMixin;
diff --git a/src/components/Mixins/SetFocusMixin.js b/src/components/Mixins/SetFocusMixin.js
deleted file mode 100644
index ae3e8e0f..00000000
--- a/src/components/Mixins/SetFocusMixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const setFocusMixin = {
-  methods: {
-    setFocus(element) {
-      element.setAttribute('tabindex', '-1');
-      element.focus();
-      // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
-      element.removeAttribute('tabindex');
-    },
-  },
-};
-
-export default setFocusMixin;
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index d5b4c3df..41b2e443 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -15,7 +15,7 @@ import AppHeader from '@/components/AppHeader';
 import AppNavigation from '@/components/AppNavigation';
 import PageContainer from '@/components/Global/PageContainer';
 import ButtonBackToTop from '@/components/Global/ButtonBackToTop';
-import SetFocusMixin from '@/components/Mixins/SetFocusMixin';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
 
 export default {
   name: 'App',
@@ -25,7 +25,7 @@ export default {
     PageContainer,
     ButtonBackToTop,
   },
-  mixins: [SetFocusMixin],
+  mixins: [JumpLinkMixin],
   data() {
     return {
       routerKey: 0,
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 34efa621..ef4a417e 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -372,6 +372,7 @@
     "bmcManager": "BMC manager",
     "chassis": "Chassis",
     "processors": "Processors",
+    "quicklinkTitle": "Quick links to hardware components",
     "system": "System",
     "table": {
       "assetTag": "Asset tag",
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) => {