Fix inventory page

Id task: SILABMC-155

24 files changed, 125 insertions, 72 deletions

diff --git a/.gitignore b/.gitignore
index df0df9bb..644e3f3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
+.prettierrc
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index bb56ba83..d86d40de 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -210,7 +210,7 @@
 
 .bootstrap-table__section {
   position: relative;
-  margin: 16px 2rem 0 2rem;
+  margin: 16px 2rem 24px 2rem;
   width: 90%;
 }
 
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dd39ddd5..0521dc06 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="page-section">
     <h2 v-if="sectionTitle">{{ sectionTitle }}</h2>
+    <span v-if="sectionSmallTitle" class="bold-16px">
+      {{ sectionSmallTitle }}
+    </span>
     <slot />
   </div>
 </template>
@@ -13,17 +16,26 @@ export default {
       type: String,
       default: '',
     },
+    sectionSmallTitle: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .page-section {
-  margin-bottom: $spacer * 4;
+  margin-bottom: $spacer * 1;
 }
 
 h2 {
   @include font-size($h3-font-size);
   margin-bottom: $spacer;
 }
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
 </style>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633e..fb818451 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,26 +1,30 @@
 <template>
   <span :class="['status-icon', status]">
     <icon-info v-if="status === 'info'" />
-    <icon-success v-else-if="status === 'success'" />
+    <img
+      v-else-if="status === 'success'"
+      class="status__img"
+      src="@/assets/images/status/on.svg"
+    />
     <icon-warning v-else-if="status === 'warning'" />
-    <icon-danger v-else-if="status === 'danger'" />
+    <img
+      v-else-if="status === 'danger'"
+      class="status__img"
+      src="@/assets/images/status/off.svg"
+    />
     <icon-secondary v-else />
   </span>
 </template>
 
 <script>
 import IconInfo from '@carbon/icons-vue/es/information--filled/20';
-import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
 import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
 import IconError from '@carbon/icons-vue/es/error--filled/20';
-import IconMisuse from '@carbon/icons-vue/es/misuse/20';
 
 export default {
   name: 'StatusIcon',
   components: {
     IconInfo: IconInfo,
-    iconSuccess: IconCheckmark,
-    iconDanger: IconMisuse,
     iconSecondary: IconError,
     iconWarning: IconWarning,
   },
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index 132002fe..0e97f711 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,20 +1,23 @@
 <template>
-  <b-container fluid="xxl pt-0 m-2">
+  <b-container fluid class="p-0 m-0">
     <page-title />
     <!-- Service indicators -->
     <service-indicator />
 
     <!-- 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">
+    <page-section
+      class="bootstrap-table__section"
+      :section-small-title="$t('pageInventory.quicklinkTitle')"
+    >
+      <b-row>
+        <b-col v-for="column in quicklinkColumns" :key="column.id">
           <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 }}
+              {{ item.linkText }}
             </b-link>
           </div>
         </b-col>
@@ -60,7 +63,6 @@ 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';
 
@@ -77,7 +79,6 @@ export default {
     TableProcessors,
     TableAssembly,
     PageSection,
-    JumpLink: JumpLink16,
   },
   mixins: [LoadingBarMixin, JumpLinkMixin],
   beforeRouteLeave(to, from, next) {
diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
index 01f4a446..cfb9aa84 100644
--- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -1,8 +1,9 @@
 <template>
   <page-section
-    :section-title="$t('pageInventory.systemIndicator.sectionTitle')"
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.systemIndicator.sectionTitle')"
   >
-    <div class="form-background pl-4 pt-4 pb-1">
+    <div class="form-background">
       <b-row>
         <b-col sm="6" md="3">
           <dl>
@@ -74,3 +75,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.custom-switch {
+  margin: 0;
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index b4010bfe..f7fef0e3 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -1,13 +1,15 @@
 <template>
-  <page-section :section-title="$t('pageInventory.assemblies')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.assemblies')"
+  >
     <b-table
+      class="bootstrap-rounded-table"
       sort-icon-left
       no-sort-reset
-      hover
       responsive="md"
       :items="items"
       :fields="fields"
-      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 48b914f4..41a88c2e 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -1,11 +1,14 @@
 <template>
-  <page-section :section-title="$t('pageInventory.bmcManager')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.bmcManager')"
+  >
     <b-table
+      class="bootstrap-rounded-table"
       responsive="md"
-      hover
+      show-empty
       :items="items"
       :fields="fields"
-      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
@@ -15,7 +18,6 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :title="expandRowLabel"
-          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
@@ -243,3 +245,38 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+  flex-wrap: nowrap;
+}
+.fans-table-col-first__cell {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.status__img {
+  margin-right: 7px;
+}
+
+.bold-12px__caps {
+  color: $text-secondary;
+}
+
+.attrib-names {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  color: $text-secondary !important;
+  font-weight: 600;
+}
+
+.custom-switch {
+  margin: 0;
+}
+
+.btn-link {
+  width: 30px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index b49cec7f..60f593f4 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -1,11 +1,14 @@
 <template>
-  <page-section :section-title="$t('pageInventory.chassis')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.chassis')"
+  >
     <b-table
+      class="bootstrap-rounded-table"
       responsive="md"
-      hover
+      show-empty
       :items="chassis"
       :fields="fields"
-      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 65994810..020ab1f6 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -1,5 +1,8 @@
 <template>
-  <page-section :section-title="$t('pageInventory.dimmSlot')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.dimmSlot')"
+  >
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
         <search
@@ -15,9 +18,9 @@
       </b-col>
     </b-row>
     <b-table
+      class="bootstrap-rounded-table"
       sort-icon-left
       no-sort-reset
-      hover
       sort-by="health"
       responsive="md"
       show-empty
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index fe788c53..8706f498 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -1,5 +1,8 @@
 <template>
-  <page-section :section-title="$t('pageInventory.fans')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.fans')"
+  >
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
         <search
@@ -15,9 +18,9 @@
       </b-col>
     </b-row>
     <b-table
+      class="bootstrap-rounded-table"
       sort-icon-left
       no-sort-reset
-      hover
       responsive="md"
       sort-by="health"
       show-empty
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index aed7871a..9417d9d6 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -1,5 +1,8 @@
 <template>
-  <page-section :section-title="$t('pageInventory.powerSupplies')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.powerSupplies')"
+  >
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
         <search
@@ -15,6 +18,7 @@
       </b-col>
     </b-row>
     <b-table
+      class="bootstrap-rounded-table"
       sort-icon-left
       no-sort-reset
       hover
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index 49281e14..3e25747d 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -1,5 +1,8 @@
 <template>
-  <page-section :section-title="$t('pageInventory.processors')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.processors')"
+  >
     <!-- Search -->
     <b-row class="align-items-end">
       <b-col sm="6" md="5" xl="4">
@@ -12,10 +15,12 @@
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="processors.length"
-        ></table-cell-count>
+        >
+        </table-cell-count>
       </b-col>
     </b-row>
     <b-table
+      class="bootstrap-rounded-table"
       sort-icon-left
       no-sort-reset
       hover
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index cf2cf020..1576c8d8 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -1,8 +1,11 @@
 <template>
-  <page-section :section-title="$t('pageInventory.system')">
+  <page-section
+    class="bootstrap-table__section"
+    :section-small-title="$t('pageInventory.system')"
+  >
     <b-table
+      class="bootstrap-rounded-table"
       responsive="md"
-      hover
       show-empty
       :items="systems"
       :fields="fields"
@@ -222,3 +225,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.custom-switch {
+  margin: 0;
+}
+</style>
diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
index 92df5373..c1716ec6 100644
--- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue
+++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
@@ -228,9 +228,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
 .info_section {
   margin-bottom: 0px;
 }
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 844dc693..c526abbd 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -137,9 +137,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
 .info_section {
   margin-bottom: 0px;
 }
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
index 16aeec10..64a01241 100644
--- a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
@@ -348,10 +348,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 25px 0 16px 0;
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
index 6890f2c0..de55482d 100644
--- a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
@@ -194,10 +194,6 @@ export default {
   width: auto;
 }
 
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 25px 0 16px 0;
diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue
index 7eb410f2..adf754ac 100644
--- a/src/views/SILA/PciDevices/PciDevicesPage.vue
+++ b/src/views/SILA/PciDevices/PciDevicesPage.vue
@@ -151,10 +151,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 25px 0 16px 0;
diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
index f5448871..6a4f631d 100644
--- a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
+++ b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
@@ -125,9 +125,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
 .info_section {
   margin-bottom: 0px;
 }
diff --git a/src/views/SILA/RAID/Cache/RAIDCachePage.vue b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
index 60ca3a81..9196af6b 100644
--- a/src/views/SILA/RAID/Cache/RAIDCachePage.vue
+++ b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
@@ -111,10 +111,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 0 0 16px 0;
diff --git a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
index 69380666..615155d3 100644
--- a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
+++ b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
@@ -272,10 +272,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 25px 0 16px 0;
diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
index 44eba030..cb0438e1 100644
--- a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
+++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
@@ -243,10 +243,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
-
 .bold-16px {
   display: block;
   margin: 25px 0 16px 0;
diff --git a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
index 6a4c79e7..4292db40 100644
--- a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
+++ b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
@@ -114,9 +114,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.bootstrap-table__section {
-  margin-bottom: 24px;
-}
 .info_section {
   margin-bottom: 0px;
 }