Add loading bar to Overview page

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

4 files changed, 33 insertions, 26 deletions

diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 9ddf49d1..59b5063d 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -92,6 +92,7 @@ import OverviewNetwork from './OverviewNetwork';
 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 @@ export default {
     PageTitle,
     PageSection
   },
+  mixins: [LoadingBarMixin],
   computed: mapState({
     serverModel: state => state.overview.serverModel,
     serverManufacturer: state => state.overview.serverManufacturer,
@@ -112,15 +114,29 @@ export default {
     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>
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 9d02d1c1..ff9c302a 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -59,12 +59,9 @@ export default {
     }
   },
   created() {
-    this.getEventLogData();
-  },
-  methods: {
-    getEventLogData() {
-      this.$store.dispatch('eventLog/getEventLogData');
-    }
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.$root.$emit('overview::events::complete');
+    });
   }
 };
 </script>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index ea338b39..a495fae2 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -49,12 +49,9 @@ export default {
     }
   },
   created() {
-    this.getEthernetData();
-  },
-  methods: {
-    getEthernetData() {
-      this.$store.dispatch('networkSettings/getEthernetData');
-    }
+    this.$store.dispatch('networkSettings/getEthernetData').finally(() => {
+      this.$root.$emit('overview::network::complete');
+    });
   }
 };
 </script>
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index da56b5d1..09e5a00f 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -69,12 +69,9 @@ export default {
     }
   },
   created() {
-    this.getBmcTime();
-  },
-  methods: {
-    getBmcTime() {
-      this.$store.dispatch('global/getBmcTime');
-    }
+    this.$store.dispatch('global/getBmcTime').finally(() => {
+      this.$root.$emit('overview::quicklinks::complete');
+    });
   }
 };
 </script>