commit 50ff183844ecd16163b9f449fbcf14366b0c6442
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Fri May 01 11:00:17 2020 -0700
committer Derick Montague <derick.montague@ibm.com> Tue May 05 21:07:02 2020 +0000
tree 1fd56f241545b65cdbf01827ab2d6d6de6f7da8b
parent 598bf7e96704f54400ec1730255168dd4d274218

Add loading bar to Sensors page

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

src/store/modules/Health/SensorsStore.js

diff --git a/src/store/modules/Health/SensorsStore.js b/src/store/modules/Health/SensorsStore.js
index 5da1515..24ad2d1 100644
--- a/src/store/modules/Health/SensorsStore.js
+++ b/src/store/modules/Health/SensorsStore.js
@@ -15,50 +15,57 @@
     }
   },
   actions: {
-    getAllSensors({ dispatch }) {
-      dispatch('getChassisCollection').then(collection => {
-        collection.forEach(item => {
-          dispatch('getSensors', item);
-          dispatch('getThermalSensors', item);
-          dispatch('getPowerSensors', item);
-        });
-      });
+    async getAllSensors({ dispatch }) {
+      const collection = await dispatch('getChassisCollection');
+      if (!collection) return;
+      const promises = collection.reduce((acc, id) => {
+        acc.push(dispatch('getSensors', id));
+        acc.push(dispatch('getThermalSensors', id));
+        acc.push(dispatch('getPowerSensors', id));
+        return acc;
+      }, []);
+      return await api.all(promises);
     },
-    getChassisCollection() {
-      return api
+    async getChassisCollection() {
+      return await api
         .get('/redfish/v1/Chassis')
         .then(({ data: { Members } }) =>
           Members.map(member => member['@odata.id'])
         )
         .catch(error => console.log(error));
     },
-    getSensors({ commit }, id) {
-      api
+    async getSensors({ commit }, id) {
+      const sensors = await api
         .get(`${id}/Sensors`)
-        .then(({ data: { Members = [] } }) => {
-          const promises = Members.map(sensor => api.get(sensor['@odata.id']));
-          api.all(promises).then(
-            api.spread((...responses) => {
-              const sensorData = responses.map(({ data }) => {
-                return {
-                  name: data.Name,
-                  status: data.Status.Health,
-                  currentValue: data.Reading,
-                  lowerCaution: data.Thresholds.LowerCaution.Reading,
-                  upperCaution: data.Thresholds.UpperCaution.Reading,
-                  lowerCritical: data.Thresholds.LowerCritical.Reading,
-                  upperCritical: data.Thresholds.UpperCritical.Reading,
-                  units: data.ReadingUnits
-                };
-              });
-              commit('setSensors', sensorData);
-            })
-          );
-        })
+        .then(response => response.data.Members)
         .catch(error => console.log(error));
+      if (!sensors) return;
+      const promises = sensors.map(sensor => {
+        return api.get(sensor['@odata.id']).catch(error => {
+          console.log(error);
+          return error;
+        });
+      });
+      return await api.all(promises).then(
+        api.spread((...responses) => {
+          const sensorData = responses.map(({ data }) => {
+            return {
+              name: data.Name,
+              status: data.Status.Health,
+              currentValue: data.Reading,
+              lowerCaution: data.Thresholds.LowerCaution.Reading,
+              upperCaution: data.Thresholds.UpperCaution.Reading,
+              lowerCritical: data.Thresholds.LowerCritical.Reading,
+              upperCritical: data.Thresholds.UpperCritical.Reading,
+              units: data.ReadingUnits
+            };
+          });
+          commit('setSensors', sensorData);
+        })
+      );
     },
-    getThermalSensors({ commit }, id) {
-      api
+    async getThermalSensors({ commit }, id) {
+      return await api
         .get(`${id}/Thermal`)
         .then(({ data: { Fans = [], Temperatures = [] } }) => {
           const sensorData = [];
@@ -87,8 +94,8 @@
         })
         .catch(error => console.log(error));
     },
-    getPowerSensors({ commit }, id) {
-      api
+    async getPowerSensors({ commit }, id) {
+      return await api
         .get(`${id}/Power`)
         .then(({ data: { Voltages = [] } }) => {
           const sensorData = Voltages.map(sensor => {

src/views/Health/Sensors/Sensors.vue

diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 6de5c9e..6cd70be 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -83,6 +83,7 @@
 
 import TableFilterMixin from '../../../components/Mixins/TableFilterMixin';
 import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 const SENSOR_STATUS = ['OK', 'Warning', 'Critical'];
 
@@ -102,7 +103,7 @@
     TableToolbar,
     TableToolbarExport
   },
-  mixins: [TableFilterMixin, BVTableSelectableMixin],
+  mixins: [TableFilterMixin, BVTableSelectableMixin, LoadingBarMixin],
   data() {
     return {
       fields: [
@@ -171,7 +172,14 @@
     }
   },
   created() {
-    this.$store.dispatch('sensors/getAllSensors');
+    this.startLoader();
+    this.$store
+      .dispatch('sensors/getAllSensors')
+      .finally(() => this.endLoader());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
   },
   methods: {
     statusIcon(status) {