diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 89 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 38 |
2 files changed, 75 insertions, 52 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 7974f70a..244eeb32 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -1,49 +1,32 @@ <template> <div> - <a class="link-skip-nav btn btn-light" href="#main-content" - >Skip to content</a - > + <a class="link-skip-nav btn btn-light" href="#main-content"> + Skip to content + </a> <header id="page-header"> <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 @click="logout"> - <user-avatar-20 /> - Logout - </b-nav-item> - </b-navbar-nav> - </b-navbar> - <b-navbar toggleable="lg" variant="light"> + <!-- Left aligned nav items --> <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-nav-text>BMC System Management</b-nav-text> </b-navbar-nav> + <!-- Right aligned nav items --> <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> + Health + <status-icon :status="'danger'" /> </b-nav-item> <b-nav-item> - <b-button variant="link"> - Server power - <b-badge pill variant="success">Running</b-badge> - </b-button> + Power + <status-icon :status="hostStatusIcon" /> </b-nav-item> <b-nav-item> - <b-button variant="link"> - <Renew20 /> - Refresh Data - </b-button> + Refresh + <icon-renew /> + </b-nav-item> + <b-nav-item @click="logout"> + Logout + <icon-avatar /> </b-nav-item> </b-nav> </b-navbar-nav> @@ -53,32 +36,34 @@ </template> <script> -import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20"; -import Renew20 from "@carbon/icons-vue/es/renew/20"; +import IconAvatar from "@carbon/icons-vue/es/user--avatar/20"; +import IconRenew from "@carbon/icons-vue/es/renew/20"; +import StatusIcon from "../Global/StatusIcon"; export default { name: "AppHeader", - components: { Renew20, UserAvatar20 }, + components: { IconAvatar, IconRenew, StatusIcon }, 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"]; + }, + hostStatusIcon() { + switch (this.hostStatus) { + case "on": + return "success"; + case "error": + return "danger"; + case "off": + default: + return "secondary"; + } } }, methods: { getHostInfo() { - this.$store.dispatch("global/getHostName"); + this.$store.dispatch("global/getHostStatus"); }, logout() { this.$store.dispatch("authentication/logout").then(() => { @@ -90,20 +75,20 @@ export default { </script> <style lang="scss" scoped> -.navbar-text { - padding: 0; -} - .link-skip-nav { position: absolute; top: -60px; left: 0.5rem; z-index: 10; transition: 150ms cubic-bezier(0.4, 0.14, 1, 1); - &:focus { top: 0.5rem; transition-timing-function: cubic-bezier(0, 0, 0.3, 1); } } +.nav-item { + svg { + fill: $light; + } +} </style> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue new file mode 100644 index 00000000..bb208409 --- /dev/null +++ b/src/components/Global/StatusIcon.vue @@ -0,0 +1,38 @@ +<template> + <span :class="['status-icon', status]"> + <icon-success v-if="status === 'success'" /> + <icon-danger v-else-if="status === 'danger'" /> + <icon-secondary v-else /> + </span> +</template> + +<script> +import IconCheckmark from "@carbon/icons-vue/es/checkmark--filled/20"; +import IconWarning from "@carbon/icons-vue/es/warning--filled/20"; +import IconError from "@carbon/icons-vue/es/error--filled/20"; + +export default { + name: "StatusIcon", + props: ["status"], + components: { + iconSuccess: IconCheckmark, + iconDanger: IconWarning, + iconSecondary: IconError + } +}; +</script> + +<style lang="scss" scoped> +.status-icon { + vertical-align: text-bottom; + &.success { + fill: $success; + } + &.danger { + fill: $danger; + } + &.secondary { + fill: $secondary; + } +} +</style> |