1<template>
2  <div>
3    <header id="page-header">
4      <a
5        class="link-skip-nav btn btn-light"
6        href="#main-content"
7        @click="setFocus"
8      >
9        {{ $t('appHeader.skipToContent') }}
10      </a>
11
12      <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
13        <!-- Left aligned nav items -->
14        <b-button
15          id="app-header-trigger"
16          class="nav-trigger"
17          aria-hidden="true"
18          type="button"
19          variant="link"
20          :class="{ open: isNavigationOpen }"
21          @click="toggleNavigation"
22        >
23          <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          />
31        </b-button>
32        <b-navbar-nav>
33          <b-navbar-brand
34            class="mr-0"
35            to="/"
36            data-test-id="appHeader-container-overview"
37          >
38            <img
39              class="header-logo"
40              src="@/assets/images/logo-header.svg"
41              :alt="altLogo"
42            />
43          </b-navbar-brand>
44          <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
45            <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>
49          </div>
50        </b-navbar-nav>
51        <!-- Right aligned nav items -->
52        <b-navbar-nav class="ml-auto helper-menu">
53          <b-nav-item
54            to="/logs/event-logs"
55            data-test-id="appHeader-container-health"
56          >
57            <status-icon :status="healthStatusIcon" />
58            {{ $t('appHeader.health') }}
59          </b-nav-item>
60          <b-nav-item
61            to="/operations/server-power-operations"
62            data-test-id="appHeader-container-power"
63          >
64            <status-icon :status="serverStatusIcon" />
65            {{ $t('appHeader.power') }}
66          </b-nav-item>
67          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
68          <li class="nav-item">
69            <b-button
70              id="app-header-refresh"
71              variant="link"
72              data-test-id="appHeader-button-refresh"
73              @click="refresh"
74            >
75              <icon-renew :title="$t('appHeader.titleRefresh')" />
76              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
77            </b-button>
78          </li>
79          <li class="nav-item">
80            <b-dropdown
81              id="app-header-user"
82              variant="link"
83              right
84              data-test-id="appHeader-container-user"
85            >
86              <template #button-content>
87                <icon-avatar :title="$t('appHeader.titleProfile')" />
88                <span class="responsive-text">{{ username }}</span>
89              </template>
90              <b-dropdown-item
91                to="/profile-settings"
92                data-test-id="appHeader-link-profile"
93                >{{ $t('appHeader.profileSettings') }}
94              </b-dropdown-item>
95              <b-dropdown-item
96                data-test-id="appHeader-link-logout"
97                @click="logout"
98              >
99                {{ $t('appHeader.logOut') }}
100              </b-dropdown-item>
101            </b-dropdown>
102          </li>
103        </b-navbar-nav>
104      </b-navbar>
105    </header>
106    <loading-bar />
107  </div>
108</template>
109
110<script>
111import BVToastMixin from '@/components/Mixins/BVToastMixin';
112import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
113import IconClose from '@carbon/icons-vue/es/close/20';
114import IconMenu from '@carbon/icons-vue/es/menu/20';
115import IconRenew from '@carbon/icons-vue/es/renew/20';
116import StatusIcon from '@/components/Global/StatusIcon';
117import LoadingBar from '@/components/Global/LoadingBar';
118
119export default {
120  name: 'AppHeader',
121  components: {
122    IconAvatar,
123    IconClose,
124    IconMenu,
125    IconRenew,
126    StatusIcon,
127    LoadingBar,
128  },
129  mixins: [BVToastMixin],
130  props: {
131    routerKey: {
132      type: Number,
133      default: 0,
134    },
135  },
136  data() {
137    return {
138      isNavigationOpen: false,
139      altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
140    };
141  },
142  computed: {
143    isNavTagPresent() {
144      return this.assetTag || this.modelType || this.serialNumber;
145    },
146    assetTag() {
147      return this.$store.getters['global/assetTag'];
148    },
149    modelType() {
150      return this.$store.getters['global/modelType'];
151    },
152    serialNumber() {
153      return this.$store.getters['global/serialNumber'];
154    },
155    isAuthorized() {
156      return this.$store.getters['global/isAuthorized'];
157    },
158    userPrivilege() {
159      return this.$store.getters['global/userPrivilege'];
160    },
161    serverStatus() {
162      return this.$store.getters['global/serverStatus'];
163    },
164    healthStatus() {
165      return this.$store.getters['eventLog/healthStatus'];
166    },
167    serverStatusIcon() {
168      switch (this.serverStatus) {
169        case 'on':
170          return 'success';
171        case 'error':
172          return 'danger';
173        case 'diagnosticMode':
174          return 'warning';
175        case 'off':
176        default:
177          return 'secondary';
178      }
179    },
180    healthStatusIcon() {
181      switch (this.healthStatus) {
182        case 'OK':
183          return 'success';
184        case 'Warning':
185          return 'warning';
186        case 'Critical':
187          return 'danger';
188        default:
189          return 'secondary';
190      }
191    },
192    username() {
193      return this.$store.getters['global/username'];
194    },
195  },
196  watch: {
197    isAuthorized(value) {
198      if (value === false) {
199        this.errorToast(this.$t('global.toast.unAuthDescription'), {
200          title: this.$t('global.toast.unAuthTitle'),
201        });
202      }
203    },
204  },
205  created() {
206    // Reset auth state to check if user is authenticated based
207    // on available browser cookies
208    this.$store.dispatch('authentication/resetStoreState');
209    this.getSystemInfo();
210    this.getEvents();
211  },
212  mounted() {
213    this.$root.$on(
214      'change-is-navigation-open',
215      (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
216    );
217  },
218  methods: {
219    getSystemInfo() {
220      this.$store.dispatch('global/getSystemInfo');
221    },
222    getEvents() {
223      this.$store.dispatch('eventLog/getEventLogData');
224    },
225    refresh() {
226      this.$emit('refresh');
227    },
228    logout() {
229      this.$store.dispatch('authentication/logout');
230    },
231    toggleNavigation() {
232      this.$root.$emit('toggle-navigation');
233    },
234    setFocus(event) {
235      event.preventDefault();
236      this.$root.$emit('skip-navigation');
237    },
238  },
239};
240</script>
241
242<style lang="scss">
243@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
244  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
245}
246.app-header {
247  .link-skip-nav {
248    position: absolute;
249    top: -60px;
250    left: 0.5rem;
251    z-index: $zindex-popover;
252    transition: $duration--moderate-01 $exit-easing--expressive;
253    &:focus {
254      top: 0.5rem;
255      transition-timing-function: $entrance-easing--expressive;
256    }
257  }
258  .navbar-text,
259  .nav-link,
260  .btn-link {
261    color: color('white') !important;
262    fill: currentColor;
263    padding: 0.68rem 1rem !important;
264
265    &:hover {
266      background-color: theme-color-level(light, 10);
267    }
268    &:active {
269      background-color: theme-color-level(light, 9);
270    }
271    &:focus {
272      @include focus-box-shadow;
273      outline: 0;
274    }
275  }
276
277  .nav-item {
278    fill: theme-color('light');
279  }
280
281  .navbar {
282    padding: 0;
283    background-color: $navbar-color;
284    @include media-breakpoint-up($responsive-layout-bp) {
285      height: $header-height;
286    }
287
288    .helper-menu {
289      @include media-breakpoint-down(sm) {
290        background-color: gray('800');
291        width: 100%;
292        justify-content: flex-end;
293
294        .nav-link,
295        .btn {
296          padding: $spacer / 1.125 $spacer / 2;
297        }
298
299        .nav-link:focus,
300        .btn:focus {
301          @include focus-box-shadow($gray-800);
302        }
303      }
304
305      .responsive-text {
306        @include media-breakpoint-down(xs) {
307          @include sr-only;
308        }
309      }
310    }
311  }
312
313  .navbar-nav {
314    @include media-breakpoint-up($responsive-layout-bp) {
315      padding: 0 $spacer;
316    }
317    align-items: center;
318
319    .navbar-brand,
320    .nav-link {
321      transition: $focus-transition;
322    }
323    .nav-tags {
324      color: theme-color-level(light, 3);
325      @include media-breakpoint-down(xs) {
326        @include sr-only;
327      }
328      .asset-tag {
329        @include media-breakpoint-down($responsive-layout-bp) {
330          @include sr-only;
331        }
332      }
333    }
334  }
335
336  .nav-trigger {
337    fill: theme-color('light');
338    width: $header-height;
339    height: $header-height;
340    transition: none;
341    display: inline-flex;
342    flex: 0 0 20px;
343    align-items: center;
344
345    svg {
346      margin: 0;
347    }
348
349    &:hover {
350      fill: theme-color('light');
351      background-color: theme-color-level(light, 10);
352    }
353
354    &.open {
355      background-color: gray('800');
356    }
357
358    @include media-breakpoint-up($responsive-layout-bp) {
359      display: none;
360    }
361  }
362
363  .dropdown-menu {
364    margin-top: 0;
365
366    @include media-breakpoint-only(md) {
367      margin-top: 4px;
368    }
369  }
370
371  .navbar-expand {
372    @include media-breakpoint-down(sm) {
373      flex-flow: wrap;
374    }
375  }
376}
377
378.navbar-brand {
379  padding: $spacer/2;
380  height: $header-height;
381  line-height: 1;
382  &:focus {
383    box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
384    outline: 0;
385  }
386}
387</style>
388