1<template>
2  <b-container fluid="xl">
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="powerConsumptionValue == null">
64                  {{ $t('global.status.notAvailable') }}
65                </dd>
66                <dd v-else>{{ powerConsumptionValue }} W</dd>
67              </dl>
68            </b-col>
69            <b-col sm="6">
70              <dl>
71                <dt>{{ $t('pageOverview.powerCap') }}</dt>
72                <dd v-if="powerCapValue == null">
73                  {{ $t('global.status.disabled') }}
74                </dd>
75                <dd v-else>{{ powerCapValue }} W</dd>
76              </dl>
77            </b-col>
78          </b-row>
79        </page-section>
80      </b-col>
81    </b-row>
82    <page-section :section-title="$t('pageOverview.highPriorityEvents')">
83      <overview-events />
84    </page-section>
85  </b-container>
86</template>
87
88<script>
89import OverviewQuickLinks from './OverviewQuickLinks';
90import OverviewEvents from './OverviewEvents';
91import OverviewNetwork from './OverviewNetwork';
92import PageTitle from '@/components/Global/PageTitle';
93import PageSection from '@/components/Global/PageSection';
94import { mapState } from 'vuex';
95import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
96
97export default {
98  name: 'Overview',
99  components: {
100    OverviewQuickLinks,
101    OverviewEvents,
102    OverviewNetwork,
103    PageTitle,
104    PageSection
105  },
106  mixins: [LoadingBarMixin],
107  data() {
108    return {
109      firmwareStoreModuleName: this.$store.hasModule('firmwareSingleImage')
110        ? 'firmwareSingleImage'
111        : 'firmware'
112    };
113  },
114  computed: {
115    ...mapState({
116      server: state => state.system.systems[0],
117      powerCapValue: state => state.powerControl.powerCapValue,
118      powerConsumptionValue: state => state.powerControl.powerConsumptionValue,
119      serverManufacturer() {
120        if (this.server) return this.server.manufacturer || '--';
121        return '--';
122      },
123      serverModel() {
124        if (this.server) return this.server.model || '--';
125        return '--';
126      },
127      serverSerialNumber() {
128        if (this.server) return this.server.serialNumber || '--';
129        return '--';
130      },
131      hostFirmwareVersion() {
132        if (this.server) return this.server.firmwareVersion || '--';
133        return '--';
134      }
135    }),
136    bmcFirmwareVersion() {
137      return this.$store.getters[
138        `${this.firmwareStoreModuleName}/bmcFirmwareCurrentVersion`
139      ];
140    }
141  },
142  created() {
143    this.startLoader();
144    const quicklinksPromise = new Promise(resolve => {
145      this.$root.$on('overview::quicklinks::complete', () => resolve());
146    });
147    const networkPromise = new Promise(resolve => {
148      this.$root.$on('overview::network::complete', () => resolve());
149    });
150    const eventsPromise = new Promise(resolve => {
151      this.$root.$on('overview::events::complete', () => resolve());
152    });
153    Promise.all([
154      this.$store.dispatch('system/getSystem'),
155      this.$store.dispatch(
156        `${this.firmwareStoreModuleName}/getFirmwareInformation`
157      ),
158      this.$store.dispatch('powerControl/getPowerControl'),
159      quicklinksPromise,
160      networkPromise,
161      eventsPromise
162    ]).finally(() => this.endLoader());
163  },
164  beforeRouteLeave(to, from, next) {
165    this.hideLoader();
166    next();
167  }
168};
169</script>
170
171<style lang="scss" scoped>
172.quicklinks-section {
173  margin-bottom: $spacer * 2;
174  margin-left: $spacer * -1;
175}
176
177dd {
178  white-space: nowrap;
179  overflow: hidden;
180  text-overflow: ellipsis;
181}
182</style>
183