Add loading bar to Overview page

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

1 files changed, 24 insertions, 8 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>