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;
+ }
+ }
}
}
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index fdfdc93..95d7a08 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -31,6 +31,8 @@
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 @@
},
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 @@
},
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 @@
})
.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
diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index 9135c00..93ad1f4 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -65,8 +65,8 @@
});
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);
});