1<template>
2  <div>
3    <a class="link-skip-nav btn btn-light" href="#main-content">
4      Skip to content
5    </a>
6    <header id="page-header">
7      <b-navbar toggleable="lg" variant="dark" type="dark">
8        <!-- Left aligned nav items -->
9        <b-navbar-nav>
10          <b-nav-text>BMC System Management</b-nav-text>
11        </b-navbar-nav>
12        <!-- Right aligned nav items -->
13        <b-navbar-nav class="ml-auto">
14          <b-nav>
15            <b-nav-item>
16              Health
17              <status-icon :status="'danger'" />
18            </b-nav-item>
19            <b-nav-item>
20              Power
21              <status-icon :status="hostStatusIcon" />
22            </b-nav-item>
23            <b-nav-item>
24              Refresh
25              <icon-renew />
26            </b-nav-item>
27            <b-nav-item @click="logout">
28              Logout
29              <icon-avatar />
30            </b-nav-item>
31          </b-nav>
32        </b-navbar-nav>
33      </b-navbar>
34    </header>
35  </div>
36</template>
37
38<script>
39import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
40import IconRenew from '@carbon/icons-vue/es/renew/20';
41import StatusIcon from '../Global/StatusIcon';
42export default {
43  name: 'AppHeader',
44  components: { IconAvatar, IconRenew, StatusIcon },
45  created() {
46    this.getHostInfo();
47  },
48  computed: {
49    hostStatus() {
50      return this.$store.getters['global/hostStatus'];
51    },
52    hostStatusIcon() {
53      switch (this.hostStatus) {
54        case 'on':
55          return 'success';
56        case 'error':
57          return 'danger';
58        case 'off':
59        default:
60          return 'secondary';
61      }
62    }
63  },
64  methods: {
65    getHostInfo() {
66      this.$store.dispatch('global/getHostStatus');
67    },
68    logout() {
69      this.$store.dispatch('authentication/logout').then(() => {
70        this.$router.push('/login');
71      });
72    }
73  }
74};
75</script>
76
77<style lang="scss" scoped>
78.link-skip-nav {
79  position: absolute;
80  top: -60px;
81  left: 0.5rem;
82  z-index: 10;
83  transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
84  &:focus {
85    top: 0.5rem;
86    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
87  }
88}
89.nav-item {
90  svg {
91    fill: $light;
92  }
93}
94</style>
95