clean code for cpu dynamic

5 files changed, 256 insertions, 236 deletions

diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index 8cee2497..e0dfd952 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -50,6 +50,27 @@ export default {
       yMax: null,
       minTickInterval: null,
       plotBands: null,
+      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',
+            },
+          },
+        },
+      ],
     };
   },
   computed: {
@@ -152,27 +173,7 @@ export default {
           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',
-                },
-              },
-            },
-          ],
+          plotLines: this.plotLines,
           plotBands: this.plotBands,
         },
         series: this.metricData.map((item) => ({
@@ -266,6 +267,29 @@ export default {
           this.yMax = 100;
           this.minTickInterval = 25;
           break;
+        case 'power':
+          this.categories = this.setCategories(101, 'Вт');
+          this.yMax = 100;
+          this.minTickInterval = 25;
+          this.plotLines.push({
+            color: '#1A3E5B',
+            dashStyle: 'solid',
+            value: this.shutdown,
+            width: 2,
+            label: {
+              text: 'Пороговое значения отказ',
+              align: 'right',
+              style: {
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontStyle: 'normal',
+                fontWeight: '400',
+                lineHeight: '16px',
+                color: '#0C1C2999',
+              },
+            },
+          });
+          break;
       }
     },
     setCategories(count, desc) {
diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js
index 5d014ab9..ddf9db4a 100644
--- a/src/store/modules/HardwareStatus/ProcessorStore.js
+++ b/src/store/modules/HardwareStatus/ProcessorStore.js
@@ -4,16 +4,16 @@ import i18n from '@/i18n';
 const ProcessorStore = {
   namespaced: true,
   state: {
-    processors: [],
+    cpuTemp: [],
     cpuPower: [],
   },
   getters: {
-    processors: (state) => state.processors,
+    cpuTemp: (state) => state.cpuTemp,
     cpuPower: (state) => state.cpuPower,
   },
   mutations: {
     setProcessorsInfo: (state, data) => {
-      state.processors = data.map((processor) => {
+      state.cpuTemp = data.map((processor) => {
         const {
           Id,
           Status = {},
@@ -63,7 +63,7 @@ const ProcessorStore = {
     },
 
     setProcessorsDynamic: (state, data) => {
-      state.processors = data;
+      state.cpuTemp = data;
     },
     setCpuPowerDynamic: (state, data) => {
       state.cpuPower = data;
diff --git a/src/views/_sila/Processors/Dynamic/Power.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue
index 4f486f6b..dffea20f 100644
--- a/src/views/_sila/Processors/Dynamic/Power.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue
@@ -33,12 +33,12 @@
         </b-col>
       </b-row>
       <chart
-        type="processors"
+        type="power"
         :time-scale="timeScale"
         :data="filteredSensors"
         :colors="colors"
-        :warning="warning"
-        :shutdown="shutdown"
+        :warning="+warning"
+        :shutdown="+shutdown"
       ></chart>
       <b-table
         v-if="items && items.length > 0"
@@ -91,9 +91,14 @@ import { getItems } from '@/utilities/_sila/metricProperties';
 export default {
   components: { PageSection, Chart, Collapse },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
   data() {
     return {
-      timeScale: 'hour',
       warning: 66,
       shutdown: 88,
       items: [],
@@ -140,10 +145,6 @@ export default {
         this.loadData();
       }
     },
-    switchTimeScale(period) {
-      this.timeScale = period;
-      this.loadData();
-    },
 
     loadData() {
       let payload = null;
diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
new file mode 100644
index 00000000..671b3d7b
--- /dev/null
+++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
@@ -0,0 +1,192 @@
+<template>
+  <collapse
+    id="collapse_temp"
+    :title="$t('pageProcessors.temperature')"
+    style="margin-top: 0"
+    @opened="onOpened"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/temperature.svg" />
+    </template>
+    <page-section>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="6" lg="3" class="pt-2">
+          <b-form-group :label="$t('pageProcessors.labels.notNormal')">
+            <b-form-input
+              v-model="notNormal"
+              type="number"
+              :min="0"
+              :max="100"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="3" class="pt-2">
+          <b-form-group :label="$t('pageProcessors.labels.critical')">
+            <b-form-input v-model="critical" type="number" :min="0" :max="100">
+            </b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="3" class="pt-2">
+          <b-form-group :label="$t('pageProcessors.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" lg="3" class="pt-2">
+          <b-button variant="primary" style="height: 35px">
+            {{ 'Сохранить' }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="processors"
+        :time-scale="timeScale"
+        :data="filteredSensors"
+        :colors="colors"
+        :warning="+warning"
+        :not-normal="+notNormal"
+        :critical="+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>
+    </page-section>
+  </collapse>
+</template>
+<script>
+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';
+
+import { getItems } from '@/utilities/_sila/metricProperties';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 72,
+      notNormal: 44,
+      critical: 55,
+      items: [],
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageProcessors.table.name'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pageProcessors.table.currentTemperature'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pageProcessors.table.middleTemperature'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pageProcessors.table.minTemperature'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pageProcessors.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pageProcessors.table.maxTemperature'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pageProcessors.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    allSensors() {
+      return this.$store.getters['processors/cpuTemp'];
+    },
+
+    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);
+    },
+  },
+
+  methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
+    loadData() {
+      let payload = null;
+      if (this.timeScale === 'hour') {
+        payload = { lastHour: true };
+      }
+
+      this.startLoader();
+      this.$store
+        .dispatch('processors/getCpuTempDynamic', payload)
+        .finally(() => {
+          this.endLoader();
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 24163bcc..e2e1505c 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -6,235 +6,38 @@
       :time-scale="timeScale"
       style="margin: -2rem -2rem 0 -2rem"
     />
-    <collapse
-      id="collapse_1"
-      :title="$t('pageProcessors.temperature')"
-      style="margin-top: 0"
-    >
-      <template #image>
-        <img src="@/assets/images/_sila/collapsed/temperature.svg" />
-      </template>
-      <page-section>
-        <b-row class="align-items-end p-2">
-          <b-col xs="12" md="6" lg="3" class="pt-2">
-            <b-form-group :label="$t('pageProcessors.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('pageProcessors.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('pageProcessors.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"
-              @click="updateTemperature"
-            >
-              {{ 'Сохранить' }}
-            </b-button>
-          </b-col>
-        </b-row>
-        <chart
-          type="processors"
-          :time-scale="timeScale"
-          :data="filteredSensors"
-          :colors="colors"
-          :warning="temperatureWarning"
-          :non-normal="temperatureNonNormal"
-          :critical-start="temperatureCritical"
-        ></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>
-      </page-section>
-    </collapse>
-
-    <power></power>
+    <cpu-temp :time-scale="timeScale"></cpu-temp>
+    <cpu-power :time-scale="timeScale"></cpu-power>
   </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 TableDatePicker from '@/components/_sila/Global/TableDatePicker';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
-import Collapse from '@/components/_sila/Global/Collapse';
 
-import { getItems } from '@/utilities/_sila/metricProperties';
-import Power from './Power';
+import CpuPower from './CpuPower';
+import CpuTemp from './CpuTemp';
 
 export default {
   components: {
-    Power,
+    CpuPower,
+    CpuTemp,
     PageTitle,
-    Collapse,
-    PageSection,
-    Chart,
     TableDatePicker,
   },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
-      activeFilters: [],
       timeScale: 'hour',
-      temperatureWarning: 72,
-      temperatureWarningInput: 72,
-      temperatureNonNormal: 44,
-      temperatureNonNormalInput: 44,
-      temperatureCritical: 55,
-      temperatureCriticalInput: 55,
-      frequencyWarning: 660,
-      frequencyWarningInput: 660,
-      powerWarning: 66,
-      powerWarningInput: 66,
-      powerShutdown: 88,
-      powerShutdownInput: 88,
-      notificationInput: 42,
-      fields: [
-        {
-          key: 'name',
-          label: this.$t('pageProcessors.table.name'),
-          thStyle: { width: '25%' },
-        },
-        {
-          key: 'current',
-          label: this.$t('pageProcessors.table.currentTemperature'),
-        },
-        {
-          key: 'middle',
-          label: this.$t('pageProcessors.table.middleTemperature'),
-        },
-        {
-          key: 'min',
-          label: this.$t('pageProcessors.table.minTemperature'),
-        },
-        {
-          key: 'minDate',
-          label: this.$t('pageProcessors.table.minDate'),
-        },
-        {
-          key: 'max',
-          label: this.$t('pageProcessors.table.maxTemperature'),
-        },
-        {
-          key: 'maxDate',
-          label: this.$t('pageProcessors.table.maxDate'),
-        },
-      ],
-      items: [],
     };
   },
 
-  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.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('processors/getCpuTempDynamic', { lastHour: true })
-          .finally(() => {
-            this.endLoader();
-          });
-      } else {
-        this.startLoader();
-        this.$store.dispatch('processors/getCpuTempDynamic').finally(() => {
-          this.endLoader();
-        });
-      }
     },
   },
 };