commit 598bf7e96704f54400ec1730255168dd4d274218
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Fri May 01 12:26:00 2020 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue May 05 17:28:16 2020 +0000
tree 772eed2aee074f479a06c85c860deabcfc20908d
parent a9ac43b9b25172cf0bfe800acdfc985024cad597

Add loading bar to Overview page

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I47ef77dda6b348c854e875aa458acfa44e287c49

src/views/Overview/Overview.vue

diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 9ddf49d..59b5063 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -92,6 +92,7 @@
 import PageTitle from '../../components/Global/PageTitle';
 import PageSection from '../../components/Global/PageSection';
 import { mapState } from 'vuex';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
   name: 'Overview',
@@ -102,6 +103,7 @@
     PageTitle,
     PageSection
   },
+  mixins: [LoadingBarMixin],
   computed: mapState({
     serverModel: state => state.overview.serverModel,
     serverManufacturer: state => state.overview.serverManufacturer,
@@ -112,15 +114,29 @@
     powerConsumptionValue: state => state.powerControl.powerConsumptionValue
   }),
   created() {
-    this.getOverviewInfo();
+    this.startLoader();
+    const quicklinksPromise = new Promise(resolve => {
+      this.$root.$on('overview::quicklinks::complete', () => resolve());
+    });
+    const networkPromise = new Promise(resolve => {
+      this.$root.$on('overview::network::complete', () => resolve());
+    });
+    const eventsPromise = new Promise(resolve => {
+      this.$root.$on('overview::events::complete', () => resolve());
+    });
+    Promise.all([
+      this.$store.dispatch('overview/getServerInfo'),
+      this.$store.dispatch('firmware/getBmcFirmware'),
+      this.$store.dispatch('firmware/getHostFirmware'),
+      this.$store.dispatch('powerControl/getPowerControl'),
+      quicklinksPromise,
+      networkPromise,
+      eventsPromise
+    ]).finally(() => this.endLoader());
   },
-  methods: {
-    getOverviewInfo() {
-      this.$store.dispatch('overview/getServerInfo');
-      this.$store.dispatch('firmware/getBmcFirmware');
-      this.$store.dispatch('firmware/getHostFirmware');
-      this.$store.dispatch('powerControl/getPowerControl');
-    }
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
   }
 };
 </script>

src/views/Overview/OverviewEvents.vue

diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 9d02d1c..ff9c302 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -59,12 +59,9 @@
     }
   },
   created() {
-    this.getEventLogData();
-  },
-  methods: {
-    getEventLogData() {
-      this.$store.dispatch('eventLog/getEventLogData');
-    }
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.$root.$emit('overview::events::complete');
+    });
   }
 };
 </script>

src/views/Overview/OverviewNetwork.vue

diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index ea338b3..a495fae 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -49,12 +49,9 @@
     }
   },
   created() {
-    this.getEthernetData();
-  },
-  methods: {
-    getEthernetData() {
-      this.$store.dispatch('networkSettings/getEthernetData');
-    }
+    this.$store.dispatch('networkSettings/getEthernetData').finally(() => {
+      this.$root.$emit('overview::network::complete');
+    });
   }
 };
 </script>

src/views/Overview/OverviewQuickLinks.vue

diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index da56b5d..09e5a00 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -69,12 +69,9 @@
     }
   },
   created() {
-    this.getBmcTime();
-  },
-  methods: {
-    getBmcTime() {
-      this.$store.dispatch('global/getBmcTime');
-    }
+    this.$store.dispatch('global/getBmcTime').finally(() => {
+      this.$root.$emit('overview::quicklinks::complete');
+    });
   }
 };
 </script>