From 1272456ab2cb77f29b27f3839563b09a709cbc06 Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Wed, 13 Jul 2022 15:46:06 +0300
Subject: move sila-dev to _sila

---
 .../Processors/DynamicInfo/FrequencyTable.vue      |  107 ++
 .../_sila/Processors/DynamicInfo/PowerTable.vue    |  126 ++
 .../DynamicInfo/ProcessorsDynamicPage.vue          |  361 +++++
 .../Processors/DynamicInfo/TemperatureTable.vue    |  126 ++
 src/views/_sila/Processors/DynamicInfo/helpers.js  | 1398 ++++++++++++++++++++
 src/views/_sila/Processors/DynamicInfo/index.js    |    2 +
 .../AcceleratorSpecificationTable.vue              |  146 ++
 .../Specification/ProcessorsSpecificationPage.vue  |  117 ++
 .../Specification/ProcessorsSpecificationTable.vue |  251 ++++
 .../_sila/Processors/Specification/helpers.js      |  254 ++++
 src/views/_sila/Processors/Specification/index.js  |    2 +
 11 files changed, 2890 insertions(+)
 create mode 100644 src/views/_sila/Processors/DynamicInfo/FrequencyTable.vue
 create mode 100644 src/views/_sila/Processors/DynamicInfo/PowerTable.vue
 create mode 100644 src/views/_sila/Processors/DynamicInfo/ProcessorsDynamicPage.vue
 create mode 100644 src/views/_sila/Processors/DynamicInfo/TemperatureTable.vue
 create mode 100644 src/views/_sila/Processors/DynamicInfo/helpers.js
 create mode 100644 src/views/_sila/Processors/DynamicInfo/index.js
 create mode 100644 src/views/_sila/Processors/Specification/AcceleratorSpecificationTable.vue
 create mode 100644 src/views/_sila/Processors/Specification/ProcessorsSpecificationPage.vue
 create mode 100644 src/views/_sila/Processors/Specification/ProcessorsSpecificationTable.vue
 create mode 100644 src/views/_sila/Processors/Specification/helpers.js
 create mode 100644 src/views/_sila/Processors/Specification/index.js

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

diff --git a/src/views/_sila/Processors/DynamicInfo/FrequencyTable.vue b/src/views/_sila/Processors/DynamicInfo/FrequencyTable.vue
new file mode 100644
index 00000000..c749905d
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/FrequencyTable.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(1001, 'Hz'),
+            min: 0,
+            max: 1000,
+            title: null,
+            minTickInterval: 250,
+            minorGridLineColor: '#1A3E5B1A',
+            labels: {
+              padding: 4,
+            },
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['frequency'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/_sila/Processors/DynamicInfo/PowerTable.vue b/src/views/_sila/Processors/DynamicInfo/PowerTable.vue
new file mode 100644
index 00000000..4ccb8aac
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/PowerTable.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 66,
+    },
+    shutdown: {
+      type: Number,
+      default: 88,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, this.timeScale),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'Вт'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значения предупреждение',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+              {
+                color: '#1A3E5B',
+                dashStyle: 'solid',
+                value: this.shutdown,
+                width: 2,
+                label: {
+                  text: 'Пороговое значения отказ',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['power'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/_sila/Processors/DynamicInfo/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/DynamicInfo/ProcessorsDynamicPage.vue
new file mode 100644
index 00000000..7e0b16a4
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/ProcessorsDynamicPage.vue
@@ -0,0 +1,361 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title :description="$t('appNavigation.analyticalPanel')" />
+    <div class="notification-time__container">
+      <span class="semi-bold-12px">{{
+        $t('global.ariaLabel.notificationTime')
+      }}</span>
+      <div class="form-control notification-time">
+        <b-form-input
+          v-model="notificationInput"
+          type="number"
+          class="notification-time__input"
+        >
+        </b-form-input>
+        <button class="notification-button">
+          <img
+            class="notification-time__icon"
+            src="@/assets/images/refresh.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <date-switch :switch-time-scale="switchTimeScale" :time-scale="timeScale" />
+    <!-- Temperature Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_1
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/temperature-icon.svg" />
+        <span class="bold-16px">{{ $t('subHeader.temperature') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+        <!-- Temperature Limit Inputs -->
+        <div class="limit-container">
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/non-normal.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.nonNormalMode')
+            }}</span>
+            <b-form-input
+              v-model="temperatureNonNormalInput"
+              type="number"
+              :min="0"
+              :max="temperatureCriticalInput"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/critical.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.criticalMode')
+            }}</span>
+            <b-form-input
+              v-model="temperatureCriticalInput"
+              type="number"
+              :min="temperatureNonNormalInput"
+              :max="temperatureWarningInput"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.temperatureWarning')
+            }}</span>
+            <b-form-input
+              v-model="temperatureWarningInput"
+              type="number"
+              :min="temperatureCriticalInput"
+              :max="100"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button
+            class="save-button"
+            variant="primary"
+            @click="updateTemperature"
+          >
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Temperature Tables -->
+        <temperature-table
+          :time-scale="timeScale"
+          :warning="temperatureWarning"
+          :non-normal="temperatureNonNormal"
+          :critical-start="temperatureCritical"
+        />
+        <accessory-table :records="accessoryData.temperatureTable" />
+      </b-collapse>
+    </div>
+    <!-- Frequency Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_2
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/frequency-icon.svg" />
+        <span class="bold-16px">{{ $t('subHeader.frequency') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.frequencyWarning')
+            }}</span>
+            <b-form-input
+              v-model="frequencyWarningInput"
+              :min="0"
+              :max="1000"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button
+            class="save-button"
+            variant="primary"
+            @click="updateFrequency"
+          >
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Frequency Table -->
+        <frequency-table :time-scale="timeScale" :warning="frequencyWarning" />
+        <accessory-table :records="accessoryData.frequencyTable" />
+        <!-- <frequency-table /> -->
+      </b-collapse>
+    </div>
+    <!-- Power Consumption Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_3
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/power-icon.svg" />
+        <span class="bold-16px">{{ $t('subHeader.powerConsumption') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_3" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              :min="0"
+              :max="100"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              :min="0"
+              :max="100"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Power Consumption Table -->
+        <power-table
+          :time-scale="timeScale"
+          :warning="powerWarning"
+          :shutdown="powerShutdown"
+        />
+        <!-- <power-table /> -->
+        <accessory-table :records="accessoryData.powerTable" />
+      </b-collapse>
+    </div>
+    <!-- <page-section class="bootstrap-table__section"> </page-section> -->
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import FrequencyTable from './FrequencyTable';
+import PowerTable from './PowerTable';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower';
+
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DateSwitch,
+    FrequencyTable,
+    TemperatureTable,
+    PowerTable,
+    AccessoryTable,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
+      temperatureCritical: 55,
+      temperatureCriticalInput: 55,
+      frequencyWarning: 660,
+      frequencyWarningInput: 660,
+      powerWarning: 66,
+      powerWarningInput: 66,
+      powerShutdown: 88,
+      powerShutdownInput: 88,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCritical = +this.temperatureCriticalInput;
+    },
+    updateFrequency() {
+      this.frequencyWarning = +this.frequencyWarningInput;
+    },
+    updatePower() {
+      this.powerWarning = +this.powerWarningInput;
+      this.powerShutdown = +this.powerShutdownInput;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.notification-time__container {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notification-time {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  box-shadow: none;
+  border-radius: 8px;
+  margin: 12px 32px 12px 8px;
+  width: 236px;
+  height: 40px;
+  z-index: 1001;
+}
+
+.notification-time__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notification-time__input {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
+
+.notification-button {
+  border: none;
+  background: none;
+}
+
+.semi-bold-12px {
+  z-index: 1001;
+}
+// temperature limit comtainer
+.limit-container {
+  height: 85px;
+  width: 100%;
+  padding: 0 32px 10px 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.trmperature-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+
+.form-control {
+  height: 36px;
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+
+.frequency-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 288px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+</style>
diff --git a/src/views/_sila/Processors/DynamicInfo/TemperatureTable.vue b/src/views/_sila/Processors/DynamicInfo/TemperatureTable.vue
new file mode 100644
index 00000000..f9c149c3
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/TemperatureTable.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+            plotBands: [
+              {
+                color: '#F0AC0C1A',
+                dashStyle: 'solid',
+                from: this.nonNormal,
+                to: this.criticalStart,
+              },
+              {
+                color: '#FF41411A',
+                dashStyle: 'solid',
+                from: this.criticalStart,
+                to: this.warning,
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/_sila/Processors/DynamicInfo/helpers.js b/src/views/_sila/Processors/DynamicInfo/helpers.js
new file mode 100644
index 00000000..82e23544
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/helpers.js
@@ -0,0 +1,1398 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        10,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        37,
+        10,
+        10,
+        10,
+        10,
+        10,
+        25,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        35,
+        10,
+        10,
+        10,
+        10,
+        10,
+        45,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        50,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        11,
+        11,
+        11,
+        30,
+        11,
+        11,
+        11,
+        11,
+        57,
+        11,
+        11,
+        11,
+        11,
+        25,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        61,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        31,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        21,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        51,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        15,
+        15,
+        15,
+        35,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        25,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        45,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        35,
+        15,
+        15,
+        55,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        21,
+        21,
+        21,
+        51,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        40,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        35,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        53,
+        21,
+        21,
+        30,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        59,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        76,
+        16,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+      ],
+      color: '#139BB9',
+    },
+  ],
+  //////////////////////////////frequency////////////////
+  frequency: [
+    {
+      name: 'Sean',
+      data: [
+        100,
+        100,
+        450,
+        100,
+        100,
+        100,
+        100,
+        137,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        125,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        135,
+        100,
+        100,
+        100,
+        100,
+        100,
+        145,
+        100,
+        100,
+        360,
+        100,
+        100,
+        450,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        150,
+        100,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        120,
+        120,
+        120,
+        140,
+        120,
+        157,
+        120,
+        120,
+        120,
+        210,
+        120,
+        125,
+        120,
+        120,
+        120,
+        350,
+        120,
+        120,
+        120,
+        120,
+        120,
+        590,
+        120,
+        120,
+        120,
+        120,
+        450,
+        120,
+        120,
+        120,
+        120,
+        120,
+        125,
+        120,
+        120,
+        120,
+        120,
+        120,
+        162,
+        120,
+        120,
+        120,
+        120,
+        120,
+        220,
+        120,
+        120,
+        120,
+        120,
+        120,
+        360,
+        120,
+        210,
+        120,
+        200,
+        120,
+        120,
+        120,
+        120,
+        120,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        110,
+        110,
+        110,
+        450,
+        110,
+        110,
+        110,
+        157,
+        110,
+        110,
+        110,
+        110,
+        110,
+        165,
+        110,
+        110,
+        110,
+        110,
+        110,
+        310,
+        110,
+        110,
+        110,
+        590,
+        110,
+        110,
+        175,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        152,
+        110,
+        310,
+        110,
+        110,
+        210,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        360,
+        110,
+        110,
+        110,
+        210,
+        110,
+        110,
+        110,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        221,
+        221,
+        221,
+        251,
+        221,
+        221,
+        221,
+        221,
+        221,
+        590,
+        221,
+        221,
+        421,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        450,
+        221,
+        221,
+        221,
+        221,
+        421,
+        221,
+        235,
+        221,
+        221,
+        221,
+        221,
+        221,
+        421,
+        221,
+        360,
+        221,
+        221,
+        221,
+        210,
+        253,
+        221,
+        221,
+        230,
+        221,
+        221,
+        221,
+        590,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        590,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        590,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        176,
+        176,
+        176,
+        156,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        276,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        210,
+        176,
+        176,
+        176,
+        590,
+        176,
+        176,
+        176,
+        176,
+        176,
+        590,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        570,
+        176,
+        176,
+        176,
+        176,
+        176,
+        770,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+      ],
+      color: '#139BB9',
+    },
+  ],
+  //////////////////////////////power////////////////
+  power: [
+    {
+      name: 'Sean',
+      data: [
+        15,
+        15,
+        45,
+        15,
+        65,
+        15,
+        75,
+        15,
+        15,
+        15,
+        55,
+        15,
+        25,
+        15,
+        45,
+        15,
+        55,
+        15,
+        75,
+        15,
+        35,
+        15,
+        55,
+        15,
+        75,
+        15,
+        85,
+        15,
+        15,
+        45,
+        15,
+        15,
+        45,
+        15,
+        45,
+        15,
+        15,
+        65,
+        15,
+        45,
+        15,
+        25,
+        15,
+        45,
+        15,
+        65,
+        15,
+        35,
+        35,
+        35,
+        15,
+        55,
+        15,
+        15,
+        35,
+        15,
+        25,
+        15,
+        35,
+        15,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        62,
+        12,
+        72,
+        12,
+        12,
+        12,
+        42,
+        12,
+        12,
+        12,
+        52,
+        12,
+        22,
+        12,
+        42,
+        12,
+        52,
+        12,
+        72,
+        12,
+        52,
+        12,
+        62,
+        12,
+        72,
+        12,
+        82,
+        12,
+        12,
+        42,
+        12,
+        12,
+        52,
+        12,
+        42,
+        12,
+        12,
+        62,
+        12,
+        42,
+        12,
+        22,
+        12,
+        42,
+        12,
+        62,
+        12,
+        12,
+        32,
+        12,
+        62,
+        12,
+        52,
+        12,
+        32,
+        12,
+        22,
+        12,
+        32,
+        12,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        64,
+        14,
+        74,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        54,
+        14,
+        24,
+        14,
+        44,
+        14,
+        54,
+        14,
+        74,
+        14,
+        54,
+        14,
+        64,
+        14,
+        74,
+        14,
+        84,
+        14,
+        14,
+        44,
+        14,
+        14,
+        54,
+        14,
+        44,
+        14,
+        14,
+        64,
+        14,
+        44,
+        14,
+        24,
+        14,
+        44,
+        14,
+        64,
+        14,
+        14,
+        14,
+        54,
+        14,
+        54,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        64,
+        14,
+        64,
+        14,
+        34,
+        14,
+        54,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        64,
+        14,
+        74,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        74,
+        14,
+        54,
+        14,
+        64,
+        14,
+        74,
+        14,
+        84,
+        14,
+        94,
+        14,
+        54,
+        4,
+        54,
+        14,
+        44,
+        14,
+        44,
+        64,
+        14,
+        44,
+        14,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        16,
+        46,
+        16,
+        26,
+        16,
+        46,
+        16,
+        66,
+        16,
+        16,
+        16,
+        36,
+        16,
+        56,
+        16,
+        16,
+        36,
+        16,
+        26,
+        16,
+        36,
+        16,
+        66,
+        16,
+        76,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        56,
+        16,
+        26,
+        16,
+        46,
+        16,
+        56,
+        16,
+        76,
+        16,
+        56,
+        16,
+        66,
+        16,
+        76,
+        16,
+        86,
+        16,
+        96,
+        16,
+        16,
+        16,
+        56,
+        16,
+        46,
+        16,
+        46,
+        16,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        49,
+        19,
+        19,
+        69,
+        19,
+        49,
+        19,
+        29,
+        19,
+        49,
+        19,
+        69,
+        19,
+        39,
+        39,
+        39,
+        19,
+        59,
+        19,
+        19,
+        39,
+        19,
+        29,
+        19,
+        39,
+        19,
+        69,
+        19,
+        79,
+        19,
+        19,
+        19,
+        49,
+        19,
+        19,
+        19,
+        59,
+        19,
+        29,
+        19,
+        49,
+        19,
+        59,
+        19,
+        79,
+        19,
+        59,
+        19,
+        69,
+        19,
+        79,
+        19,
+        89,
+        19,
+        99,
+        19,
+        19,
+        69,
+        59,
+        19,
+      ],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${String(i).padStart(2, '0')}`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
+  return arr;
+};
+
+export const AccessoryData = {
+  temperatureTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentTemperature: 19,
+        middleTemperature: 40,
+        minTemperature: 31,
+        minDate: { time: '15:15', date: '11.11.2021' },
+        maxTemperature: 88,
+        maxDate: { time: '10:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Процессор 2',
+        currentTemperature: 29,
+        middleTemperature: 40,
+        minTemperature: 20,
+        minDate: { time: '15:45', date: '11.11.2021' },
+        maxTemperature: 76,
+        maxDate: { time: '16:59', date: '16.11.2021' },
+      },
+      {
+        name: 'Процессор 3',
+        currentTemperature: 48,
+        middleTemperature: 46,
+        minTemperature: 31,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 69,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Процессор 4',
+        currentTemperature: 48,
+        middleTemperature: 45,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 75,
+        maxDate: { time: '11:26', date: '16.11.2021' },
+      },
+      {
+        name: 'Процессор 5',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 30,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '17.11.2021' },
+      },
+      {
+        name: 'Процессор 6',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+    ],
+  },
+  frequencyTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentFrequency',
+        label: 'Текущее, Hz',
+      },
+      {
+        key: 'baseFrequency',
+        label: 'Базовое, Hz',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentFrequency: 600,
+        baseFrequency: 400,
+      },
+      {
+        name: 'Процессор 2',
+        currentFrequency: 500,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 3',
+        currentFrequency: 500,
+        baseFrequency: 450,
+      },
+      {
+        name: 'Процессор 4',
+        currentFrequency: 500,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 5',
+        currentFrequency: 600,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 6',
+        currentFrequency: 500,
+        baseFrequency: 400,
+      },
+    ],
+  },
+  powerTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentPower',
+        label: 'Текущее, Вт',
+        label2: '',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentPower: 91,
+      },
+      {
+        name: 'Процессор 2',
+        currentPower: 77,
+      },
+      {
+        name: 'Процессор 3',
+        currentPower: 76,
+      },
+      {
+        name: 'Процессор 4',
+        currentPower: 74,
+      },
+      {
+        name: 'Процессор 5',
+        currentPower: 73,
+      },
+      {
+        name: 'Процессор 6',
+        currentPower: 71,
+      },
+    ],
+  },
+};
diff --git a/src/views/_sila/Processors/DynamicInfo/index.js b/src/views/_sila/Processors/DynamicInfo/index.js
new file mode 100644
index 00000000..121c0316
--- /dev/null
+++ b/src/views/_sila/Processors/DynamicInfo/index.js
@@ -0,0 +1,2 @@
+import ProcessorsDynamicPage from './ProcessorsDynamicPage.vue';
+export default ProcessorsDynamicPage;
diff --git a/src/views/_sila/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/_sila/Processors/Specification/AcceleratorSpecificationTable.vue
new file mode 100644
index 00000000..53b31d8b
--- /dev/null
+++ b/src/views/_sila/Processors/Specification/AcceleratorSpecificationTable.vue
@@ -0,0 +1,146 @@
+<template>
+  <b-table
+    responsive="md"
+    show-empty
+    no-border-collapse
+    :items="accelerators"
+    :fields="fields"
+  >
+    <template #cell(expandRow)="">
+      <b-button
+        variant="link"
+        data-test-id="hardwareStatus-button-expandAccelerators"
+        :title="expandRowLabel"
+      >
+        <icon-chevron />
+        <span class="sr-only">{{ expandRowLabel }}</span>
+      </b-button>
+    </template>
+    <template #cell(status)="{ value }">
+      <div v-if="value" class="fans-table-col-first__cell">
+        <img class="status__img" src="@/assets/images/status/on.svg" />
+        <span>
+          {{ $t('global.status.inWork') }}
+        </span>
+      </div>
+      <div v-else class="fans-table-col-first__cell">
+        <img class="status__img" src="@/assets/images/_sila/status/off.svg" />
+        <span>
+          {{ $t('global.status.outWorking') }}
+        </span>
+      </div>
+    </template>
+  </b-table>
+</template>
+
+<script>
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+import { Accelerators } from './helpers';
+export default {
+  components: { IconChevron },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      isAddersСolon: false,
+      accelerators: Accelerators,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          thStyle: { width: '3%' },
+          sortable: false,
+        },
+        {
+          key: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thStyle: { width: '15%' },
+        },
+        {
+          key: 'name',
+          label: 'Имя',
+          formatter: this.dataFormatter,
+          thStyle: { width: '10%' },
+        },
+        {
+          key: 'slot_number',
+          label: '№ Слота',
+          formatter: this.dataFormatter,
+          thStyle: { width: '8%' },
+        },
+        {
+          key: 'board_number',
+          label: '№ Платы',
+          formatter: this.dataFormatter,
+          thStyle: { width: '8%' },
+        },
+        {
+          key: 'serial_number',
+          label: 'Серийный номер',
+          formatter: this.dataFormatter,
+          thStyle: { width: '15%' },
+        },
+        {
+          key: 'frequency',
+          label: '№ Детали',
+          formatter: this.dataFormatter,
+          thStyle: { width: '8%' },
+        },
+        {
+          key: 'cores',
+          label: 'Версия прошивки',
+          formatter: this.dataFormatter,
+          thStyle: { width: '10%' },
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+  flex-wrap: nowrap;
+}
+.fans-table-col-first__cell {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.status__img {
+  margin-right: 7px;
+}
+
+.bold-16px {
+  margin: 24px 0 0 2rem;
+}
+
+.bold-12px__caps {
+  color: $text-secondary;
+}
+
+.attrib-names {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  color: $text-secondary !important;
+  font-weight: 600;
+}
+
+.custom-switch {
+  margin: 0;
+}
+
+.btn-link {
+  width: 30px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/_sila/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/_sila/Processors/Specification/ProcessorsSpecificationPage.vue
new file mode 100644
index 00000000..50362ac2
--- /dev/null
+++ b/src/views/_sila/Processors/Specification/ProcessorsSpecificationPage.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-container
+    id="page-processors"
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title :description="$t('appNavigation.specification')" />
+    <page-section class="bootstrap-table__section">
+      <span class="bold-16px">{{
+        $t('pageInventory.installedProcessors')
+      }}</span>
+      <!-- Processors Specification Table -->
+      <div class="capability-info">
+        <b-row>
+          <b-col class="mt-0 mb-2 p-0 bold-12px__caps">
+            {{ $t('pageInventory.table.processorCapabilityInfo') }}
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <dd class="attrib-names">
+                {{ $t('global.table.attributes') }}
+              </dd>
+              <dd>{{ 'Многопоточность' }}</dd>
+              <dd>{{ 'Виртуализация' }}</dd>
+              <dd>{{ 'Турбо режим' }}</dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd>
+              <dd
+                v-for="item in processors[0].presence_status"
+                :key="item.presence_status"
+              >
+                {{ item }}
+              </dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <!-- Status state -->
+              <dd class="attrib-names">{{ 'Включен' }}</dd>
+              <dd>
+                <b-form-checkbox
+                  v-model="processors[0].statuses.multithreading"
+                  switch
+                >
+                </b-form-checkbox>
+              </dd>
+              <dd>
+                <b-form-checkbox
+                  v-model="processors[0].statuses.virtualization"
+                  switch
+                >
+                </b-form-checkbox>
+              </dd>
+              <dd>
+                <b-form-checkbox v-model="processors[0].statuses.turbo" switch>
+                </b-form-checkbox>
+              </dd>
+            </dl>
+          </b-col>
+        </b-row>
+      </div>
+      <processors-specification-table />
+      <span class="bold-16px">{{
+        $t('pageInventory.installedAccelerator')
+      }}</span>
+      <!-- Accelerators Specification Table -->
+      <accelerator-specification-table />
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import { processors } from './helpers';
+
+import ProcessorsSpecificationTable from './ProcessorsSpecificationTable';
+import AcceleratorSpecificationTable from './AcceleratorSpecificationTable';
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    ProcessorsSpecificationTable,
+    AcceleratorSpecificationTable,
+  },
+  data() {
+    return {
+      processors,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.capability-info {
+  padding-left: 1rem;
+}
+
+.attrib-names {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  color: $text-secondary !important;
+  font-weight: 600;
+}
+
+.custom-switch {
+  margin: 0;
+}
+</style>
diff --git a/src/views/_sila/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/_sila/Processors/Specification/ProcessorsSpecificationTable.vue
new file mode 100644
index 00000000..c872eefc
--- /dev/null
+++ b/src/views/_sila/Processors/Specification/ProcessorsSpecificationTable.vue
@@ -0,0 +1,251 @@
+<template>
+  <b-table
+    sort-icon-left
+    no-sort-reset
+    :sort-desc="true"
+    responsive="md"
+    show-empty
+    no-border-collapse
+    :items="processors"
+    :fields="fields"
+    :empty-text="$t('global.table.emptyMessage')"
+    :empty-filtered-text="$t('global.table.emptySearchMessage')"
+  >
+    <template #cell(expandRow)="row">
+      <b-button
+        variant="link"
+        data-test-id="hardwareStatus-button-expandProcessors"
+        :title="expandRowLabel"
+        class="btn-icon-only"
+        @click="toggleRowDetails(row)"
+      >
+        <icon-chevron />
+        <span class="sr-only">{{ expandRowLabel }}</span>
+      </b-button>
+    </template>
+    <template #cell(status)="{ value }">
+      <div v-if="value" class="fans-table-col-first__cell">
+        <img class="status__img" src="@/assets/images/status/on.svg" />
+        <span>
+          {{ $t('global.status.inWork') }}
+        </span>
+      </div>
+      <div v-else class="fans-table-col-first__cell">
+        <img class="status__img" src="@/assets/images/_sila/status/off.svg" />
+        <span>
+          {{ $t('global.status.outWorking') }}
+        </span>
+      </div>
+    </template>
+
+    <template #row-details="{ index }">
+      <b-container fluid>
+        <!-- ProcessorCapabilityInfo -->
+        <b-row>
+          <b-col class="mt-3 mb-2 p-0 bold-12px__caps">
+            {{ $t('pageInventory.table.processorCacheInfo') }}
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <!-- Attributes Names -->
+              <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd>
+              <dd>{{ 'Уровень кеша' }}</dd>
+              <dd>{{ 'Максимальный объем' }}</dd>
+              <dd>{{ 'Установленный объем' }}</dd>
+              <dd>{{ 'Тип кэша' }}</dd>
+              <dd>{{ 'Локализация' }}</dd>
+              <dd>{{ 'Политика записи' }}</dd>
+              <dd>{{ 'Ассоциативность' }}</dd>
+              <dd>{{ 'Тип исправления ошибки' }}</dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <!-- Status КЭШ-1 -->
+              <dd class="attrib-names">{{ 'КЭШ-1' }}</dd>
+              <dd v-for="item in processors[index].cache_1" :key="item.cache_1">
+                {{ dataFormatter(item) }}
+              </dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <!-- Status state -->
+              <dd class="attrib-names">{{ 'КЭШ-2' }}</dd>
+              <dd v-for="item in processors[index].cache_2" :key="item.cache_2">
+                {{ dataFormatter(item) }}
+              </dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="3" xl="3">
+            <dl class="light-12px">
+              <dd class="attrib-names">{{ 'КЭШ-3' }}</dd>
+              <dd v-for="item in processors[index].cache_3" :key="item.cache_3">
+                {{ dataFormatter(item) }}
+              </dd>
+            </dl>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="mt-3 mb-2 p-0 bold-12px__caps">
+            {{ $t('pageInventory.table.SupportedTechnologies') }}
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="mt-2 p-0" sm="6" xl="6">
+            <dl class="light-12px">
+              <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd>
+              <dd></dd>
+              <dd>{{ 'processor' }}</dd>
+              <dd>{{ 'vendor_id' }}</dd>
+              <dd>{{ 'cpu family' }}</dd>
+              <dd>{{ 'model' }}</dd>
+              <dd>{{ 'model name' }}</dd>
+              <dd>{{ 'stepping' }}</dd>
+              <dd>{{ 'microcode' }}</dd>
+              <dd>{{ 'cpu MHz' }}</dd>
+              <dd>{{ 'cache size' }}</dd>
+              <dd>{{ 'physical id' }}</dd>
+              <dd>{{ 'siblings' }}</dd>
+              <dd>{{ 'core id' }}</dd>
+              <dd>{{ 'cpu cores' }}</dd>
+              <dd>{{ 'apicid' }}</dd>
+              <dd>{{ 'initial apicid' }}</dd>
+              <dd>{{ 'fpu' }}</dd>
+              <dd>{{ 'fpu_exception' }}</dd>
+              <dd>{{ 'cpuid level' }}</dd>
+              <dd>{{ 'wp' }}</dd>
+              <dd>{{ 'flags' }}</dd>
+              <dd>{{ 'bugs' }}</dd>
+            </dl>
+          </b-col>
+          <b-col class="mt-2 p-0" sm="6" xl="6">
+            <dl class="light-12px">
+              <dd class="attrib-names">{{ $t('global.table.value') }}</dd>
+              <dd
+                v-for="item in processors[index].description"
+                :key="item.description"
+              >
+                {{ dataFormatter(item) }}
+              </dd>
+            </dl>
+          </b-col>
+        </b-row>
+      </b-container>
+    </template>
+  </b-table>
+</template>
+
+<script>
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+import { processors } from './helpers';
+export default {
+  components: { IconChevron },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      isAddersСolon: false,
+      processors,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          thStyle: { width: '3%' },
+          sortable: false,
+        },
+        {
+          key: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thStyle: { width: '17%' },
+        },
+        {
+          key: 'name',
+          label: 'Имя',
+          formatter: this.dataFormatter,
+          thStyle: { width: '15%' },
+        },
+        {
+          key: 'model',
+          label: 'Модель',
+          formatter: this.dataFormatter,
+          thStyle: { width: '12%' },
+        },
+        {
+          key: 'serialNumber',
+          label: 'Серийный номер',
+          formatter: this.dataFormatter,
+          thStyle: { width: '15%' },
+        },
+        {
+          key: 'version',
+          label: 'Версия',
+          formatter: this.dataFormatter,
+          thStyle: { width: '10%' },
+        },
+        {
+          key: 'frequency',
+          label: 'Частота',
+          formatter: this.dataFormatter,
+          thStyle: { width: '10%' },
+        },
+        {
+          key: 'cores',
+          label: 'Ядра',
+          formatter: this.dataFormatter,
+          thStyle: { width: '10%' },
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+  flex-wrap: nowrap;
+}
+.fans-table-col-first__cell {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.status__img {
+  margin-right: 7px;
+}
+
+.bold-16px {
+  margin: 24px 0 0 2rem;
+}
+
+.bold-12px__caps {
+  color: $text-secondary;
+}
+
+.attrib-names {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  color: $text-secondary !important;
+  font-weight: 600;
+}
+
+.custom-switch {
+  margin: 0;
+}
+
+.btn-link {
+  width: 30px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/_sila/Processors/Specification/helpers.js b/src/views/_sila/Processors/Specification/helpers.js
new file mode 100644
index 00000000..6227e4b8
--- /dev/null
+++ b/src/views/_sila/Processors/Specification/helpers.js
@@ -0,0 +1,254 @@
+export const processors = [
+  {
+    expandRow: false,
+    status: true,
+    name: 'Процессор №1',
+    model: 'Core i5',
+    serialNumber: '789578456698',
+    version: 'v3.1.5',
+    frequency: '2.4',
+    cores: '4',
+    presence_status: {
+      multithreading: 'Нет',
+      virtualization: 'Да',
+      turbo: 'Да',
+    },
+    statuses: {
+      multithreading: false,
+      virtualization: true,
+      turbo: true,
+    },
+    cache_1: {
+      level: 'L1',
+      max_value: '1MB',
+      current_value: '1MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Parity',
+    },
+    cache_2: {
+      level: 'L2',
+      max_value: '32MB',
+      current_value: '32MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    cache_3: {
+      level: 'L3',
+      max_value: '64MB',
+      current_value: '64MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    description: {
+      processor: '79',
+      vendor_id: 'GenuineIntel',
+      cpu_family: '6',
+      model: '85',
+      model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz',
+      stepping: '7',
+      microcode: '0x5002f00',
+      cpu_MHz: '2955.939',
+      cache_size: '36608 KB',
+      physical_id: '1',
+      siblings: '40',
+      core_id: '29',
+      cpu_cores: '20',
+      apicid: '123',
+      initial_apicid: '123',
+      fpu: 'yes',
+      fpu_exception: 'yes',
+      cpuid_level: '22',
+      wp: 'yes',
+      flags: 'fpu, vme, de, pse, tsc, pat, pse36....',
+      bugs: 'spectre_v1 spectre_v2, spec_store_bypass',
+    },
+  },
+  {
+    expandRow: false,
+    status: true,
+    name: 'Процессор №2',
+    model: 'Core i3',
+    serialNumber: '425546788976',
+    version: 'v2.1.5',
+    frequency: '1.4',
+    cores: '2',
+    presence_status: {
+      multithreading: 'Нет',
+      virtualization: 'Да',
+      turbo: 'Да',
+    },
+    statuses: {
+      multithreading: false,
+      virtualization: true,
+      turbo: true,
+    },
+    cache_1: {
+      level: 'L1',
+      max_value: '1MB',
+      current_value: '1MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Parity',
+    },
+    cache_2: {
+      level: 'L2',
+      max_value: '32MB',
+      current_value: '32MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    cache_3: {
+      level: 'L3',
+      max_value: '64MB',
+      current_value: '64MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    description: {
+      processor: '79',
+      vendor_id: 'GenuineIntel',
+      cpu_family: '6',
+      model: '85',
+      model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz',
+      stepping: '7',
+      microcode: '0x5002f00',
+      cpu_MHz: '2955.939',
+      cache_size: '36608 KB',
+      physical_id: '1',
+      siblings: '40',
+      core_id: '29',
+      cpu_cores: '20',
+      apicid: '123',
+      initial_apicid: '123',
+      fpu: 'yes',
+      fpu_exception: 'yes',
+      cpuid_level: '22',
+      wp: 'yes',
+      flags: 'fpu, vme, de, pse, tsc, pat, pse36....',
+      bugs: 'spectre_v1 spectre_v2, spec_store_bypass',
+    },
+  },
+  {
+    expandRow: false,
+    status: false,
+    name: 'Процессор №3',
+    model: 'Core i7',
+    serialNumber: '454555556698',
+    version: 'v6.1.5',
+    frequency: '3.4',
+    cores: '6',
+    presence_status: {
+      multithreading: 'Нет',
+      virtualization: 'Да',
+      turbo: 'Да',
+    },
+    statuses: {
+      multithreading: false,
+      virtualization: true,
+      turbo: true,
+    },
+    cache_1: {
+      level: 'L1',
+      max_value: '1MB',
+      current_value: '1MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Parity',
+    },
+    cache_2: {
+      level: 'L2',
+      max_value: '32MB',
+      current_value: '32MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    cache_3: {
+      level: 'L3',
+      max_value: '64MB',
+      current_value: '64MB',
+      cache_type: 'Unified',
+      localization: 'Internal',
+      politics: 'Write Back',
+      associativity: '8-Way Set-Associativity',
+      fix_type: 'Multiple-bit ECC',
+    },
+    description: {
+      processor: '79',
+      vendor_id: 'GenuineIntel',
+      cpu_family: '6',
+      model: '85',
+      model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz',
+      stepping: '7',
+      microcode: '0x5002f00',
+      cpu_MHz: '2955.939',
+      cache_size: '36608 KB',
+      physical_id: '1',
+      siblings: '40',
+      core_id: '29',
+      cpu_cores: '20',
+      apicid: '123',
+      initial_apicid: '123',
+      fpu: 'yes',
+      fpu_exception: 'yes',
+      cpuid_level: '22',
+      wp: 'yes',
+      flags: 'fpu, vme, de, pse, tsc, pat, pse36....',
+      bugs: 'spectre_v1 spectre_v2, spec_store_bypass',
+    },
+  },
+];
+
+export const Accelerators = [
+  {
+    expandRow: false,
+    status: true,
+    name: 'Процессор №1',
+    slot_number: '789578456698',
+    board_number: '789578456698',
+    serial_number: '425546788976',
+    frequency: '2213',
+    cores: '4',
+  },
+  {
+    expandRow: false,
+    status: true,
+    name: 'Процессор №2',
+    slot_number: '425546788976',
+    board_number: '425546788976',
+    serial_number: '425546788976',
+    frequency: '1332',
+    cores: '2',
+  },
+  {
+    expandRow: false,
+    status: false,
+    name: 'Процессор №3',
+    slot_number: '454555556698',
+    board_number: '454555556698',
+    serial_number: '425546788976',
+    frequency: '3213',
+    cores: '6',
+  },
+];
diff --git a/src/views/_sila/Processors/Specification/index.js b/src/views/_sila/Processors/Specification/index.js
new file mode 100644
index 00000000..93bbbf10
--- /dev/null
+++ b/src/views/_sila/Processors/Specification/index.js
@@ -0,0 +1,2 @@
+import ProcessorsSpecificationPage from './ProcessorsSpecificationPage.vue';
+export default ProcessorsSpecificationPage;
-- 
cgit v1.2.3