blob: 84e4588f1fd72b5f5c517ff4739c86b768bd81b2 [file] [log] [blame]
Derick Montaguea2988f42020-01-17 13:46:30 -06001<template>
2 <div>
Derick Montague75b48322019-12-06 01:24:41 -06003 <header id="page-header">
Derick Montague80267972021-02-16 09:47:03 -06004 <a
5 class="link-skip-nav btn btn-light"
6 href="#main-content"
7 @click="setFocus"
8 >
Derick Montague68592032020-04-04 14:02:34 -05009 {{ $t('appHeader.skipToContent') }}
10 </a>
11
Mateusz Gapski21d6de02020-07-29 14:28:23 +020012 <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
Yoshie Muranakadc04feb2019-12-04 08:41:22 -080013 <!-- Left aligned nav items -->
Yoshie Muranaka74f86872020-02-10 12:28:37 -080014 <b-button
Derick Montague68592032020-04-04 14:02:34 -050015 id="app-header-trigger"
Yoshie Muranaka74f86872020-02-10 12:28:37 -080016 class="nav-trigger"
17 aria-hidden="true"
Yoshie Muranaka74f86872020-02-10 12:28:37 -080018 type="button"
19 variant="link"
SurenNeware057232b2020-06-08 20:53:26 +053020 :class="{ open: isNavigationOpen }"
Yoshie Muranaka74f86872020-02-10 12:28:37 -080021 @click="toggleNavigation"
22 >
SurenNewarea5cbc442020-10-12 15:26:39 +053023 <icon-close
24 v-if="isNavigationOpen"
25 :title="$t('appHeader.titleHideNavigation')"
26 />
27 <icon-menu
28 v-if="!isNavigationOpen"
29 :title="$t('appHeader.titleShowNavigation')"
30 />
Yoshie Muranaka74f86872020-02-10 12:28:37 -080031 </b-button>
Yoshie Muranakadc04feb2019-12-04 08:41:22 -080032 <b-navbar-nav>
Sukanya Pandeyc5c2ae92020-12-09 16:14:19 +053033 <b-navbar-brand
34 class="mr-0"
35 to="/"
36 data-test-id="appHeader-container-overview"
37 >
Dixsie Wolmers76ccbbc2020-08-24 21:25:57 -050038 <img
39 class="header-logo"
40 src="@/assets/images/logo-header.svg"
41 :alt="altLogo"
42 />
SurenNeware1f8117f2020-09-22 19:28:56 +053043 </b-navbar-brand>
kennyneedsmilky14172d72021-11-10 15:26:07 -060044 <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +053045 <span>|</span>
46 <span class="pl-3 asset-tag">{{ assetTag }}</span>
47 <span class="pl-3">{{ modelType }}</span>
48 <span class="pl-3">{{ serialNumber }}</span>
Sukanya Pandeyc5c2ae92020-12-09 16:14:19 +053049 </div>
Yoshie Muranakab8b6f792019-12-03 14:47:32 -080050 </b-navbar-nav>
Yoshie Muranakadc04feb2019-12-04 08:41:22 -080051 <!-- Right aligned nav items -->
SurenNeware057232b2020-06-08 20:53:26 +053052 <b-navbar-nav class="ml-auto helper-menu">
Derick Montague965cf672020-07-23 17:24:39 -050053 <b-nav-item
Derick Montague828dda92021-06-28 15:52:22 -050054 to="/logs/event-logs"
Derick Montague965cf672020-07-23 17:24:39 -050055 data-test-id="appHeader-container-health"
56 >
Derick Montague68592032020-04-04 14:02:34 -050057 <status-icon :status="healthStatusIcon" />
SurenNeware057232b2020-06-08 20:53:26 +053058 {{ $t('appHeader.health') }}
Derick Montague68592032020-04-04 14:02:34 -050059 </b-nav-item>
Derick Montague965cf672020-07-23 17:24:39 -050060 <b-nav-item
Sandeepa Singh68cbbe92021-07-14 16:02:22 +053061 to="/operations/server-power-operations"
Derick Montague965cf672020-07-23 17:24:39 -050062 data-test-id="appHeader-container-power"
63 >
Derick Montague71114fe2021-05-06 18:17:34 -050064 <status-icon :status="serverStatusIcon" />
SurenNeware057232b2020-06-08 20:53:26 +053065 {{ $t('appHeader.power') }}
Derick Montague68592032020-04-04 14:02:34 -050066 </b-nav-item>
67 <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
68 <li class="nav-item">
Derick Montague965cf672020-07-23 17:24:39 -050069 <b-button
70 id="app-header-refresh"
71 variant="link"
72 data-test-id="appHeader-button-refresh"
73 @click="refresh"
74 >
SurenNewarea5cbc442020-10-12 15:26:39 +053075 <icon-renew :title="$t('appHeader.titleRefresh')" />
SurenNeware057232b2020-06-08 20:53:26 +053076 <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
Derick Montague68592032020-04-04 14:02:34 -050077 </b-button>
78 </li>
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +053079 <li class="nav-item">
Derick Montague965cf672020-07-23 17:24:39 -050080 <b-dropdown
81 id="app-header-user"
82 variant="link"
83 right
84 data-test-id="appHeader-container-user"
85 >
Derick Montague602e98a2020-10-21 16:20:00 -050086 <template #button-content>
SurenNewarea5cbc442020-10-12 15:26:39 +053087 <icon-avatar :title="$t('appHeader.titleProfile')" />
SurenNeware057232b2020-06-08 20:53:26 +053088 <span class="responsive-text">{{ username }}</span>
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +053089 </template>
Derick Montague965cf672020-07-23 17:24:39 -050090 <b-dropdown-item
91 to="/profile-settings"
92 data-test-id="appHeader-link-profile"
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +053093 >{{ $t('appHeader.profileSettings') }}
94 </b-dropdown-item>
Derick Montague965cf672020-07-23 17:24:39 -050095 <b-dropdown-item
96 data-test-id="appHeader-link-logout"
97 @click="logout"
98 >
99 {{ $t('appHeader.logOut') }}
100 </b-dropdown-item>
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530101 </b-dropdown>
Derick Montague68592032020-04-04 14:02:34 -0500102 </li>
Yoshie Muranakab8b6f792019-12-03 14:47:32 -0800103 </b-navbar-nav>
Derick Montaguea2988f42020-01-17 13:46:30 -0600104 </b-navbar>
105 </header>
Yoshie Muranaka3be801a2020-04-21 11:34:56 -0700106 <loading-bar />
Derick Montaguea2988f42020-01-17 13:46:30 -0600107 </div>
108</template>
109
110<script>
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530111import BVToastMixin from '@/components/Mixins/BVToastMixin';
Derick Montaguee2fd1562019-12-20 13:26:53 -0600112import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800113import IconClose from '@carbon/icons-vue/es/close/20';
114import IconMenu from '@carbon/icons-vue/es/menu/20';
Derick Montaguee2fd1562019-12-20 13:26:53 -0600115import IconRenew from '@carbon/icons-vue/es/renew/20';
SurenNeware61859092020-10-01 09:37:32 +0530116import StatusIcon from '@/components/Global/StatusIcon';
117import LoadingBar from '@/components/Global/LoadingBar';
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800118
Derick Montaguea2988f42020-01-17 13:46:30 -0600119export default {
Derick Montaguee2fd1562019-12-20 13:26:53 -0600120 name: 'AppHeader',
Yoshie Muranaka3be801a2020-04-21 11:34:56 -0700121 components: {
122 IconAvatar,
123 IconClose,
124 IconMenu,
125 IconRenew,
126 StatusIcon,
Derick Montague602e98a2020-10-21 16:20:00 -0500127 LoadingBar,
Yoshie Muranaka3be801a2020-04-21 11:34:56 -0700128 },
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530129 mixins: [BVToastMixin],
kennyneedsmilky14172d72021-11-10 15:26:07 -0600130 props: {
Kenneth Fullbright00cb42b2021-12-21 13:56:08 -0600131 routerKey: {
132 type: Number,
133 default: 0,
134 },
kennyneedsmilky14172d72021-11-10 15:26:07 -0600135 },
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800136 data() {
137 return {
Mateusz Gapski03505912020-06-25 08:16:51 +0200138 isNavigationOpen: false,
Derick Montague932aff92021-08-26 14:06:49 -0500139 altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800140 };
141 },
Yoshie Muranakab8b6f792019-12-03 14:47:32 -0800142 computed: {
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530143 isNavTagPresent() {
144 return this.assetTag || this.modelType || this.serialNumber;
145 },
Sukanya Pandeyc5c2ae92020-12-09 16:14:19 +0530146 assetTag() {
147 return this.$store.getters['global/assetTag'];
148 },
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530149 modelType() {
150 return this.$store.getters['global/modelType'];
151 },
152 serialNumber() {
153 return this.$store.getters['global/serialNumber'];
154 },
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530155 isAuthorized() {
156 return this.$store.getters['global/isAuthorized'];
157 },
Derick Montague71114fe2021-05-06 18:17:34 -0500158 serverStatus() {
159 return this.$store.getters['global/serverStatus'];
Yoshie Muranakadc04feb2019-12-04 08:41:22 -0800160 },
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800161 healthStatus() {
162 return this.$store.getters['eventLog/healthStatus'];
163 },
Derick Montague71114fe2021-05-06 18:17:34 -0500164 serverStatusIcon() {
165 switch (this.serverStatus) {
Derick Montaguee2fd1562019-12-20 13:26:53 -0600166 case 'on':
167 return 'success';
168 case 'error':
169 return 'danger';
Yoshie Muranakaa3cbc652020-05-13 12:55:48 -0700170 case 'diagnosticMode':
171 return 'warning';
Derick Montaguee2fd1562019-12-20 13:26:53 -0600172 case 'off':
Yoshie Muranakadc04feb2019-12-04 08:41:22 -0800173 default:
Derick Montaguee2fd1562019-12-20 13:26:53 -0600174 return 'secondary';
Yoshie Muranakadc04feb2019-12-04 08:41:22 -0800175 }
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800176 },
177 healthStatusIcon() {
178 switch (this.healthStatus) {
Yoshie Muranakace9a3ef2020-05-06 14:33:22 -0700179 case 'OK':
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800180 return 'success';
Yoshie Muranakace9a3ef2020-05-06 14:33:22 -0700181 case 'Warning':
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800182 return 'warning';
Yoshie Muranakace9a3ef2020-05-06 14:33:22 -0700183 case 'Critical':
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800184 return 'danger';
185 default:
186 return 'secondary';
187 }
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530188 },
189 username() {
190 return this.$store.getters['global/username'];
Derick Montague602e98a2020-10-21 16:20:00 -0500191 },
Yoshie Muranakab8b6f792019-12-03 14:47:32 -0800192 },
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530193 watch: {
194 isAuthorized(value) {
195 if (value === false) {
Yoshie Muranakaf92e2962021-02-09 12:41:53 -0800196 this.errorToast(this.$t('global.toast.unAuthDescription'), {
197 title: this.$t('global.toast.unAuthTitle'),
198 });
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530199 }
Derick Montague602e98a2020-10-21 16:20:00 -0500200 },
Sukanya Pandeydd6aa0a2020-10-08 20:47:39 +0530201 },
Derick Montague09e45cd2020-01-23 15:45:57 -0600202 created() {
Yoshie Muranakad624dae2020-09-21 14:35:58 -0700203 // Reset auth state to check if user is authenticated based
204 // on available browser cookies
205 this.$store.dispatch('authentication/resetStoreState');
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530206 this.getSystemInfo();
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800207 this.getEvents();
Derick Montague09e45cd2020-01-23 15:45:57 -0600208 },
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800209 mounted() {
210 this.$root.$on(
Sukanya Pandeyedb8a772020-10-29 11:33:42 +0530211 'change-is-navigation-open',
Derick Montague602e98a2020-10-21 16:20:00 -0500212 (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800213 );
214 },
Yoshie Muranakab8b6f792019-12-03 14:47:32 -0800215 methods: {
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530216 getSystemInfo() {
217 this.$store.dispatch('global/getSystemInfo');
Derick Montaguee080a1a2019-12-04 16:30:08 -0600218 },
Yoshie Muranaka1ace1d92020-02-06 13:47:28 -0800219 getEvents() {
220 this.$store.dispatch('eventLog/getEventLogData');
221 },
Yoshie Muranakaeb154bb2020-02-07 12:18:45 -0800222 refresh() {
223 this.$emit('refresh');
224 },
Derick Montaguee080a1a2019-12-04 16:30:08 -0600225 logout() {
Derick Montaguec031b692020-02-12 15:55:42 -0600226 this.$store.dispatch('authentication/logout');
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800227 },
228 toggleNavigation() {
Sukanya Pandeyedb8a772020-10-29 11:33:42 +0530229 this.$root.$emit('toggle-navigation');
Derick Montague602e98a2020-10-21 16:20:00 -0500230 },
Derick Montague80267972021-02-16 09:47:03 -0600231 setFocus(event) {
232 event.preventDefault();
233 this.$root.$emit('skip-navigation');
234 },
Derick Montague602e98a2020-10-21 16:20:00 -0500235 },
Derick Montaguea2988f42020-01-17 13:46:30 -0600236};
237</script>
238
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530239<style lang="scss">
Derick Montague7d4b53b2020-10-26 12:14:16 -0500240@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
241 box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
242}
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530243.app-header {
244 .link-skip-nav {
245 position: absolute;
246 top: -60px;
247 left: 0.5rem;
248 z-index: $zindex-popover;
249 transition: $duration--moderate-01 $exit-easing--expressive;
250 &:focus {
251 top: 0.5rem;
252 transition-timing-function: $entrance-easing--expressive;
253 }
Derick Montague75b48322019-12-06 01:24:41 -0600254 }
SurenNeware1f8117f2020-09-22 19:28:56 +0530255 .navbar-text,
256 .nav-link,
257 .btn-link {
258 color: color('white') !important;
259 fill: currentColor;
260 padding: 0.68rem 1rem !important;
261
262 &:hover {
263 background-color: theme-color-level(light, 10);
264 }
265 &:active {
266 background-color: theme-color-level(light, 9);
267 }
268 &:focus {
Derick Montague7d4b53b2020-10-26 12:14:16 -0500269 @include focus-box-shadow;
270 outline: 0;
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530271 }
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800272 }
273
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530274 .nav-item {
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700275 fill: theme-color('light');
Yoshie Muranaka74f86872020-02-10 12:28:37 -0800276 }
277
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530278 .navbar {
279 padding: 0;
Mateusz Gapski21d6de02020-07-29 14:28:23 +0200280 background-color: $navbar-color;
SurenNeware057232b2020-06-08 20:53:26 +0530281 @include media-breakpoint-up($responsive-layout-bp) {
282 height: $header-height;
283 }
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530284
SurenNeware057232b2020-06-08 20:53:26 +0530285 .helper-menu {
286 @include media-breakpoint-down(sm) {
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700287 background-color: gray('800');
SurenNeware057232b2020-06-08 20:53:26 +0530288 width: 100%;
289 justify-content: flex-end;
290
291 .nav-link,
292 .btn {
293 padding: $spacer / 1.125 $spacer / 2;
294 }
Derick Montague7d4b53b2020-10-26 12:14:16 -0500295
296 .nav-link:focus,
297 .btn:focus {
298 @include focus-box-shadow($gray-800);
299 }
SurenNeware057232b2020-06-08 20:53:26 +0530300 }
301
302 .responsive-text {
303 @include media-breakpoint-down(xs) {
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530304 @include sr-only;
SurenNeware057232b2020-06-08 20:53:26 +0530305 }
306 }
307 }
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530308 }
309
310 .navbar-nav {
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530311 @include media-breakpoint-up($responsive-layout-bp) {
312 padding: 0 $spacer;
313 }
SurenNeware1f8117f2020-09-22 19:28:56 +0530314 align-items: center;
315
316 .navbar-brand,
317 .nav-link {
318 transition: $focus-transition;
319 }
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530320 .nav-tags {
Sukanya Pandeyc5c2ae92020-12-09 16:14:19 +0530321 color: theme-color-level(light, 3);
Sukanya Pandey4dd7eab2021-08-16 18:59:14 +0530322 @include media-breakpoint-down(xs) {
323 @include sr-only;
324 }
325 .asset-tag {
326 @include media-breakpoint-down($responsive-layout-bp) {
327 @include sr-only;
328 }
329 }
Sukanya Pandeyc5c2ae92020-12-09 16:14:19 +0530330 }
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530331 }
332
333 .nav-trigger {
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700334 fill: theme-color('light');
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530335 width: $header-height;
336 height: $header-height;
337 transition: none;
SurenNeware1f8117f2020-09-22 19:28:56 +0530338 display: inline-flex;
339 flex: 0 0 20px;
340 align-items: center;
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530341
342 svg {
343 margin: 0;
344 }
345
346 &:hover {
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700347 fill: theme-color('light');
SurenNeware1f8117f2020-09-22 19:28:56 +0530348 background-color: theme-color-level(light, 10);
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530349 }
350
SurenNeware057232b2020-06-08 20:53:26 +0530351 &.open {
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700352 background-color: gray('800');
SurenNeware057232b2020-06-08 20:53:26 +0530353 }
354
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530355 @include media-breakpoint-up($responsive-layout-bp) {
356 display: none;
357 }
358 }
359
SurenNeware1f8117f2020-09-22 19:28:56 +0530360 .dropdown-menu {
361 margin-top: 0;
362
363 @include media-breakpoint-only(md) {
364 margin-top: 4px;
SurenNeware057232b2020-06-08 20:53:26 +0530365 }
366 }
367
368 .navbar-expand {
369 @include media-breakpoint-down(sm) {
370 flex-flow: wrap;
Sukanya Pandeyb1f559f2020-04-28 20:18:28 +0530371 }
Yoshie Muranakadc04feb2019-12-04 08:41:22 -0800372 }
373}
SurenNeware1f8117f2020-09-22 19:28:56 +0530374
375.navbar-brand {
376 padding: $spacer/2;
377 height: $header-height;
378 line-height: 1;
379 &:focus {
380 box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
381 outline: 0;
382 }
383}
Yoshie Muranakab8b6f792019-12-03 14:47:32 -0800384</style>