From bed6ed8f1b3ea656a81209ad45fb24a17f9afe21 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Tue, 25 Feb 2025 14:04:26 +0530
Subject: [PATCH] Implemented Overview page

- Implemented Overview page
- Jira story: https://jsw.ibm.com/browse/PFEBMC-2381

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>
---
 src/store/index.js                         |   4 +-
 src/store/modules/Logs/DumpsStore.js       |  76 ++++++------
 src/store/modules/Settings/NetworkStore.js |   3 +-
 src/views/Overview/ModalAssetTag.vue       | 132 ++++++++++----------
 src/views/Overview/Overview.vue            |  65 ++++++++--
 src/views/Overview/OverviewCard.vue        |   8 +-
 src/views/Overview/OverviewDumps.vue       |  45 ++++---
 src/views/Overview/OverviewEvents.vue      |  28 +++--
 src/views/Overview/OverviewFirmware.vue    |  51 ++++----
 src/views/Overview/OverviewInventory.vue   |  34 ++++--
 src/views/Overview/OverviewNetwork.vue     |  42 +++----
 src/views/Overview/OverviewPower.vue       |  72 ++++++++---
 src/views/Overview/OverviewQuickLinks.vue  |  41 +++++--
 src/views/Overview/OverviewServer.vue      | 135 +++++++++++++++++----
 14 files changed, 470 insertions(+), 266 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 95b591c62c..9dc01597f9 100644
--- a/src/store/index.js
+++ b/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';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -68,5 +69,6 @@ export {
   HardwareDeconfigurationStore,
   DeconfigurationRecordsStore,
   NetworkSettingsStore,
-  LdapStore
+  LdapStore,
+  DumpsStore
 };
diff --git a/src/store/modules/Logs/DumpsStore.js b/src/store/modules/Logs/DumpsStore.js
index 70da56da15..3bc0d678c8 100644
--- a/src/store/modules/Logs/DumpsStore.js
+++ b/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,7 +179,7 @@ const DumpsStore = {
             const toastMessages = [];
 
             if (successCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageDumps.toast.successDeleteDump',
                 successCount,
               );
@@ -192,7 +187,7 @@ const DumpsStore = {
             }
 
             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;
diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
index 6d6813f8b2..968432e0c2 100644
--- a/src/store/modules/Settings/NetworkStore.js
+++ b/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) {
diff --git a/src/views/Overview/ModalAssetTag.vue b/src/views/Overview/ModalAssetTag.vue
index cd78b260fc..5f21da152b 100644
--- a/src/views/Overview/ModalAssetTag.vue
+++ b/src/views/Overview/ModalAssetTag.vue
@@ -1,14 +1,14 @@
 <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"
           >
@@ -16,89 +16,95 @@
               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>
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 2b15d95336..9b5b43892c 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,10 +1,9 @@
-<!-- TODO: Work Requird -->
 <template>
   <BContainer fluid="xl">
-    <page-title />
+    <page-title :title="$t('appPageTitle.overview')"/>
     <overview-quick-links class="mb-4" />
     <page-section
-      :section-title="t('pageOverview.systemInformation')"
+      :section-title="$t('pageOverview.systemInformation')"
       class="mb-1"
     >
       <BCardGroup deck>
@@ -16,7 +15,7 @@
         <overview-power />
       </BCardGroup>
     </page-section>
-    <page-section :section-title="t('pageOverview.statusInformation')">
+    <page-section :section-title="$t('pageOverview.statusInformation')">
       <BCardGroup deck>
         <overview-events />
         <overview-inventory />
@@ -27,6 +26,8 @@
 </template>
 
 <script setup>
+import { ref, onBeforeMount } from 'vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
 import PageTitle from '@/components/Global/PageTitle.vue';
 import PageSection from '@/components/Global/PageSection.vue';
 import OverviewQuickLinks from './OverviewQuickLinks.vue';
@@ -36,15 +37,55 @@ import OverviewNetwork from './OverviewNetwork.vue';
 import OverviewPower from './OverviewPower.vue';
 import OverviewEvents from './OverviewEvents.vue';
 import OverviewInventory from './OverviewInventory.vue';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import OverviewDumps from './OverviewDumps.vue';
+import { UserManagementStore } from '@/store';
+import eventBus from '@/eventBus';
 
-const { t } = useI18n();
-console.log(
-  'import.meta.env.VITE_APP_ENV_NAME',
-  import.meta.env.VITE_APP_ENV_NAME,
-);
-console.log('import.meta.env', import.meta.env);
+const { startLoader, endLoader } = useLoadingBar();
+
+const userManagementStore = UserManagementStore();
 
 const showDumps = ref(import.meta.env.VITE_APP_ENV_NAME === 'ibm');
+
+onBeforeMount(() => {
+    startLoader();
+    const dumpsPromise = new Promise((resolve) => {
+      eventBus.on('overview-dumps-complete', () => resolve());
+    });
+    const eventsPromise = new Promise((resolve) => {
+      eventBus.on('overview-events-complete', () => resolve());
+    });
+    const firmwarePromise = new Promise((resolve) => {
+      eventBus.on('overview-firmware-complete', () => resolve());
+    });
+    const inventoryPromise = new Promise((resolve) => {
+      eventBus.on('overview-inventory-complete', () => resolve());
+    });
+    const networkPromise = new Promise((resolve) => {
+      eventBus.on('overview-network-complete', () => resolve());
+    });
+    const powerPromise = new Promise((resolve) => {
+      eventBus.on('overview-power-complete', () => resolve());
+    });
+    const quicklinksPromise = new Promise((resolve) => {
+      eventBus.on('overview-quicklinks-complete', () => resolve());
+    });
+    const serverPromise = new Promise((resolve) => {
+      eventBus.on('overview-server-complete', () => resolve());
+    });
+
+    Promise.all([
+      dumpsPromise,
+      eventsPromise,
+      firmwarePromise,
+      inventoryPromise,
+      networkPromise,
+      powerPromise,
+      quicklinksPromise,
+      serverPromise,
+      userManagementStore.getUsers(),
+    ]).finally(() => endLoader());
+
+  });
+
 </script>
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index ba6addb0a5..97b5ed784c 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -12,11 +12,11 @@
           class="p-0"
           variant="link"
         >
-          <span v-if="downloadButton">{{ t('global.action.download') }}</span>
-          <span v-if="exportButton">{{ t('global.action.exportAll') }}</span>
+          <span v-if="downloadButton">{{ $t('global.action.download') }}</span>
+          <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
         </BButton>
         <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
-        <BLink :to="to">{{ t('pageOverview.viewMore') }}</BLink>
+        <BLink :to="to">{{ $t('pageOverview.viewMore') }}</BLink>
       </div>
     </div>
     <slot></slot>
@@ -25,9 +25,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
 const props = defineProps({
   data: {
     type: Array,
diff --git a/src/views/Overview/OverviewDumps.vue b/src/views/Overview/OverviewDumps.vue
index 9e7468bae5..983cfa7dce 100644
--- a/src/views/Overview/OverviewDumps.vue
+++ b/src/views/Overview/OverviewDumps.vue
@@ -1,4 +1,3 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
     :data="dumps"
@@ -17,28 +16,28 @@
   </overview-card>
 </template>
 
-<script>
-import OverviewCard from './OverviewCard';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+<script setup>
+import { computed, onBeforeMount } from 'vue';
+import OverviewCard from './OverviewCard.vue';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import { DumpsStore } from '@/store';
+import eventBus from '@/eventBus';
 
-export default {
-  name: 'OverviewDumps',
-  components: {
-    OverviewCard,
-  },
-  mixins: [DataFormatterMixin],
-  computed: {
-    dumps() {
-      return this.$store.getters['dumps/allDumps'];
-    },
-  },
-  created() {
-    this.$store.dispatch('dumps/getAllDumps').finally(() => {
-      this.$root.$emit('overview-dumps-complete');
+const { dataFormatter } = useDataFormatterGlobal();
+
+const dumpsStore = DumpsStore();
+
+onBeforeMount(() => {
+      dumpsStore.getAllDumps().finally(() => {
+      eventBus.emit('overview-dumps-complete');
     });
-  },
-  methods: {
-    exportFileNameByDate() {
+  });
+
+const dumps = computed(() => {
+    return dumpsStore.allDumpsGetter;
+    });
+
+const exportFileNameByDate = () => {
       // Create export file name based on date
       let date = new Date();
       date =
@@ -47,7 +46,5 @@ export default {
         date.toString().split(':').join('-').split(' ')[4];
       let fileName = 'all_dumps_';
       return fileName + date;
-    },
-  },
-};
+    };
 </script>
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 91d4b719ce..a15d2564cc 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,28 +1,27 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
     :data="eventLogData"
     :disabled="eventLogData.length === 0"
     :export-button="true"
     :file-name="exportFileNameByDate()"
-    :title="t('pageOverview.eventLogs')"
+    :title="$t('pageOverview.eventLogs')"
     :to="`/logs/event-logs`"
   >
     <BRow class="mt-3">
       <BCol sm="6">
         <dl>
-          <dt>{{ t('pageOverview.criticalEvents') }}</dt>
+          <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
           <dd class="h3">
-            {{ dataFormatterGlobal.dataFormatter(criticalEvents.length) }}
+            {{ dataFormatter(criticalEvents.length) }}
             <status-icon status="danger" />
           </dd>
         </dl>
       </BCol>
       <BCol sm="6">
         <dl>
-          <dt>{{ t('pageOverview.warningEvents') }}</dt>
+          <dt>{{ $t('pageOverview.warningEvents') }}</dt>
           <dd class="h3">
-            {{ dataFormatterGlobal.dataFormatter(warningEvents.length) }}
+            {{ dataFormatter(warningEvents.length) }}
             <status-icon status="warning" />
           </dd>
         </dl>
@@ -34,16 +33,21 @@
 <script setup>
 import OverviewCard from './OverviewCard.vue';
 import StatusIcon from '@/components/Global/StatusIcon.vue';
-// import DataFormatterGlobal from '@/components/Mixins/DataFormatterGlobal';
 import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, onBeforeMount } from 'vue';
 import { EventLogStore } from '@/store';
+import eventBus from '@/eventBus';
+
+const { dataFormatter } = useDataFormatterGlobal();
 
-const { t } = useI18n();
 const eventLogStore = EventLogStore();
-const dataFormatterGlobal = useDataFormatterGlobal();
-eventLogStore.getEventLogData();
+
+onBeforeMount(() => {
+  eventLogStore.getEventLogData().finally(() => {
+      eventBus.emit('overview-events-complete');
+    });
+});
+
 const eventLogData = computed(() => {
   return eventLogStore.allEvents;
 });
diff --git a/src/views/Overview/OverviewFirmware.vue b/src/views/Overview/OverviewFirmware.vue
index 24da7b4c23..d67c0fbcf5 100644
--- a/src/views/Overview/OverviewFirmware.vue
+++ b/src/views/Overview/OverviewFirmware.vue
@@ -1,22 +1,22 @@
 <!-- TODO: Work Requird -->
 <template>
   <overview-card
-    :title="t('pageOverview.firmwareInformation')"
+    :title="$t('pageOverview.firmwareInformation')"
     :to="`/operations/firmware`"
   >
     <BRow class="mt-3">
-      <BCol sm="6">
+      <BCol sm="5">
         <dl>
-          <dt>{{ t('pageOverview.runningVersion') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(runningVersion) }}</dd>
-          <dt>{{ t('pageOverview.backupVersion') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(backupVersion) }}</dd>
+          <dt>{{ $t('pageOverview.runningVersion') }}</dt>
+          <dd>{{ dataFormatter(runningVersion) }}</dd>
+          <dt>{{ $t('pageOverview.backupVersion') }}</dt>
+          <dd>{{ dataFormatter(backupVersion) }}</dd>
         </dl>
       </BCol>
-      <BCol sm="6">
+      <BCol sm="7">
         <dl>
-          <dt>{{ t('pageOverview.accessKeyExpiration') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(firmwareVersion) }}</dd>
+          <dt>{{ $t('pageOverview.accessKeyExpiration') }}</dt>
+          <dd>{{ $filters.formatDate(firmwareAccessKeyInfo.expirationDate) }}</dd>
         </dl>
       </BCol>
     </BRow>
@@ -24,35 +24,38 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, onBeforeMount } from 'vue';
 import OverviewCard from './OverviewCard.vue';
-// import DataFormatterGlobal from '@/components/Mixins/DataFormatterGlobal';
 import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
-import { FirmwareStore, SystemStore } from '@/store';
+import { FirmwareStore, LicenseStore } from '@/store';
+import eventBus from '@/eventBus';
+
+const { dataFormatter } = useDataFormatterGlobal();
 
-const { t } = useI18n();
 const firmwareStore = FirmwareStore();
-const systemStore = SystemStore();
-const dataFormatterGlobal = useDataFormatterGlobal();
-firmwareStore.getFirmwareInformation();
-const systems = computed(() => {
-  return systemStore.systems[0];
-});
+const licenseStore = LicenseStore();
+
+onBeforeMount(() => {
+    Promise.all([
+      licenseStore.getLicenses(),
+      firmwareStore.getFirmwareInformation(),
+    ]).finally(() => {
+      eventBus.emit('overview-firmware-complete');
+    });
+  });
+
 const backupBmcFirmware = computed(() => {
   return firmwareStore.backupBmcFirmware;
 });
-
 const backupVersion = computed(() => {
   return backupBmcFirmware.value?.version;
 });
 const activeBmcFirmware = computed(() => {
   return firmwareStore.activeBmcFirmware;
 });
-const firmwareVersion = computed(() => {
-  return systems.value?.firmwareVersion;
+const firmwareAccessKeyInfo = computed(() => {
+      return licenseStore.firmwareAccessKeyInfo;
 });
-
 const runningVersion = computed(() => {
   return activeBmcFirmware.value?.version;
 });
diff --git a/src/views/Overview/OverviewInventory.vue b/src/views/Overview/OverviewInventory.vue
index 6902e28a4f..971624fe41 100644
--- a/src/views/Overview/OverviewInventory.vue
+++ b/src/views/Overview/OverviewInventory.vue
@@ -1,25 +1,24 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
-    :title="t('pageOverview.inventory')"
+    :title="$t('pageOverview.inventory')"
     :to="`/hardware-status/inventory`"
   >
     <BRow class="mt-3">
       <BCol sm="6">
         <dl sm="6">
-          <dt>{{ t('pageOverview.systemIdentifyLed') }}</dt>
+          <dt>{{ $t('pageOverview.systemIdentifyLed') }}</dt>
           <dd>
             <BFormCheckbox
               id="identifyLedSwitch"
               v-model="systems.locationIndicatorActive"
               data-test-id="overviewInventory-checkbox-identifyLed"
               switch
-              @change="toggleIdentifyLedSwitch"
+              @change="toggleIdentifyLedSwitch(systems.locationIndicatorActive)"
             >
               <span v-if="systems.locationIndicatorActive">
-                {{ t('global.status.on') }}
+                {{ $t('global.status.on') }}
               </span>
-              <span v-else>{{ t('global.status.off') }}</span>
+              <span v-else>{{ $t('global.status.off') }}</span>
             </BFormCheckbox>
           </dd>
         </dl>
@@ -29,22 +28,33 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import OverviewCard from './OverviewCard.vue';
+import useToast from '@/components/Composables/useToastComposable';
 import { SystemStore } from '@/store';
-import { useI18n } from 'vue-i18n';
+import eventBus from '@/eventBus';
+
+const { successToast, errorToast } = useToast();
 
-const { t } = useI18n();
 const systemStore = SystemStore();
-systemStore.getSystem();
+
+onBeforeMount(() => {
+  systemStore.getSystem().finally(() => {
+      eventBus.emit('overview-inventory-complete');
+    });
+});
+
 const systems = computed(() => {
   let systemData = systemStore.systems[0];
   return systemData ? systemData : {};
 });
+
 const toggleIdentifyLedSwitch = (state) => {
-  systemStore.changeIdentifyLedState(state).catch(({ message }) => {
+  systemStore.changeIdentifyLedState(state)
+  .then((message) => successToast(message))
+  .catch(({ message }) => {
     console.log(message);
-    // this.errorToast(message);
+    errorToast(message);
   });
 };
 </script>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index c3934012bc..6589d87987 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -1,41 +1,32 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
     v-if="network"
-    :title="t('pageOverview.networkInformation')"
+    :title="$t('pageOverview.networkInformation')"
     :to="`/settings/network`"
   >
     <BRow class="mt-3">
       <BCol sm="6">
         <dl>
-          <dt>{{ t('pageOverview.hostName') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(network.hostname) }}</dd>
-        </dl>
-      </BCol>
-      <BCol sm="6">
-        <dl>
-          <!-- <dt>{{ t('pageOverview.linkStatus') }}</dt> -->
-          <dd>
-            <!-- {{ dataFormatterGlobal.dataFormatter(network.linkStatus) }} -->
-          </dd>
+          <dt>{{ $t('pageOverview.hostName') }}</dt>
+          <dd>{{ dataFormatter(network.hostname) }}</dd>
         </dl>
       </BCol>
     </BRow>
     <BRow>
       <BCol>
         <dl>
-          <dt>{{ t('pageOverview.ipv4') }}</dt>
+          <dt>{{ $t('pageOverview.ipv4') }}</dt>
           <dd>
-            {{ dataFormatterGlobal.dataFormatter(network.staticAddress) }}
+            {{ dataFormatter(network.staticAddress) }}
           </dd>
         </dl>
       </BCol>
       <BCol>
         <dl>
-          <dt>{{ t('pageOverview.dhcp') }}</dt>
+          <dt>{{ $t('pageOverview.dhcp') }}</dt>
           <dd>
             {{
-              dataFormatterGlobal.dataFormatter(
+              dataFormatter(
                 network.dhcpAddress.length !== 0
                   ? network.dhcpAddress[0].Address
                   : null
@@ -49,18 +40,23 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, onBeforeMount } from 'vue';
 import OverviewCard from './OverviewCard.vue';
 import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
 import { NetworkStore } from '@/store';
+import eventBus from '@/eventBus';
+
+const { dataFormatter } = useDataFormatterGlobal();
 
-const { t } = useI18n();
-const dataFormatterGlobal = useDataFormatterGlobal();
 const networkStore = NetworkStore();
-networkStore.getEthernetData();
+
+onBeforeMount(() => {
+    networkStore?.getEthernetData().finally(() => {
+    eventBus.emit('overview-network-complete');
+    });
+  });
+
 const network = computed(() => {
-  // Commenting this line out. Will be implemented once overview page is completed
-  // return networkStore.globalNetworkSettings[0];
+  return networkStore.networkSettings[0];
 });
 </script>
diff --git a/src/views/Overview/OverviewPower.vue b/src/views/Overview/OverviewPower.vue
index a5b7701143..7d3b694d54 100644
--- a/src/views/Overview/OverviewPower.vue
+++ b/src/views/Overview/OverviewPower.vue
@@ -1,42 +1,86 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
-    :title="t('pageOverview.powerInformation')"
+    :title="$t('pageOverview.powerInformation')"
     :to="`/resource-management/power`"
   >
     <BRow class="mt-3">
       <BCol sm="6">
         <dl>
-          <dt>{{ t('pageOverview.powerConsumption') }}</dt>
+          <dt>{{ $t('pageOverview.powerConsumption') }}</dt>
           <dd v-if="!powerConsumptionValue">
-            {{ t('global.status.notAvailable') }}
+            {{ $t('global.status.notAvailable') }}
           </dd>
           <dd v-else>{{ powerConsumptionValue }} W</dd>
-          <dt>{{ t('pageOverview.powerCap') }}</dt>
+          <dt>{{ $t('pageOverview.powerCap') }}</dt>
           <dd v-if="!powerCapValue">
-            {{ t('global.status.disabled') }}
+            {{ $t('global.status.disabled') }}
           </dd>
           <dd v-else>{{ powerCapValue }} W</dd>
         </dl>
       </BCol>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pagePower.idlePower') }}</dt>
+          <dd v-if="idlePowerSaverData && idlePowerSaverData.Enabled">
+            {{ $t('global.status.enabled') }}
+          </dd>
+          <dd v-else>{{ $t('global.status.disabled') }}</dd>
+          <dt>{{ $t('pageOverview.powerMode') }}</dt>
+          <dd v-if="safeMode">
+            <status-icon status="danger" />
+            {{ $t('pageOverview.safeMode') }}
+          </dd>
+          <dd v-else-if="powerPerformanceMode === 'MaximumPerformance'">
+            {{ $t('pageOverview.powerPerformanceModes.maximumPerformance') }}
+          </dd>
+          <dd v-else-if="powerPerformanceMode === 'EfficiencyFavorPower'">
+            {{ $t('pagePower.selectMode.energyEfficient.primary') }}
+          </dd>
+          <dd v-else-if="powerPerformanceMode === 'PowerSaving'">
+            {{ $t('pagePower.selectMode.maximumEnergySaver.primary') }}
+          </dd>
+          <dd v-else-if="powerPerformanceMode === 'OEM'">
+            {{ $t('pagePower.oemMode.primary') }}
+          </dd>
+        </dl>
+      </b-col>
     </BRow>
   </overview-card>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import OverviewCard from './OverviewCard.vue';
-import { PowerControlStore } from '@/store';
+import { PowerControlStore, GlobalStore } from '@/store';
+import eventBus from '@/eventBus';
 
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
 const powerControlStore = PowerControlStore();
-powerControlStore.getPowerControl();
+const global = GlobalStore();
+
+onBeforeMount(() => {
+    Promise.all([
+      powerControlStore.getPowerControl(),
+      powerControlStore.getPowerPerformanceMode(),
+      powerControlStore.getIdlePowerSaverData(),
+    ]).finally(() => {
+      eventBus.emit('overview-power-complete');
+    });
+  });
+
+const idlePowerSaverData = computed(() => {
+  return powerControlStore.idlePowerSaverData;
+});
 const powerCapValue = computed(() => {
-  return powerControlStore.powerCapValue;
+  return powerControlStore.powerCap;
 });
 const powerConsumptionValue = computed(() => {
-  return powerControlStore.powerConsumptionValue;
+  return powerControlStore.powerConsumption;
 });
+const powerPerformanceMode = computed(() => {
+  return powerControlStore.powerPerformanceMode;
+});
+const safeMode = computed(() => {
+  return global.safeMode;
+});
+
 </script>
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 8d5bdd3b0b..99c969c6e7 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -4,21 +4,21 @@
     <BRow class="d-flex justify-content-between align-items-center">
       <BCol sm="6" lg="9" class="mb-2 mt-2">
         <dl>
-          <dt>{{ t('pageOverview.bmcTime') }}</dt>
+          <dt>{{ $t('pageOverview.bmcTime') }}</dt>
           <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
-            {{ bmcTime }}
+            {{ $filters.formatDate(bmcTime) }} {{ $filters.formatTime(bmcTime) }}
           </dd>
           <dd v-else>--</dd>
         </dl>
       </BCol>
-      <BCol sm="6" lg="3" class="mb-2 mt-2">
+      <BCol v-if="canUseHostConsole" sm="6" lg="3" class="mb-2 mt-2">
         <BButton
-          to="/operations/serial-over-lan"
+          to="/operations/host-console"
           variant="secondary"
           data-test-id="overviewQuickLinks-button-hostConsole"
           class="d-flex justify-content-between align-items-center"
         >
-          {{ t('pageOverview.hostConsole') }}
+          {{ $t('pageOverview.hostConsole') }}
           <icon-arrow-right />
         </BButton>
       </BCol>
@@ -27,16 +27,33 @@
 </template>
 
 <script setup>
-import { AuthenticationStore } from '@/store';
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { computed, onBeforeMount } from 'vue';
+import { GlobalStore } from '@/store';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import eventBus from '@/eventBus';
+
+const { dataFormatter } = useDataFormatterGlobal();
+
+const global = GlobalStore();
+
+onBeforeMount(() => {
+    Promise.all([global.getBmcTime(), global.getCurrentUser()]).finally(() => {
+      eventBus.emit('overview-quicklinks-complete');
+    });
+});
 
-const authenticationStore = AuthenticationStore();
-const { t } = useI18n();
 const bmcTime = computed(() => {
-  return authenticationStore.$state.bmcTime;
+  return global.bmcTime;
+});
+const currentUserRole = computed(() => {
+      return global.currentUser?.RoleId;
+});
+const canUseHostConsole = computed(() => {
+      return (
+        currentUserRole.value === 'Administrator' ||
+        currentUserRole.value === 'OemIBMServiceAgent'
+      );
 });
-authenticationStore.getBmcTime();
 </script>
 <style lang="scss" scoped>
 dd,
diff --git a/src/views/Overview/OverviewServer.vue b/src/views/Overview/OverviewServer.vue
index 0f8f196d17..d8b734fe8f 100644
--- a/src/views/Overview/OverviewServer.vue
+++ b/src/views/Overview/OverviewServer.vue
@@ -1,47 +1,86 @@
-<!-- TODO: Work Requird -->
 <template>
   <overview-card
-    :title="t('pageOverview.serverInformation')"
+    :title="$t('pageOverview.serverInformation')"
     :to="`/hardware-status/inventory`"
   >
     <BRow class="mt-3">
       <BCol sm="6" lg="6">
         <dl>
-          <dt>{{ t('pageOverview.model') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(serverModel) }}</dd>
-          <dt>{{ t('pageOverview.serialNumber') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(serverSerialNumber) }}</dd>
-          <!-- <dt>
+          <dt>{{ $t('pageOverview.model') }}</dt>
+          <dd>{{ dataFormatter(serverModel) }}</dd>
+          <dt>{{ $t('pageOverview.serialNumber') }}</dt>
+          <dd>{{ dataFormatter(serverSerialNumber) }}</dd>
+          <dt>
             {{ $t('pageOverview.assetTag') }}
-            <b-button variant="link" class="p-1" @click="initAssetTagModal()">
+            <BButton variant="link" class="p-1" @click="initAssetTagModal()">
               <icon-edit :title="$t('pageOverview.modal.editAssetTag')" />
-            </b-button>
+            </BButton>
           </dt>
-          <dd>{{ dataFormatter(assetTag) }}</dd> -->
+          <dd>{{ dataFormatter(assetTag) }}</dd>
         </dl>
       </BCol>
       <BCol sm="6" lg="6">
         <dl>
-          <dt>{{ t('pageOverview.operatingMode') }}</dt>
-          <dd>{{ dataFormatterGlobal.dataFormatter(serverManufacturer) }}</dd>
+          <dt>{{ $t('pageOverview.operatingMode') }}</dt>
+          <dd v-if="operatingMode === 'Manual'">
+            {{ $t('pageOverview.manual') }}
+          </dd>
+          <dd v-else-if="operatingMode === 'Normal'">
+            {{ $t('pageOverview.normal') }}
+          </dd>
+          <div v-if="!isReadOnlyUser">
+            <dt>{{ $t('pageOverview.serviceLogin') }}</dt>
+            <dd>
+              <status-icon :status="serviceLoginStatusIcon" />
+              {{ dataFormatter(serviceLogin) }}
+            </dd>
+          </div>
         </dl>
       </BCol>
     </BRow>
+    <modal-asset-tag v-modal=openModal :tag="assetTag" @ok="saveAssetTag" />
   </overview-card>
 </template>
 
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
-import { SystemStore } from '@/store';
+import i18n from '@/i18n';
+import { computed, ref, onBeforeMount } from 'vue';
 import OverviewCard from './OverviewCard.vue';
-// import { DataFormatterGlobal } from '@/components/Mixins/DataFormatterGlobal';
 import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar, { loading } from '@/components/Composables/useLoadingBarComposable';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import IconEdit from '@carbon/icons-vue/es/edit/16';
+import { onBeforeRouteLeave } from 'vue-router';
+import { SystemStore, GlobalStore, BootSettingsStore } from '@/store';
+import eventBus from '@/eventBus';
+import ModalAssetTag from './ModalAssetTag.vue';
+
+const { startLoader, endLoader, hideLoader } = useLoadingBar();
+const { successToast, errorToast } = useToast();
+const { dataFormatter } = useDataFormatterGlobal();
 
-const dataFormatterGlobal = useDataFormatterGlobal();
 const systemStore = SystemStore();
-const { t } = useI18n();
-systemStore.getSystem();
+const global = GlobalStore();
+const bootSettingsStore = BootSettingsStore();
+
+const openModal = ref(false);
+const serviceLoginStatus = ref(null);
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+onBeforeMount(() => {
+    Promise.all([
+      global.getServiceLogin(),
+      bootSettingsStore.fetchBiosAttributes(),
+      bootSettingsStore.getBiosAttributes,
+      systemStore.getSystem(),
+    ]).finally(() => {
+      eventBus.emit('overview-server-complete');
+    });
+  });
+
 const systems = computed(() => {
   return systemStore.systems[0];
 });
@@ -51,8 +90,60 @@ const serverModel = computed(() => {
 const serverSerialNumber = computed(() => {
   return systems.value?.serialNumber;
 });
-const serverManufacturer = computed(() => {
-  return systems.value?.manufacturer;
+const server = computed(() => {
+  return systemStore.systems[0];
+});
+const serviceLogin = computed(() => {
+        const date = new Date(global.bmcTime);
+        const expirationDate = new Date(global.expirationDate);
+        const dateTimeStamp = date.getTime();
+        const expirationDateTimeStamp = expirationDate.getTime();
+
+        if (
+          global?.acfInstalled &&
+          expirationDateTimeStamp >= dateTimeStamp &&
+          global?.isServiceLoginEnabled
+        ) {
+          serviceLoginStatus.value = i18n.global.t('global.status.enabled');
+        } else {
+          serviceLoginStatus.value = i18n.global.t('global.status.disabled');
+        }
+        return serviceLoginStatus.value;
+      });
+const biosAttributes = computed(() => {
+        return bootSettingsStore.getBiosAttributes;
 });
-// const serverSerial = ref(dataFormatterGlobal.dataFormatter(serverSerialNumber.value));
+const operatingMode = computed(() => {
+        return biosAttributes.value?.pvm_system_operating_mode;
+      });
+const assetTag = computed(() => {
+        return global.assetTag;
+      });
+const isReadOnlyUser = computed(() => {
+        return global.isReadOnlyUserGetter;
+      });
+const serviceLoginStatusIcon = computed(() => {
+      switch (serviceLoginStatus.value) {
+        case i18n.global.t('global.status.enabled'):
+          return 'success';
+        case i18n.global.t('global.status.disabled'):
+          return 'danger';
+        default:
+          return 'secondary';
+      }
+    });
+
+const initAssetTagModal = () => {
+      openModal.value = true;
+      eventBus.emit('openmodal-true');
+    };
+const saveAssetTag = (modalFormData) => {
+      startLoader();
+      systemStore.saveAssetTag(modalFormData)
+        .then(global.getSystemInfo())
+        .then((message) => successToast(message))
+        .catch(({ message }) => errorToast(message))
+        .finally(() => endLoader());
+    };
+
 </script>