xref: /openbmc/webui-vue/src/views/Settings/Network/NetworkGlobalSettings.vue (revision 08039ab7c0764ce7ac7b76637ad57a7b1711bf87) 
1<template>
2  <page-section
3    v-if="firstInterface"
4    :section-title="$t('pageNetwork.networkSettings')"
5  >
6    <b-row>
7      <b-col md="2">
8        <dl>
9          <dt>
10            {{ $t('pageNetwork.hostname') }}
11            <b-button variant="link" class="p-1" @click="initSettingsModal()">
12              <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
13            </b-button>
14          </dt>
15          <dd>{{ dataFormatter(firstInterface.hostname) }}</dd>
16        </dl>
17      </b-col>
18      <b-col md="2">
19        <dl>
20          <dt>{{ $t('pageNetwork.ipVersion') }}</dt>
21          <dd>{{ $t('pageNetwork.ipv4') }}</dd>
22          <dd>{{ $t('pageNetwork.ipv6') }}</dd>
23        </dl>
24      </b-col>
25      <b-col md="2">
26        <dl>
27          <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
28          <dd>
29            <b-form-checkbox
30              id="useDomainNameSwitch"
31              v-model="useDomainNameState"
32              data-test-id="networkSettings-switch-useDomainName"
33              switch
34              @change="changeDomainNameState"
35            >
36              <span v-if="useDomainNameState">
37                {{ $t('global.status.enabled') }}
38              </span>
39              <span v-else>{{ $t('global.status.disabled') }}</span>
40            </b-form-checkbox>
41          </dd>
42          <dd>
43            <b-form-checkbox
44              id="useDomainNameSwitchIpv6"
45              v-model="useDomainNameStateIpv6"
46              data-test-id="networkSettings-switch-useDomainNameIpv6"
47              switch
48              @change="changeDomainNameStateIpv6"
49            >
50              <span v-if="useDomainNameStateIpv6">
51                {{ $t('global.status.enabled') }}
52              </span>
53              <span v-else>{{ $t('global.status.disabled') }}</span>
54            </b-form-checkbox>
55          </dd>
56        </dl>
57      </b-col>
58      <b-col md="2">
59        <dl>
60          <dt>{{ $t('pageNetwork.useDns') }}</dt>
61          <dd>
62            <b-form-checkbox
63              id="useDnsSwitch"
64              v-model="useDnsState"
65              data-test-id="networkSettings-switch-useDns"
66              switch
67              @change="changeDnsState"
68            >
69              <span v-if="useDnsState">
70                {{ $t('global.status.enabled') }}
71              </span>
72              <span v-else>{{ $t('global.status.disabled') }}</span>
73            </b-form-checkbox>
74          </dd>
75          <dd>
76            <b-form-checkbox
77              id="useDnsSwitchIpv6"
78              v-model="useDnsStateIpv6"
79              data-test-id="networkSettings-switch-useDnsIpv6"
80              switch
81              @change="changeDnsStateIpv6"
82            >
83              <span v-if="useDnsStateIpv6">
84                {{ $t('global.status.enabled') }}
85              </span>
86              <span v-else>{{ $t('global.status.disabled') }}</span>
87            </b-form-checkbox>
88          </dd>
89        </dl>
90      </b-col>
91      <b-col md="2">
92        <dl>
93          <dt>{{ $t('pageNetwork.useNtp') }}</dt>
94          <dd>
95            <b-form-checkbox
96              id="useNtpSwitch"
97              v-model="useNtpState"
98              data-test-id="networkSettings-switch-useNtp"
99              switch
100              @change="changeNtpState"
101            >
102              <span v-if="useNtpState">
103                {{ $t('global.status.enabled') }}
104              </span>
105              <span v-else>{{ $t('global.status.disabled') }}</span>
106            </b-form-checkbox>
107          </dd>
108          <dd>
109            <b-form-checkbox
110              id="useNtpSwitchIpv6"
111              v-model="useNtpStateIpv6"
112              data-test-id="networkSettings-switch-useNtpIpv6"
113              switch
114              @change="changeNtpStateIpv6"
115            >
116              <span v-if="useNtpStateIpv6">
117                {{ $t('global.status.enabled') }}
118              </span>
119              <span v-else>{{ $t('global.status.disabled') }}</span>
120            </b-form-checkbox>
121          </dd>
122        </dl>
123      </b-col>
124    </b-row>
125  </page-section>
126</template>
127
128<script>
129import BVToastMixin from '@/components/Mixins/BVToastMixin';
130import IconEdit from '@carbon/icons-vue/es/edit/16';
131import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
132import PageSection from '@/components/Global/PageSection';
133import { mapState } from 'vuex';
134
135export default {
136  name: 'GlobalNetworkSettings',
137  components: { IconEdit, PageSection },
138  mixins: [BVToastMixin, DataFormatterMixin],
139
140  data() {
141    return {
142      hostname: '',
143    };
144  },
145  computed: {
146    ...mapState('network', ['ethernetData']),
147    firstInterface() {
148      return this.$store.getters['network/globalNetworkSettings'][0];
149    },
150    useDomainNameState: {
151      get() {
152        return this.$store.getters['network/globalNetworkSettings'][0]
153          .useDomainNameEnabled;
154      },
155      set(newValue) {
156        return newValue;
157      },
158    },
159    useDnsState: {
160      get() {
161        return this.$store.getters['network/globalNetworkSettings'][0]
162          .useDnsEnabled;
163      },
164      set(newValue) {
165        return newValue;
166      },
167    },
168    useNtpState: {
169      get() {
170        return this.$store.getters['network/globalNetworkSettings'][0]
171          .useNtpEnabled;
172      },
173      set(newValue) {
174        return newValue;
175      },
176    },
177    useDomainNameStateIpv6: {
178      get() {
179        return this.$store.getters['network/globalNetworkSettings'][0]
180          .useDomainNameEnabledIpv6;
181      },
182      set(newValue) {
183        return newValue;
184      },
185    },
186    useDnsStateIpv6: {
187      get() {
188        return this.$store.getters['network/globalNetworkSettings'][0]
189          .useDnsEnabledIpv6v6;
190      },
191      set(newValue) {
192        return newValue;
193      },
194    },
195    useNtpStateIpv6: {
196      get() {
197        return this.$store.getters['network/globalNetworkSettings'][0]
198          .useNtpEnabledIpv6;
199      },
200      set(newValue) {
201        return newValue;
202      },
203    },
204  },
205  created() {
206    this.$store.dispatch('network/getEthernetData').finally(() => {
207      // Emit initial data fetch complete to parent component
208      this.$root.$emit('network-global-settings-complete');
209    });
210  },
211  methods: {
212    changeDomainNameState(state) {
213      this.$store
214        .dispatch('network/saveDomainNameState', {
215          domainState: state,
216          ipVersion: 'IPv4',
217        })
218        .then((success) => {
219          this.successToast(success);
220        })
221        .catch(({ message }) => this.errorToast(message));
222    },
223    changeDnsState(state) {
224      this.$store
225        .dispatch('network/saveDnsState', {
226          dnsState: state,
227          ipVersion: 'IPv4',
228        })
229        .then((message) => {
230          this.successToast(message);
231        })
232        .catch(({ message }) => this.errorToast(message));
233    },
234    changeNtpState(state) {
235      this.$store
236        .dispatch('network/saveNtpState', {
237          ntpState: state,
238          ipVersion: 'IPv4',
239        })
240        .then((message) => {
241          this.successToast(message);
242        })
243        .catch(({ message }) => this.errorToast(message));
244    },
245    changeDomainNameStateIpv6(state) {
246      this.$store
247        .dispatch('network/saveDomainNameState', {
248          domainState: state,
249          ipVersion: 'IPv6',
250        })
251        .then((success) => {
252          this.successToast(success);
253        })
254        .catch(({ message }) => this.errorToast(message));
255    },
256    changeDnsStateIpv6(state) {
257      this.$store
258        .dispatch('network/saveDnsState', {
259          dnsState: state,
260          ipVersion: 'IPv6',
261        })
262        .then((message) => {
263          this.successToast(message);
264        })
265        .catch(({ message }) => this.errorToast(message));
266    },
267    changeNtpStateIpv6(state) {
268      this.$store
269        .dispatch('network/saveNtpState', {
270          ntpState: state,
271          ipVersion: 'IPv6',
272        })
273        .then((message) => {
274          this.successToast(message);
275        })
276        .catch(({ message }) => this.errorToast(message));
277    },
278    initSettingsModal() {
279      this.$bvModal.show('modal-hostname');
280    },
281  },
282};
283</script>
284