From a9e97c60752d8aafc03c280e015a5e6b2b0adef7 Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Wed, 27 Nov 2024 14:15:49 +0530
Subject: [PATCH] Implemented PCIe Topology page * PCIe Topology Page Vue2 to
 Vue3 * Jira Story: https://jsw.ibm.com/browse/PFEBMC-2371

---
 src/assets/styles/bmc/custom/_card.scss       |   1 -
 src/assets/styles/bmc/custom/_tables.scss     |   1 -
 src/router/routes.js                          |   9 +
 src/store/index.js                            |   3 +-
 .../Authentication/AuthenticationStore.js     |  10 +
 src/store/modules/GlobalStore.js              |  43 +
 .../HardwareStatus/PcieTopologyStore.js       | 162 ++--
 .../HardwareStatus/Inventory/Inventory.vue    |   7 +-
 .../Inventory/InventoryServiceIndicator.vue   |   4 +-
 .../Inventory/InventoryTableChassis.vue       |   2 +-
 .../PcieTopology/IdentifyLedsModal.vue        | 149 ++--
 .../PcieTopology/PcieTopology.vue             | 738 ++++++++----------
 .../PcieTopology/ResetLinkModal.vue           | 133 ++--
 src/views/HardwareStatus/Sensors/Sensors.vue  |   7 +-
 src/views/Login/Login.vue                     |  16 +-
 src/views/Logs/AuditLogs/AuditLogs.vue        |   4 +-
 16 files changed, 677 insertions(+), 612 deletions(-)

diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index fdb7b145cb..736ded97b5 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -2,7 +2,6 @@
   .bg-success {
     background-color: theme-color-light($success) !important;
   }
-  width: 120%;
 }
 
 .card-header,
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index 91f49c5d13..fb055dd60a 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -2,7 +2,6 @@
 .b-table-sticky-header {
   max-height: 75vh;
   min-height: 100px;
-  min-width: 116%;
   border: 1px solid #efefef;
   .table.b-table {
     thead {
diff --git a/src/router/routes.js b/src/router/routes.js
index f50c65c622..a1c6c94a07 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -18,6 +18,7 @@ import Memory from '@/views/ResourceManagement/Memory';
 import Power from '@/views/ResourceManagement/Power';
 import PowerRestorePolicy from '@/views/Settings/PowerRestorePolicy';
 import ConcurrentMaintenance from '../views/HardwareStatus/ConcurrentMaintenance/ConcurrentMaintenance.vue';
+import PcieTopology from '../views/HardwareStatus/PcieTopology/PcieTopology.vue';
 import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
 import Sessions from '@/views/SecurityAndAccess/Sessions';
@@ -92,6 +93,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.inventory'),
         },
       },
+      {
+        path: '/hardware-status/pcie-topology',
+        name: 'pcie-topology',
+        component: PcieTopology,
+        meta: {
+          title: i18n.global.t('appPageTitle.pcieTopology'),
+        },
+      },
       {
         path: '/hardware-status/inventory',
         name: 'inventory',
diff --git a/src/store/index.js b/src/store/index.js
index 1a3c141bd2..700f4ba044 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -28,7 +28,7 @@ import FabricAdaptersStore from './modules/HardwareStatus/FabricAdaptersStore';
 import SystemParametersStore from './modules/ResourceManagement/SystemParametersStore';
 import CertificatesStore from './modules/SecurityAndAccess/CertificatesStore';
 import UserManagementStore from './modules/SecurityAndAccess/UserManagementStore';
-
+import PcieTopologyStore from './modules/HardwareStatus/PcieTopologyStore.js';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -60,4 +60,5 @@ export {
   SystemParametersStore,
   CertificatesStore,
   UserManagementStore,
+  PcieTopologyStore
 };
diff --git a/src/store/modules/Authentication/AuthenticationStore.js b/src/store/modules/Authentication/AuthenticationStore.js
index 908975abc9..c4cea36581 100644
--- a/src/store/modules/Authentication/AuthenticationStore.js
+++ b/src/store/modules/Authentication/AuthenticationStore.js
@@ -62,6 +62,15 @@ export const AuthenticationStore = defineStore('authentication', {
       const headers = {
         'X-Xsrf-Token': cookies.get('X-XSRF-TOKEN'),
       };
+      Cookies.remove('XSRF-TOKEN');
+      Cookies.remove('IsAuthenticated');
+      localStorage.removeItem('storedModelType');
+      localStorage.removeItem('storedUsername');
+      localStorage.removeItem('storedCurrentUser');
+      localStorage.removeItem('storedHmcManagedValue');
+      localStorage.removeItem('storedLanguage');
+      this.xsrfCookie = undefined;
+      this.isAuthenticatedCookie = undefined;
       return api
         .post('/logout', { data: [] }, { headers: headers })
         .then(() => {
@@ -73,6 +82,7 @@ export const AuthenticationStore = defineStore('authentication', {
           console.log(error);
           this.logoutRemove();
         });
+        
     },
     getUserInfo(username) {
       return api
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 607f7271cb..1b72180b4a 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -46,13 +46,23 @@ export const GlobalStore = defineStore('global', {
     username: localStorage.getItem('storedUsername'),
     isAuthorized: true,
     userPrivilege: null,
+    currentUser: JSON.parse(localStorage.getItem('storedCurrentUser')),
   }),
   getters: {
     bootProgressGetter: (state) => state.bootProgress,
+    isInPhypStandby: (state) =>
+      // SystemHardwareInitializationComplete and after is "PHYP in standby"
+      state.bootProgress === 'SystemHardwareInitializationComplete' ||
+      state.bootProgress === 'SetupEntered' ||
+      state.bootProgress === 'OSBootStarted' ||
+      state.bootProgress === 'OSRunning',
     isOSRunningGetter: (state) => state.bootProgress === 'OSRunning',
     getIsUtcDisplay: (state) => state.isUtcDisplay,
     safeModeGetter: (state) => state.safeMode,
     serverStatusGetter: (state) => state.serverStatus,
+    currentUserGetter: (state) => state.currentUser,
+    isServiceUser: (state) =>
+      state.currentUser?.RoleId === 'OemIBMServiceAgent' || !state.currentUser,
   },
   actions: {
     async getBmcTime() {
@@ -65,6 +75,9 @@ export const GlobalStore = defineStore('global', {
         })
         .catch((error) => console.log(error));
     },
+    setCurrentUser (currentUsr) {
+      this.currentUser = currentUsr
+    },
     getSystemInfo() {
       api
         .get('/redfish/v1/Systems/system')
@@ -102,6 +115,36 @@ export const GlobalStore = defineStore('global', {
           return Promise.reject();
         });
     },
+    getCurrentUser(
+      username = localStorage.getItem('storedUsername')
+    ) {
+      if (localStorage.getItem('storedCurrentUser')) return;
+      return api
+        .get(`/redfish/v1/AccountService/Accounts/${username}`)
+        .then(({ data }) => {
+          this.setCurrentUser(data)
+          localStorage.setItem(
+            'storedCurrentUser',
+            JSON.stringify(this.currentUser)
+          );
+        })
+        .catch((error) => {
+          console.log(error);
+          return this.getAccountService();
+        });
+    },
+    getAccountService() {
+      return api
+        .get('/redfish/v1/AccountService')
+        .then((response) => {
+          if (response.data?.LDAP?.RemoteRoleMapping?.length > 0) {
+            return Promise.resolve();
+          }
+        })
+        .catch(() => {
+          return Promise.reject();
+        });
+    },
     async getBootProgress() {
       api
         .get('/redfish/v1/Systems/system')
diff --git a/src/store/modules/HardwareStatus/PcieTopologyStore.js b/src/store/modules/HardwareStatus/PcieTopologyStore.js
index 36f1d6d5b1..10becc7fd7 100644
--- a/src/store/modules/HardwareStatus/PcieTopologyStore.js
+++ b/src/store/modules/HardwareStatus/PcieTopologyStore.js
@@ -1,17 +1,18 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const PcieTopologyStore = {
+export const PcieTopologyStore = defineStore('pcieTopologyStore',{
   namespaced: true,
-  state: {
+  state: ()=>({
     entries: [],
-  },
+  }),
   getters: {
-    entries: (state) => state.entries,
+    entriesGetter: (state) => state.entries,
   },
-  mutations: {
-    setEntries: (state, data) => {
-      state.entries = data.map((pcie) => {
+  actions: {
+    setEntries(data){
+      this.entries = data.map((pcie) => {
         return {
           id: pcie?.linkId,
           resetLinkAvailable: pcie?.resetLinkAvailable,
@@ -33,9 +34,7 @@ const PcieTopologyStore = {
         };
       });
     },
-  },
-  actions: {
-    async resetTheLink(_, requestBody) {
+    async resetTheLink(requestBody) {
       const body = {
         Oem: {
           IBM: {
@@ -69,7 +68,7 @@ const PcieTopologyStore = {
         console.error('Error', error);
       });
     },
-    async getTopologyScreen({ commit }) {
+    async getTopologyScreen() {
       let chassisMembers = [];
       let pcieDeviceMembers = [];
       let procMembers = [];
@@ -1125,16 +1124,17 @@ const PcieTopologyStore = {
               });
             });
             rows.push(row);
-            commit('setEntries', rows);
+            // commit('setEntries', rows);
+            this.setEntries(rows)
           }
         });
       });
     },
-    async getLedValue(_, requestBody) {
+    async getLedValue(requestBody) {
       const uri = requestBody.uri;
       return await api.get(uri);
     },
-    async updateLedValue(_, requestBody) {
+    async updateLedValue(requestBody) {
       await api.all(
         [''].map(async () => {
           if (requestBody.type === 'ioSlots') {
@@ -1179,78 +1179,90 @@ const PcieTopologyStore = {
         }),
       );
     },
-    async getAllLedValues(_, selectedObj) {
+    async getAllLedValues(selectedObj) {
       let returningObj = {
         pcieBridge: [],
         localPortLocation: [],
         remotePortLocation: [],
         ioSlots: [],
       };
-      await api.all(
-        [''].map(async () => {
-          if (selectedObj.pcieBridge?.uri) {
-            await api.get(selectedObj.pcieBridge?.uri).then(({ data }) => {
-              returningObj.pcieBridge.push({
+    
+      const fetchPcieBridge = async () => {
+        if (selectedObj.pcieBridge?.uri) {
+          const { data } = await api.get(selectedObj.pcieBridge?.uri);
+          returningObj.pcieBridge.push({
+            led: data.LocationIndicatorActive,
+            locationNumber: data.Location?.PartLocation?.ServiceLabel,
+            uri: data['@odata.id'],
+          });
+        }
+      };
+    
+      const fetchLocalPorts = async () => {
+        if (selectedObj.localPortLocation.length > 0) {
+          await Promise.all(
+            selectedObj.localPortLocation.map(async (local) => {
+              const { data } = await api.get(local.uri);
+              returningObj.localPortLocation.push({
                 led: data.LocationIndicatorActive,
                 locationNumber: data.Location?.PartLocation?.ServiceLabel,
                 uri: data['@odata.id'],
               });
-            });
-          }
-          if (selectedObj.localPortLocation.length > 0) {
-            await api.all(
-              selectedObj.localPortLocation.map(async (local) => {
-                await api.get(local.uri).then(({ data }) => {
-                  returningObj.localPortLocation.push({
-                    led: data.LocationIndicatorActive,
-                    locationNumber: data.Location?.PartLocation?.ServiceLabel,
-                    uri: data['@odata.id'],
-                  });
-                });
-              }),
-            );
-          }
-          if (selectedObj.remotePortLocation.length > 0) {
-            await api.all(
-              selectedObj.remotePortLocation.map(async (local) => {
-                await api.get(local.uri).then(({ data }) => {
-                  returningObj.remotePortLocation.push({
-                    led: data.LocationIndicatorActive,
-                    locationNumber: data.Location?.PartLocation?.ServiceLabel,
-                    uri: data['@odata.id'],
-                  });
-                });
-              }),
-            );
-          }
-          if (selectedObj.ioSlots.length > 0) {
-            await api.all(
-              selectedObj.ioSlots.map(async (ioSlot) => {
-                api.get(ioSlot.uri).then(async (ioSlotResponse) => {
-                  const tempSlots = ioSlotResponse.data.Slots;
-                  await api.all(
-                    tempSlots.map((tempSlot) => {
-                      if (
-                        tempSlot.Location?.PartLocation?.ServiceLabel ===
-                        ioSlot.locationNumber
-                      ) {
-                        returningObj.ioSlots.push({
-                          led: tempSlot.LocationIndicatorActive,
-                          locationNumber: ioSlot.locationNumber,
-                          uri: ioSlot.uri,
-                        });
-                      }
-                    }),
-                  );
-                });
-              }),
-            );
-          }
-        }),
-      );
+            })
+          );
+        }
+      };
+    
+      const fetchRemotePorts = async () => {
+        if (selectedObj.remotePortLocation.length > 0) {
+          await Promise.all(
+            selectedObj.remotePortLocation.map(async (local) => {
+              const { data } = await api.get(local.uri);
+              returningObj.remotePortLocation.push({
+                led: data.LocationIndicatorActive,
+                locationNumber: data.Location?.PartLocation?.ServiceLabel,
+                uri: data['@odata.id'],
+              });
+            })
+          );
+        }
+      };
+    
+      const fetchIoSlots = async () => {
+        if (selectedObj.ioSlots.length > 0) {
+          await Promise.all(
+            selectedObj.ioSlots.map(async (ioSlot) => {
+              const ioSlotResponse = await api.get(ioSlot.uri);
+              const tempSlots = ioSlotResponse.data.Slots;
+              await Promise.all(
+                tempSlots.map((tempSlot) => {
+                  if (
+                    tempSlot.Location?.PartLocation?.ServiceLabel ===
+                    ioSlot.locationNumber
+                  ) {
+                    returningObj.ioSlots.push({
+                      led: tempSlot.LocationIndicatorActive,
+                      locationNumber: ioSlot.locationNumber,
+                      uri: ioSlot.uri,
+                    });
+                  }
+                })
+              );
+            })
+          );
+        }
+      };
+    
+      await Promise.all([
+        fetchPcieBridge(),
+        fetchLocalPorts(),
+        fetchRemotePorts(),
+        fetchIoSlots(),
+      ]);
+    
       return returningObj;
-    },
+    }    
   },
-};
+});
 
 export default PcieTopologyStore;
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index 05b436d224..97b51ec835 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xl" class="inventory-container">
     <page-title :title="$t('appPageTitle.inventory')" />
 
     <!-- Service indicators -->
@@ -413,3 +413,8 @@ onBeforeMount(() => {
   getAllInfo('created');
 });
 </script>
+<style scoped>
+.inventory-container{
+  min-width: 90%;
+}
+</style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
index 587e5532da..0ab3145a82 100644
--- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -169,7 +169,5 @@ function toggleLampTestSwitch(lampTestState) {
 }
 </script>
 <style lang="scss" scoped>
-.form-background {
-  width: 120%;
-}
+
 </style>
\ No newline at end of file
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index c00bf18774..fa67ac8016 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -226,6 +226,6 @@ function getStatusTooltip(status) {
 }
 .b-table-sticky-header {
   overflow: visible !important;
-  width: 120%;
 }
+
 </style>
diff --git a/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue b/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
index d047b7a2e3..1cbbc34d4a 100644
--- a/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
+++ b/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
@@ -1,24 +1,26 @@
 <template>
   <b-modal
     id="modal-leds"
+    v-model="props.openIdentifyLedModal"
     ref="modal"
     hide-footer
     title="Identify LEDs"
     title-tag="h2"
+    @hidden="onModalHidden"
   >
     <b-row>
       <b-col>
-        <dt>{{ $t('pagePcieTopology.id') }}</dt>
-        <dd>{{ dataFormatter(selectedObj.id) }}</dd>
+        <dt>{{ i18n.global.t('pagePcieTopology.id') }}</dt>
+        <dd>{{ dataFormatter(props.selectedObj.id) }}</dd>
       </b-col>
       <b-col>
-        <dt>{{ $t('pagePcieTopology.parentId') }}</dt>
-        <dd>{{ dataFormatter(selectedObj.parentId) }}</dd>
+        <dt>{{ i18n.global.t('pagePcieTopology.parentId') }}</dt>
+        <dd>{{ dataFormatter(props.selectedObj.parentId) }}</dd>
       </b-col>
     </b-row>
 
     <div v-if="pcieBridgeLed.length > 0" class="headerStyle mb-2 mt-1">
-      {{ $t('pagePcieTopology.bridgeOrHost') }}
+      {{ i18n.global.t('pagePcieTopology.bridgeOrHost') }}
     </div>
     <b-row v-if="pcieBridgeLed.length > 0">
       <b-col cols="8">{{
@@ -37,7 +39,7 @@
     </b-row>
 
     <div v-if="localPortLed.length > 0" class="headerStyle mb-2 mt-1">
-      {{ $t('pagePcieTopology.localPort') }}
+      {{ i18n.global.t('pagePcieTopology.localPort') }}
     </div>
     <b-row v-for="(value, i) in localPortLed" :key="'local-port-' + i">
       <b-col cols="8">{{ dataFormatter(value.locationNumber) }}</b-col>
@@ -54,7 +56,7 @@
     </b-row>
 
     <div v-if="remotePortLed.length > 0" class="headerStyle mb-2 mt-1">
-      {{ $t('pagePcieTopology.remotePort') }}s
+      {{ i18n.global.t('pagePcieTopology.remotePort') }}s
     </div>
     <b-row v-for="(value, i) in remotePortLed" :key="'remote-port-' + i">
       <b-col cols="8">{{ dataFormatter(value.locationNumber) }}</b-col>
@@ -71,7 +73,7 @@
     </b-row>
 
     <div v-if="ioSlotsLed.length > 0" class="headerStyle mb-2 mt-1">
-      {{ $t('pagePcieTopology.ioSlots') }}
+      {{ i18n.global.t('pagePcieTopology.ioSlots') }}
     </div>
     <b-row v-for="(value, i) in ioSlotsLed" :key="'io-slot-i' + i">
       <b-col cols="8">{{ dataFormatter(value.locationNumber) }}</b-col>
@@ -88,93 +90,110 @@
     </b-row>
   </b-modal>
 </template>
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
 
-export default {
-  mixins: [VuelidateMixin, DataFormatterMixin, BVToastMixin],
-  props: {
-    selectedObj: {
+import { ref,defineProps,watch, computed} from 'vue';
+import { PcieTopologyStore } from '../../../store';
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import useToast from '@/components/Composables/useToastComposable';
+import i18n from '@/i18n';
+
+const pcieTopologyStore=PcieTopologyStore();
+const {dataFormatter}=useDataFormatterGlobal()
+const props=defineProps({
+  selectedObj: {
       type: Object,
       default: null,
     },
-  },
-  data() {
-    return {
-      pcieBridgeLed: [],
-      ioSlotsLed: [],
-      localPortLed: [],
-      remotePortLed: [],
-    };
-  },
-  watch: {
-    selectedObj() {
-      this.pcieBridgeLed = [];
-      this.ioSlotsLed = [];
-      this.localPortLed = [];
-      this.remotePortLed = [];
-      this.getAllLeds();
-    },
-  },
-  methods: {
-    async getAllLeds() {
-      await this.$store
-        .dispatch('pcieTopology/getAllLedValues', this.selectedObj)
-        .then((returnedObj) => {
-          this.pcieBridgeLed = returnedObj.pcieBridge;
-          this.localPortLed = [];
-          this.selectedObj.localPortLocation.map((selectedPort) => {
+  openIdentifyLedModal:{
+      type:Boolean,
+      default:false
+    }
+})
+const { successToast, errorToast } = useToast();
+const pcieBridgeLed=ref([])
+const ioSlotsLed=ref([])
+const localPortLed=ref([])
+const remotePortLed=ref([])
+
+
+
+watch(
+  ()=>props.selectedObj,
+  ()=>{
+    pcieBridgeLed.value=[];
+    ioSlotsLed.value=[];
+    localPortLed.value=[];
+    remotePortLed.value=[];
+    getAllLeds();
+    
+  }
+)
+
+const emitUpdate = defineEmits(['update:openIdentifyLedModal']);
+function onModalHidden(){
+  emitUpdate('update:openIdentifyLedModal',false);
+}
+const ioSlotsLength=computed(()=>{
+  return ioSlotsLed.length
+})
+const getAllLeds=async()=>{
+  await pcieTopologyStore.getAllLedValues(props.selectedObj)
+  .then((returnedObj) => {
+          ioSlotsLed.value = returnedObj.ioSlots;
+          pcieBridgeLed.value = returnedObj.pcieBridge;
+          localPortLed.value = [];
+          props.selectedObj.localPortLocation.map((selectedPort) => {
             returnedObj.localPortLocation.map((returnedPort) => {
               if (selectedPort.locationNumber === returnedPort.locationNumber) {
-                this.localPortLed.push(returnedPort);
+                localPortLed.push(returnedPort);
               }
             });
-          });
-          this.remotePortLed = [];
-          this.selectedObj.remotePortLocation.map((selectedPort) => {
+          remotePortLed.value = [];
+          props.selectedObj.remotePortLocation.map((selectedPort) => {
             returnedObj.remotePortLocation.map((returnedPort) => {
               if (selectedPort.locationNumber === returnedPort.locationNumber) {
-                this.remotePortLed.push(returnedPort);
+                remotePortLed.push(returnedPort);
               }
             });
           });
-          this.ioSlotsLed = returnedObj.ioSlots;
         });
-    },
-    async changeLedValue(value, type) {
-      this.$store
-        .dispatch('pcieTopology/updateLedValue', { value: value, type: type })
+        
+    });
+
+}
+
+const changeLedValue=async(value,type)=>{
+  pcieTopologyStore.updateLedValue({value:value, type:type})
         .then(() => {
-          this.getAllLeds();
+          getAllLeds();
           if (value.led) {
-            this.successToast(
-              this.$t('pagePcieTopology.toast.successEnableIdentifyLed'),
+            successToast(
+              i18n.global.t('pagePcieTopology.toast.successEnableIdentifyLed'),
             );
           } else {
-            this.successToast(
-              this.$t('pagePcieTopology.toast.successDisableIdentifyLed'),
+            successToast(
+              i18n.global.t('pagePcieTopology.toast.successDisableIdentifyLed'),
             );
           }
         })
         .catch(() => {
-          this.getAllLeds();
+          getAllLeds();
           if (value.led) {
-            this.errorToast(
-              this.$t('pagePcieTopology.toast.errorEnableIdentifyLed'),
+            errorToast(
+              i18n.global.t('pagePcieTopology.toast.errorEnableIdentifyLed'),
             );
           } else {
-            this.errorToast(
-              this.$t('pagePcieTopology.toast.errorDisableIdentifyLed'),
+            errorToast(
+              i18n.global.t('pagePcieTopology.toast.errorDisableIdentifyLed'),
             );
           }
         });
-    },
-  },
-};
+}
+
 </script>
 <style scoped>
+
 .headerStyle {
   font-weight: bold;
 }
diff --git a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
index d81df9b565..5f01fb867d 100644
--- a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
+++ b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
@@ -5,14 +5,14 @@
       <b-col md="8" xl="6">
         <alert v-if="isInPhypStandby" variant="info" class="mb-4">
           <span>
-            {{ $t('pagePcieTopology.alert') }}
+            {{ i18n.global.t("pagePcieTopology.alert") }}
           </span>
         </alert>
         <alert v-else variant="warning" class="mb-4">
           <span>
             {{ $t('pagePcieTopology.warning') }}
-            <b-link href="#/operations/server-power-operations">{{
-              $t('pagePower.alert.message3Link')
+            <b-link href="/operations/server-power-operations">{{
+              i18n.global.t("pagePower.alert.message3Link")
             }}</b-link>
           </span>
         </alert>
@@ -20,67 +20,32 @@
     </b-row>
     <b-row class="align-items-start">
       <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pagePcieTopology.table.search')"
-          data-test-id="pcie-input-search"
-          :is-search-disabled="isBusy"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="entries.length"
-          ></table-cell-count>
+        <search :placeholder="$t('pagePcieTopology.table.search')" data-test-id="pcie-input-search"
+          :is-search-disabled="isBusy" @change-search="onChangeSearch" @clear-search="onClearSearch" />
+        <div class="ml-sm-10 mb-4 ms-4">
+          <table-cell-count :filtered-items-count="filteredRows"
+            :total-number-of-cells="filteredEntries.length"></table-cell-count>
         </div>
       </b-col>
     </b-row>
     <b-row>
       <b-col class="text-right">
-        <table-filter
-          :is-filter-disabled="isBusy"
-          :filters="tableFilters"
-          @filter-change="onFilterChange"
-        />
-        <b-button
-          v-if="isServiceUser"
-          variant="primary"
-          :disabled="isBusy"
-          @click="savePcieTopology"
-        >
-          {{ $t('pagePcieTopology.savePcieTopology') }}
+        <table-filter :is-filter-disabled="isBusy" :filters="tableFilters" @filter-change="onFilterChange" />
+        <b-button v-if="isServiceUser" variant="primary" :disabled="isBusy" @click="savePcieTopology">
+          {{ i18n.global.t("pagePcieTopology.savePcieTopology") }}
         </b-button>
       </b-col>
     </b-row>
     <b-row>
       <b-col>
-        <b-table
-          id="table-pcie-topology"
-          ref="table"
-          responsive="xl"
-          no-select-on-click
-          sort-icon-left
-          hover
-          no-sort-reset
-          :sort-desc="false"
-          show-empty
-          sort-by="id"
-          :fields="fields"
-          :busy="isBusy"
-          :filter="searchFilter"
-          :empty-text="$t('global.table.emptyMessage')"
-          :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :items="filteredEntries"
-          :per-page="perPage"
-          :current-page="currentPage"
-          @filtered="onFiltered"
-        >
+        <BTable id="table-pcie-topology" ref="table" responsive="xl" sort-icon-left hover no-sort-reset
+          :sort-desc="false" show-empty sticky-header="75vh" sort-by="id" :fields="fields" :busy="tableIsBusy"
+          :filter="searchFilterInput" :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')" :items="filteredEntries" :per-page="itemPerPage"
+          :current-page="currentPageNo" @filtered="onFiltered">
           <template #cell(localPortLocation)="{ item }">
             <template v-if="item.localPortLocation.length > 0">
-              <span
-                v-for="(value, index) in item.localPortLocation"
-                :key="'localPortLocation ' + index"
-              >
+              <span v-for="(value, index) in item.localPortLocation" :key="'localPortLocation ' + index">
                 {{ value.locationNumber }}
               </span>
             </template>
@@ -88,10 +53,7 @@
           </template>
           <template #cell(remotePortLocation)="{ item }">
             <template v-if="item.remotePortLocation.length > 0">
-              <span
-                v-for="(value, index) in item.remotePortLocation"
-                :key="'remotePortLocation ' + index"
-              >
+              <span v-for="(value, index) in item.remotePortLocation" :key="'remotePortLocation ' + index">
                 {{ value.locationNumber }}
               </span>
             </template>
@@ -99,392 +61,378 @@
           </template>
           <!-- Expand chevron icon -->
           <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
-            >
+            <b-button variant="link" :aria-label="expandRowLabel" :title="expandRowLabel" :class="row.item.toggleDetails ? 'rotateSvg btn-icon-only' : 'btn-icon-only'
+              " @click="toggleRow(row)">
               <icon-chevron />
             </b-button>
           </template>
           <template #row-details="{ item }">
             <b-container fluid>
-              <b-row>
-                <b-col lg="4" xl="4" md="4" sm="4" xs="4">
-                  <dl class="fontStyle">
-                    <!-- Link properties -->
-                    <dt class="headerStyle">
-                      {{ $t('pagePcieTopology.linkProperties') }}:
-                    </dt>
-                    <dd>
-                      {{ $t('pagePcieTopology.speed') }}:
-                      {{ dataFormatter(item.linkPropertiesSpeed) }}
-                    </dd>
-                    <dd>
-                      {{ $t('pagePcieTopology.width') }}:
-                      {{ dataFormatter(item.linkPropertiesWidth) }}
-                    </dd>
-                    <dd>
-                      {{ $t('pagePcieTopology.type') }}:
-                      {{ dataFormatter(item.linkPropertiesType) }}
-                    </dd>
-                  </dl>
-                </b-col>
-                <b-col class="section-left-divider">
-                  <b-row>
-                    <b-col>
-                      <dl class="fontStyle">
-                        <!-- PCIe Bridge -->
-                        <dt class="headerStyle">
-                          {{ $t('pagePcieTopology.bridgeOrHost') }}:
-                        </dt>
-                        <dd>
-                          {{ dataFormatter(item.pcieBridge.locationNumber) }}
-                        </dd>
-                      </dl>
-                    </b-col>
-                    <b-col class="text-nowrap">
-                      <b-button
-                        v-if="item.resetLinkAvailable"
-                        class="btn btn-secondary float-right"
-                        target="_blank"
-                        @click="openResetLinkModal(item)"
-                      >
-                        {{ $t('pagePcieTopology.resetLink') }}
-                      </b-button>
-                    </b-col>
-                  </b-row>
-                  <div v-for="(value, i) in item.cablePartNumber" :key="i">
+              <div class="dropdwn">
+                <b-row>
+                  <b-col lg="4" xl="4" md="4" sm="4" xs="4">
+                    <dl class="fontStyle">
+                      <!-- Link properties -->
+                      <dt class="headerStyle">
+                        {{ i18n.global.t("pagePcieTopology.linkProperties") }}:
+                      </dt>
+                      <dd>
+                        {{ i18n.global.t("pagePcieTopology.speed") }}:
+                        {{ dataFormatter(item.linkPropertiesSpeed) }}
+                      </dd>
+                      <dd>
+                        {{ i18n.global.t("pagePcieTopology.width") }}:
+                        {{ dataFormatter(item.linkPropertiesWidth) }}
+                      </dd>
+                      <dd>
+                        {{ i18n.global.t("pagePcieTopology.type") }}:
+                        {{ dataFormatter(item.linkPropertiesType) }}
+                      </dd>
+                    </dl>
+                  </b-col>
+                  <b-col class="section-left-divider">
+                    <b-row>
+                      <b-col>
+                        <dl class="fontStyle">
+                          <!-- PCIe Bridge -->
+                          <dt class="headerStyle">
+                            {{ i18n.global.t("pagePcieTopology.bridgeOrHost") }}:
+                          </dt>
+                          <dd>
+                            {{ dataFormatter(item.pcieBridge.locationNumber) }}
+                          </dd>
+                        </dl>
+                      </b-col>
+                      <b-col class="text-nowrap">
+                        <b-button v-if="item.resetLinkAvailable" class="btn btn-secondary float-right reset-btn"
+                          target="_blank" @click="openResetLinkModal(item)">
+                          {{ i18n.global.t("pagePcieTopology.resetLink") }}
+                        </b-button>
+                      </b-col>
+                    </b-row>
+                    <div v-for="(value, i) in item.cablePartNumber" :key="i">
+                      <div class="section-divider mb-3 mt-2"></div>
+                      <div class="fontStyle headerStyle">
+                        {{ dataFormatter("Cable " + (i + 1)) }}
+                      </div>
+                      <b-row>
+                        <b-col lg="5" xl="5" md="5" sm="5" xs="5">
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.localPort") }}:
+                            {{
+                              item.localPortLocation.length > 0 &&
+                                item.localPortLocation[i]
+                                ? item.localPortLocation[i].locationNumber
+                                : "--"
+                            }}
+                          </div>
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.remotePort") }}:
+                            {{
+                              dataFormatter(
+                                item.remotePortLocation.length > 0 &&
+                                  item.remotePortLocation[i]
+                                  ? item.remotePortLocation[i].locationNumber
+                                  : "--"
+                              )
+                            }}
+                          </div>
+                        </b-col>
+                        <b-col lg="4" xl="4" md="4" sm="4" xs="4">
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.partNumber") }}:
+                            {{ dataFormatter(value) }}
+                          </div>
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.cableType") }}:
+                            {{ dataFormatter(item.cableType[i]) }}
+                          </div>
+                        </b-col>
+                        <b-col lg="3" xl="3" md="3" sm="6" xs="3">
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.cableLength") }}:
+                            {{ dataFormatter(item.cableLength[i]) }}m
+                          </div>
+                          <div class="fontStyle">
+                            {{ i18n.global.t("pagePcieTopology.cableStatus") }}:
+                            {{ dataFormatter(item.cableStatus[i]) }}
+                          </div>
+                        </b-col>
+                      </b-row>
+                    </div>
                     <div class="section-divider mb-3 mt-2"></div>
                     <div class="fontStyle headerStyle">
-                      {{ dataFormatter('Cable ' + (i + 1)) }}
+                      {{ i18n.global.t("pagePcieTopology.ioSlots") }}
                     </div>
                     <b-row>
-                      <b-col lg="5" xl="5" md="5" sm="5" xs="5">
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.localPort') }}:
-                          {{
-                            item.localPortLocation.length > 0 &&
-                            item.localPortLocation[i]
-                              ? item.localPortLocation[i].locationNumber
-                              : '--'
-                          }}
-                        </div>
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.remotePort') }}:
-                          {{
-                            dataFormatter(
-                              item.remotePortLocation.length > 0 &&
-                                item.remotePortLocation[i]
-                                ? item.remotePortLocation[i].locationNumber
-                                : '--',
-                            )
-                          }}
-                        </div>
-                      </b-col>
-                      <b-col lg="4" xl="4" md="4" sm="4" xs="4">
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.partNumber') }}:
-                          {{ dataFormatter(value) }}
-                        </div>
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.cableType') }}:
-                          {{ dataFormatter(item.cableType[i]) }}
-                        </div>
-                      </b-col>
-                      <b-col lg="3" xl="3" md="3" sm="3" xs="3">
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.cableLength') }}:
-                          {{ dataFormatter(item.cableLength[i]) }}m
-                        </div>
-                        <div class="fontStyle">
-                          {{ $t('pagePcieTopology.cableStatus') }}:
-                          {{ dataFormatter(item.cableStatus[i]) }}
-                        </div>
+                      <b-col>
+                        <template v-if="item.ioSlots.length > 0">
+                          <div v-for="(val, i) in item.ioSlots" :key="i" class="fontStyle">
+                            {{ dataFormatter(val.locationNumber) }}
+                          </div>
+                        </template>
+                        <div v-else>--</div>
                       </b-col>
                     </b-row>
-                  </div>
-                  <div class="section-divider mb-3 mt-2"></div>
-                  <div class="fontStyle headerStyle">
-                    {{ $t('pagePcieTopology.ioSlots') }}
-                  </div>
-                  <b-row>
-                    <b-col>
-                      <template v-if="item.ioSlots.length > 0">
-                        <div
-                          v-for="(val, i) in item.ioSlots"
-                          :key="i"
-                          class="fontStyle"
-                        >
-                          {{ dataFormatter(val.locationNumber) }}
-                        </div>
-                      </template>
-                      <div v-else>--</div>
-                    </b-col>
-                  </b-row>
-                </b-col>
-              </b-row>
+                  </b-col>
+                </b-row>
+              </div>
             </b-container>
           </template>
           <!-- Actions column -->
           <template #cell(actions)="{ item }">
             <span class="identifyLedStyle" @click="openIdentifyLedsModal(item)">
-              {{ $t('pagePcieTopology.identifyLed') }}
+              {{ i18n.global.t("pagePcieTopology.identifyLed") }}
             </span>
           </template>
-        </b-table>
+        </BTable>
       </b-col>
     </b-row>
     <!-- Table pagination -->
+
     <b-row>
       <b-col sm="6">
-        <b-form-group
-          class="table-pagination-select"
-          :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
-        >
-          <b-form-select
-            id="pagination-items-per-page"
-            v-model="perPage"
-            :options="itemsPerPageOptions"
-          />
+        <b-form-group class="table-pagination-select" :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page">
+          <b-form-select id="pagination-items-per-page" v-model="itemPerPage" :options="itemsPerPageOptions" />
         </b-form-group>
       </b-col>
+
       <b-col sm="6">
-        <b-pagination
-          v-model="currentPage"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
+        <b-pagination class="b-pagination" v-model="currentPageNo" first-number last-number :per-page="itemPerPage"
+          :total-rows="getTotalRowCount(filteredRows, itemPerPage)" aria-controls="table-event-logs" />
       </b-col>
     </b-row>
+
     <!-- Modals -->
-    <modal-reset :reset-type="resetOption" :reset-uri="resetLinkUri" />
-    <modal-leds :selected-obj="selectedObj" />
+    <modal-reset :reset-type="resetOption" :reset-uri="resetLinkUri" v-model:open-reset-modal="openResetModal" />
+    <modal-leds :selected-obj="selectedObj" v-model:open-identify-led-modal="openIdentifyLedModal" />
   </b-container>
 </template>
+<script setup>
+import Alert from "@/components/Global/Alert.vue";
+import IconChevron from "@carbon/icons-vue/es/chevron--down/20";
+import PageTitle from "@/components/Global/PageTitle.vue";
+import Search from "@/components/Global/Search.vue";
+import TableCellCount from "@/components/Global/TableCellCount.vue";
+import TableFilter from "@/components/Global/TableFilter.vue";
+import useDataFormatterGlobal from "../../../components/Composables/useDataFormatterGlobal";
+import ModalReset from "./ResetLinkModal.vue";
+import ModalLeds from "./IdentifyLedsModal.vue";
+import { onBeforeMount, onMounted, reactive, ref, computed, watch } from "vue";
+import useTableRowExpandComposable from "../../../components/Composables/useTableRowExpandComposable";
+import useSearchFilterComposable from "../../../components/Composables/useSearchFilterComposable";
+import useTableFilter from "../../../components/Composables/useTableFilterComposable";
+import usePaginationComposable from "../../../components/Composables/usePaginationComposable";
+import useLoadingBar from "@/components/Composables/useLoadingBarComposable";
+import { PcieTopologyStore } from "../../../store";
+import { GlobalStore } from "../../../store";
+import eventBus from "@/eventBus";
+import useToast from "@/components/Composables/useToastComposable";
+import i18n from '@/i18n';
+import { BTable } from "bootstrap-vue-next";
 
-<script>
-import Alert from '@/components/Global/Alert';
-import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import PageTitle from '@/components/Global/PageTitle';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import TableFilter from '@/components/Global/TableFilter';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import ModalReset from './ResetLinkModal';
-import ModalLeds from './IdentifyLedsModal';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-
-export default {
-  name: 'PcieTopology',
-  components: {
-    Alert,
-    IconChevron,
-    PageTitle,
-    Search,
-    TableCellCount,
-    TableFilter,
-    ModalReset,
-    ModalLeds,
+const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
+const { getTotalRowCount, itemsPerPageOptions, currentPage, perPage } =
+  usePaginationComposable();
+const { searchFilterInput, onChangeSearch, onClearSearch } =
+  useSearchFilterComposable();
+const { getFilteredTableData } = useTableFilter();
+const { startLoader, endLoader } = useLoadingBar();
+const { dataFormatter } = useDataFormatterGlobal();
+const globalStore = GlobalStore();
+const pcieTopologyStore = PcieTopologyStore();
+const isBusy = ref(true);
+const resetOption = ref(null);
+const resetLinkUri = ref("");
+const selectedObj = ref({});
+const { successToast, errorToast } = useToast();
+const currentPageNo = ref(currentPage);
+const itemPerPage = ref(perPage);
+const fetched = ref(false)
+const openResetModal = ref(false);
+const openIdentifyLedModal = ref(false);
+const fields = reactive([
+  {
+    key: "expandRow",
+    label: "",
+    formatter: dataFormatter,
+    tdClass: "table-row-expand",
   },
-  mixins: [
-    BVPaginationMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    TableFilterMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    TableRowExpandMixin,
-    SearchFilterMixin,
-  ],
-  data() {
-    return {
-      isBusy: true,
-      resetOption: null,
-      resetLinkUri: '',
-      selectedObj: {},
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          formatter: this.dataFormatter,
-          tdClass: 'table-row-expand',
-        },
-        {
-          key: 'id',
-          label: this.$t('pagePcieTopology.id'),
-          formatter: this.dataFormatter,
-          sortable: true,
-        },
-        {
-          key: 'parentId',
-          label: this.$t('pagePcieTopology.parentId'),
-          formatter: this.dataFormatter,
-          sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'linkStatus',
-          label: this.$t('pagePcieTopology.linkStatus'),
-          formatter: this.dataFormatter,
-          sortable: false,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'localPortLocation',
-          label: this.$t('pagePcieTopology.localPortLocation'),
-          formatter: this.dataFormatter,
-          sortable: false,
-          tdClass: 'text-break',
-        },
-        {
-          key: 'remotePortLocation',
-          label: this.$t('pagePcieTopology.remotePortLocation'),
-          formatter: this.dataFormatter,
-          sortable: false,
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          formatter: this.dataFormatter,
-          label: ' ',
-          tdClass: 'text-right text-nowrap',
-        },
-      ],
-      tableFilters: [
-        {
-          key: 'linkStatus',
-          label: this.$t('pagePcieTopology.table.linkStatusType'),
-          values: [
-            this.$t('pagePcieTopology.table.filter.degraded'),
-            this.$t('pagePcieTopology.table.filter.inactive'),
-            this.$t('pagePcieTopology.table.filter.open'),
-            this.$t('pagePcieTopology.table.filter.operational'),
-            this.$t('pagePcieTopology.table.filter.unknown'),
-            this.$t('pagePcieTopology.table.filter.failed'),
-          ],
-        },
-      ],
-      expandRowLabel,
-      activeFilters: [],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      currentPage: currentPage,
-      itemsPerPageOptions: itemsPerPageOptions,
-      perPage: perPage,
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-    };
+  {
+    key: "id",
+    label: i18n.global.t("pagePcieTopology.id"),
+    formatter: dataFormatter,
+    sortable: true,
   },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.filteredEntries.length;
-    },
-    entries() {
-      return this.$store.getters['pcieTopology/entries'];
-    },
-    filteredEntries() {
-      return this.getFilteredTableData(this.entries, this.activeFilters);
-    },
-    isInPhypStandby() {
-      return this.$store.getters['global/isInPhypStandby'];
-    },
-    isServiceUser() {
-      return this.$store.getters['global/isServiceUser'];
-    },
+  {
+    key: "parentId",
+    label: i18n.global.t("pagePcieTopology.parentId"),
+    formatter: dataFormatter,
+    sortable: true,
+    tdClass: "text-nowrap",
   },
-  created() {
-    this.$store.dispatch('global/getBootProgress').then(() => {
-      this.checkIfInPhypStandby();
-    });
+  {
+    key: "linkStatus",
+    label: i18n.global.t("pagePcieTopology.linkStatus"),
+    formatter: dataFormatter,
+    sortable: false,
+    tdClass: "text-nowrap",
+  },
+  {
+    key: "localPortLocation",
+    label: i18n.global.t("pagePcieTopology.localPortLocation"),
+    formatter: dataFormatter,
+    sortable: false,
+    tdClass: "text-break",
+  },
+  {
+    key: "remotePortLocation",
+    label: i18n.global.t("pagePcieTopology.remotePortLocation"),
+    formatter: dataFormatter,
+    sortable: false,
   },
-  mounted() {
-    this.$root.$emit('loading-bar-status', true);
+  {
+    key: "actions",
+    sortable: false,
+    formatter: dataFormatter,
+    label: " ",
+    tdClass: "text-right text-nowrap",
   },
-  methods: {
-    checkIfInPhypStandby(checkCounter = 0) {
-      checkCounter++;
-      if (this.isInPhypStandby) {
-        this.startLoader();
-        this.$store.dispatch('pcieTopology/refreshPage').then(() => {
-          this.$store.dispatch('pcieTopology/getTopologyScreen').finally(() => {
-            this.isBusy = false;
-            this.endLoader();
-          });
-        });
-      } else {
-        setTimeout(() => {
-          this.checkIfInPhypStandby(checkCounter);
-        }, 6000);
-      }
-    },
-    openResetLinkModal(value) {
-      this.resetOption = value.id;
-      this.resetLinkUri = value.resetLinkUri;
-      this.$bvModal.show('modal-reset');
-    },
-    openIdentifyLedsModal(value) {
-      this.selectedObj = value;
-      this.$bvModal.show('modal-leds');
-    },
-    savePcieTopology() {
-      this.$store
-        .dispatch('pcieTopology/savePcie')
-        .then(() =>
-          this.successToast(
-            this.$t('pagePcieTopology.toast.successSavePcieTopology'),
-          ),
-        )
-        .catch(() =>
-          this.errorToast(
-            this.$t('pagePcieTopology.toast.errorSavePcieTopology'),
-          ),
-        );
-    },
-    onFilterChange({ activeFilters }) {
-      this.activeFilters = activeFilters;
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
+]);
+const tableFilters = reactive([
+  {
+    key: "linkStatus",
+    label: i18n.global.t("pagePcieTopology.table.linkStatusType"),
+    values: [
+      i18n.global.t("pagePcieTopology.table.filter.degraded"),
+      i18n.global.t("pagePcieTopology.table.filter.inactive"),
+      i18n.global.t("pagePcieTopology.table.filter.open"),
+      i18n.global.t("pagePcieTopology.table.filter.operational"),
+      i18n.global.t("pagePcieTopology.table.filter.unknown"),
+      i18n.global.t("pagePcieTopology.table.filter.failed"),
+    ],
   },
-};
+]);
+const activeFiltersRows = ref([]);
+const batchActions = reactive([
+  {
+    value: "delete",
+    label: i18n.global.t("global.action.delete"),
+  },
+]);
+
+const searchTotalFilteredRows = ref(0);
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : filteredEntries.value.length;
+});
+
+const filteredEntries = computed(() => {
+  if (pcieTopologyStore.entriesGetter) {
+    return getFilteredTableData(pcieTopologyStore.entriesGetter, activeFiltersRows.value);
+  }
+  return [];
+});
+
+const tableIsBusy = computed(() => {
+  if (!globalStore.isInPhypStandby) return false;
+  if (fetched.value == true && globalStore.isInPhypStandby) return false;
+  return true;
+})
+const isInPhypStandby = computed(() => {
+  return globalStore.isInPhypStandby;
+});
+const isServiceUser = computed(() => {
+  return globalStore.isServiceUser;
+});
+
+onBeforeMount(() => {
+  globalStore.getBootProgress().then(() => {
+    checkIfInPhypStandby();
+  });
+});
+onMounted(() => {
+  eventBus.emit("loading-bar-status", true);
+});
+
+function checkIfInPhypStandby(checkCounter = 0) {
+  checkCounter++;
+  if (isInPhypStandby.value) {
+    startLoader();
+    pcieTopologyStore.refreshPage().then(() => {
+      pcieTopologyStore.getTopologyScreen().finally(() => {
+        isBusy.value = false;
+        fetched.value = true;
+        endLoader();
+      });
+    });
+  } else {
+    setTimeout(() => {
+      checkIfInPhypStandby(checkCounter);
+    }, 6000);
+  }
+
+}
+function openResetLinkModal(value) {
+  resetOption.value = value.id;
+  resetLinkUri.value = value.resetLinkUri;
+  openResetModal.value = true;
+}
+function openIdentifyLedsModal(value) {
+  selectedObj.value = value;
+  openIdentifyLedModal.value = true;
+}
+function savePcieTopology() {
+  pcieTopologyStore
+    .savePcie()
+    .then(() =>
+      successToast(i18n.global.t("pagePcieTopology.toast.successSavePcieTopology"))
+    )
+    .catch(() => errorToast(i18n.global.t("pagePcieTopology.toast.errorSavePcieTopology")));
+}
+function onFilterChange({ activeFilters }) {
+  activeFiltersRows.value = activeFilters;
+}
+function onFiltered(filteredItems) {
+  searchTotalFilteredRows.value = filteredItems.length;
+}
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .identifyLedStyle {
   color: rgb(1, 80, 230);
   cursor: pointer;
 }
+
 .fontStyle {
   font-size: 14px;
 }
+
 .headerStyle {
   font-weight: bold;
 }
+
+.text-right {
+  text-align: right;
+}
+
+.pagination-align {
+  justify-content: end !important;
+}
+
+.dropdwn {
+  margin-left: 4rem;
+}
+
+.reset-btn {
+  margin-left: 8rem;
+}
+
+.rotateSvg {
+  svg {
+    transform: rotate(180deg);
+  }
+}
 </style>
diff --git a/src/views/HardwareStatus/PcieTopology/ResetLinkModal.vue b/src/views/HardwareStatus/PcieTopology/ResetLinkModal.vue
index 662769d91c..dd8d27d33c 100644
--- a/src/views/HardwareStatus/PcieTopology/ResetLinkModal.vue
+++ b/src/views/HardwareStatus/PcieTopology/ResetLinkModal.vue
@@ -1,27 +1,28 @@
 <template>
   <b-modal
+    v-model="props.openResetModal"
     id="modal-reset"
     ref="modal"
     :title="
-      $t('pagePcieTopology.modal.resetLinkHeader', {
-        id: resetType,
+      i18n.global.t('pagePcieTopology.modal.resetLinkHeader', {
+        id: props.resetType,
       })
     "
     title-tag="h2"
     @hidden="resetConfirm"
   >
     <p class="mb-2">
-      <strong>{{ $t('pagePcieTopology.modal.resetConfirm') }}</strong>
+      <strong>{{ i18n.global.t('pagePcieTopology.modal.resetConfirm') }}</strong>
     </p>
-    <div>{{ $t('pagePcieTopology.modal.resetLinkDescription') }}</div>
+    <div>{{ i18n.global.t('pagePcieTopology.modal.resetLinkDescription') }}</div>
 
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button
         variant="secondary"
         data-test-id="factoryReset-button-cancel"
         @click="cancel()"
       >
-        {{ $t('global.action.cancel') }}
+        {{ i18n.global.t('global.action.cancel') }}
       </b-button>
       <b-button
         type="sumbit"
@@ -30,22 +31,26 @@
         @click="handleConfirm"
       >
         {{
-          $t('pagePcieTopology.modal.resetLinkHeader', {
-            id: resetType,
+          i18n.global.t('pagePcieTopology.modal.resetLinkHeader', {
+            id: props.resetType,
           })
         }}
       </b-button>
     </template>
   </b-modal>
 </template>
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
+<script setup>
+import { GlobalStore, PcieTopologyStore } from '../../../store';
+import useVuelidate from '@vuelidate/core';
+import useToast from '@/components/Composables/useToastComposable';
+import { ref,computed,nextTick } from 'vue';
+import i18n from '@/i18n';
 
-export default {
-  mixins: [VuelidateMixin, BVToastMixin],
-  props: {
-    resetType: {
+const { successToast, errorToast } = useToast();
+const pcieTopologyStore=PcieTopologyStore()
+const globalStore = GlobalStore();
+const props=defineProps({
+  resetType: {
       type: Number,
       default: null,
     },
@@ -53,58 +58,64 @@ export default {
       type: String,
       default: '',
     },
-  },
-  data() {
-    return {
-      confirm: false,
-    };
-  },
-  computed: {
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-    isServerOff() {
-      return this.serverStatus === 'off' ? true : false;
-    },
-  },
-  validations: {
-    confirm: {
-      mustBeTrue: function (value) {
-        return this.isServerOff || value === true;
-      },
-    },
-  },
-  methods: {
-    handleConfirm() {
-      this.resetLink();
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$nextTick(() => this.$refs.modal.hide());
-      this.resetConfirm();
-    },
-    resetConfirm() {
-      this.confirm = false;
-      this.$v.$reset();
-    },
-    resetLink() {
-      this.$store
-        .dispatch('pcieTopology/resetTheLink', { uri: this.resetUri })
+    openResetModal:{
+      type:Boolean,
+      default:false
+    }
+})
+const confirm=ref(false)
+const modal=ref(null)
+const serverStatus=computed(()=>{
+    return globalStore.serverStatus
+})
+
+const isServerOff=computed(()=>{
+    return serverStatus.value === 'off' ? true : false;
+})
+
+function mustBeTrue(value){
+  return isServerOff.value || value === true;
+}
+
+//Validation Rules
+const rules=computed(()=>({
+  confirm:{
+    mustBeTrue
+  }
+}))
+const v$=useVuelidate(rules,{confirm})
+
+function handleConfirm() {
+      resetLink();
+      v$.value.$touch()
+      if (v$.value.$invalid) return;
+      nextTick(() => modal.value.hide());
+      resetConfirm();
+}
+const emitUpdate=defineEmits(['update:openResetModal'])
+function resetConfirm() {
+      confirm.value = false;
+      v$.value.$reset() 
+      emitUpdate('update:openResetModal',false)
+
+}
+function resetLink() {
+      pcieTopologyStore.resetTheLink({ uri: props.resetUri })
         .then(() => {
-          this.successToast(
-            this.$t('pagePcieTopology.toast.successReset', {
-              id: this.resetType,
+          successToast(
+            i18n.global.t('pagePcieTopology.toast.successReset', {
+              id: props.resetType,
             }),
           );
         })
         .catch(() => {
-          this.errorToast(
-            this.$t('pagePcieTopology.toast.errorReset', {
-              id: this.resetType,
+          errorToast(
+            i18n.global.t('pagePcieTopology.toast.errorReset', {
+              id: props.resetType,
             }),
           );
         });
-      this.$nextTick(() => this.$refs.modal.hide());
-    },
-  },
-};
+      nextTick(() => modal.value.hide());
+}
+
 </script>
diff --git a/src/views/HardwareStatus/Sensors/Sensors.vue b/src/views/HardwareStatus/Sensors/Sensors.vue
index da506a5477..1689c1bbce 100644
--- a/src/views/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/HardwareStatus/Sensors/Sensors.vue
@@ -1,7 +1,7 @@
 <template>
   <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.sensors')" />
-    <div style="width:117%">
+
     <BRow class="align-items-end">
       <BCol sm="6" md="5" xl="4" class="searchStyle">
         <search
@@ -21,7 +21,7 @@
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
       </BCol>
     </BRow>
-  </div>
+
     <BRow>
       <BCol xl="12">
         <table-toolbar
@@ -93,7 +93,7 @@
       </BCol>
     </BRow>
     <!-- Table pagination -->
-    <div style="width:116%">
+
     <BRow>
       <BCol sm="6">
         <BFormGroup
@@ -120,7 +120,6 @@
         />
       </BCol>
     </BRow>
-  </div>
   </BContainer>
 </template>
 
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index bad34e9b74..7513ae619d 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -91,7 +91,6 @@ const languages = ref([
 ]);
 
 const login = () => {
-  console.log('userinfo', userInfo);
   v$.value.$touch();
   if (v$.value.$invalid) return;
   Authentication.login(userInfo.username, userInfo.password)
@@ -107,7 +106,20 @@ const login = () => {
       if (PasswordChangeRequired) {
         router.push('/change-password');
       } else {
-        router.push('/');
+        Promise.all([
+              globalStore.getCurrentUser(userInfo.username),
+              globalStore.getSystemInfo()
+            ])
+              .then(() => {
+                router.push('/');
+              })
+              .catch(() => {
+                Promise.all([
+                Authentication.unauthlogin(),
+                Authentication.logout()
+                ]);
+              });
+          
       }
       if (RoleId) {
         globalStore.userPrivilege = RoleId;
diff --git a/src/views/Logs/AuditLogs/AuditLogs.vue b/src/views/Logs/AuditLogs/AuditLogs.vue
index 951e932d89..412df956a6 100644
--- a/src/views/Logs/AuditLogs/AuditLogs.vue
+++ b/src/views/Logs/AuditLogs/AuditLogs.vue
@@ -1,7 +1,7 @@
 <template>
   <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.auditLogs')" />
-    <div style="width:116%">
+   
     <div class="section-divider mb-4 mt-4"></div>
     <BRow class="align-items-start" >
       <BCol sm="8" xl="6" class="d-sm-flex align-items-end mb-4 searchStyle">
@@ -32,7 +32,7 @@
         </BButton>
       </BCol>
     </BRow>
-  </div>
+ 
     <BRow>
       <BCol>
         <BTable