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 <[email protected]>
Change-Id: Ia844a26f658083cbd5fa9c8f3f6bea8b65ddcd11

Author: Sukanya Pandey

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;
+        }
+      }
     }
   }
 

src/store/modules/GlobalStore.js

@@ -31,6 +31,8 @@ const GlobalStore = {
   state: {
     assetTag: null,
     bmcTime: null,
+    modelType: null,
+    serialNumber: null,
     serverStatus: 'unreachable',
     languagePreference: localStorage.getItem('storedLanguage') || 'en-US',
     isUtcDisplay: localStorage.getItem('storedUtcDisplay')
@@ -41,6 +43,8 @@ const GlobalStore = {
   },
   getters: {
     assetTag: (state) => state.assetTag,
+    modelType: (state) => state.modelType,
+    serialNumber: (state) => state.serialNumber,
     serverStatus: (state) => state.serverStatus,
     bmcTime: (state) => state.bmcTime,
     languagePreference: (state) => state.languagePreference,
@@ -50,6 +54,9 @@ const GlobalStore = {
   },
   mutations: {
     setAssetTag: (state, assetTag) => (state.assetTag = assetTag),
+    setModelType: (state, modelType) => (state.modelType = modelType),
+    setSerialNumber: (state, serialNumber) =>
+      (state.serialNumber = serialNumber),
     setBmcTime: (state, bmcTime) => (state.bmcTime = bmcTime),
     setServerStatus: (state, serverState) =>
       (state.serverStatus = serverStateMapper(serverState)),
@@ -75,12 +82,22 @@ const GlobalStore = {
         })
         .catch((error) => console.log(error));
     },
-    getServerStatus({ commit }) {
+    getSystemInfo({ commit }) {
       api
         .get('/redfish/v1/Systems/system')
         .then(
-          ({ data: { AssetTag, PowerState, Status: { State } = {} } } = {}) => {
+          ({
+            data: {
+              AssetTag,
+              Model,
+              PowerState,
+              SerialNumber,
+              Status: { State } = {},
+            },
+          } = {}) => {
             commit('setAssetTag', AssetTag);
+            commit('setSerialNumber', SerialNumber);
+            commit('setModelType', Model);
             if (State === 'Quiesced' || State === 'InTest') {
               // OpenBMC's host state interface is mapped to 2 Redfish
               // properties "Status""State" and "PowerState". Look first

tests/unit/AppHeader.spec.js

@@ -65,8 +65,8 @@ describe('AppHeader.vue', () => {
   });
 
   describe('Created lifecycle hook', () => {
-    it('getServerInfo should dispatch global/getServerStatus', () => {
-      wrapper.vm.getServerInfo();
+    it('getSystemInfo should dispatch global/getSystemInfo', () => {
+      wrapper.vm.getSystemInfo();
       expect(store.dispatch).toHaveBeenCalledTimes(1);
     });