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 =
121        this.$store.getters['network/globalNetworkSettings'][
122          this.tabIndex
123        ].defaultGateway;
124
125      this.currentHostname =
126        this.$store.getters['network/globalNetworkSettings'][
127          this.tabIndex
128        ].hostname;
129
130      this.currentMacAddress =
131        this.$store.getters['network/globalNetworkSettings'][
132          this.tabIndex
133        ].macAddress;
134    },
135    getTabIndex(selectedIndex) {
136      this.tabIndex = selectedIndex;
137      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
138      this.$store.dispatch(
139        'network/setSelectedTabId',
140        this.ethernetData[selectedIndex].Id,
141      );
142      this.getModalInfo();
143    },
144    saveIpv4Address(modalFormData) {
145      this.startLoader();
146      this.$store
147        .dispatch('network/saveIpv4Address', modalFormData)
148        .then((message) => this.successToast(message))
149        .catch(({ message }) => this.errorToast(message))
150        .finally(() => this.endLoader());
151    },
152    saveDnsAddress(modalFormData) {
153      this.startLoader();
154      this.$store
155        .dispatch('network/saveDnsAddress', modalFormData)
156        .then((message) => this.successToast(message))
157        .catch(({ message }) => this.errorToast(message))
158        .finally(() => this.endLoader());
159    },
160    saveSettings(modalFormData) {
161      this.startLoader();
162      this.$store
163        .dispatch('network/saveSettings', modalFormData)
164        .then((message) => this.successToast(message))
165        .catch(({ message }) => this.errorToast(message))
166        .finally(() => this.endLoader());
167    },
168  },
169};
170</script>
171