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