xref: /openbmc/webui-vue/src/views/Settings/Network/Network.vue (revision b34349d4139230fb4ca99bf89a6b0e1f707e58e2) 
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-if="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  </b-container>
38</template>
39
40<script>
41import BVToastMixin from '@/components/Mixins/BVToastMixin';
42import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
43import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
44import ModalIpv4 from './ModalIpv4.vue';
45import ModalDns from './ModalDns.vue';
46import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
47import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
48import PageSection from '@/components/Global/PageSection';
49import PageTitle from '@/components/Global/PageTitle';
50import TableIpv4 from './TableIpv4.vue';
51import TableDns from './TableDns.vue';
52import { mapState } from 'vuex';
53
54export default {
55  name: 'Network',
56  components: {
57    ModalIpv4,
58    ModalDns,
59    NetworkGlobalSettings,
60    NetworkInterfaceSettings,
61    PageSection,
62    PageTitle,
63    TableDns,
64    TableIpv4,
65  },
66  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
67  beforeRouteLeave(to, from, next) {
68    this.hideLoader();
69    next();
70  },
71  data() {
72    return {
73      defaultGateway: '',
74      loading,
75      tabIndex: 0,
76    };
77  },
78  computed: {
79    ...mapState('network', ['ethernetData']),
80  },
81  watch: {
82    ethernetData() {
83      this.getGateway();
84    },
85  },
86  created() {
87    this.startLoader();
88    const globalSettings = new Promise((resolve) => {
89      this.$root.$on('network-global-settings-complete', () => resolve());
90    });
91    const interfaceSettings = new Promise((resolve) => {
92      this.$root.$on('network-interface-settings-complete', () => resolve());
93    });
94    const networkTableDns = new Promise((resolve) => {
95      this.$root.$on('network-table-dns-complete', () => resolve());
96    });
97    const networkTableIpv4 = new Promise((resolve) => {
98      this.$root.$on('network-table-ipv4-complete', () => resolve());
99    });
100    // Combine all child component Promises to indicate
101    // when page data load complete
102    Promise.all([
103      this.$store.dispatch('network/getEthernetData'),
104      globalSettings,
105      interfaceSettings,
106      networkTableDns,
107      networkTableIpv4,
108    ]).finally(() => this.endLoader());
109  },
110  methods: {
111    getGateway() {
112      this.defaultGateway = this.$store.getters[
113        'network/globalNetworkSettings'
114      ][this.tabIndex].defaultGateway;
115    },
116    getTabIndex(selectedIndex) {
117      this.tabIndex = selectedIndex;
118      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
119      this.$store.dispatch(
120        'network/setSelectedTabId',
121        this.ethernetData[selectedIndex].Id
122      );
123      this.defaultGateway = this.$store.getters[
124        'network/globalNetworkSettings'
125      ][this.tabIndex].defaultGateway;
126    },
127    saveIpv4Address(modalFormData) {
128      this.startLoader();
129      this.$store
130        .dispatch('network/saveIpv4Address', modalFormData)
131        .then((message) => this.successToast(message))
132        .catch(({ message }) => this.errorToast(message))
133        .finally(() => this.endLoader());
134    },
135    saveDnsAddress(modalFormData) {
136      this.startLoader();
137      this.$store
138        .dispatch('network/saveDnsAddress', modalFormData)
139        .then((message) => this.successToast(message))
140        .catch(({ message }) => this.errorToast(message))
141        .finally(() => this.endLoader());
142    },
143  },
144};
145</script>
146