Implemented System Parameters page - 1110

src/router/routes.js

@@ -24,6 +24,7 @@ import Sessions from '@/views/SecurityAndAccess/Sessions';
 import Firmware from '@/views/Operations/Firmware';
 import Certificates from '@/views/SecurityAndAccess/Certificates';
 import Inventory from '../views/HardwareStatus/Inventory/Inventory.vue';
+import SystemParameters from '@/views/ResourceManagement/SystemParameters';
 
 const roles = {
   administrator: 'Administrator',
@@ -173,6 +174,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',

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';
 import CertificatesStore from './modules/SecurityAndAccess/CertificatesStore';
 import UserManagementStore from './modules/SecurityAndAccess/UserManagementStore';
 
@@ -56,6 +57,7 @@ export {
   BmcStore,
   AssemblyStore,
   FabricAdaptersStore,
+  SystemParametersStore,
   CertificatesStore,
   UserManagementStore,
 };

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>