From bd0fdbbe080fba25dd8ea321dfff1b332e575786 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Tue, 26 Nov 2024 12:43:22 +0530
Subject: [PATCH] Implemented System Parameters page - 1110

- Implemented System Parameters page - 1110
- Jira story: https://jsw.ibm.com/browse/PFEBMC-2390

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>
---
 src/router/routes.js                          |   9 +
 src/store/index.js                            |   2 +
 .../SystemParametersStore.js                  | 415 +++++--------
 .../SystemParameters/AggressivePrefetch.vue   |  68 +--
 .../SystemParameters/FrequencyCap.vue         | 249 ++++----
 .../SystemParameters/LateralCastOut.vue       |  69 +--
 .../RuntimeProcessorDiagnostic.vue            | 570 +++++++++---------
 .../SystemParameters/SystemParameters.vue     |  80 +--
 8 files changed, 653 insertions(+), 809 deletions(-)

diff --git a/src/router/routes.js b/src/router/routes.js
index 847eb48c13..2d9480a713 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -23,6 +23,7 @@ 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';
+import SystemParameters from '@/views/ResourceManagement/SystemParameters';
 
 const roles = {
   administrator: 'Administrator',
@@ -164,6 +165,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.power'),
         },
       },
+      {
+        path: '/resource-management/system-parameters',
+        name: 'system-parameters',
+        component: SystemParameters,
+        meta: {
+          title: i18n.global.t('appPageTitle.systemParameters'),
+        },
+      },
       {
         path: '/resource-management/memory',
         name: 'memory',
diff --git a/src/store/index.js b/src/store/index.js
index e380047aea..a2de1d67dd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -25,6 +25,7 @@ import FanStore from './modules/HardwareStatus/FanStore';
 import MemoryStore from './modules/HardwareStatus/MemoryStore';
 import AssemblyStore from './modules/HardwareStatus/AssemblyStore';
 import FabricAdaptersStore from './modules/HardwareStatus/FabricAdaptersStore';
+import SystemParametersStore from './modules/ResourceManagement/SystemParametersStore';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -53,4 +54,5 @@ export {
   BmcStore,
   AssemblyStore,
   FabricAdaptersStore,
+  SystemParametersStore,
 };
diff --git a/src/store/modules/ResourceManagement/SystemParametersStore.js b/src/store/modules/ResourceManagement/SystemParametersStore.js
index 5a198f8cfa..ff2d49466f 100644
--- a/src/store/modules/ResourceManagement/SystemParametersStore.js
+++ b/src/store/modules/ResourceManagement/SystemParametersStore.js
@@ -1,9 +1,11 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const systemParametersStore = {
-  namespaced: true,
-  state: {
+export const SystemParametersStore = defineStore('systemParameters', {
+  
+  state: () => ({
+    registryEntries: [],
     rpdPolicyOptions: [],
     rpdFeatureOptions: [],
     aggressivePrefetch: false,
@@ -18,291 +20,190 @@ const systemParametersStore = {
     rpdFeature: null,
     rpdScheduledRun: null,
     rpdScheduledRunDuration: null,
-  },
+  }),
   getters: {
-    aggressivePrefetch: (state) => state.aggressivePrefetch,
-    frequencyMax: (state) => state.frequencyCap?.frequencyMax,
-    frequencyMin: (state) => state.frequencyCap?.frequencyMin,
-    frequencyRequest: (state) => state.frequencyCap?.frequencyRequest,
-    frequencyRequestCurrent: (state) =>
+    registryEntriesGetter: (state) => state.registryEntries,
+    aggressivePrefetchGetter: (state) => state.aggressivePrefetch,
+    frequencyMaxGetter: (state) => state.frequencyCap?.frequencyMax,
+    frequencyMinGetter: (state) => state.frequencyCap?.frequencyMin,
+    frequencyRequestGetter: (state) => state.frequencyCap?.frequencyRequest,
+    frequencyRequestCurrentGetter: (state) =>
       state.frequencyCap?.frequencyRequestCurrent,
-    frequencyRequestCurrentToggle: (state) =>
+    frequencyRequestCurrentToggleGetter: (state) =>
       state.frequencyRequestCurrentToggle,
-    lateralCastOutMode: (state) => state.lateralCastOutMode,
-    immediateTestRequested: (state) => state.immediateTestRequested,
-    guardOnError: (state) => state.guardOnError,
-    rpdPolicy: (state) => state.rpdPolicy,
-    pvmRpdPolicy: (state) => state.pvmRpdPolicy,
-    rpdPolicyCurrent: (state) => state.rpdPolicyCurrent,
-    rpdFeature: (state) => state.rpdFeature,
-    rpdPolicyOptions: (state) => state.rpdPolicyOptions,
-    rpdFeatureOptions: (state) => state.rpdFeatureOptions,
-    rpdScheduledRun: (state) => state.rpdScheduledRun,
-    rpdScheduledRunDuration: (state) => state.rpdScheduledRunDuration,
-  },
-  mutations: {
-    setFrequencyRequestCurrentToggle: (state, frequencyRequestCurrentToggle) =>
-      (state.frequencyRequestCurrentToggle = frequencyRequestCurrentToggle),
-    setAggressivePrefetch: (state, aggressivePrefetch) =>
-      (state.aggressivePrefetch = aggressivePrefetch),
-    setFrequencyCap: (state, frequencyCap) =>
-      (state.frequencyCap = frequencyCap),
-    setLateralCastOutMode: (state, lateralCastOutMode) =>
-      (state.lateralCastOutMode = lateralCastOutMode),
-    setImmediateTestRequested: (state, immediateTestRequested) =>
-      (state.immediateTestRequested = immediateTestRequested),
-    setGuardOnError: (state, guardOnError) =>
-      (state.guardOnError = guardOnError),
-    setRpdPolicy: (state, rpdPolicy) => (state.rpdPolicy = rpdPolicy),
-    setPvmRpdPolicy: (state, pvmRpdPolicy) =>
-      (state.pvmRpdPolicy = pvmRpdPolicy),
-    setRpdPolicyCurrent: (state, rpdPolicyCurrent) =>
-      (state.rpdPolicyCurrent = rpdPolicyCurrent),
-    setRpdFeature: (state, rpdFeature) => (state.rpdFeature = rpdFeature),
-    setRpdPolicyOptions: (state, rpdPolicyOptions) =>
-      (state.rpdPolicyOptions = rpdPolicyOptions),
-    setRpdFeatureOptions: (state, rpdFeatureOptions) =>
-      (state.rpdFeatureOptions = rpdFeatureOptions),
-    setRpdScheduledRun: (state, rpdScheduledRun) =>
-      (state.rpdScheduledRun = rpdScheduledRun),
-    setRpdScheduledRunDuration: (state, rpdScheduledRunDuration) =>
-      (state.rpdScheduledRunDuration = rpdScheduledRunDuration),
+    lateralCastOutModeGetter: (state) => state.lateralCastOutMode,
+    immediateTestRequestedGetter: (state) => state.immediateTestRequested,
+    guardOnErrorGetter: (state) => state.guardOnError,
+    rpdPolicyGetter: (state) => state.rpdPolicy,
+    pvmRpdPolicyGetter: (state) => state.pvmRpdPolicy,
+    rpdPolicyCurrentGetter: (state) => state.rpdPolicyCurrent,
+    rpdFeatureGetter: (state) => state.rpdFeature,
+    rpdPolicyOptionsGetter: (state) => state.rpdPolicyOptions,
+    rpdFeatureOptionsGetter: (state) => state.rpdFeatureOptions,
+    rpdScheduledRunGetter: (state) => state.rpdScheduledRun,
+    rpdScheduledRunDurationGetter: (state) => state.rpdScheduledRunDuration,
   },
+  
   actions: {
-    async getAggressivePrefetch({ commit }) {
+    async getBiosAttributesRegistry() {
       return await api
         .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
+          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry'
         )
-        .then(({ data: { RegistryEntries } }) => {
-          const aggressivePrefetch = RegistryEntries.Attributes.filter(
+        .then((response) => {
+          this.registryEntries = response.data.RegistryEntries;
+          const aggressivePrefetch = this.registryEntries.Attributes.filter(
             (Attribute) =>
-              Attribute.AttributeName == 'hb_proc_favor_aggressive_prefetch',
+              Attribute.AttributeName == 'hb_proc_favor_aggressive_prefetch'
           );
           let aggressivePrefetchValue = aggressivePrefetch[0].CurrentValue;
-          let modeValue = aggressivePrefetchValue == 'Enabled' ? true : false;
-          commit('setAggressivePrefetch', modeValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdPolicy({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdPolicy = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_policy',
+          let aggressivePrefetchModeValue =
+            aggressivePrefetchValue == 'Enabled' ? true : false;
+          this.aggressivePrefetch = aggressivePrefetchModeValue;
+          const rpdPolicy = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_policy'
           );
           let rpdPolicyValue = rpdPolicy[0].CurrentValue;
-          commit('setRpdPolicy', rpdPolicyValue);
-          commit('setPvmRpdPolicy', rpdPolicyValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdPolicyCurrent({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdPolicyCurr = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature_current',
+          this.rpdPolicy = rpdPolicyValue;
+          this.pvmRpdPolicy = rpdPolicyValue;
+          const rpdPolicyCurr = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature_current'
           );
           let rpdPolicyCurrValue = rpdPolicyCurr[0].CurrentValue;
-          commit('setRpdPolicyCurrent', rpdPolicyCurrValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdFeature({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdFeature = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature',
+          this.rpdPolicyCurrent = rpdPolicyCurrValue;
+          const rpdFeature = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature'
           );
           let rpdFeatureValue = rpdFeature[0].CurrentValue;
-          commit('setRpdFeature', rpdFeatureValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getImmediateTestRequested({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const immediateTestRequested = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_immediate_test',
+          this.rpdFeature = rpdFeatureValue;
+          const immediateTestRequested = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_immediate_test'
           );
           let immediateTestRequestedValue =
             immediateTestRequested[0].CurrentValue;
-          let modeValue =
+          let immediateTestRequestedModeValue =
             immediateTestRequestedValue == 'Enabled' ? true : false;
-          commit('setImmediateTestRequested', modeValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getGuardOnError({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const immediateTestRequested = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_guard_policy',
+          this.immediateTestRequested = immediateTestRequestedModeValue;
+          const guardOnError = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_guard_policy'
           );
-          let immediateTestRequestedValue =
-            immediateTestRequested[0].CurrentValue;
-          let modeValue =
-            immediateTestRequestedValue == 'Enabled' ? true : false;
-          commit('setGuardOnError', modeValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdPolicyOptions({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdPolicy = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_policy',
+          let guardOnErrorCurr = guardOnError[0].CurrentValue;
+          let guardOnErrorModeValue =
+            guardOnErrorCurr == 'Enabled' ? true : false;
+          this.guardOnError = guardOnErrorModeValue;
+          const rpdPolicyOps = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_policy'
           );
-          let rpdPolicyOptions = rpdPolicy[0].Value.map(
-            ({ ValueName }) => ValueName,
+          let rpdPolicyOptions = rpdPolicyOps[0].Value.map(
+            ({ ValueName }) => ValueName
           );
-          commit('setRpdPolicyOptions', rpdPolicyOptions);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdFeatureOptions({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdPolicy = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature',
+          this.rpdPolicyOptions = rpdPolicyOptions;
+          const rpdFeatureOps = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_feature'
           );
-          let rpdFeatureOptions = rpdPolicy[0].Value.map(
-            ({ ValueName }) => ValueName,
+          let rpdFeatureOptions = rpdFeatureOps[0].Value.map(
+            ({ ValueName }) => ValueName
           );
-          commit('setRpdFeatureOptions', rpdFeatureOptions);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdScheduledRun({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdScheduledRun = RegistryEntries.Attributes.filter(
-            (Attribute) => Attribute.AttributeName == 'pvm_rpd_scheduled_tod',
+         this.rpdFeatureOptions = rpdFeatureOptions;
+          const rpdScheduledRun = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'pvm_rpd_scheduled_tod'
           );
           let RpdScheduledRunValue = rpdScheduledRun[0].CurrentValue;
           const hours = Math.floor(RpdScheduledRunValue / 3600);
           const minutes = Math.floor((RpdScheduledRunValue % 3600) / 60);
           const hourString = hours.toString().padStart(2, '0');
           const minuteString = minutes.toString().padStart(2, '0');
-          commit('setRpdScheduledRun', `${hourString}:${minuteString}`);
-        })
-        .catch((error) => console.log(error));
-    },
-    async getRpdScheduledRunDuration({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const rpdScheduledRunDuration = RegistryEntries.Attributes.filter(
+          this.rpdScheduledRun = `${hourString}:${minuteString}`;
+          const rpdScheduledRunDuration = this.registryEntries.Attributes.filter(
             (Attribute) =>
-              Attribute.AttributeName == 'pvm_rpd_scheduled_duration',
+              Attribute.AttributeName == 'pvm_rpd_scheduled_duration'
           );
           let rpdScheduledRunValue = rpdScheduledRunDuration[0].CurrentValue;
-          commit('setRpdScheduledRunDuration', rpdScheduledRunValue);
+          this.rpdScheduledRunDuration = rpdScheduledRunValue;
+          const lateralCastOutMode = this.registryEntries.Attributes.filter(
+            (Attribute) => Attribute.AttributeName == 'hb_lateral_cast_out_mode'
+          );
+          let lateralCastOutModeValue = lateralCastOutMode[0].CurrentValue;
+          let lateralCastModeValue =
+            lateralCastOutModeValue == 'Enabled' ? true : false;
+          this.lateralCastOutMode = lateralCastModeValue;
         })
         .catch((error) => console.log(error));
     },
-    async saveAggressivePrefetch({ commit }, updatedAggressivePrefetch) {
+    async saveAggressivePrefetch(updatedAggressivePrefetch) {
       let updatedModeValue = updatedAggressivePrefetch ? 'Enabled' : 'Disabled';
-      commit('setAggressivePrefetch', updatedAggressivePrefetch);
+      this.aggressivePrefetch = updatedAggressivePrefetch;
       const updatedAggressivePrefetchValue = {
         Attributes: { hb_proc_favor_aggressive_prefetch: updatedModeValue },
       };
       return api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedAggressivePrefetchValue,
+          updatedAggressivePrefetchValue
         )
         .then(() => {
-          return i18n.t(
-            'pageSystemParameters.toast.successSavingAggressivePrefetch',
+          return i18n.global.t(
+            'pageSystemParameters.toast.successSavingAggressivePrefetch'
           );
         })
         .catch((error) => {
           console.log(error);
-          commit('setAggressivePrefetch', !updatedAggressivePrefetch);
+          this.aggressivePrefetch = !updatedAggressivePrefetch;
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingAggressivePrefetch'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingAggressivePrefetch')
           );
         });
     },
-    async saveRpdPolicy({ commit, dispatch }, rpdPolicyValue) {
+    async saveRpdPolicy(rpdPolicyValue) {
       const updatedRpdPolicyValue = {
         Attributes: { pvm_rpd_policy: rpdPolicyValue },
       };
       return await api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedRpdPolicyValue,
+          updatedRpdPolicyValue
         )
         .then(() => {
-          commit(
-            'setRpdPolicy',
-            updatedRpdPolicyValue.Attributes.pvm_rpd_policy,
-          );
-          dispatch('getRpdPolicy');
-          return i18n.t('pageSystemParameters.toast.successSavingRpdPolicy');
+          this.rpdPolicy =
+            updatedRpdPolicyValue.Attributes.pvm_rpd_policy
+          ;
+          this.getBiosAttributesRegistry();
+          return i18n.global.t('pageSystemParameters.toast.successSavingRpdPolicy');
         })
         .catch((error) => {
           console.log('error', error);
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingRpdPolicy'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingRpdPolicy')
           );
         });
     },
-    async saveRpdFeature({ commit }, rpdFeatureValue) {
+    async saveRpdFeature(rpdFeatureValue) {
       const updatedRpdFeatureValue = {
         Attributes: { pvm_rpd_feature: rpdFeatureValue },
       };
       return await api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedRpdFeatureValue,
+          updatedRpdFeatureValue
         )
         .then(() => {
-          commit(
-            'setRpdFeature',
-            updatedRpdFeatureValue.Attributes.pvm_rpd_feature,
-          );
-          return i18n.t('pageSystemParameters.toast.successSavingRpdFeature');
+          this.rpdFeature = 
+            updatedRpdFeatureValue.Attributes.pvm_rpd_feature
+          ;
+          return i18n.global.t('pageSystemParameters.toast.successSavingRpdFeature');
         })
         .catch((error) => {
           console.log('error', error);
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingRpdFeature'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingRpdFeature')
           );
         });
     },
-    async saveImmediateTestRequested({ commit }, { value }) {
+    async saveImmediateTestRequested({ value }) {
       if (value === 'Enabled') {
-        commit('setImmediateTestRequested', true);
+        this.immediateTestRequested = true;
       } else {
-        commit('setImmediateTestRequested', false);
+        this.immediateTestRequested = false;
       }
       const updatedImmediateTestRequestedValue = {
         Attributes: { pvm_rpd_immediate_test: value },
@@ -310,61 +211,61 @@ const systemParametersStore = {
       return api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedImmediateTestRequestedValue,
+          updatedImmediateTestRequestedValue
         )
         .then(() => {
           if (value === 'Enabled') {
-            return i18n.t(
-              'pageSystemParameters.toast.successStartingDiagnosticTestRun',
+            return i18n.global.t(
+              'pageSystemParameters.toast.successStartingDiagnosticTestRun'
             );
           } else {
-            return i18n.t(
-              'pageSystemParameters.toast.successStoppingDiagnosticTestRun',
+            return i18n.global.t(
+              'pageSystemParameters.toast.successStoppingDiagnosticTestRun'
             );
           }
         })
         .catch((error) => {
           console.log(error);
           if (value === 'Enabled') {
-            commit('setImmediateTestRequested', false);
+            this.immediateTestRequested = false;
             throw new Error(
-              i18n.t(
-                'pageSystemParameters.toast.errorStartingDiagnosticTestRun',
-              ),
+              i18n.global.t(
+                'pageSystemParameters.toast.errorStartingDiagnosticTestRun'
+              )
             );
           } else {
-            commit('setImmediateTestRequested', true);
+            this.immediateTestRequested = true;
             throw new Error(
-              i18n.t(
-                'pageSystemParameters.toast.errorStoppingDiagnosticTestRun',
-              ),
+              i18n.global.t(
+                'pageSystemParameters.toast.errorStoppingDiagnosticTestRun'
+              )
             );
           }
         });
     },
-    async saveGuardOnError({ commit }, updatedImmediateTestRequested) {
+    async saveGuardOnError(updatedImmediateTestRequested) {
       let updatedValue = updatedImmediateTestRequested ? 'Enabled' : 'Disabled';
-      commit('setGuardOnError', updatedImmediateTestRequested);
+      this.guardOnError = updatedImmediateTestRequested;
       const updatedImmediateTestRequestedValue = {
         Attributes: { pvm_rpd_guard_policy: updatedValue },
       };
       return api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedImmediateTestRequestedValue,
+          updatedImmediateTestRequestedValue
         )
         .then(() => {
-          return i18n.t('pageSystemParameters.toast.successSavingGuardOnError');
+          return i18n.global.t('pageSystemParameters.toast.successSavingGuardOnError');
         })
         .catch((error) => {
           console.log(error);
-          commit('setGuardOnError', !updatedImmediateTestRequested);
+          this.guardOnError = !updatedImmediateTestRequested;
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingGuardOnError'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingGuardOnError')
           );
         });
     },
-    async saveRpdScheduledRun({ commit }, payload) {
+    async saveRpdScheduledRun(payload) {
       const updatedIoEnlargedCapacity = {
         Attributes: {
           pvm_rpd_scheduled_tod: payload.totalSeconds,
@@ -374,60 +275,44 @@ const systemParametersStore = {
       return await api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedIoEnlargedCapacity,
+          updatedIoEnlargedCapacity
         )
         .then(() => {
-          commit('setRpdScheduledRun', payload.startTime);
-          return i18n.t('pageSystemParameters.toast.successSavingRpdRun');
+          this.rpdScheduledRun = payload.startTime;
+          return i18n.global.t('pageSystemParameters.toast.successSavingRpdRun');
         })
         .catch((error) => {
           console.log('error', error);
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingRpdRun'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingRpdRun')
           );
         });
     },
-    async getLateralCastOutMode({ commit }) {
-      return await api
-        .get(
-          '/redfish/v1/Registries/BiosAttributeRegistry/BiosAttributeRegistry',
-        )
-        .then(({ data: { RegistryEntries } }) => {
-          const lateralCastOutMode = RegistryEntries.Attributes.filter(
-            (Attribute) =>
-              Attribute.AttributeName == 'hb_lateral_cast_out_mode',
-          );
-          let lateralCastOutModeValue = lateralCastOutMode[0].CurrentValue;
-          let modeValue = lateralCastOutModeValue == 'Enabled' ? true : false;
-          commit('setLateralCastOutMode', modeValue);
-        })
-        .catch((error) => console.log(error));
-    },
-    async saveLateralCastOutMode({ commit }, lateralCastOutModeValue) {
+    async saveLateralCastOutMode(lateralCastOutModeValue) {
       let updatedModeValue = lateralCastOutModeValue ? 'Enabled' : 'Disabled';
-      commit('setLateralCastOutMode', lateralCastOutModeValue);
+      this.lateralCastOutMode = lateralCastOutModeValue;
       const updatedLateralCastOutMode = {
         Attributes: { hb_lateral_cast_out_mode: updatedModeValue },
       };
       return api
         .patch(
           '/redfish/v1/Systems/system/Bios/Settings',
-          updatedLateralCastOutMode,
+          updatedLateralCastOutMode
         )
         .then(() => {
-          return i18n.t(
-            'pageSystemParameters.toast.successSavingLateralCastOut',
+          return i18n.global.t(
+            'pageSystemParameters.toast.successSavingLateralCastOut'
           );
         })
         .catch((error) => {
           console.log(error);
-          commit('setLateralCastOutMode', !lateralCastOutModeValue);
+          this.lateralCastOutMode = !lateralCastOutModeValue;
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingLateralCastOut'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingLateralCastOut')
           );
         });
     },
-    async getFrequencyCap({ commit }) {
+    async getFrequencyCap() {
       return await api
         .get('/redfish/v1/Systems/system/Bios')
         .then(({ data: { Attributes } }) => {
@@ -438,48 +323,48 @@ const systemParametersStore = {
             frequencyRequestCurrent: Attributes.hb_cap_freq_mhz_request_current,
           };
 
-          commit('setFrequencyCap', frequencyCapData);
+          this.frequencyCap = frequencyCapData;
 
           if (frequencyCapData.frequencyRequest == 0) {
-            commit('setFrequencyRequestCurrentToggle', false);
+            this.frequencyRequestCurrentToggle = false;
           } else {
-            commit('setFrequencyRequestCurrentToggle', true);
+            this.requencyRequestCurrentToggle = true;
           }
         })
         .catch((error) => console.log(error));
     },
-    async saveFrequencyCap({ commit, dispatch }, { frequency, state }) {
+    async saveFrequencyCap({ frequency, state }) {
       if (state) {
-        commit('setFrequencyRequestCurrentToggle', true);
+        this.frequencyRequestCurrentToggle = true;
       } else {
-        commit('setFrequencyRequestCurrentToggle', false);
+        this.frequencyRequestCurrentToggle = false;
       }
-      return dispatch('newFrequencyCapRequest', frequency);
+      return this.newFrequencyCapRequest(frequency);
     },
 
-    async newFrequencyCapRequest({ commit, dispatch }, frequency) {
+    async newFrequencyCapRequest(frequency) {
       const newFrequencyRequest = {
-        Attributes: { hb_cap_freq_mhz_request: frequency },
+        Attributes: { hb_cap_freq_mhz_request: Number(frequency) },
       };
       return api
         .patch('/redfish/v1/Systems/system/Bios/Settings', newFrequencyRequest)
         .then(() => {
-          dispatch('getFrequencyCap');
-          return i18n.t('pageSystemParameters.toast.successSavingFrequencyCap');
+          this.getFrequencyCap();
+          return i18n.global.t('pageSystemParameters.toast.successSavingFrequencyCap');
         })
         .catch((error) => {
           if (frequency == 0) {
-            commit('setFrequencyRequestCurrentToggle', false);
+            this.frequencyRequestCurrentToggle = false;
           } else {
-            commit('setFrequencyRequestCurrentToggle', true);
+            this.frequencyRequestCurrentToggle = true;
           }
           console.log(error);
           throw new Error(
-            i18n.t('pageSystemParameters.toast.errorSavingFrequencyCap'),
+            i18n.global.t('pageSystemParameters.toast.errorSavingFrequencyCap')
           );
         });
     },
   },
-};
+});
 
-export default systemParametersStore;
+export default SystemParametersStore;
diff --git a/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue b/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
index 35f04a8774..8eeb3e748b 100644
--- a/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
+++ b/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
@@ -1,6 +1,6 @@
 <template>
-  <b-row class="section-divider">
-    <b-col class="d-flex align-items-center justify-content-between">
+  <BRow class="section-divider">
+    <BCol class="d-flex align-items-center justify-content-between">
       <dl class="mt-3 mr-3 w-75">
         <dt id="aggressive-prefetch-label">
           {{ $t('pageSystemParameters.aggressivePrefetch') }}
@@ -10,55 +10,51 @@
           {{ $t('pageSystemParameters.aggressivePrefetchDescription') }}
         </dd>
       </dl>
-      <b-form-checkbox
+      <BFormCheckbox
         id="aggressivePrefetchSwitch"
         v-model="aggressivePrefetchState"
         aria-labelledby="aggressive-prefetch-label"
         aria-describedby="aggressive-prefetch-description"
         switch
-        @change="changeAggressivePrefetchState"
+        @update:modelValue="changeAggressivePrefetchState"
       >
         <span v-if="aggressivePrefetchState">
           {{ $t('global.status.enabled') }}
         </span>
         <span v-else>{{ $t('global.status.disabled') }}</span>
-      </b-form-checkbox>
-    </b-col>
-  </b-row>
+      </BFormCheckbox>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+<script setup>
+import { computed, defineProps } from 'vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useToastComposable from '@/components/Composables/useToastComposable';
+import { SystemParametersStore } from '@/store';
+const Toast = useToastComposable();
+const systemParametersStore = SystemParametersStore();
 
-export default {
-  name: 'AggressivePrefetch',
-  components: { InfoTooltip },
-  mixins: [LoadingBarMixin, BVToastMixin],
-  props: {
-    safeMode: {
-      type: Boolean,
-      default: null,
-    },
+defineProps({
+  safeMode: {
+    type: Boolean,
+    default: null,
   },
-  computed: {
-    aggressivePrefetchState: {
-      get() {
-        return this.$store.getters['systemParameters/aggressivePrefetch'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
+});
+
+const aggressivePrefetchState = computed({
+  get() {
+    return systemParametersStore.aggressivePrefetch;
   },
-  methods: {
-    changeAggressivePrefetchState(state) {
-      this.$store
-        .dispatch('systemParameters/saveAggressivePrefetch', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
+  set(newValue) {
+    systemParametersStore.aggressivePrefetch = newValue;
   },
+});
+
+const changeAggressivePrefetchState = (state) => {
+  systemParametersStore
+    .saveAggressivePrefetch(state)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message));
 };
 </script>
diff --git a/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue b/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
index ba63197e97..da4c8f899f 100644
--- a/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
+++ b/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mb-3 mr-3 w-75">
           <dt id="frequency-cap-label">
             {{ $t('pageSystemParameters.frequencyCap') }}
@@ -17,32 +17,28 @@
             {{ $t('pageSystemParameters.frequencyCapDescription') }}
           </dd>
         </dl>
-        <b-form-checkbox
+        <BFormCheckbox
           id="frequency-cap-switch"
           v-model="frequencyRequestCurrentToggle"
           aria-labelledby="frequency-cap-label"
           aria-describedby="frequency-cap-description"
           :disabled="frequencyMax === 0 && frequencyMin === 0"
           switch
-          @change="changeFrequencyRequestCurrent"
+          @update:modelValue="changeFrequencyRequestCurrent"
         >
           <span v-if="frequencyRequestCurrentToggle">
             {{ $t('global.status.enabled') }}
           </span>
           <span v-else>{{ $t('global.status.disabled') }}</span>
-        </b-form-checkbox>
-      </b-col>
-    </b-row>
+        </BFormCheckbox>
+      </BCol>
+    </BRow>
     <!-- Form -->
-    <b-row class="section-divider">
-      <b-col class="d-flex align-items-center justify-content-start col-6 mb-1">
-        <b-form class="form-width" @submit.prevent>
-          <b-form-group
-            id="input-group-1"
-            label-for="input-1"
-            class="mb-0 mr-0"
-          >
-            <b-form-text
+    <BRow class="section-divider">
+      <BCol class="d-flex align-items-center justify-content-start col-6 mb-1">
+        <BForm class="form-width" @submit.prevent>
+          <BFormGroup id="input-group-1" label-for="input-1" class="mb-0 mr-0">
+            <BFormText
               v-show="frequencyRequestCurrentToggle"
               id="frequency-cap-help-text"
             >
@@ -52,21 +48,21 @@
                   max: dataFormatter(frequencyMax),
                 })
               }}
-            </b-form-text>
+            </BFormText>
 
-            <b-input-group>
-              <b-form-input
+            <BInputGroup class="mb-3 mr-0">
+              <BFormInput
                 id="input-1"
                 v-model="frequencyValue"
                 type="number"
                 aria-describedby="frequency-cap-help-text"
                 :disabled="!frequencyRequestCurrentToggle"
                 :number="true"
-                :state="getValidationState($v.frequencyValue)"
-                @click="$v.frequencyValue.$touch()"
+                :state="getValidationState(v$.frequencyValue)"
+                @click="v$.frequencyValue.$touch()"
                 @input="frequencyRequest"
               />
-              <b-form-invalid-feedback
+              <BFormInvalidFeedback
                 v-if="frequencyRequestCurrentToggle"
                 role="alert"
               >
@@ -76,131 +72,122 @@
                     max: frequencyMax,
                   })
                 }}
-              </b-form-invalid-feedback>
-            </b-input-group>
-            <b-button
+              </BFormInvalidFeedback>
+            </BInputGroup>
+            <BButton
               variant="primary"
               type="submit"
               :disabled="!frequencyRequestCurrentToggle"
-              class="mt-3 mb-3"
+              class="mb-3"
               @click="saveFrequencyRequest"
             >
               {{ $t('global.action.save') }}
-            </b-button>
-          </b-form-group>
-        </b-form>
-      </b-col>
-    </b-row>
+            </BButton>
+          </BFormGroup>
+        </BForm>
+      </BCol>
+    </BRow>
   </div>
 </template>
 
-<script>
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { requiredIf, between, numeric } from 'vuelidate/lib/validators';
+<script setup>
+import { computed, defineProps, ref, onBeforeMount } from 'vue';
+import { requiredIf, between, numeric } from '@vuelidate/validators';
+import { SystemParametersStore } from '@/store';
+import { useVuelidate } from '@vuelidate/core';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import useToastComposable from '@/components/Composables/useToastComposable';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 
-export default {
-  name: 'FrequencyCap',
-  components: { InfoTooltip },
-  mixins: [DataFormatterMixin, LoadingBarMixin, BVToastMixin, VuelidateMixin],
-  props: {
-    safeMode: {
-      type: Boolean,
-      default: null,
-    },
+const { startLoader, endLoader } = useLoadingBar();
+const Toast = useToastComposable();
+const { dataFormatter } = useDataFormatterGlobal();
+const { getValidationState } = useVuelidateComposable();
+const systemParametersStore = SystemParametersStore();
+
+defineProps({
+  safeMode: {
+    type: Boolean,
+    default: null,
   },
-  data() {
-    return {
-      isDisabled: true,
-      frequencyValue: 0,
-    };
+});
+
+const isDisabled = ref(true);
+const frequencyValue = ref(0);
+
+const frequencyMax = computed(() => systemParametersStore.frequencyMaxGetter);
+const frequencyMin = computed(() => systemParametersStore.frequencyMinGetter);
+const frequencyRequestCurrent = computed(
+  () => systemParametersStore.frequencyRequestCurrentGetter,
+);
+const frequencyControl = computed({
+  get() {
+    return frequencyRequestCurrent.value > 0;
   },
-  computed: {
-    frequencyMax() {
-      return this.$store.getters['systemParameters/frequencyMax'];
-    },
-    frequencyMin() {
-      return this.$store.getters['systemParameters/frequencyMin'];
-    },
-    frequencyRequestCurrent() {
-      return this.$store.getters['systemParameters/frequencyRequestCurrent'];
-    },
-    frequencyControl: {
-      get() {
-        return this.frequencyRequestCurrent > 0;
-      },
-      set(newValue) {
-        this.changeFrequencyControl();
-        return newValue;
-      },
-    },
-    frequencyRequestCurrentToggle: {
-      get() {
-        return this.$store.getters[
-          'systemParameters/frequencyRequestCurrentToggle'
-        ];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
+  set(newValue) {
+    return newValue;
   },
-  validations() {
-    return {
-      frequencyValue: {
-        requiredIf: requiredIf(this.frequencyRequestCurrentToggle),
-        numeric,
-        between: between(this.frequencyMin, this.frequencyMax),
-      },
-    };
+});
+const frequencyRequestCurrentToggle = computed({
+  get() {
+    return systemParametersStore.frequencyRequestCurrentToggleGetter;
   },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('systemParameters/getFrequencyCap').then(() => {
-      this.frequencyValue =
-        this.$store.getters['systemParameters/frequencyRequest'];
-      this.endLoader();
-    });
+  set(newValue) {
+    return newValue;
   },
-  methods: {
-    changeFrequencyRequestCurrent(state) {
-      if (state) {
-        this.frequencyValue = this.frequencyMax;
-        this.$store
-          .dispatch('systemParameters/saveFrequencyCap', {
-            frequency: this.frequencyMax,
-            state: state,
-          })
-          .then((message) => this.successToast(message))
-          .catch(({ message }) => this.errorToast(message));
-      } else {
-        this.frequencyValue = 0;
-        this.$store
-          .dispatch('systemParameters/saveFrequencyCap', {
-            frequency: 0,
-            state: state,
-          })
-          .then((message) => this.successToast(message))
-          .catch(({ message }) => this.errorToast(message));
-      }
-    },
-    saveFrequencyRequest() {
-      if (this.$v.$invalid) return;
-      this.$store
-        .dispatch(
-          'systemParameters/newFrequencyCapRequest',
-          this.frequencyValue,
-        )
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    frequencyRequest(value) {
-      this.frequencyValue = Number(value);
-    },
+});
+const rules = computed(() => ({
+  frequencyValue: {
+    requiredIf: requiredIf(frequencyRequestCurrentToggle),
+    numeric,
+    between: between(frequencyMin, frequencyMax),
   },
+}));
+const v$ = useVuelidate(rules, { frequencyValue });
+
+onBeforeMount(() => {
+  startLoader();
+  systemParametersStore
+    .getFrequencyCap()
+    .then(() => {
+      frequencyValue.value = systemParametersStore.frequencyRequestGetter;
+    })
+    .finally(() => endLoader());
+});
+const changeFrequencyRequestCurrent = (state) => {
+  if (state) {
+    frequencyValue.value = frequencyMax.value;
+    systemParametersStore
+      .saveFrequencyCap({
+        frequency: frequencyMax.value,
+        state: state,
+      })
+      .then((message) => Toast.successToast(message))
+      .catch(({ message }) => Toast.errorToast(message));
+  } else {
+    frequencyValue.value = 0;
+    systemParametersStore
+      .saveFrequencyCap({
+        frequency: 0,
+        state: state,
+      })
+      .then((message) => Toast.successToast(message))
+      .catch(({ message }) => Toast.errorToast(message));
+  }
+};
+const saveFrequencyRequest = () => {
+  if (v$.value.$invalid) {
+    return;
+  }
+  systemParametersStore
+    .newFrequencyCapRequest(frequencyValue.value)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message));
+};
+const frequencyRequest = (value) => {
+  frequencyValue.value = Number(value);
 };
 </script>
 
diff --git a/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue b/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
index 8b4a357f53..f3ba8dba2c 100644
--- a/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
+++ b/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b-row class="section-divider">
-      <b-col class="d-flex align-items-center justify-content-between">
+    <BRow class="section-divider">
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mr-3 w-75">
           <dt id="ateral-cast-out-label">
             {{ $t('pageSystemParameters.lateralCastOut') }}
@@ -11,56 +11,51 @@
             {{ $t('pageSystemParameters.lateralCastOutDescription') }}
           </dd>
         </dl>
-        <b-form-checkbox
+        <BFormCheckbox
           id="lateral-cast-out-switch"
-          v-model="lateralCastOutModeState"
+          v-model="systemParametersStore.lateralCastOutMode"
           aria-labelledby="lateral-cast-out-label"
           aria-describedby="lateral-cast-out-description"
           switch
-          @change="changeLateralCastOutState"
+          @update:modelValue="changeLateralCastOutState"
         >
           <span v-if="lateralCastOutModeState">
             {{ $t('global.status.enabled') }}
           </span>
           <span v-else>{{ $t('global.status.disabled') }}</span>
-        </b-form-checkbox>
-      </b-col>
-    </b-row>
+        </BFormCheckbox>
+      </BCol>
+    </BRow>
   </div>
 </template>
 
-<script>
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+<script setup>
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import { SystemParametersStore } from '@/store';
+import { computed, defineProps } from 'vue';
+import useToastComposable from '@/components/Composables/useToastComposable';
+const systemParametersStore = SystemParametersStore();
+const Toast = useToastComposable();
 
-export default {
-  name: 'LateralCastOut',
-  components: { InfoTooltip },
-  mixins: [LoadingBarMixin, BVToastMixin],
-  props: {
-    safeMode: {
-      type: Boolean,
-      default: null,
-    },
+defineProps({
+  safeMode: {
+    type: Boolean,
+    default: null,
   },
-  computed: {
-    lateralCastOutModeState: {
-      get() {
-        return this.$store.getters['systemParameters/lateralCastOutMode'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
+});
+const lateralCastOutModeState = computed({
+  get() {
+    return systemParametersStore.lateralCastOutModeGetter;
   },
-  methods: {
-    changeLateralCastOutState(state) {
-      this.$store
-        .dispatch('systemParameters/saveLateralCastOutMode', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
+  set(newValue) {
+    return newValue;
   },
+});
+
+const changeLateralCastOutState = (state) => {
+  systemParametersStore
+    .saveLateralCastOutMode(state)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message));
 };
 </script>
diff --git a/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue b/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
index 1352ecc8bd..97026790cd 100644
--- a/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
+++ b/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mr-3 w-75">
           <dt id="rpd-policy-label">
             {{ $t('pageSystemParameters.rpdFeature') }}
@@ -11,23 +11,23 @@
             {{ $t('pageSystemParameters.rpdFeatureDescription') }}
           </dd>
         </dl>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="8" xl="6">
-        <b-form novalidate @submit.prevent="updateRpdFeature">
-          <b-select
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol md="8" xl="6">
+        <BForm novalidate @submit.prevent="updateRpdFeature">
+          <BFormSelect
             v-model="selectedFeatureOption"
             :options="rpdFeatOptions"
-          ></b-select>
-          <b-button variant="primary" type="submit" class="mt-3 mb-3">
+          ></BFormSelect>
+          <BButton variant="primary" type="submit" class="mt-3 mb-3">
             {{ $t('pageSystemParameters.updateRpdFeature') }}
-          </b-button>
-        </b-form>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+          </BButton>
+        </BForm>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mr-3 w-75">
           <dt id="rpd-policy-label">
             {{ $t('pageSystemParameters.rpdPolicy') }}
@@ -36,29 +36,29 @@
             {{ $t('pageSystemParameters.rpdPolicyDescription') }}
           </dd>
         </dl>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="8" xl="6">
-        <b-form novalidate @submit.prevent="updateRpdPolicy">
-          <b-select
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol md="8" xl="6">
+        <BForm novalidate @submit.prevent="updateRpdPolicy">
+          <BFormSelect
             v-model="selectedOption"
             :options="options"
             :disabled="isRpdFeatureCurrentDisabled"
-          ></b-select>
-          <b-button
+          ></BFormSelect>
+          <BButton
             variant="primary"
             type="submit"
             class="mt-3 mb-3"
             :disabled="isRpdFeatureCurrentDisabled"
           >
             {{ $t('pageSystemParameters.updateRpdPolicy') }}
-          </b-button>
-        </b-form>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+          </BButton>
+        </BForm>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mr-3 w-75">
           <dt id="rpd-scheduled-run-label">
             {{ $t('pageSystemParameters.rpdScheduledRun') }}
@@ -67,50 +67,50 @@
             {{ $t('pageSystemParameters.rpdScheduledRunDescription') }}
           </dd>
         </dl>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="8" xl="6">
-        <b-form>
-          <b-form-group
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol md="8" xl="6">
+        <BForm>
+          <BFormGroup
             :label="$t('pageSystemParameters.startTime')"
             label-for="start-time"
             class="mb-3"
           >
-            <b-input-group>
-              <b-form-input
+            <BInputGroup>
+              <BFormInput
                 id="input-rpd-scheduled-run"
                 v-model="rpdScheduledRun"
-                :state="getValidationState($v.rpdScheduledRun)"
+                :state="getValidationState(v$.rpdScheduledRun)"
                 :disabled="isRpdFeatureCurrentDisabled || !isRpdPolicyScheduled"
-                @blur="$v.rpdScheduledRun.$touch()"
+                @blur="v$.rpdScheduledRun.$touch()"
               />
-              <b-form-invalid-feedback role="alert">
-                <div v-if="!$v.rpdScheduledRun.pattern">
+              <BFormInvalidFeedback role="alert">
+                <div v-if="!v$.rpdScheduledRun.pattern">
                   {{ $t('global.form.invalidFormat') }}
                 </div>
-              </b-form-invalid-feedback>
-            </b-input-group>
-          </b-form-group>
-          <b-form-group
+              </BFormInvalidFeedback>
+            </BInputGroup>
+          </BFormGroup>
+          <BFormGroup
             :label="$t('pageSystemParameters.duration')"
             label-for="duration"
             class="mb-3"
           >
-            <b-form-input
+            <BFormInput
               id="input-rpd-scheduled-run-duration"
               v-model.number="rpdScheduledRunDuration"
               type="number"
               :min="0"
               :max="86399"
-              :state="getValidationState($v.rpdScheduledRunDuration)"
+              :state="getValidationState(v$.rpdScheduledRunDuration)"
               :disabled="isRpdFeatureCurrentDisabled || !isRpdPolicyScheduled"
-            ></b-form-input>
-            <b-form-invalid-feedback role="alert">
+            ></BFormInput>
+            <BFormInvalidFeedback role="alert">
               <template
                 v-if="
-                  !$v.rpdScheduledRunDuration.minLength ||
-                  !$v.rpdScheduledRunDuration.maxLength
+                  !v$.rpdScheduledRunDuration.minLength ||
+                  !v$.rpdScheduledRunDuration.maxLength
                 "
               >
                 {{
@@ -120,8 +120,8 @@
                   })
                 }}
               </template>
-            </b-form-invalid-feedback>
-            <b-button
+            </BFormInvalidFeedback>
+            <BButton
               variant="primary"
               class="mt-3 mb-3"
               :disabled="isRpdFeatureCurrentDisabled || !isRpdPolicyScheduled"
@@ -130,14 +130,14 @@
               "
             >
               {{ $t('pageSystemParameters.updateRpdScheduledRun') }}
-            </b-button>
-          </b-form-group>
-        </b-form>
-      </b-col>
-    </b-row>
-    <b-row></b-row>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+            </BButton>
+          </BFormGroup>
+        </BForm>
+      </BCol>
+    </BRow>
+    <BRow></BRow>
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mr-3 w-75">
           <dt id="guard-on-error-label">
             {{ $t('pageSystemParameters.guardOnError') }}
@@ -146,24 +146,24 @@
             {{ $t('pageSystemParameters.guardOnErrorDescription') }}
           </dd>
         </dl>
-        <b-form-checkbox
+        <BFormCheckbox
           id="guardOnErrorSwitch"
           v-model="guardOnErrorState"
           aria-labelledby="guard-on-error-label"
           aria-describedby="guard-on-error-description"
           switch
           :disabled="isRpdFeatureCurrentDisabled"
-          @change="updateGuardOnErrorState"
+          @update:modelValue="updateGuardOnErrorState"
         >
           <span v-if="guardOnErrorState">
             {{ $t('global.status.enabled') }}
           </span>
           <span v-else>{{ $t('global.status.disabled') }}</span>
-        </b-form-checkbox>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="d-flex align-items-center justify-content-between">
+        </BFormCheckbox>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol class="d-flex align-items-center justify-content-between">
         <dl class="mt-3 mr-3 w-75">
           <dt id="immediate-test-requested-label">
             {{ $t('pageSystemParameters.immediateTestRequested') }}
@@ -172,237 +172,225 @@
             {{ $t('pageSystemParameters.immediateTestRequestedDescription') }}
           </dd>
         </dl>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-button
-        variant="primary"
-        type="submit"
-        class="ml-3"
-        :disabled="immediateTestRequestedState || isRpdFeatureCurrentDisabled"
-        @click="updateImmediateTestRequestedState(true)"
-      >
-        {{ $t('pageSystemParameters.runNow') }}
-      </b-button>
-      <b-button
-        variant="danger"
-        type="submit"
-        class="ml-3"
-        :disabled="!immediateTestRequestedState || isRpdFeatureCurrentDisabled"
-        @click="updateImmediateTestRequestedState(false)"
-      >
-        {{ $t('pageSystemParameters.stopTest') }}
-      </b-button>
-    </b-row>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol class="d-flex align-items-center gap-3">
+        <BButton
+          variant="primary"
+          type="submit"
+          class="mt-3 mb-3 mr-3"
+          :disabled="immediateTestRequestedState || isRpdFeatureCurrentDisabled"
+          @click="updateImmediateTestRequestedState(true)"
+        >
+          {{ $t('pageSystemParameters.runNow') }}
+        </BButton>
+        <BButton
+          variant="danger"
+          type="submit"
+          class="ml-3"
+          :disabled="
+            !immediateTestRequestedState || isRpdFeatureCurrentDisabled
+          "
+          @click="updateImmediateTestRequestedState(false)"
+        >
+          {{ $t('pageSystemParameters.stopTest') }}
+        </BButton>
+      </BCol>
+    </BRow>
   </div>
 </template>
 
-<script>
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import { mapGetters } from 'vuex';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { helpers } from 'vuelidate/lib/validators';
-import { minValue, maxValue } from 'vuelidate/lib/validators';
+<script setup>
+import { computed, defineProps, watch } from 'vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useToastComposable from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import { SystemParametersStore } from '@/store';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { helpers } from '@vuelidate/validators';
+import { minValue, maxValue } from '@vuelidate/validators';
+import i18n from '@/i18n';
+const { getValidationState } = useVuelidateComposable();
+const Toast = useToastComposable();
+const systemParametersStore = SystemParametersStore();
+const { startLoader, endLoader } = useLoadingBar();
 
 const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
-export default {
-  name: 'RuntimeProcessorDiagnostic',
-  components: { InfoTooltip },
-  mixins: [LoadingBarMixin, BVToastMixin, VuelidateMixin],
-  props: {
-    safeMode: {
-      type: Boolean,
-      default: null,
-    },
+
+defineProps({
+  safeMode: {
+    type: Boolean,
+    default: null,
   },
-  computed: {
-    ...mapGetters('systemParameters', [
-      'rpdPolicy',
-      'rpdPolicyOptions',
-      'rpdFeature',
-      'rpdFeatureOptions',
-      'pvmRpdPolicy',
-    ]),
-    selectedOption: {
-      get() {
-        return this.rpdPolicy;
-      },
-      set(value) {
-        // Do something when the option is selected
-        // e.g. update the value in the store
-        this.$store.commit('systemParameters/setRpdPolicy', value);
-      },
-    },
-    selectedFeatureOption: {
-      get() {
-        return this.rpdFeature;
-      },
-      set(value) {
-        // Do something when the option is selected
-        // e.g. update the value in the store
-        this.$store.commit('systemParameters/setRpdFeature', value);
-      },
-    },
-    isRpdPolicyScheduled() {
-      return this.pvmRpdPolicy === 'Scheduled';
-    },
-    options() {
-      return this.rpdPolicyOptions.map((option) => ({
-        value: option,
-        text: option,
-      }));
-    },
-    rpdFeatOptions() {
-      return this.rpdFeatureOptions.map((option) => ({
-        value: option,
-        text: option,
-      }));
-    },
-    isRpdFeatureCurrentDisabled() {
-      return (
-        this.$store.getters['systemParameters/rpdPolicyCurrent'] === 'Disabled'
-      );
-    },
-    aggressivePrefetchState: {
-      get() {
-        return this.$store.getters['systemParameters/aggressivePrefetch'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    immediateTestRequestedState: {
-      get() {
-        return this.$store.getters['systemParameters/immediateTestRequested'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    rpdScheduledRun: {
-      get() {
-        return this.$store.getters['systemParameters/rpdScheduledRun'];
-      },
-      set(value) {
-        this.$v.$touch();
-        this.$store.commit('systemParameters/setRpdScheduledRun', value);
-      },
-    },
-    rpdScheduledRunDuration: {
-      get() {
-        return this.$store.getters['systemParameters/rpdScheduledRunDuration'];
-      },
-      set(value) {
-        this.$v.$touch();
-        this.$store.commit(
-          'systemParameters/setRpdScheduledRunDuration',
-          value,
-        );
-      },
-    },
-    guardOnErrorState: {
-      get() {
-        return this.$store.getters['systemParameters/guardOnError'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-    isServerOff() {
-      return this.serverStatus === 'off' ? true : false;
-    },
+});
+const selectedOption = computed({
+  get() {
+    return systemParametersStore.rpdPolicy;
+  },
+  set(value) {
+    // Do something when the option is selected
+    // e.g. update the value in the store
+    systemParametersStore.rpdPolicy = value;
+  },
+});
+const selectedFeatureOption = computed({
+  get() {
+    return systemParametersStore.rpdFeature;
+  },
+  set(value) {
+    // Do something when the option is selected
+    // e.g. update the value in the store
+    systemParametersStore.rpdFeature = value;
+  },
+});
+const isRpdPolicyScheduled = computed(() => {
+  return systemParametersStore.pvmRpdPolicy === 'Scheduled';
+});
+const options = computed(() => {
+  if (systemParametersStore.rpdPolicyOptionsGetter){
+  return systemParametersStore.rpdPolicyOptions.map((option) => ({
+    value: option,
+    text: option,
+  }));
+ } else return;
+});
+const rpdFeatOptions = computed(() => {
+  if (systemParametersStore.rpdFeatureOptionsGetter) {
+    return systemParametersStore.rpdFeatureOptionsGetter.map((option) => ({
+      value: option,
+      text: option,
+    }));
+  } else return;
+});
+const isRpdFeatureCurrentDisabled = computed(() => {
+  return systemParametersStore.rpdPolicyCurrent === 'Disabled';
+});
+const aggressivePrefetchState = computed({
+  get() {
+    return systemParametersStore.aggressivePrefetch;
+  },
+  set(newValue) {
+    systemParametersStore.aggressivePrefetch = newValue;
+  },
+});
+const immediateTestRequestedState = computed({
+  get() {
+    return systemParametersStore.immediateTestRequested;
+  },
+  set(newValue) {
+    systemParametersStore.immediateTestRequested = newValue;
+  },
+});
+const rpdScheduledRun = computed({
+  get() {
+    return systemParametersStore.rpdScheduledRun;
   },
-  validations() {
-    return {
-      rpdScheduledRun: {
-        pattern: helpers.regex('pattern', isoTimeRegex),
-      },
-      rpdScheduledRunDuration: {
-        minValue: minValue(30),
-        maxValue: maxValue(1440),
-      },
-    };
+  set(value) {
+    v$.value.$touch();
+    systemParametersStore.rpdScheduledRun = value;
   },
-  watch: {
-    selectedItem: function (newValue) {
-      this.$store.dispatch('systemParameters/setRpdPolicy', newValue);
-    },
-    selectedFeatureItem: function (newValue) {
-      this.$store.dispatch('systemParameters/setRpdFeature', newValue);
-    },
+});
+const rpdScheduledRunDuration = computed({
+  get() {
+    return systemParametersStore.rpdScheduledRunDuration;
   },
-  methods: {
-    updateImmediateTestRequestedState(value) {
-      this.startLoader();
-      Promise.all([
-        this.$store.dispatch('systemParameters/saveImmediateTestRequested', {
-          value: value ? 'Enabled' : 'Disabled',
-        }),
-        this.$store.dispatch('systemParameters/getRpdScheduledRun'),
-      ])
-        .then((message) => {
-          if (value && this.isServerOff) {
-            this.successToast(
-              this.$t(
-                'pageSystemParameters.toast.successStartingDiagnosticTestRunIfPoweredOff',
-              ),
-            );
-          } else {
-            this.successToast(message);
-          }
-        })
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-    updateGuardOnErrorState(state) {
-      this.$store
-        .dispatch('systemParameters/saveGuardOnError', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    updateRpdPolicy() {
-      this.startLoader();
-      let rpdPolicyValue = this.selectedOption;
-      this.$store
-        .dispatch('systemParameters/saveRpdPolicy', rpdPolicyValue)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => {
-          this.endLoader();
-        });
-    },
-    updateRpdFeature() {
-      this.startLoader();
-      let rpdFeatureValue = this.selectedFeatureOption;
-      this.$store
-        .dispatch('systemParameters/saveRpdFeature', rpdFeatureValue)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => {
-          this.endLoader();
-        });
-    },
-    updateRpdScheduledRun(startTime, duration) {
-      this.startLoader();
-      const [hours, minutes] = startTime.split(':');
-      const totalSeconds = (+hours * 60 + +minutes) * 60;
-      this.$store
-        .dispatch('systemParameters/saveRpdScheduledRun', {
-          totalSeconds,
-          duration,
-          startTime,
-        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => {
-          this.endLoader();
-        });
-    },
+  set(value) {
+    v$.value.$touch();
+    systemParametersStore.rpdScheduledRunDuration = value;
   },
+});
+const guardOnErrorState = computed({
+  get() {
+    return systemParametersStore.guardOnError;
+  },
+  set(newValue) {
+    systemParametersStore.guardOnError = newValue;
+  },
+});
+const serverStatus = computed(() => {
+  return systemParametersStore.serverStatus;
+});
+const isServerOff = computed(() => {
+  return serverStatus.value === 'off' ? true : false;
+});
+
+const rules = computed(() => ({
+  rpdScheduledRun: {
+    pattern: helpers.regex('pattern', isoTimeRegex),
+  },
+  rpdScheduledRunDuration: {
+    minValue: minValue(30),
+    maxValue: maxValue(1440),
+  },
+}));
+
+const v$ = useVuelidate(rules, { rpdScheduledRun, rpdScheduledRunDuration });
+
+const updateImmediateTestRequestedState = (value) => {
+  startLoader();
+  Promise.all([
+    systemParametersStore.saveImmediateTestRequested({
+      value: value ? 'Enabled' : 'Disabled',
+    }),
+    setTimeout(() => {
+      systemParametersStore.getBiosAttributesRegistry
+        }, 5000),
+    
+  ])
+    .then((message) => {
+      if (value && isServerOff) {
+        Toast.successToast(
+          i18n.global.t(
+            'pageSystemParameters.toast.successStartingDiagnosticTestRunIfPoweredOff',
+          ),
+        );
+      } else {
+        Toast.successToast(message[0]);
+      }
+    })
+    .catch(({ message }) => Toast.errorToast(message))
+    .finally(() => endLoader());
+};
+const updateGuardOnErrorState = (state) => {
+  systemParametersStore
+    .saveGuardOnError(state)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message));
+};
+const updateRpdPolicy = () => {
+  startLoader();
+  let rpdPolicyValue = selectedOption.value;
+  systemParametersStore
+    .saveRpdPolicy(rpdPolicyValue)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message))
+    .finally(() => {
+      endLoader();
+    });
+};
+const updateRpdFeature = () => {
+  startLoader();
+  let rpdFeatureValue = selectedFeatureOption.value;
+  systemParametersStore
+    .saveRpdFeature(rpdFeatureValue)
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message))
+    .finally(() => {
+      endLoader();
+    });
+};
+const updateRpdScheduledRun = (startTime, duration) => {
+  startLoader();
+  const [hours, minutes] = startTime.split(':');
+  const totalSeconds = (+hours * 60 + +minutes) * 60;
+  systemParametersStore
+    .saveRpdScheduledRun({totalSeconds, duration, startTime})
+    .then((message) => Toast.successToast(message))
+    .catch(({ message }) => Toast.errorToast(message))
+    .finally(() => {
+      endLoader();
+    });
 };
 </script>
diff --git a/src/views/ResourceManagement/SystemParameters/SystemParameters.vue b/src/views/ResourceManagement/SystemParameters/SystemParameters.vue
index b6f0ffc1aa..d90d43210a 100644
--- a/src/views/ResourceManagement/SystemParameters/SystemParameters.vue
+++ b/src/views/ResourceManagement/SystemParameters/SystemParameters.vue
@@ -1,59 +1,41 @@
 <template>
-  <b-container fluid="xl">
-    <b-row>
-      <b-col md="8" xl="6">
+  <BContainer fluid="xl">
+    <BRow>
+      <BCol md="8" xl="6">
         <page-title :title="$t('appPageTitle.systemParameters')" />
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
     <lateral-cast-out :is-server-off="isServerOff" />
     <frequency-cap :is-server-off="isServerOff" />
     <aggressive-prefetch :is-server-off="isServerOff" />
     <runtime-processor-diagnostic :is-server-off="isServerOff" />
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import LateralCastOut from './LateralCastOut';
-import FrequencyCap from './FrequencyCap';
-import AggressivePrefetch from './AggressivePrefetch';
-import RuntimeProcessorDiagnostic from './RuntimeProcessorDiagnostic';
+<script setup>
+import PageTitle from '@/components/Global/PageTitle.vue';
+import LateralCastOut from './LateralCastOut.vue';
+import FrequencyCap from './FrequencyCap.vue';
+import AggressivePrefetch from './AggressivePrefetch.vue';
+import RuntimeProcessorDiagnostic from './RuntimeProcessorDiagnostic.vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import { SystemParametersStore, GlobalStore } from '@/store';
+import { onBeforeMount, computed } from 'vue';
+const { startLoader, endLoader } = useLoadingBar();
+const systemParametersStore = SystemParametersStore();
+const global = GlobalStore();
 
-export default {
-  name: 'SystemParameters',
-  components: {
-    PageTitle,
-    LateralCastOut,
-    FrequencyCap,
-    AggressivePrefetch,
-    RuntimeProcessorDiagnostic,
-  },
-  mixins: [LoadingBarMixin, BVToastMixin],
-  computed: {
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-    isServerOff() {
-      return this.serverStatus === 'off' ? true : false;
-    },
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('systemParameters/getLateralCastOutMode'),
-      this.$store.dispatch('systemParameters/getAggressivePrefetch'),
-      this.$store.dispatch('systemParameters/getImmediateTestRequested'),
-      this.$store.dispatch('systemParameters/getGuardOnError'),
-      this.$store.dispatch('systemParameters/getRpdPolicyOptions'),
-      this.$store.dispatch('systemParameters/getRpdFeatureOptions'),
-      this.$store.dispatch('systemParameters/getRpdPolicy'),
-      this.$store.dispatch('systemParameters/getRpdPolicyCurrent'),
-      this.$store.dispatch('systemParameters/getRpdFeature'),
-      this.$store.dispatch('systemParameters/getRpdScheduledRun'),
-      this.$store.dispatch('systemParameters/getRpdScheduledRunDuration'),
-    ]).finally(() => this.endLoader());
-  },
-};
+const serverStatus = computed(() => {
+  return global.serverStatus;
+});
+const isServerOff = computed(() => {
+  return serverStatus.value === 'off' ? true : false;
+});
+
+onBeforeMount(() => {
+  startLoader();
+  Promise.all([
+    systemParametersStore.getBiosAttributesRegistry(),
+  ]).finally(() => endLoader());
+});
 </script>