From 0cbf1713dc23e0039653891fab1fa2c52b4bfaf3 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Wed, 1 Jun 2022 17:40:28 +0300
Subject: Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add
 reload BMC.

---
 .../BMC/Configuration/BMCConfigurationControl.vue  |  10 +-
 .../BMC/Configuration/BMCConfigurationTable.vue    |  72 ++-
 .../Fans/StaticInformation/FansStaticPage.vue      |  10 +-
 src/views/HardwareStatus/Inventory/Inventory.vue   |  73 +--
 src/views/Logs/EventLogs/EventLogs.vue             | 465 ++++++++---------
 .../Specification/MemoryStaticPage.vue             |  10 +-
 src/views/Operations/Kvm/Kvm.vue                   |  13 +-
 .../Operations/SerialOverLan/SerialOverLan.vue     |  13 +-
 .../ServerPowerOperations/BootSettings.vue         |  38 +-
 .../ServerPowerOperations.vue                      | 370 +++++++-------
 .../Specification/PowerStaticPage.vue              |   5 +-
 .../AcceleratorSpecificationTable.vue              |   7 +-
 .../Specification/ProcessorsSpecificationTable.vue |   7 +-
 src/views/SILA/EventLogs/EventLogs.vue             | 548 ++++++---------------
 src/views/SILA/PciDevices/PciDevicesPage.vue       |   5 +-
 .../RAID/Specification/RAIDSpecificationPage.vue   |   7 +-
 src/views/Settings/DateTime/DateTime.vue           |  62 ++-
 .../Info/InventoryTableSystem.vue                  |  47 +-
 .../SystemDescription/Info/SystemDescription.vue   | 138 +++---
 19 files changed, 841 insertions(+), 1059 deletions(-)

(limited to 'src/views')

diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue
index 0eb8bfc9..2cc259a7 100644
--- a/src/views/BMC/Configuration/BMCConfigurationControl.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue
@@ -10,6 +10,7 @@
           description="BMC.ReloadBmc"
           popup="BMC.ReloadBmc_popup"
           button="BMC.ReloadBmc"
+          :action="rebootBmc"
         />
         <settings-import-popup
           id="popover-reactive-2"
@@ -53,13 +54,14 @@
 import SettingsImportPopup from './SettingsImportPopup';
 import PageSection from '@/components/Global/PageSection';
 import Popover from '@/components/Global/Popover';
-
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 export default {
   components: {
     PageSection,
     Popover,
     SettingsImportPopup,
   },
+  mixins: [BVToastMixin],
   data() {
     return {
       timeOption: 'resetBios',
@@ -80,6 +82,12 @@ export default {
     redirectNetworkParametrs() {
       this.$router.push('/network-parametrs');
     },
+    rebootBmc() {
+      this.$store
+        .dispatch('controls/rebootBmc')
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
   },
 };
 </script>
diff --git a/src/views/BMC/Configuration/BMCConfigurationTable.vue b/src/views/BMC/Configuration/BMCConfigurationTable.vue
index a550743e..51e428e3 100644
--- a/src/views/BMC/Configuration/BMCConfigurationTable.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationTable.vue
@@ -4,27 +4,10 @@
       responsive="md"
       show-empty
       class="bootstrap-rounded-table"
-      :items="systems"
+      :items="items"
       :fields="fields"
       :empty-text="$t('global.table.emptyMessage')"
     >
-      <template #cell(value)="data">
-        <b-row v-if="data.index === 2">
-          <b-col>
-            <span v-if="isAddersСolon">
-              {{ '487566942332' }}
-            </span>
-            <span v-else>
-              {{ data.value }}
-            </span>
-          </b-col>
-          <b-col class="macAddresCol">
-            <b-form-checkbox v-model="isAddersСolon"> </b-form-checkbox>
-            <span> {{ 'XXXX формат' }} </span>
-          </b-col>
-        </b-row>
-        <span v-else>{{ data.value }}</span>
-      </template>
     </b-table>
   </page-section>
 </template>
@@ -64,17 +47,52 @@ export default {
         },
       ],
       expandRowLabel: expandRowLabel,
-      systems: [
+      items: null,
+    };
+  },
+  computed: {
+    bmc() {
+      return this.$store.getters['bmc/bmc'];
+    },
+  },
+  watch: {
+    bmc() {
+      this.items = [
         {
-          param: 'Время BMC',
-          value: '14:20',
+          param: 'Время сервера',
+          value: this.bmc.dateTime,
         },
-        { param: 'Версия прошивки', value: '1.214.248 beta' },
-        { param: 'MAC - адреса', value: '48:75:66:94:23:32' },
-        { param: 'IP - адреса', value: '192.168.48.1' },
-        { param: 'Имя ВМС', value: 'ВМС-007' },
-      ],
-    };
+        {
+          param: 'uuid',
+          value: this.bmc.uuid,
+        },
+        {
+          param: 'Версия прошивки',
+          value: this.bmc.firmwareVersion,
+        },
+        {
+          param: 'Модель',
+          value: this.bmc.model,
+        },
+        {
+          param: 'Описание',
+          value: this.bmc.description,
+        },
+        {
+          param: 'Максимальное количество сессий',
+          value: this.bmc.graphicalConsoleMaxSessions,
+        },
+      ];
+    },
+  },
+  created() {
+    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
+      this.$root.$emit('hardware-status-bmc-manager-complete');
+    });
+    const bmcManagerTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
+    });
+    Promise.all([bmcManagerTablePromise]).finally(() => this.endLoader());
   },
 };
 </script>
diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue
index 85b5191f..7e3a9849 100644
--- a/src/views/Fans/StaticInformation/FansStaticPage.vue
+++ b/src/views/Fans/StaticInformation/FansStaticPage.vue
@@ -16,19 +16,13 @@
       >
         <template #cell(status)="{ value }">
           <div v-if="value" class="fans-table-col-first__cell">
-            <img
-              class="status__img"
-              src="@/assets/images/fans-page/working.svg"
-            />
+            <img class="status__img" src="@/assets/images/status/on.svg" />
             <span>
               {{ $t('global.status.inWork') }}
             </span>
           </div>
           <div v-else class="fans-table-col-first__cell">
-            <img
-              class="status__img"
-              src="@/assets/images/fans-page/notWorking.svg"
-            />
+            <img class="status__img" src="@/assets/images/status/off.svg" />
             <span>
               {{ $t('global.status.outWorking') }}
             </span>
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index fcdbf8d2..1fbbe81f 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,50 +1,51 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-2">
     <page-title />
+    <div class="main-container">
+      <!-- Service indicators -->
+      <service-indicator />
 
-    <!-- Service indicators -->
-    <service-indicator />
+      <!-- Quicklinks section -->
+      <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+        <b-row class="w-75">
+          <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
+            <div v-for="item in column" :key="item.id">
+              <b-link
+                :href="item.href"
+                :data-ref="item.dataRef"
+                @click.prevent="scrollToOffset"
+              >
+                <jump-link /> {{ item.linkText }}
+              </b-link>
+            </div>
+          </b-col>
+        </b-row>
+      </page-section>
 
-    <!-- Quicklinks section -->
-    <page-section :section-title="$t('pageInventory.quicklinkTitle')">
-      <b-row class="w-75">
-        <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
-          <div v-for="item in column" :key="item.id">
-            <b-link
-              :href="item.href"
-              :data-ref="item.dataRef"
-              @click.prevent="scrollToOffset"
-            >
-              <jump-link /> {{ item.linkText }}
-            </b-link>
-          </div>
-        </b-col>
-      </b-row>
-    </page-section>
+      <!-- System table -->
+      <table-system ref="system" />
 
-    <!-- System table -->
-    <table-system ref="system" />
+      <!-- BMC manager table -->
+      <table-bmc-manager ref="bmc" />
 
-    <!-- BMC manager table -->
-    <table-bmc-manager ref="bmc" />
+      <!-- Chassis table -->
+      <table-chassis ref="chassis" />
 
-    <!-- Chassis table -->
-    <table-chassis ref="chassis" />
+      <!-- DIMM slot table -->
+      <table-dimm-slot ref="dimms" />
 
-    <!-- DIMM slot table -->
-    <table-dimm-slot ref="dimms" />
+      <!-- Fans table -->
+      <table-fans ref="fans" />
 
-    <!-- Fans table -->
-    <table-fans ref="fans" />
+      <!-- Power supplies table -->
+      <table-power-supplies ref="powerSupply" />
 
-    <!-- Power supplies table -->
-    <table-power-supplies ref="powerSupply" />
+      <!-- Processors table -->
+      <table-processors ref="processors" />
 
-    <!-- Processors table -->
-    <table-processors ref="processors" />
-
-    <!-- Assembly table -->
-    <table-assembly ref="assembly" />
+      <!-- Assembly table -->
+      <table-assembly ref="assembly" />
+    </div>
   </b-container>
 </template>
 
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 5b8ca110..10aa9469 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,241 +1,248 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-2">
     <page-title />
-    <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pageEventLogs.table.searchLogs')"
-          data-test-id="eventLogs-input-searchLogs"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="allLogs.length"
-          ></table-cell-count>
-        </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
-        <table-date-filter @change="onChangeDateTimeFilter" />
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
-        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
-        >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
-        <b-button
-          variant="primary"
-          :class="{ disabled: allLogs.length === 0 }"
-          :download="exportFileNameByDate()"
-          :href="href"
-        >
-          <icon-export /> {{ $t('global.action.exportAll') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
-        <table-toolbar
-          ref="toolbar"
-          :selected-items-count="selectedRows.length"
-          :actions="batchActions"
-          @clear-selected="clearSelectedRows($refs.table)"
-          @batch-action="onBatchAction"
-        >
-          <template #toolbar-buttons>
-            <b-button variant="primary" @click="resolveLogs">
-              {{ $t('pageEventLogs.resolve') }}
-            </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
-              {{ $t('pageEventLogs.unresolve') }}
-            </b-button>
-            <table-toolbar-export
-              :data="batchExportData"
-              :file-name="exportFileNameByDate()"
-            />
-          </template>
-        </table-toolbar>
-        <b-table
-          id="table-event-logs"
-          ref="table"
-          responsive="md"
-          selectable
-          no-select-on-click
-          sort-icon-left
-          hover
-          no-sort-reset
-          sort-desc
-          show-empty
-          sort-by="id"
-          :fields="fields"
-          :items="filteredLogs"
-          :sort-compare="onSortCompare"
-          :empty-text="$t('global.table.emptyMessage')"
-          :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
-          :filter="searchFilter"
-          :busy="isBusy"
-          @filtered="onFiltered"
-          @row-selected="onRowSelected($event, filteredLogs.length)"
-        >
-          <!-- Checkbox column -->
-          <template #head(checkbox)>
-            <b-form-checkbox
-              v-model="tableHeaderCheckboxModel"
-              data-test-id="eventLogs-checkbox-selectAll"
-              :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(checkbox)="row">
-            <b-form-checkbox
-              v-model="row.rowSelected"
-              :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
-              @change="toggleSelectRow($refs.table, row.index)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
-          </template>
+    <div class="main-container">
+      <b-row class="align-items-start">
+        <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+          <search
+            :placeholder="$t('pageEventLogs.table.searchLogs')"
+            data-test-id="eventLogs-input-searchLogs"
+            @change-search="onChangeSearchInput"
+            @clear-search="onClearSearchInput"
+          />
+          <div class="ml-sm-4">
+            <table-cell-count
+              :filtered-items-count="filteredRows"
+              :total-number-of-cells="allLogs.length"
+            ></table-cell-count>
+          </div>
+        </b-col>
+        <b-col sm="8" md="7" xl="6">
+          <table-date-filter @change="onChangeDateTimeFilter" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col class="text-right">
+          <table-filter
+            :filters="tableFilters"
+            @filter-change="onFilterChange"
+          />
+          <b-button
+            variant="link"
+            :disabled="allLogs.length === 0"
+            @click="deleteAllLogs"
+          >
+            <icon-delete /> {{ $t('global.action.deleteAll') }}
+          </b-button>
+          <b-button
+            variant="primary"
+            :class="{ disabled: allLogs.length === 0 }"
+            :download="exportFileNameByDate()"
+            :href="href"
+          >
+            <icon-export /> {{ $t('global.action.exportAll') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <table-toolbar
+            ref="toolbar"
+            :selected-items-count="selectedRows.length"
+            :actions="batchActions"
+            @clear-selected="clearSelectedRows($refs.table)"
+            @batch-action="onBatchAction"
+          >
+            <template #toolbar-buttons>
+              <b-button variant="primary" @click="resolveLogs">
+                {{ $t('pageEventLogs.resolve') }}
+              </b-button>
+              <b-button variant="primary" @click="unresolveLogs">
+                {{ $t('pageEventLogs.unresolve') }}
+              </b-button>
+              <table-toolbar-export
+                :data="batchExportData"
+                :file-name="exportFileNameByDate()"
+              />
+            </template>
+          </table-toolbar>
+          <b-table
+            id="table-event-logs"
+            ref="table"
+            responsive="md"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :fields="fields"
+            :items="filteredLogs"
+            :sort-compare="onSortCompare"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :per-page="perPage"
+            :current-page="currentPage"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @filtered="onFiltered"
+            @row-selected="onRowSelected($event, filteredLogs.length)"
+          >
+            <!-- Checkbox column -->
+            <template #head(checkbox)>
+              <b-form-checkbox
+                v-model="tableHeaderCheckboxModel"
+                data-test-id="eventLogs-checkbox-selectAll"
+                :indeterminate="tableHeaderCheckboxIndeterminate"
+                @change="onChangeHeaderCheckbox($refs.table)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(checkbox)="row">
+              <b-form-checkbox
+                v-model="row.rowSelected"
+                :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
 
-          <!-- Expand chevron icon -->
-          <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
-            >
-              <icon-chevron />
-            </b-button>
-          </template>
+            <!-- Expand chevron icon -->
+            <template #cell(expandRow)="row">
+              <b-button
+                variant="link"
+                :aria-label="expandRowLabel"
+                :title="expandRowLabel"
+                class="btn-icon-only"
+                @click="toggleRowDetails(row)"
+              >
+                <icon-chevron />
+              </b-button>
+            </template>
 
-          <template #row-details="{ item }">
-            <b-container fluid>
-              <b-row>
-                <b-col>
-                  <dl>
-                    <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
-                  </dl>
-                  <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</dd>
-                  </dl>
-                </b-col>
-                <b-col>
-                  <dl>
-                    <!-- Modified date -->
-                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
-                    <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
-                    </dd>
-                    <dd v-else>--</dd>
-                  </dl>
-                </b-col>
-                <b-col class="text-nowrap">
-                  <b-button
-                    class="btn btn-secondary float-right"
-                    :href="item.additionalDataUri"
-                    target="_blank"
-                  >
-                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
-                  </b-button>
-                </b-col>
-              </b-row>
-            </b-container>
-          </template>
+            <template #row-details="{ item }">
+              <b-container fluid>
+                <b-row>
+                  <b-col>
+                    <dl>
+                      <!-- Name -->
+                      <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                      <dd>{{ dataFormatter(item.name) }}</dd>
+                    </dl>
+                    <dl>
+                      <!-- Type -->
+                      <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                      <dd>{{ dataFormatter(item.type) }}</dd>
+                    </dl>
+                  </b-col>
+                  <b-col>
+                    <dl>
+                      <!-- Modified date -->
+                      <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+                      <dd v-if="item.modifiedDate">
+                        {{ item.modifiedDate | formatDate }}
+                        {{ item.modifiedDate | formatTime }}
+                      </dd>
+                      <dd v-else>--</dd>
+                    </dl>
+                  </b-col>
+                  <b-col class="text-nowrap">
+                    <b-button
+                      class="btn btn-secondary float-right"
+                      :href="item.additionalDataUri"
+                      target="_blank"
+                    >
+                      <icon-download />{{
+                        $t('pageEventLogs.additionalDataUri')
+                      }}
+                    </b-button>
+                  </b-col>
+                </b-row>
+              </b-container>
+            </template>
 
-          <!-- Severity column -->
-          <template #cell(severity)="{ value }">
-            <status-icon v-if="value" :status="statusIcon(value)" />
-            {{ value }}
-          </template>
-          <!-- Date column -->
-          <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
-          </template>
+            <!-- Severity column -->
+            <template #cell(severity)="{ value }">
+              <status-icon v-if="value" :status="statusIcon(value)" />
+              {{ value }}
+            </template>
+            <!-- Date column -->
+            <template #cell(date)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </template>
 
-          <!-- Status column -->
-          <template #cell(status)="row">
-            <b-form-checkbox
-              v-model="row.item.status"
-              name="switch"
-              switch
-              @change="changelogStatus(row.item)"
-            >
-              <span v-if="row.item.status">
-                {{ $t('pageEventLogs.resolved') }}
-              </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(filterByStatus)="{ value }">
-            {{ value }}
-          </template>
+            <!-- Status column -->
+            <template #cell(status)="row">
+              <b-form-checkbox
+                v-model="row.item.status"
+                name="switch"
+                switch
+                @change="changelogStatus(row.item)"
+              >
+                <span v-if="row.item.status">
+                  {{ $t('pageEventLogs.resolved') }}
+                </span>
+                <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(filterByStatus)="{ value }">
+              {{ value }}
+            </template>
 
-          <!-- Actions column -->
-          <template #cell(actions)="row">
-            <table-row-action
-              v-for="(action, index) in row.item.actions"
-              :key="index"
-              :value="action.value"
-              :title="action.title"
-              :row-data="row.item"
-              :export-name="exportFileNameByDate('export')"
-              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
-              @click-table-action="onTableRowAction($event, row.item)"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
-              </template>
-            </table-row-action>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
+            <!-- Actions column -->
+            <template #cell(actions)="row">
+              <table-row-action
+                v-for="(action, index) in row.item.actions"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :row-data="row.item"
+                :export-name="exportFileNameByDate('export')"
+                :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+                @click-table-action="onTableRowAction($event, row.item)"
+              >
+                <template #icon>
+                  <icon-export v-if="action.value === 'export'" />
+                  <icon-trashcan v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </b-col>
+      </b-row>
 
-    <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
-        <b-form-group
-          class="table-pagination-select"
-          :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
-        >
-          <b-form-select
-            id="pagination-items-per-page"
-            v-model="perPage"
-            :options="itemsPerPageOptions"
+      <!-- Table pagination -->
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            class="table-pagination-select"
+            :label="$t('global.table.itemsPerPage')"
+            label-for="pagination-items-per-page"
+          >
+            <b-form-select
+              id="pagination-items-per-page"
+              v-model="perPage"
+              :options="itemsPerPageOptions"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col sm="6">
+          <b-pagination
+            v-model="currentPage"
+            first-number
+            last-number
+            :per-page="perPage"
+            :total-rows="getTotalRowCount(filteredRows)"
+            aria-controls="table-event-logs"
           />
-        </b-form-group>
-      </b-col>
-      <b-col sm="6">
-        <b-pagination
-          v-model="currentPage"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
-      </b-col>
-    </b-row>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
index a40bd2ea..679f4ba1 100644
--- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue
+++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
@@ -42,10 +42,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
@@ -74,10 +71,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 8c51ace4..324d50d0 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -29,8 +29,7 @@
         </div>
       </div>
     </div>
-    <div class="console"></div>
-    <!-- <kvm-console :is-full-window="false" /> -->
+    <kvm-console :is-full-window="false" />
     <images-modal />
   </b-container>
 </template>
@@ -38,14 +37,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import ImagesModal from './ImagesModal';
-// import KvmConsole from './KvmConsole';
+import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
   components: {
     PageTitle,
     ImagesModal,
-    // KvmConsole
+    KvmConsole,
   },
 };
 </script>
@@ -112,10 +111,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 6f6852cf..33533bf9 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -39,8 +39,7 @@
           </div>
         </div>
       </div>
-      <div class="console"></div>
-      <!-- <serial-over-lan-console :is-full-window="false" /> -->
+      <serial-over-lan-console :is-full-window="false" />
     </page-section>
     <images-modal />
   </b-container>
@@ -49,7 +48,7 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-// import SerialOverLanConsole from './SerialOverLanConsole';
+import SerialOverLanConsole from './SerialOverLanConsole';
 import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
@@ -58,7 +57,7 @@ export default {
     PageSection,
     PageTitle,
     ImagesModal,
-    // SerialOverLanConsole,
+    SerialOverLanConsole,
   },
 };
 </script>
@@ -124,10 +123,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index 4896286b..ab3c22b9 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="form-background p-3">
+    <label class="semi-bold-16px">{{
+      $t('pageServerPowerOperations.serverBootSettings')
+    }}</label>
     <b-form novalidate @submit.prevent="handleSubmit">
-      <b-form-group
-        :label="
+      <b-form-group label-for="boot-option" class="mb-3 regular-12px">
+        <label class="semi-bold-12px">{{
           $t('pageServerPowerOperations.bootSettings.bootSettingsOverride')
-        "
-        label-for="boot-option"
-        class="mb-3"
-      >
+        }}</label>
         <b-form-select
           id="boot-option"
           v-model="form.bootOption"
+          class="boot-select regular-14px"
           :disabled="bootSourceOptions.length === 0"
           :options="bootSourceOptions"
           @change="onChangeSelect"
@@ -19,30 +20,32 @@
       </b-form-group>
       <b-form-checkbox
         v-model="form.oneTimeBoot"
-        class="mb-4"
+        class="mb-4 regular-12px cb"
         :disabled="form.bootOption === 'None'"
         @change="$v.form.oneTimeBoot.$touch()"
       >
         {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
       </b-form-checkbox>
-      <b-form-group
-        :label="$t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')"
-      >
-        <b-form-text id="tpm-required-policy-help-block">
+      <b-form-group>
+        <label class="semi-bold-12px">{{
+          $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')
+        }}</label>
+        <label id="tpm-required-policy-help-block" class="regular-12px">
           {{
             $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicyHelper')
           }}
-        </b-form-text>
+        </label>
         <b-form-checkbox
           id="tpm-required-policy"
           v-model="form.tpmPolicyOn"
+          class="regular-12px cb"
           aria-describedby="tpm-required-policy-help-block"
           @change="$v.form.tpmPolicyOn.$touch()"
         >
           {{ $t('global.status.enabled') }}
         </b-form-checkbox>
       </b-form-group>
-      <b-button variant="primary" type="submit" class="mb-3">
+      <b-button variant="primary" size="md" type="submit" class="mb-3">
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
@@ -130,3 +133,12 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.boot-select {
+  height: 40px;
+  max-width: 270px;
+  border: none;
+  border-radius: 8px;
+  background-image: url('../../../assets/images/icon-chevron.svg');
+}
+</style>
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 9e030837..f2fb62e2 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,147 +1,192 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="mb-4">
-      <b-col md="8" xl="6">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.currentStatus')"
-        >
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
-                <dd
-                  v-if="serverStatus === 'on'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.on') }}
-                </dd>
-                <dd
-                  v-else-if="serverStatus === 'off'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.off') }}
-                </dd>
-                <dd v-else>
-                  {{ $t('global.status.notAvailable') }}
-                </dd>
-              </dl>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>
-                  {{ $t('pageServerPowerOperations.lastPowerOperation') }}
-                </dt>
-                <dd
-                  v-if="lastPowerOperationTime"
-                  data-test-id="powerServerOps-text-lastPowerOp"
-                >
-                  {{ lastPowerOperationTime | formatDate }}
-                  {{ lastPowerOperationTime | formatTime }}
-                </dd>
-                <dd v-else>--</dd>
-              </dl>
-            </b-col>
-          </b-row>
-        </page-section>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.serverBootSettings')"
-        >
-          <boot-settings />
-        </page-section>
-      </b-col>
-      <b-col sm="8" md="6" xl="7">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.operations')"
-        >
-          <alert :show="oneTimeBootEnabled" variant="warning">
-            {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
-          </alert>
-          <template v-if="isOperationInProgress">
-            <alert variant="info">
-              {{ $t('pageServerPowerOperations.operationInProgress') }}
+    <div class="main-container">
+      <b-row class="m-2">
+        <b-col md="8" xl="6">
+          <page-section class="m-2 pt-2 pb-2">
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-16px">
+                    {{ $t('pageServerPowerOperations.serverStatus') }}
+                  </dt>
+                  <dd
+                    v-if="serverStatus === 'on'"
+                    style="margin-top: 10px"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-hostStatus"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/status/on.svg"
+                    />
+                    {{ $t('global.status.on_full') }}
+                  </dd>
+                  <dd
+                    v-else-if="serverStatus === 'off'"
+                    style="margin-top: 10px"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-hostStatus"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/status/off.svg"
+                    />
+                    {{ $t('global.status.off_full') }}
+                  </dd>
+                  <dd v-else class="regular-12px">
+                    {{ $t('global.status.notAvailable') }}
+                  </dd>
+                </dl>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-12px">
+                    {{ $t('pageServerPowerOperations.lastPowerOperation') }}
+                  </dt>
+                  <dd
+                    v-if="lastPowerOperationTime"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-lastPowerOp"
+                  >
+                    {{ lastPowerOperationTime | formatDate }}
+                    {{ lastPowerOperationTime | formatTime }}
+                  </dd>
+                  <dd v-else>--</dd>
+                </dl>
+              </b-col>
+            </b-row>
+          </page-section>
+        </b-col>
+      </b-row>
+      <b-row class="m-2">
+        <b-col sm="8" md="6" xl="7">
+          <page-section class="m-2">
+            <b-row class="ml-0 mb-3">
+              <span class="semi-bold-16px">{{ 'Управление' }}</span>
+            </b-row>
+            <alert :show="oneTimeBootEnabled" variant="warning">
+              {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
             </alert>
-          </template>
-          <template v-else-if="serverStatus === 'off'">
-            <b-button
-              variant="primary"
-              data-test-id="serverPowerOperations-button-powerOn"
-              @click="powerOn"
-            >
-              {{ $t('pageServerPowerOperations.powerOn') }}
-            </b-button>
-          </template>
-          <template v-else>
-            <!-- Reboot server options -->
-            <b-form novalidate class="mb-5" @submit.prevent="rebootServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.rebootServer')"
+            <template v-if="isOperationInProgress">
+              <alert variant="info">
+                {{ $t('pageServerPowerOperations.operationInProgress') }}
+              </alert>
+            </template>
+            <template v-else-if="serverStatus === 'off'">
+              <popover-with-slot
+                id="popover-powerOn"
+                :button-label="$t('pageServerPowerOperations.powerOn')"
+                :popup-label="$t('pageServerPowerOperations.powerOnServer')"
+                placement="right"
+                :action="powerOn"
               >
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootOrderly"
-                  value="orderly"
+                <b-button
+                  id="popover-powerOn"
+                  ref="button"
+                  size="md"
+                  variant="primary"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyReboot') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootImmediate"
-                  value="immediate"
-                >
-                  {{ $t('pageServerPowerOperations.immediateReboot') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-reboot"
-              >
-                {{ $t('pageServerPowerOperations.reboot') }}
-              </b-button>
-            </b-form>
-            <!-- Shutdown server options -->
-            <b-form novalidate @submit.prevent="shutdownServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.shutdownServer')"
-              >
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownOrderly"
-                  value="orderly"
+                  {{ $t('pageServerPowerOperations.powerOn') }}
+                </b-button>
+              </popover-with-slot>
+            </template>
+            <template v-else>
+              <!-- Reboot server options -->
+              <b-form novalidate class="mb-2">
+                <b-form-group class="regular-12px cb">
+                  <label class="semi-bold-12px">{{
+                    $t('pageServerPowerOperations.rebootServer')
+                  }}</label>
+                  <b-form-radio
+                    v-model="form.rebootOption"
+                    name="reboot-option"
+                    data-test-id="serverPowerOperations-radio-rebootOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyReboot') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.rebootOption"
+                    name="reboot-option"
+                    data-test-id="serverPowerOperations-radio-rebootImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateReboot') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-reboot"
+                  :button-label="$t('pageServerPowerOperations.reboot')"
+                  :popup-label="$t('pageServerPowerOperations.rebootServer')"
+                  placement="right"
+                  :action="rebootServer"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyShutdown') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownImmediate"
-                  value="immediate"
+                  <b-button
+                    id="popover-reboot"
+                    ref="button"
+                    size="md"
+                    variant="primary"
+                  >
+                    {{ $t('pageServerPowerOperations.reboot') }}
+                  </b-button>
+                </popover-with-slot>
+              </b-form>
+              <!-- Shutdown server options -->
+              <b-form>
+                <b-form-group class="regular-12px cb">
+                  <label class="semi-bold-12px">{{
+                    $t('pageServerPowerOperations.shutdownServer')
+                  }}</label>
+                  <b-form-radio
+                    v-model="form.shutdownOption"
+                    name="shutdown-option"
+                    data-test-id="serverPowerOperations-radio-shutdownOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyShutdown') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.shutdownOption"
+                    name="shutdown-option"
+                    data-test-id="serverPowerOperations-radio-shutdownImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateShutdown') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-shutDown"
+                  :button-label="$t('pageServerPowerOperations.shutDown')"
+                  :popup-label="$t('pageServerPowerOperations.shutdownServer')"
+                  placement="right"
+                  :action="shutdownServer"
                 >
-                  {{ $t('pageServerPowerOperations.immediateShutdown') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-shutDown"
-              >
-                {{ $t('pageServerPowerOperations.shutDown') }}
-              </b-button>
-            </b-form>
-          </template>
-        </page-section>
-      </b-col>
-    </b-row>
+                  <b-button
+                    id="popover-shutDown"
+                    ref="button"
+                    size="md"
+                    variant="secondary"
+                  >
+                    {{ $t('pageServerPowerOperations.shutDown') }}
+                  </b-button>
+                </popover-with-slot>
+              </b-form>
+            </template>
+          </page-section>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4">
+          <page-section class="m-2">
+            <boot-settings />
+          </page-section>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
@@ -152,10 +197,17 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import BootSettings from './BootSettings';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import Alert from '@/components/Global/Alert';
+import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'ServerPowerOperations',
-  components: { PageTitle, PageSection, BootSettings, Alert },
+  components: {
+    PageTitle,
+    PageSection,
+    BootSettings,
+    Alert,
+    PopoverWithSlot,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -207,52 +259,18 @@ export default {
       this.$store.dispatch('controls/serverPowerOn');
     },
     rebootServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmRebootMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.rebootOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
-          });
+        this.$store.dispatch('controls/serverSoftReboot');
       } else if (this.form.rebootOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardReboot');
-          });
+        this.$store.dispatch('controls/serverHardReboot');
       }
     },
     shutdownServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmShutdownMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.shutdownOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
-          });
+        this.$store.dispatch('controls/serverSoftPowerOff');
       }
       if (this.form.shutdownOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
-          });
+        this.$store.dispatch('controls/serverHardPowerOff');
       }
     },
   },
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 8ff1aa1b..3511b1f7 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -32,10 +32,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
index 1be41ac2..c13e13ff 100644
--- a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
+++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
@@ -18,16 +18,13 @@
     </template>
     <template #cell(status)="{ value }">
       <div v-if="value" class="fans-table-col-first__cell">
-        <img class="status__img" src="@/assets/images/fans-page/working.svg" />
+        <img class="status__img" src="@/assets/images/status/on.svg" />
         <span>
           {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
-        <img
-          class="status__img"
-          src="@/assets/images/fans-page/notWorking.svg"
-        />
+        <img class="status__img" src="@/assets/images/status/off.svg" />
         <span>
           {{ $t('global.status.outWorking') }}
         </span>
diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
index 1d026f1b..07a4512d 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
@@ -25,16 +25,13 @@
     </template>
     <template #cell(status)="{ value }">
       <div v-if="value" class="fans-table-col-first__cell">
-        <img class="status__img" src="@/assets/images/fans-page/working.svg" />
+        <img class="status__img" src="@/assets/images/status/on.svg" />
         <span>
           {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
-        <img
-          class="status__img"
-          src="@/assets/images/fans-page/notWorking.svg"
-        />
+        <img class="status__img" src="@/assets/images/status/off.svg" />
         <span>
           {{ $t('global.status.outWorking') }}
         </span>
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
index 36ec9802..aca17ac0 100644
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -73,8 +73,10 @@
         description="pageEventLogs.clearLogs"
         popup="pageEventLogs.clearLogs_popup"
         button="pageEventLogs.clear"
+        placement="bottom"
         :isclear="true"
         class="clear-popover"
+        :action="deleteAllLogs"
       />
     </div>
     <table-toolbar
@@ -85,8 +87,9 @@
     >
       <template #toolbar-buttons>
         <b-button
-          variant="primary"
-          class="table-toolbar__resolved-button"
+          size="md"
+          variant="secondary"
+          style="margin-right: 1rem"
           @click="resolveLogs"
         >
           <img
@@ -96,8 +99,9 @@
           {{ $t('pageEventLogs.event_resolve') }}
         </b-button>
         <b-button
+          size="md"
           variant="primary"
-          class="table-toolbar__unresolved-button"
+          style="margin-right: 1rem"
           @click="unresolveLogs"
         >
           <img
@@ -106,15 +110,21 @@
           />
           {{ $t('pageEventLogs.archive') }}
         </b-button>
+        <table-toolbar-export
+          :data="batchExportData"
+          style="margin-right: 1rem"
+          :file-name="exportFileNameByDate()"
+        />
       </template>
     </table-toolbar>
-    <div id="event-logs-table-wrapper">
+    <div id="logs-table-wrapper">
       <b-table
-        id="event-logs-table"
+        id="logs-table"
         ref="table"
         responsive="md"
-        class="event-logs-table"
+        class="logs-table"
         selectable
+        :busy="isBusy"
         no-select-on-click
         sort-icon-left
         :sticky-header="stickyHeader"
@@ -122,6 +132,8 @@
         no-sort-reset
         :sort-desc="sortDesc"
         sort-by="id"
+        :current-page="currentPage"
+        :per-page="perPage"
         :fields="fields"
         :items="filteredLogs"
         :sort-compare="onSortCompare"
@@ -153,42 +165,26 @@
         </template>
         <template #cell(description)="data">
           <b-row class="semi-bold-16px tretiatry">
-            {{ data.item.description.name }}
+            {{ filteredLogs[data.index].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(filteredLogs[index].description.description) }}
-              </span>
-            </b-col>
-          </b-container>
+            {{ data.value }}
+          </b-row>
         </template>
         <!-- Severity column -->
         <template #cell(severity)="{ value }">
-          <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{
-            value
-          }}</span>
           <span
-            v-else-if="value === 'Предупреждения'"
-            class="bold-12px__caps warning"
+            :class="`indicators-${value}`"
+            class="bold-12px__caps"
+            style="text-overflow: ellipsis; white-space: nowrap"
+          >
+            {{ value }}</span
           >
-            {{ value }}
-          </span>
-          <span v-else class="bold-12px__caps information">{{ value }}</span>
         </template>
-        <!-- Date column -->
+        <!-- Source column -->
         <template #cell(source)="{ value }">
           <b-row v-if="value === 'Процессоры'">
             <img
@@ -211,18 +207,26 @@
             />
             <span>{{ value }}</span>
           </b-row>
-          <b-row v-else>
+          <b-row v-else-if="value === 'Модули памяти'">
             <img
               src="@/assets/images/event-logs/memory-module.svg"
               class="sourse__img"
             />
             <span>{{ value }}</span>
           </b-row>
+          <b-row v-else>
+            <span>{{ value }}</span>
+          </b-row>
         </template>
-
+        <!-- Date column -->
         <template #cell(date)="{ value }">
           <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
-          <span class="regular-12px quaternary"> {{ value }} </span>
+          <span v-if="value" class="regular-12px quaternary">
+            {{ value | formatDate }}
+          </span>
+          <span v-if="value" class="regular-12px quaternary">
+            в {{ value | formatTimeShort }}
+          </span>
         </template>
 
         <!-- Status column -->
@@ -246,25 +250,50 @@
             >
           </b-row>
         </template>
+        <template #row-details="{ item }">
+          <b-container
+            fluid
+            style="border-bottom: 1px solid rgba(26, 62, 91, 0.2)"
+          >
+            <b-col class="mt-1 mb-2 regular-12px tretiatry">
+              <span class="row-details">
+                {{ item.description }}
+              </span>
+            </b-col>
+          </b-container>
+        </template>
       </b-table>
     </div>
     <div class="pagination-container">
       <div class="pagination-content">
-        <span class="semi-bold-16px"> Страница </span>
-        <img class="sourse__img" src="@/assets/images/arrow-left.svg" />
-        <span class="semi-bold-16px page-input"> 1 </span>
-        <span class="semi-bold-16px"> из </span>
-        <span class="semi-bold-16px"> 123 </span>
-        <img class="sourse__img" src="@/assets/images/arrow-right.svg" />
+        <span class="semi-bold-16px"> Страницы </span>
+        <b-pagination
+          v-model="currentPage"
+          class="mt-2"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-event-logs"
+        />
       </div>
       <div class="pagination-items-limit">
         <span class="semi-bold-16px"> Показывать по </span>
         <b-form-select
-          v-model="itemsPerPage"
+          v-model="perPage"
           :options="itemsPerPageOptions"
           class="event-logs__filter items-per-page semi-bold-16px"
         />
         <span class="semi-bold-16px"> записей на странице </span>
+        <b-button
+          size="md"
+          variant="primary"
+          :class="{ disabled: allLogs.length === 0 }"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('global.action.exportAll') }}
+        </b-button>
       </div>
     </div>
   </b-container>
@@ -272,19 +301,28 @@
 
 <script>
 import { omit } from 'lodash';
+import IconExport from '@carbon/icons-vue/es/document--export/20';
 import PageTitle from '@/components/Global/PageTitle';
 import Popover from '@/components/Global/Popover';
 import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+
 import BVTableSelectableMixin, {
   selectedRows,
   tableHeaderCheckboxModel,
   tableHeaderCheckboxIndeterminate,
 } from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
@@ -297,6 +335,8 @@ export default {
     PageTitle,
     Popover,
     TableToolbar,
+    TableToolbarExport,
+    IconExport,
   },
   mixins: [
     BVTableSelectableMixin,
@@ -307,6 +347,7 @@ export default {
     TableSortMixin,
     TableRowExpandMixin,
     SearchFilterMixin,
+    BVPaginationMixin,
   ],
   beforeRouteLeave(to, from, next) {
     // Hide loader if the user navigates to another page
@@ -316,257 +357,57 @@ export default {
   },
   data() {
     return {
+      isBusy: true,
+      perPage,
+      itemsPerPageOptions,
+      currentPage,
       sortDesc: true,
-      stickyHeader: 'calc(100vh - 243px)',
-      itemsPerPage: 50,
-      itemsPerPageOptions: [
-        {
-          value: 10,
-          text: '10',
-        },
-        {
-          value: 50,
-          text: '50',
-        },
-        {
-          value: 100,
-          text: '100',
-        },
-      ],
+      stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
-          thClass: ' event-logs-table__th',
-          class: 'event-logs-table__id',
-          tdClass: 'event-logs-table__td',
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true,
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
         },
         {
           key: 'description',
           label: this.$t('pageEventLogs.table.about_event'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'source',
           label: this.$t('pageEventLogs.table.source'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
         },
         {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
           sortable: true,
-          thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`,
-          tdClass: 'event-logs-table__td',
+          thClass: `bold-12px__caps logs-table__th`,
+          tdClass: 'logs-table__td',
         },
         {
           key: 'status',
           sortable: true,
           label: this.$t('pageEventLogs.table.status'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
-        },
-      ],
-      allLogs: [
-        {
-          checkbox: false,
-          id: 1,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-            full_description: '',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 2,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 3,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 4,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 5,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 6,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 7,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 8,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 9,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 10,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 11,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 12,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 13,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 14,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-      ],
-      tableFilters: [
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          values: ['Информационное', 'Предупреждения', 'Критические'],
-        },
-        {
-          key: 'filterByStatus',
-          label: this.$t('pageEventLogs.table.status'),
-          values: ['Resolved', 'Unresolved'],
-        },
-        {
-          key: 'status',
-          label: this.$t('pageEventLogs.table.status'),
-          values: [false, true],
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       eventFilter: 1,
@@ -587,13 +428,17 @@ export default {
           text: 'Информационное',
         },
         {
-          value: 'warning',
+          value: 'Warning',
           text: 'Предупреждения',
         },
         {
           value: 'critical',
           text: 'Критические',
         },
+        {
+          value: 'ok',
+          text: 'ok',
+        },
       ],
       eventSourseFilter: 1,
       eventSourseFilters: [
@@ -636,23 +481,23 @@ export default {
         ? this.searchTotalFilteredRows
         : this.filteredLogs.length;
     },
-    // allLogs() {
-    //   return this.$store.getters['eventLog/allEvents'].map((event) => {
-    //     return {
-    //       ...event,
-    //       actions: [
-    //         {
-    //           value: 'export',
-    //           title: this.$t('global.action.export'),
-    //         },
-    //         {
-    //           value: 'delete',
-    //           title: this.$t('global.action.delete'),
-    //         },
-    //       ],
-    //     };
-    //   });
-    // },
+    allLogs() {
+      return this.$store.getters['eventLog/allEvents'].map((event) => {
+        return {
+          ...event,
+          actions: [
+            {
+              value: 'export',
+              title: this.$t('global.action.export'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
     batchExportData() {
       return this.selectedRows.map((row) => omit(row, 'actions'));
     },
@@ -667,15 +512,15 @@ export default {
       return this.getFilteredTableData(
         this.filteredLogsByDate,
         this.activeFilters
-      );
+      ).filter((el) => el.description);
     },
   },
   created() {
-    // this.startLoader();
-    // this.$store.dispatch('eventLog/getEventLogData').finally(() => {
-    //   this.endLoader();
-    //   this.isBusy = false;
-    // });
+    this.startLoader();
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
   },
   methods: {
     redirectFans() {
@@ -693,21 +538,10 @@ export default {
         .catch(({ message }) => this.errorToast(message));
     },
     deleteAllLogs() {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
-          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
-          okTitle: this.$t('global.action.delete'),
-          okVariant: 'danger',
-          cancelTitle: this.$t('global.action.cancel'),
-        })
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+      this.$store
+        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
     },
     deleteLogs(uris) {
       this.$store
@@ -738,19 +572,19 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    // onTableRowAction(action, { uri }) {
-    //   if (action === 'delete') {
-    //     this.$bvModal
-    //       .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
-    //         title: this.$tc('pageEventLogs.modal.deleteTitle'),
-    //         okTitle: this.$t('global.action.delete'),
-    //         cancelTitle: this.$t('global.action.cancel'),
-    //       })
-    //       .then((deleteConfirmed) => {
-    //         if (deleteConfirmed) this.deleteLogs([uri]);
-    //       });
-    //   }
-    // },
+    onTableRowAction(action, { uri }) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
+            title: this.$tc('pageEventLogs.modal.deleteTitle'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) this.deleteLogs([uri]);
+          });
+      }
+    },
     onBatchAction(action) {
       if (action === 'delete') {
         const uris = this.selectedRows.map((row) => row.uri);
@@ -838,17 +672,6 @@ export default {
 };
 </script>
 <style lang="scss">
-#event-logs-table {
-  margin: 0 !important;
-}
-
-.event-logs-table__th {
-  background-color: #f8f8f8 !important;
-  border-bottom: 1px solid $faint-secondary-primary-20 !important;
-  border-top: 1px solid $faint-secondary-primary-20 !important;
-  color: $text-primary !important;
-}
-
 .event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] {
   background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg');
 }
@@ -859,22 +682,11 @@ export default {
 }
 
 .event-logs-section .b-table-sort-icon-left {
-  background-position: left 57% center !important;
   background-size: 15px !important;
-  padding-left: 0.75rem !important;
-  padding-right: 2rem !important;
-  &.event-logs-table__th__date {
-    background-position: left 33% center !important;
-  }
 }
 
-.event-logs-table__id {
-  padding-left: 38px !important;
-}
-
-.event-logs-table__td {
-  border-bottom: 1px solid $faint-secondary-primary-10 !important;
-  height: 64px;
+.b-table-details > td {
+  padding: 0px !important;
 }
 </style>
 <style lang="scss" scoped>
@@ -962,69 +774,14 @@ $toolbar-height: 64px;
   width: 236px;
 }
 
-.bold-12px__caps {
-  color: $text-primary !important;
-}
-
 .custom-checkbox {
   background-color: none;
 }
 
-#event-logs-table-wrapper div {
-  overflow-y: overlay;
-  &::-webkit-scrollbar {
-    position: absolute;
-    width: 10px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border: 4px solid transparent;
-    border-top: 52px solid transparent;
-    background: $faint-secondary-primary-20;
-    border-radius: 16px;
-    background-clip: content-box;
-  }
-}
-
-.table-toolbar__resolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $faint-secondary-primary-5;
-  border-radius: 8px;
-  color: $red-brand-primary;
-  margin-right: 1rem;
-  justify-content: center;
-}
-
-.table-toolbar__unresolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $red-brand-primary;
-  border-radius: 8px;
-  color: $white;
-  margin-right: 2rem;
-  justify-content: center;
-}
-
 .sourse__img {
   padding-right: 8px;
 }
 
-.errors {
-  color: $indicators-errors !important;
-}
-
-.warning {
-  color: $indicators-warning !important;
-}
-
-.information {
-  color: $indicators-complementary !important;
-}
-
-.resolved {
-  color: $indicators-succes;
-}
-
 .not-resolved {
   color: $text-quaternary;
 }
@@ -1065,11 +822,12 @@ $toolbar-height: 64px;
 
 .pagination-items-limit {
   margin-left: auto;
-  width: 400px;
   display: flex;
+  gap: 7px;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
+  margin-right: 1rem;
 }
 
 .items-per-page {
diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue
index 09734a4a..e25e0606 100644
--- a/src/views/SILA/PciDevices/PciDevicesPage.vue
+++ b/src/views/SILA/PciDevices/PciDevicesPage.vue
@@ -17,10 +17,7 @@
           <template #cell(status)>
             <b-row>
               <b-col>
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
                 <span>
                   {{ 'Работоспособен' }}
                 </span>
diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
index db2407d5..057c120b 100644
--- a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
+++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
@@ -25,10 +25,7 @@
           <template #cell(value)="{ index, value }">
             <b-row v-if="index === 0">
               <b-col>
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
                 <span>
                   {{ 'Работоспособен' }}
                 </span>
@@ -76,7 +73,7 @@
               <b-row v-if="index === 0">
                 <b-col>
                   <img
-                    src="@/assets/images/fans-page/working.svg"
+                    src="@/assets/images/status/on.svg"
                     class="icon-chevron"
                   />
                   <span>
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index f5e063d1..7ab3ec0e 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -1,57 +1,67 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl" class="pt-0 m-0">
     <page-title />
-    <b-row>
-      <b-col md="8" xl="6">
-        <alert variant="info" class="mb-4">
-          <span>
+    <b-row class="m-4">
+      <b-col md="8" xl="12">
+        <alert variant="info">
+          <span class="regular-12px">
             {{ $t('pageDateTime.alert.message') }}
-            <b-link to="/profile-settings">
+            <b-link class="semi-bold-12px" to="/profile-settings">
               {{ $t('pageDateTime.alert.link') }}</b-link
             >
           </span>
         </alert>
       </b-col>
     </b-row>
-    <page-section>
+    <page-section class="m-4">
       <b-row>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatDate }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dt class="semi-bold-12px">
+              {{ $t('pageDateTime.form.time.label') }}
+            </dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatTime }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
       </b-row>
     </page-section>
-    <page-section :section-title="$t('pageDateTime.configureSettings')">
+    <page-section class="m-4">
+      <label class="semi-bold-16px">{{
+        $t('pageDateTime.configureSettings')
+      }}</label>
       <b-form novalidate @submit.prevent="submitForm">
         <b-form-group
           label="Configure date and time"
           :disabled="loading"
           label-sr-only
+          class="system-control__radio regular-12px"
         >
           <b-form-radio
             v-model="form.configurationSelected"
             value="manual"
             data-test-id="dateTime-radio-configureManual"
           >
-            {{ $t('pageDateTime.form.manual') }}
+            {{ $t('SystemDescription.UseServerDatettime') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
               >
-                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
+                <span class="regular-12px">YYYY-MM-DD</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -95,12 +105,12 @@
                 </b-input-group>
               </b-form-group>
             </b-col>
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
               >
-                <b-form-text id="time-format-help">HH:MM</b-form-text>
+                <span class="regular-12px">HH:MM</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -124,10 +134,11 @@
           </b-row>
           <b-form-radio
             v-model="form.configurationSelected"
+            class="system-control__radio regular-12px"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
           >
-            NTP
+            {{ $t('SystemDescription.GetNtpFromServer') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
             <b-col sm="6" lg="4" xl="3">
@@ -184,6 +195,7 @@
             </b-col>
           </b-row>
           <b-button
+            size="md"
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
@@ -415,3 +427,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.form-control {
+  height: 40px;
+  max-width: 270px;
+}
+
+.input-group {
+  max-width: 270px;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue
index f903a46b..eef0d871 100644
--- a/src/views/SystemDescription/Info/InventoryTableSystem.vue
+++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue
@@ -4,7 +4,7 @@
       responsive="md"
       show-empty
       class="bootstrap-rounded-table"
-      :items="systems"
+      :items="items"
       :fields="fields"
       :empty-text="$t('global.table.emptyMessage')"
     >
@@ -15,14 +15,14 @@
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import PageSection from '@/components/Global/PageSection';
-
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
   components: { PageSection },
-  mixins: [BVToastMixin, TableRowExpandMixin],
+  mixins: [BVToastMixin, TableRowExpandMixin, LoadingBarMixin],
   data() {
     return {
       fields: [
@@ -45,35 +45,42 @@ export default {
         },
       ],
       expandRowLabel: expandRowLabel,
-      systems: [
+      items: null,
+    };
+  },
+  computed: {
+    systems() {
+      return this.$store.getters['system/systems'];
+    },
+  },
+  watch: {
+    systems() {
+      this.items = [
         {
-          param: 'UUID сервера',
-          value: '17583',
+          param: 'id',
+          value: this.id,
         },
-        { param: 'Модель', value: '1.214.248 beta' },
-        { param: 'Производитель', value: 'Asus' },
-        { param: 'Операционная система', value: 'Linux' },
-        { param: 'Серийный номер', value: '741852963335' },
+        { param: 'Модель', value: this.systems[0].model },
+        { param: 'Производитель', value: '' },
+        { param: 'Операционная система', value: '' },
+        { param: 'Серийный номер', value: this.systems[0].serialNumber },
         {
           param: 'Свободное место на Flash-накопителе',
           value: '1 024 000 Мб',
         },
-      ],
-    };
+      ];
+    },
   },
   created() {
     this.$store.dispatch('system/getSystem').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardware-status-system-complete');
-      this.isBusy = false;
     });
-  },
-  methods: {
-    toggleIdentifyLedSwitch(state) {
-      this.$store
-        .dispatch('system/changeIdentifyLedState', state)
-        .catch(({ message }) => this.errorToast(message));
-    },
+    this.startLoader();
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
+    Promise.all([systemTablePromise]).finally(() => this.endLoader());
   },
 };
 </script>
diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue
index 558c70ef..b5cde965 100644
--- a/src/views/SystemDescription/Info/SystemDescription.vue
+++ b/src/views/SystemDescription/Info/SystemDescription.vue
@@ -6,87 +6,61 @@
     <page-title />
     <!-- System table -->
     <div class="main-container">
-      <div class="page-collapse-decorator">
-        <b-button
-          v-b-toggle.toggle-collapse_1
-          variant="link"
-          class="collapse-button semi-bold-16px"
-        >
-          {{ $t('SystemDescription.title.ServerConfig') }}
-          <component :is="iconChevronUp" class="icon-expand" />
-        </b-button>
-        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
-          <table-system ref="system" />
-          <!-- Notes Administration -->
-          <section class="notes-section">
-            <div class="semi-bold-12px textarea-description">
-              <span>{{ $t('SystemDescription.title.Notes') }}</span>
-            </div>
-            <div class="textarea-container">
-              <div class="buttons-container">
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-bold.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-underline.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-link.svg"
-                  />
-                </button>
-                <div class="line"></div>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-list.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
-                  />
-                </button>
-              </div>
-              <textarea
-                id=""
-                name="area"
-                placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
-                cols="30"
-                rows="10"
-                class="notes-textarea"
-              ></textarea>
-            </div>
-          </section>
-        </b-collapse>
-      </div>
-      <!-- Control -->
-      <div class="page-collapse-decorator">
-        <b-button
-          v-b-toggle.toggle-collapse_2
-          variant="link"
-          class="collapse-button semi-bold-16px"
-        >
-          {{ $t('SystemDescription.title.Control') }}
-          <component :is="iconChevronUp" class="icon-expand" />
-        </b-button>
-        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
-          <control-system />
-        </b-collapse>
-      </div>
+      <table-system />
+      <!-- Notes Administration -->
+      <section class="notes-section">
+        <div class="semi-bold-12px textarea-description">
+          <span>{{ $t('SystemDescription.title.Notes') }}</span>
+        </div>
+        <div class="textarea-container">
+          <div class="buttons-container">
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-bold.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-underline.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-link.svg"
+              />
+            </button>
+            <div class="line"></div>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-list.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
+              />
+            </button>
+          </div>
+          <textarea
+            id=""
+            name="area"
+            placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
+            cols="30"
+            rows="10"
+            class="notes-textarea"
+          ></textarea>
+        </div>
+      </section>
     </div>
   </b-container>
 </template>
@@ -94,13 +68,11 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import TableSystem from './InventoryTableSystem';
-import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
 import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
 
 export default {
   components: {
     PageTitle,
-    ControlSystem,
     TableSystem,
   },
   data() {
-- 
cgit v1.2.3