xref: /openbmc/webui-vue/src/views/Settings/Network/Network.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
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