From 9ac77cb67aa021012aba67f2f25124ab744c339b Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Wed, 27 Jul 2022 10:44:24 +0300
Subject: upd logic for memory

---
 .../_sila/Memory/Dynamic/MemoryDynamicPage.vue     | 190 +--------------------
 src/views/_sila/Memory/Dynamic/MemoryTemp.vue      | 188 ++++++++++++++++++++
 2 files changed, 192 insertions(+), 186 deletions(-)
 create mode 100644 src/views/_sila/Memory/Dynamic/MemoryTemp.vue

(limited to 'src/views/_sila/Memory')

diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index fb9be306..a38d1a48 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -6,214 +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('pageMemory.temperature') }}
-      </b-button>
-      <b-row class="align-items-end p-4">
-        <b-col xs="12" md="6" lg="3" class="pt-2">
-          <b-form-group :label="$t('pageMemory.labels.notNormal')">
-            <b-form-input
-              v-model="temperatureNonNormalInput"
-              type="number"
-              :min="0"
-              :max="temperatureCriticalInput"
-            ></b-form-input>
-          </b-form-group>
-        </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
-          <b-form-group :label="$t('pageMemory.labels.critical')">
-            <b-form-input
-              v-model="temperatureCriticalInput"
-              type="number"
-              :min="temperatureNonNormalInput"
-              :max="temperatureWarningInput"
-            >
-            </b-form-input>
-          </b-form-group>
-        </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
-          <b-form-group :label="$t('pageMemory.labels.warning')">
-            <b-form-input
-              v-model="temperatureWarningInput"
-              type="number"
-              :min="temperatureCriticalInput"
-              :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>
-      <b-col class="pl-4 pr-4">
-        <chart
-          type="memory"
-          :colors="colors"
-          :time-scale="timeScale"
-          :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>
+    <memory-temp :time-scale="timeScale"></memory-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 MemoryTemp from './MemoryTemp';
 
 export default {
-  components: { PageTitle, Chart, TableDatePicker },
+  components: { MemoryTemp, PageTitle, TableDatePicker },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
-      activeFilters: [],
       timeScale: 'hour',
-      temperatureWarning: 72,
-      temperatureWarningInput: 72,
-      temperatureNonNormal: 44,
-      temperatureNonNormalInput: 44,
-      temperatureCriticalStart: 55,
-      temperatureCritical: 55,
-      temperatureCriticalInput: 55,
-      notificationInput: 42,
-      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['memory/dimms'];
-      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('memory/getMemoryDynamicHour').finally(() => {
-          this.endLoader();
-        });
-      } else {
-        this.startLoader();
-        this.$store.dispatch('memory/getMemoryDynamic').finally(() => {
-          this.endLoader();
-        });
-      }
     },
   },
 };
diff --git a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
new file mode 100644
index 00000000..4c6f2c0a
--- /dev/null
+++ b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
@@ -0,0 +1,188 @@
+<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('pageMemory.temperature') }}
+    </b-button>
+    <b-row class="align-items-end p-4">
+      <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-form-group :label="$t('pageMemory.labels.notNormal')">
+          <b-form-input
+            v-model="notNormal"
+            type="number"
+            :min="0"
+            :max="55"
+          ></b-form-input>
+        </b-form-group>
+      </b-col>
+      <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-form-group :label="$t('pageMemory.labels.critical')">
+          <b-form-input v-model="critical" type="number" :min="44" :max="72">
+          </b-form-input>
+        </b-form-group>
+      </b-col>
+      <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-form-group :label="$t('pageMemory.labels.warning')">
+          <b-form-input v-model="warning" type="number" :min="55" :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>
+    <b-col class="pl-4 pr-4">
+      <chart
+        type="memory"
+        :colors="colors"
+        :time-scale="timeScale"
+        :data="filteredSensors"
+        :warning="warning"
+        :not-normal="notNormal"
+        :critical-start="critical"
+      ></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,
+      notNormal: 44,
+      critical: 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'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.filteredSensors);
+    },
+
+    allSensors() {
+      return this.$store.getters['memory/dimms'];
+    },
+
+    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('memory/getMemoryDynamic', payload).finally(() => {
+        this.endLoader();
+      });
+    },
+  },
+};
+</script>
-- 
cgit v1.2.3