1<template>
2  <overview-card
3    v-if="network"
4    :title="$t('pageOverview.networkInformation')"
5    :to="`/settings/network`"
6  >
7    <b-row class="mt-3">
8      <b-col sm="6">
9        <dl>
10          <dt>{{ $t('pageOverview.hostName') }}</dt>
11          <dd>{{ dataFormatter(network.hostname) }}</dd>
12        </dl>
13      </b-col>
14      <b-col sm="6">
15        <dl>
16          <dt>{{ $t('pageOverview.linkStatus') }}</dt>
17          <dd>
18            {{ dataFormatter(network.linkStatus) }}
19          </dd>
20        </dl>
21      </b-col>
22    </b-row>
23    <b-row>
24      <b-col>
25        <dl>
26          <dt>{{ $t('pageOverview.ipv4') }}</dt>
27          <dd>
28            {{ dataFormatter(network.staticAddress) }}
29          </dd>
30        </dl>
31      </b-col>
32      <b-col>
33        <dl>
34          <dt>{{ $t('pageOverview.dhcp') }}</dt>
35          <dd>
36            {{
37              dataFormatter(
38                network.dhcpAddress.length !== 0
39                  ? network.dhcpAddress[0].Address
40                  : null
41              )
42            }}
43          </dd>
44        </dl>
45      </b-col>
46    </b-row>
47  </overview-card>
48</template>
49
50<script>
51import OverviewCard from './OverviewCard';
52import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
53
54export default {
55  name: 'Network',
56  components: {
57    OverviewCard,
58  },
59  mixins: [DataFormatterMixin],
60  computed: {
61    network() {
62      return this.$store.getters['network/globalNetworkSettings'][0];
63    },
64  },
65  created() {
66    this.$store.dispatch('network/getEthernetData').finally(() => {
67      this.$root.$emit('overview-network-complete');
68    });
69  },
70};
71</script>
72