diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-12-04 01:47:32 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-23 01:32:22 +0300 |
commit | b8b6f7914f9371fc386fd5b4ea2e4b7a89892730 (patch) | |
tree | b65092ebc2155ff62929a78bb7070cfea528c3c0 /src/components | |
parent | 013964e3da0fd260cff551e4281a202602ea518a (diff) | |
download | webui-vue-b8b6f7914f9371fc386fd5b4ea2e4b7a89892730.tar.xz |
Add GlobalStore module
Create a GlobalStore to store global variables,
including data in app header.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id498dec3925feec9a7e31ede91328f89ae591a0b
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 79 |
1 files changed, 62 insertions, 17 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index b28927ee..9177403c 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -2,24 +2,49 @@ <div> <a href="#main-content">Skip to main content</a> <header> - <b-navbar toggleable="lg" type="dark" variant="primary"> - <div> - <router-link to="/">{{ orgName }} System Management</router-link> - </div> - <div> - <span>{{ serverName }}</span> - <span>{{ ipAddress }}</span> - </div> - <div> - <b-button variant="link"> - <Renew20 /> - Refresh Data - </b-button> - <b-button variant="link"> + <b-navbar toggleable="lg" variant="dark" type="dark"> + <b-navbar-nav small> + <b-nav-text>BMC System Management</b-nav-text> + </b-navbar-nav> + <b-navbar-nav small class="ml-auto"> + <b-nav-item> <user-avatar-20 /> User Avatar - </b-button> - </div> + </b-nav-item> + </b-navbar-nav> + </b-navbar> + <b-navbar toggleable="lg" variant="light"> + <b-navbar-nav> + <b-navbar-brand href="/"> + {{ orgName }} + </b-navbar-brand> + </b-navbar-nav> + <b-navbar-nav> + <b-nav-text>{{ hostName }}</b-nav-text> + <b-nav-text>{{ ipAddress }}</b-nav-text> + </b-navbar-nav> + <b-navbar-nav class="ml-auto"> + <b-nav> + <b-nav-item> + <b-button variant="link"> + Server health + <b-badge pill variant="danger">Critical</b-badge> + </b-button> + </b-nav-item> + <b-nav-item> + <b-button variant="link"> + Server power + <b-badge pill variant="success">Running</b-badge> + </b-button> + </b-nav-item> + <b-nav-item> + <b-button variant="link"> + <Renew20 /> + Refresh Data + </b-button> + </b-nav-item> + </b-nav> + </b-navbar-nav> </b-navbar> </header> </div> @@ -31,14 +56,34 @@ import Renew20 from "@carbon/icons-vue/es/renew/20"; export default { name: "AppHeader", components: { Renew20, UserAvatar20 }, + created() { + this.getHostInfo(); + }, data() { return { orgName: "OpenBMC", serverName: "Server Name", ipAddress: "127.0.0.0" }; + }, + computed: { + hostName() { + return this.$store.getters["global/hostName"]; + }, + hostStatus() { + return this.$store.getters["global/hostStatus"]; + } + }, + methods: { + getHostInfo() { + this.$store.dispatch("global/getHostName"); + } } }; </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.navbar-text { + padding: 0; +} +</style> |