1<template> 2 <b-container fluid> 3 <PageTitle /> 4 <b-row> 5 <b-col lg="8" sm="12"> 6 <PageSection sectionTitle="Server information"> 7 <b-row> 8 <b-col sm="6"> 9 <dl> 10 <dt>Model</dt> 11 <dd>{{ serverModel }}</dd> 12 </dl> 13 </b-col> 14 <b-col sm="6"> 15 <dl> 16 <dt>Manufacturer</dt> 17 <dd>{{ serverManufacturer }}</dd> 18 </dl> 19 </b-col> 20 <b-col sm="6"> 21 <dl> 22 <dt>Serial number</dt> 23 <dd>{{ serverSerialNumber }}</dd> 24 </dl> 25 </b-col> 26 <b-col sm="6"> 27 <dl> 28 <dt>Firmware version</dt> 29 <dd>{{ hostActiveVersion }}</dd> 30 </dl> 31 </b-col> 32 </b-row> 33 </PageSection> 34 <PageSection sectionTitle="BMC information"> 35 <b-row> 36 <b-col sm="6"> 37 <dl> 38 <dt>Hostname</dt> 39 <dd>{{ hostName }}</dd> 40 </dl> 41 </b-col> 42 <b-col sm="6"> 43 <dl> 44 <dt>MAC address</dt> 45 <dd>{{ macAddress }}</dd> 46 </dl> 47 </b-col> 48 <b-col sm="6"> 49 <dl> 50 <dt>IP address</dt> 51 <dd v-for="ip in ipAddress" v-bind:key="ip.id">{{ ip }}</dd> 52 </dl> 53 </b-col> 54 <b-col sm="6"> 55 <dl> 56 <dt>Firmware version</dt> 57 <dd>{{ bmcActiveVersion }}</dd> 58 </dl> 59 </b-col> 60 </b-row> 61 </PageSection> 62 <PageSection sectionTitle="Power consumption"> 63 <b-row> 64 <b-col sm="6"> 65 <dl> 66 <dt>Power consumption</dt> 67 <dd>{{ powerConsumption }}</dd> 68 </dl> 69 </b-col> 70 <b-col sm="6"> 71 <dl> 72 <dt>Power cap</dt> 73 <dd>{{ powerCapValue }}</dd> 74 </dl> 75 </b-col> 76 </b-row> 77 </PageSection> 78 </b-col> 79 <b-col lg="4" sm="12"> 80 <OverviewQuickLinks /> 81 </b-col> 82 </b-row> 83 <PageSection sectionTitle="High priority events"> 84 <OverviewEvents /> 85 </PageSection> 86 </b-container> 87</template> 88 89<script> 90import OverviewQuickLinks from './OverviewQuickLinks'; 91import OverviewEvents from './OverviewEvents'; 92import PageTitle from '../../components/Global/PageTitle'; 93import PageSection from '../../components/Global/PageSection'; 94import { mapState } from 'vuex'; 95export default { 96 name: 'Overview', 97 components: { 98 OverviewQuickLinks, 99 OverviewEvents, 100 PageTitle, 101 PageSection 102 }, 103 created() { 104 this.getOverviewInfo(); 105 }, 106 computed: mapState({ 107 serverModel: state => state.overview.serverModel, 108 serverManufacturer: state => state.overview.serverManufacturer, 109 serverSerialNumber: state => state.overview.serverSerialNumber, 110 hostName: state => state.global.hostName, 111 hostActiveVersion: state => state.firmware.hostActiveVersion, 112 bmcActiveVersion: state => state.firmware.bmcActiveVersion, 113 powerConsumption: state => state.powerConsumption.powerConsumption, 114 powerCapValue: state => state.powerCap.powerCapValue, 115 ipAddress: state => state.networkSettings.ipAddress, 116 macAddress: state => state.networkSettings.macAddress 117 }), 118 methods: { 119 getOverviewInfo() { 120 this.$store.dispatch('overview/getServerInfo'); 121 this.$store.dispatch('global/getHostName'); 122 this.$store.dispatch('firmware/getFirmwareInfo'); 123 this.$store.dispatch('powerConsumption/getPowerData'); 124 this.$store.dispatch('powerCap/getPowerCapData'); 125 this.$store.dispatch('networkSettings/getNetworkData'); 126 } 127 } 128}; 129</script> 130