Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.

9 files changed, 546 insertions, 73 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index c8fbbf59..eca1e4c8 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -183,7 +183,6 @@
         </b-button>
       </b-navbar>
     </header>
-    
   </div>
 </template>
 
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2aa61984..dc7a58d0 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -114,8 +114,9 @@ export default {
   computed: {
     sideBar() {
       if (
-        this.$route.path === '/operations/kvm' ||
-        this.$route.path === '/operations/serial-over-lan'
+        this.$route.path === '/console-settings' ||
+        this.$route.path === '/console/serial-over-lan' ||
+        this.$route.path === '/console/kvm'
       ) {
         return this.kvmNavigationItems;
       } else {
@@ -159,6 +160,7 @@ svg {
   align-items: center;
   padding-left: $spacer * 4;
   outline: none;
+  box-sizing: border-box;
   height: 68px;
   border-top: 1px solid rgba(26, 62, 91, 0.2);
   &:not(.nav-link--current) {
@@ -205,12 +207,6 @@ svg {
   border-top: 1px solid rgba(26, 62, 91, 0.2);
   font-weight: 600;
   line-height: 20px;
-  &.collapsed {
-    .icon-expand {
-      transform: rotate(180deg);
-      transition: 0.3s linear;
-    }
-  }
   &.not-collapsed {
     font-weight: 600;
     line-height: 20px;
@@ -218,9 +214,7 @@ svg {
 }
 
 .icon-expand {
-  float: right;
-  transition: 0.3s linear;
-  margin-top: $spacer / 4;
+  margin: 0;
 }
 
 .btn-link,
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 6ba9ffe3..ad5f58b5 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -8,9 +8,220 @@ export const AppNavigationMixin = {
     return {
       navigationItems: [
         {
-          id: 'overview',
-          label: this.$t('appNavigation.overview'),
+          id: 'system',
+          label: this.$t('appNavigation.systemInformaion'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'info',
+              label: this.$t('appNavigation.overviewInfo'),
+              route: '/',
+            },
+            {
+              id: 'network',
+              label: this.$t('appNavigation.networkParametrs'),
+              route: '/network',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.eventLogs'),
+              route: '/logs/post-code-logs',
+            },
+            {
+              id: 'server-parametrs',
+              label: this.$t('appNavigation.serverParam'),
+              route: '/server-parametrs',
+            },
+          ],
+        },
+        {
+          id: 'bmc',
+          label: this.$t('appNavigation.bmc'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'configuration',
+              label: this.$t('appNavigation.config'),
+              route: '/bmc-configuration',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.deviceFirmware'),
+              route: '/logs/post-code-logs',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.broadcast'),
+              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'),
+          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: 'processors',
+          label: this.$t('appNavigation.processors'),
+          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: '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: 'fans',
+          label: this.$t('appNavigation.fans'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'overview-info',
+              label: this.$t('appNavigation.statisticInformation'),
+              route: '/logs/event-logs',
+            },
+            {
+              id: 'post-code-logs',
+              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',
+            },
+          ],
+        },
+        {
+          id: 'motherboard',
+          label: this.$t('appNavigation.motherboard'),
+          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: 'pci-devises',
+          label: this.$t('appNavigation.pciDevises'),
+          route: '/',
+        },
+        //old tabs
+        {
+          id: 'overview',
+          label: 'СТАРЫЕ ВКЛАДКИ',
+          route: '/Info',
           icon: 'iconOverview',
         },
         {
@@ -58,11 +269,6 @@ export const AppNavigationMixin = {
               route: '/operations/factory-reset',
             },
             {
-              id: 'kvm',
-              label: this.$t('appNavigation.kvm'),
-              route: '/operations/kvm',
-            },
-            {
               id: 'key-clear',
               label: this.$t('appNavigation.keyClear'),
               route: '/operations/key-clear',
@@ -78,11 +284,6 @@ export const AppNavigationMixin = {
               route: '/operations/reboot-bmc',
             },
             {
-              id: 'serial-over-lan',
-              label: this.$t('appNavigation.serialOverLan'),
-              route: '/operations/serial-over-lan',
-            },
-            {
               id: 'server-power-operations',
               label: this.$t('appNavigation.serverPowerOperations'),
               route: '/operations/server-power-operations',
@@ -172,17 +373,17 @@ export const KvmNavigationMixin = {
         {
           id: 'console-settings',
           label: this.$t('kvmNavigation.ConsoleSettings'),
-          route: '/operations/kvm',
+          route: '/console-settings',
         },
         {
           id: 'serial-over-lan',
           label: this.$t('kvmNavigation.serialOverLan'),
-          route: '/operations/serial-over-lan',
+          route: '/console/serial-over-lan',
         },
         {
           id: 'kvm',
           label: this.$t('kvmNavigation.kvm'),
-          route: '/operations/kvm',
+          route: '/console/kvm',
         },
       ],
     };
diff --git a/src/components/AppNavigation/KmvNavigationMixin.js b/src/components/AppNavigation/KmvNavigationMixin.js
deleted file mode 100644
index a15b3d38..00000000
--- a/src/components/AppNavigation/KmvNavigationMixin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const KvmNavigationMixin = {
-  data() {
-    return {
-      navigationItems: [
-        {
-          id: 'console-settings',
-          label: this.$t('appNavigation.ConsoleSettings'),
-          route: '/operations/kvm',
-        },
-        {
-          id: 'serial-over-lan',
-          label: this.$t('appNavigation.serialOverLan'),
-          route: '/operations/serial-over-lan',
-        },
-        {
-          id: 'kvm',
-          label: this.$t('appNavigation.kvm'),
-          route: '/operations/kvm',
-        },
-      ],
-    };
-  },
-};
-
-export default KvmNavigationMixin;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb63..71df8fae 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -20,18 +20,10 @@ export default {
 main {
   width: 100%;
   height: 100%;
-  padding-top: $spacer * 1.5;
-  padding-bottom: $spacer * 3;
-  padding-left: $spacer;
-  padding-right: $spacer;
 
   &:focus-visible {
     box-shadow: inset 0 0 0 2px theme-color('primary');
     outline: none;
   }
-
-  @include media-breakpoint-up($responsive-layout-bp) {
-    padding-left: $spacer * 2;
-  }
 }
 </style>
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index 45c75edb..12dde551 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -1,22 +1,17 @@
 <template>
   <div class="page-title">
-    <h1>{{ title }}</h1>
-    <p v-if="description">{{ description }}</p>
+    <h1 class="bold-24px text-title">{{ title }}</h1>
+    <p v-if="description" class="page-description">{{ description }}</p>
   </div>
 </template>
 
 <script>
 export default {
   name: 'PageTitle',
-  props: {
-    description: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       title: this.$route.meta.title,
+      description: this.$route.meta.description,
     };
   },
 };
@@ -24,9 +19,30 @@ export default {
 
 <style lang="scss" scoped>
 .page-title {
-  margin-bottom: $spacer * 2;
+  width: 100%;
+  height: 72px;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  background-color: $white;
+  z-index: 1001;
+
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.text-title {
+  margin-left: 2rem;
 }
-p {
-  max-width: 72ch;
+
+.page-description {
+  color: $text-secondary;
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+
+  margin: 4px 0 0 2rem;
+  padding: 0;
 }
 </style>
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
new file mode 100644
index 00000000..b91aa08b
--- /dev/null
+++ b/src/components/Global/Popover.vue
@@ -0,0 +1,256 @@
+<template>
+  <div id="my-container">
+    <span
+      v-if="!microcode"
+      :id="id"
+      ref="button"
+      class="regular-12px underline pointer"
+      variant="primary"
+    >
+      {{ $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"
+      :target="id"
+      triggers="click"
+      :show.sync="popoverShow"
+      placement="auto"
+      container="my-container"
+      @show="onShow"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ $t(popup) }}</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>
+          <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label>
+          <img
+            id="popover-target-1"
+            src="@/assets/images/popups/red-sign.svg"
+          />
+          <popover-info
+            id="popover-target-1"
+            description="Введите HEX в поле для подтверждения действия"
+          />
+          <div class="hex-form">
+            <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
+          </div>
+        </div>
+        <div class="popup-body__input-container">
+          <span class="regular-12px tretiatry">Поле для ввода</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(button) }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+import PopoverInfo from './PopoverInfo';
+
+export default {
+  components: {
+    PopoverInfo,
+  },
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'global.action.reload',
+    },
+    popup: {
+      type: String,
+      default: '',
+    },
+    microcode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      input1state: null,
+      input1Return: '',
+      popoverShow: false,
+    };
+  },
+  watch: {
+    input1(val) {
+      if (val) {
+        this.input1state = true;
+      }
+    },
+  },
+  methods: {
+    onClose() {
+      this.popoverShow = false;
+    },
+    onOk() {
+      if (!this.input1) {
+        this.input1state = false;
+      }
+      if (this.input1) {
+        this.onClose();
+        // Return our popover form results
+        this.input1Return = this.input1;
+      }
+    },
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+      // This is called just before the popover is shown
+      // Reset our popover form variables
+      this.input1 = '';
+      this.input1state = null;
+      this.input1Return = '';
+    },
+    onShown() {
+      // Called just after the popover has been shown
+      // Transfer focus to the first input
+      this.focusRef(this.$refs.input1);
+    },
+    onHidden() {
+      // Called just after the popover has finished hiding
+      // Bring focus back to the button
+      this.focusRef(this.$refs.button);
+    },
+    focusRef(ref) {
+      // Some references may be a component, functional component, or plain element
+      // This handles that check before focusing, assuming a `focus()` method exists
+      // We do this in a double `$nextTick()` to ensure components have
+      // updated & popover positioned first
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          (ref.$el || ref).focus();
+        });
+      });
+    },
+  },
+};
+</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;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.hex-form {
+  height: 32px;
+  width: 341px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  margin: 0 auto;
+}
+
+.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;
+}
+
+.light-12px {
+  margin: 0px 5px 0px 15px;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.popover-info {
+  background-color: #040a0f;
+  width: 168px;
+  height: 76px;
+  &.arrow {
+    display: block;
+  }
+}
+
+.microcode-reload-font {
+  padding-left: 5px;
+  color: $red-brand-primary;
+}
+</style>
diff --git a/src/components/Global/PopoverInfo.vue b/src/components/Global/PopoverInfo.vue
new file mode 100644
index 00000000..4b1b0b0d
--- /dev/null
+++ b/src/components/Global/PopoverInfo.vue
@@ -0,0 +1,40 @@
+<template>
+  <b-popover :target="id" triggers="hover" placement="top">
+    <span class="regular-12px">{{ description }}</span>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.popover::v-deep {
+  background-color: #040a0f;
+  width: 168px;
+  height: 76px;
+}
+
+.popover::v-deep .arrow {
+  visibility: visible;
+}
+
+.popover::v-deep .arrow::after {
+  border-top-color: #040a0f;
+  border-bottom-color: #040a0f;
+}
+
+.regular-12px {
+  color: $white;
+}
+</style>
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index bbbdc6a8..dd99f0d3 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -14,12 +14,12 @@
           </b-nav-item>
 
           <b-nav-item
-            to="/operations/kvm"
+            to="/console-settings"
             data-test-id="appHeader-container-health"
             class="subheader-button"
             :class="{
               'active-route-top': ''.includes(
-                $route.path.split('operations/kvm')[1]
+                $route.path.split('/console-settings')[1]
               ),
             }"
           >