add tables for dynamic

7 files changed, 285 insertions, 67 deletions

diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index a74c5425..d24aad72 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -14,6 +14,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    colors: {
+      type: Array,
+      default: () => [],
+    },
     type: {
       type: String,
       default: '',
@@ -70,7 +74,7 @@ export default {
         return rv;
       }, {});
 
-      let metricArr = Object.keys(group).map((key) => {
+      let metricArr = Object.keys(group).map((key, index) => {
         let groupTime = group[key].reduce(function (rv, x) {
           (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x);
           return rv;
@@ -91,6 +95,7 @@ export default {
         return {
           name: key,
           data: arr.slice(-60),
+          color: this.colors[index],
         };
       });
 
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 0b91f4f9..b996c8bd 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -830,10 +830,15 @@
   "pageFans": {
     "installedFans": "Установленные вентиляторы",
     "table": {
-      "name": "Имя",
+      "name": "Имя модуля",
       "health": "Состояние",
       "type": "Тип устройства",
-      "currentValue": "Текущая скорость, об/мин"
+      "current": "Текущая",
+      "middle": "Средняя",
+      "min": "Минимальная",
+      "minDate": "Дата минимальной",
+      "max": "Максимальная",
+      "maxDate": "Дата максимальной"
     }
   },
   "pageProcessors": {
@@ -853,6 +858,23 @@
       "maxDate": "Дата максимального"
     }
   },
+  "pageMemory": {
+    "temperature": "Показатели температуры",
+    "labels": {
+      "notNormal": "Не штатный режим",
+      "critical": "Критический режим",
+      "warning": "Значение предупреждения"
+    },
+    "table": {
+      "name": "Имя модуля",
+      "currentTemperature": "Текущее, С°",
+      "middleTemperature": "Среднее, С°",
+      "minTemperature": "Минимальное, С°",
+      "minDate": "Дата минимального",
+      "maxTemperature": "Максимальное, С°",
+      "maxDate": "Дата максимального"
+    }
+  },
   "pageSerialOverLan": {
     "alert": {
       "disconnectedAlertMessage" : "Система должна быть включена для соединения"
diff --git a/src/utilities/_sila/metricProperties.js b/src/utilities/_sila/metricProperties.js
index 5dd58014..abae260f 100644
--- a/src/utilities/_sila/metricProperties.js
+++ b/src/utilities/_sila/metricProperties.js
@@ -26,11 +26,11 @@ export function getItems(data) {
   return Object.keys(group).map((metric) => {
     return {
       name: metric,
-      currentTemperature: group[metric][group[metric].length - 1].MetricValue,
-      middleTemperature: findAverage(group[metric]),
-      minTemperature: findMin(group[metric]),
+      current: group[metric][group[metric].length - 1].MetricValue,
+      middle: findAverage(group[metric]),
+      min: findMin(group[metric]),
       minDate: findDateOfMin(group[metric]),
-      maxTemperature: findMax(group[metric]),
+      max: findMax(group[metric]),
       maxDate: findDateOfMax(group[metric]),
     };
   });
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 22374fa7..37e759bc 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -4,10 +4,46 @@
 
     <chart
       type="fans"
+      :colors="colors"
       :data="filteredSensors"
       :warning="fanSpeedWarninig"
       :shutdown="fanSpeedShutdown"
     ></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-container>
 </template>
 
@@ -18,6 +54,7 @@ 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: { PageTitle, Chart },
@@ -27,6 +64,37 @@ export default {
       activeFilters: [],
       fanSpeedWarninig: 2450,
       fanSpeedShutdown: 3150,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageFans.table.name'),
+        },
+        {
+          key: 'current',
+          label: this.$t('pageFans.table.current'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pageFans.table.middle'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pageFans.table.min'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pageFans.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pageFans.table.max'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pageFans.table.maxDate'),
+        },
+      ],
+      items: [],
     };
   },
 
@@ -39,6 +107,20 @@ export default {
     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() {
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index 21e18fe1..db304d24 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -4,11 +4,46 @@
 
     <chart
       type="memory"
+      :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-container>
 </template>
 
@@ -19,6 +54,7 @@ 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: { PageTitle, Chart },
@@ -29,6 +65,37 @@ export default {
       temperatureWarning: 72,
       temperatureNonNormal: 44,
       temperatureCriticalStart: 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: [],
     };
   },
 
@@ -41,6 +108,20 @@ export default {
     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() {
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index b4d13f3f..e08fab38 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -4,11 +4,46 @@
 
     <chart
       type="motherboard"
+      :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-container>
 </template>
 
@@ -19,6 +54,7 @@ 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: { PageTitle, Chart },
@@ -29,6 +65,37 @@ export default {
       temperatureWarning: 72,
       temperatureNonNormal: 44,
       temperatureCriticalStart: 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: [],
     };
   },
 
@@ -41,6 +108,20 @@ export default {
     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() {
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 54f8e284..fa98e951 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -35,11 +35,13 @@
         <chart
           type="processors"
           :data="filteredSensors"
+          :colors="colors"
           :warning="temperatureWarning"
           :non-normal="temperatureNonNormal"
           :critical-start="temperatureCriticalStart"
         ></chart>
         <b-table
+          v-if="items && items.length > 0"
           responsive="md"
           show-empty
           table-variant="accessory"
@@ -103,15 +105,15 @@ export default {
           label: this.$t('pageProcessors.table.name'),
         },
         {
-          key: 'currentTemperature',
+          key: 'current',
           label: this.$t('pageProcessors.table.currentTemperature'),
         },
         {
-          key: 'middleTemperature',
+          key: 'middle',
           label: this.$t('pageProcessors.table.middleTemperature'),
         },
         {
-          key: 'minTemperature',
+          key: 'min',
           label: this.$t('pageProcessors.table.minTemperature'),
         },
         {
@@ -119,7 +121,7 @@ export default {
           label: this.$t('pageProcessors.table.minDate'),
         },
         {
-          key: 'maxTemperature',
+          key: 'max',
           label: this.$t('pageProcessors.table.maxTemperature'),
         },
         {
@@ -127,62 +129,7 @@ export default {
           label: this.$t('pageProcessors.table.maxDate'),
         },
       ],
-      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' },
-        },
-      ],
+      items: [],
     };
   },