diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-27 11:14:57 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-27 11:14:57 +0300 |
commit | 6f67757c75268bc54856008f437c3dc1c508bd18 (patch) | |
tree | 74a8628e17662cc896fa8a1faf723822fa5e410d | |
parent | 9ac77cb67aa021012aba67f2f25124ab744c339b (diff) | |
download | webui-vue-6f67757c75268bc54856008f437c3dc1c508bd18.tar.xz |
upd logic for motherboard
3 files changed, 188 insertions, 178 deletions
diff --git a/src/store/modules/_sila/HardwareStatus/MotherboardStore.js b/src/store/modules/_sila/HardwareStatus/MotherboardStore.js index 71b71065..1099b4a7 100644 --- a/src/store/modules/_sila/HardwareStatus/MotherboardStore.js +++ b/src/store/modules/_sila/HardwareStatus/MotherboardStore.js @@ -14,19 +14,17 @@ const MotherboardStore = { }, }, actions: { - async getMotherboardDynamicHour({ commit }) { + async getMotherboardDynamic({ commit }, { lastHour }) { + let url = null; + if (lastHour) { + url = + '/redfish/v1/TelemetryService/MetricReports/hour_data&id=other_temp&period=last_hour'; + } else { + url = + '/redfish/v1/TelemetryService/MetricReports/hour_data&id=other_temp'; + } return await api - .get( - '/redfish/v1/TelemetryService/MetricReports/hour_data&id=other_temp&period=last_hour' - ) - .then(({ data: { MetricValues = [] } }) => - commit('setMotherboardDynamic', MetricValues) - ) - .catch((error) => console.log(error)); - }, - async getMotherboardDynamic({ commit }) { - return await api - .get('/redfish/v1/TelemetryService/MetricReports/hour_data&other_temp') + .get(url) .then(({ data: { MetricValues = [] } }) => commit('setMotherboardDynamic', MetricValues) ) diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue index 6b0f31bf..45dbca9e 100644 --- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue @@ -6,194 +6,32 @@ :time-scale="timeScale" style="margin: -2rem -2rem 0 -2rem" /> - <div class="custom-divider" style="margin-top: 0"> - <b-button - variant="collapse" - class="d-flex flex-nowrap justify-content-start" - > - <img src="@/assets/images/_sila/collapsed/temperature.svg" /> - {{ $t('pageMotherboard.temperature') }} - </b-button> - <b-row class="align-items-end p-2"> - <b-col xs="12" md="3" class="pt-4"> - <b-form-group :label="$t('pageMotherboard.labels.warning')"> - <b-form-input - v-model="temperatureWarningInput" - type="number" - :min="0" - :max="100" - ></b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" class="pt-2"> - <b-button variant="primary" style="height: 35px"> - {{ 'Сохранить' }} - </b-button> - </b-col> - </b-row> - <b-col class="pl-4 pr-4"> - <chart - type="motherboard" - :time-scale="timeScale" - :colors="colors" - :data="filteredSensors" - :warning="temperatureWarning" - :non-normal="temperatureNonNormal" - :critical-start="temperatureCriticalStart" - ></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> - </b-col> - </div> + <motherboard-temp :time-scale="timeScale"></motherboard-temp> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; -import Chart from '@/components/_sila/Global/Chart'; import TableDatePicker from '@/components/_sila/Global/TableDatePicker'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; -import { getItems } from '@/utilities/_sila/metricProperties'; + +import MotherboardTemp from './MotherboardTemp'; export default { - components: { PageTitle, Chart, TableDatePicker }, + components: { MotherboardTemp, PageTitle, TableDatePicker }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { - activeFilters: [], timeScale: 'hour', - temperatureWarning: 72, - temperatureWarningInput: 72, - temperatureNonNormal: 44, - temperatureNonNormalInput: 44, - temperatureCriticalStart: 55, - temperatureCriticalInput: 55, - fields: [ - { - key: 'name', - label: this.$t('pageMemory.table.name'), - }, - { - key: 'current', - label: this.$t('pageMemory.table.currentTemperature'), - }, - { - key: 'middle', - label: this.$t('pageMemory.table.middleTemperature'), - }, - { - key: 'min', - label: this.$t('pageMemory.table.minTemperature'), - }, - { - key: 'minDate', - label: this.$t('pageMemory.table.minDate'), - }, - { - key: 'max', - label: this.$t('pageMemory.table.maxTemperature'), - }, - { - key: 'maxDate', - label: this.$t('pageMemory.table.maxDate'), - }, - ], - items: [], }; }, - computed: { - allSensors() { - let sensors = this.$store.getters['motherboard/motherboard']; - 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('motherboard/getMotherboardDynamicHour') - .finally(() => { - this.endLoader(); - }); - } else { - this.startLoader(); - this.$store - .dispatch('motherboard/getMotherboardDynamic') - .finally(() => { - this.endLoader(); - }); - } }, }, }; diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue new file mode 100644 index 00000000..c16149d9 --- /dev/null +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue @@ -0,0 +1,174 @@ +<template> + <div class="custom-divider" style="margin-top: 0"> + <b-button + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + {{ $t('pageMotherboard.temperature') }} + </b-button> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="3" class="pt-4"> + <b-form-group :label="$t('pageMotherboard.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" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ 'Сохранить' }} + </b-button> + </b-col> + </b-row> + <b-col class="pl-4 pr-4"> + <chart + type="motherboard" + :time-scale="timeScale" + :colors="colors" + :data="filteredSensors" + :warning="warning" + ></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> + </b-col> + </div> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; + +import { getItems } from '@/utilities/_sila/metricProperties'; + +export default { + components: { Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + fields: [ + { + key: 'name', + label: this.$t('pageMemory.table.name'), + }, + { + key: 'current', + label: this.$t('pageMemory.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pageMemory.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pageMemory.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pageMemory.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageMemory.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pageMemory.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredSensors); + }, + + allSensors() { + return this.$store.getters['motherboard/motherboard']; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + watch: { + timeScale() { + this.loadData(); + }, + }, + + created() { + this.loadData(); + }, + + methods: { + loadData() { + let payload = { lastHour: false }; + if (this.timeScale === 'hour') { + payload = { lastHour: true }; + } + + this.startLoader(); + this.$store + .dispatch('motherboard/getMotherboardDynamic', payload) + .finally(() => { + this.endLoader(); + }); + }, + }, +}; +</script> |