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
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 26f4a68..4e806fb 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 @@
};
},
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 @@
// 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 @@
);
},
methods: {
- getServerInfo() {
- this.$store.dispatch('global/getServerStatus');
+ getSystemInfo() {
+ this.$store.dispatch('global/getSystemInfo');
},
getEvents() {
this.$store.dispatch('eventLog/getEventLogData');
@@ -284,22 +295,32 @@
.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;
+ }
+ }
}
}