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';
136import { useI18n } from 'vue-i18n';
137
138export default {
139  name: 'GlobalNetworkSettings',
140  components: { IconEdit, PageSection },
141  mixins: [BVToastMixin, DataFormatterMixin],
142
143  data() {
144    return {
145      $t: useI18n().t,
146      hostname: '',
147    };
148  },
149  computed: {
150    ...mapState('network', ['ethernetData']),
151    firstInterface() {
152      return this.$store.getters['network/globalNetworkSettings'][0];
153    },
154    useDomainNameState: {
155      get() {
156        return this.$store.getters['network/globalNetworkSettings'][0]
157          .useDomainNameEnabled;
158      },
159      set(newValue) {
160        return newValue;
161      },
162    },
163    useDnsState: {
164      get() {
165        return this.$store.getters['network/globalNetworkSettings'][0]
166          .useDnsEnabled;
167      },
168      set(newValue) {
169        return newValue;
170      },
171    },
172    useNtpState: {
173      get() {
174        return this.$store.getters['network/globalNetworkSettings'][0]
175          .useNtpEnabled;
176      },
177      set(newValue) {
178        return newValue;
179      },
180    },
181    useDomainNameStateIpv6: {
182      get() {
183        return this.$store.getters['network/globalNetworkSettings'][0]
184          .useDomainNameEnabledIpv6;
185      },
186      set(newValue) {
187        return newValue;
188      },
189    },
190    useDnsStateIpv6: {
191      get() {
192        return this.$store.getters['network/globalNetworkSettings'][0]
193          .useDnsEnabledIpv6v6;
194      },
195      set(newValue) {
196        return newValue;
197      },
198    },
199    useNtpStateIpv6: {
200      get() {
201        return this.$store.getters['network/globalNetworkSettings'][0]
202          .useNtpEnabledIpv6;
203      },
204      set(newValue) {
205        return newValue;
206      },
207    },
208  },
209  created() {
210    this.$store.dispatch('network/getEthernetData').finally(() => {
211      // Emit initial data fetch complete to parent component
212      this.$root.$emit('network-global-settings-complete');
213    });
214  },
215  methods: {
216    changeDomainNameState(state) {
217      this.$store
218        .dispatch('network/saveDomainNameState', {
219          domainState: state,
220          ipVersion: 'IPv4',
221        })
222        .then((success) => {
223          this.successToast(success);
224        })
225        .catch(({ message }) => this.errorToast(message));
226    },
227    changeDnsState(state) {
228      this.$store
229        .dispatch('network/saveDnsState', {
230          dnsState: state,
231          ipVersion: 'IPv4',
232        })
233        .then((message) => {
234          this.successToast(message);
235        })
236        .catch(({ message }) => this.errorToast(message));
237    },
238    changeNtpState(state) {
239      this.$store
240        .dispatch('network/saveNtpState', {
241          ntpState: state,
242          ipVersion: 'IPv4',
243        })
244        .then((message) => {
245          this.successToast(message);
246        })
247        .catch(({ message }) => this.errorToast(message));
248    },
249    changeDomainNameStateIpv6(state) {
250      this.$store
251        .dispatch('network/saveDomainNameState', {
252          domainState: state,
253          ipVersion: 'IPv6',
254        })
255        .then((success) => {
256          this.successToast(success);
257        })
258        .catch(({ message }) => this.errorToast(message));
259    },
260    changeDnsStateIpv6(state) {
261      this.$store
262        .dispatch('network/saveDnsState', {
263          dnsState: state,
264          ipVersion: 'IPv6',
265        })
266        .then((message) => {
267          this.successToast(message);
268        })
269        .catch(({ message }) => this.errorToast(message));
270    },
271    changeNtpStateIpv6(state) {
272      this.$store
273        .dispatch('network/saveNtpState', {
274          ntpState: state,
275          ipVersion: 'IPv6',
276        })
277        .then((message) => {
278          this.successToast(message);
279        })
280        .catch(({ message }) => this.errorToast(message));
281    },
282    initSettingsModal() {
283      this.$bvModal.show('modal-hostname');
284    },
285  },
286};
287</script>
288