Show asset name in the app header

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c

3 files changed, 43 insertions, 10 deletions

diff --git a/src/App.vue b/src/App.vue
index f6991c46..fc04b70b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,9 +7,22 @@
 <script>
 export default {
   name: 'App',
+  computed: {
+    assetTag() {
+      return this.$store.getters['global/assetTag'];
+    },
+  },
   watch: {
+    assetTag: function (tag) {
+      if (tag) {
+        document.title = `${tag} - ${this.$route.meta.title}`;
+      }
+    },
     $route: function (to) {
       document.title = to.meta.title || 'Page is missing title';
+      if (this.assetTag) {
+        document.title = `${this.assetTag} - ${to.meta.title}`;
+      }
     },
   },
   created() {
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 68de7d90..5b36cf85 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -26,13 +26,21 @@
           />
         </b-button>
         <b-navbar-nav>
-          <b-navbar-brand to="/" data-test-id="appHeader-container-overview">
+          <b-navbar-brand
+            class="mr-0"
+            to="/"
+            data-test-id="appHeader-container-overview"
+          >
             <img
               class="header-logo"
               src="@/assets/images/logo-header.svg"
               :alt="altLogo"
             />
           </b-navbar-brand>
+          <div v-if="assetTag" class="asset-tag">
+            <span class="pr-2">|</span>
+            <span>{{ assetTag }}</span>
+          </div>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
@@ -120,6 +128,9 @@ export default {
     };
   },
   computed: {
+    assetTag() {
+      return this.$store.getters['global/assetTag'];
+    },
     isAuthorized() {
       return this.$store.getters['global/isAuthorized'];
     },
@@ -280,6 +291,9 @@ export default {
     .nav-link {
       transition: $focus-transition;
     }
+    .asset-tag {
+      color: theme-color-level(light, 3);
+    }
   }
 
   .nav-trigger {
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 218feb67..6e9bd962 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -29,6 +29,7 @@ const hostStateMapper = (hostState) => {
 const GlobalStore = {
   namespaced: true,
   state: {
+    assetTag: null,
     bmcTime: null,
     hostStatus: 'unreachable',
     languagePreference: localStorage.getItem('storedLanguage') || 'en-US',
@@ -39,6 +40,7 @@ const GlobalStore = {
     isAuthorized: true,
   },
   getters: {
+    assetTag: (state) => state.assetTag,
     hostStatus: (state) => state.hostStatus,
     bmcTime: (state) => state.bmcTime,
     languagePreference: (state) => state.languagePreference,
@@ -47,6 +49,7 @@ const GlobalStore = {
     isAuthorized: (state) => state.isAuthorized,
   },
   mutations: {
+    setAssetTag: (state, assetTag) => (state.assetTag = assetTag),
     setBmcTime: (state, bmcTime) => (state.bmcTime = bmcTime),
     setHostStatus: (state, hostState) =>
       (state.hostStatus = hostStateMapper(hostState)),
@@ -75,16 +78,19 @@ const GlobalStore = {
     getHostStatus({ commit }) {
       api
         .get('/redfish/v1/Systems/system')
-        .then(({ data: { PowerState, Status: { State } = {} } } = {}) => {
-          if (State === 'Quiesced' || State === 'InTest') {
-            // OpenBMC's host state interface is mapped to 2 Redfish
-            // properties "Status""State" and "PowerState". Look first
-            // at State for certain cases.
-            commit('setHostStatus', State);
-          } else {
-            commit('setHostStatus', PowerState);
+        .then(
+          ({ data: { AssetTag, PowerState, Status: { State } = {} } } = {}) => {
+            commit('setAssetTag', AssetTag);
+            if (State === 'Quiesced' || State === 'InTest') {
+              // OpenBMC's host state interface is mapped to 2 Redfish
+              // properties "Status""State" and "PowerState". Look first
+              // at State for certain cases.
+              commit('setHostStatus', State);
+            } else {
+              commit('setHostStatus', PowerState);
+            }
           }
-        })
+        )
         .catch((error) => console.log(error));
     },
   },