1 files changed, 37 insertions, 52 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 7974f70a..244eeb32 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -1,49 +1,32 @@
 <template>
   <div>
-    <a class="link-skip-nav btn btn-light" href="#main-content"
-      >Skip to content</a
-    >
+    <a class="link-skip-nav btn btn-light" href="#main-content">
+      Skip to content
+    </a>
     <header id="page-header">
       <b-navbar toggleable="lg" variant="dark" type="dark">
-        <b-navbar-nav small>
-          <b-nav-text>BMC System Management</b-nav-text>
-        </b-navbar-nav>
-        <b-navbar-nav small class="ml-auto">
-          <b-nav-item @click="logout">
-            <user-avatar-20 />
-            Logout
-          </b-nav-item>
-        </b-navbar-nav>
-      </b-navbar>
-      <b-navbar toggleable="lg" variant="light">
+        <!-- Left aligned nav items -->
         <b-navbar-nav>
-          <b-navbar-brand href="/">
-            {{ orgName }}
-          </b-navbar-brand>
-        </b-navbar-nav>
-        <b-navbar-nav>
-          <b-nav-text>{{ hostName }}</b-nav-text>
-          <b-nav-text>{{ ipAddress }}</b-nav-text>
+          <b-nav-text>BMC System Management</b-nav-text>
         </b-navbar-nav>
+        <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
           <b-nav>
             <b-nav-item>
-              <b-button variant="link">
-                Server health
-                <b-badge pill variant="danger">Critical</b-badge>
-              </b-button>
+              Health
+              <status-icon :status="'danger'" />
             </b-nav-item>
             <b-nav-item>
-              <b-button variant="link">
-                Server power
-                <b-badge pill variant="success">Running</b-badge>
-              </b-button>
+              Power
+              <status-icon :status="hostStatusIcon" />
             </b-nav-item>
             <b-nav-item>
-              <b-button variant="link">
-                <Renew20 />
-                Refresh Data
-              </b-button>
+              Refresh
+              <icon-renew />
+            </b-nav-item>
+            <b-nav-item @click="logout">
+              Logout
+              <icon-avatar />
             </b-nav-item>
           </b-nav>
         </b-navbar-nav>
@@ -53,32 +36,34 @@
 </template>
 
 <script>
-import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
-import Renew20 from "@carbon/icons-vue/es/renew/20";
+import IconAvatar from "@carbon/icons-vue/es/user--avatar/20";
+import IconRenew from "@carbon/icons-vue/es/renew/20";
+import StatusIcon from "../Global/StatusIcon";
 export default {
   name: "AppHeader",
-  components: { Renew20, UserAvatar20 },
+  components: { IconAvatar, IconRenew, StatusIcon },
   created() {
     this.getHostInfo();
   },
-  data() {
-    return {
-      orgName: "OpenBMC",
-      serverName: "Server Name",
-      ipAddress: "127.0.0.0"
-    };
-  },
   computed: {
-    hostName() {
-      return this.$store.getters["global/hostName"];
-    },
     hostStatus() {
       return this.$store.getters["global/hostStatus"];
+    },
+    hostStatusIcon() {
+      switch (this.hostStatus) {
+        case "on":
+          return "success";
+        case "error":
+          return "danger";
+        case "off":
+        default:
+          return "secondary";
+      }
     }
   },
   methods: {
     getHostInfo() {
-      this.$store.dispatch("global/getHostName");
+      this.$store.dispatch("global/getHostStatus");
     },
     logout() {
       this.$store.dispatch("authentication/logout").then(() => {
@@ -90,20 +75,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.navbar-text {
-  padding: 0;
-}
-
 .link-skip-nav {
   position: absolute;
   top: -60px;
   left: 0.5rem;
   z-index: 10;
   transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
-
   &:focus {
     top: 0.5rem;
     transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
   }
 }
+.nav-item {
+  svg {
+    fill: $light;
+  }
+}
 </style>