xref: /openbmc/webui-vue/src/views/Settings/Network/Network.vue (revision c4b8757ed88ecea369e6044548d2fbe072d5bd4a) 
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>
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  </b-container>
35</template>
36
37<script>
38import BVToastMixin from '@/components/Mixins/BVToastMixin';
39import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
40import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
41import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
42import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
43import PageSection from '@/components/Global/PageSection';
44import PageTitle from '@/components/Global/PageTitle';
45import TableIpv4 from './TableIpv4.vue';
46import TableDns from './TableDns.vue';
47import { mapState } from 'vuex';
48
49export default {
50  name: 'Network',
51  components: {
52    NetworkGlobalSettings,
53    NetworkInterfaceSettings,
54    PageSection,
55    PageTitle,
56    TableDns,
57    TableIpv4,
58  },
59  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
60  beforeRouteLeave(to, from, next) {
61    this.hideLoader();
62    next();
63  },
64  data() {
65    return {
66      loading,
67      tabIndex: 0,
68    };
69  },
70  computed: {
71    ...mapState('network', ['ethernetData']),
72  },
73  created() {
74    this.startLoader();
75    const globalSettings = new Promise((resolve) => {
76      this.$root.$on('network-global-settings-complete', () => resolve());
77    });
78    const interfaceSettings = new Promise((resolve) => {
79      this.$root.$on('network-interface-settings-complete', () => resolve());
80    });
81    const networkTableDns = new Promise((resolve) => {
82      this.$root.$on('network-table-dns-complete', () => resolve());
83    });
84    const networkTableIpv4 = new Promise((resolve) => {
85      this.$root.$on('network-table-ipv4-complete', () => resolve());
86    });
87    // Combine all child component Promises to indicate
88    // when page data load complete
89    Promise.all([
90      this.$store.dispatch('network/getEthernetData'),
91      globalSettings,
92      interfaceSettings,
93      networkTableDns,
94      networkTableIpv4,
95    ]).finally(() => this.endLoader());
96  },
97  methods: {
98    getTabIndex(selectedIndex) {
99      this.tabIndex = selectedIndex;
100    },
101  },
102};
103</script>
104