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

3 files changed, 99 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>
diff --git a/src/store/index.js b/src/store/index.js
index 3b86bfe2..af06a471 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import Vuex from "vuex";
 
 import LocalUserManagementStore from "./modules/AccessControl/LocalUserMangementStore";
+import GlobalStore from "./modules/GlobalStore";
 
 Vue.use(Vuex);
 
@@ -10,6 +11,7 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
+    global: GlobalStore,
     localUsers: LocalUserManagementStore
   }
 });
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
new file mode 100644
index 00000000..332c8017
--- /dev/null
+++ b/src/store/modules/GlobalStore.js
@@ -0,0 +1,35 @@
+import api from "../api";
+
+const GlobalStore = {
+  namespaced: true,
+  state: {
+    hostName: "--",
+    hostStatus: null
+  },
+  getters: {
+    hostName(state) {
+      return state.hostName;
+    },
+    hostStatus(state) {
+      return state.hostStatus;
+    }
+  },
+  mutations: {
+    setHostName(state, hostName) {
+      state.hostName = hostName;
+    }
+  },
+  actions: {
+    getHostName({ commit }) {
+      api
+        .get("/xyz/openbmc_project/network/config/attr/HostName")
+        .then(response => {
+          const hostName = response.data.data;
+          commit("setHostName", hostName);
+        })
+        .catch(error => console.log(error));
+    }
+  }
+};
+
+export default GlobalStore;