From c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 24 May 2022 10:04:19 +0300
Subject: Add global popovers. Add pages: pci, adapters, raid, drivers, virtual
 drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles

---
 .../BMC/Configuration/BMCConfigurationControl.vue  |   6 +-
 .../BMC/Configuration/SettingsImportPopup.vue      |   6 +-
 src/views/BMC/Settings/SettingsPage.vue            | 182 ++++++-
 .../Fans/StaticInformation/FansStaticPage.vue      |   4 +-
 src/views/Login/Login.vue                          |   3 +
 .../Specification/MemoryStaticPage.vue             |  12 +-
 .../MemoryModules/Specification/MemorySwitch.vue   | 112 ----
 .../Specification/PowerStaticPage.vue              |  22 +-
 .../PowerSupplies/Specification/PowerSwitch.vue    | 112 ----
 .../AcceleratorSpecificationTable.vue              |   6 +-
 .../Specification/ProcessorsSpecificationPage.vue  |  77 +++
 .../Specification/ProcessorsSpecificationTable.vue |  61 +--
 src/views/Processors/Specification/helpers.js      | 254 +++++++++
 src/views/Processors/Specification/mock.js         | 254 ---------
 .../SILA/AnalyticalPanel/AnalyticalPanelPage.vue   | 281 +++++++---
 src/views/SILA/AnalyticalPanel/PowerTable.vue      |  82 +++
 .../SILA/AnalyticalPanel/TemperatureTable.vue      | 115 ++++
 src/views/SILA/AnalyticalPanel/helpers.js          | 200 +++++++
 src/views/SILA/EventLogs/EventLogs.vue             |  59 ++-
 .../NetworkAdapters/Dynamic/NetworkDynamicPage.vue | 140 +++++
 .../NetworkAdapters/Dynamic/TemperatureTable.vue   | 112 ++++
 src/views/SILA/NetworkAdapters/Dynamic/helpers.js  | 370 +++++++++++++
 src/views/SILA/NetworkAdapters/Dynamic/index.js    |   1 +
 .../EthernetAdapters/EthernetAdaptersPage.vue      | 434 +++++++++++++++
 .../NetworkAdapters/EthernetAdapters/helpers.js    |  99 ++++
 .../SILA/NetworkAdapters/EthernetAdapters/index.js |   1 +
 .../FcHbaAdapters/FcHbaAdaptersPage.vue            | 231 ++++++++
 .../SILA/NetworkAdapters/FcHbaAdapters/helpers.js  |  42 ++
 .../SILA/NetworkAdapters/FcHbaAdapters/index.js    |   1 +
 src/views/SILA/PciDevices/PciDevicesPage.vue       | 172 ++++++
 src/views/SILA/PciDevices/index.js                 |   1 +
 .../DynamicInfo/DriversDynamicPage.vue             | 209 ++++++++
 .../DynamicInfo/TemperatureTable.vue               | 126 +++++
 .../SILA/PhysicalDrivers/DynamicInfo/helpers.js    | 584 +++++++++++++++++++++
 .../SILA/PhysicalDrivers/DynamicInfo/index.js      |   1 +
 .../StaticInfo/DriversStaticPage.vue               | 149 ++++++
 src/views/SILA/PhysicalDrivers/StaticInfo/index.js |   1 +
 src/views/SILA/RAID/Cache/RAIDCachePage.vue        | 124 +++++
 src/views/SILA/RAID/Cache/index.js                 |   1 +
 .../SILA/RAID/Settings/ActionSettingsPopover.vue   | 131 +++++
 src/views/SILA/RAID/Settings/OptionsPopover.vue    |  87 +++
 src/views/SILA/RAID/Settings/RAIDSettingsPage.vue  | 318 +++++++++++
 src/views/SILA/RAID/Settings/TomeModal.vue         | 179 +++++++
 src/views/SILA/RAID/Settings/helpers.js            |  62 +++
 src/views/SILA/RAID/Settings/index.js              |   1 +
 .../RAID/Specification/RAIDSpecificationPage.vue   | 267 ++++++++++
 src/views/SILA/RAID/Specification/index.js         |   1 +
 .../SILA/VirtualDrivers/VirtualDriversPage.vue     | 138 +++++
 src/views/SILA/VirtualDrivers/index.js             |   1 +
 .../Network/InventoryIPv4Settings.vue              |  76 +--
 .../Network/InventoryIPv6Settings.vue              |   4 -
 .../ServerParametrs/ServereParametrsSection.vue    |  22 -
 52 files changed, 5211 insertions(+), 723 deletions(-)
 delete mode 100644 src/views/MemoryModules/Specification/MemorySwitch.vue
 delete mode 100644 src/views/PowerSupplies/Specification/PowerSwitch.vue
 create mode 100644 src/views/Processors/Specification/helpers.js
 delete mode 100644 src/views/Processors/Specification/mock.js
 create mode 100644 src/views/SILA/AnalyticalPanel/PowerTable.vue
 create mode 100644 src/views/SILA/AnalyticalPanel/TemperatureTable.vue
 create mode 100644 src/views/SILA/AnalyticalPanel/helpers.js
 create mode 100644 src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue
 create mode 100644 src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue
 create mode 100644 src/views/SILA/NetworkAdapters/Dynamic/helpers.js
 create mode 100644 src/views/SILA/NetworkAdapters/Dynamic/index.js
 create mode 100644 src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
 create mode 100644 src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js
 create mode 100644 src/views/SILA/NetworkAdapters/EthernetAdapters/index.js
 create mode 100644 src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
 create mode 100644 src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js
 create mode 100644 src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js
 create mode 100644 src/views/SILA/PciDevices/PciDevicesPage.vue
 create mode 100644 src/views/SILA/PciDevices/index.js
 create mode 100644 src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
 create mode 100644 src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue
 create mode 100644 src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js
 create mode 100644 src/views/SILA/PhysicalDrivers/DynamicInfo/index.js
 create mode 100644 src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
 create mode 100644 src/views/SILA/PhysicalDrivers/StaticInfo/index.js
 create mode 100644 src/views/SILA/RAID/Cache/RAIDCachePage.vue
 create mode 100644 src/views/SILA/RAID/Cache/index.js
 create mode 100644 src/views/SILA/RAID/Settings/ActionSettingsPopover.vue
 create mode 100644 src/views/SILA/RAID/Settings/OptionsPopover.vue
 create mode 100644 src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
 create mode 100644 src/views/SILA/RAID/Settings/TomeModal.vue
 create mode 100644 src/views/SILA/RAID/Settings/helpers.js
 create mode 100644 src/views/SILA/RAID/Settings/index.js
 create mode 100644 src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
 create mode 100644 src/views/SILA/RAID/Specification/index.js
 create mode 100644 src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
 create mode 100644 src/views/SILA/VirtualDrivers/index.js

(limited to 'src/views')

diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue
index 7f3de021..0eb8bfc9 100644
--- a/src/views/BMC/Configuration/BMCConfigurationControl.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue
@@ -19,7 +19,7 @@
         />
         <div>
           <span
-            class="regular-12px underline pointer"
+            class="regular-12px underline"
             @click="redirectNetworkParametrs"
             >{{ $t('BMC.Parametrs') }}</span
           >
@@ -115,8 +115,4 @@ a {
 label {
   padding-top: 5px;
 }
-
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue
index c7309ba3..748518bc 100644
--- a/src/views/BMC/Configuration/SettingsImportPopup.vue
+++ b/src/views/BMC/Configuration/SettingsImportPopup.vue
@@ -3,7 +3,7 @@
     <span
       :id="id"
       ref="button"
-      class="regular-12px underline pointer"
+      class="regular-12px underline"
       variant="primary"
     >
       {{ $t(description) }}
@@ -227,10 +227,6 @@ export default {
   justify-content: center;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .medium-16px {
   display: inline-block;
   height: 45px;
diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue
index c9a0df8d..a5b6cd76 100644
--- a/src/views/BMC/Settings/SettingsPage.vue
+++ b/src/views/BMC/Settings/SettingsPage.vue
@@ -6,7 +6,7 @@
     <page-title />
     <!-- BMC table -->
     <div class="main-container">
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.smnp')
@@ -49,8 +49,8 @@
               $t('global.status.status')
             }}</label>
             <b-form-select
-              v-model="connectionType"
-              :options="connectionTypes"
+              v-model="smnpStatus"
+              :options="smnpStatuses"
               class="select-connection medium-16px"
             />
           </b-form-group>
@@ -83,7 +83,7 @@
           </div>
         </div>
       </div>
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.smnpWarning')
@@ -125,7 +125,79 @@
         </div>
       </div>
 
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
+        <div class="smnp-settings-container">
+          <span class="bold-12px__caps section-label">{{
+            $t('BMC.smtpWarning')
+          }}</span>
+          <div class="table-section">
+            <b-table
+              responsive="md"
+              show-empty
+              class="bootstrap-rounded-table"
+              :items="items2"
+              :fields="fields2"
+            >
+              <template #cell(value)="data">
+                <b-row v-if="data.index === 0">
+                  <b-col>
+                    <span v-if="items2[data.index].value">
+                      {{ $t('global.status.enabled') }}
+                    </span>
+                    <span v-else>
+                      {{ $t('global.status.disabled') }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <b-form-checkbox v-model="items2[data.index].value" switch>
+                    </b-form-checkbox>
+                  </b-col>
+                </b-row>
+                <b-row v-else-if="data.index === 4">
+                  <b-col>
+                    <span>
+                      {{ data.value ? 'Да' : 'Нет' }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <b-button
+                      :id="`popover-choice-${data.index}`"
+                      class="popover-option-ractive"
+                      variant="toogle-popover"
+                    >
+                      <img :is="iconChevron" class="icon-chevron" />
+                    </b-button>
+                    <two-chioce-popover
+                      :id="data.index"
+                      fitst-option="Да"
+                      second-option="Нет"
+                      :chosen-option="chosenOption"
+                      :first-action="setYes"
+                      :second-action="setNo"
+                      placement="leftbottom"
+                    />
+                  </b-col>
+                </b-row>
+                <b-row v-else>
+                  <b-col>
+                    <span>
+                      {{ data.value }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <img
+                      src="@/assets/images/icon-edit.svg"
+                      class="icon-chevron icon-edit"
+                    />
+                  </b-col>
+                </b-row>
+              </template>
+            </b-table>
+          </div>
+        </div>
+      </div>
+
+      <div class="bmc-settings-section last">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.syslogSettings')
@@ -135,8 +207,8 @@
               $t('global.status.status')
             }}</label>
             <b-form-select
-              v-model="connectionType"
-              :options="connectionTypes"
+              v-model="syslogStatus"
+              :options="syslogStatuses"
               class="select-connection medium-16px"
             />
           </b-form-group>
@@ -177,15 +249,17 @@
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
-// import PageSection from '@/components/Global/PageSection';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
 
 export default {
   components: {
     PageTitle,
-    // PageSection,
+    TwoChiocePopover,
   },
   data() {
     return {
+      iconChevron,
       text: '',
       system: '2КА04.02_г17',
       community: 'public',
@@ -193,6 +267,29 @@ export default {
       smnpPort: '161',
       syslogIp: '0.0.0.0',
       syslogPort: '161',
+      chosenOption: 'Да',
+      smnpStatus: true,
+      smnpStatuses: [
+        {
+          value: true,
+          text: 'Включена',
+        },
+        {
+          value: false,
+          text: 'Выключена',
+        },
+      ],
+      syslogStatus: true,
+      syslogStatuses: [
+        {
+          value: true,
+          text: 'Включена',
+        },
+        {
+          value: false,
+          text: 'Выключена',
+        },
+      ],
       fields: [
         {
           key: 'name',
@@ -213,6 +310,26 @@ export default {
           tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
       ],
+      fields2: [
+        {
+          key: 'attributes',
+          label: 'Атрибуты',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-table_smnp-table`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-last 
+            smnp-table-col-last`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
       items: [
         {
           name: 'SNMPv1',
@@ -227,8 +344,44 @@ export default {
           value: true,
         },
       ],
+      items2: [
+        {
+          attributes: 'Авторизация',
+          value: true,
+        },
+        {
+          attributes: 'Логин пользователя',
+          value: 'admin',
+        },
+        {
+          attributes: 'Пароль',
+          value: '******',
+        },
+        {
+          attributes: 'SMTP-сервер',
+          value: 'smtp.domian.ru',
+        },
+        {
+          attributes: 'Поддержка SSI',
+          value: true,
+        },
+        {
+          attributes: 'SMTP-порт',
+          value: 465,
+        },
+      ],
     };
   },
+  methods: {
+    setYes() {
+      this.chosenOption = 'Да';
+      this.items2[4].value = true;
+    },
+    setNo() {
+      this.chosenOption = 'Нет';
+      this.items2[4].value = false;
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -243,8 +396,12 @@ export default {
 .main-container {
   margin-top: 16px;
 }
-.smnp-section {
+
+.bmc-settings-section {
   border-bottom: 1px solid $faint-secondary-primary-10;
+  &.last {
+    margin-bottom: 40px;
+  }
 }
 .smnp-settings-container {
   display: flex;
@@ -305,4 +462,9 @@ export default {
   width: 100%;
   margin: 0 20px 0 0;
 }
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 6px 0 auto;
+}
 </style>
diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue
index 45bd1914..85b5191f 100644
--- a/src/views/Fans/StaticInformation/FansStaticPage.vue
+++ b/src/views/Fans/StaticInformation/FansStaticPage.vue
@@ -21,7 +21,7 @@
               src="@/assets/images/fans-page/working.svg"
             />
             <span>
-              {{ $t('fansPage.inWork') }}
+              {{ $t('global.status.inWork') }}
             </span>
           </div>
           <div v-else class="fans-table-col-first__cell">
@@ -30,7 +30,7 @@
               src="@/assets/images/fans-page/notWorking.svg"
             />
             <span>
-              {{ $t('fansPage.notWorking') }}
+              {{ $t('global.status.outWorking') }}
             </span>
           </div>
         </template>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 244fdcd7..f01cdd52 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -165,6 +165,9 @@ export default {
 };
 </script>
 <style scoped>
+.regular-12px {
+  margin-left: 10px;
+}
 .username-input,
 .password-input {
   height: 56px;
diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
index 09ef7f23..a40bd2ea 100644
--- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue
+++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
@@ -18,10 +18,12 @@
         </b-table>
         <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span>
       </page-section>
-      <memory-switch
+      <data-tabs
         :slots="memorySlots"
-        :switch-memory="switchMemorySlot"
-        :current-memory="currentMemorySlot"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="120"
+        :slider-width="97"
       />
       <page-section class="bootstrap-table__section">
         <b-table
@@ -93,10 +95,10 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import MemorySwitch from './MemorySwitch';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
 
 export default {
-  components: { PageTitle, PageSection, MemorySwitch },
+  components: { PageTitle, PageSection, DataTabs },
   data() {
     return {
       currentMemorySlot: 1,
diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue
deleted file mode 100644
index 27101daa..00000000
--- a/src/views/MemoryModules/Specification/MemorySwitch.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div
-    ref="content"
-    class="memory-switch"
-    @wheel.prevent="wheelItBetter($event)"
-  >
-    <span
-      v-for="item in slots"
-      :key="item.id"
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': currentMemory === item.id }"
-      @click="switchMemory(item.id)"
-      >{{ $t(item.name) }}</span
-    >
-    <div
-      class="slider"
-      :style="`width: 98px; left: ${
-        ((currentMemory ? currentMemory : 1) - 1) * 120 + 32
-      }px`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    slots: {
-      type: Array,
-      default: null,
-    },
-    currentMemory: {
-      type: Number,
-      default: 1,
-    },
-    switchMemory: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      upHere: false,
-      container: this.$refs.content,
-    };
-  },
-  methods: {
-    wheelItBetter(event) {
-      if (event.deltaY < 0) {
-        this.$refs.content.scrollLeft -= 25;
-      } else {
-        this.$refs.content.scrollLeft += 25;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.memory-switch {
-  position: relative;
-  width: calc(93vw - 320px);
-  height: 50px;
-  padding: 0 16px 0 32px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 120px;
-  grid-template-rows: 32px;
-  align-items: end;
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  overflow-x: auto;
-  white-space: nowrap;
-  &::-webkit-scrollbar {
-    height: 2px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(26, 62, 91, 0.2);
-    border-radius: 16px;
-    background-clip: content-box;
-    height: 10px;
-  }
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.scale-item {
-  display: inline-block;
-  width: 120px;
-  margin-right: 6px;
-  cursor: pointer;
-}
-
-.date-picker {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.date-clear {
-  margin-left: auto;
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 463e9ea2..8ff1aa1b 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -8,10 +8,12 @@
       <page-section class="bootstrap-table__section info_section">
         <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span>
       </page-section>
-      <power-switch
-        :slots="memorySlots"
-        :switch-memory="switchMemorySlot"
-        :current-memory="currentMemorySlot"
+      <data-tabs
+        :slots="sourceSlots"
+        :switch-tab="switchSourceSlot"
+        :current-tab="currentSourceSlot"
+        :slot-width="100"
+        :slider-width="68"
       />
       <page-section class="bootstrap-table__section">
         <b-table
@@ -51,14 +53,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import PowerSwitch from './PowerSwitch';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
 
 export default {
-  components: { PageTitle, PageSection, PowerSwitch },
+  components: { PageTitle, PageSection, DataTabs },
   data() {
     return {
-      currentMemorySlot: 1,
-      memorySlots: [
+      currentSourceSlot: 1,
+      sourceSlots: [
         { id: 1, name: 'Источник 1' },
         { id: 2, name: 'Источник 2' },
         { id: 3, name: 'Источник 3' },
@@ -127,8 +129,8 @@ export default {
     };
   },
   methods: {
-    switchMemorySlot(period) {
-      this.currentMemorySlot = period;
+    switchSourceSlot(period) {
+      this.currentSourceSlot = period;
     },
   },
 };
diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue
deleted file mode 100644
index 824c2549..00000000
--- a/src/views/PowerSupplies/Specification/PowerSwitch.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div
-    ref="content"
-    class="memory-switch"
-    @wheel.prevent="wheelItBetter($event)"
-  >
-    <span
-      v-for="item in slots"
-      :key="item.id"
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': currentMemory === item.id }"
-      @click="switchMemory(item.id)"
-      >{{ $t(item.name) }}</span
-    >
-    <div
-      class="slider"
-      :style="`width: 68px; left: ${
-        ((currentMemory ? currentMemory : 1) - 1) * 100 + 30
-      }px`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    slots: {
-      type: Array,
-      default: null,
-    },
-    currentMemory: {
-      type: Number,
-      default: 1,
-    },
-    switchMemory: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      upHere: false,
-      container: this.$refs.content,
-    };
-  },
-  methods: {
-    wheelItBetter(event) {
-      if (event.deltaY < 0) {
-        this.$refs.content.scrollLeft -= 25;
-      } else {
-        this.$refs.content.scrollLeft += 25;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.memory-switch {
-  position: relative;
-  width: calc(100vw - 320px);
-  height: 50px;
-  padding: 0 16px 0 32px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 100px;
-  grid-template-rows: 32px;
-  align-items: end;
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  overflow-x: auto;
-  white-space: nowrap;
-  &::-webkit-scrollbar {
-    height: 2px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(26, 62, 91, 0.2);
-    border-radius: 16px;
-    background-clip: content-box;
-    height: 10px;
-  }
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.scale-item {
-  display: inline-block;
-  width: 100px;
-  margin-right: 6px;
-  cursor: pointer;
-}
-
-.date-picker {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.date-clear {
-  margin-left: auto;
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
index 2baa7d5d..1be41ac2 100644
--- a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
+++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
@@ -20,7 +20,7 @@
       <div v-if="value" class="fans-table-col-first__cell">
         <img class="status__img" src="@/assets/images/fans-page/working.svg" />
         <span>
-          {{ $t('fansPage.inWork') }}
+          {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
@@ -29,7 +29,7 @@
           src="@/assets/images/fans-page/notWorking.svg"
         />
         <span>
-          {{ $t('fansPage.notWorking') }}
+          {{ $t('global.status.outWorking') }}
         </span>
       </div>
     </template>
@@ -44,7 +44,7 @@ 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 './mock';
+import { Accelerators } from './helpers';
 export default {
   components: { IconChevron },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
diff --git a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
index 3f9525ae..7baa7e67 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
@@ -10,6 +10,63 @@
           $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')
@@ -24,6 +81,7 @@
 <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';
@@ -34,6 +92,11 @@ export default {
     ProcessorsSpecificationTable,
     AcceleratorSpecificationTable,
   },
+  data() {
+    return {
+      processors,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -41,4 +104,18 @@ export default {
   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/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
index 6efc2e21..1d026f1b 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
@@ -27,7 +27,7 @@
       <div v-if="value" class="fans-table-col-first__cell">
         <img class="status__img" src="@/assets/images/fans-page/working.svg" />
         <span>
-          {{ $t('fansPage.inWork') }}
+          {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
@@ -36,7 +36,7 @@
           src="@/assets/images/fans-page/notWorking.svg"
         />
         <span>
-          {{ $t('fansPage.notWorking') }}
+          {{ $t('global.status.outWorking') }}
         </span>
       </div>
     </template>
@@ -44,59 +44,6 @@
     <template #row-details="{ index }">
       <b-container fluid>
         <!-- ProcessorCapabilityInfo -->
-        <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[index].presence_status"
-                :key="item.presence_status"
-              >
-                {{ 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">{{ 'Включен' }}</dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.multithreading"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.virtualization"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.turbo"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-            </dl>
-          </b-col>
-        </b-row>
         <b-row>
           <b-col class="mt-3 mb-2 p-0 bold-12px__caps">
             {{ $t('pageInventory.table.processorCacheInfo') }}
@@ -202,7 +149,7 @@ 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 './mock';
+import { processors } from './helpers';
 export default {
   components: { IconChevron },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
@@ -210,7 +157,7 @@ export default {
     return {
       isBusy: true,
       isAddersСolon: false,
-      processors: Processors,
+      processors,
       fields: [
         {
           key: 'expandRow',
diff --git a/src/views/Processors/Specification/helpers.js b/src/views/Processors/Specification/helpers.js
new file mode 100644
index 00000000..6227e4b8
--- /dev/null
+++ b/src/views/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/Processors/Specification/mock.js b/src/views/Processors/Specification/mock.js
deleted file mode 100644
index 42ca1c30..00000000
--- a/src/views/Processors/Specification/mock.js
+++ /dev/null
@@ -1,254 +0,0 @@
-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/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
index b736f026..ed4ee19c 100644
--- a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
+++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
@@ -4,16 +4,18 @@
     <div class="main-container">
       <div class="tables-container">
         <div class="server-table">
-          <span class="semi-bold-16px">Состояние сервера</span>
+          <span class="semi-bold-16px">{{
+            $t('global.status.serverStatus')
+          }}</span>
           <b-table
             show-empty
             responsive="md"
             class="bootstrap-analytical-table"
-            :items="server_items"
+            :items="serverItems"
             :fields="server_fields"
           >
             <template #cell(value)="{ value }">
-              <b-col v-if="value" col="1">
+              <b-col v-if="value">
                 <img
                   src="@/assets/images/icon-ok.svg"
                   class="system-network-table__icon"
@@ -29,37 +31,144 @@
           </b-table>
         </div>
         <div class="events-table">
-          <span class="semi-bold-16px">События</span>
-          <b-table
-            show-empty
-            responsive="md"
-            class="bootstrap-analytical-table"
-            :items="events_items"
-            :fields="events_fields"
-          >
-          </b-table>
+          <span class="semi-bold-16px">{{ $t('global.action.events') }}</span>
+          <div id="events-table-wrapper">
+            <b-table
+              show-empty
+              :sticky-header="stickyHeader"
+              responsive="md"
+              class="bootstrap-analytical-table"
+              :no-border-collapse="true"
+              :items="eventsItems"
+              :fields="events_fields"
+            >
+              <template #cell(date)="{ value }">
+                <img
+                  src="@/assets/images/event-logs/time.svg"
+                  class="sourse__img"
+                />
+                <span class="regular-12px quaternary"> {{ value }} </span>
+              </template>
+              <template #cell(type)="{ value }">
+                <span
+                  v-if="value === 'Критические'"
+                  class="bold-12px__caps errors"
+                  >{{ value }}</span
+                >
+                <span
+                  v-else-if="value === 'Предупреждения'"
+                  class="bold-12px__caps warning"
+                >
+                  {{ value }}
+                </span>
+                <span v-else class="bold-12px__caps information">{{
+                  value
+                }}</span>
+              </template>
+              <template #cell(description)="data">
+                <b-row class="semi-bold-16px tretiatry">
+                  {{ data.item.description.name }}
+                </b-row>
+                <b-row
+                  class="regular-12px tretiatry pointer"
+                  @click="toggleRowDetails(data)"
+                >
+                  {{ data.item.description.description }}</b-row
+                >
+              </template>
+              <template #row-details="{ index }">
+                <b-container fluid>
+                  <b-col class="mt-1 mb-2 regular-12px tretiatry">
+                    <span class="row-details">
+                      {{
+                        `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
+                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
+                      }}
+                      {{ $t(eventsItems[index].description.description) }}
+                    </span>
+                  </b-col>
+                </b-container>
+              </template>
+            </b-table>
+          </div>
         </div>
       </div>
+      <div class="indicators-container">
+        <span class="bold-16px">{{ $t('global.status.indicators') }}</span>
+        <span class="indicators-units regular-12px tretiatry">
+          {{ $t('global.units.unit') }}</span
+        >
+        <b-button id="popover-choice-1" variant="unstiled">
+          <span class="regular-12px units-label">
+            {{
+              $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`)
+            }}</span
+          >
+          <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" />
+        </b-button>
+      </div>
+      <two-chioce-popover
+        :id="1"
+        fitst-option="Ампераж"
+        second-option="Вольтаж"
+        :chosen-option="unit"
+        :first-action="selectAmper"
+        :second-action="selectVolt"
+      />
+      <!-- <unit-popover
+        :select-amper="selectAmper"
+        :select-volt="selectVolt"
+        :unit="unit"
+      /> -->
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <accessory-table :records="accessoryData.power" />
+      <power-table :time-scale="timeScale" />
+      <div class="tables-container">
+        <span class="semi-bold-16px">Управление</span>
+      </div>
+      <control-system />
     </div>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 
+import PowerTable from './PowerTable';
+import { AccessoryData, ServerItems, EventsItems } from './helpers';
 export default {
   components: {
     PageTitle,
+    DateSwitch,
+    AccessoryTable,
+    PowerTable,
+    ControlSystem,
+    TwoChiocePopover,
   },
-
+  mixins: [TableRowExpandMixin],
   data() {
     return {
+      unit: 'Ампераж',
+      isActive: false,
+      timeScale: 'hour',
+      stickyHeader: '511px',
+      accessoryData: AccessoryData,
+      serverItems: ServerItems,
+      eventsItems: EventsItems,
       server_fields: [
         {
           key: 'param',
           label: 'Раздел',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -67,33 +176,18 @@ export default {
           key: 'value',
           label: 'Статус',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class:
             'bootstrap-rounded-table__column-last analytical-table__status',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      server_items: [
-        { param: 'Сервер №1', value: true },
-        { param: 'ВМС', value: true },
-        { param: 'Аналитическая панель', value: true },
-        { param: 'RAID-контроллеры', value: false },
-        { param: 'Модули памяти', value: true },
-        { param: 'Процессоры', value: true },
-        { param: 'Источники питания', value: true },
-        { param: 'Вентиляторы', value: true },
-        { param: 'Физические накопители', value: true },
-        { param: 'Виртуальные накопители', value: true },
-        { param: 'Материнская плата', value: true },
-        { param: 'Сетевые адаптеры', value: true },
-        { param: 'PCI устройства', value: true },
-      ],
       events_fields: [
         {
-          key: 'time',
+          key: 'date',
           label: 'Время',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -101,53 +195,59 @@ export default {
           key: 'type',
           label: 'Тип события',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-center',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
         {
-          key: 'info',
+          key: 'description',
           label: 'О событии',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
-          class: 'bootstrap-rounded-table__column-last',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-last',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      events_items: [
-        { time: 'Сервер №1', type: 'Критические', info: 'true' },
-        { time: 'ВМС', type: 'Критические', info: 'true' },
-        {
-          time: 'Аналитическая панель',
-          type: 'Критические',
-          info: 'true',
-        },
-        {
-          time: 'RAID-контроллеры',
-          type: 'Критические',
-          info: 'false',
-        },
-        {
-          time: 'Модули памяти',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Процессоры', type: 'Критические', info: 'true' },
-        {
-          time: 'Источники питания',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Вентиляторы', type: 'Критические', info: 'true' },
-        { time: 'Физические накопители', type: 'Критические', info: 'true' },
-      ],
     };
   },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    selectAmper() {
+      this.unit = 'Ампераж';
+    },
+    selectVolt() {
+      this.unit = 'Вольтаж';
+    },
+  },
 };
 </script>
 <style lang="scss">
 .analytical-table__status {
   width: 10%;
 }
+
+#popover-unit-ractive {
+  padding-left: 5px;
+}
+
+#popover-unit-ampere {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+#popover-unit-volt {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+  // color: $red-brand-primary;
+}
 </style>
 <style lang="scss" scoped>
 .tables-container {
@@ -164,4 +264,59 @@ export default {
 .events-table {
   width: 65%;
 }
+
+#events-table-wrapper div {
+  overflow-y: overlay;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-top: 43px solid transparent;
+    background: $faint-secondary-primary-20;
+    border-radius: 16px;
+    background-clip: content-box;
+  }
+}
+
+.row-details {
+  display: block;
+  height: auto;
+  width: 30vw;
+}
+
+.errors {
+  color: $indicators-errors !important;
+}
+
+.warning {
+  color: $indicators-warning !important;
+}
+
+.information {
+  color: $indicators-complementary !important;
+}
+
+.indicators-container {
+  margin-left: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.indicators-units {
+  margin-left: auto;
+}
+
+.units__icon {
+  margin: 0 32px 0 5px;
+  cursor: pointer;
+}
+
+.units-label {
+  cursor: pointer;
+  color: $red-brand-primary;
+}
 </style>
diff --git a/src/views/SILA/AnalyticalPanel/PowerTable.vue b/src/views/SILA/AnalyticalPanel/PowerTable.vue
new file mode 100644
index 00000000..27bb4efa
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/PowerTable.vue
@@ -0,0 +1,82 @@
+<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',
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'areaspline',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(6, this.timeScale),
+            title: null,
+            labels: {
+              step: 1,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(2.5, 'A'),
+            min: 0,
+            max: 4,
+            title: null,
+            tickInterval: 1,
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          series: Series['power'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
new file mode 100644
index 00000000..ae52062a
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
@@ -0,0 +1,115 @@
+<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: 'areaspline',
+            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',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/helpers.js b/src/views/SILA/AnalyticalPanel/helpers.js
new file mode 100644
index 00000000..8655afc3
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/helpers.js
@@ -0,0 +1,200 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  power: [
+    {
+      name: 'Sean',
+      data: [1, 1, 2.7, 0.5, 0.2, 1],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [0.4, 0.3, 1, 1.4, 2, 0.4],
+      color: '#F18638',
+    },
+    {
+      name: 'Brendan',
+      data: [0.5, 2.5, 1, 0.4, 1, 3],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${i}0`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [];
+  for (let i = 0; i < count; i += 0.5) {
+    arr.push(`${i} ${desc}`);
+  }
+  return arr;
+};
+
+export const AccessoryData = {
+  power: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Наименование',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'power',
+        label: 'Текущее значение тока, А',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Источникк питания 1',
+        power: '1,3 A',
+      },
+      {
+        name: 'Источникк питания 2',
+        power: '1,8 A',
+      },
+      {
+        name: 'Источникк питания 3',
+        power: '1,6 A',
+      },
+    ],
+  },
+};
+
+export const ServerItems = [
+  { param: 'Сервер №1', value: true },
+  { param: 'ВМС', value: true },
+  { param: 'Аналитическая панель', value: true },
+  { param: 'RAID-контроллеры', value: false },
+  { param: 'Модули памяти', value: true },
+  { param: 'Процессоры', value: true },
+  { param: 'Источники питания', value: true },
+  { param: 'Вентиляторы', value: true },
+  { param: 'Физические накопители', value: true },
+  { param: 'Виртуальные накопители', value: true },
+  { param: 'Материнская плата', value: true },
+  { param: 'Сетевые адаптеры', value: true },
+  { param: 'PCI устройства', value: true },
+];
+
+export const EventsItems = [
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+];
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
index 0d5ce428..36ec9802 100644
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -5,22 +5,29 @@
     class="event-logs-section"
   >
     <page-title />
-    <div class="form-control event-log-search">
-      <button class="search-button">
-        <img
-          class="event-log-search__icon"
-          src="@/assets/images/search-icon.svg"
-        />
-      </button>
-      <b-form-input
-        v-model="searchInput"
-        type="text"
-        class="event-log-search__input"
-        placeholder="Поиск по журналу"
-        @input="onChangeSearchInput"
-        @clear-search="onClearSearchInput"
+    <div class="event-log-head-container">
+      <span class="regular-12px">Срок хранения событий:</span>
+      <span class="semi-bold-12px">42 дня</span>
+      <span class="regular-12px red" style="color: $red-brand-primary"
+        >Изменить</span
       >
-      </b-form-input>
+      <div class="form-control event-log-search">
+        <button class="search-button">
+          <img
+            class="event-log-search__icon"
+            src="@/assets/images/search-icon.svg"
+          />
+        </button>
+        <b-form-input
+          v-model="searchInput"
+          type="text"
+          class="event-log-search__input"
+          placeholder="Поиск по журналу"
+          @input="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        >
+        </b-form-input>
+      </div>
     </div>
     <div class="event-logs__section">
       <div class="event-logs__filter-container">
@@ -890,10 +897,19 @@ $toolbar-height: 64px;
   margin: 0 32px;
 }
 
-.event-log-search {
+.event-log-head-container {
   position: absolute;
   top: calc(#{$header-height});
   right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+  z-index: 1001;
+}
+
+.event-log-search {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
@@ -901,10 +917,9 @@ $toolbar-height: 64px;
   border: none;
   box-shadow: none;
   border-radius: 8px;
-  margin: 12px 32px;
+  margin: 12px 32px 12px 16px;
   width: 236px;
   height: 40px;
-  z-index: 1001;
 }
 
 .search-button {
@@ -1014,10 +1029,6 @@ $toolbar-height: 64px;
   color: $text-quaternary;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .pagination-container {
   width: calc(100% - #{$navigation-width});
   height: $toolbar-height;
@@ -1075,8 +1086,4 @@ $toolbar-height: 64px;
   height: auto;
   width: 70vw;
 }
-
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue
new file mode 100644
index 00000000..95267ece
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue
@@ -0,0 +1,140 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <div class="limit-container">
+        <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="0"
+            :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 Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+    },
+  },
+};
+</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-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;
+  &.non-normal {
+    width: 125px;
+  }
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue
new file mode 100644
index 00000000..1bbf7e08
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue
@@ -0,0 +1,112 @@
+<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',
+                  },
+                },
+              },
+            ],
+          },
+          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/NetworkAdapters/Dynamic/helpers.js b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js
new file mode 100644
index 00000000..2be5ce24
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js
@@ -0,0 +1,370 @@
+export const colors = ['#CB32F1', '#F18638', '#139BB9', '#E1AB17'];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        7,
+        7,
+        7,
+        17,
+        7,
+        27,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        50,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        10,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        19,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        33,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        53,
+        13,
+        13,
+        13,
+        53,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        53,
+        13,
+        43,
+        13,
+        13,
+        63,
+        13,
+        43,
+        13,
+        23,
+        13,
+        43,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+      ],
+      color: '#139BB9',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        84,
+        14,
+        94,
+        14,
+        14,
+        14,
+        54,
+        14,
+        44,
+        14,
+        44,
+        14,
+        14,
+        44,
+        14,
+      ],
+      color: '#E1AB17',
+    },
+  ],
+};
+
+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: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    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' },
+      },
+    ],
+  },
+};
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/index.js b/src/views/SILA/NetworkAdapters/Dynamic/index.js
new file mode 100644
index 00000000..081b5560
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/index.js
@@ -0,0 +1 @@
+export { default } from './NetworkDynamicPage.vue';
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
new file mode 100644
index 00000000..74e7ee2c
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
@@ -0,0 +1,434 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="adaptersSlots"
+        :switch-tab="switchAdapterSlot"
+        :current-tab="currentAdapterSlot"
+        :slot-width="85"
+        :slider-width="60"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <span class="bold-12px__caps">
+          {{ $t('pageNetwork.macAddress') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.settings') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_2"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row v-if="data.index === 3" class="multiple-select-container">
+              <b-col v-if="selected.length" class="chip-column">
+                <b-row class="chip-container">
+                  <div
+                    v-for="item in selected"
+                    :key="item.value"
+                    class="custom-chip"
+                  >
+                    <span> {{ item.text }} </span>
+                    <img
+                      class="clear-icon"
+                      src="@/assets/images/popups/x-icon.svg"
+                      @click="optionRemove(item.value)"
+                    />
+                  </div>
+                </b-row>
+              </b-col>
+              <b-col v-else>
+                {{ 'Не выбрано ' }}
+              </b-col>
+              <b-col class="icon-container">
+                <b-button id="popover-boot" variant="toogle-popover">
+                  <img :is="iconChevron" class="icon-chevron" />
+                </b-button>
+                <b-popover
+                  placement="left"
+                  triggers="focus"
+                  :show.sync="show"
+                  custom-class="boot-popover"
+                  target="popover-boot"
+                >
+                  <b-form-group
+                    v-slot="{ ariaDescribedby }"
+                    class="checkbox-group"
+                  >
+                    <b-form-checkbox-group
+                      v-model="selected"
+                      :options="options"
+                      :aria-describedby="ariaDescribedby"
+                      class="regular-14px checkbox-container"
+                      stacked
+                    ></b-form-checkbox-group>
+                  </b-form-group>
+                </b-popover>
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value ? 'Возможно' : 'Не возможно' }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.propherties') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_3"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.PXE') }}</span>
+          <apply-settings-popover
+            :id="2"
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+        </div>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_4"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row class="flex-row">
+              <b-col>
+                <span>
+                  {{ data.value ? 'Включено' : 'Выключено' }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-form-checkbox v-model="items_4[data.index].value" switch>
+                </b-form-checkbox>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.links') }}</span>
+        </div>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_5"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.transceivers') }}</span>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items_6"
+          :fields="fields_2"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeAdapter')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="adapters.microcodeUpdate"
+            popup="adapters.microcodeUpdate_popup"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import { items, items_2, items_3, items_4, items_5, items_6 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      items_3,
+      items_4,
+      items_5,
+      items_6,
+      iconChevron,
+      selected: [],
+      show: false,
+      options: [
+        { text: 'PXE', value: { text: 'PXE', value: 'pxe' } },
+        { text: 'ISCSI-PXE', value: { text: 'ISCSI-PXE', value: 'iscsi-pxe' } },
+        { text: 'ISCSI', value: { text: 'ISCSI', value: 'iscsi' } },
+        { text: 'PXE2', value: { text: 'PXE2', value: 'pxe2' } },
+        { text: 'ISCSI 2', value: { text: 'ISCSI 2', value: 'iscsi2' } },
+        {
+          text: 'ISCSI-PXE 2',
+          value: { text: 'ISCSI-PXE 2', value: 'iscsi-pxe2' },
+        },
+      ],
+      applyType: 'reload',
+      currentAdapterSlot: 1,
+      adaptersSlots: [
+        { id: 1, name: 'Адаптер 1' },
+        { id: 2, name: 'Адаптер 2' },
+        { id: 3, name: 'Адаптер 3' },
+      ],
+      fields: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'name',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'model',
+          label: 'Модель',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'number',
+          label: 'Серийный номер',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Тип устройства',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'firmware',
+          label: 'Прошивка',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchAdapterSlot(period) {
+      this.currentAdapterSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+    optionRemove(value) {
+      this.selected.splice(
+        this.selected.findIndex((el) => el.value === value),
+        1
+      );
+      console.log(value);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__section {
+  width: auto;
+}
+
+.bootstrap-table__server-param {
+  width: 30%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.bold-12px__caps {
+  display: block;
+  margin: 20px 0 8px 0;
+}
+
+.flex-row {
+  align-items: center;
+}
+
+.multiple-select-container {
+  justify-content: flex-end;
+}
+
+.chip-column {
+  padding-right: 0px;
+}
+
+.chip-container {
+  margin-left: -5px;
+}
+
+.custom-chip {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin: 2px 3px;
+  padding: 0 10px;
+  background-color: $faint-secondary-primary-10;
+  border-radius: 94px;
+}
+
+.icon-container {
+  flex-grow: 0;
+  padding: 0px;
+  margin: 0 11px 0 5px;
+}
+
+.clear-icon {
+  width: 10px;
+  margin-left: 6px;
+  cursor: pointer;
+}
+
+.checkbox-group {
+  margin: 0;
+}
+
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 7px;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js
new file mode 100644
index 00000000..918f5b4e
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js
@@ -0,0 +1,99 @@
+export const items = [
+  {
+    param: 'MAC адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+  {
+    param: 'Виртуальный MAC адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+];
+export const items_2 = [
+  {
+    param: 'Пробуждение по локальной сети',
+    value: true,
+  },
+  {
+    param: 'Менеджмент проходит через',
+    value: true,
+  },
+  {
+    param: 'Энергоэффективный Ethernet',
+    value: true,
+  },
+  {
+    param: 'Поддерживаемый boot протокол',
+    value: true,
+  },
+  {
+    param: 'Способность политики сохранения',
+    value: true,
+  },
+];
+export const items_3 = [
+  {
+    param: 'Версия прошивки',
+    value: '20.6.6.2',
+  },
+  {
+    param: 'Версия драйвера',
+    value: '3.134',
+  },
+  {
+    param: 'PCI device ID',
+    value: '165F',
+  },
+];
+
+export const items_4 = [
+  {
+    param: 'Встроенные порты PXE',
+    value: true,
+  },
+];
+
+export const items_5 = [
+  {
+    param: 'Статус',
+    value: 'Подключено',
+  },
+  {
+    param: 'Скорость',
+    value: '1000 Mbps',
+  },
+];
+
+export const items_6 = [
+  {
+    name: 'Приемопередатчик 1',
+    model: 'A0507',
+    number: '789578456698',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Link',
+  },
+  {
+    name: 'Приемопередатчик 2',
+    model: 'A0507',
+    number: '543636577755',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Receiver Signal Averange Optical Power',
+  },
+  {
+    name: 'Приемопередатчик 3',
+    model: 'A0408',
+    number: '789578456698',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Laser Output Power',
+  },
+  {
+    name: 'Приемопередатчик 4',
+    model: 'A0408',
+    number: '123456789087',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Laser Output Power',
+  },
+];
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js
new file mode 100644
index 00000000..47f49789
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js
@@ -0,0 +1 @@
+export { default } from './EthernetAdaptersPage.vue';
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
new file mode 100644
index 00000000..8184349d
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
@@ -0,0 +1,231 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="adaptersSlots"
+        :switch-tab="switchAdapterSlot"
+        :current-tab="currentAdapterSlot"
+        :slot-width="85"
+        :slider-width="60"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.wwnAddres') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.settings') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_2"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row v-if="data.index === 0 || data.index === 3">
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="data.index === 4">
+              <b-col>
+                <span>
+                  {{ data.value ? 'Включено' : 'Выключено' }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.propherties') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_3"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeAdapter')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="adapters.microcodeUpdate"
+            popup="adapters.microcodeUpdate_popup"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import { items, items_2, items_3 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      items_3,
+      iconChevron,
+      applyType: 'reload',
+      currentAdapterSlot: 1,
+      adaptersSlots: [
+        { id: 1, name: 'Адаптер 1' },
+        { id: 2, name: 'Адаптер 2' },
+        { id: 3, name: 'Адаптер 3' },
+      ],
+      fields: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchAdapterSlot(period) {
+      this.currentAdapterSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__server-param {
+  width: 30%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  width: auto;
+}
+
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.bold-12px__caps {
+  display: block;
+  margin: 20px 0 8px 0;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js
new file mode 100644
index 00000000..a2ace22f
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js
@@ -0,0 +1,42 @@
+export const items = [
+  {
+    param: 'WWN адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+];
+export const items_2 = [
+  {
+    param: 'Boot WWPN',
+    value: 'Имя порта контроллера (WWPN)',
+  },
+  {
+    param: 'Select Boot Enable',
+    value: 'Boot Lun',
+  },
+  {
+    param: 'Boot LUN',
+    value: 'Том 1',
+  },
+  {
+    param: 'WWPN',
+    value: 'Имя порта HBA (WWPN)',
+  },
+  {
+    param: 'Host Adapter Bios Enable',
+    value: false,
+  },
+];
+export const items_3 = [
+  {
+    param: 'Версия прошивки',
+    value: '20.6.6.2',
+  },
+  {
+    param: 'Версия драйвера',
+    value: '3.134',
+  },
+  {
+    param: 'PCI device ID',
+    value: '165F',
+  },
+];
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js
new file mode 100644
index 00000000..8f5636c3
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js
@@ -0,0 +1 @@
+export { default } from './FcHbaAdaptersPage.vue';
diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue
new file mode 100644
index 00000000..09734a4a
--- /dev/null
+++ b/src/views/SILA/PciDevices/PciDevicesPage.vue
@@ -0,0 +1,172 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(status)>
+            <b-row>
+              <b-col>
+                <img
+                  src="@/assets/images/fans-page/working.svg"
+                  class="icon-chevron"
+                />
+                <span>
+                  {{ 'Работоспособен' }}
+                </span>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+
+export default {
+  components: { PageTitle, PageSection },
+  data() {
+    return {
+      fields: [
+        {
+          key: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'name',
+          label: 'Имя',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Тип устройства',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'model',
+          label: 'Модель',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'serial_number',
+          label: 'Серийный номер',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'producer',
+          label: 'Производитель',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          status: true,
+          name: 'PCI-устройство 1',
+          type: 'Плата',
+          model: 'A0407',
+          serial_number: '789578456698',
+          producer: 'ASUS',
+        },
+        {
+          status: true,
+          name: 'PCI-устройство 2',
+          type: 'Плата',
+          model: 'A4897',
+          serial_number: '758496877563',
+          producer: 'ASUS',
+        },
+        {
+          status: true,
+          name: 'PCI-устройство 3',
+          type: 'Плата',
+          model: 'A0147',
+          serial_number: '247856889654',
+          producer: 'ASUS',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+    redirectDrivers() {
+      this.$router.push('/drivers-static');
+    },
+    redirectVirtual() {
+      this.$router.push('/virtual-drivers');
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__stripes tr:nth-of-type(even) {
+  background-color: rgb(255 255 255);
+}
+.bootstrap-table__head_bg {
+  border-top: none;
+  display: none;
+}
+
+.bootstrap-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.1);
+  border-top: none;
+}
+
+.bootstrap-table__column-last {
+  border-top: none;
+}
+
+.bootstrap-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.1);
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.pointer {
+  color: $red-brand-primary;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SILA/PciDevices/index.js b/src/views/SILA/PciDevices/index.js
new file mode 100644
index 00000000..20092914
--- /dev/null
+++ b/src/views/SILA/PciDevices/index.js
@@ -0,0 +1 @@
+export { default } from './PciDevicesPage.vue';
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
new file mode 100644
index 00000000..cd148f7d
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
@@ -0,0 +1,209 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="notification__container">
+      <span class="semi-bold-12px">{{
+        $t('global.ariaLabel.notificationTime')
+      }}</span>
+      <div class="form-control notification">
+        <b-form-input
+          v-model="notificationInput"
+          type="number"
+          class="notification__input"
+        >
+        </b-form-input>
+        <button class="notification_button">
+          <img class="notification__icon" src="@/assets/images/refresh.svg" />
+        </button>
+      </div>
+    </div>
+    <div class="main-container">
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <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="temperatureCritical"
+            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="temperatureCritical"
+            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="temperatureCritical"
+            :max="100"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <b-button
+          class="save-button"
+          variant="primary"
+          @click="updateTemperatureLimits"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+      <!-- Temperature Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table-drivers :records="accessoryData.table" />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTable';
+import AccessoryTableDrivers from '@/components/Global/SilaComponents/Tables/AccessoryTableDrivers';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+    AccessoryTableDrivers,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
+      temperatureCriticalStart: 55,
+      temperatureCritical: 55,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperatureLimits() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCriticalStart = +this.temperatureCritical;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.notification__container {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notification {
+  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__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notification__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;
+}
+</style>
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue
new file mode 100644
index 00000000..f9c149c3
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/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/PhysicalDrivers/DynamicInfo/helpers.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js
new file mode 100644
index 00000000..5bb87b84
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js
@@ -0,0 +1,584 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        15,
+        15,
+        45,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        55,
+        15,
+        25,
+        15,
+        15,
+        15,
+        55,
+        15,
+        75,
+        15,
+        35,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        45,
+        15,
+        25,
+        15,
+        45,
+        15,
+        15,
+        15,
+        35,
+        35,
+        35,
+        15,
+        55,
+        15,
+        15,
+        35,
+        15,
+        25,
+        15,
+        35,
+        15,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        22,
+        12,
+        42,
+        12,
+        12,
+        12,
+        72,
+        12,
+        52,
+        12,
+        62,
+        12,
+        72,
+        12,
+        12,
+        12,
+        12,
+        42,
+        12,
+        12,
+        52,
+        12,
+        42,
+        12,
+        12,
+        62,
+        12,
+        12,
+        12,
+        22,
+        12,
+        42,
+        12,
+        62,
+        12,
+        12,
+        32,
+        12,
+        12,
+        12,
+        52,
+        12,
+        32,
+        12,
+        22,
+        12,
+        12,
+        12,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        33,
+        13,
+        63,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        53,
+        13,
+        13,
+        13,
+        53,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        53,
+        13,
+        43,
+        13,
+        13,
+        63,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        63,
+        13,
+        13,
+        13,
+        53,
+        13,
+        53,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        14,
+        14,
+        64,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        14,
+        14,
+        84,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        44,
+        14,
+        44,
+        64,
+        14,
+        44,
+        14,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        36,
+        16,
+        26,
+        16,
+        36,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        96,
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        46,
+        16,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        69,
+        19,
+        19,
+        19,
+        19,
+        19,
+        59,
+        19,
+        19,
+        39,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        49,
+        19,
+        19,
+        19,
+        59,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        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: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    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' },
+      },
+    ],
+  },
+  table: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-first',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'SMART',
+        label: 'Текущие значения атрибутов SMART',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-second',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'resource',
+        label: 'Оставшийся ресурс для SSD, Мб',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-last',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Накопитель 1',
+        SMART: 88,
+        resource: '1 024 000',
+      },
+      {
+        name: 'Накопитель 2',
+        SMART: 76,
+        resource: '512 000',
+      },
+      {
+        name: 'Накопитель 3',
+        SMART: 69,
+        resource: '256 000',
+      },
+      {
+        name: 'Накопитель 4',
+        SMART: 75,
+        resource: '128 000',
+      },
+      {
+        name: 'Накопитель 5',
+        SMART: 69,
+        resource: '256 000',
+      },
+      {
+        name: 'Накопитель 6',
+        SMART: 75,
+        resource: '128 000',
+      },
+    ],
+  },
+};
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js
new file mode 100644
index 00000000..ed9033ab
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js
@@ -0,0 +1 @@
+export { default } from './DriversDynamicPage.vue';
diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
new file mode 100644
index 00000000..452abf88
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
@@ -0,0 +1,149 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('global.table.info') }}</span>
+      </page-section>
+      <data-tabs
+        :slots="memorySlots"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="100"
+        :slider-width="81"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeDrivers')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.reloadMicrocodeDrivers"
+            popup="SystemDescription.reloadMicrocodeDrivers"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs, Popover },
+  data() {
+    return {
+      currentMemorySlot: 1,
+      memorySlots: [
+        { id: 1, name: 'Накопитель 1' },
+        { id: 2, name: 'Накопитель 2' },
+        { id: 3, name: 'Накопитель 3' },
+        { id: 4, name: 'Накопитель 4' },
+        { id: 5, name: 'Накопитель 5' },
+        { id: 6, name: 'Накопитель 6' },
+        { id: 7, name: 'Накопитель 7' },
+        { id: 8, name: 'Накопитель 8' },
+        { id: 9, name: 'Накопитель 9' },
+        { id: 10, name: 'Накопитель 10' },
+        { id: 11, name: 'Накопитель 11' },
+        { id: 12, name: 'Накопитель 12' },
+        { id: 13, name: 'Накопитель 13' },
+        { id: 14, name: 'Накопитель 14' },
+        { id: 15, name: 'Накопитель 15' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            memory-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Протокол',
+          value: '4590',
+        },
+        {
+          parametr: 'Номинальная ёмкость',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Номинальная скорость вращения HDD',
+          value: '2000 об./мин.',
+        },
+        {
+          parametr: 'Номинальный ресурс для SDD',
+          value: '10 000',
+        },
+        {
+          parametr: 'Слот в бэкплейне или номер порта',
+          value: '25',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.memory-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+.info_section {
+  margin-bottom: 0px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/index.js b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js
new file mode 100644
index 00000000..2c06b5a2
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js
@@ -0,0 +1 @@
+export { default } from './DriversStaticPage.vue';
diff --git a/src/views/SILA/RAID/Cache/RAIDCachePage.vue b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
new file mode 100644
index 00000000..f41cd787
--- /dev/null
+++ b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
@@ -0,0 +1,124 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('RAID.cache_info') }}</span>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs },
+  data() {
+    return {
+      currentRaidSlot: 1,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            cache-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Статус наличия',
+          value: 'Есть',
+        },
+        {
+          parametr: 'Текущее значение занятой емкости',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Текущее значение свободной емкости',
+          value: '1 004 256 Мб',
+        },
+        {
+          parametr: 'Статус наличия BBU',
+          value: 'Есть',
+        },
+        {
+          parametr: 'Статус наличия FBU',
+          value: 'Нет',
+        },
+        {
+          parametr: 'Состояние BBU',
+          value: 'Готов',
+        },
+        {
+          parametr: 'Состояние FBU',
+          value: 'Заряжается',
+        },
+        {
+          parametr: 'Номинальная емкость',
+          value: '1 004 256 Мб',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.cache-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 0 0 16px 0;
+}
+</style>
diff --git a/src/views/SILA/RAID/Cache/index.js b/src/views/SILA/RAID/Cache/index.js
new file mode 100644
index 00000000..76acfcbe
--- /dev/null
+++ b/src/views/SILA/RAID/Cache/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDCachePage.vue';
diff --git a/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue
new file mode 100644
index 00000000..2f3093ab
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue
@@ -0,0 +1,131 @@
+<template>
+  <b-popover
+    placement="left"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="apply-reload-popover"
+    :target="`popover-action-${id}`"
+    @hidden="onHidden"
+  >
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === topPosition }"
+      @mouseover="scale = topPosition"
+      @click="
+        () => {
+          show = false;
+          appalyOnReload();
+        }
+      "
+    >
+      При перезагрузке
+    </b-button>
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === middlePosition }"
+      @mouseover="scale = middlePosition"
+      @click="
+        () => {
+          show = false;
+          appalyOption1();
+        }
+      "
+    >
+      Опция 1
+    </b-button>
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === bottomPosition }"
+      @mouseover="scale = bottomPosition"
+      @click="
+        () => {
+          show = false;
+          appalyOption2();
+        }
+      "
+    >
+      Опция 2
+    </b-button>
+    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+    appalyOnReload: {
+      type: Function,
+      default: null,
+    },
+    appalyOption1: {
+      type: Function,
+      default: null,
+    },
+    appalyOption2: {
+      type: Function,
+      default: null,
+    },
+    applyType: {
+      type: String,
+      default: 'reload',
+    },
+  },
+  data() {
+    return {
+      topPosition: 5,
+      middlePosition: 33,
+      bottomPosition: 60,
+      show: false,
+      scale: 5,
+    };
+  },
+  methods: {
+    onHidden() {
+      if (this.applyType === 'reload') {
+        this.scale = this.topPosition;
+      } else if (this.applyType === 'option1') {
+        this.scale = this.middlePosition;
+      } else {
+        this.scale = this.bottomPosition;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.analytical-table__status {
+  width: 10%;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.hovered-apply-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+#popover-apply-button {
+  justify-content: flex-start;
+  width: 240px;
+}
+
+.slider {
+  width: 240px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: $red-brand-primary;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+  position: absolute;
+  transition: ease-in 0.2s;
+  z-index: -1;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/OptionsPopover.vue b/src/views/SILA/RAID/Settings/OptionsPopover.vue
new file mode 100644
index 00000000..d1b85754
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/OptionsPopover.vue
@@ -0,0 +1,87 @@
+<template>
+  <b-popover
+    placement="left"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="popover-heigth-100"
+    :target="`popover-option-${id}`"
+  >
+    <b-button
+      id="popover-option-button"
+      variant="popover"
+      @click="
+        () => {
+          show = false;
+          openModal();
+        }
+      "
+    >
+      <img
+        src="@/assets/images/icon-settings-red.svg"
+        class="icon-chevron icon-settings"
+      />
+      Настройки
+    </b-button>
+    <b-button
+      id="popover-option-button"
+      class="delete"
+      variant="popover"
+      @click="show = false"
+    >
+      <img
+        src="@/assets/images/icon-clear-red.svg"
+        class="icon-chevron icon-delete"
+      />
+      Удалить
+    </b-button>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.$bvModal.show(`edit-tome${this.id}`);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.popover-heigth-100 {
+  max-width: 120px;
+}
+
+#popover-option-button {
+  padding: 0 9px 0 10px;
+  font-size: 12px;
+  &:hover {
+    color: $red-brand-primary;
+    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 25%) inset;
+  }
+  &:active {
+    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 50%) inset;
+  }
+  &.delete {
+    padding: 0 26px 0 13px;
+  }
+}
+
+.icon-settings {
+  padding-right: 5px;
+}
+
+.icon-delete {
+  padding-right: 10px;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
new file mode 100644
index 00000000..614c06d1
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
@@ -0,0 +1,318 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section" style="margin-top: 0px">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(action)="data">
+            <b-row v-if="data.index <= 5">
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-button
+                  :id="`popover-action-${data.index}`"
+                  class="popover-action-ractive"
+                  variant="toogle-popover"
+                >
+                  <img :is="iconChevron" class="icon-chevron" />
+                </b-button>
+                <action-settings-popover
+                  :id="data.index"
+                  :appaly-on-reload="appalyOnReload"
+                  :appaly-option1="appalyOption1"
+                  :appaly-option2="appalyOption2"
+                  :apply-type="applyType"
+                />
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('RAID.lun') }}</span>
+          <b-button
+            variant="primary"
+            class="apply-button apply-button__lun"
+            @click="$bvModal.show('add-tome-images')"
+          >
+            {{ $t('global.action.addNew') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items_2"
+          :fields="fields_2"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(action)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-button
+                  :id="`popover-option-${data.index}`"
+                  class="popover-option-ractive"
+                  variant="toogle-popover"
+                >
+                  <img
+                    src="@/assets/images/icon-options.svg"
+                    class="icon-chevron icon-options"
+                  />
+                </b-button>
+                <options-popover :id="data.index" />
+                <tome-modal
+                  :id="`edit-tome${data.index}`"
+                  :title="'Настройка виртуального тома'"
+                  :action="editTome"
+                  :index="data.index"
+                  :item="items_2[data.index]"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{ $t('RAID.microcode') }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="RAID.microcode_update"
+            popup="RAID.microcode_popoveer"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+    <tome-modal
+      :id="'add-tome-images'"
+      :title="'Новый виртуальный том'"
+      :action="createTome"
+    />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import ActionSettingsPopover from './ActionSettingsPopover';
+import OptionsPopover from './OptionsPopover';
+import TomeModal from './TomeModal';
+import { items, items_2 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+    ActionSettingsPopover,
+    OptionsPopover,
+    TomeModal,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      iconChevron,
+      applyType: 'reload',
+      currentRaidSlot: 1,
+      titleModal: '',
+      editIndex: null,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Имя',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+              settings-table`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Текущее значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'action',
+          label: 'Действие',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'name',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'size',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'action',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+    createTome() {
+      console.log('Новый том создан');
+    },
+    editTome(index) {
+      console.log('Том изменен');
+      console.log(index);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.settings-table {
+  width: 35%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.popover-action-ractive {
+  margin: 0 0 0 83%;
+}
+
+.popover-option-ractive {
+  margin: 0 0 0 70%;
+}
+
+.apply-button__lun {
+  width: 245px;
+  height: 36px;
+  margin-left: auto;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/TomeModal.vue b/src/views/SILA/RAID/Settings/TomeModal.vue
new file mode 100644
index 00000000..c77f4c13
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/TomeModal.vue
@@ -0,0 +1,179 @@
+<template>
+  <b-modal :id="id" class="modal-images" hide-footer>
+    <template #modal-title>
+      <span class="semi-bold-20px">{{ title }}</span>
+    </template>
+    <div class="modal-body">
+      <label class="regular-12px tretiatry" for="name"> Имя </label>
+      <b-form-input
+        id="name"
+        v-model="tomeName"
+        placeholder="Название тома"
+        type="text"
+        class="form-control form-input"
+      >
+      </b-form-input>
+
+      <form-control>
+        <label class="regular-12px tretiatry type-select-label" for="type"
+          >Тип</label
+        >
+        <b-form-select
+          id="type"
+          v-model="tomeType"
+          :options="tomeTypes"
+          class="select-connection regular-14px"
+        />
+      </form-control>
+
+      <form-control>
+        <label class="regular-12px tretiatry driver-select-label" for="driver"
+          >Физический накопитель</label
+        >
+        <b-form-select
+          id="driver"
+          v-model="tomeDriver"
+          :options="tomeDrivers"
+          class="select-connection regular-14px"
+        />
+      </form-control>
+
+      <label class="regular-12px tretiatry" for="size"> Размер Мб </label>
+      <b-form-input
+        id="size"
+        v-model="tomeSize"
+        placeholder="Размер Тома"
+        type="text"
+        class="form-control form-input"
+      >
+      </b-form-input>
+      <b-button class="upload-button" variant="primary" @click="action(index)">
+        {{ item ? $t('global.action.save') : $t('global.action.addTome') }}
+      </b-button>
+    </div>
+  </b-modal>
+</template>
+<script>
+import { required } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+    index: {
+      type: Number,
+      default: null,
+    },
+    action: {
+      type: Function,
+      default: null,
+    },
+    item: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      tomeName: '',
+      tomeSize: '',
+      tomeType: 1,
+      tomeTypes: [
+        { value: 1, text: 'RAID-0' },
+        { value: 2, text: 'RAID-1' },
+      ],
+      tomeDriver: 1,
+      tomeDrivers: [
+        { value: 1, text: 'Накопитель 1' },
+        { value: 2, text: 'Накопитель 2' },
+      ],
+    };
+  },
+  mounted() {
+    this.tomeName = this.item.name;
+    this.tomeSize = this.item.size;
+  },
+  validations: {
+    userInfo: {
+      username: {
+        required,
+      },
+      password: {
+        required,
+      },
+    },
+  },
+};
+</script>
+<style lang="scss">
+.modal-content {
+  border-radius: 16px;
+  width: 480px;
+}
+.modal-header {
+  border-bottom: none;
+}
+</style>
+<style lang="scss" scoped>
+.form-input {
+  height: 56px;
+  padding-top: 30px;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+  margin: -30px 0 20px 0;
+}
+
+.modal-body {
+  width: 446px;
+}
+
+.caption-12px,
+.regular-12px {
+  padding-left: 10px;
+}
+
+.select-connection {
+  height: 56px;
+  padding-top: 30px;
+  border: none;
+  border-radius: 8px;
+  margin: -0px 0 18px 0;
+  background-color: $surface-secondary;
+  background-image: url('../../../../assets/images/icon-chevron.svg');
+}
+
+.type-select-label {
+  position: absolute;
+  top: 25%;
+}
+
+.driver-select-label {
+  position: absolute;
+  top: 44%;
+  left: 4%;
+}
+
+.form-background .custom-select,
+.form-background .form-control {
+  border-radius: 8px;
+  border: none;
+  background-color: rgba(26, 62, 91, 0.05);
+}
+
+.upload-button {
+  width: 100%;
+  height: 40px;
+  margin: 0 auto 10px;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/helpers.js b/src/views/SILA/RAID/Settings/helpers.js
new file mode 100644
index 00000000..5727102a
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/helpers.js
@@ -0,0 +1,62 @@
+export const items = [
+  {
+    parametr: 'Режим контроллера',
+    value: 'RAID',
+    action: 'Автоматически',
+  },
+  {
+    parametr: 'Режим чтения патруля',
+    value: 'Автоматически',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Действие в режиме ручного патрулирования',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+];
+
+export const items_2 = [
+  {
+    name: 'Том 1',
+    type: 'RAID-0',
+    size: '100 125 Мб',
+    action: 'Загружен',
+  },
+  {
+    name: 'Том 2',
+    type: 'RAID-1',
+    size: '200 250 Мб',
+    action: 'Загружен',
+  },
+];
diff --git a/src/views/SILA/RAID/Settings/index.js b/src/views/SILA/RAID/Settings/index.js
new file mode 100644
index 00000000..535dbe3a
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDSettingsPage.vue';
diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
new file mode 100644
index 00000000..db2407d5
--- /dev/null
+++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
@@ -0,0 +1,267 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(value)="{ index, value }">
+            <b-row v-if="index === 0">
+              <b-col>
+                <img
+                  src="@/assets/images/fans-page/working.svg"
+                  class="icon-chevron"
+                />
+                <span>
+                  {{ 'Работоспособен' }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="index === 7">
+              <b-col>
+                <span class="regular-12px pointer" @click="redirectDrivers">
+                  {{ value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="index === 8">
+              <b-col>
+                <span class="regular-12px pointer" @click="redirectVirtual">
+                  {{ value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>{{ value }}</span>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+      <b-button
+        v-b-toggle.toggle-collapse
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <component :is="iconChevronUp" class="icon-expand-right" />
+        {{ $t('RAID.extraParam') }}
+      </b-button>
+      <b-collapse id="toggle-collapse" class="nav-item__nav">
+        <page-section class="bootstrap-table__section">
+          <b-table
+            responsive="md"
+            class="bootstrap-table bootstrap-table__stripes"
+            :items="items_2"
+            :fields="fields_2"
+          >
+            <template #cell(value)="{ index, value }">
+              <b-row v-if="index === 0">
+                <b-col>
+                  <img
+                    src="@/assets/images/fans-page/working.svg"
+                    class="icon-chevron"
+                  />
+                  <span>
+                    {{ 'Работоспособен' }}
+                  </span>
+                </b-col>
+              </b-row>
+              <b-row v-else>
+                <b-col>
+                  <span>{{ value }}</span>
+                </b-col>
+              </b-row>
+            </template>
+          </b-table>
+        </page-section>
+      </b-collapse>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs },
+  data() {
+    return {
+      iconChevronUp: iconChevronUp,
+      currentRaidSlot: 1,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Статус',
+          value: true,
+        },
+        {
+          parametr: 'Имя',
+          value: 'RAID-контроллер 1',
+        },
+        {
+          parametr: 'Описание',
+          value: 'Встроенный',
+        },
+        {
+          parametr: 'PCI слот',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Версия прошивки',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Версия драйвера',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Объем cache памяти, Мб',
+          value: '8 096',
+        },
+        {
+          parametr: 'Виртуальные накопители',
+          value: 'Перейти к накопителям',
+        },
+        {
+          parametr: 'Физические накопители',
+          value: 'Перейти к накопителям',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+      items_2: [
+        {
+          param: 'Статус',
+          value: true,
+        },
+        {
+          param: 'Скорость',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'PCI Vendor ID',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'Скорость',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'PCI Vendor ID',
+          value: 'Информация недоступна',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+    redirectDrivers() {
+      this.$router.push('/drivers-static');
+    },
+    redirectVirtual() {
+      this.$router.push('/virtual-drivers');
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__stripes tr:nth-of-type(even) {
+  background-color: rgb(255 255 255);
+}
+.bootstrap-table__head_bg {
+  border-top: none;
+  display: none;
+}
+
+.bootstrap-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.1);
+  border-top: none;
+}
+
+.bootstrap-table__column-last {
+  border-top: none;
+}
+
+.bootstrap-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.1);
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.pointer {
+  color: $red-brand-primary;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SILA/RAID/Specification/index.js b/src/views/SILA/RAID/Specification/index.js
new file mode 100644
index 00000000..a040cff4
--- /dev/null
+++ b/src/views/SILA/RAID/Specification/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDSpecificationPage.vue';
diff --git a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
new file mode 100644
index 00000000..bd82757f
--- /dev/null
+++ b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
@@ -0,0 +1,138 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('global.table.info') }}</span>
+      </page-section>
+      <data-tabs
+        :slots="memorySlots"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="180"
+        :slider-width="156"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeDrivers')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.reloadMicrocodeDrivers"
+            popup="SystemDescription.reloadMicrocodeDrivers"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs, Popover },
+  data() {
+    return {
+      currentMemorySlot: 1,
+      memorySlots: [
+        { id: 1, name: 'Виртуальный накопитель 1' },
+        { id: 2, name: 'Виртуальный накопитель 2' },
+        { id: 3, name: 'Виртуальный накопитель 3' },
+        { id: 4, name: 'Виртуальный накопитель 4' },
+        { id: 5, name: 'Виртуальный накопитель 5' },
+        { id: 6, name: 'Виртуальный накопитель 6' },
+        { id: 7, name: 'Виртуальный накопитель 7' },
+        { id: 8, name: 'Виртуальный накопитель 8' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            memory-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Текущий статус',
+          value: 'Готов',
+        },
+        {
+          parametr: 'Номинальная емкость',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Тип избыточности',
+          value: 'RAID',
+        },
+        {
+          parametr: 'Входящие в состав физические накопители',
+          value: 'Накопитель 1, Накопитель 2, Накопитель 3',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.memory-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+.info_section {
+  margin-bottom: 0px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/VirtualDrivers/index.js b/src/views/SILA/VirtualDrivers/index.js
new file mode 100644
index 00000000..23cd6fe1
--- /dev/null
+++ b/src/views/SILA/VirtualDrivers/index.js
@@ -0,0 +1 @@
+export { default } from './VirtualDriversPage.vue';
diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
index b96c9251..94845854 100644
--- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -9,7 +9,32 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <template #cell(value)="data">
-        <b-row v-if="!(typeof data.value === 'boolean')">
+        <b-row v-if="data.index === 0">
+          <b-col>
+            <span>
+              {{ data.value ? 'Включен' : 'Выключен' }}
+            </span>
+          </b-col>
+          <b-col>
+            <b-button
+              :id="`popover-choice-${data.index}`"
+              class="popover-option-ractive"
+              variant="toogle-popover"
+            >
+              <img :is="iconChevron" class="icon-chevron" />
+            </b-button>
+            <two-chioce-popover
+              :id="data.index"
+              fitst-option="Включен"
+              second-option="Выключен"
+              :chosen-option="chosenOption"
+              :first-action="setOn"
+              :second-action="setOff"
+              placement="leftbottom"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else>
           <b-form-input
             v-if="systems[data.index].isEdit"
             ref="input"
@@ -37,34 +62,11 @@
             <img
               v-else
               src="@/assets/images/icon-edit.svg"
-              class="system-network-table__icon pointer"
+              class="system-network-table__icon icon-edit pointer"
               @click="editCellHandler(data)"
             />
           </b-col>
         </b-row>
-        <b-row v-else class="popup-container">
-          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
-          <b-col v-else>{{ 'Выключен' }}</b-col>
-          <div
-            v-if="isActive"
-            class="popup"
-            :class="{ popup_active: isActive }"
-          >
-            <button class="popup-button popup-on medium-12px" @click="DHCPon">
-              <span class="popup-text">Включен</span>
-            </button>
-            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
-              <span class="popup-text">Выключен</span>
-            </button>
-          </div>
-          <b-col class="system-network-table__icon-col">
-            <img
-              :is="iconChevron"
-              class="pointer"
-              @click="isActive = !isActive"
-            />
-          </b-col>
-        </b-row>
       </template>
     </b-table>
   </page-section>
@@ -75,18 +77,20 @@ import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import PageSection from '@/components/Global/PageSection';
 import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
-  components: { PageSection },
+  components: { PageSection, TwoChiocePopover },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
   data() {
     return {
       selectedCell: null,
       isActive: false,
       isIpInvalid: false,
+      chosenOption: 'Выключен',
       fields: [
         {
           key: 'param',
@@ -174,6 +178,14 @@ export default {
         ipCheck
       );
     },
+    setOn() {
+      this.chosenOption = 'Включен';
+      this.systems[0].value = true;
+    },
+    setOff() {
+      this.chosenOption = 'Выключен';
+      this.systems[0].value = false;
+    },
     DHCPoff() {
       this.systems[0].value = false;
       this.isActive = false;
@@ -196,10 +208,8 @@ export default {
 
 .system-network-table__icon-col {
   max-width: 20%;
-  margin: 0 5px 0 auto !important;
 }
 </style>
-
 <style lang="scss" scoped>
 .row {
   align-items: baseline;
@@ -209,10 +219,6 @@ export default {
   margin: 0 !important;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .close_icon {
   margin-left: 5px;
 }
@@ -252,7 +258,6 @@ export default {
   margin: 4px;
   border-radius: 8px;
   border: none;
-  cursor: pointer;
 
   display: flex;
   align-items: center;
@@ -286,4 +291,9 @@ export default {
 .popup_active {
   visibility: visible;
 }
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 9px 0 auto;
+}
 </style>
diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
index 3de1c414..3f47b1fd 100644
--- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
@@ -195,10 +195,6 @@ export default {
   margin: 0 !important;
 }
 
-.edit {
-  cursor: pointer;
-}
-
 .close_icon {
   margin-left: 5px;
 }
diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
index a40edb41..03cd1356 100644
--- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
+++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
@@ -119,28 +119,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.bootstrap-table__stripes tr:nth-of-type(even) {
-  background-color: rgb(255 255 255);
-}
-
-.bootstrap-table__head_bg {
-  border-top: none;
-  display: none;
-}
-
-.bootstrap-table__column-first {
-  border-right: 1px solid rgba(26, 62, 91, 0.1);
-  border-top: none;
-}
-
-.bootstrap-table__column-last {
-  border-top: none;
-}
-
-.bootstrap-table__td {
-  border-top: 1px solid rgba(26, 62, 91, 0.1);
-}
-
 .bootstrap-table__server-param {
   width: 30%;
 }
-- 
cgit v1.2.3