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 ? network.dhcpAddress : null
39              )
40            }}
41          </dd>
42        </dl>
43      </b-col>
44    </b-row>
45  </overview-card>
46</template>
47
48<script>
49import OverviewCard from './OverviewCard';
50import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
51
52export default {
53  name: 'Network',
54  components: {
55    OverviewCard,
56  },
57  mixins: [DataFormatterMixin],
58  computed: {
59    network() {
60      return this.$store.getters['network/globalNetworkSettings'][0];
61    },
62  },
63  created() {
64    this.$store.dispatch('network/getEthernetData').finally(() => {
65      this.$root.$emit('overview-network-complete');
66    });
67  },
68};
69</script>
70