diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-12-09 13:44:19 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-12-16 02:16:56 +0300 |
commit | c5c2ae99f6e9b91526ea5896b3029ab8a7480c6f (patch) | |
tree | 5992782ede6c5f457f15a7037c5f71902588845a /src | |
parent | f6df801b384118b946bb3b7b3248832ec70cfd0a (diff) | |
download | webui-vue-c5c2ae99f6e9b91526ea5896b3029ab8a7480c6f.tar.xz |
Show asset name in the app header
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 13 | ||||
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 16 | ||||
-rw-r--r-- | src/store/modules/GlobalStore.js | 24 |
3 files changed, 43 insertions, 10 deletions
diff --git a/src/App.vue b/src/App.vue index f6991c46..fc04b70b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,9 +7,22 @@ <script> export default { name: 'App', + computed: { + assetTag() { + return this.$store.getters['global/assetTag']; + }, + }, watch: { + assetTag: function (tag) { + if (tag) { + document.title = `${tag} - ${this.$route.meta.title}`; + } + }, $route: function (to) { document.title = to.meta.title || 'Page is missing title'; + if (this.assetTag) { + document.title = `${this.assetTag} - ${to.meta.title}`; + } }, }, created() { diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 68de7d90..5b36cf85 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -26,13 +26,21 @@ /> </b-button> <b-navbar-nav> - <b-navbar-brand to="/" data-test-id="appHeader-container-overview"> + <b-navbar-brand + class="mr-0" + to="/" + data-test-id="appHeader-container-overview" + > <img class="header-logo" src="@/assets/images/logo-header.svg" :alt="altLogo" /> </b-navbar-brand> + <div v-if="assetTag" class="asset-tag"> + <span class="pr-2">|</span> + <span>{{ assetTag }}</span> + </div> </b-navbar-nav> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto helper-menu"> @@ -120,6 +128,9 @@ export default { }; }, computed: { + assetTag() { + return this.$store.getters['global/assetTag']; + }, isAuthorized() { return this.$store.getters['global/isAuthorized']; }, @@ -280,6 +291,9 @@ export default { .nav-link { transition: $focus-transition; } + .asset-tag { + color: theme-color-level(light, 3); + } } .nav-trigger { diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js index 218feb67..6e9bd962 100644 --- a/src/store/modules/GlobalStore.js +++ b/src/store/modules/GlobalStore.js @@ -29,6 +29,7 @@ const hostStateMapper = (hostState) => { const GlobalStore = { namespaced: true, state: { + assetTag: null, bmcTime: null, hostStatus: 'unreachable', languagePreference: localStorage.getItem('storedLanguage') || 'en-US', @@ -39,6 +40,7 @@ const GlobalStore = { isAuthorized: true, }, getters: { + assetTag: (state) => state.assetTag, hostStatus: (state) => state.hostStatus, bmcTime: (state) => state.bmcTime, languagePreference: (state) => state.languagePreference, @@ -47,6 +49,7 @@ const GlobalStore = { isAuthorized: (state) => state.isAuthorized, }, mutations: { + setAssetTag: (state, assetTag) => (state.assetTag = assetTag), setBmcTime: (state, bmcTime) => (state.bmcTime = bmcTime), setHostStatus: (state, hostState) => (state.hostStatus = hostStateMapper(hostState)), @@ -75,16 +78,19 @@ const GlobalStore = { getHostStatus({ commit }) { api .get('/redfish/v1/Systems/system') - .then(({ data: { PowerState, Status: { State } = {} } } = {}) => { - if (State === 'Quiesced' || State === 'InTest') { - // OpenBMC's host state interface is mapped to 2 Redfish - // properties "Status""State" and "PowerState". Look first - // at State for certain cases. - commit('setHostStatus', State); - } else { - commit('setHostStatus', PowerState); + .then( + ({ data: { AssetTag, PowerState, Status: { State } = {} } } = {}) => { + commit('setAssetTag', AssetTag); + if (State === 'Quiesced' || State === 'InTest') { + // OpenBMC's host state interface is mapped to 2 Redfish + // properties "Status""State" and "PowerState". Look first + // at State for certain cases. + commit('setHostStatus', State); + } else { + commit('setHostStatus', PowerState); + } } - }) + ) .catch((error) => console.log(error)); }, }, |