1<template>
2  <div>
3    <a class="link-skip-nav btn btn-light" href="#main-content"
4      >Skip to content</a
5    >
6    <header id="page-header">
7      <b-navbar toggleable="lg" variant="dark" type="dark">
8        <b-navbar-nav small>
9          <b-nav-text>BMC System Management</b-nav-text>
10        </b-navbar-nav>
11        <b-navbar-nav small class="ml-auto">
12          <b-nav-item @click="logout">
13            <user-avatar-20 />
14            Logout
15          </b-nav-item>
16        </b-navbar-nav>
17      </b-navbar>
18      <b-navbar toggleable="lg" variant="light">
19        <b-navbar-nav>
20          <b-navbar-brand href="/">
21            {{ orgName }}
22          </b-navbar-brand>
23        </b-navbar-nav>
24        <b-navbar-nav>
25          <b-nav-text>{{ hostName }}</b-nav-text>
26          <b-nav-text>{{ ipAddress }}</b-nav-text>
27        </b-navbar-nav>
28        <b-navbar-nav class="ml-auto">
29          <b-nav>
30            <b-nav-item>
31              <b-button variant="link">
32                Server health
33                <b-badge pill variant="danger">Critical</b-badge>
34              </b-button>
35            </b-nav-item>
36            <b-nav-item>
37              <b-button variant="link">
38                Server power
39                <b-badge pill variant="success">Running</b-badge>
40              </b-button>
41            </b-nav-item>
42            <b-nav-item>
43              <b-button variant="link">
44                <Renew20 />
45                Refresh Data
46              </b-button>
47            </b-nav-item>
48          </b-nav>
49        </b-navbar-nav>
50      </b-navbar>
51    </header>
52  </div>
53</template>
54
55<script>
56import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
57import Renew20 from "@carbon/icons-vue/es/renew/20";
58export default {
59  name: "AppHeader",
60  components: { Renew20, UserAvatar20 },
61  created() {
62    this.getHostInfo();
63  },
64  data() {
65    return {
66      orgName: "OpenBMC",
67      serverName: "Server Name",
68      ipAddress: "127.0.0.0"
69    };
70  },
71  computed: {
72    hostName() {
73      return this.$store.getters["global/hostName"];
74    },
75    hostStatus() {
76      return this.$store.getters["global/hostStatus"];
77    }
78  },
79  methods: {
80    getHostInfo() {
81      this.$store.dispatch("global/getHostName");
82    },
83    logout() {
84      this.$store.dispatch("authentication/logout").then(() => {
85        this.$router.push("/login");
86      });
87    }
88  }
89};
90</script>
91
92<style lang="scss" scoped>
93.navbar-text {
94  padding: 0;
95}
96
97.link-skip-nav {
98  position: absolute;
99  top: -60px;
100  left: 0.5rem;
101  z-index: 10;
102  transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
103
104  &:focus {
105    top: 0.5rem;
106    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
107  }
108}
109</style>
110