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