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>{{ $t('pageNetwork.fqdn') }}</dt> 28 <dd> 29 {{ dataFormatter(fqdn) }} 30 </dd> 31 </dl> 32 </b-col> 33 <b-col md="3"> 34 <dl class="text-nowrap"> 35 <dt>{{ $t('pageNetwork.macAddress') }}</dt> 36 <dd> 37 {{ dataFormatter(macAddress) }} 38 </dd> 39 </dl> 40 </b-col> 41 </b-row> 42 </page-section> 43 </div> 44</template> 45 46<script> 47import BVToastMixin from '@/components/Mixins/BVToastMixin'; 48import PageSection from '@/components/Global/PageSection'; 49import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 50import { mapState } from 'vuex'; 51 52export default { 53 name: 'Ipv4Table', 54 components: { 55 PageSection, 56 }, 57 mixins: [BVToastMixin, DataFormatterMixin], 58 props: { 59 tabIndex: { 60 type: Number, 61 default: 0, 62 }, 63 }, 64 data() { 65 return { 66 selectedInterface: '', 67 linkStatus: '', 68 linkSpeed: '', 69 fqdn: '', 70 macAddress: '', 71 }; 72 }, 73 computed: { 74 ...mapState('network', ['ethernetData']), 75 }, 76 watch: { 77 // Watch for change in tab index 78 tabIndex() { 79 this.getSettings(); 80 }, 81 }, 82 created() { 83 this.getSettings(); 84 this.$store.dispatch('network/getEthernetData').finally(() => { 85 // Emit initial data fetch complete to parent component 86 this.$root.$emit('network-interface-settings-complete'); 87 }); 88 }, 89 methods: { 90 getSettings() { 91 this.selectedInterface = this.tabIndex; 92 this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus; 93 this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps; 94 this.fqdn = this.ethernetData[this.selectedInterface].FQDN; 95 this.macAddress = this.ethernetData[this.selectedInterface].MACAddress; 96 }, 97 }, 98}; 99</script> 100