1<template>
2  <div>
3    <header id="page-header">
4      <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
5        {{ $t('appHeader.skipToContent') }}
6      </a>
7
8      <b-navbar
9        variant="dark"
10        type="dark"
11        :aria-label="$t('appHeader.applicationHeader')"
12      >
13        <!-- Left aligned nav items -->
14        <b-button
15          id="app-header-trigger"
16          class="nav-trigger"
17          aria-hidden="true"
18          title="Open navigation"
19          type="button"
20          variant="link"
21          @click="toggleNavigation"
22        >
23          <icon-close v-if="isNavigationOpen" />
24          <icon-menu v-if="!isNavigationOpen" />
25        </b-button>
26        <b-navbar-nav>
27          <b-nav-text>{{ $t('appHeader.bmcSystemManagement') }}</b-nav-text>
28        </b-navbar-nav>
29        <!-- Right aligned nav items -->
30        <b-navbar-nav class="ml-auto">
31          <b-nav-item>
32            {{ $t('appHeader.health') }}
33            <status-icon :status="healthStatusIcon" />
34          </b-nav-item>
35          <b-nav-item>
36            {{ $t('appHeader.power') }}
37            <status-icon :status="hostStatusIcon" />
38          </b-nav-item>
39          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
40          <li class="nav-item">
41            <b-button id="app-header-refresh" variant="link" @click="refresh">
42              {{ $t('appHeader.refresh') }}
43              <icon-renew />
44            </b-button>
45          </li>
46          <li>
47            <b-button id="app-header-logout" variant="link" @click="logout">
48              {{ $t('appHeader.logOut') }}
49              <icon-avatar />
50            </b-button>
51          </li>
52        </b-navbar-nav>
53      </b-navbar>
54    </header>
55    <loading-bar />
56  </div>
57</template>
58
59<script>
60import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
61import IconClose from '@carbon/icons-vue/es/close/20';
62import IconMenu from '@carbon/icons-vue/es/menu/20';
63import IconRenew from '@carbon/icons-vue/es/renew/20';
64import StatusIcon from '../Global/StatusIcon';
65import LoadingBar from '../Global/LoadingBar';
66
67export default {
68  name: 'AppHeader',
69  components: {
70    IconAvatar,
71    IconClose,
72    IconMenu,
73    IconRenew,
74    StatusIcon,
75    LoadingBar
76  },
77  data() {
78    return {
79      isNavigationOpen: false
80    };
81  },
82  computed: {
83    hostStatus() {
84      return this.$store.getters['global/hostStatus'];
85    },
86    healthStatus() {
87      return this.$store.getters['eventLog/healthStatus'];
88    },
89    hostStatusIcon() {
90      switch (this.hostStatus) {
91        case 'on':
92          return 'success';
93        case 'error':
94          return 'danger';
95        case 'off':
96        default:
97          return 'secondary';
98      }
99    },
100    healthStatusIcon() {
101      switch (this.healthStatus) {
102        case 'good':
103          return 'success';
104        case 'warning':
105          return 'warning';
106        case 'critical':
107          return 'danger';
108        default:
109          return 'secondary';
110      }
111    }
112  },
113  created() {
114    this.getHostInfo();
115    this.getEvents();
116  },
117  mounted() {
118    this.$root.$on(
119      'change:isNavigationOpen',
120      isNavigationOpen => (this.isNavigationOpen = isNavigationOpen)
121    );
122  },
123  methods: {
124    getHostInfo() {
125      this.$store.dispatch('global/getHostStatus');
126    },
127    getEvents() {
128      this.$store.dispatch('eventLog/getEventLogData');
129    },
130    refresh() {
131      this.$emit('refresh');
132    },
133    logout() {
134      this.$store.dispatch('authentication/logout');
135    },
136    toggleNavigation() {
137      this.$root.$emit('toggle:navigation');
138    }
139  }
140};
141</script>
142
143<style lang="scss" scoped>
144@import 'src/assets/styles/helpers';
145
146.link-skip-nav {
147  position: absolute;
148  top: -60px;
149  left: 0.5rem;
150  z-index: $zindex-popover;
151  transition: $duration--moderate-01 $exit-easing--expressive;
152  &:focus {
153    top: 0.5rem;
154    transition-timing-function: $entrance-easing--expressive;
155  }
156}
157.navbar-dark {
158  .navbar-text,
159  .nav-link,
160  .btn-link {
161    color: $white !important;
162    fill: currentColor;
163  }
164}
165
166.nav-item {
167  fill: $light;
168}
169
170.navbar {
171  padding: 0;
172  height: $header-height;
173  overflow: hidden;
174
175  .btn-link {
176    padding: $spacer / 2;
177  }
178}
179
180.navbar-nav {
181  padding: 0 $spacer;
182}
183
184.nav-trigger {
185  fill: $light;
186  width: $header-height;
187  height: $header-height;
188  transition: none;
189
190  svg {
191    margin: 0;
192  }
193
194  &:hover {
195    fill: $light;
196    background-color: $dark;
197  }
198
199  @include media-breakpoint-up($responsive-layout-bp) {
200    display: none;
201  }
202}
203</style>
204