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';
67
68export default {
69  name: 'Network',
70  components: {
71    ModalHostname,
72    ModalMacAddress,
73    ModalDefaultGateway,
74    ModalIpv4,
75    ModalIpv6,
76    ModalDns,
77    NetworkGlobalSettings,
78    NetworkInterfaceSettings,
79    PageSection,
80    PageTitle,
81    TableDns,
82    TableIpv4,
83    TableIpv6,
84  },
85  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
86  beforeRouteLeave(to, from, next) {
87    this.hideLoader();
88    next();
89  },
90  data() {
91    return {
92      currentHostname: '',
93      currentMacAddress: '',
94      defaultGateway: '',
95      ipv6DefaultGateway: '',
96      loading,
97      tabIndex: 0,
98    };
99  },
100  computed: {
101    ...mapState('network', ['ethernetData']),
102  },
103  watch: {
104    ethernetData() {
105      this.getModalInfo();
106    },
107  },
108  created() {
109    this.startLoader();
110    const globalSettings = new Promise((resolve) => {
111      this.$root.$on('network-global-settings-complete', () => resolve());
112    });
113    const interfaceSettings = new Promise((resolve) => {
114      this.$root.$on('network-interface-settings-complete', () => resolve());
115    });
116    const networkTableDns = new Promise((resolve) => {
117      this.$root.$on('network-table-dns-complete', () => resolve());
118    });
119    const networkTableIpv4 = new Promise((resolve) => {
120      this.$root.$on('network-table-ipv4-complete', () => resolve());
121    });
122    const networkTableIpv6 = new Promise((resolve) => {
123      this.$root.$on('network-table-ipv6-complete', () => resolve());
124    });
125    // Combine all child component Promises to indicate
126    // when page data load complete
127    Promise.all([
128      this.$store.dispatch('network/getEthernetData'),
129      globalSettings,
130      interfaceSettings,
131      networkTableDns,
132      networkTableIpv4,
133      networkTableIpv6,
134    ]).finally(() => this.endLoader());
135  },
136  methods: {
137    getModalInfo() {
138      this.defaultGateway =
139        this.$store.getters['network/globalNetworkSettings'][
140          this.tabIndex
141        ].defaultGateway;
142
143      this.currentHostname =
144        this.$store.getters['network/globalNetworkSettings'][
145          this.tabIndex
146        ].hostname;
147
148      this.currentMacAddress =
149        this.$store.getters['network/globalNetworkSettings'][
150          this.tabIndex
151        ].macAddress;
152      this.ipv6DefaultGateway =
153        this.$store.getters['network/globalNetworkSettings'][
154          this.tabIndex
155        ].ipv6DefaultGateway;
156    },
157    getTabIndex(selectedIndex) {
158      this.tabIndex = selectedIndex;
159      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
160      this.$store.dispatch(
161        'network/setSelectedTabId',
162        this.ethernetData[selectedIndex].Id,
163      );
164      this.getModalInfo();
165    },
166    saveIpv4Address(modalFormData) {
167      this.startLoader();
168      this.$store
169        .dispatch('network/saveIpv4Address', modalFormData)
170        .then((message) => this.successToast(message))
171        .catch(({ message }) => this.errorToast(message))
172        .finally(() => this.endLoader());
173    },
174    saveIpv6Address(modalFormData) {
175      this.startLoader();
176      this.$store
177        .dispatch('network/saveIpv6Address', modalFormData)
178        .then((message) => this.successToast(message))
179        .catch(({ message }) => this.errorToast(message))
180        .finally(() => this.endLoader());
181    },
182    saveDnsAddress(modalFormData) {
183      this.startLoader();
184      this.$store
185        .dispatch('network/saveDnsAddress', modalFormData)
186        .then((message) => this.successToast(message))
187        .catch(({ message }) => this.errorToast(message))
188        .finally(() => this.endLoader());
189    },
190    saveSettings(modalFormData) {
191      this.startLoader();
192      this.$store
193        .dispatch('network/saveSettings', modalFormData)
194        .then((message) => this.successToast(message))
195        .catch(({ message }) => this.errorToast(message))
196        .finally(() => this.endLoader());
197    },
198  },
199};
200</script>
201