From 931c2cad0da1a84e3df0745b385ec06d29cc2634 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 20 Jun 2022 11:52:15 +0300
Subject: fix Modals, Tables and Pages: event logs, inventoty, post logs,
 operttions, global styles

---
 src/components/AppHeader/AppHeader.vue | 190 ++++++++++++++++-----------------
 1 file changed, 91 insertions(+), 99 deletions(-)

(limited to 'src/components/AppHeader/AppHeader.vue')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 81287163b..a577b4527 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -32,7 +32,7 @@
         <b-navbar-nav>
           <b-navbar-brand
             class="mr-0 app-logo"
-            to="/"
+            to="/hardware-status/inventory"
             data-test-id="appHeader-container-overview"
           >
             <img
@@ -41,16 +41,18 @@
             />
           </b-navbar-brand>
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
-            <span>|</span>
-            <span class="pl-3 asset-tag">{{ assetTag }}</span>
-            <span class="pl-3">{{ modelType }}</span>
-            <span class="pl-3">{{ serialNumber }}</span>
+            <span style="color: white">|</span>
+            <span style="color: white" class="pl-2 asset-tag">{{
+              assetTag
+            }}</span>
+            <span style="color: white" class="pl-2">{{ modelType }}</span>
+            <span style="color: white" class="pl-2">{{ serialNumber }}</span>
           </div>
         </b-navbar-nav>
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="helper-menu">
+        <!-- Left nav items-->
+        <!--  <b-navbar-nav class="helper-menu">
           <b-nav-item
-            to="/"
+            to="/hardware-status/inventory"
             data-test-id="appHeader-container-health"
             class="nav-top-button"
             :class="{
@@ -77,7 +79,7 @@
             {{ $t('appHeader.informationAndFAQ') }}
           </b-nav-item>
 
-          <b-nav-item
+           <b-nav-item
             to="/support"
             data-test-id="appHeader-container-power"
             class="nav-top-button"
@@ -88,87 +90,67 @@
             }"
           >
             {{ $t('appHeader.support') }}
-          </b-nav-item>
-        </b-navbar-nav>
-        <!-- Left nav items-->
-        <img
-          class="header-clock__icon"
-          src="@/assets/images/header/header-clock.svg"
-        />
-        <span style="color: white">15:54:00</span>
-        <b-nav-item
-          to="/logs/event-logs"
-          data-test-id="appHeader-container-health"
-          style="display: block"
-        >
-          <status-icon :status="healthStatusIcon" />
-          {{ $t('appHeader.health') }}
-        </b-nav-item>
-        <b-nav-item
-          to="/operations/server-power-operations"
-          data-test-id="appHeader-container-power"
-          style="display: block"
-        >
-          <status-icon :status="serverStatusIcon" />
-          {{ $t('appHeader.power') }}
-        </b-nav-item>
-        <div class="nav-item">
-          <b-button
-            id="app-header-refresh"
-            variant="link"
-            data-test-id="appHeader-button-refresh"
-            @click="refresh"
-          >
-            <icon-renew :title="$t('appHeader.titleRefresh')" />
-            <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
-          </b-button>
-        </div>
-        <div class="nav-item">
-          <b-dropdown
-            id="app-header-user"
-            variant="link"
-            right
-            data-test-id="appHeader-container-user"
-          >
-            <template #button-content>
-              <icon-avatar :title="$t('appHeader.titleProfile')" />
-              <span class="responsive-text">{{ username }}</span>
-            </template>
-            <b-dropdown-item
-              to="/profile-settings"
-              data-test-id="appHeader-link-profile"
-              >{{ $t('appHeader.profileSettings') }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              data-test-id="appHeader-link-logout"
-              @click="logout"
+          </b-nav-item> 
+        </b-navbar-nav> -->
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto helper-menu">
+          <li class="nav-item">
+            <b-button
+              variant="link"
+              data-test-id="appHeader-container-health"
+              @click="toLogs"
             >
-              {{ $t('appHeader.logOut') }}
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
-        <!-- <img
-          style="margin-left: 20px"
-          class="header-avatar__icon"
-          src="@/assets/images/header/header-avatar.svg"
-        />
-        <span style="color: white">Маргарита тутова</span> -->
-        <b-button id="app-header-notification" class="app-header-notification">
-          <img
-            class="header-notification__icon"
-            src="@/assets/images/header/icon-notification.svg"
-          />
-        </b-button>
-        <b-button
-          id="app-header-logout"
-          class="app-header-logout"
-          @click="logout"
-        >
-          <img
-            class="header-logout__icon"
-            src="@/assets/images/header/logout-icon.svg"
-          />
-        </b-button>
+              <status-icon :status="healthStatusIcon" />
+              <span>{{ $t('appHeader.health') }}</span>
+            </b-button>
+          </li>
+          <li class="nav-item">
+            <b-button
+              variant="link"
+              data-test-id="appHeader-container-power"
+              @click="toOperations"
+            >
+              <status-icon :status="serverStatusIcon" />
+              <span>{{ $t('appHeader.power') }}</span>
+            </b-button>
+          </li>
+          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
+          <li class="nav-item">
+            <b-button
+              id="app-header-refresh"
+              variant="link"
+              data-test-id="appHeader-button-refresh"
+              @click="refresh"
+            >
+              <icon-renew :title="$t('appHeader.titleRefresh')" />
+              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
+            </b-button>
+          </li>
+          <li class="nav-item">
+            <b-dropdown
+              id="app-header-user"
+              variant="link"
+              right
+              data-test-id="appHeader-container-user"
+            >
+              <template #button-content>
+                <icon-avatar :title="$t('appHeader.titleProfile')" />
+                <span class="responsive-text">{{ username }}</span>
+              </template>
+              <b-dropdown-item
+                to="/profile-settings"
+                data-test-id="appHeader-link-profile"
+                >{{ $t('appHeader.profileSettings') }}
+              </b-dropdown-item>
+              <b-dropdown-item
+                data-test-id="appHeader-link-logout"
+                @click="logout"
+              >
+                {{ $t('appHeader.logOut') }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </li>
+        </b-navbar-nav>
       </b-navbar>
     </header>
   </div>
@@ -180,7 +162,7 @@ import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
-// import StatusIcon from '@/components/Global/StatusIcon';
+import StatusIcon from '@/components/Global/StatusIcon';
 export default {
   name: 'AppHeader',
   components: {
@@ -188,7 +170,7 @@ export default {
     IconMenu,
     IconAvatar,
     IconRenew,
-    // StatusIcon,
+    StatusIcon,
   },
   mixins: [BVToastMixin],
   props: {
@@ -295,6 +277,12 @@ export default {
       event.preventDefault();
       this.$root.$emit('skip-navigation');
     },
+    toLogs() {
+      this.$router.push('/logs/event-logs').catch(() => {});
+    },
+    toOperations() {
+      this.$router.push('/operations/server-power-operations').catch(() => {});
+    },
   },
 };
 </script>
@@ -348,8 +336,16 @@ export default {
   .navbar {
     padding: 0;
     background-color: $navbar-color;
+    svg {
+      margin-right: 2px;
+    }
+    .status-icon {
+      svg {
+        vertical-align: text-bottom;
+      }
+    }
     @include media-breakpoint-up($responsive-layout-bp) {
-      height: $top-header-height;
+      height: $first-header-height;
     }
 
     .helper-menu {
@@ -395,8 +391,8 @@ export default {
 
   .nav-trigger {
     fill: theme-color('light');
-    width: $top-header-height;
-    height: $top-header-height;
+    width: $first-header-height;
+    height: $first-header-height;
     transition: none;
     display: inline-flex;
     flex: 0 0 20px;
@@ -437,7 +433,7 @@ export default {
 
 .navbar-brand {
   padding: $spacer/2;
-  height: $top-header-height;
+  height: $first-header-height;
   line-height: 1;
   &:focus {
     box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
@@ -445,10 +441,6 @@ export default {
   }
 }
 
-.header-clock__icon {
-  margin-left: auto;
-}
-
 .app-header-logout,
 .app-header-notification {
   margin: 0 5px;
-- 
cgit v1.2.3