diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-26 17:24:02 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-26 17:24:02 +0300 |
commit | 60da695475d1853a32aa75ca71de421b70b51fa8 (patch) | |
tree | fd38a0638346ac022d67510dbae56b7306367ee1 /src/views/_sila | |
parent | e37e7530d334bd18777d774192303680d9585857 (diff) | |
download | webui-vue-60da695475d1853a32aa75ca71de421b70b51fa8.tar.xz |
clean code for cpu dynamic
Diffstat (limited to 'src/views/_sila')
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuPower.vue (renamed from src/views/_sila/Processors/Dynamic/Power.vue) | 17 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuTemp.vue | 192 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 209 |
3 files changed, 207 insertions, 211 deletions
diff --git a/src/views/_sila/Processors/Dynamic/Power.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue index 4f486f6b..dffea20f 100644 --- a/src/views/_sila/Processors/Dynamic/Power.vue +++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue @@ -33,12 +33,12 @@ </b-col> </b-row> <chart - type="processors" + type="power" :time-scale="timeScale" :data="filteredSensors" :colors="colors" - :warning="warning" - :shutdown="shutdown" + :warning="+warning" + :shutdown="+shutdown" ></chart> <b-table v-if="items && items.length > 0" @@ -91,9 +91,14 @@ import { getItems } from '@/utilities/_sila/metricProperties'; export default { components: { PageSection, Chart, Collapse }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, data() { return { - timeScale: 'hour', warning: 66, shutdown: 88, items: [], @@ -140,10 +145,6 @@ export default { this.loadData(); } }, - switchTimeScale(period) { - this.timeScale = period; - this.loadData(); - }, loadData() { let payload = null; diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue new file mode 100644 index 00000000..671b3d7b --- /dev/null +++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue @@ -0,0 +1,192 @@ +<template> + <collapse + id="collapse_temp" + :title="$t('pageProcessors.temperature')" + style="margin-top: 0" + @opened="onOpened" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pageProcessors.labels.notNormal')"> + <b-form-input + v-model="notNormal" + type="number" + :min="0" + :max="100" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pageProcessors.labels.critical')"> + <b-form-input v-model="critical" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pageProcessors.labels.warning')"> + <b-form-input v-model="warning" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ 'Сохранить' }} + </b-button> + </b-col> + </b-row> + <chart + type="processors" + :time-scale="timeScale" + :data="filteredSensors" + :colors="colors" + :warning="+warning" + :not-normal="+notNormal" + :critical="+critical" + ></chart> + <b-table + v-if="items && items.length > 0" + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +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 TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + notNormal: 44, + critical: 55, + items: [], + fields: [ + { + key: 'name', + label: this.$t('pageProcessors.table.name'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pageProcessors.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pageProcessors.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pageProcessors.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pageProcessors.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageProcessors.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pageProcessors.table.maxDate'), + }, + ], + }; + }, + + computed: { + allSensors() { + return this.$store.getters['processors/cpuTemp']; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + filteredSensors(data) { + this.items = getItems(data); + }, + }, + + methods: { + onOpened(state) { + if (state) { + this.loadData(); + } + }, + + loadData() { + let payload = null; + if (this.timeScale === 'hour') { + payload = { lastHour: true }; + } + + this.startLoader(); + this.$store + .dispatch('processors/getCpuTempDynamic', payload) + .finally(() => { + this.endLoader(); + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 24163bcc..e2e1505c 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -6,235 +6,38 @@ :time-scale="timeScale" style="margin: -2rem -2rem 0 -2rem" /> - <collapse - id="collapse_1" - :title="$t('pageProcessors.temperature')" - style="margin-top: 0" - > - <template #image> - <img src="@/assets/images/_sila/collapsed/temperature.svg" /> - </template> - <page-section> - <b-row class="align-items-end p-2"> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-form-group :label="$t('pageProcessors.labels.notNormal')"> - <b-form-input - v-model="temperatureNonNormalInput" - type="number" - :min="0" - :max="temperatureCriticalInput" - ></b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-form-group :label="$t('pageProcessors.labels.critical')"> - <b-form-input - v-model="temperatureCriticalInput" - type="number" - :min="temperatureNonNormalInput" - :max="temperatureWarningInput" - > - </b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-form-group :label="$t('pageProcessors.labels.warning')"> - <b-form-input - v-model="temperatureWarningInput" - type="number" - :min="temperatureCriticalInput" - :max="100" - > - </b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-button - variant="primary" - style="height: 35px" - @click="updateTemperature" - > - {{ 'Сохранить' }} - </b-button> - </b-col> - </b-row> - <chart - type="processors" - :time-scale="timeScale" - :data="filteredSensors" - :colors="colors" - :warning="temperatureWarning" - :non-normal="temperatureNonNormal" - :critical-start="temperatureCritical" - ></chart> - <b-table - v-if="items && items.length > 0" - responsive="md" - show-empty - table-variant="accessory" - hover - :items="items" - :fields="fields" - :empty-text="$t('global.table.emptyMessage')" - > - <template #cell(name)="{ value, index }"> - <div - class="item-color" - :style="`background-color: ${colors[index]}`" - ></div> - {{ value }} - </template> - <template #cell(minDate)="{ value }"> - <span style="color: rgb(12, 28, 41)"> - {{ value.time }} - </span> - <span> - {{ value.date }} - </span> - </template> - <template #cell(maxDate)="{ value }"> - <span style="color: rgb(12, 28, 41)"> - {{ value.time }} - </span> - <span> - {{ value.date }} - </span> - </template> - </b-table> - </page-section> - </collapse> - - <power></power> + <cpu-temp :time-scale="timeScale"></cpu-temp> + <cpu-power :time-scale="timeScale"></cpu-power> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; -import Chart from '@/components/_sila/Global/Chart'; -import PageSection from '@/components/Global/PageSection'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import TableDatePicker from '@/components/_sila/Global/TableDatePicker'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; -import Collapse from '@/components/_sila/Global/Collapse'; -import { getItems } from '@/utilities/_sila/metricProperties'; -import Power from './Power'; +import CpuPower from './CpuPower'; +import CpuTemp from './CpuTemp'; export default { components: { - Power, + CpuPower, + CpuTemp, PageTitle, - Collapse, - PageSection, - Chart, TableDatePicker, }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { - activeFilters: [], timeScale: 'hour', - temperatureWarning: 72, - temperatureWarningInput: 72, - temperatureNonNormal: 44, - temperatureNonNormalInput: 44, - temperatureCritical: 55, - temperatureCriticalInput: 55, - frequencyWarning: 660, - frequencyWarningInput: 660, - powerWarning: 66, - powerWarningInput: 66, - powerShutdown: 88, - powerShutdownInput: 88, - notificationInput: 42, - fields: [ - { - key: 'name', - label: this.$t('pageProcessors.table.name'), - thStyle: { width: '25%' }, - }, - { - key: 'current', - label: this.$t('pageProcessors.table.currentTemperature'), - }, - { - key: 'middle', - label: this.$t('pageProcessors.table.middleTemperature'), - }, - { - key: 'min', - label: this.$t('pageProcessors.table.minTemperature'), - }, - { - key: 'minDate', - label: this.$t('pageProcessors.table.minDate'), - }, - { - key: 'max', - label: this.$t('pageProcessors.table.maxTemperature'), - }, - { - key: 'maxDate', - label: this.$t('pageProcessors.table.maxDate'), - }, - ], - items: [], }; }, - computed: { - allSensors() { - let sensors = this.$store.getters['processors/processors']; - return sensors; - }, - - filteredSensors() { - return this.getFilteredTableData(this.allSensors, this.activeFilters); - }, - colors() { - return this.$randomColor({ - count: this.items?.length, - hue: 'random', - luminosity: 'random', - }); - }, - }, - watch: { - filteredSensors(data) { - this.items = getItems(data); - }, - }, - created() { - this.loadData('hour'); - }, - methods: { switchTimeScale(period) { this.timeScale = period; - this.loadData(period); - }, - - updateTemperature() { - this.temperatureWarning = +this.temperatureWarningInput; - this.temperatureNonNormal = +this.temperatureNonNormalInput; - this.temperatureCritical = +this.temperatureCriticalInput; - }, - - loadData(period) { - if (period === 'hour') { - this.startLoader(); - this.$store - .dispatch('processors/getCpuTempDynamic', { lastHour: true }) - .finally(() => { - this.endLoader(); - }); - } else { - this.startLoader(); - this.$store.dispatch('processors/getCpuTempDynamic').finally(() => { - this.endLoader(); - }); - } }, }, }; |