Implemented Overview page

src/store/index.js

@@ -33,6 +33,7 @@ import HardwareDeconfigurationStore from './modules/Settings/HardwareDeconfigura
 import DeconfigurationRecordsStore from './modules/Logs/DeconfigurationRecordsStore.js';
 import NetworkSettingsStore from './modules/Operations/NetworkSettingsStore.js';
 import LdapStore from './modules/SecurityAndAccess/LdapStore.js';
+import DumpsStore from './modules/Logs/DumpsStore.js';
 import FieldCoreOverrideStore from './modules/ResourceManagement/FieldCoreOverrideStore.js';
 // ... (export use other stores)
 export {
@@ -70,5 +71,6 @@ export {
   DeconfigurationRecordsStore,
   NetworkSettingsStore,
   LdapStore,
+  DumpsStore,
   FieldCoreOverrideStore,
 };

src/store/modules/Logs/DumpsStore.js

@@ -1,26 +1,14 @@
 import api, { getResponseCount } from '@/store/api';
 import i18n from '@/i18n';
 import { REGEX_MAPPINGS } from '@/utilities/GlobalConstants';
+import { defineStore } from 'pinia';
 
-const DumpsStore = {
-  namespaced: true,
-  state: {
+export const DumpsStore = defineStore('dumps', {
+  state: () => ({
     allDumps: [],
-  },
+  }),
   getters: {
-    allDumps: (state) => state.allDumps,
-  },
-  mutations: {
-    setAllDumps: (state, dumps) => {
-      state.allDumps = dumps.map((dump) => ({
-        data: dump.AdditionalDataURI,
-        dateTime: new Date(dump.Created),
-        dumpType: dump.Name,
-        id: dump.Id,
-        location: dump['@odata.id'],
-        size: dump.AdditionalDataSizeBytes,
-      }));
-    },
+    allDumpsGetter: (state) => state.allDumps,
   },
   actions: {
     async getBmcDumpEntries() {
@@ -43,14 +31,21 @@ const DumpsStore = {
         .then((response) => api.get(response.data.Entries['@odata.id']))
         .catch((error) => console.log(error));
     },
-    async getAllDumps({ commit, dispatch }) {
+    async getAllDumps() {
       return await api
-        .all([dispatch('getBmcDumpEntries'), dispatch('getSystemDumpEntries')])
+        .all([this.getBmcDumpEntries(), this.getSystemDumpEntries()])
         .then((response) => {
           const bmcDumpEntries = response[0].data?.Members || [];
           const systemDumpEntries = response[1].data?.Members || [];
           const allDumps = [...bmcDumpEntries, ...systemDumpEntries];
-          commit('setAllDumps', allDumps);
+          this.allDumps = allDumps.map((dump) => ({
+                  data: dump.AdditionalDataURI,
+                  dateTime: new Date(dump.Created),
+                  dumpType: dump.Name,
+                  id: dump.Id,
+                  location: dump['@odata.id'],
+                  size: dump.AdditionalDataSizeBytes,
+                }));
         })
         .catch((error) => console.log(error));
     },
@@ -68,10 +63,10 @@ const DumpsStore = {
             error.response.data.error?.['@Message.ExtendedInfo'][0].MessageId;
 
           const message = REGEX_MAPPINGS.resourceInStandby.test(messageId)
-            ? i18n.t('pageDumps.toast.errorStartDumpAnotherInProgress', {
+            ? i18n.global.t('pageDumps.toast.errorStartDumpAnotherInProgress', {
                 dump: dumpType,
               })
-            : i18n.t('pageDumps.toast.errorStartBmcDump');
+            : i18n.global.t('pageDumps.toast.errorStartBmcDump');
 
           throw new Error(message);
         });
@@ -115,21 +110,21 @@ const DumpsStore = {
               error.response?.data?.error?.code,
             )
           ) {
-            throw new Error(i18n.t('pageDumps.toast.errorPhypInStandby'));
+            throw new Error(i18n.global.t('pageDumps.toast.errorPhypInStandby'));
           }
           switch (true) {
             case REGEX_MAPPINGS.actionParameterUnknown.test(errorMsg):
               throw new Error(
-                i18n.t('pageDumps.toast.errorStartResourceDumpInvalidSelector'),
+                i18n.global.t('pageDumps.toast.errorStartResourceDumpInvalidSelector'),
               );
             case REGEX_MAPPINGS.resourceAtUriUnauthorized.test(errorMsg):
               throw new Error(
-                i18n.t('pageDumps.toast.errorStartResourceDumpInvalidPassword'),
+                i18n.global.t('pageDumps.toast.errorStartResourceDumpInvalidPassword'),
               );
             case REGEX_MAPPINGS.insufficientPrivilege.test(errorMsg):
-              throw new Error(i18n.t('global.toast.unAuthDescription'));
+              throw new Error(i18n.global.t('global.toast.unAuthDescription'));
             default:
-              throw new Error(i18n.t('pageDumps.toast.errorStartResourceDump'));
+              throw new Error(i18n.global.t('pageDumps.toast.errorStartResourceDump'));
           }
         });
     },
@@ -150,22 +145,22 @@ const DumpsStore = {
           switch (true) {
             case REGEX_MAPPINGS.resourceInUse.test(errorMsg):
               throw new Error(
-                i18n.t('pageDumps.toast.errorStartDumpAnotherInProgress', {
+                i18n.global.t('pageDumps.toast.errorStartDumpAnotherInProgress', {
                   dump: dumpType,
                 }),
               );
             case REGEX_MAPPINGS.resourceInStandby.test(errorMsg):
               throw new Error(
-                i18n.t('pageDumps.toast.errorStartDumpResourceInStandby', {
+                i18n.global.t('pageDumps.toast.errorStartDumpResourceInStandby', {
                   dump: dumpType,
                 }),
               );
             default:
-              throw new Error(i18n.t('pageDumps.toast.errorStartSystemDump'));
+              throw new Error(i18n.global.t('pageDumps.toast.errorStartSystemDump'));
           }
         });
     },
-    async deleteDumps({ dispatch }, dumps) {
+    async deleteDumps(dumps) {
       const promises = dumps.map(({ location }) =>
         api.delete(location).catch((error) => {
           console.log(error);
@@ -175,7 +170,7 @@ const DumpsStore = {
       return await api
         .all(promises)
         .then((response) => {
-          dispatch('getAllDumps');
+          this.getAllDumps();
           return response;
         })
         .then(
@@ -184,15 +179,15 @@ const DumpsStore = {
             const toastMessages = [];
 
             if (successCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageDumps.toast.successDeleteDump',
                 successCount,
               );
               toastMessages.push({ type: 'success', message });
             }
 
             if (errorCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageDumps.toast.errorDeleteDump',
                 errorCount,
               );
@@ -203,24 +198,25 @@ const DumpsStore = {
           }),
         );
     },
-    async deleteAllDumps({ commit, state }) {
-      const totalDumpCount = state.allDumps.length;
+    async deleteAllDumps() {
+      const totalDumpCount = this.allDumps.length;
       return await api
         .post(
           '/redfish/v1/Managers/bmc/LogServices/Dump/Actions/LogService.ClearLog',
         )
         .then(() => {
-          commit('setAllDumps', []);
-          return i18n.tc('pageDumps.toast.successDeleteDump', totalDumpCount);
+          this.allDumps = [];
+          return i18n.global.t('pageDumps.toast.successDeleteDump', totalDumpCount);
         })
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.tc('pageDumps.toast.errorDeleteDump', totalDumpCount),
+            i18n.global.t('pageDumps.toast.errorDeleteDump', totalDumpCount),
           );
         });
     },
   },
-};
+}
+);
 
 export default DumpsStore;

src/store/modules/Settings/NetworkStore.js

@@ -24,7 +24,7 @@ export const NetworkStore = defineStore('network', {
     isTableBusyGetter: (state) => state.isTableBusy,
   },
   actions: {
-    setNetworkSettings: (data) => {
+    async setNetworkSettings(data) {
       this.networkSettings = data.map(({ data }) => {
         const {
           DHCPv4,
@@ -89,7 +89,6 @@ export const NetworkStore = defineStore('network', {
           const ethernetData = ethernetInterfaces.map(
             (ethernetInterface) => ethernetInterface.data
           );
-
           this.setNetworkSettings(ethernetInterfaces);
           let currentInterfaceIndex = 0;
           if (this.selectedInterfaceIndex) {

src/views/Overview/ModalAssetTag.vue

@@ -1,104 +1,110 @@
 <template>
-  <b-modal
+  <BModal 
+    v-model="modal"
     id="modal-asset-tag"
-    ref="modal"
     :title="$t('pageOverview.modal.editAssetTag')"
     @hidden="resetForm"
   >
-    <b-form id="asset-settings" @submit.prevent="handleSubmit">
-      <b-row>
-        <b-col sm="8">
-          <b-form-group
+    <BForm id="asset-settings" @submit.prevent="handleSubmit">
+      <BRow>
+        <BCol sm="8">
+          <BFormGroup
             :label="$t('pageOverview.assetTag')"
             label-for="asset-tag"
           >
             <b-form-input
               id="asset-tag"
               v-model="form.assetTag"
               type="text"
-              :state="getValidationState($v.form.assetTag)"
-              @input="$v.form.assetTag.$touch()"
+              :state="getValidationState(v$.form.assetTag)"
+              @input="v$.form.assetTag.$touch()"
             />
             <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.assetTag.required">
+              <template v-if="!v$.form.assetTag.required">
                 {{ $t('global.form.fieldRequired') }}
               </template>
             </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </b-form>
+          </BFormGroup>
+        </BCol>
+      </BRow>
+    </BForm>
     <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
+      <BButton variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button
+      </BButton>
+      <BButton
         form="asset-settings"
         type="submit"
         variant="primary"
         @click="onOk"
       >
         {{ $t('global.action.save') }}
-      </b-button>
+      </BButton>
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required } from 'vuelidate/lib/validators';
+<script setup>
+import { ref, watch, defineProps, nextTick, computed } from 'vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import eventBus from '@/eventBus';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    tag: {
+const { getValidationState } = useVuelidateComposable();
+
+const props = defineProps ({
+  tag: {
       type: String,
       default: '',
     },
-  },
-  data() {
-    return {
-      form: {
-        assetTag: this.tag ? this.tag : '',
-      },
-    };
-  },
-  watch: {
-    tag() {
-      this.form.assetTag = this.tag;
-    },
-  },
-  validations() {
-    return {
+  });
+
+const modal = ref(false);
+const form = ref({
+        assetTag: props.tag ? props.tag : '',
+      });
+
+eventBus.on('openmodal-true', () => {
+  modal.value = true;
+});
+
+const rules = computed(() => ({
       form: {
         assetTag: {
           required,
         },
       },
+    }));
+const v$ = useVuelidate(rules, { form });
+
+watch(
+  ()=>props.tag,
+  ()=>{
+    form.value.assetTag = props.tag;   
+  }
+)
+
+const handleSubmit = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+      eventBus.emit('ok', { AssetTag: form.value.assetTag });
+      closeModal();
     };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', { AssetTag: this.form.assetTag });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.assetTag = this.tag;
-      this.$v.$reset();
-      this.$emit('hidden');
-    },
-    onOk(bvModalEvt) {
+const closeModal = () => {
+  nextTick(()=>{
+    modal.value=false
+  })
+    };
+const resetForm = () => {
+      form.value.assetTag = props.tag;
+      v$.value.$reset();
+      eventBus.emit('hidden');
+    };
+const onOk = (bvModalEvt) => {
       // prevent modal close
       bvModalEvt.preventDefault();
-      this.handleSubmit();
-    },
-  },
-};
+      handleSubmit();
+    };
+
 </script>