Add GlobalStore module

Create a GlobalStore to store global variables,
including data in app header.

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

1 files changed, 62 insertions, 17 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index b28927ee..9177403c 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -2,24 +2,49 @@
   <div>
     <a href="#main-content">Skip to main content</a>
     <header>
-      <b-navbar toggleable="lg" type="dark" variant="primary">
-        <div>
-          <router-link to="/">{{ orgName }} System Management</router-link>
-        </div>
-        <div>
-          <span>{{ serverName }}</span>
-          <span>{{ ipAddress }}</span>
-        </div>
-        <div>
-          <b-button variant="link">
-            <Renew20 />
-            Refresh Data
-          </b-button>
-          <b-button variant="link">
+      <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>
             <user-avatar-20 />
             User Avatar
-          </b-button>
-        </div>
+          </b-nav-item>
+        </b-navbar-nav>
+      </b-navbar>
+      <b-navbar toggleable="lg" variant="light">
+        <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-navbar-nav>
+        <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>
+            </b-nav-item>
+            <b-nav-item>
+              <b-button variant="link">
+                Server power
+                <b-badge pill variant="success">Running</b-badge>
+              </b-button>
+            </b-nav-item>
+            <b-nav-item>
+              <b-button variant="link">
+                <Renew20 />
+                Refresh Data
+              </b-button>
+            </b-nav-item>
+          </b-nav>
+        </b-navbar-nav>
       </b-navbar>
     </header>
   </div>
@@ -31,14 +56,34 @@ import Renew20 from "@carbon/icons-vue/es/renew/20";
 export default {
   name: "AppHeader",
   components: { Renew20, UserAvatar20 },
+  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"];
+    }
+  },
+  methods: {
+    getHostInfo() {
+      this.$store.dispatch("global/getHostName");
+    }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.navbar-text {
+  padding: 0;
+}
+</style>