1<template> 2 <b-container fluid="xl"> 3 <page-title /> 4 <div class="quicklinks-section"> 5 <overview-quick-links /> 6 </div> 7 <b-row> 8 <b-col> 9 <page-section :section-title="$t('pageOverview.bmcInformation')"> 10 <b-row> 11 <b-col> 12 <dl> 13 <dt>{{ $t('pageOverview.firmwareVersion') }}</dt> 14 <dd>{{ bmcFirmwareVersion }}</dd> 15 </dl> 16 </b-col> 17 </b-row> 18 </page-section> 19 <b-row> 20 <b-col> 21 <page-section 22 :section-title="$t('pageOverview.networkInformation')" 23 > 24 <overview-network /> 25 </page-section> 26 </b-col> 27 </b-row> 28 </b-col> 29 <b-col> 30 <page-section :section-title="$t('pageOverview.serverInformation')"> 31 <b-row> 32 <b-col sm="6"> 33 <dl> 34 <dt>{{ $t('pageOverview.model') }}</dt> 35 <dd>{{ serverModel }}</dd> 36 </dl> 37 </b-col> 38 <b-col sm="6"> 39 <dl> 40 <dt>{{ $t('pageOverview.manufacturer') }}</dt> 41 <dd>{{ serverManufacturer }}</dd> 42 </dl> 43 </b-col> 44 <b-col sm="6"> 45 <dl> 46 <dt>{{ $t('pageOverview.serialNumber') }}</dt> 47 <dd>{{ serverSerialNumber }}</dd> 48 </dl> 49 </b-col> 50 <b-col sm="6"> 51 <dl> 52 <dt>{{ $t('pageOverview.firmwareVersion') }}</dt> 53 <dd>{{ hostFirmwareVersion }}</dd> 54 </dl> 55 </b-col> 56 </b-row> 57 </page-section> 58 <page-section :section-title="$t('pageOverview.powerConsumption')"> 59 <b-row> 60 <b-col sm="6"> 61 <dl> 62 <dt>{{ $t('pageOverview.powerConsumption') }}</dt> 63 <dd v-if="powerConsumptionValue == null"> 64 {{ $t('global.status.notAvailable') }} 65 </dd> 66 <dd v-else>{{ powerConsumptionValue }} W</dd> 67 </dl> 68 </b-col> 69 <b-col sm="6"> 70 <dl> 71 <dt>{{ $t('pageOverview.powerCap') }}</dt> 72 <dd v-if="powerCapValue == null"> 73 {{ $t('global.status.disabled') }} 74 </dd> 75 <dd v-else>{{ powerCapValue }} W</dd> 76 </dl> 77 </b-col> 78 </b-row> 79 </page-section> 80 </b-col> 81 </b-row> 82 <page-section :section-title="$t('pageOverview.highPriorityEvents')"> 83 <overview-events /> 84 </page-section> 85 </b-container> 86</template> 87 88<script> 89import OverviewQuickLinks from './OverviewQuickLinks'; 90import OverviewEvents from './OverviewEvents'; 91import OverviewNetwork from './OverviewNetwork'; 92import PageTitle from '../../components/Global/PageTitle'; 93import PageSection from '../../components/Global/PageSection'; 94import { mapState } from 'vuex'; 95import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; 96 97export default { 98 name: 'Overview', 99 components: { 100 OverviewQuickLinks, 101 OverviewEvents, 102 OverviewNetwork, 103 PageTitle, 104 PageSection 105 }, 106 mixins: [LoadingBarMixin], 107 computed: mapState({ 108 server: state => state.system.systems[0], 109 bmcFirmwareVersion: state => state.firmware.bmcFirmwareVersion, 110 powerCapValue: state => state.powerControl.powerCapValue, 111 powerConsumptionValue: state => state.powerControl.powerConsumptionValue, 112 serverManufacturer() { 113 if (this.server) return this.server.manufacturer || '--'; 114 return '--'; 115 }, 116 serverModel() { 117 if (this.server) return this.server.model || '--'; 118 return '--'; 119 }, 120 serverSerialNumber() { 121 if (this.server) return this.server.serialNumber || '--'; 122 return '--'; 123 }, 124 hostFirmwareVersion() { 125 if (this.server) return this.server.firmwareVersion || '--'; 126 return '--'; 127 } 128 }), 129 created() { 130 this.startLoader(); 131 const quicklinksPromise = new Promise(resolve => { 132 this.$root.$on('overview::quicklinks::complete', () => resolve()); 133 }); 134 const networkPromise = new Promise(resolve => { 135 this.$root.$on('overview::network::complete', () => resolve()); 136 }); 137 const eventsPromise = new Promise(resolve => { 138 this.$root.$on('overview::events::complete', () => resolve()); 139 }); 140 Promise.all([ 141 this.$store.dispatch('system/getSystem'), 142 this.$store.dispatch('firmware/getBmcFirmware'), 143 this.$store.dispatch('powerControl/getPowerControl'), 144 quicklinksPromise, 145 networkPromise, 146 eventsPromise 147 ]).finally(() => this.endLoader()); 148 }, 149 beforeRouteLeave(to, from, next) { 150 this.hideLoader(); 151 next(); 152 } 153}; 154</script> 155 156<style lang="scss" scoped> 157@import 'src/assets/styles/helpers'; 158.quicklinks-section { 159 margin-bottom: $spacer * 2; 160 margin-left: $spacer * -1; 161} 162 163dd { 164 white-space: nowrap; 165 overflow: hidden; 166 text-overflow: ellipsis; 167} 168</style> 169