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