Add system information on Appheader page

- Model type and serial number are newly added system info data on
Appheader.
- On small screens and below system information(model type, serial number and
asset tag) will be hidden.
- On large screen and below model type and serial number will be visible but
asset tag will be hidden.
- For all other screens all the system info will be visible.

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

1 files changed, 30 insertions, 9 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 26f4a683..4e806fb9 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -41,9 +41,11 @@
               :alt="altLogo"
             />
           </b-navbar-brand>
-          <div v-if="assetTag" class="asset-tag">
-            <span class="pr-2">|</span>
-            <span>{{ assetTag }}</span>
+          <div v-if="isNavTagPresent" class="pl-2 nav-tags">
+            <span>|</span>
+            <span class="pl-3 asset-tag">{{ assetTag }}</span>
+            <span class="pl-3">{{ modelType }}</span>
+            <span class="pl-3">{{ serialNumber }}</span>
           </div>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
@@ -132,9 +134,18 @@ export default {
     };
   },
   computed: {
+    isNavTagPresent() {
+      return this.assetTag || this.modelType || this.serialNumber;
+    },
     assetTag() {
       return this.$store.getters['global/assetTag'];
     },
+    modelType() {
+      return this.$store.getters['global/modelType'];
+    },
+    serialNumber() {
+      return this.$store.getters['global/serialNumber'];
+    },
     isAuthorized() {
       return this.$store.getters['global/isAuthorized'];
     },
@@ -186,7 +197,7 @@ export default {
     // Reset auth state to check if user is authenticated based
     // on available browser cookies
     this.$store.dispatch('authentication/resetStoreState');
-    this.getServerInfo();
+    this.getSystemInfo();
     this.getEvents();
   },
   mounted() {
@@ -196,8 +207,8 @@ export default {
     );
   },
   methods: {
-    getServerInfo() {
-      this.$store.dispatch('global/getServerStatus');
+    getSystemInfo() {
+      this.$store.dispatch('global/getSystemInfo');
     },
     getEvents() {
       this.$store.dispatch('eventLog/getEventLogData');
@@ -284,22 +295,32 @@ export default {
 
       .responsive-text {
         @include media-breakpoint-down(xs) {
-          display: none;
+          @include sr-only;
         }
       }
     }
   }
 
   .navbar-nav {
-    padding: 0 $spacer;
+    @include media-breakpoint-up($responsive-layout-bp) {
+      padding: 0 $spacer;
+    }
     align-items: center;
 
     .navbar-brand,
     .nav-link {
       transition: $focus-transition;
     }
-    .asset-tag {
+    .nav-tags {
       color: theme-color-level(light, 3);
+      @include media-breakpoint-down(xs) {
+        @include sr-only;
+      }
+      .asset-tag {
+        @include media-breakpoint-down($responsive-layout-bp) {
+          @include sr-only;
+        }
+      }
     }
   }