diff options
-rw-r--r-- | src/assets/styles/bmc/_sila/_chart.scss | 7 | ||||
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 144 | ||||
-rw-r--r-- | src/components/_sila/Global/helpers.js | 1398 | ||||
-rw-r--r-- | src/main.js | 2 | ||||
-rw-r--r-- | src/store/index.js | 2 | ||||
-rw-r--r-- | src/store/modules/HardwareStatus/ProcessorStore.js | 12 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 30 |
7 files changed, 1591 insertions, 4 deletions
diff --git a/src/assets/styles/bmc/_sila/_chart.scss b/src/assets/styles/bmc/_sila/_chart.scss new file mode 100644 index 00000000..24da971d --- /dev/null +++ b/src/assets/styles/bmc/_sila/_chart.scss @@ -0,0 +1,7 @@ +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-8px, 0) !important; +} diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue new file mode 100644 index 00000000..bc7d8bd8 --- /dev/null +++ b/src/components/_sila/Global/Chart.vue @@ -0,0 +1,144 @@ +<template> + <div> + <highcharts :options="chartOptions" /> + <div v-for="(item, index) in data" :key="index"> + {{ item.MetricProperty }} + </div> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + data: { + type: Array, + default: () => [], + }, + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + groupData() { + return this.data.reduce(function (rv, x) { + (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x); + return rv; + }, {}); + }, + + chartOptions() { + return { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }; + }, + }, + + watch: { + groupData() { + console.log('group data!!!', this.groupData); + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/components/_sila/Global/helpers.js b/src/components/_sila/Global/helpers.js new file mode 100644 index 00000000..82e23544 --- /dev/null +++ b/src/components/_sila/Global/helpers.js @@ -0,0 +1,1398 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 37, + 10, + 10, + 10, + 10, + 10, + 25, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 35, + 10, + 10, + 10, + 10, + 10, + 45, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 30, + 11, + 11, + 11, + 11, + 57, + 11, + 11, + 11, + 11, + 25, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 61, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 51, + 11, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 15, + 15, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 25, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 35, + 15, + 15, + 55, + 15, + 15, + 15, + 15, + 15, + 15, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 76, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#139BB9', + }, + ], + //////////////////////////////frequency//////////////// + frequency: [ + { + name: 'Sean', + data: [ + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 137, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 125, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 135, + 100, + 100, + 100, + 100, + 100, + 145, + 100, + 100, + 360, + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 100, + 100, + 150, + 100, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 120, + 120, + 120, + 140, + 120, + 157, + 120, + 120, + 120, + 210, + 120, + 125, + 120, + 120, + 120, + 350, + 120, + 120, + 120, + 120, + 120, + 590, + 120, + 120, + 120, + 120, + 450, + 120, + 120, + 120, + 120, + 120, + 125, + 120, + 120, + 120, + 120, + 120, + 162, + 120, + 120, + 120, + 120, + 120, + 220, + 120, + 120, + 120, + 120, + 120, + 360, + 120, + 210, + 120, + 200, + 120, + 120, + 120, + 120, + 120, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 110, + 110, + 110, + 450, + 110, + 110, + 110, + 157, + 110, + 110, + 110, + 110, + 110, + 165, + 110, + 110, + 110, + 110, + 110, + 310, + 110, + 110, + 110, + 590, + 110, + 110, + 175, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 152, + 110, + 310, + 110, + 110, + 210, + 110, + 110, + 110, + 110, + 110, + 110, + 360, + 110, + 110, + 110, + 210, + 110, + 110, + 110, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 221, + 221, + 221, + 251, + 221, + 221, + 221, + 221, + 221, + 590, + 221, + 221, + 421, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 450, + 221, + 221, + 221, + 221, + 421, + 221, + 235, + 221, + 221, + 221, + 221, + 221, + 421, + 221, + 360, + 221, + 221, + 221, + 210, + 253, + 221, + 221, + 230, + 221, + 221, + 221, + 590, + 221, + 221, + 221, + 221, + 221, + 221, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 176, + 176, + 176, + 156, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 276, + 176, + 176, + 176, + 176, + 176, + 176, + 210, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 570, + 176, + 176, + 176, + 176, + 176, + 770, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + ], + color: '#139BB9', + }, + ], + //////////////////////////////power//////////////// + power: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 55, + 15, + 75, + 15, + 85, + 15, + 15, + 45, + 15, + 15, + 45, + 15, + 45, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 72, + 12, + 12, + 12, + 42, + 12, + 12, + 12, + 52, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 24, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 14, + 44, + 14, + 14, + 54, + 14, + 44, + 14, + 14, + 64, + 14, + 44, + 14, + 24, + 14, + 44, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 54, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 36, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 86, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 79, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 79, + 19, + 59, + 19, + 69, + 19, + 79, + 19, + 89, + 19, + 99, + 19, + 19, + 69, + 59, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + }, + { + key: 'minDate', + label: 'Дата минимального', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + }, + { + key: 'maxDate', + label: 'Дата максимального', + }, + ], + items: [ + { + name: 'Процессор 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Процессор 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Процессор 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Процессор 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + frequencyTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + }, + { + key: 'currentFrequency', + label: 'Текущее, Hz', + }, + { + key: 'baseFrequency', + label: 'Базовое, Hz', + }, + ], + items: [ + { + name: 'Процессор 1', + currentFrequency: 600, + baseFrequency: 400, + }, + { + name: 'Процессор 2', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 3', + currentFrequency: 500, + baseFrequency: 450, + }, + { + name: 'Процессор 4', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 5', + currentFrequency: 600, + baseFrequency: 470, + }, + { + name: 'Процессор 6', + currentFrequency: 500, + baseFrequency: 400, + }, + ], + }, + powerTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + }, + { + key: 'currentPower', + label: 'Текущее, Вт', + label2: '', + }, + ], + items: [ + { + name: 'Процессор 1', + currentPower: 91, + }, + { + name: 'Процессор 2', + currentPower: 77, + }, + { + name: 'Процессор 3', + currentPower: 76, + }, + { + name: 'Процессор 4', + currentPower: 74, + }, + { + name: 'Процессор 5', + currentPower: 73, + }, + { + name: 'Процессор 6', + currentPower: 71, + }, + ], + }, +}; diff --git a/src/main.js b/src/main.js index 949baaed..90983c77 100644 --- a/src/main.js +++ b/src/main.js @@ -41,6 +41,7 @@ import { import Vuelidate from 'vuelidate'; import i18n from './i18n'; import { format } from 'date-fns-tz'; +import HighchartsVue from 'highcharts-vue'; // Filters Vue.filter('shortTimeZone', function (value) { @@ -128,6 +129,7 @@ Vue.use(TabsPlugin); Vue.use(ToastPlugin); Vue.use(TooltipPlugin); Vue.use(Vuelidate); +Vue.use(HighchartsVue); new Vue({ router, diff --git a/src/store/index.js b/src/store/index.js index 41eba75f..11183e00 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,7 +19,7 @@ import ServerLedStore from './modules/HardwareStatus/ServerLedStore'; import SystemStore from './modules/HardwareStatus/SystemStore'; import PowerSupplyStore from './modules/HardwareStatus/PowerSupplyStore'; import MemoryStore from './modules/HardwareStatus/MemoryStore'; -import FanStore from './modules/_sila//HardwareStatus/FanStore'; +import FanStore from './modules/_sila/HardwareStatus/FanStore'; import ChassisStore from './modules/HardwareStatus/ChassisStore'; import BmcStore from './modules/HardwareStatus/BmcStore'; import ProcessorStore from './modules/HardwareStatus/ProcessorStore'; diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js index d4c99bce..2309f536 100644 --- a/src/store/modules/HardwareStatus/ProcessorStore.js +++ b/src/store/modules/HardwareStatus/ProcessorStore.js @@ -59,8 +59,20 @@ const ProcessorStore = { }; }); }, + + setProcessorsDynamic: (state, data) => { + state.processors = data; + }, }, actions: { + async getProcessorsDynamic({ commit }) { + return await api + .get('/redfish/v1/TelemetryService/MetricReports/hour_data&cpu_temp') + .then(({ data: { MetricValues = [] } }) => + commit('setProcessorsDynamic', MetricValues) + ) + .catch((error) => console.log(error)); + }, async getProcessorsInfo({ commit }) { return await api .get('/redfish/v1/Systems/system/Processors') diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 000928cf..ac510875 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -1,20 +1,44 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.dynamicInformation')" /> + + <chart :data="filteredSensors"></chart> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; +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'; export default { - components: { PageTitle }, - mixins: [DataFormatterMixin, LoadingBarMixin], + components: { PageTitle, Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { - return {}; + return { + activeFilters: [], + }; + }, + + computed: { + allSensors() { + let sensors = this.$store.getters['processors/processors']; + return sensors; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('processors/getProcessorsDynamic').finally(() => { + this.endLoader(); + }); }, }; </script> |