From 5463c8aec08dfa07a01f95646e44a3b4bee070fe Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Fri, 26 Aug 2022 14:50:55 +0300
Subject: optimization for dynamic

---
 src/components/_sila/Global/Chart.vue              |  7 ++-
 src/components/_sila/Global/Collapse.vue           | 19 +++++---
 src/store/modules/HardwareStatus/FanStore.js       | 51 +++++++++++++++++-----
 src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue       | 20 ++++++---
 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue    | 20 ++++++---
 src/views/_sila/Fans/Dynamic/FansDynamicPage.vue   | 24 ++++++++--
 src/views/_sila/Power/Dynamic/CurrentInput.vue     | 13 ++++--
 src/views/_sila/Power/Dynamic/CurrentOutput.vue    | 13 +++++-
 src/views/_sila/Power/Dynamic/PowerDynamicPage.vue | 38 ++++++++--------
 src/views/_sila/Power/Dynamic/PowerInput.vue       | 13 ++++--
 src/views/_sila/Power/Dynamic/PowerOutput.vue      | 12 ++++-
 src/views/_sila/Power/Dynamic/PowerTemp.vue        | 14 ++++--
 src/views/_sila/Power/Dynamic/VoltInput.vue        | 13 ++++--
 src/views/_sila/Power/Dynamic/VoltOutput.vue       | 14 +++---
 src/views/_sila/Processors/Dynamic/CpuPower.vue    | 19 ++++++--
 src/views/_sila/Processors/Dynamic/CpuTemp.vue     | 14 ++++--
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   | 24 ++++++++--
 17 files changed, 242 insertions(+), 86 deletions(-)

diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index 6b070a42..f6c389f8 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -46,8 +46,11 @@ export default {
   },
   computed: {
     readyData() {
-      let filteredData = this.data.filter((metric) => {
-        return metric.Value !== 'nan';
+      let filteredData = this.data.map((metric) => {
+        return {
+          ...metric,
+          Value: metric.Value === 'nan' ? 0 : metric.Value,
+        };
       });
 
       filteredData.sort((a, b) => {
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index 36778571..280e769b 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -4,13 +4,12 @@
       v-b-toggle="id"
       variant="collapse"
       class="d-flex flex-nowrap justify-content-start"
-      @click="onClick"
     >
       <slot name="image"></slot>
       {{ title }}
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
-    <b-collapse :id="id" visible>
+    <b-collapse :id="id" v-model="visible">
       <slot></slot>
     </b-collapse>
   </div>
@@ -29,18 +28,24 @@ export default {
       type: String,
       default: null,
     },
+    opened: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      opened: true,
+      visible: false,
       iconChevronUp: iconChevronUp,
     };
   },
-  methods: {
-    onClick() {
-      this.opened = !this.opened;
-      this.$emit('opened', this.opened);
+  watch: {
+    visible() {
+      this.$emit('opened', this.visible);
     },
   },
+  created() {
+    this.visible = this.opened;
+  },
 };
 </script>
diff --git a/src/store/modules/HardwareStatus/FanStore.js b/src/store/modules/HardwareStatus/FanStore.js
index 8cae4d77..98dfb5be 100644
--- a/src/store/modules/HardwareStatus/FanStore.js
+++ b/src/store/modules/HardwareStatus/FanStore.js
@@ -4,13 +4,17 @@ import i18n from '@/i18n';
 const FanStore = {
   namespaced: true,
   state: {
-    fans: [],
-    fansLastHour: [],
+    fansCpu: [],
+    fansCpuLastHour: [],
+    fansSystem: [],
+    fansSystemLastHour: [],
     limits: [],
   },
   getters: {
-    fans: (state) => state.fans,
-    fansLastHour: (state) => state.fansLastHour,
+    fansCpu: (state) => state.fansCpu,
+    fansCpuLastHour: (state) => state.fansCpuLastHour,
+    fansSystem: (state) => state.fansCpu,
+    fansSystemLastHour: (state) => state.fansCpuLastHour,
     limits: (state) => state.limits,
   },
   mutations: {
@@ -43,11 +47,17 @@ const FanStore = {
       });
     },
 
-    setFansDynamic: (state, data) => {
-      state.fans = data;
+    setFansCpu: (state, data) => {
+      state.fansCpu = data;
     },
-    setFansDynamicLastHour: (state, data) => {
-      state.fansLastHour = data;
+    setFansCpuLastHour: (state, data) => {
+      state.fansCpuLastHour = data;
+    },
+    setFansSystem: (state, data) => {
+      state.fansSystem = data;
+    },
+    setFansSystemLastHour: (state, data) => {
+      state.fansSystemLastHour = data;
     },
     setLimits: (state, data) => {
       state.limits = data;
@@ -88,7 +98,26 @@ const FanStore = {
         })
         .catch((error) => console.log(error));
     },
-    async getFansDynamic({ commit }, { lastHour }) {
+    async getFansCpu({ commit }, { lastHour }) {
+      let url = null;
+      if (lastHour) {
+        url =
+          '/redfish/v1/TelemetryService/MetricReports/fans&period=last_hour';
+      } else {
+        url = '/redfish/v1/TelemetryService/MetricReports/fans';
+      }
+      return await api
+        .get(url)
+        .then(({ data: { MetricValues = [] } }) => {
+          if (lastHour) {
+            commit('setFansCpuLastHour', MetricValues);
+          } else {
+            commit('setFansCpu', MetricValues);
+          }
+        })
+        .catch((error) => console.log(error));
+    },
+    async getFansSystem({ commit }, { lastHour }) {
       let url = null;
       if (lastHour) {
         url =
@@ -100,9 +129,9 @@ const FanStore = {
         .get(url)
         .then(({ data: { MetricValues = [] } }) => {
           if (lastHour) {
-            commit('setFansDynamicLastHour', MetricValues);
+            commit('setFansSystemLastHour', MetricValues);
           } else {
-            commit('setFansDynamic', MetricValues);
+            commit('setFansSystem', MetricValues);
           }
         })
         .catch((error) => console.log(error));
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
index c24bc8d7..b4c5dfdd 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansCpu"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speed')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansCpuLastHour']
+        : this.$store.getters['fan/fansCpu'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -326,6 +329,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -334,11 +338,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-cpu', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansCpu', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-cpu', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
index 2271ef5c..b86e1672 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansSystem"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speedSystem')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansSystemLastHour']
+        : this.$store.getters['fan/fansSystem'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -328,6 +331,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -336,11 +340,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-system', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansSystem', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-system', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 3b5b0030..eaf3777c 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <table-date-picker
+      :class="{ disabledDiv: loading }"
+      :time-scale="timeScale"
+      @changePeriod="onChangePeriod"
+    />
     <fan-speed-cpu :time-scale="timeScale"></fan-speed-cpu>
     <fan-speed-system :time-scale="timeScale"></fan-speed-system>
   </b-container>
@@ -12,7 +16,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import FanSpeedCpu from './FanSpeedCpu';
@@ -23,10 +29,13 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
-
+  created() {
+    this.startProgress();
+  },
   methods: {
     resetZoom() {
       const resetButton = document.querySelector('.highcharts-reset-zoom');
@@ -38,8 +47,17 @@ export default {
     },
     onChangePeriod(period) {
       this.timeScale = period;
+      this.startProgress();
       this.resetZoom();
     },
+    startProgress() {
+      this.startLoader();
+      this.$root.$on('fan-cpu', (loading) => this.onLoading(loading));
+      this.$root.$on('fan-system', (loading) => this.onLoading(loading));
+    },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue
index dace6a82..34e2c166 100644
--- a/src/views/_sila/Power/Dynamic/CurrentInput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue
@@ -108,6 +108,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,26 +163,30 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_current', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-current-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-current');
+        this.$root.$emit('psu-current-output', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
index d796b3e7..a51c1fe6 100644
--- a/src/views/_sila/Power/Dynamic/CurrentOutput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
@@ -108,6 +108,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,6 +163,13 @@ export default {
     },
   },
   watch: {
+    timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
+      this.loadData();
+    },
     items() {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
@@ -171,15 +179,18 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_current', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-current-output', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-current');
+        this.$root.$emit('psu-current-output', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
index 45e7eaf9..6a3c3433 100644
--- a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
+++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <table-date-picker
+      :class="{ disabledDiv: loading }"
+      :time-scale="timeScale"
+      @changePeriod="onChangePeriod"
+    />
     <power-temp :time-scale="timeScale"></power-temp>
     <volt-input :time-scale="timeScale"></volt-input>
     <volt-output :time-scale="timeScale"></volt-output>
@@ -16,7 +20,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import PowerTemp from './PowerTemp';
@@ -42,6 +48,7 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
@@ -55,6 +62,7 @@ export default {
       if (!resetButton) {
         return;
       }
+
       resetButton.dispatchEvent(new Event('click'));
     },
 
@@ -65,23 +73,19 @@ export default {
     },
     startProgress() {
       this.startLoader();
-      const psuTemp = new Promise((resolve) => {
-        this.$root.$on('psu-temp', () => resolve());
-      });
-      const psuVolt = new Promise((resolve) => {
-        this.$root.$on('psu-volt', () => resolve());
-      });
-      const psuPower = new Promise((resolve) => {
-        this.$root.$on('psu-power', () => resolve());
-      });
-      const psuCurrent = new Promise((resolve) => {
-        this.$root.$on('psu-current', () => resolve());
-      });
-
-      Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() =>
-        this.endLoader()
+      this.$root.$on('psu-temp', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-volt-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-volt-output', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-power-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-power-output', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-current-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-current-output', (loading) =>
+        this.onLoading(loading)
       );
     },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue
index 676f236c..bfbf9953 100644
--- a/src/views/_sila/Power/Dynamic/PowerInput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerInput.vue
@@ -107,6 +107,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,17 +163,19 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -180,9 +183,11 @@ export default {
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-power-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-power');
+        this.$root.$emit('psu-power-input', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue
index 851606d1..842cdd59 100644
--- a/src/views/_sila/Power/Dynamic/PowerOutput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue
@@ -107,6 +107,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -161,6 +162,13 @@ export default {
     },
   },
   watch: {
+    timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
+      this.loadData();
+    },
     items() {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
@@ -170,6 +178,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -178,9 +187,10 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-power-output', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-power');
+        this.$root.$emit('psu-power-output', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue
index 89799c5a..1a8a4b58 100644
--- a/src/views/_sila/Power/Dynamic/PowerTemp.vue
+++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_psuTempp"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.temperature')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -147,6 +149,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -244,12 +247,14 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -269,17 +274,20 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_temp', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+      this.$root.$emit('psu-temp', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsTemp').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('psu-temp', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue
index 6baf5e47..7012f11b 100644
--- a/src/views/_sila/Power/Dynamic/VoltInput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltInput.vue
@@ -1,6 +1,7 @@
 <template>
   <collapse
     id="collapse_InputVolt"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.InputVolt')"
     @opened="onOpened"
   >
@@ -147,6 +148,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -246,12 +248,13 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -271,6 +274,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_voltage', lastHour: false };
@@ -278,12 +282,13 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-volt-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsVol').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
-          this.$root.$emit('psu-volt');
+          this.$root.$emit('psu-volt-input', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue
index c31e89a8..c5de746f 100644
--- a/src/views/_sila/Power/Dynamic/VoltOutput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue
@@ -1,6 +1,7 @@
 <template>
   <collapse
     id="collapse_OutputVolt"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.OutputVolt')"
     @opened="onOpened"
   >
@@ -147,6 +148,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -260,14 +262,14 @@ export default {
     },
 
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  /*created() {
-    this.loadData();
-  },*/
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -288,6 +290,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_voltage', lastHour: false };
@@ -295,12 +298,13 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-volt-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsVol').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
-          this.$root.$emit('psu-volt');
+          this.$root.$emit('psu-volt-output', false);
           this.isBusy = false;
           this.endLoader();
         });
diff --git a/src/views/_sila/Processors/Dynamic/CpuPower.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue
index fe359456..693c161d 100644
--- a/src/views/_sila/Processors/Dynamic/CpuPower.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_power"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageProcessors.power')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -81,7 +83,9 @@ import Chart from '@/components/_sila/Global/Chart';
 import PageSection from '@/components/Global/PageSection';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 import Collapse from '@/components/_sila/Global/Collapse';
 
@@ -98,9 +102,11 @@ export default {
   },
   data() {
     return {
+      loading,
       warning: 66,
       shutdown: 88,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -140,17 +146,20 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -159,10 +168,12 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('cpu-power', true);
       this.startLoader();
       this.$store
         .dispatch('processors/getCpuPowerDynamic', payload)
         .finally(() => {
+          this.$root.$emit('cpu-power', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
index f4e9a49f..f33b328a 100644
--- a/src/views/_sila/Processors/Dynamic/CpuTemp.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_temp"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageProcessors.temperature')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -147,6 +149,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -251,12 +254,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -276,6 +281,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -284,6 +290,7 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('cpu-temp', true);
       this.startLoader();
       this.$store
         .dispatch('processors/getCpuTempDynamic', payload)
@@ -291,6 +298,7 @@ export default {
           this.$store.dispatch('processors/getLimitsTemp').finally(() => {
             this.warning = this.warningLimit;
             this.critical = this.criticalLimit;
+            this.$root.$emit('cpu-temp', false);
             this.endLoader();
             this.isBusy = false;
           });
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index ff9feb2e..e92ee8fb 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <table-date-picker
+      :class="{ disabledDiv: loading }"
+      :time-scale="timeScale"
+      @changePeriod="onChangePeriod"
+    />
     <cpu-temp :time-scale="timeScale"></cpu-temp>
     <cpu-power :time-scale="timeScale"></cpu-power>
   </b-container>
@@ -11,7 +15,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import CpuPower from './CpuPower';
@@ -27,10 +33,13 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
-
+  created() {
+    this.startProgress();
+  },
   methods: {
     resetZoom() {
       const resetButton = document.querySelector('.highcharts-reset-zoom');
@@ -42,8 +51,17 @@ export default {
     },
     onChangePeriod(period) {
       this.timeScale = period;
+      this.startProgress();
       this.resetZoom();
     },
+    startProgress() {
+      this.startLoader();
+      this.$root.$on('cpu-temp', (loading) => this.onLoading(loading));
+      this.$root.$on('cpu-power', (loading) => this.onLoading(loading));
+    },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>
-- 
cgit v1.2.3