From ff01827eca7c0cdc7c1b4242483b766035587ad6 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 16 Aug 2022 12:55:15 +0300
Subject: add second table to Fans, fix dynamic pages layouts

---
 src/assets/styles/bmc/_sila/_section-divider.scss  |  11 +-
 src/assets/styles/bmc/_sila/_tables.scss           |  14 ++
 src/components/_sila/Global/Chart.vue              |   4 +-
 src/locales/en-US.json                             |   1 +
 src/locales/ru-RU.json                             |   1 +
 src/utilities/_sila/psuFilter.js                   |   7 +
 src/views/_sila/Fans/Dynamic/FanSpeed.vue          | 229 -------------------
 src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue       | 246 ++++++++++++++++++++
 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue    | 248 +++++++++++++++++++++
 src/views/_sila/Fans/Dynamic/FansDynamicPage.vue   |   8 +-
 src/views/_sila/Memory/Dynamic/MemoryTemp.vue      |  12 +-
 .../_sila/Motherboard/Dynamic/MotherboardTemp.vue  |   8 +-
 src/views/_sila/Power/Dynamic/CurrentInput.vue     |   8 +-
 src/views/_sila/Power/Dynamic/CurrentOutput.vue    |   8 +-
 src/views/_sila/Power/Dynamic/PowerInput.vue       |   8 +-
 src/views/_sila/Power/Dynamic/PowerOutput.vue      |   8 +-
 src/views/_sila/Power/Dynamic/PowerTemp.vue        |  10 +-
 src/views/_sila/Power/Dynamic/VoltInput.vue        |   8 +-
 src/views/_sila/Power/Dynamic/VoltOutput.vue       |   8 +-
 src/views/_sila/Processors/Dynamic/CpuPower.vue    |  10 +-
 src/views/_sila/Processors/Dynamic/CpuTemp.vue     |  12 +-
 21 files changed, 580 insertions(+), 289 deletions(-)
 delete mode 100644 src/views/_sila/Fans/Dynamic/FanSpeed.vue
 create mode 100644 src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
 create mode 100644 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue

diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 91300393..9ccdcf49 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -47,18 +47,19 @@
 }
 
 .limit-container {
-  margin: 0rem -1.95rem 0rem -1.95rem;
+  width: auto;
+  margin: 0rem -1.95rem;
   padding-left: 1rem;
   padding-bottom: 1rem;
       @include media-breakpoint-down(md) {
         padding-left: 0rem;
-        padding-right: 1rem;
-        margin-left: -0.95rem;
+        margin: 0rem -0.95rem;
     }
   .form-group {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
     .col-form-label {
-       white-space: nowrap;
+      padding-left: 0.7rem;
+      white-space: nowrap;
     }
  }
 }
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index 969bf105..7cab44f3 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -164,6 +164,20 @@
       border-radius: 0px;
     }
   }
+  @include media-breakpoint-down(lg) {
+    @include media-breakpoint-up(md) {
+      overflow: auto;
+      .table {
+        border-right: 1px solid $gray-30;
+        border-radius: $border-radius;
+      }
+      .table-accessory,
+      .table-full {
+        border-right: none;
+        border-radius: 0px;
+      }
+    }
+  }
 }
 // style for table contained in <b-card> components
 #page-network {
diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index d6ea2492..ac8fc325 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -210,8 +210,8 @@ export default {
     setOptions() {
       switch (this.type) {
         case 'fans':
-          this.categories = this.setSpeed(4000);
-          this.minRange = 4000;
+          this.categories = this.setSpeed(10000);
+          this.minRange = 10000;
           this.minTickInterval = 1000;
           this.plotLines.push({
             color: '#1A3E5B',
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 2c30c3c8..768b499c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -853,6 +853,7 @@
   },
   "pageFans": {
     "installedFans": "Installed Fans",
+    "speedSystem": "Speed indicators, system",
     "speed": "Speed indicators",
     "table": {
       "name": "Name",
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 2ec832fe..13e6fcac 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -854,6 +854,7 @@
   "pageFans": {
     "installedFans": "Установленные вентиляторы",
     "speed": "Показатели скорости",
+    "speedSystem": "Показатели скорости, системная плата",
     "table": {
       "name": "Имя модуля",
       "health": "Состояние",
diff --git a/src/utilities/_sila/psuFilter.js b/src/utilities/_sila/psuFilter.js
index c75a7b02..1738e378 100644
--- a/src/utilities/_sila/psuFilter.js
+++ b/src/utilities/_sila/psuFilter.js
@@ -4,3 +4,10 @@ export function psuFilter(items, type) {
     return el.Sensor.toLowerCase().indexOf(type.toLowerCase()) > -1;
   });
 }
+
+export function fanFilter(items, type) {
+  if (!items || !items.length) return [];
+  return items.filter(function (el) {
+    return el.Sensor.toLowerCase().includes(type.toLowerCase());
+  });
+}
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeed.vue b/src/views/_sila/Fans/Dynamic/FanSpeed.vue
deleted file mode 100644
index 6d76afe1..00000000
--- a/src/views/_sila/Fans/Dynamic/FanSpeed.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <div>
-    <b-col class="d-flex flex-nowrap align-items-center page-divider">
-      <img src="@/assets/images/_sila/collapsed/fan.svg" />
-      {{ $t('pageFans.speed') }}
-    </b-col>
-    <!--    <b-row class="align-items-end limit-container">
-      <b-col xs="12" sm="6" md="4" class="pt-2">
-        <b-form-group :label="$t('pageFans.labels.warning')">
-          <b-form-input v-model="warning" type="number" :min="0" :max="3150">
-          </b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col xs="12" sm="6" md="4" class="pt-2">
-        <b-form-group :label="$t('pageFans.labels.shutdown')">
-          <b-form-input
-            v-model="shutdown"
-            :min="warning"
-            :max="4000"
-            type="number"
-          ></b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col xs="12" sm="6" md="4" class="pt-2">
-        <b-button variant="primary" style="height: 35px">
-          {{ $t('global.action.save') }}
-        </b-button>
-      </b-col>
-    </b-row>-->
-    <chart
-      type="fans"
-      :colors="colors"
-      :time-scale="timeScale"
-      :data="filteredSensors"
-      :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')"
-      :bisy="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>
-      <template #cell(pwm)="{ value }">
-        <span>
-          {{ `${value}%` }}
-        </span>
-      </template>
-    </b-table>
-  </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: 2450,
-      shutdown: 3150,
-      isBusy: true,
-      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: 'pwm',
-          label: this.$t('pageFans.table.pwm'),
-        },
-        {
-          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'),
-        },
-      ],
-    };
-  },
-
-  computed: {
-    items() {
-      const allArr = getItems(this.filteredSensors);
-
-      let pwmArr = allArr.filter((item) => {
-        return item.name.toLowerCase().includes('pwm');
-      });
-
-      let cpuArr = allArr.filter((item) => {
-        return !item.name.toLowerCase().includes('pwm');
-      });
-
-      return cpuArr.map((cpu) => {
-        let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name))
-          .middle;
-        return {
-          pwm,
-          ...cpu,
-        };
-      });
-    },
-
-    allSensors() {
-      return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
-    },
-
-    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: {
-    getPwmByCpu(cpu) {
-      switch (cpu) {
-        case 'System_Fan_1':
-          return 'Pwm_1';
-        case 'System_Fan_2':
-          return 'Pwm_5';
-        case 'System_Fan_3':
-          return 'Pwm_6';
-        case 'CPU1_Fan':
-          return 'Pwm_7';
-        case 'CPU2_Fan':
-          return 'Pwm_8';
-        default:
-          return null;
-      }
-    },
-
-    onOpened(state) {
-      if (state) {
-        this.loadData();
-      }
-    },
-
-    loadData() {
-      let payload = { lastHour: false };
-      if (this.timeScale === 'hour') {
-        payload = { lastHour: true };
-      }
-
-      this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
-        this.endLoader();
-        this.isBusy = false;
-      });
-    },
-  },
-};
-</script>
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
new file mode 100644
index 00000000..10f6c9c5
--- /dev/null
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
@@ -0,0 +1,246 @@
+<template>
+  <collapse
+    id="collapse_FansCpu"
+    :title="$t('pageFans.speed')"
+    @opened="onOpened"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/fan.svg" />
+    </template>
+    <page-section>
+      <!-- <b-row class="align-items-end limit-container">
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.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" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              :min="warning"
+              :max="10000"
+              type="number"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-button variant="primary" style="height: 35px">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row> -->
+      <chart
+        type="fans"
+        :colors="colors"
+        :time-scale="timeScale"
+        :data="filteredForChart"
+        :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')"
+        :bisy="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>
+        <template #cell(pwm)="{ value }">
+          <span>
+            {{ `${value}%` }}
+          </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 { fanFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 7500,
+      shutdown: 8500,
+      isBusy: true,
+      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: 'pwm',
+          label: this.$t('pageFans.table.pwm'),
+        },
+        {
+          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'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      const allArr = getItems(this.filteredSensors);
+
+      let pwmArr = allArr.filter((item) => {
+        return item.name.toLowerCase().includes('pwm');
+      });
+
+      let cpuArr = allArr.filter((item) => {
+        return !item.name.toLowerCase().includes('pwm');
+      });
+
+      return cpuArr.map((cpu) => {
+        let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name))
+          .middle;
+        return {
+          pwm,
+          ...cpu,
+        };
+      });
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['fan/fansLastHour']
+        : this.$store.getters['fan/fans'];
+    },
+
+    preFiltered() {
+      return fanFilter(this.allSensors, 'CPU').concat(
+        fanFilter(this.allSensors, 'pwm')
+      );
+    },
+
+    filteredForChart() {
+      return fanFilter(this.allSensors, 'CPU');
+    },
+
+    filteredSensors() {
+      return this.getFilteredTableData(this.preFiltered, this.activeFilters);
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+
+  created() {
+    this.loadData();
+  },
+
+  methods: {
+    getPwmByCpu(cpu) {
+      switch (cpu) {
+        case 'CPU1_Fan':
+          return 'Pwm_7';
+        case 'CPU2_Fan':
+          return 'Pwm_8';
+        default:
+          return null;
+      }
+    },
+
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
+    loadData() {
+      let payload = { lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload = { lastHour: true };
+      }
+
+      this.startLoader();
+      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+        this.endLoader();
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
new file mode 100644
index 00000000..06f4dd14
--- /dev/null
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
@@ -0,0 +1,248 @@
+<template>
+  <collapse
+    id="collapse_FansSystem"
+    :title="$t('pageFans.speedSystem')"
+    @opened="onOpened"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/fan.svg" />
+    </template>
+    <page-section>
+      <!-- <b-row class="align-items-end limit-container">
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.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" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              :min="warning"
+              :max="10000"
+              type="number"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-button variant="primary" style="height: 35px">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row> -->
+      <chart
+        type="fans"
+        :colors="colors"
+        :time-scale="timeScale"
+        :data="filteredForChart"
+        :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')"
+        :bisy="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>
+        <template #cell(pwm)="{ value }">
+          <span>
+            {{ `${value}%` }}
+          </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 { fanFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 8900,
+      shutdown: 9500,
+      isBusy: true,
+      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: 'pwm',
+          label: this.$t('pageFans.table.pwm'),
+        },
+        {
+          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'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      const allArr = getItems(this.filteredSensors);
+
+      let pwmArr = allArr.filter((item) => {
+        return item.name.toLowerCase().includes('pwm');
+      });
+
+      let cpuArr = allArr.filter((item) => {
+        return !item.name.toLowerCase().includes('pwm');
+      });
+
+      return cpuArr.map((cpu) => {
+        let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name))
+          .middle;
+        return {
+          pwm,
+          ...cpu,
+        };
+      });
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['fan/fansLastHour']
+        : this.$store.getters['fan/fans'];
+    },
+
+    preFiltered() {
+      return fanFilter(this.allSensors, 'System').concat(
+        fanFilter(this.allSensors, 'pwm')
+      );
+    },
+
+    filteredForChart() {
+      return fanFilter(this.allSensors, 'System');
+    },
+
+    filteredSensors() {
+      return this.getFilteredTableData(this.preFiltered, this.activeFilters);
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+
+  created() {
+    this.loadData();
+  },
+
+  methods: {
+    getPwmByCpu(cpu) {
+      switch (cpu) {
+        case 'System_Fan_1':
+          return 'Pwm_1';
+        case 'System_Fan_2':
+          return 'Pwm_5';
+        case 'System_Fan_3':
+          return 'Pwm_6';
+        default:
+          return null;
+      }
+    },
+
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
+    loadData() {
+      let payload = { lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload = { lastHour: true };
+      }
+
+      this.startLoader();
+      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+        this.endLoader();
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index dda22dfb..3b5b0030 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -2,7 +2,8 @@
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
     <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
-    <fan-speed :time-scale="timeScale"></fan-speed>
+    <fan-speed-cpu :time-scale="timeScale"></fan-speed-cpu>
+    <fan-speed-system :time-scale="timeScale"></fan-speed-system>
   </b-container>
 </template>
 
@@ -14,10 +15,11 @@ import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
-import FanSpeed from './FanSpeed';
+import FanSpeedCpu from './FanSpeedCpu';
+import FanSpeedSystem from './FanSpeedSystem';
 
 export default {
-  components: { FanSpeed, PageTitle, TableDatePicker },
+  components: { FanSpeedCpu, FanSpeedSystem, PageTitle, TableDatePicker },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
diff --git a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
index 7d143beb..3505f827 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
@@ -4,8 +4,8 @@
       <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       {{ $t('pageMemory.temperature') }}
     </b-col>
-    <!--    <b-row class="align-items-end limit-container">
-      <b-col xs="12" md="6" lg="3" class="pt-2">
+    <!-- <b-row class="align-items-end limit-container">
+      <b-col xs="12" sm="6" xl="3" class="pt-4">
         <b-form-group :label="$t('pageMemory.labels.notNormal')">
           <b-form-input
             v-model="notNormal"
@@ -15,7 +15,7 @@
           ></b-form-input>
         </b-form-group>
       </b-col>
-      <b-col xs="12" md="6" lg="3" class="pt-2">
+      <b-col xs="12" sm="6" xl="3" class="pt-4">
         <b-form-group :label="$t('pageMemory.labels.critical')">
           <b-form-input
             v-model="critical"
@@ -26,7 +26,7 @@
           </b-form-input>
         </b-form-group>
       </b-col>
-      <b-col xs="12" md="6" lg="3" class="pt-2">
+      <b-col xs="12" sm="6" xl="3" class="pt-4">
         <b-form-group :label="$t('pageMemory.labels.warning')">
           <b-form-input
             v-model="warning"
@@ -37,12 +37,12 @@
           </b-form-input>
         </b-form-group>
       </b-col>
-      <b-col xs="12" md="6" lg="3" class="pt-2">
+      <b-col xs="12" sm="6" xl="3" class="pt-4">
         <b-button variant="primary" style="height: 35px">
           {{ $t('global.action.save') }}
         </b-button>
       </b-col>
-    </b-row>-->
+    </b-row> -->
     <chart
       type="memory"
       :colors="colors"
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
index 9f8d41cb..f01c4280 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
@@ -5,8 +5,8 @@
       {{ $t('pageMotherboard.temperature') }}
     </b-col>
 
-    <!--    <b-row class="align-items-end limit-container">
-      <b-col xs="12" sm="3" class="pt-4">
+    <!-- <b-row class="align-items-end limit-container">
+      <b-col xs="12" sm="6" xl="3" class="pt-4">
         <b-form-group :label="$t('pageMotherboard.labels.warning')">
           <b-form-input
             v-model="warning"
@@ -16,12 +16,12 @@
           ></b-form-input>
         </b-form-group>
       </b-col>
-      <b-col xs="12" sm="6" class="pt-2">
+      <b-col xs="12" sm="6" class="pt-4">
         <b-button variant="primary" style="height: 35px">
           {{ $t('global.action.save') }}
         </b-button>
       </b-col>
-    </b-row>-->
+    </b-row> -->
     <chart
       type="motherboard"
       :time-scale="timeScale"
diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue
index f3db0c75..099f0536 100644
--- a/src/views/_sila/Power/Dynamic/CurrentInput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
index bd353eb7..10782974 100644
--- a/src/views/_sila/Power/Dynamic/CurrentOutput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue
index ee634731..2214ae63 100644
--- a/src/views/_sila/Power/Dynamic/PowerInput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerInput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue
index 6580eb9e..5bc058f3 100644
--- a/src/views/_sila/Power/Dynamic/PowerOutput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue
index a58c7eaf..e0d4d154 100644
--- a/src/views/_sila/Power/Dynamic/PowerTemp.vue
+++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.notNormal')">
             <b-form-input
               v-model="notNormal"
@@ -19,19 +19,19 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <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-col xs="12" sm="6" xl="3" class="pt-4">
           <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-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue
index e6071830..4d76b484 100644
--- a/src/views/_sila/Power/Dynamic/VoltInput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltInput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue
index 3f3eecb0..91767f70 100644
--- a/src/views/_sila/Power/Dynamic/VoltOutput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,7 +19,7 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="4" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pagePowerSup.labels.shutdown')">
             <b-form-input
               v-model="shutdown"
@@ -30,7 +30,7 @@
             </b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
diff --git a/src/views/_sila/Processors/Dynamic/CpuPower.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue
index 732ddd09..fe359456 100644
--- a/src/views/_sila/Processors/Dynamic/CpuPower.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pageProcessors.labels.warning')">
             <b-form-input
               v-model="warning"
@@ -19,18 +19,18 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <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-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
         </b-col>
-      </b-row>-->
+      </b-row> -->
       <chart
         type="power"
         :time-scale="timeScale"
diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
index ebe3e22a..60813f9b 100644
--- a/src/views/_sila/Processors/Dynamic/CpuTemp.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
@@ -8,8 +8,8 @@
       <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-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <b-form-group :label="$t('pageProcessors.labels.notNormal')">
             <b-form-input
               v-model="notNormal"
@@ -19,24 +19,24 @@
             ></b-form-input>
           </b-form-group>
         </b-col>
-        <b-col xs="12" md="6" lg="3" class="pt-2">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
           <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-col xs="12" sm="6" xl="3" class="pt-4">
           <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-col xs="12" sm="6" xl="3" class="pt-4">
           <b-button variant="primary" style="height: 35px">
             {{ $t('global.action.save') }}
           </b-button>
         </b-col>
-      </b-row>-->
+      </b-row> -->
       <chart
         type="processors"
         :time-scale="timeScale"
-- 
cgit v1.2.3