Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.

15 files changed, 1146 insertions, 176 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index eca1e4c8..70631fbf 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -38,7 +38,6 @@
             <img
               class="header-logo"
               src="@/assets/images/logo-header-sila.svg"
-              :alt="altLogo"
             />
           </b-navbar-brand>
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
@@ -108,7 +107,6 @@
         <img
           class="header-clock__icon"
           src="@/assets/images/header/header-clock.svg"
-          :alt="altLogo"
         />
         <span style="color: white">15:54:00</span>
         <b-nav-item
@@ -174,11 +172,14 @@
             src="@/assets/images/header/icon-notification.svg"
           />
         </b-button>
-        <b-button id="app-header-logout" class="app-header-logout">
+        <b-button
+          id="app-header-logout"
+          class="app-header-logout"
+          @click="logout"
+        >
           <img
             class="header-logout__icon"
             src="@/assets/images/header/logout-icon.svg"
-            :alt="altLogo"
           />
         </b-button>
       </b-navbar>
@@ -212,7 +213,6 @@ export default {
   data() {
     return {
       isNavigationOpen: false,
-      altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
     };
   },
   computed: {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index dc7a58d0..84b81ac6 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -6,7 +6,6 @@
           <img
             class="server__icon"
             src="@/assets/images/sila-server-navbar-icon.svg"
-            :alt="altLogo"
           />
           <b-form-group class="server-pagination-select">
             <b-form-select
@@ -19,11 +18,7 @@
         <div class="nav-line"></div>
         <div class="form-control server-search">
           <button class="search-button">
-            <img
-              class="server__icon"
-              src="@/assets/images/search-icon.svg"
-              :alt="altLogo"
-            />
+            <img class="server__icon" src="@/assets/images/search-icon.svg" />
           </button>
           <b-form-input
             type="text"
@@ -56,7 +51,7 @@
               >
                 {{ navItem.label }}
                 <component :is="navItem.icon" class="icon-expand" />
-                <icon-expand class="icon-expand" />
+                <!-- <icon-expand class="icon-expand" /> -->
               </b-button>
               <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
                 <li class="nav-item">
@@ -92,6 +87,7 @@
 //Exact match alias set to support
 //dotenv customizations.
 import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin';
+
 export default {
   name: 'AppNavigation',
   mixins: [AppNavigationMixin, KvmNavigationMixin],
@@ -300,7 +296,7 @@ svg {
   }
   &::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
-    background: rgba(14, 32, 48, 0.384);
+    background: $faint-secondary-primary-20;
     border-radius: 16px;
     background-clip: content-box;
   }
@@ -387,6 +383,7 @@ svg {
   width: 237px;
   border: none;
   height: 48px;
+  background-image: url('../../assets/images/icon-chevron.svg');
   &:focus {
     box-shadow: none;
   }
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index ad5f58b5..7c981ec6 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -20,12 +20,12 @@ export const AppNavigationMixin = {
             {
               id: 'network',
               label: this.$t('appNavigation.networkParametrs'),
-              route: '/network',
+              route: '/network-parametrs',
             },
             {
-              id: 'post-code-logs',
+              id: 'event-logs',
               label: this.$t('appNavigation.eventLogs'),
-              route: '/logs/post-code-logs',
+              route: '/event-logs',
             },
             {
               id: 'server-parametrs',
@@ -40,97 +40,114 @@ export const AppNavigationMixin = {
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'configuration',
+              id: 'bmc-configuration',
               label: this.$t('appNavigation.config'),
               route: '/bmc-configuration',
             },
             {
-              id: 'post-code-logs',
+              id: 'bmc-firmware',
               label: this.$t('appNavigation.deviceFirmware'),
-              route: '/logs/post-code-logs',
+              route: '/bmc-firmware',
             },
             {
-              id: 'post-code-logs',
+              id: 'bmc-settings',
               label: this.$t('appNavigation.broadcast'),
-              route: '/logs/post-code-logs',
+              route: '/bmc-settings',
             },
           ],
         },
+        // {
+        //   id: 'analytical-panel',
+        //   label: this.$t('appNavigation.analyticalPanel'),
+        //   route: '/',
+        // },
+        // {
+        //   id: 'RAID',
+        //   label: this.$t('appNavigation.raidControllers'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'overview-info',
+        //       label: this.$t('appNavigation.specifications'),
+        //       route: '/logs/event-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.settings'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.cachRaid'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'power-supplies',
+        //   label: this.$t('appNavigation.powerSupplies'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'overview-info',
+        //       label: this.$t('appNavigation.specifications'),
+        //       route: '/logs/event-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //   ],
+        // },
         {
-          id: 'analytical-panel',
-          label: this.$t('appNavigation.analyticalPanel'),
-          route: '/',
-        },
-        {
-          id: 'RAID',
-          label: this.$t('appNavigation.raidControllers'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
-            },
-            {
-              id: 'post-code-logs',
-              label: this.$t('appNavigation.settings'),
-              route: '/logs/post-code-logs',
-            },
-            {
-              id: 'post-code-logs',
-              label: this.$t('appNavigation.cachRaid'),
-              route: '/logs/post-code-logs',
-            },
-          ],
-        },
-        {
-          id: 'memoryModules',
-          label: this.$t('appNavigation.memoryModules'),
+          id: 'processors',
+          label: this.$t('appNavigation.processors'),
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
+              id: 'processors-specification',
+              label: this.$t('appNavigation.specification'),
+              route: '/processors-specification',
             },
             {
-              id: 'post-code-logs',
+              id: 'processors-dynamic-info',
               label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
+              route: '/processors-dynamic-info',
             },
           ],
         },
         {
-          id: 'processors',
-          label: this.$t('appNavigation.processors'),
+          id: 'power',
+          label: this.$t('appNavigation.powerSupplies'),
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
+              id: 'power-specification',
+              label: this.$t('appNavigation.specification'),
+              route: '/power-specification',
             },
             {
-              id: 'post-code-logs',
+              id: 'power-dynamic-info',
               label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
+              route: '/power-dynamic-info',
             },
           ],
         },
         {
-          id: 'power-supplies',
-          label: this.$t('appNavigation.powerSupplies'),
+          id: 'memory',
+          label: this.$t('appNavigation.memoryModules'),
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
+              id: 'memory-specification',
+              label: this.$t('appNavigation.specification'),
+              route: '/memory-specification',
             },
             {
-              id: 'post-code-logs',
+              id: 'memory-dynamic-info',
               label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
+              route: '/memory-dynamic-info',
             },
           ],
         },
@@ -140,58 +157,14 @@ export const AppNavigationMixin = {
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'overview-info',
+              id: 'fans-static',
               label: this.$t('appNavigation.statisticInformation'),
-              route: '/logs/event-logs',
+              route: '/fans-static',
             },
             {
-              id: 'post-code-logs',
+              id: 'fans',
               label: this.$t('appNavigation.dynamicInformation'),
-              route: '/logs/post-code-logs',
-            },
-          ],
-        },
-        {
-          id: 'physical-drives',
-          label: this.$t('appNavigation.physicalDrives'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
-            },
-            {
-              id: 'post-code-logs',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
-            },
-          ],
-        },
-        {
-          id: 'virtual-drives',
-          label: this.$t('appNavigation.virtualDrives'),
-          route: '/',
-        },
-        {
-          id: 'network-adapters',
-          label: this.$t('appNavigation.networkAdapters'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'overview-info',
-              label: this.$t('appNavigation.ethernetAdapters'),
-              route: '/logs/event-logs',
-            },
-            {
-              id: 'post-code-logs',
-              label: this.$t('appNavigation.fcHbaAdapters'),
-              route: '/logs/post-code-logs',
-            },
-            {
-              id: 'post-code-logs',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
+              route: '/fans',
             },
           ],
         },
@@ -201,28 +174,71 @@ export const AppNavigationMixin = {
           icon: 'iconChevronUp',
           children: [
             {
-              id: 'overview-info',
-              label: this.$t('appNavigation.specifications'),
-              route: '/logs/event-logs',
+              id: 'motherboard-specification',
+              label: this.$t('appNavigation.specification'),
+              route: '/motherboard-specification',
             },
             {
-              id: 'post-code-logs',
+              id: 'motherboard-dynamic-info',
               label: this.$t('appNavigation.analyticalPanel'),
-              route: '/logs/post-code-logs',
+              route: '/motherboard-dynamic-info',
             },
           ],
         },
-        {
-          id: 'pci-devises',
-          label: this.$t('appNavigation.pciDevises'),
-          route: '/',
-        },
+        // {
+        //   id: 'physical-drives',
+        //   label: this.$t('appNavigation.physicalDrives'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'overview-info',
+        //       label: this.$t('appNavigation.specifications'),
+        //       route: '/logs/event-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'virtual-drives',
+        //   label: this.$t('appNavigation.virtualDrives'),
+        //   route: '/',
+        // },
+        // {
+        //   id: 'network-adapters',
+        //   label: this.$t('appNavigation.networkAdapters'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'overview-info',
+        //       label: this.$t('appNavigation.ethernetAdapters'),
+        //       route: '/logs/event-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.fcHbaAdapters'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //     {
+        //       id: 'post-code-logs',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/logs/post-code-logs',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'pci-devises',
+        //   label: this.$t('appNavigation.pciDevises'),
+        //   route: '/',
+        // },
         //old tabs
         {
           id: 'overview',
-          label: 'СТАРЫЕ ВКЛАДКИ',
+          label: 'Страницы BMC webui-vue',
           route: '/Info',
-          icon: 'iconOverview',
         },
         {
           id: 'logs',
@@ -232,7 +248,7 @@ export const AppNavigationMixin = {
             {
               id: 'event-logs',
               label: this.$t('appNavigation.eventLogs'),
-              route: '/logs/event-logs',
+              route: '/logs/event-logs-old',
             },
             {
               id: 'post-code-logs',
@@ -298,7 +314,6 @@ export const AppNavigationMixin = {
         {
           id: 'settings',
           label: this.$t('appNavigation.settings'),
-          icon: 'iconSettings',
           children: [
             {
               id: 'date-time',
@@ -320,7 +335,6 @@ export const AppNavigationMixin = {
         {
           id: 'security-and-access',
           label: this.$t('appNavigation.securityAndAccess'),
-          icon: 'iconSecurityAndAccess',
           children: [
             {
               id: 'sessions',
@@ -352,7 +366,6 @@ export const AppNavigationMixin = {
         {
           id: 'resource-management',
           label: this.$t('appNavigation.resourceManagement'),
-          icon: 'iconResourceManagement',
           children: [
             {
               id: 'power',
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index 12dde551..20bc8050 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="page-title">
+  <div v-if="description" class="page-title">
     <h1 class="bold-24px text-title">{{ title }}</h1>
-    <p v-if="description" class="page-description">{{ description }}</p>
+    <p class="page-description">{{ description }}</p>
+  </div>
+  <div v-else class="page-title no_description">
+    <h1 class="bold-24px text-title">{{ title }}</h1>
+    <p class="page-description">{{ description }}</p>
   </div>
 </template>
 
@@ -29,6 +33,9 @@ export default {
   flex-flow: column nowrap;
   align-items: flex-start;
   justify-content: center;
+  &.no_description {
+    height: 64px;
+  }
 }
 
 .text-title {
@@ -37,7 +44,7 @@ export default {
 
 .page-description {
   color: $text-secondary;
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index b91aa08b..bae121c3 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,7 +1,22 @@
 <template>
   <div id="my-container">
+    <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer">
+      <img src="@/assets/images/clear-icon.svg" />
+      <span class="regular-12px red-font">{{ $t(description) }}</span>
+    </div>
+    <div
+      v-else-if="isMicrocode"
+      :id="id"
+      ref="button"
+      variant="primary"
+      class="pointer"
+    >
+      <img src="@/assets/images/icon-reload-red.svg" />
+      <span class="regular-12px red-font">{{ $t(description) }}</span>
+    </div>
+
     <span
-      v-if="!microcode"
+      v-else
       :id="id"
       ref="button"
       class="regular-12px underline pointer"
@@ -9,13 +24,6 @@
     >
       {{ $t(description) }}
     </span>
-    <div v-else :id="id" ref="button" variant="primary" class="pointer">
-      <img src="@/assets/images/icon-reload-red.svg" />
-      <span class="regular-12px microcode-reload-font">{{
-        $t(description)
-      }}</span>
-    </div>
-
     <!-- Our popover title and content render container -->
     <b-popover
       ref="popover"
@@ -92,7 +100,11 @@ export default {
       type: String,
       default: '',
     },
-    microcode: {
+    isMicrocode: {
+      type: Boolean,
+      default: false,
+    },
+    isclear: {
       type: Boolean,
       default: false,
     },
@@ -198,9 +210,6 @@ export default {
 .form-control {
   width: 341px;
   height: 52px;
-  background: rgba(26, 62, 91, 0.05);
-  border-radius: 8px;
-  border: none;
   margin: -25px auto;
   padding-top: 30px;
 }
@@ -211,7 +220,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba(26, 62, 91, 0.05);
+  background: $faint-secondary-primary-5;
   border-radius: 8px;
   border: none;
   margin: 0 auto;
@@ -241,7 +250,10 @@ export default {
 }
 
 .popover-info {
-  background-color: #040a0f;
+  background-color: $on-surface-primary;
+  // border: 1px solid $text-primary;
+  // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06);
+  border-radius: 8px;
   width: 168px;
   height: 76px;
   &.arrow {
@@ -249,7 +261,7 @@ export default {
   }
 }
 
-.microcode-reload-font {
+.red-font {
   padding-left: 5px;
   color: $red-brand-primary;
 }
diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue
new file mode 100644
index 00000000..0769c734
--- /dev/null
+++ b/src/components/Global/SilaComponents/DateSwitch.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="fans-date-switch">
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'hour' }"
+      @click="switchTimeScale('hour')"
+      >{{ $t('global.date.lastHour') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'day' }"
+      @click="switchTimeScale('day')"
+      >{{ $t('global.date.lastDay') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'week' }"
+      @click="switchTimeScale('week')"
+      >{{ $t('global.date.lastWeek') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'mounth' }"
+      @click="switchTimeScale('mounth')"
+      >{{ $t('global.date.lastMounth') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'year' }"
+      @click="switchTimeScale('year')"
+      >{{ $t('global.date.lastYear') }}</span
+    >
+    <div class="slider" />
+    <div class="date-picker">
+      <img src="@/assets/images/calendar-icon.svg" />
+      <span class="medium-12px scale-item">{{
+        $t('global.date.selectDate')
+      }}</span>
+    </div>
+    <img class="date-clear" src="@/assets/images/clear-icon.svg" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    switchTimeScale: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fans-date-switch {
+  position: relative;
+
+  height: 48px;
+  padding: 0 16px 0 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.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 {
+  cursor: pointer;
+}
+
+.scale-item:nth-child(1).switch-active ~ .slider {
+  width: 92px;
+  left: 31px;
+}
+
+.scale-item:nth-child(2).switch-active ~ .slider {
+  left: 135px;
+  width: 105px;
+}
+
+.scale-item:nth-child(3).switch-active ~ .slider {
+  left: 255px;
+  width: 112px;
+}
+
+.scale-item:nth-child(4).switch-active ~ .slider {
+  left: 383px;
+  width: 107px;
+}
+
+.scale-item:nth-child(5).switch-active ~ .slider {
+  left: 508px;
+  width: 90px;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue
new file mode 100644
index 00000000..9760f24f
--- /dev/null
+++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue
@@ -0,0 +1,240 @@
+<template>
+  <page-section class="system-control-section">
+    <div class="system-control__table">
+      <div class="system-control__table__row">
+        <div class="system-control__table__cell">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.ReloadServer') }}
+            </span>
+          </div>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.ReloadOSAndServer"
+            popup="SystemDescription.ReloadOSAndServer_popup"
+          />
+          <popover
+            id="popover-reactive-2"
+            description="SystemDescription.ReloadServer"
+            popup="SystemDescription.ReloadServer_popup"
+          />
+          <div>
+            <span
+              class="regular-12px underline pointer"
+              @click="redirectConsole"
+            >
+              {{ $t('SystemDescription.ConnectToDesktop') }}
+            </span>
+          </div>
+        </div>
+
+        <div class="system-control__table__cell system-control__table__cell__2">
+          <div class="reload-progress__container">
+            <span class="regular-12px">
+              {{ $t('SystemDescription.status') }}
+            </span>
+            <span class="semi-bold-12px progress_bar_percent"
+              >{{ progress1.value }}%</span
+            >
+            <b-progress
+              class="reload-progress"
+              :value="progress1.value"
+            ></b-progress>
+          </div>
+          <div class="reload-progress__container">
+            <span class="regular-12px">
+              {{ $t('SystemDescription.status') }}
+            </span>
+            <span
+              v-if="progress2.value === null"
+              class="semi-bold-12px progress_bar_percent"
+              >{{ $t('SystemDescription.NotRunning') }}</span
+            >
+            <span v-else class="semi-bold-12px progress_bar_percent"
+              >{{ progress2.value }}%</span
+            >
+            <b-progress
+              class="reload-progress"
+              :value="progress2.value"
+            ></b-progress>
+          </div>
+        </div>
+
+        <div class="system-control__table__cell">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.OnOffServer') }}
+            </span>
+          </div>
+          <div>
+            <popover
+              id="popover-reactive-3"
+              description="SystemDescription.OffOsAndServer"
+              popup="SystemDescription.OffOsAndServer_popup"
+              button="global.action.off"
+            />
+            <popover
+              id="popover-reactive-4"
+              description="SystemDescription.OffServer"
+              popup="SystemDescription.OffServer_popup"
+              button="global.action.off"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="system-control__table__row">
+        <div class="system-control__table__cell system-control__table__cell__4">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.setupDatetime') }}
+            </span>
+          </div>
+          <b-form @submit.prevent="onResetSubmit">
+            <b-form-radio-group
+              v-model="timeOption"
+              class="system-control__radio regular-12px"
+            >
+              <b-form-radio value="NTP">
+                {{ $t('SystemDescription.GetNtpFromServer') }}
+              </b-form-radio>
+              <b-form-radio value="serverDate">
+                {{ $t('SystemDescription.UseServerDatettime') }}
+              </b-form-radio>
+            </b-form-radio-group>
+          </b-form>
+          <ntp-popover
+            id="popover-reactive-5"
+            description="SystemDescription.NtpSettings"
+          />
+        </div>
+      </div>
+    </div>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import NtpPopover from '@/components/Global/SilaComponents/NtpPopover';
+
+export default {
+  components: {
+    PageSection,
+    NtpPopover,
+    Popover,
+  },
+  data() {
+    return {
+      timeOption: 'resetBios',
+      picked: '',
+      options: [
+        { text: 'Toggle this custom radio', value: 'first' },
+        { text: 'Or toggle this other custom radio', value: 'second' },
+      ],
+      progress1: {
+        value: 90,
+      },
+      progress2: {
+        value: null,
+      },
+    };
+  },
+  methods: {
+    redirectConsole() {
+      this.$router.push('/console/kvm');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+a {
+  list-style-type: none;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.system-control-section {
+  position: relative;
+  margin: 16px 2rem 2rem !important;
+  width: 90%;
+}
+
+.system-control__table__row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: 85%;
+}
+
+.system-control__table__cell {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  row-gap: 6px;
+}
+
+.system-control__table__cell__2 {
+  margin-top: 37px;
+  row-gap: 14px;
+}
+
+.reload-progress__container {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  column-gap: 4px;
+}
+
+.semi-bold-12px {
+  display: inline-block;
+}
+
+label {
+  padding-top: 5px;
+}
+.system-control__table__cell__4 {
+  margin-top: 26px;
+}
+
+.custom-radio ::before {
+  border: 1px solid $red-brand-primary;
+  background-color: #fff;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:checked
+  ~ .custom-control-label::before {
+  border: 2px solid $red-brand-primary;
+  background-color: $red-brand-primary;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:hover
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-hover !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-hover;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:checked
+  ~ .custom-control-label::after {
+  background-image: none !important;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:active
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-active !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-active;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue
new file mode 100644
index 00000000..918b1220
--- /dev/null
+++ b/src/components/Global/SilaComponents/NtpPopover.vue
@@ -0,0 +1,136 @@
+<template>
+  <div id="my-container">
+    <span :id="id" class="regular-12px underline" variant="primary">
+      {{ $t(description) }}
+    </span>
+    <!-- Our popover title and content render container -->
+    <b-popover
+      :target="id"
+      placement="auto"
+      container="my-container"
+      :show.sync="popoverShow"
+      @show="onShow"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ $t(description) }}</span>
+          <b-button class="popup-title__button_close" @click="onClose">
+            <img src="@/assets/images/popups/x-icon.svg" />
+          </b-button>
+        </div>
+      </template>
+
+      <div class="popup-body">
+        <div class="popup-body__input-container">
+          <span class="regular-12px tretiatry"
+            >Введите адрес сервера (IP, FQDM)</span
+          >
+          <b-form-input
+            id="popover-input-1"
+            v-model="input1"
+            class="medium-12px"
+          ></b-form-input>
+        </div>
+        <b-button class="popover-button" variant="primary" @click="onClose">
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'Reload',
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      popoverShow: false,
+    };
+  },
+  methods: {
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+    },
+    onClose() {
+      this.popoverShow = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+}
+
+.popup-title__button_close {
+  margin: 0 28px 0 auto;
+  background: none;
+  border: none;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+  }
+  &:focus-visible {
+    border: none !important;
+    border-radius: 8px;
+  }
+  &:focus {
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+
+.popup-body {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+
+.form-control {
+  width: 341px;
+  height: 52px;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.popover-button {
+  width: 341px;
+  height: 40px;
+  margin: 0 auto 10px;
+}
+
+.popup-body__input-container {
+  height: 52px;
+  margin: 24px auto 16px auto;
+}
+
+.tretiatry {
+  margin-left: 12px;
+}
+
+.underline {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTable.vue b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue
new file mode 100644
index 00000000..2b25d880
--- /dev/null
+++ b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue
@@ -0,0 +1,101 @@
+<template>
+  <section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      class="bootstrap-fans-table bootstrap-fans-table__stripes"
+      :items="records.items"
+      :fields="records.fields"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="fans-colors"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        <span class="light-12px">
+          {{ value }}
+        </span>
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #head(currentPower)="{ label }">
+        <span class="semi-bold-12px">
+          {{ label }}
+        </span>
+        <span class="semi-bold-12px errors">
+          {{ '(15)' }}
+        </span>
+      </template>
+      <template #cell(currentPower)="{ value }">
+        <row>
+          <span class="light-12px">
+            {{ value }}
+          </span>
+        </row>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import { colors } from '../colors';
+
+export default {
+  props: {
+    records: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      colors,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-fans-table__th {
+  background-color: transparent !important;
+  color: $text-primary !important;
+  border-top: none !important;
+  padding: 10px 5px !important;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.bootstrap-fans-table__td {
+  padding: 5px !important;
+  border-top: none !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.fans-colors {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.row {
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.errors {
+  color: $indicators-errors;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue
new file mode 100644
index 00000000..120a03a3
--- /dev/null
+++ b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue
@@ -0,0 +1,116 @@
+<template>
+  <section class="bootstrap-table__section">
+    <span class="bold-12px__caps">
+      {{ $t('fansPage.valueIndicators') }}
+    </span>
+    <b-table
+      responsive="md"
+      class="bootstrap-fans-table bootstrap-fans-table__stripes"
+      :items="records.items"
+      :fields="records.fields"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="fans-colors"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        <span class="light-12px">
+          {{ value }}
+        </span>
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #head(currentPower)="{ label }">
+        <span class="semi-bold-12px">
+          {{ label }}
+        </span>
+        <span class="semi-bold-12px errors">
+          {{ '(15)' }}
+        </span>
+      </template>
+      <template #cell(currentPower)="{ value }">
+        <row>
+          <span class="light-12px">
+            {{ value }}
+          </span>
+        </row>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import { colors } from '../colors';
+
+export default {
+  props: {
+    records: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      colors,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-fans-table__th {
+  background-color: transparent !important;
+  color: $text-primary !important;
+  border-top: none !important;
+  padding: 10px 5px !important;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.bootstrap-fans-table__td {
+  padding: 5px !important;
+  border-top: none !important;
+}
+
+.SMART-table-col-first {
+  width: 34%;
+}
+
+.SMART-table-col-second {
+  width: 32%;
+}
+
+.SMART-table-col-last {
+  width: 39%;
+}
+</style>
+
+<style lang="scss" scoped>
+.fans-colors {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.row {
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.errors {
+  color: $indicators-errors;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue
new file mode 100644
index 00000000..6f696b82
--- /dev/null
+++ b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue
@@ -0,0 +1,105 @@
+<template>
+  <section class="bootstrap-table__section">
+    <span class="bold-12px__caps">
+      {{ $t('fansPage.valueIndicators') }}
+    </span>
+    <b-table
+      responsive="md"
+      class="bootstrap-fans-table bootstrap-fans-table__stripes"
+      :items="records.items"
+      :fields="records.fields"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="fans-colors"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        <span class="light-12px">
+          {{ value }}
+        </span>
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #head(currentPower)="{ label }">
+        <span class="semi-bold-12px">
+          {{ label }}
+        </span>
+        <span class="semi-bold-12px errors">
+          {{ '(15)' }}
+        </span>
+      </template>
+      <template #cell(currentPower)="{ value }">
+        <row>
+          <span class="light-12px">
+            {{ value }}
+          </span>
+          <img src="@/assets/images/power-error-icon.svg" />
+        </row>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import { colors } from '../../../../views/Processors/DynamicInfo/helpers';
+
+export default {
+  props: {
+    records: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      colors,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-fans-table__th {
+  background-color: transparent !important;
+  color: $text-primary !important;
+  border-top: none !important;
+  padding: 10px 5px !important;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.bootstrap-fans-table__td {
+  padding: 5px !important;
+  border-top: none !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.fans-colors {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.row {
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.errors {
+  color: $indicators-errors;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue
new file mode 100644
index 00000000..4974750a
--- /dev/null
+++ b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue
@@ -0,0 +1,104 @@
+<template>
+  <section class="bootstrap-table__section">
+    <span class="bold-12px__caps">
+      {{ $t('fansPage.valueIndicators') }}
+    </span>
+    <b-table
+      responsive="md"
+      class="bootstrap-fans-table bootstrap-fans-table__stripes"
+      :items="records.items"
+      :fields="records.fields"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="fans-colors"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        <span class="light-12px">
+          {{ value }}
+        </span>
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span class="regular-12px">
+          {{ value.time }}
+        </span>
+        <span class="regular-12px tretiatry">
+          {{ value.date }}
+        </span>
+      </template>
+      <template #head(currentPower)="{ label }">
+        <span class="semi-bold-12px">
+          {{ label }}
+        </span>
+        <span class="semi-bold-12px errors">
+          {{ '(15)' }}
+        </span>
+      </template>
+      <template #cell(currentPower)="{ value }">
+        <row>
+          <span class="light-12px">
+            {{ value }}
+          </span>
+        </row>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import { colors } from '../../../../views/MemoryModules/DynamicInfo/helpers';
+
+export default {
+  props: {
+    records: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      colors,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-fans-table__th {
+  background-color: transparent !important;
+  color: $text-primary !important;
+  border-top: none !important;
+  padding: 10px 5px !important;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.bootstrap-fans-table__td {
+  padding: 5px !important;
+  border-top: none !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.fans-colors {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.row {
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.errors {
+  color: $indicators-errors;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/colors.js b/src/components/Global/SilaComponents/colors.js
new file mode 100644
index 00000000..de832de2
--- /dev/null
+++ b/src/components/Global/SilaComponents/colors.js
@@ -0,0 +1,8 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 5235feae..3ac8e2ce 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -7,7 +7,7 @@
         </p>
         <div class="toolbar-actions d-flex">
           <slot name="toolbar-buttons"></slot>
-          <b-button
+          <!-- <b-button
             v-for="(action, index) in actions"
             :key="index"
             :data-test-id="`table-button-${action.value}Selected`"
@@ -16,14 +16,14 @@
             @click="$emit('batch-action', action.value)"
           >
             {{ action.label }}
-          </b-button>
-          <b-button
+          </b-button> -->
+          <!-- <b-button
             variant="secondary"
             class="d-block"
             @click="$emit('clear-selected')"
           >
             {{ $t('global.action.cancel') }}
-          </b-button>
+          </b-button> -->
         </div>
       </div>
     </div>
@@ -69,17 +69,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$toolbar-height: 46px;
+$toolbar-height: 64px;
 
 .toolbar-container {
   width: 100%;
-  position: relative;
+  position: fixed;
+  bottom: 0;
+  right: 0;
   z-index: $zindex-dropdown + 1;
 }
 
 .toolbar-content {
   height: $toolbar-height;
-  background-color: theme-color('primary');
+  background-color: $white;
   color: $white;
   position: absolute;
   left: 0;
@@ -87,7 +89,9 @@ $toolbar-height: 46px;
   top: -$toolbar-height;
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
 }
 
 .toolbar-selected {
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index dd99f0d3..4ab6b094 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -6,9 +6,18 @@
         <b-navbar-nav>
           <b-nav-item
             to="/"
-            exact
             data-test-id="appHeader-container-health"
             class="subheader-button"
+            :class="{
+              'active-route-top': ![
+                'profile-settings',
+                'information-and-faq',
+                'support',
+                'console-settings',
+                'console',
+                'security-and-access',
+              ].includes($route.path.split('/')[1]),
+            }"
           >
             {{ $t('subHeader.serverInfo') }}
           </b-nav-item>
@@ -18,9 +27,10 @@
             data-test-id="appHeader-container-health"
             class="subheader-button"
             :class="{
-              'active-route-top': ''.includes(
-                $route.path.split('/console-settings')[1]
-              ),
+              'active-route-top':
+                ''.includes($route.path.split('/console-settings')[1]) ||
+                ''.includes($route.path.split('/console/serial-over-lan')[1]) ||
+                ''.includes($route.path.split('/console/kvm')[1]),
             }"
           >
             {{ $t('subHeader.console') }}
@@ -101,12 +111,6 @@ export default {
     margin-left: 10px;
   }
 
-  .active-route-top {
-    background-color: $white;
-    color: #1a3e5b !important;
-    border-radius: 4px;
-  }
-
   .navbar-text,
   .nav-link,
   .btn-link {
@@ -150,9 +154,6 @@ export default {
   .navbar-nav {
     align-items: baseline;
     padding-left: 24px;
-    .nav-link {
-      color: white;
-    }
     .nav-tags {
       @include media-breakpoint-down(xs) {
         @include sr-only;
@@ -164,11 +165,14 @@ export default {
       }
     }
   }
+}
+#sub-header .nav-item.active-route-top > a {
+  background-color: $white;
+  color: #1a3e5b;
+  border-radius: 4px;
+}
 
-  .router-link-active {
-    color: #1a3e5b !important;
-    background-color: white;
-    padding: 0.68rem 1rem !important;
-  }
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 1);
 }
 </style>