From c94e39d946b187a39f21307c8cf42e1d1b3c3d8a Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Fri, 5 Aug 2022 16:56:18 +0300
Subject: add power supply page

---
 src/views/_sila/Power/Dynamic/CurrentInput.vue     | 185 ++++++++++++++++++++
 src/views/_sila/Power/Dynamic/CurrentOutput.vue    | 170 +++++++++++++++++++
 src/views/_sila/Power/Dynamic/PowerDynamicPage.vue |  87 ++++++++++
 src/views/_sila/Power/Dynamic/PowerInput.vue       | 185 ++++++++++++++++++++
 src/views/_sila/Power/Dynamic/PowerOutput.vue      | 169 +++++++++++++++++++
 src/views/_sila/Power/Dynamic/PowerTemp.vue        | 186 +++++++++++++++++++++
 src/views/_sila/Power/Dynamic/VoltInput.vue        | 184 ++++++++++++++++++++
 src/views/_sila/Power/Dynamic/VoltOutput.vue       | 169 +++++++++++++++++++
 src/views/_sila/Power/Dynamic/index.js             |   2 +
 9 files changed, 1337 insertions(+)
 create mode 100644 src/views/_sila/Power/Dynamic/CurrentInput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/CurrentOutput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
 create mode 100644 src/views/_sila/Power/Dynamic/PowerInput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/PowerOutput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/PowerTemp.vue
 create mode 100644 src/views/_sila/Power/Dynamic/VoltInput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/VoltOutput.vue
 create mode 100644 src/views/_sila/Power/Dynamic/index.js

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

diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue
new file mode 100644
index 00000000..ad1a1608
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue
@@ -0,0 +1,185 @@
+<template>
+  <collapse
+    id="collapse_InputCur"
+    default-open
+    :title="$t('pagePowerSup.InputCurrent')"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/current.svg" />
+    </template>
+    <page-section>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :max="10"
+            >
+            </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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="current"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        float
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 5,
+      shutdown: 6,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentCurrent'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minCurrent'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxCurrent'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+  computed: {
+    items() {
+      return getItems(this.filteredItems, 3);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Input');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuCurrentLastHour']
+        : this.$store.getters['powerSupply/psuCurrent'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let payload = { metricsName: 'psu_current', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-current');
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
new file mode 100644
index 00000000..a27a5a57
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
@@ -0,0 +1,170 @@
+<template>
+  <collapse
+    id="collapse_OutputCur"
+    default-open
+    :title="$t('pagePowerSup.OutputCurrent')"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/current.svg" />
+    </template>
+    <page-section>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :max="10"
+            >
+            </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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="current"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        float
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 7,
+      shutdown: 8,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentCurrent'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minCurrent'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxCurrent'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.filteredItems);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Output');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuCurrentLastHour']
+        : this.$store.getters['powerSupply/psuCurrent'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    items() {
+      this.items.length ? (this.isBusy = false) : (this.isBusy = true);
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
new file mode 100644
index 00000000..45e7eaf9
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
@@ -0,0 +1,87 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.dynamicInformation')" />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <power-temp :time-scale="timeScale"></power-temp>
+    <volt-input :time-scale="timeScale"></volt-input>
+    <volt-output :time-scale="timeScale"></volt-output>
+    <power-input :time-scale="timeScale"></power-input>
+    <power-output :time-scale="timeScale"></power-output>
+    <current-input :time-scale="timeScale"></current-input>
+    <current-output :time-scale="timeScale"></current-output>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+
+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 PowerTemp from './PowerTemp';
+import VoltInput from './VoltInput';
+import VoltOutput from './VoltOutput';
+import PowerInput from './PowerInput';
+import PowerOutput from './PowerOutput';
+import CurrentInput from './CurrentInput';
+import CurrentOutput from './CurrentOutput';
+
+export default {
+  components: {
+    PowerTemp,
+    VoltInput,
+    VoltOutput,
+    PowerInput,
+    PowerOutput,
+    CurrentInput,
+    CurrentOutput,
+    PageTitle,
+    TableDatePicker,
+  },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  data() {
+    return {
+      timeScale: 'hour',
+    };
+  },
+
+  created() {
+    this.startProgress();
+  },
+  methods: {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+      resetButton.dispatchEvent(new Event('click'));
+    },
+
+    onChangePeriod(period) {
+      this.timeScale = period;
+      this.startProgress();
+      this.resetZoom();
+    },
+    startProgress() {
+      this.startLoader();
+      const psuTemp = new Promise((resolve) => {
+        this.$root.$on('psu-temp', () => resolve());
+      });
+      const psuVolt = new Promise((resolve) => {
+        this.$root.$on('psu-volt', () => resolve());
+      });
+      const psuPower = new Promise((resolve) => {
+        this.$root.$on('psu-power', () => resolve());
+      });
+      const psuCurrent = new Promise((resolve) => {
+        this.$root.$on('psu-current', () => resolve());
+      });
+
+      Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() =>
+        this.endLoader()
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue
new file mode 100644
index 00000000..1b633ecb
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/PowerInput.vue
@@ -0,0 +1,185 @@
+<template>
+  <collapse
+    id="collapse_InputPower"
+    default-open
+    :title="$t('pagePowerSup.InputPower')"
+  >
+    <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="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="power"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 72,
+      shutdown: 95,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentPower'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minPower'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxPower'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.filteredItems);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Input');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuPowerLastHour']
+        : this.$store.getters['powerSupply/psuPower'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let payload = { metricsName: 'psu_power', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-power');
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue
new file mode 100644
index 00000000..6402801e
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue
@@ -0,0 +1,169 @@
+<template>
+  <collapse
+    id="collapse_OutputPower"
+    default-open
+    :title="$t('pagePowerSup.OutputPower')"
+  >
+    <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="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="power"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 72,
+      shutdown: 95,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentPower'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minPower'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxPower'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.filteredItems);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Output');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuPowerLastHour']
+        : this.$store.getters['powerSupply/psuPower'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    items() {
+      this.items.length ? (this.isBusy = false) : (this.isBusy = true);
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue
new file mode 100644
index 00000000..8ad31451
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue
@@ -0,0 +1,186 @@
+<template>
+  <collapse
+    id="collapse_psuTempp"
+    default-open
+    :title="$t('pagePowerSup.temperature')"
+  >
+    <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('pagePowerSup.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('pagePowerSup.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('pagePowerSup.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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="processors"
+        :time-scale="timeScale"
+        :data="allSensors"
+        :colors="colors"
+        :warning="+warning"
+        :not-normal="+notNormal"
+        :critical="+critical"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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 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, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 72,
+      notNormal: 44,
+      critical: 55,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentTemperature'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pagePowerSup.table.middleTemperature'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minTemperature'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxTemperature'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.allSensors);
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuTempLastHour']
+        : this.$store.getters['powerSupply/psuTemp'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let payload = { metricsName: 'psu_temp', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-temp');
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue
new file mode 100644
index 00000000..5c39a889
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/VoltInput.vue
@@ -0,0 +1,184 @@
+<template>
+  <collapse
+    id="collapse_InputVolt"
+    default-open
+    :title="$t('pagePowerSup.InputVolt')"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/voltage.svg" />
+    </template>
+    <page-section>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :max="250"
+            >
+            </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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="voltage-input"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 235,
+      shutdown: 245,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentVolt'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minVolt'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxVolt'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+  computed: {
+    items() {
+      return getItems(this.filteredItems);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Input');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuVoltageLastHour']
+        : this.$store.getters['powerSupply/psuVoltage'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let payload = { metricsName: 'psu_voltage', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-volt');
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue
new file mode 100644
index 00000000..191e29fd
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue
@@ -0,0 +1,169 @@
+<template>
+  <collapse
+    id="collapse_OutputVolt"
+    default-open
+    :title="$t('pagePowerSup.OutputVolt')"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/voltage.svg" />
+    </template>
+    <page-section>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" lg="4" class="pt-2">
+          <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              type="number"
+              :min="warning"
+              :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">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="voltage-output"
+        :time-scale="timeScale"
+        :data="filteredItems"
+        :colors="colors"
+        :warning="+warning"
+        :shutdown="+shutdown"
+      ></chart>
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :busy="isBusy"
+      >
+        <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';
+import { psuFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 72,
+      shutdown: 95,
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pagePowerSup.table.nameModule'),
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'current',
+          label: this.$t('pagePowerSup.table.currentVolt'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pagePowerSup.table.minVolt'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pagePowerSup.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pagePowerSup.table.maxVolt'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pagePowerSup.table.maxDate'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return getItems(this.filteredItems);
+    },
+
+    filteredItems() {
+      return psuFilter(this.allSensors, 'Output');
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['powerSupply/psuVoltageLastHour']
+        : this.$store.getters['powerSupply/psuVoltage'];
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+  watch: {
+    items() {
+      this.items.length ? (this.isBusy = false) : (this.isBusy = true);
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Dynamic/index.js b/src/views/_sila/Power/Dynamic/index.js
new file mode 100644
index 00000000..c45d5c89
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/index.js
@@ -0,0 +1,2 @@
+import PowerDynamicPage from './PowerDynamicPage.vue';
+export default PowerDynamicPage;
-- 
cgit v1.2.3