Implemented Inventory page

src/assets/styles/bmc/custom/_card.scss

@@ -2,6 +2,7 @@
   .bg-success {
     background-color: theme-color-light($success) !important;
   }
+  width: 120%;
 }
 
 .card-header,

src/assets/styles/bmc/custom/_tables.scss

@@ -2,6 +2,7 @@
 .b-table-sticky-header {
   max-height: 75vh;
   min-height: 100px;
+  min-width: 116%;
   border: 1px solid #efefef;
   .table.b-table {
     thead {
@@ -18,7 +19,6 @@
           //     background-color: $light;
           //   }
           // }
-
           vertical-align: middle;
           border-top: 1px solid $gray-300;
           border-bottom: 1px solid $gray-300;
@@ -52,6 +52,7 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
+  overflow-x: visible;
 
   td {
     border-top: 1px solid $gray-300;

src/components/Composables/useJumpLinkComposable.js

@@ -17,9 +17,25 @@ const useJumpLinkComposable = () => {
       behavior: 'smooth',
     });
   };
+  const scrollToOffsetInventory = (refs, event, index) => {
+    // Select element to scroll to
+    const ref = event.target.getAttribute('data-ref');
+    const element = refs[ref][index].$el;
+
+    // Set focus and tabindex on selected element
+    setFocus(element);
+
+    // Set scroll offset below header
+    const offset = element.offsetTop + 300;
+    window.scroll({
+      top: offset,
+      behavior: 'smooth',
+    });
+  };
   return {
     setFocus,
     scrollToOffset,
+    scrollToOffsetInventory,
   };
 };
 

src/components/Composables/useSearchFilterComposable.js

@@ -1,14 +1,18 @@
-export const searchFilter = null;
+import { ref } from 'vue';
 const useSearchFilterComposable = () => {
-  const onChangeSearchInput = (searchValue) => {
-    return searchValue;
+  let searchFilterInput = ref('');
+  const onChangeSearch = (searchValue) => {
+    searchFilterInput.value = searchValue;
+    return;
   };
-  const onClearSearchInput = () => {
-    return null;
+  const onClearSearch = () => {
+    searchFilterInput.value = '';
+    return;
   };
   return {
-    onChangeSearchInput,
-    onClearSearchInput,
+    searchFilterInput,
+    onChangeSearch,
+    onClearSearch,
   };
 };
 

src/components/Composables/useTableRowExpandComposable.js

@@ -7,10 +7,14 @@ const useTableRowExpandComposable = () => {
       ? i18n.global.t('global.table.collapseTableRow')
       : i18n.global.t('global.table.expandTableRow');
   };
-
+  const toggleRow = (row) => {
+    row.item.toggleDetails = !row.item.toggleDetails;
+    toggleRowDetails(row);
+  };
   return {
     expandRowLabel,
     toggleRowDetails,
+    toggleRow,
   };
 };
 

src/components/Global/InfoTooltip.vue

@@ -30,5 +30,6 @@ defineProps({
   svg {
     vertical-align: baseline;
   }
+  overflow: visible;
 }
 </style>

src/components/Global/Search.vue

@@ -40,17 +40,17 @@
 import IconSearch from '@carbon/icons-vue/es/search/16';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import { useI18n } from 'vue-i18n';
-import { ref, watch, defineEmits } from 'vue';
-import eventBus from '@/eventBus';
-
+import { ref, defineEmits } from 'vue';
+import i18n from '@/i18n';
+// eslint-disable-next-line vue/valid-define-emits
 const emit = defineEmits();
 const { t } = useI18n();
 
 const props = defineProps({
   placeholder: {
     type: String,
     default: function () {
-      return this.t('global.form.search');
+      return i18n.global.t('global.form.search');
     },
   },
   isSearchDisabled: {

src/router/routes.js

@@ -1,4 +1,5 @@
 //TODO: Work Requird -->
+
 import i18n from '@/i18n';
 import LoginLayout from '@/layouts/LoginLayout.vue';
 import LoginPage from '@/views/Login/Login.vue';
@@ -21,6 +22,7 @@ import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
 import Sessions from '@/views/SecurityAndAccess/Sessions';
 import Firmware from '@/views/Operations/Firmware';
+import Inventory from '../views/HardwareStatus/Inventory/Inventory.vue';
 
 const roles = {
   administrator: 'Administrator',
@@ -78,6 +80,14 @@ export const routes = [
         component: ConcurrentMaintenance,
         meta: {
           title: i18n.global.t('appPageTitle.concurrentMaintenance'),
+        }
+      },
+      {
+        path: '/hardware-status/inventory',
+        name: 'inventory',
+        component: Inventory,
+        meta: {
+          title: i18n.global.t('appPageTitle.inventory'),
         },
       },
       {

src/store/index.js

@@ -18,7 +18,13 @@ import AuditLogsStore from './modules/Logs/AuditLogsStore';
 import SessionsStore from './modules/SecurityAndAccess/SessionsStore.js';
 import LicenseStore from './modules/ResourceManagement/LicenseStore';
 import BmcStore from './modules/HardwareStatus/BmcStore';
-
+import ChassisStore from './modules/HardwareStatus/ChassisStore';
+import PowerSupplyStore from './modules/HardwareStatus/PowerSupplyStore';
+import PcieSlotsStore from './modules/HardwareStatus/PcieSlotsStore';
+import FanStore from './modules/HardwareStatus/FanStore';
+import MemoryStore from './modules/HardwareStatus/MemoryStore';
+import AssemblyStore from './modules/HardwareStatus/AssemblyStore';
+import FabricAdaptersStore from './modules/HardwareStatus/FabricAdaptersStore';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -39,5 +45,12 @@ export {
   AuditLogsStore,
   SessionsStore,
   LicenseStore,
+  ChassisStore,
+  PowerSupplyStore,
+  PcieSlotsStore,
+  FanStore,
+  MemoryStore,
   BmcStore,
+  AssemblyStore,
+  FabricAdaptersStore,
 };

src/store/modules/HardwareStatus/AssemblyStore.js

@@ -1,13 +1,14 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const AssemblyStore = {
+export const AssemblyStore = defineStore('assemblyStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     assemblies: null,
-  },
+  }),
   getters: {
-    assemblies: (state) => state.assemblies,
+    assembliesGetter: (state) => state.assemblies,
   },
   mutations: {
     setAssemblyInfo: (state, data) => {
@@ -40,14 +41,42 @@ const AssemblyStore = {
     },
   },
   actions: {
-    async getAssemblyInfo({ commit }, requestBody) {
-      commit('setAssemblyInfo', []);
+    setAssemblyInfo(data) {
+      this.assemblies = data.map((assembly) => {
+        const {
+          MemberId,
+          PartNumber,
+          SerialNumber,
+          SparePartNumber,
+          Model,
+          Name,
+          Location,
+          Status,
+          LocationIndicatorActive,
+        } = assembly;
+        return {
+          id: MemberId,
+          health: Status?.Health,
+          partNumber: PartNumber,
+          serialNumber: SerialNumber,
+          sparePartNumber: SparePartNumber,
+          model: Model,
+          name: Name,
+          locationNumber: Location?.PartLocation?.ServiceLabel,
+          identifyLed: LocationIndicatorActive,
+          status: Status?.State === 'Enabled' ? 'Present' : Status?.State,
+          uri: assembly['@odata.id'],
+        };
+      });
+    },
+    async getAssemblyInfo(requestBody) {
+      this.setAssemblyInfo([]);
       return await api
         .get(`${requestBody.uri}/Assembly`)
-        .then(({ data }) => commit('setAssemblyInfo', data?.Assemblies))
+        .then(({ data }) => this.setAssemblyInfo(data.Assemblies))
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         Assemblies: [
@@ -62,26 +91,30 @@ const AssemblyStore = {
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
           if (led.identifyLed) {
-            return i18n.t('pageInventory.toast.successEnableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successEnableIdentifyLed',
+            );
           } else {
-            return i18n.t('pageInventory.toast.successDisableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successDisableIdentifyLed',
+            );
           }
         })
         .catch((error) => {
-          dispatch('getAssemblyInfo');
+          this.getAssemblyInfo();
           console.log('error', error);
           if (led.identifyLed) {
             throw new Error(
-              i18n.t('pageInventory.toast.errorEnableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorEnableIdentifyLed'),
             );
           } else {
             throw new Error(
-              i18n.t('pageInventory.toast.errorDisableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorDisableIdentifyLed'),
             );
           }
         });
     },
   },
-};
+});
 
 export default AssemblyStore;

src/store/modules/HardwareStatus/ChassisStore.js

@@ -1,19 +1,19 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
-
-const ChassisStore = {
+import { defineStore } from 'pinia';
+export const ChassisStore = defineStore('chassisStore', {
   namespaced: true,
-  state: {
+  state: () => ({
     chassis: [],
     powerState: null,
-  },
+  }),
   getters: {
-    chassis: (state) => state.chassis,
-    powerState: (state) => state.powerState,
+    chassisGetter: (state) => state.chassis,
+    powerStateGetter: (state) => state.powerState,
   },
-  mutations: {
-    setChassisInfo: (state, data) => {
-      state.chassis = data.map((chassis) => {
+  actions: {
+    setChassisInfo(data) {
+      this.chassis = data.map((chassis) => {
         const {
           Id,
           Status = {},
@@ -36,9 +36,7 @@ const ChassisStore = {
       });
     },
     setPowerState: (state, powerState) => (state.powerState = powerState),
-  },
-  actions: {
-    async getChassisInfo({ commit }) {
+    async fetchGetChassisInfo() {
       return await api
         .get('/redfish/v1/Chassis')
         .then(({ data: { Members = [] } }) =>
@@ -47,35 +45,39 @@ const ChassisStore = {
         .then((promises) => api.all(promises))
         .then((response) => {
           const data = response.map(({ data }) => data);
-          commit('setChassisInfo', data);
+          this.setChassisInfo(data);
         })
         .catch((error) => console.log(error));
     },
-    async updateIdentifyLedValue({ dispatch }, led) {
+    async updateIdentifyLedValue(led) {
       const uri = led.uri;
       const updatedIdentifyLedValue = {
         LocationIndicatorActive: led.identifyLed,
       };
       return await api
         .patch(uri, updatedIdentifyLedValue)
         .then(() => {
-          dispatch('getChassisInfo');
+          this.fetchGetChassisInfo();
           if (led.identifyLed) {
-            return i18n.t('pageInventory.toast.successEnableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successEnableIdentifyLed',
+            );
           } else {
-            return i18n.t('pageInventory.toast.successDisableIdentifyLed');
+            return i18n.global.t(
+              'pageInventory.toast.successDisableIdentifyLed',
+            );
           }
         })
         .catch((error) => {
-          dispatch('getChassisInfo');
+          this.fetchGetChassisInfo();
           console.log('error', error);
           if (led.identifyLed) {
             throw new Error(
-              i18n.t('pageInventory.toast.errorEnableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorEnableIdentifyLed'),
             );
           } else {
             throw new Error(
-              i18n.t('pageInventory.toast.errorDisableIdentifyLed'),
+              i18n.global.t('pageInventory.toast.errorDisableIdentifyLed'),
             );
           }
         });
@@ -89,6 +91,6 @@ const ChassisStore = {
         .catch((error) => console.log(error));
     },
   },
-};
+});
 
 export default ChassisStore;