diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-26 16:09:08 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-26 16:09:08 +0300 |
commit | e37e7530d334bd18777d774192303680d9585857 (patch) | |
tree | 764f9c6bb188ddfd4361c1e1f58893a9fbd412a1 /src | |
parent | 6c85919b04002e8871b69ebbcf0835f853d27f27 (diff) | |
download | webui-vue-e37e7530d334bd18777d774192303680d9585857.tar.xz |
add power for processor
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/images/_sila/collapsed/power.svg | 3 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 8 | ||||
-rw-r--r-- | src/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 24 | ||||
-rw-r--r-- | src/store/modules/HardwareStatus/ProcessorStore.js | 32 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/Power.vue | 163 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 16 |
7 files changed, 229 insertions, 18 deletions
diff --git a/src/assets/images/_sila/collapsed/power.svg b/src/assets/images/_sila/collapsed/power.svg new file mode 100644 index 00000000..84acf641 --- /dev/null +++ b/src/assets/images/_sila/collapsed/power.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M0.5 14H4.02205L4.77627 9.65234H7.15277C10.5183 9.65234 12.9232 7.76563 13.4142 4.84668C13.9123 1.96191 12.2188 0 8.9387 0H2.91919L0.5 14ZM5.23876 6.98633L5.97875 2.72754H7.71487C9.30157 2.72754 9.98464 3.54102 9.77118 4.84668C9.55061 6.13867 8.57582 6.98633 6.96777 6.98633H5.23876Z" fill="#E11717"/> +</svg> diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue index 4a3694bd..d5076d77 100644 --- a/src/components/_sila/Global/Collapse.vue +++ b/src/components/_sila/Global/Collapse.vue @@ -4,6 +4,7 @@ v-b-toggle="id" variant="collapse" class="d-flex flex-nowrap justify-content-start" + @click="onClick" > <slot name="image"></slot> {{ title }} @@ -31,8 +32,15 @@ export default { }, data() { return { + opened: false, iconChevronUp: iconChevronUp, }; }, + methods: { + onClick() { + this.opened = !this.opened; + this.$emit('opened', this.opened); + }, + }, }; </script> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 7494318f..c19c756f 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -836,6 +836,7 @@ }, "pageProcessors": { "temperature": "Temperature Display", + "power": "Power consumption indicators", "labels": { "notNormal": "Not regular", "critical": "Critical", diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 6c5bff0b..88d4cc88 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -854,19 +854,27 @@ }, "pageProcessors": { "temperature": "Показатели температуры", + "power": "Показатели потребляемой мощности", "labels": { "notNormal": "Не штатный режим", "critical": "Критический режим", - "warning": "Значение предупреждения" + "warning": "Значение предупреждения", + "shutdown": "Значение отказа" }, "table": { - "name": "Имя модуля", - "currentTemperature": "Текущее, С°", - "middleTemperature": "Среднее, С°", - "minTemperature": "Минимальное, С°", - "minDate": "Дата минимального", - "maxTemperature": "Максимальное, С°", - "maxDate": "Дата максимального" + "temperature": { + "name": "Имя модуля", + "currentTemperature": "Текущее, С°", + "middleTemperature": "Среднее, С°", + "minTemperature": "Минимальное, С°", + "minDate": "Дата минимального", + "maxTemperature": "Максимальное, С°", + "maxDate": "Дата максимального" + }, + "power": { + "name": "Имя модуля", + "current": "Текущее, Вт" + } } }, "pageMemory": { diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js index a28cd00c..5d014ab9 100644 --- a/src/store/modules/HardwareStatus/ProcessorStore.js +++ b/src/store/modules/HardwareStatus/ProcessorStore.js @@ -5,9 +5,11 @@ const ProcessorStore = { namespaced: true, state: { processors: [], + cpuPower: [], }, getters: { processors: (state) => state.processors, + cpuPower: (state) => state.cpuPower, }, mutations: { setProcessorsInfo: (state, data) => { @@ -63,21 +65,37 @@ const ProcessorStore = { setProcessorsDynamic: (state, data) => { state.processors = data; }, + setCpuPowerDynamic: (state, data) => { + state.cpuPower = data; + }, }, actions: { - async getProcessorsDynamicHour({ commit }) { + async getCpuPowerDynamic({ commit }, { lastHour }) { + let url = null; + if (lastHour) { + url = + '/redfish/v1/TelemetryService/MetricReports/hour_data&id=power&period=last_hour'; + } else { + url = '/redfish/v1/TelemetryService/MetricReports/hour_data&id=power'; + } return await api - .get( - '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp&period=last_hour' - ) + .get(url) .then(({ data: { MetricValues = [] } }) => - commit('setProcessorsDynamic', MetricValues) + commit('setCpuPowerDynamic', MetricValues) ) .catch((error) => console.log(error)); }, - async getProcessorsDynamic({ commit }) { + async getCpuTempDynamic({ commit }, { lastHour }) { + let url = null; + if (lastHour) { + url = + '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp&period=last_hour'; + } else { + url = + '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp'; + } return await api - .get('/redfish/v1/TelemetryService/MetricReports/hour_data&cpu_temp') + .get(url) .then(({ data: { MetricValues = [] } }) => commit('setProcessorsDynamic', MetricValues) ) diff --git a/src/views/_sila/Processors/Dynamic/Power.vue b/src/views/_sila/Processors/Dynamic/Power.vue new file mode 100644 index 00000000..4f486f6b --- /dev/null +++ b/src/views/_sila/Processors/Dynamic/Power.vue @@ -0,0 +1,163 @@ +<template> + <collapse + id="collapse_power" + :title="$t('pageProcessors.power')" + style="margin-top: 0" + @opened="onOpened" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/power.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.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-form-group :label="$t('pageProcessors.labels.shutdown')"> + <b-form-input v-model="shutdown" 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" + :shutdown="shutdown" + ></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], + data() { + return { + timeScale: 'hour', + warning: 66, + shutdown: 88, + items: [], + fields: [ + { + key: 'name', + label: this.$t('pageProcessors.table.power.name'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pageProcessors.table.power.current'), + }, + ], + }; + }, + + computed: { + allSensors() { + return this.$store.getters['processors/cpuPower']; + }, + + 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(); + } + }, + switchTimeScale(period) { + this.timeScale = period; + this.loadData(); + }, + + loadData() { + let payload = null; + if (this.timeScale === 'hour') { + payload = { lastHour: true }; + } + + this.startLoader(); + this.$store + .dispatch('processors/getCpuPowerDynamic', payload) + .finally(() => { + this.endLoader(); + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 45ef53f6..24163bcc 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -103,6 +103,8 @@ </b-table> </page-section> </collapse> + + <power></power> </b-container> </template> <script> @@ -117,9 +119,17 @@ import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; import Collapse from '@/components/_sila/Global/Collapse'; import { getItems } from '@/utilities/_sila/metricProperties'; +import Power from './Power'; export default { - components: { PageTitle, Collapse, PageSection, Chart, TableDatePicker }, + components: { + Power, + PageTitle, + Collapse, + PageSection, + Chart, + TableDatePicker, + }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { @@ -215,13 +225,13 @@ export default { if (period === 'hour') { this.startLoader(); this.$store - .dispatch('processors/getProcessorsDynamicHour') + .dispatch('processors/getCpuTempDynamic', { lastHour: true }) .finally(() => { this.endLoader(); }); } else { this.startLoader(); - this.$store.dispatch('processors/getProcessorsDynamic').finally(() => { + this.$store.dispatch('processors/getCpuTempDynamic').finally(() => { this.endLoader(); }); } |