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                <!-- Static DNS table -->
27                <table-dns :tab-index="tabIndex" />
28              </b-tab>
29            </b-tabs>
30          </b-card>
31        </b-col>
32      </b-row>
33    </page-section>
34    <!-- Modals -->
35    <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
36    <modal-dns @ok="saveDnsAddress" />
37    <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
38    <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
39  </b-container>
40</template>
41
42<script>
43import BVToastMixin from '@/components/Mixins/BVToastMixin';
44import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
45import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
46import ModalMacAddress from './ModalMacAddress.vue';
47import ModalHostname from './ModalHostname.vue';
48import ModalIpv4 from './ModalIpv4.vue';
49import ModalDns from './ModalDns.vue';
50import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
51import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
52import PageSection from '@/components/Global/PageSection';
53import PageTitle from '@/components/Global/PageTitle';
54import TableIpv4 from './TableIpv4.vue';
55import TableDns from './TableDns.vue';
56import { mapState } from 'vuex';
57
58export default {
59  name: 'Network',
60  components: {
61    ModalHostname,
62    ModalMacAddress,
63    ModalIpv4,
64    ModalDns,
65    NetworkGlobalSettings,
66    NetworkInterfaceSettings,
67    PageSection,
68    PageTitle,
69    TableDns,
70    TableIpv4,
71  },
72  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
73  beforeRouteLeave(to, from, next) {
74    this.hideLoader();
75    next();
76  },
77  data() {
78    return {
79      currentHostname: '',
80      currentMacAddress: '',
81      defaultGateway: '',
82      loading,
83      tabIndex: 0,
84    };
85  },
86  computed: {
87    ...mapState('network', ['ethernetData']),
88  },
89  watch: {
90    ethernetData() {
91      this.getModalInfo();
92    },
93  },
94  created() {
95    this.startLoader();
96    const globalSettings = new Promise((resolve) => {
97      this.$root.$on('network-global-settings-complete', () => resolve());
98    });
99    const interfaceSettings = new Promise((resolve) => {
100      this.$root.$on('network-interface-settings-complete', () => resolve());
101    });
102    const networkTableDns = new Promise((resolve) => {
103      this.$root.$on('network-table-dns-complete', () => resolve());
104    });
105    const networkTableIpv4 = new Promise((resolve) => {
106      this.$root.$on('network-table-ipv4-complete', () => resolve());
107    });
108    // Combine all child component Promises to indicate
109    // when page data load complete
110    Promise.all([
111      this.$store.dispatch('network/getEthernetData'),
112      globalSettings,
113      interfaceSettings,
114      networkTableDns,
115      networkTableIpv4,
116    ]).finally(() => this.endLoader());
117  },
118  methods: {
119    getModalInfo() {
120      this.defaultGateway = this.$store.getters[
121        'network/globalNetworkSettings'
122      ][this.tabIndex].defaultGateway;
123
124      this.currentHostname = this.$store.getters[
125        'network/globalNetworkSettings'
126      ][this.tabIndex].hostname;
127
128      this.currentMacAddress = this.$store.getters[
129        'network/globalNetworkSettings'
130      ][this.tabIndex].macAddress;
131    },
132    getTabIndex(selectedIndex) {
133      this.tabIndex = selectedIndex;
134      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
135      this.$store.dispatch(
136        'network/setSelectedTabId',
137        this.ethernetData[selectedIndex].Id
138      );
139      this.getModalInfo();
140    },
141    saveIpv4Address(modalFormData) {
142      this.startLoader();
143      this.$store
144        .dispatch('network/saveIpv4Address', modalFormData)
145        .then((message) => this.successToast(message))
146        .catch(({ message }) => this.errorToast(message))
147        .finally(() => this.endLoader());
148    },
149    saveDnsAddress(modalFormData) {
150      this.startLoader();
151      this.$store
152        .dispatch('network/saveDnsAddress', modalFormData)
153        .then((message) => this.successToast(message))
154        .catch(({ message }) => this.errorToast(message))
155        .finally(() => this.endLoader());
156    },
157    saveSettings(modalFormData) {
158      this.startLoader();
159      this.$store
160        .dispatch('network/saveSettings', modalFormData)
161        .then((message) => this.successToast(message))
162        .catch(({ message }) => this.errorToast(message))
163        .finally(() => this.endLoader());
164    },
165  },
166};
167</script>
168