1<template>
2  <page-section
3    v-if="firstInterface"
4    :section-title="$t('pageNetwork.networkSettings')"
5  >
6    <b-row>
7      <b-col md="3">
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="3">
19        <dl>
20          <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
21          <dd>
22            <b-form-checkbox
23              id="useDomainNameSwitch"
24              v-model="useDomainNameState"
25              data-test-id="networkSettings-switch-useDomainName"
26              switch
27              @change="changeDomainNameState"
28            >
29              <span v-if="useDomainNameState">
30                {{ $t('global.status.enabled') }}
31              </span>
32              <span v-else>{{ $t('global.status.disabled') }}</span>
33            </b-form-checkbox>
34          </dd>
35        </dl>
36      </b-col>
37      <b-col md="3">
38        <dl>
39          <dt>{{ $t('pageNetwork.useDns') }}</dt>
40          <dd>
41            <b-form-checkbox
42              id="useDnsSwitch"
43              v-model="useDnsState"
44              data-test-id="networkSettings-switch-useDns"
45              switch
46              @change="changeDnsState"
47            >
48              <span v-if="useDnsState">
49                {{ $t('global.status.enabled') }}
50              </span>
51              <span v-else>{{ $t('global.status.disabled') }}</span>
52            </b-form-checkbox>
53          </dd>
54        </dl>
55      </b-col>
56      <b-col md="3">
57        <dl>
58          <dt>{{ $t('pageNetwork.useNtp') }}</dt>
59          <dd>
60            <b-form-checkbox
61              id="useNtpSwitch"
62              v-model="useNtpState"
63              data-test-id="networkSettings-switch-useNtp"
64              switch
65              @change="changeNtpState"
66            >
67              <span v-if="useNtpState">
68                {{ $t('global.status.enabled') }}
69              </span>
70              <span v-else>{{ $t('global.status.disabled') }}</span>
71            </b-form-checkbox>
72          </dd>
73        </dl>
74      </b-col>
75    </b-row>
76  </page-section>
77</template>
78
79<script>
80import BVToastMixin from '@/components/Mixins/BVToastMixin';
81import IconEdit from '@carbon/icons-vue/es/edit/16';
82import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
83import PageSection from '@/components/Global/PageSection';
84import { mapState } from 'vuex';
85
86export default {
87  name: 'GlobalNetworkSettings',
88  components: { IconEdit, PageSection },
89  mixins: [BVToastMixin, DataFormatterMixin],
90
91  data() {
92    return {
93      hostname: '',
94    };
95  },
96  computed: {
97    ...mapState('network', ['ethernetData']),
98    firstInterface() {
99      return this.$store.getters['network/globalNetworkSettings'][0];
100    },
101    useDomainNameState: {
102      get() {
103        return this.$store.getters['network/globalNetworkSettings'][0]
104          .useDomainNameEnabled;
105      },
106      set(newValue) {
107        return newValue;
108      },
109    },
110    useDnsState: {
111      get() {
112        return this.$store.getters['network/globalNetworkSettings'][0]
113          .useDnsEnabled;
114      },
115      set(newValue) {
116        return newValue;
117      },
118    },
119    useNtpState: {
120      get() {
121        return this.$store.getters['network/globalNetworkSettings'][0]
122          .useNtpEnabled;
123      },
124      set(newValue) {
125        return newValue;
126      },
127    },
128  },
129  created() {
130    this.$store.dispatch('network/getEthernetData').finally(() => {
131      // Emit initial data fetch complete to parent component
132      this.$root.$emit('network-global-settings-complete');
133    });
134  },
135  methods: {
136    changeDomainNameState(state) {
137      this.$store
138        .dispatch('network/saveDomainNameState', state)
139        .then((success) => {
140          this.successToast(success);
141        })
142        .catch(({ message }) => this.errorToast(message));
143    },
144    changeDnsState(state) {
145      this.$store
146        .dispatch('network/saveDnsState', state)
147        .then((message) => this.successToast(message))
148        .catch(({ message }) => this.errorToast(message));
149    },
150    changeNtpState(state) {
151      this.$store
152        .dispatch('network/saveNtpState', state)
153        .then((message) => this.successToast(message))
154        .catch(({ message }) => this.errorToast(message));
155    },
156    initSettingsModal() {
157      this.$bvModal.show('modal-hostname');
158    },
159  },
160};
161</script>
162