Add host status plugin

- Create WebSocket and get host state changes from server
- Changed webpack devServer to https to allow for
  secure WebSocket creation (wss)
- Updates to AppHeader to visually indicate changes
  in host state
- Cleaned up api.js file
- Check if user is logged in when creating WebSocket
- Adds check if user is already authenticated so WebSocket
  is created when browser refreshed.
- Add appliation header styles
- Add sass loader config changes to allow sass variables to
  be used in single file components

URL must use https protocol when running locally or the page
will not load.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I35e89bdc09e1aa35a6215ef952409a8ed16dd9e1

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>