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';
53import { useI18n } from 'vue-i18n';
54
55export default {
56  name: 'Network',
57  components: {
58    OverviewCard,
59  },
60  mixins: [DataFormatterMixin],
61  data() {
62    return {
63      $t: useI18n().t,
64    };
65  },
66  computed: {
67    network() {
68      return this.$store.getters['network/globalNetworkSettings'][0];
69    },
70  },
71  created() {
72    this.$store.dispatch('network/getEthernetData').finally(() => {
73      this.$root.$emit('overview-network-complete');
74    });
75  },
76};
77</script>
78