1<template> 2 <b-container fluid="xl"> 3 <page-title :description="$t('pageNetwork.pageDescription')" /> 4 <!-- Global settings for all interfaces --> 5 <network-global-settings /> 6 <!-- Interface tabs --> 7 <page-section v-show="ethernetData"> 8 <b-row> 9 <b-col> 10 <b-card no-body> 11 <b-tabs 12 active-nav-item-class="font-weight-bold" 13 card 14 content-class="mt-3" 15 > 16 <b-tab 17 v-for="(data, index) in ethernetData" 18 :key="data.Id" 19 :title="data.Id" 20 @click="getTabIndex(index)" 21 > 22 <!-- Interface settings --> 23 <network-interface-settings :tab-index="tabIndex" /> 24 <!-- IPV4 table --> 25 <table-ipv-4 :tab-index="tabIndex" /> 26 <!-- IPV6 table --> 27 <table-ipv-6 :tab-index="tabIndex" /> 28 <!-- Static DNS table --> 29 <table-dns :tab-index="tabIndex" /> 30 </b-tab> 31 </b-tabs> 32 </b-card> 33 </b-col> 34 </b-row> 35 </page-section> 36 <!-- Modals --> 37 <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" /> 38 <modal-ipv6 @ok="saveIpv6Address" /> 39 <modal-dns @ok="saveDnsAddress" /> 40 <modal-hostname :hostname="currentHostname" @ok="saveSettings" /> 41 <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" /> 42 <modal-default-gateway 43 :default-gateway="ipv6DefaultGateway" 44 @ok="saveSettings" 45 /> 46 </b-container> 47</template> 48 49<script> 50import BVToastMixin from '@/components/Mixins/BVToastMixin'; 51import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 52import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; 53import ModalMacAddress from './ModalMacAddress.vue'; 54import ModalDefaultGateway from './ModalDefaultGateway.vue'; 55import ModalHostname from './ModalHostname.vue'; 56import ModalIpv4 from './ModalIpv4.vue'; 57import ModalIpv6 from './ModalIpv6.vue'; 58import ModalDns from './ModalDns.vue'; 59import NetworkGlobalSettings from './NetworkGlobalSettings.vue'; 60import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue'; 61import PageSection from '@/components/Global/PageSection'; 62import PageTitle from '@/components/Global/PageTitle'; 63import TableIpv4 from './TableIpv4.vue'; 64import TableIpv6 from './TableIpv6.vue'; 65import TableDns from './TableDns.vue'; 66import { mapState } from 'vuex'; 67import { useI18n } from 'vue-i18n'; 68 69export default { 70 name: 'Network', 71 components: { 72 ModalHostname, 73 ModalMacAddress, 74 ModalDefaultGateway, 75 ModalIpv4, 76 ModalIpv6, 77 ModalDns, 78 NetworkGlobalSettings, 79 NetworkInterfaceSettings, 80 PageSection, 81 PageTitle, 82 TableDns, 83 TableIpv4, 84 TableIpv6, 85 }, 86 mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin], 87 beforeRouteLeave(to, from, next) { 88 this.hideLoader(); 89 next(); 90 }, 91 data() { 92 return { 93 $t: useI18n().t, 94 currentHostname: '', 95 currentMacAddress: '', 96 defaultGateway: '', 97 ipv6DefaultGateway: '', 98 loading, 99 tabIndex: 0, 100 }; 101 }, 102 computed: { 103 ...mapState('network', ['ethernetData']), 104 }, 105 watch: { 106 ethernetData() { 107 this.getModalInfo(); 108 }, 109 }, 110 created() { 111 this.startLoader(); 112 const globalSettings = new Promise((resolve) => { 113 this.$root.$on('network-global-settings-complete', () => resolve()); 114 }); 115 const interfaceSettings = new Promise((resolve) => { 116 this.$root.$on('network-interface-settings-complete', () => resolve()); 117 }); 118 const networkTableDns = new Promise((resolve) => { 119 this.$root.$on('network-table-dns-complete', () => resolve()); 120 }); 121 const networkTableIpv4 = new Promise((resolve) => { 122 this.$root.$on('network-table-ipv4-complete', () => resolve()); 123 }); 124 const networkTableIpv6 = new Promise((resolve) => { 125 this.$root.$on('network-table-ipv6-complete', () => resolve()); 126 }); 127 // Combine all child component Promises to indicate 128 // when page data load complete 129 Promise.all([ 130 this.$store.dispatch('network/getEthernetData'), 131 globalSettings, 132 interfaceSettings, 133 networkTableDns, 134 networkTableIpv4, 135 networkTableIpv6, 136 ]).finally(() => this.endLoader()); 137 }, 138 methods: { 139 getModalInfo() { 140 this.defaultGateway = 141 this.$store.getters['network/globalNetworkSettings'][ 142 this.tabIndex 143 ].defaultGateway; 144 145 this.currentHostname = 146 this.$store.getters['network/globalNetworkSettings'][ 147 this.tabIndex 148 ].hostname; 149 150 this.currentMacAddress = 151 this.$store.getters['network/globalNetworkSettings'][ 152 this.tabIndex 153 ].macAddress; 154 this.ipv6DefaultGateway = 155 this.$store.getters['network/globalNetworkSettings'][ 156 this.tabIndex 157 ].ipv6DefaultGateway; 158 }, 159 getTabIndex(selectedIndex) { 160 this.tabIndex = selectedIndex; 161 this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex); 162 this.$store.dispatch( 163 'network/setSelectedTabId', 164 this.ethernetData[selectedIndex].Id, 165 ); 166 this.getModalInfo(); 167 }, 168 saveIpv4Address(modalFormData) { 169 this.startLoader(); 170 this.$store 171 .dispatch('network/saveIpv4Address', modalFormData) 172 .then((message) => this.successToast(message)) 173 .catch(({ message }) => this.errorToast(message)) 174 .finally(() => this.endLoader()); 175 }, 176 saveIpv6Address(modalFormData) { 177 this.startLoader(); 178 this.$store 179 .dispatch('network/saveIpv6Address', modalFormData) 180 .then((message) => this.successToast(message)) 181 .catch(({ message }) => this.errorToast(message)) 182 .finally(() => this.endLoader()); 183 }, 184 saveDnsAddress(modalFormData) { 185 this.startLoader(); 186 this.$store 187 .dispatch('network/saveDnsAddress', modalFormData) 188 .then((message) => this.successToast(message)) 189 .catch(({ message }) => this.errorToast(message)) 190 .finally(() => this.endLoader()); 191 }, 192 saveSettings(modalFormData) { 193 this.startLoader(); 194 this.$store 195 .dispatch('network/saveSettings', modalFormData) 196 .then((message) => this.successToast(message)) 197 .catch(({ message }) => this.errorToast(message)) 198 .finally(() => this.endLoader()); 199 }, 200 }, 201}; 202</script> 203