1<template> 2 <b-container fluid> 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'; 95 96export default { 97 name: 'Overview', 98 components: { 99 OverviewQuickLinks, 100 OverviewEvents, 101 OverviewNetwork, 102 PageTitle, 103 PageSection 104 }, 105 computed: mapState({ 106 serverModel: state => state.overview.serverModel, 107 serverManufacturer: state => state.overview.serverManufacturer, 108 serverSerialNumber: state => state.overview.serverSerialNumber, 109 hostName: state => state.global.hostName, 110 hostFirmwareVersion: state => state.firmware.hostFirmwareVersion, 111 bmcFirmwareVersion: state => state.firmware.bmcFirmwareVersion, 112 powerCapValue: state => state.powerControl.powerCapValue, 113 powerConsumptionValue: state => state.powerControl.powerConsumptionValue 114 }), 115 created() { 116 this.getOverviewInfo(); 117 }, 118 methods: { 119 getOverviewInfo() { 120 this.$store.dispatch('overview/getServerInfo'); 121 this.$store.dispatch('global/getHostName'); 122 this.$store.dispatch('firmware/getBmcFirmware'); 123 this.$store.dispatch('firmware/getHostFirmware'); 124 this.$store.dispatch('powerControl/getPowerControl'); 125 } 126 } 127}; 128</script> 129 130<style lang="scss" scoped> 131.quicklinks-section { 132 margin-bottom: $spacer * 2; 133 margin-left: $spacer * -1; 134} 135 136dd { 137 white-space: nowrap; 138 overflow: hidden; 139 text-overflow: ellipsis; 140} 141</style> 142