1<template>
2  <div>
3    <div v-if="ethernetData.length === 0">
4      {{ $t('global.status.notAvailable') }}
5    </div>
6    <div
7      v-for="ethernetInterface in ethernetData"
8      v-else
9      :key="ethernetInterface.id"
10    >
11      <h3 class="h5 interface-name font-weight-bold">
12        {{ ethernetInterface.Id }}
13      </h3>
14      <b-row>
15        <b-col md="12" lg="4">
16          <dl>
17            <dt>{{ $t('pageOverview.network.hostname') }}</dt>
18            <dd>{{ ethernetInterface.HostName }}</dd>
19          </dl>
20        </b-col>
21        <b-col md="12" lg="4">
22          <dl>
23            <dt>{{ $t('pageOverview.network.macAddress') }}</dt>
24            <dd>{{ ethernetInterface.MACAddress }}</dd>
25          </dl>
26        </b-col>
27        <b-col md="12" lg="4">
28          <dl>
29            <dt>{{ $t('pageOverview.network.ipAddress') }}</dt>
30            <dd
31              v-for="(ip, $index) in ethernetInterface.IPv4Addresses"
32              :key="$index"
33            >
34              {{ ip.Address }}
35            </dd>
36          </dl>
37        </b-col>
38      </b-row>
39    </div>
40  </div>
41</template>
42
43<script>
44export default {
45  name: 'Network',
46  computed: {
47    ethernetData() {
48      return this.$store.getters['networkSettings/ethernetData'];
49    }
50  },
51  created() {
52    this.$store.dispatch('networkSettings/getEthernetData').finally(() => {
53      this.$root.$emit('overview::network::complete');
54    });
55  }
56};
57</script>
58
59<style lang="scss" scoped>
60.interface-name {
61  text-transform: capitalize;
62}
63dd {
64  margin-bottom: 0;
65  white-space: nowrap;
66  overflow: hidden;
67  text-overflow: ellipsis;
68}
69</style>
70