diff options
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 7 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 19 | ||||
-rw-r--r-- | src/store/modules/HardwareStatus/FanStore.js | 51 | ||||
-rw-r--r-- | src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue | 20 | ||||
-rw-r--r-- | src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue | 20 | ||||
-rw-r--r-- | src/views/_sila/Fans/Dynamic/FansDynamicPage.vue | 24 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/CurrentInput.vue | 13 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/CurrentOutput.vue | 13 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerDynamicPage.vue | 38 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerInput.vue | 13 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerOutput.vue | 12 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerTemp.vue | 14 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/VoltInput.vue | 13 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/VoltOutput.vue | 14 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuPower.vue | 19 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuTemp.vue | 14 | ||||
-rw-r--r-- | src/views/_sila/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> |