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="healthStatusIcon" />
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  computed: {
46    hostStatus() {
47      return this.$store.getters['global/hostStatus'];
48    },
49    healthStatus() {
50      return this.$store.getters['eventLog/healthStatus'];
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    healthStatusIcon() {
64      switch (this.healthStatus) {
65        case 'good':
66          return 'success';
67        case 'warning':
68          return 'warning';
69        case 'critical':
70          return 'danger';
71        default:
72          return 'secondary';
73      }
74    }
75  },
76  created() {
77    this.getHostInfo();
78    this.getEvents();
79  },
80  methods: {
81    getHostInfo() {
82      this.$store.dispatch('global/getHostStatus');
83    },
84    getEvents() {
85      this.$store.dispatch('eventLog/getEventLogData');
86    },
87    logout() {
88      this.$store.dispatch('authentication/logout');
89    }
90  }
91};
92</script>
93
94<style lang="scss" scoped>
95.link-skip-nav {
96  position: absolute;
97  top: -60px;
98  left: 0.5rem;
99  z-index: 10;
100  transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
101  &:focus {
102    top: 0.5rem;
103    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
104  }
105}
106.navbar-dark {
107  .navbar-text,
108  .nav-link {
109    color: $white !important;
110  }
111}
112.nav-item {
113  svg {
114    fill: $light;
115  }
116}
117</style>
118