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="Server information">
10          <b-row>
11            <b-col sm="6">
12              <dl>
13                <dt>Model</dt>
14                <dd>{{ serverModel }}</dd>
15              </dl>
16            </b-col>
17            <b-col sm="6">
18              <dl>
19                <dt>Manufacturer</dt>
20                <dd>{{ serverManufacturer }}</dd>
21              </dl>
22            </b-col>
23            <b-col sm="6">
24              <dl>
25                <dt>Serial number</dt>
26                <dd>{{ serverSerialNumber }}</dd>
27              </dl>
28            </b-col>
29            <b-col sm="6">
30              <dl>
31                <dt>Firmware version</dt>
32                <dd>{{ hostActiveVersion }}</dd>
33              </dl>
34            </b-col>
35          </b-row>
36        </page-section>
37        <page-section section-title="BMC information">
38          <b-row>
39            <b-col sm="6">
40              <dl>
41                <dt>Hostname</dt>
42                <dd>{{ hostName }}</dd>
43              </dl>
44            </b-col>
45            <b-col sm="6">
46              <dl>
47                <dt>MAC address</dt>
48                <dd>{{ macAddress }}</dd>
49              </dl>
50            </b-col>
51            <b-col sm="6">
52              <dl>
53                <dt>IP address</dt>
54                <dd v-for="ip in ipAddress" :key="ip.id">{{ ip }}</dd>
55              </dl>
56            </b-col>
57            <b-col sm="6">
58              <dl>
59                <dt>Firmware version</dt>
60                <dd>{{ bmcActiveVersion }}</dd>
61              </dl>
62            </b-col>
63          </b-row>
64        </page-section>
65        <page-section section-title="Power consumption">
66          <b-row>
67            <b-col sm="6">
68              <dl>
69                <dt>Power consumption</dt>
70                <dd>{{ powerConsumption }}</dd>
71              </dl>
72            </b-col>
73            <b-col sm="6">
74              <dl>
75                <dt>Power cap</dt>
76                <dd>{{ powerCapValue }}</dd>
77              </dl>
78            </b-col>
79          </b-row>
80        </page-section>
81      </b-col>
82    </b-row>
83    <page-section section-title="High priority events">
84      <overview-events />
85    </page-section>
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  computed: mapState({
104    serverModel: state => state.overview.serverModel,
105    serverManufacturer: state => state.overview.serverManufacturer,
106    serverSerialNumber: state => state.overview.serverSerialNumber,
107    hostName: state => state.global.hostName,
108    hostActiveVersion: state => state.firmware.hostActiveVersion,
109    bmcActiveVersion: state => state.firmware.bmcActiveVersion,
110    powerConsumption: state => state.powerConsumption.powerConsumption,
111    powerCapValue: state => state.powerCap.powerCapValue,
112    ipAddress: state => state.networkSettings.ipAddress,
113    macAddress: state => state.networkSettings.macAddress
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/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
131<style lang="scss" scoped>
132.quicklinks-section {
133  margin-bottom: $spacer * 2;
134  margin-left: -1rem;
135}
136</style>
137