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';
65import { useI18n } from 'vue-i18n';
66
67export default {
68  name: 'Ipv4Table',
69  components: {
70    IconEdit,
71    PageSection,
72  },
73  mixins: [BVToastMixin, DataFormatterMixin],
74  props: {
75    tabIndex: {
76      type: Number,
77      default: 0,
78    },
79  },
80  data() {
81    return {
82      $t: useI18n().t,
83      selectedInterface: '',
84      linkStatus: '',
85      linkSpeed: '',
86      fqdn: '',
87      macAddress: '',
88    };
89  },
90  computed: {
91    ...mapState('network', ['ethernetData']),
92  },
93  watch: {
94    // Watch for change in tab index
95    tabIndex() {
96      this.getSettings();
97    },
98  },
99  created() {
100    this.getSettings();
101    this.$store.dispatch('network/getEthernetData').finally(() => {
102      // Emit initial data fetch complete to parent component
103      this.$root.$emit('network-interface-settings-complete');
104    });
105  },
106  methods: {
107    getSettings() {
108      this.selectedInterface = this.tabIndex;
109      this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
110      this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
111      this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
112      this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
113    },
114    initMacAddressModal() {
115      this.$bvModal.show('modal-mac-address');
116    },
117  },
118};
119</script>
120