diff options
| -rw-r--r-- | src/components/AppHeader/AppHeader.vue | 39 | ||||
| -rw-r--r-- | src/store/modules/GlobalStore.js | 21 | ||||
| -rw-r--r-- | tests/unit/AppHeader.spec.js | 4 |
3 files changed, 51 insertions, 13 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; + } + } } } diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js index fdfdc93f..95d7a083 100644 --- a/src/store/modules/GlobalStore.js +++ b/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 diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js index 9135c007..93ad1f46 100644 --- a/tests/unit/AppHeader.spec.js +++ b/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); }); |