1<template> 2 <div class="quicklinks"> 3 <div> 4 <dl> 5 <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt> 6 <dd v-if="bmcTime"> 7 {{ bmcTime | formatDate }} {{ bmcTime | formatTime }} 8 </dd> 9 <dd v-else>--</dd> 10 </dl> 11 </div> 12 <div> 13 <!-- TODO: add toggle LED on/off funtionality --> 14 <dl> 15 <dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt> 16 <dd> 17 <b-form-checkbox 18 v-model="serverLedChecked" 19 name="check-button" 20 switch 21 > 22 <span v-if="serverLedChecked">{{ $t('global.status.on') }}</span> 23 <span v-else>{{ $t('global.status.off') }}</span> 24 </b-form-checkbox> 25 </dd> 26 </dl> 27 </div> 28 <div> 29 <!-- TODO: link to network settings --> 30 <b-button 31 href="#" 32 variant="secondary" 33 class="d-flex justify-content-between align-items-center" 34 > 35 <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span> 36 <icon-arrow-right /> 37 </b-button> 38 </div> 39 <div> 40 <!-- TODO: link to SOL --> 41 <b-button 42 href="#" 43 variant="secondary" 44 class="d-flex justify-content-between align-items-center" 45 > 46 <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span> 47 <icon-arrow-right /> 48 </b-button> 49 </div> 50 </div> 51</template> 52 53<script> 54import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16'; 55 56export default { 57 name: 'QuickLinks', 58 components: { 59 IconArrowRight: ArrowRight16 60 }, 61 data() { 62 return { 63 serverLedChecked: false 64 }; 65 }, 66 computed: { 67 bmcTime() { 68 return this.$store.getters['global/bmcTime']; 69 } 70 }, 71 created() { 72 this.$store.dispatch('global/getBmcTime').finally(() => { 73 this.$root.$emit('overview::quicklinks::complete'); 74 }); 75 } 76}; 77</script> 78 79<style lang="scss" scoped> 80@import 'src/assets/styles/helpers'; 81 82dd, 83dl { 84 margin: 0; 85} 86 87.quicklinks { 88 background: $container-bgd; 89 display: grid; 90 grid-gap: 1rem; 91 padding: 1rem; 92 white-space: nowrap; 93 align-items: center; 94} 95 96@include media-breakpoint-up(sm) { 97 .quicklinks { 98 grid-template-columns: repeat(2, 1fr); 99 } 100} 101 102@include media-breakpoint-up(xl) { 103 .quicklinks { 104 grid-template-columns: repeat(4, 1fr); 105 } 106} 107</style> 108