diff options
Diffstat (limited to 'src/components/AppHeader/AppHeader.vue')
| -rw-r--r-- | src/components/AppHeader/AppHeader.vue | 190 |
1 files changed, 91 insertions, 99 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 81287163..a577b452 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; |