add power for processor

7 files changed, 229 insertions, 18 deletions

diff --git a/src/assets/images/_sila/collapsed/power.svg b/src/assets/images/_sila/collapsed/power.svg
new file mode 100644
index 00000000..84acf641
--- /dev/null
+++ b/src/assets/images/_sila/collapsed/power.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.5 14H4.02205L4.77627 9.65234H7.15277C10.5183 9.65234 12.9232 7.76563 13.4142 4.84668C13.9123 1.96191 12.2188 0 8.9387 0H2.91919L0.5 14ZM5.23876 6.98633L5.97875 2.72754H7.71487C9.30157 2.72754 9.98464 3.54102 9.77118 4.84668C9.55061 6.13867 8.57582 6.98633 6.96777 6.98633H5.23876Z" fill="#E11717"/>
+</svg>
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index 4a3694bd..d5076d77 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -4,6 +4,7 @@
       v-b-toggle="id"
       variant="collapse"
       class="d-flex flex-nowrap justify-content-start"
+      @click="onClick"
     >
       <slot name="image"></slot>
       {{ title }}
@@ -31,8 +32,15 @@ export default {
   },
   data() {
     return {
+      opened: false,
       iconChevronUp: iconChevronUp,
     };
   },
+  methods: {
+    onClick() {
+      this.opened = !this.opened;
+      this.$emit('opened', this.opened);
+    },
+  },
 };
 </script>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 7494318f..c19c756f 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -836,6 +836,7 @@
   },
   "pageProcessors": {
     "temperature": "Temperature Display",
+    "power": "Power consumption indicators",
     "labels": {
       "notNormal": "Not regular",
       "critical": "Critical",
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 6c5bff0b..88d4cc88 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -854,19 +854,27 @@
   },
   "pageProcessors": {
     "temperature": "Показатели температуры",
+    "power": "Показатели потребляемой мощности",
     "labels": {
       "notNormal": "Не штатный режим",
       "critical": "Критический режим",
-      "warning": "Значение предупреждения"
+      "warning": "Значение предупреждения",
+      "shutdown": "Значение отказа"
     },
     "table": {
-      "name": "Имя модуля",
-      "currentTemperature": "Текущее, С°",
-      "middleTemperature": "Среднее, С°",
-      "minTemperature": "Минимальное, С°",
-      "minDate": "Дата минимального",
-      "maxTemperature": "Максимальное, С°",
-      "maxDate": "Дата максимального"
+      "temperature": {
+        "name": "Имя модуля",
+        "currentTemperature": "Текущее, С°",
+        "middleTemperature": "Среднее, С°",
+        "minTemperature": "Минимальное, С°",
+        "minDate": "Дата минимального",
+        "maxTemperature": "Максимальное, С°",
+        "maxDate": "Дата максимального"
+      },
+      "power": {
+        "name": "Имя модуля",
+        "current": "Текущее, Вт"
+      }
     }
   },
   "pageMemory": {
diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js
index a28cd00c..5d014ab9 100644
--- a/src/store/modules/HardwareStatus/ProcessorStore.js
+++ b/src/store/modules/HardwareStatus/ProcessorStore.js
@@ -5,9 +5,11 @@ const ProcessorStore = {
   namespaced: true,
   state: {
     processors: [],
+    cpuPower: [],
   },
   getters: {
     processors: (state) => state.processors,
+    cpuPower: (state) => state.cpuPower,
   },
   mutations: {
     setProcessorsInfo: (state, data) => {
@@ -63,21 +65,37 @@ const ProcessorStore = {
     setProcessorsDynamic: (state, data) => {
       state.processors = data;
     },
+    setCpuPowerDynamic: (state, data) => {
+      state.cpuPower = data;
+    },
   },
   actions: {
-    async getProcessorsDynamicHour({ commit }) {
+    async getCpuPowerDynamic({ commit }, { lastHour }) {
+      let url = null;
+      if (lastHour) {
+        url =
+          '/redfish/v1/TelemetryService/MetricReports/hour_data&id=power&period=last_hour';
+      } else {
+        url = '/redfish/v1/TelemetryService/MetricReports/hour_data&id=power';
+      }
       return await api
-        .get(
-          '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp&period=last_hour'
-        )
+        .get(url)
         .then(({ data: { MetricValues = [] } }) =>
-          commit('setProcessorsDynamic', MetricValues)
+          commit('setCpuPowerDynamic', MetricValues)
         )
         .catch((error) => console.log(error));
     },
-    async getProcessorsDynamic({ commit }) {
+    async getCpuTempDynamic({ commit }, { lastHour }) {
+      let url = null;
+      if (lastHour) {
+        url =
+          '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp&period=last_hour';
+      } else {
+        url =
+          '/redfish/v1/TelemetryService/MetricReports/hour_data&id=cpu_temp';
+      }
       return await api
-        .get('/redfish/v1/TelemetryService/MetricReports/hour_data&cpu_temp')
+        .get(url)
         .then(({ data: { MetricValues = [] } }) =>
           commit('setProcessorsDynamic', MetricValues)
         )
diff --git a/src/views/_sila/Processors/Dynamic/Power.vue b/src/views/_sila/Processors/Dynamic/Power.vue
new file mode 100644
index 00000000..4f486f6b
--- /dev/null
+++ b/src/views/_sila/Processors/Dynamic/Power.vue
@@ -0,0 +1,163 @@
+<template>
+  <collapse
+    id="collapse_power"
+    :title="$t('pageProcessors.power')"
+    style="margin-top: 0"
+    @opened="onOpened"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/power.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.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-form-group :label="$t('pageProcessors.labels.shutdown')">
+            <b-form-input v-model="shutdown" 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"
+        :shutdown="shutdown"
+      ></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],
+  data() {
+    return {
+      timeScale: 'hour',
+      warning: 66,
+      shutdown: 88,
+      items: [],
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageProcessors.table.power.name'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pageProcessors.table.power.current'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    allSensors() {
+      return this.$store.getters['processors/cpuPower'];
+    },
+
+    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();
+      }
+    },
+    switchTimeScale(period) {
+      this.timeScale = period;
+      this.loadData();
+    },
+
+    loadData() {
+      let payload = null;
+      if (this.timeScale === 'hour') {
+        payload = { lastHour: true };
+      }
+
+      this.startLoader();
+      this.$store
+        .dispatch('processors/getCpuPowerDynamic', payload)
+        .finally(() => {
+          this.endLoader();
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 45ef53f6..24163bcc 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -103,6 +103,8 @@
         </b-table>
       </page-section>
     </collapse>
+
+    <power></power>
   </b-container>
 </template>
 <script>
@@ -117,9 +119,17 @@ import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 import Collapse from '@/components/_sila/Global/Collapse';
 
 import { getItems } from '@/utilities/_sila/metricProperties';
+import Power from './Power';
 
 export default {
-  components: { PageTitle, Collapse, PageSection, Chart, TableDatePicker },
+  components: {
+    Power,
+    PageTitle,
+    Collapse,
+    PageSection,
+    Chart,
+    TableDatePicker,
+  },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
@@ -215,13 +225,13 @@ export default {
       if (period === 'hour') {
         this.startLoader();
         this.$store
-          .dispatch('processors/getProcessorsDynamicHour')
+          .dispatch('processors/getCpuTempDynamic', { lastHour: true })
           .finally(() => {
             this.endLoader();
           });
       } else {
         this.startLoader();
-        this.$store.dispatch('processors/getProcessorsDynamic').finally(() => {
+        this.$store.dispatch('processors/getCpuTempDynamic').finally(() => {
           this.endLoader();
         });
       }