1<template>
2  <div>
3    <page-section>
4      <b-row>
5        <b-col md="3">
6          <dl>
7            <dt>{{ $t('pageNetwork.linkStatus') }}</dt>
8            <dd>
9              {{ dataFormatter(linkStatus) }}
10            </dd>
11          </dl>
12        </b-col>
13        <b-col md="3">
14          <dl>
15            <dt>{{ $t('pageNetwork.speed') }}</dt>
16            <dd>
17              {{ dataFormatter(linkSpeed) }}
18            </dd>
19          </dl>
20        </b-col>
21      </b-row>
22    </page-section>
23    <page-section :section-title="$t('pageNetwork.interfaceSection')">
24      <b-row>
25        <b-col md="3">
26          <dl>
27            <dt>
28              {{ $t('pageNetwork.fqdn') }}
29            </dt>
30            <dd>
31              {{ dataFormatter(fqdn) }}
32            </dd>
33          </dl>
34        </b-col>
35        <b-col md="3">
36          <dl class="text-nowrap">
37            <dt>
38              {{ $t('pageNetwork.macAddress') }}
39              <b-button
40                variant="link"
41                class="p-1"
42                @click="initMacAddressModal()"
43              >
44                <icon-edit
45                  :title="$t('pageNetwork.modal.editMacAddressTitle')"
46                />
47              </b-button>
48            </dt>
49            <dd>
50              {{ dataFormatter(macAddress) }}
51            </dd>
52          </dl>
53        </b-col>
54      </b-row>
55    </page-section>
56  </div>
57</template>
58
59<script>
60import BVToastMixin from '@/components/Mixins/BVToastMixin';
61import IconEdit from '@carbon/icons-vue/es/edit/16';
62import PageSection from '@/components/Global/PageSection';
63import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
64import { mapState } from 'vuex';
65
66export default {
67  name: 'Ipv4Table',
68  components: {
69    IconEdit,
70    PageSection,
71  },
72  mixins: [BVToastMixin, DataFormatterMixin],
73  props: {
74    tabIndex: {
75      type: Number,
76      default: 0,
77    },
78  },
79  data() {
80    return {
81      selectedInterface: '',
82      linkStatus: '',
83      linkSpeed: '',
84      fqdn: '',
85      macAddress: '',
86    };
87  },
88  computed: {
89    ...mapState('network', ['ethernetData']),
90  },
91  watch: {
92    // Watch for change in tab index
93    tabIndex() {
94      this.getSettings();
95    },
96  },
97  created() {
98    this.getSettings();
99    this.$store.dispatch('network/getEthernetData').finally(() => {
100      // Emit initial data fetch complete to parent component
101      this.$root.$emit('network-interface-settings-complete');
102    });
103  },
104  methods: {
105    getSettings() {
106      this.selectedInterface = this.tabIndex;
107      this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
108      this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
109      this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
110      this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
111    },
112    initMacAddressModal() {
113      this.$bvModal.show('modal-mac-address');
114    },
115  },
116};
117</script>
118