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