1<template> 2 <div> 3 <a class="link-skip-nav btn btn-light" href="#main-content"> 4 Skip to content 5 </a> 6 <header id="page-header"> 7 <b-navbar toggleable="lg" variant="dark" type="dark"> 8 <!-- Left aligned nav items --> 9 <b-navbar-nav> 10 <b-nav-text>BMC System Management</b-nav-text> 11 </b-navbar-nav> 12 <!-- Right aligned nav items --> 13 <b-navbar-nav class="ml-auto"> 14 <b-nav> 15 <b-nav-item> 16 Health 17 <status-icon :status="'danger'" /> 18 </b-nav-item> 19 <b-nav-item> 20 Power 21 <status-icon :status="hostStatusIcon" /> 22 </b-nav-item> 23 <b-nav-item> 24 Refresh 25 <icon-renew /> 26 </b-nav-item> 27 <b-nav-item @click="logout"> 28 Logout 29 <icon-avatar /> 30 </b-nav-item> 31 </b-nav> 32 </b-navbar-nav> 33 </b-navbar> 34 </header> 35 </div> 36</template> 37 38<script> 39import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; 40import IconRenew from '@carbon/icons-vue/es/renew/20'; 41import StatusIcon from '../Global/StatusIcon'; 42export default { 43 name: 'AppHeader', 44 components: { IconAvatar, IconRenew, StatusIcon }, 45 computed: { 46 hostStatus() { 47 return this.$store.getters['global/hostStatus']; 48 }, 49 hostStatusIcon() { 50 switch (this.hostStatus) { 51 case 'on': 52 return 'success'; 53 case 'error': 54 return 'danger'; 55 case 'off': 56 default: 57 return 'secondary'; 58 } 59 } 60 }, 61 created() { 62 this.getHostInfo(); 63 }, 64 methods: { 65 getHostInfo() { 66 this.$store.dispatch('global/getHostStatus'); 67 }, 68 logout() { 69 this.$store.dispatch('authentication/logout').then(() => { 70 this.$router.push('/login'); 71 }); 72 } 73 } 74}; 75</script> 76 77<style lang="scss" scoped> 78.link-skip-nav { 79 position: absolute; 80 top: -60px; 81 left: 0.5rem; 82 z-index: 10; 83 transition: 150ms cubic-bezier(0.4, 0.14, 1, 1); 84 &:focus { 85 top: 0.5rem; 86 transition-timing-function: cubic-bezier(0, 0, 0.3, 1); 87 } 88} 89.nav-item { 90 svg { 91 fill: $light; 92 } 93} 94</style> 95