Show asset name in the app header
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c
diff --git a/src/App.vue b/src/App.vue
index f6991c4..fc04b70 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 68de7d9..5b36cf8 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 @@
};
},
computed: {
+ assetTag() {
+ return this.$store.getters['global/assetTag'];
+ },
isAuthorized() {
return this.$store.getters['global/isAuthorized'];
},
@@ -280,6 +291,9 @@
.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 218feb6..6e9bd96 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -29,6 +29,7 @@
const GlobalStore = {
namespaced: true,
state: {
+ assetTag: null,
bmcTime: null,
hostStatus: 'unreachable',
languagePreference: localStorage.getItem('storedLanguage') || 'en-US',
@@ -39,6 +40,7 @@
isAuthorized: true,
},
getters: {
+ assetTag: (state) => state.assetTag,
hostStatus: (state) => state.hostStatus,
bmcTime: (state) => state.bmcTime,
languagePreference: (state) => state.languagePreference,
@@ -47,6 +49,7 @@
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 @@
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));
},
},