1<template>
2  <div>
3    <div v-if="ethernetData.length === 0">
4      {{ $t('global.state.notAvailable') }}
5    </div>
6    <div
7      v-for="ethernetInterface in ethernetData"
8      v-else
9      :key="ethernetInterface.id"
10    >
11      <p class="h6 interface-name font-weight-bold">
12        {{ ethernetInterface.Id }}
13      </p>
14      <b-row>
15        <b-col md="12" lg="4">
16          <dl>
17            <dt>{{ $t('overview.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('overview.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('overview.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.getEthernetData();
53  },
54  methods: {
55    getEthernetData() {
56      this.$store.dispatch('networkSettings/getEthernetData');
57    }
58  }
59};
60</script>
61
62<style lang="scss" scoped>
63.interface-name {
64  text-transform: capitalize;
65}
66dd {
67  margin-bottom: 0;
68  white-space: nowrap;
69  overflow: hidden;
70  text-overflow: ellipsis;
71}
72</style>
73