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="powerConsumption">{{ powerConsumption }} W</dd>
64                <dd v-else>{{ $t('global.status.notAvailable') }}</dd>
65              </dl>
66            </b-col>
67            <b-col sm="6">
68              <dl>
69                <dt>{{ $t('pageOverview.powerCap') }}</dt>
70                <dd v-if="powerCapData">{{ powerCapData }} W</dd>
71                <dd v-else>{{ $t('global.status.disabled') }}</dd>
72              </dl>
73            </b-col>
74          </b-row>
75        </page-section>
76      </b-col>
77    </b-row>
78    <page-section :section-title="$t('pageOverview.highPriorityEvents')">
79      <overview-events />
80    </page-section>
81  </b-container>
82</template>
83
84<script>
85import OverviewQuickLinks from './OverviewQuickLinks';
86import OverviewEvents from './OverviewEvents';
87import OverviewNetwork from './OverviewNetwork';
88import PageTitle from '../../components/Global/PageTitle';
89import PageSection from '../../components/Global/PageSection';
90import { mapState } from 'vuex';
91
92export default {
93  name: 'Overview',
94  components: {
95    OverviewQuickLinks,
96    OverviewEvents,
97    OverviewNetwork,
98    PageTitle,
99    PageSection
100  },
101  computed: mapState({
102    serverModel: state => state.overview.serverModel,
103    serverManufacturer: state => state.overview.serverManufacturer,
104    serverSerialNumber: state => state.overview.serverSerialNumber,
105    hostName: state => state.global.hostName,
106    hostFirmwareVersion: state => state.firmware.hostFirmwareVersion,
107    bmcFirmwareVersion: state => state.firmware.bmcFirmwareVersion,
108    powerConsumption: state => state.powerConsumption.powerConsumption,
109    powerCapValue: state => state.powerCap.powerCapValue
110  }),
111  created() {
112    this.getOverviewInfo();
113  },
114  methods: {
115    getOverviewInfo() {
116      this.$store.dispatch('overview/getServerInfo');
117      this.$store.dispatch('global/getHostName');
118      this.$store.dispatch('firmware/getBmcFirmware');
119      this.$store.dispatch('firmware/getHostFirmware');
120      this.$store.dispatch('powerConsumption/getPowerData');
121      this.$store.dispatch('powerCap/getPowerCapData');
122    }
123  }
124};
125</script>
126
127<style lang="scss" scoped>
128.quicklinks-section {
129  margin-bottom: $spacer * 2;
130  margin-left: $spacer * -1;
131}
132
133dd {
134  white-space: nowrap;
135  overflow: hidden;
136  text-overflow: ellipsis;
137}
138</style>
139