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" 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  data() {
131    return {
132      isNavigationOpen: false,
133      altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
134    };
135  },
136  computed: {
137    isNavTagPresent() {
138      return this.assetTag || this.modelType || this.serialNumber;
139    },
140    assetTag() {
141      return this.$store.getters['global/assetTag'];
142    },
143    modelType() {
144      return this.$store.getters['global/modelType'];
145    },
146    serialNumber() {
147      return this.$store.getters['global/serialNumber'];
148    },
149    isAuthorized() {
150      return this.$store.getters['global/isAuthorized'];
151    },
152    serverStatus() {
153      return this.$store.getters['global/serverStatus'];
154    },
155    healthStatus() {
156      return this.$store.getters['eventLog/healthStatus'];
157    },
158    serverStatusIcon() {
159      switch (this.serverStatus) {
160        case 'on':
161          return 'success';
162        case 'error':
163          return 'danger';
164        case 'diagnosticMode':
165          return 'warning';
166        case 'off':
167        default:
168          return 'secondary';
169      }
170    },
171    healthStatusIcon() {
172      switch (this.healthStatus) {
173        case 'OK':
174          return 'success';
175        case 'Warning':
176          return 'warning';
177        case 'Critical':
178          return 'danger';
179        default:
180          return 'secondary';
181      }
182    },
183    username() {
184      return this.$store.getters['global/username'];
185    },
186  },
187  watch: {
188    isAuthorized(value) {
189      if (value === false) {
190        this.errorToast(this.$t('global.toast.unAuthDescription'), {
191          title: this.$t('global.toast.unAuthTitle'),
192        });
193      }
194    },
195  },
196  created() {
197    // Reset auth state to check if user is authenticated based
198    // on available browser cookies
199    this.$store.dispatch('authentication/resetStoreState');
200    this.getSystemInfo();
201    this.getEvents();
202  },
203  mounted() {
204    this.$root.$on(
205      'change-is-navigation-open',
206      (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
207    );
208  },
209  methods: {
210    getSystemInfo() {
211      this.$store.dispatch('global/getSystemInfo');
212    },
213    getEvents() {
214      this.$store.dispatch('eventLog/getEventLogData');
215    },
216    refresh() {
217      this.$emit('refresh');
218    },
219    logout() {
220      this.$store.dispatch('authentication/logout');
221    },
222    toggleNavigation() {
223      this.$root.$emit('toggle-navigation');
224    },
225    setFocus(event) {
226      event.preventDefault();
227      this.$root.$emit('skip-navigation');
228    },
229  },
230};
231</script>
232
233<style lang="scss">
234@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
235  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
236}
237.app-header {
238  .link-skip-nav {
239    position: absolute;
240    top: -60px;
241    left: 0.5rem;
242    z-index: $zindex-popover;
243    transition: $duration--moderate-01 $exit-easing--expressive;
244    &:focus {
245      top: 0.5rem;
246      transition-timing-function: $entrance-easing--expressive;
247    }
248  }
249  .navbar-text,
250  .nav-link,
251  .btn-link {
252    color: color('white') !important;
253    fill: currentColor;
254    padding: 0.68rem 1rem !important;
255
256    &:hover {
257      background-color: theme-color-level(light, 10);
258    }
259    &:active {
260      background-color: theme-color-level(light, 9);
261    }
262    &:focus {
263      @include focus-box-shadow;
264      outline: 0;
265    }
266  }
267
268  .nav-item {
269    fill: theme-color('light');
270  }
271
272  .navbar {
273    padding: 0;
274    background-color: $navbar-color;
275    @include media-breakpoint-up($responsive-layout-bp) {
276      height: $header-height;
277    }
278
279    .helper-menu {
280      @include media-breakpoint-down(sm) {
281        background-color: gray('800');
282        width: 100%;
283        justify-content: flex-end;
284
285        .nav-link,
286        .btn {
287          padding: $spacer / 1.125 $spacer / 2;
288        }
289
290        .nav-link:focus,
291        .btn:focus {
292          @include focus-box-shadow($gray-800);
293        }
294      }
295
296      .responsive-text {
297        @include media-breakpoint-down(xs) {
298          @include sr-only;
299        }
300      }
301    }
302  }
303
304  .navbar-nav {
305    @include media-breakpoint-up($responsive-layout-bp) {
306      padding: 0 $spacer;
307    }
308    align-items: center;
309
310    .navbar-brand,
311    .nav-link {
312      transition: $focus-transition;
313    }
314    .nav-tags {
315      color: theme-color-level(light, 3);
316      @include media-breakpoint-down(xs) {
317        @include sr-only;
318      }
319      .asset-tag {
320        @include media-breakpoint-down($responsive-layout-bp) {
321          @include sr-only;
322        }
323      }
324    }
325  }
326
327  .nav-trigger {
328    fill: theme-color('light');
329    width: $header-height;
330    height: $header-height;
331    transition: none;
332    display: inline-flex;
333    flex: 0 0 20px;
334    align-items: center;
335
336    svg {
337      margin: 0;
338    }
339
340    &:hover {
341      fill: theme-color('light');
342      background-color: theme-color-level(light, 10);
343    }
344
345    &.open {
346      background-color: gray('800');
347    }
348
349    @include media-breakpoint-up($responsive-layout-bp) {
350      display: none;
351    }
352  }
353
354  .dropdown-menu {
355    margin-top: 0;
356
357    @include media-breakpoint-only(md) {
358      margin-top: 4px;
359    }
360  }
361
362  .navbar-expand {
363    @include media-breakpoint-down(sm) {
364      flex-flow: wrap;
365    }
366  }
367}
368
369.navbar-brand {
370  padding: $spacer/2;
371  height: $header-height;
372  line-height: 1;
373  &:focus {
374    box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
375    outline: 0;
376  }
377}
378</style>
379