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