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 lg="8" sm="12">
9        <page-section
10          :section-title="$t('overview.sectionTitle.serverInformation')"
11        >
12          <b-row>
13            <b-col sm="6">
14              <dl>
15                <dt>{{ $t('overview.model') }}</dt>
16                <dd>{{ serverModel }}</dd>
17              </dl>
18            </b-col>
19            <b-col sm="6">
20              <dl>
21                <dt>{{ $t('overview.manufacturer') }}</dt>
22                <dd>{{ serverManufacturer }}</dd>
23              </dl>
24            </b-col>
25            <b-col sm="6">
26              <dl>
27                <dt>{{ $t('overview.serialNumber') }}</dt>
28                <dd>{{ serverSerialNumber }}</dd>
29              </dl>
30            </b-col>
31            <b-col sm="6">
32              <dl>
33                <dt>{{ $t('overview.firmwareVersion') }}</dt>
34                <dd>{{ hostActiveVersion }}</dd>
35              </dl>
36            </b-col>
37          </b-row>
38        </page-section>
39        <page-section
40          :section-title="$t('overview.sectionTitle.bmcInformation')"
41        >
42          <b-row>
43            <b-col sm="6">
44              <dl>
45                <dt>{{ $t('overview.hostname') }}</dt>
46                <dd>{{ hostName }}</dd>
47              </dl>
48            </b-col>
49            <b-col sm="6">
50              <dl>
51                <dt>{{ $t('overview.macAddress') }}</dt>
52                <dd>{{ macAddress }}</dd>
53              </dl>
54            </b-col>
55            <b-col sm="6">
56              <dl>
57                <dt>{{ $t('overview.ipAddress') }}</dt>
58                <dd v-for="ip in ipAddress" :key="ip.id">{{ ip }}</dd>
59              </dl>
60            </b-col>
61            <b-col sm="6">
62              <dl>
63                <dt>{{ $t('overview.firmwareVersion') }}</dt>
64                <dd>{{ bmcActiveVersion }}</dd>
65              </dl>
66            </b-col>
67          </b-row>
68        </page-section>
69        <page-section
70          :section-title="$t('overview.sectionTitle.powerConsumption')"
71        >
72          <b-row>
73            <b-col sm="6">
74              <dl>
75                <dt>{{ $t('overview.powerConsumption') }}</dt>
76                <dd v-if="!powerConsumption">
77                  {{ $t('overview.state.notAvailable') }}
78                </dd>
79                <dd v-else>{{ powerConsumption }} W</dd>
80              </dl>
81            </b-col>
82            <b-col sm="6">
83              <dl>
84                <dt>{{ $t('overview.powerCap') }}</dt>
85                <dd v-if="powerCapData">{{ powerCapData }} W</dd>
86                <dd v-else>{{ $t('overview.state.notEnabled') }}</dd>
87              </dl>
88            </b-col>
89          </b-row>
90        </page-section>
91      </b-col>
92    </b-row>
93    <page-section
94      :section-title="$t('overview.sectionTitle.highPriorityEvents')"
95    >
96      <overview-events />
97    </page-section>
98  </b-container>
99</template>
100
101<script>
102import OverviewQuickLinks from './OverviewQuickLinks';
103import OverviewEvents from './OverviewEvents';
104import PageTitle from '../../components/Global/PageTitle';
105import PageSection from '../../components/Global/PageSection';
106import { mapState } from 'vuex';
107export default {
108  name: 'Overview',
109  components: {
110    OverviewQuickLinks,
111    OverviewEvents,
112    PageTitle,
113    PageSection
114  },
115  computed: mapState({
116    serverModel: state => state.overview.serverModel,
117    serverManufacturer: state => state.overview.serverManufacturer,
118    serverSerialNumber: state => state.overview.serverSerialNumber,
119    hostName: state => state.global.hostName,
120    hostActiveVersion: state => state.firmware.hostActiveVersion,
121    bmcActiveVersion: state => state.firmware.bmcActiveVersion,
122    powerConsumption: state => state.powerConsumption.powerConsumption,
123    powerCapData: state => state.powerCap.powerCapData,
124    ipAddress: state => state.networkSettings.ipAddress,
125    macAddress: state => state.networkSettings.macAddress
126  }),
127  created() {
128    this.getOverviewInfo();
129  },
130  methods: {
131    getOverviewInfo() {
132      this.$store.dispatch('overview/getServerInfo');
133      this.$store.dispatch('global/getHostName');
134      this.$store.dispatch('firmware/getFirmwareInfo');
135      this.$store.dispatch('powerConsumption/getPowerData');
136      this.$store.dispatch('powerCap/getPowerCapData');
137      this.$store.dispatch('networkSettings/getNetworkData');
138    }
139  }
140};
141</script>
142
143<style lang="scss" scoped>
144.quicklinks-section {
145  margin-bottom: $spacer * 2;
146  margin-left: -1rem;
147}
148</style>
149