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