diff options
Diffstat (limited to 'src')
25 files changed, 945 insertions, 7 deletions
diff --git a/src/assets/images/_sila/collapsed/temperature.svg b/src/assets/images/_sila/collapsed/temperature.svg new file mode 100644 index 00000000..eaef46f7 --- /dev/null +++ b/src/assets/images/_sila/collapsed/temperature.svg @@ -0,0 +1,3 @@ +<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59649 8.70217V2.11563C2.72082 1.71432 3.14137 1.08777 3.96881 1.08777C4.80097 1.08777 5.25676 1.71835 5.40351 2.1269V8.5628V8.70217H5.40718L5.1428 9.2957C6.08491 9.74384 6.73684 10.7272 6.73684 11.8665C6.73684 13.4284 5.51152 14.6947 4 14.6947C2.48848 14.6947 1.26316 13.4284 1.26316 11.8665C1.26316 10.7267 1.91563 9.74303 2.85836 9.29515L2.59455 8.70217H2.59649ZM1.47368 8.66168V2.07598C1.47368 2.01444 1.48068 1.94562 1.50067 1.87278C1.67069 1.25325 2.37741 0 3.96881 0C5.54465 0 6.29377 1.23221 6.49026 1.84692C6.51676 1.92982 6.52632 2.00947 6.52632 2.08119V8.66168C7.42514 9.4192 8 10.5731 8 11.8665C8 14.1494 6.20914 16 4 16C1.79086 16 0 14.1494 0 11.8665C0 10.5731 0.574857 9.4192 1.47368 8.66168ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 11.2597 2.5 10 3.5 10V4H4.5V10C5.5 10 6 11.2597 6 12Z" fill="#E11717"/> +</svg>
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss index b6062d84..0754e011 100644 --- a/src/assets/styles/bmc/_sila/_buttons.scss +++ b/src/assets/styles/bmc/_sila/_buttons.scss @@ -176,3 +176,27 @@ padding: 6px; margin: 1px; } + +.btn-collapse { + height: 56px; + width: 100%; + border-bottom: 1px solid $gray-10; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } + .icon-expand { + margin-left: auto; + transition: 0.3s linear; + } + &.collapsed { + .icon-expand { + transform: rotate(180deg); + transition: 0.3s linear; + } + } +} 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/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss index bca2d77e..3c5ce71f 100644 --- a/src/assets/styles/bmc/_sila/_section-divider.scss +++ b/src/assets/styles/bmc/_sila/_section-divider.scss @@ -1,3 +1,20 @@ .section-divider { border-bottom: 1px solid gray('400'); } + +.custom-collapse { + margin: 0 -1.95rem 0 -2rem; + @include media-breakpoint-down(md) { + margin-left: -0.95rem; + } + .page-section { + margin-left: 2rem; + margin-right: 2rem; + @include media-breakpoint-down(md) { + margin-left: 2rem; + } + } + .form-group { + margin-bottom: 0; + } +} diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index 8d9f391e..7dca75dc 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -213,4 +213,96 @@ padding-left: 1rem; } } +} + +.table-accessory { + border: none; + thead th { + border-bottom: 1px solid $gray-30; + background-color: transparent !important; + padding: 5px 0; + } + + tbody tr td { + border: none; + padding: 2px; + } + td { + font-size: 0.745rem; + color: $text-tretiatry; + + } + .thead-light th > div { + font-size: 0.755rem !important; + } + + // @include media-breakpoint-down(xs) { + // .b-table-stacked-sm { + // border: 1px solid $gray-10; + + // tr { + + // &:not(:first-child) > td[aria-colindex='1'] { + // padding-top: 0.625rem; + // } + + // &:not(.b-table-empty-row) { + // position: relative; // Restrict background color to get zebra striping for the row + + // &::before, + // &::after { + // position: absolute; + // top: 0; + // height: 100%; + // z-index: -1; + // } + + // &:before { + // content: ''; + // background-color: gray("200"); + // width: 40%; + // border-right: 1px solid gray("300"); + // } + + // &:after { + // content: ''; + // right: 0; + // width: 60%; + // } + + // &:nth-child(even)::after { + // background-color: gray("100"); // Zebra striping for the row + // } + // } + + // td { + // border: 0; + // padding: 0.75rem; + // text-align: left !important; + + // &:last-of-type { + // border-right: 0; + // } + // } + // } + // } + + // .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { + // &::before { + // text-align: left; + // padding-left: $spacer / 2; + // } + + // > div { + // padding-left: 1rem; + // } + // } + // } +} + +.item-color { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; }
\ No newline at end of file diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue new file mode 100644 index 00000000..c5214bd7 --- /dev/null +++ b/src/components/_sila/Global/Chart.vue @@ -0,0 +1,269 @@ +<template> + <highcharts :options="chartOptions" /> +</template> + +<script> +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + data: { + type: Array, + default: () => [], + }, + type: { + type: String, + default: '', + }, + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + shutdown: { + type: Number, + default: 3150, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + data() { + return { + categories: null, + minRange: null, + yMax: null, + minTickInterval: null, + plotBands: null, + }; + }, + computed: { + metricData() { + let filteredData = this.data.filter((metric) => { + return metric.MetricValue !== 'nan'; + }); + + let transform = filteredData.map((metric) => { + let date = new Date(metric.Timestamp); + let time = + date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0'); + return { + ...metric, + Timestamp: time, + MetricValue: Math.round(metric.MetricValue), + }; + }); + + let group = transform.reduce(function (rv, x) { + (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x); + return rv; + }, {}); + + let metricArr = Object.keys(group).map((key) => { + let groupTime = group[key].reduce(function (rv, x) { + (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x); + return rv; + }, {}); + + let arr = Object.keys(groupTime).map((key) => { + const findAverage = (arr) => { + const { length } = arr; + return arr.reduce((acc, val) => { + return Math.round(acc + val.MetricValue / length); + }, 0); + }; + return findAverage(groupTime[key]); + }); + + return { + name: key, + data: arr.slice(-60), + }; + }); + + return metricArr; + }, + + metricTime() { + let filteredData = this.data.filter((metric) => { + return metric.MetricValue !== 'nan'; + }); + + let transform = filteredData.map((metric) => { + let date = new Date(metric.Timestamp); + let time = + date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0'); + return { + ...metric, + Timestamp: time, + MetricValue: Math.round(metric.MetricValue), + }; + }); + + let timeGroup = transform.reduce(function (rv, x) { + (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x); + return rv; + }, {}); + + let timeArr = Object.keys(timeGroup).slice(-60); + + return timeArr; + }, + + chartOptions() { + return { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: this.metricTime, + title: null, + labels: { + step: 10, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: this.categories, + min: 0, + max: this.yMax, + title: null, + minRange: this.minRange, + minTickInterval: this.minTickInterval, + 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: this.plotBands, + }, + series: this.metricData.map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }; + }, + }, + + async created() { + this.setOptions(); + }, + + methods: { + setOptions() { + switch (this.type) { + case 'fans': + this.categories = this.setSpeed(4000); + this.minRange = 4000; + this.minTickInterval = 1000; + this.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ]; + break; + case 'memory': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ]; + break; + case 'processors': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + break; + case 'motherboard': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + break; + } + }, + setCategories(count, desc) { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; + }, + setSpeed(count) { + const arr = [...new Array(count)].map((i, k) => `${k}`); + return arr; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-8px, 0) !important; +} +</style> diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue new file mode 100644 index 00000000..141da639 --- /dev/null +++ b/src/components/_sila/Global/Collapse.vue @@ -0,0 +1,38 @@ +<template> + <div class="custom-collapse"> + <b-button + v-b-toggle="id" + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <slot name="image"></slot> + {{ title }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse :id="id" class="nav-item__nav"> + <slot></slot> + </b-collapse> + </div> +</template> +<script> +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20'; + +export default { + name: 'Collapse', + props: { + id: { + type: String, + default: null, + }, + title: { + type: String, + default: null, + }, + }, + data() { + return { + iconChevronUp: iconChevronUp, + }; + }, +}; +</script> diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js index e3a8a380..3319368b 100644 --- a/src/env/components/AppNavigation/sila.js +++ b/src/env/components/AppNavigation/sila.js @@ -69,6 +69,22 @@ const AppNavigationMixin = { label: this.$t('appNavigation.staticInfo'), route: '/fans/static', }, + { + id: 'fans/dynamic', + label: this.$t('appNavigation.dynamicInformation'), + route: '/fans/dynamic', + }, + ], + }, + { + id: 'motherboard', + label: this.$t('appNavigation.motherboard'), + children: [ + { + id: 'motherboard/dynamic', + label: this.$t('appNavigation.dynamicInformation'), + route: '/motherboard/dynamic', + }, ], }, { @@ -118,6 +134,17 @@ const AppNavigationMixin = { ], }, { + id: 'memory', + label: this.$t('appNavigation.memory'), + children: [ + { + id: 'memory/dynamic', + label: this.$t('appNavigation.dynamicInformation'), + route: '/memory/dynamic', + }, + ], + }, + { id: 'processors', label: this.$t('appNavigation.processors'), children: [ diff --git a/src/env/router/sila.js b/src/env/router/sila.js index f297b369..dbf4369f 100644 --- a/src/env/router/sila.js +++ b/src/env/router/sila.js @@ -31,6 +31,9 @@ import VirtualMedia from '@/views/_sila/Operations/VirtualMedia'; import Power from '@/views/_sila/ResourceManagement/Power'; import FansStatic from '@/views/_sila/Fans/Static'; import ProcessorsDynamic from '@/views/_sila/Processors/Dynamic'; +import MemoryDynamic from '@/views/_sila/Memory/Dynamic'; +import FansDynamic from '@/views/_sila/Fans/Dynamic'; +import MotherboardDynamic from '@/views/_sila/Motherboard/Dynamic'; import i18n from '@/i18n'; const routes = [ @@ -162,6 +165,14 @@ const routes = [ }, }, { + path: 'memory/dynamic', + name: 'memory-dynamic', + component: MemoryDynamic, + meta: { + title: i18n.t('appPageTitle.memory'), + }, + }, + { path: 'processors/dynamic', name: 'processors-dynamic', component: ProcessorsDynamic, @@ -170,6 +181,22 @@ const routes = [ }, }, { + path: 'fans/dynamic', + name: 'fans-dynamic', + component: FansDynamic, + meta: { + title: i18n.t('appPageTitle.fans'), + }, + }, + { + path: 'motherboard/dynamic', + name: 'motherboard-dynamic', + component: MotherboardDynamic, + meta: { + title: i18n.t('appPageTitle.motherboard'), + }, + }, + { path: '/security-and-access/sessions', name: 'sessions', component: Sessions, diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 719a6abe..c8fa9ed9 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -132,7 +132,10 @@ "staticInfo": "Static Information", "fans": "@:appPageTitle.fans", "processors": "@:appPageTitle.processors", - "dynamicInformation": "@:appPageTitle.dynamicInformation" + "dynamicInformation": "@:appPageTitle.dynamicInformation", + "memory": "@:appPageTitle.memory", + "fans": "@:appPageTitle.fans", + "motherboard": "@:appPageTitle.motherboard" }, "appPageTitle": { "changePassword": "Change password", @@ -144,6 +147,8 @@ "factoryReset": "Factory reset", "fans": "Fans", "processors": "Processors", + "memory": "Memory modules", + "motherboard": "Motherboard", "firmware": "Firmware", "inventory": "Inventory and LEDs", "kvm": "KVM", diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 5c237cdf..950a7ce3 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -108,6 +108,9 @@ "settings": "Настройки", "operations": "Управление", "processors": "Процессоры", + "memory": "Модули памяти", + "fans": "Ветиляторы", + "motherboard": "Материнская плата", "dateTime": "@:appPageTitle.dateTime", "dumps": "@:appPageTitle.dumps", "eventLogs": "@:appPageTitle.eventLogs", @@ -136,7 +139,9 @@ "keyClear": "@:appPageTitle.keyClear", "staticInfo": "Статическая информация", "fans": "@:appPageTitle.fans", - "processors": "@:appPageTitle.processors" + "processors": "@:appPageTitle.processors", + "memory": "@:appPageTitle.memory", + "motherboard": "@:appPageTitle.motherboard" }, "appPageTitle": { "changePassword": "Изменить пароль", @@ -148,6 +153,8 @@ "factoryReset": "Сброс до заводских настроек", "fans": "Вентиляторы", "processors": "Процессоры", + "memory": "Модули памяти", + "motherboard": "Материнская плата", "firmware": "Встроенное ПО", "inventory": "Перечень оборудования и LED", "kvm": "KVM", diff --git a/src/main.js b/src/main.js index 949baaed..8585f897 100644 --- a/src/main.js +++ b/src/main.js @@ -41,6 +41,8 @@ import { import Vuelidate from 'vuelidate'; import i18n from './i18n'; import { format } from 'date-fns-tz'; +import HighchartsVue from 'highcharts-vue'; +import VueRandomColor from 'vue-randomcolor'; // Filters Vue.filter('shortTimeZone', function (value) { @@ -128,6 +130,8 @@ Vue.use(TabsPlugin); Vue.use(ToastPlugin); Vue.use(TooltipPlugin); Vue.use(Vuelidate); +Vue.use(HighchartsVue); +Vue.use(VueRandomColor); new Vue({ router, diff --git a/src/store/index.js b/src/store/index.js index 41eba75f..fa857b3a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,7 +19,8 @@ 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 MotherboardStore from './modules/_sila/HardwareStatus/MotherboardStore'; import ChassisStore from './modules/HardwareStatus/ChassisStore'; import BmcStore from './modules/HardwareStatus/BmcStore'; import ProcessorStore from './modules/HardwareStatus/ProcessorStore'; @@ -60,6 +61,7 @@ export default new Vuex.Store({ system: SystemStore, memory: MemoryStore, fan: FanStore, + motherboard: MotherboardStore, chassis: ChassisStore, bmc: BmcStore, processors: ProcessorStore, diff --git a/src/store/modules/HardwareStatus/MemoryStore.js b/src/store/modules/HardwareStatus/MemoryStore.js index fd8f0a91..9d79ad10 100644 --- a/src/store/modules/HardwareStatus/MemoryStore.js +++ b/src/store/modules/HardwareStatus/MemoryStore.js @@ -52,8 +52,20 @@ const MemoryStore = { }; }); }, + + setMemoryDynamic: (state, data) => { + state.dimms = data; + }, }, actions: { + async getMemoryDynamic({ commit }) { + return await api + .get('/redfish/v1/TelemetryService/MetricReports/hour_data&dimm_temp') + .then(({ data: { MetricValues = [] } }) => + commit('setMemoryDynamic', MetricValues) + ) + .catch((error) => console.log(error)); + }, async getDimms({ commit }) { return await api .get('/redfish/v1/Systems/system/Memory') 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/store/modules/_sila/HardwareStatus/FanStore.js b/src/store/modules/_sila/HardwareStatus/FanStore.js index 1399710b..a7647f3d 100644 --- a/src/store/modules/_sila/HardwareStatus/FanStore.js +++ b/src/store/modules/_sila/HardwareStatus/FanStore.js @@ -39,8 +39,20 @@ const FanStore = { }; }); }, + + setFansDynamic: (state, data) => { + state.fans = data; + }, }, actions: { + async getFansDynamic({ commit }) { + return await api + .get('/redfish/v1/TelemetryService/MetricReports/hour_data&fans') + .then(({ data: { MetricValues = [] } }) => + commit('setFansDynamic', MetricValues) + ) + .catch((error) => console.log(error)); + }, async getFanInfo({ commit }) { return await api .get('/redfish/v1/Chassis/chassis/Thermal') diff --git a/src/store/modules/_sila/HardwareStatus/MotherboardStore.js b/src/store/modules/_sila/HardwareStatus/MotherboardStore.js new file mode 100644 index 00000000..93d655f9 --- /dev/null +++ b/src/store/modules/_sila/HardwareStatus/MotherboardStore.js @@ -0,0 +1,28 @@ +import api from '@/store/api'; + +const MotherboardStore = { + namespaced: true, + state: { + motherboard: [], + }, + getters: { + motherboard: (state) => state.motherboard, + }, + mutations: { + setMotherboardDynamic: (state, data) => { + state.motherboard = data; + }, + }, + actions: { + async getMotherboardDynamic({ commit }) { + return await api + .get('/redfish/v1/TelemetryService/MetricReports/hour_data&other_temp') + .then(({ data: { MetricValues = [] } }) => + commit('setMotherboardDynamic', MetricValues) + ) + .catch((error) => console.log(error)); + }, + }, +}; + +export default MotherboardStore; diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue new file mode 100644 index 00000000..22374fa7 --- /dev/null +++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue @@ -0,0 +1,51 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.dynamicInformation')" /> + + <chart + type="fans" + :data="filteredSensors" + :warning="fanSpeedWarninig" + :shutdown="fanSpeedShutdown" + ></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, Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + data() { + return { + activeFilters: [], + fanSpeedWarninig: 2450, + fanSpeedShutdown: 3150, + }; + }, + + computed: { + allSensors() { + let sensors = this.$store.getters['fan/fans']; + return sensors; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('fan/getFansDynamic').finally(() => { + this.endLoader(); + }); + }, +}; +</script> diff --git a/src/views/_sila/Fans/Dynamic/index.js b/src/views/_sila/Fans/Dynamic/index.js new file mode 100644 index 00000000..a3dadd5a --- /dev/null +++ b/src/views/_sila/Fans/Dynamic/index.js @@ -0,0 +1,2 @@ +import FansDynamicPage from './FansDynamicPage.vue'; +export default FansDynamicPage; diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue index 311ea8fe..3ce9079e 100644 --- a/src/views/_sila/Fans/Static/FansStaticPage.vue +++ b/src/views/_sila/Fans/Static/FansStaticPage.vue @@ -5,6 +5,7 @@ <b-table responsive="md" show-empty + hover :items="fans" :busy="isBusy" :fields="fields" diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue new file mode 100644 index 00000000..21e18fe1 --- /dev/null +++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue @@ -0,0 +1,53 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.dynamicInformation')" /> + + <chart + type="memory" + :data="filteredSensors" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + ></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, Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + data() { + return { + activeFilters: [], + temperatureWarning: 72, + temperatureNonNormal: 44, + temperatureCriticalStart: 55, + }; + }, + + computed: { + allSensors() { + let sensors = this.$store.getters['memory/dimms']; + return sensors; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('memory/getMemoryDynamic').finally(() => { + this.endLoader(); + }); + }, +}; +</script> diff --git a/src/views/_sila/Memory/Dynamic/index.js b/src/views/_sila/Memory/Dynamic/index.js new file mode 100644 index 00000000..b840772c --- /dev/null +++ b/src/views/_sila/Memory/Dynamic/index.js @@ -0,0 +1,2 @@ +import MemoryDynamicPage from './MemoryDynamicPage.vue'; +export default MemoryDynamicPage; diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue new file mode 100644 index 00000000..b4d13f3f --- /dev/null +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue @@ -0,0 +1,53 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.dynamicInformation')" /> + + <chart + type="motherboard" + :data="filteredSensors" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + ></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, Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + data() { + return { + activeFilters: [], + temperatureWarning: 72, + temperatureNonNormal: 44, + temperatureCriticalStart: 55, + }; + }, + + computed: { + allSensors() { + let sensors = this.$store.getters['motherboard/motherboard']; + return sensors; + }, + + filteredSensors() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('motherboard/getMotherboardDynamic').finally(() => { + this.endLoader(); + }); + }, +}; +</script> diff --git a/src/views/_sila/Motherboard/Dynamic/index.js b/src/views/_sila/Motherboard/Dynamic/index.js new file mode 100644 index 00000000..bd155997 --- /dev/null +++ b/src/views/_sila/Motherboard/Dynamic/index.js @@ -0,0 +1,2 @@ +import MotherboardDynamicPage from './MotherboardDynamicPage.vue'; +export default MotherboardDynamicPage; diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 000928cf..6f30576a 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -1,20 +1,208 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.dynamicInformation')" /> + <collapse id="collapse_1" title="Температра" style="margin-top: -2rem"> + <template #image> + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + </template> + <page-section> + <b-row class="align-items-end pt-2"> + <b-col sm="12" md="6" lg="3"> + <b-form-group label="Не штатный режим"> + <b-form-input> </b-form-input> + </b-form-group> + </b-col> + <b-col sm="12" md="6" lg="3"> + <b-form-group label="Критический режим"> + <b-form-input> </b-form-input> + </b-form-group> + </b-col> + <b-col sm="12" md="6" lg="3"> + <b-form-group label="Значение предупреждения"> + <b-form-input> </b-form-input> + </b-form-group> + </b-col> + <b-col sm="12" md="6" lg="3"> + <b-button variant="primary"> + {{ 'Сохранить' }} + </b-button> + </b-col> + </b-row> + <chart + type="processors" + :data="filteredSensors" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + ></chart> + <b-table + 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 class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> </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 LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; export default { - components: { PageTitle }, - mixins: [DataFormatterMixin, LoadingBarMixin], + components: { PageTitle, Collapse, PageSection, Chart }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { - return {}; + return { + activeFilters: [], + temperatureWarning: 72, + temperatureNonNormal: 44, + temperatureCriticalStart: 55, + 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' }, + }, + ], + }; + }, + + 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.allSensors?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('processors/getProcessorsDynamic').finally(() => { + this.endLoader(); + }); }, }; </script> |
