diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2021-12-03 23:29:26 +0300 |
---|---|---|
committer | Dixsie Wolmers <dixsiew@gmail.com> | 2021-12-03 23:45:37 +0300 |
commit | 12dc20c3701fe58b7d827ed44d65ac67cee8a4a6 (patch) | |
tree | 8d7c12d8b33959b30688f80d7f94ae06dc66b134 | |
parent | b34349d4139230fb4ca99bf89a6b0e1f707e58e2 (diff) | |
download | webui-vue-12dc20c3701fe58b7d827ed44d65ac67cee8a4a6.tar.xz |
Network settings: Edit hostname and MAC address
Adds modals to edit hostname and mac address per interface.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I45d265c198afd1d9de9bb519a15a74e724f50f55
-rw-r--r-- | src/locales/en-US.json | 5 | ||||
-rw-r--r-- | src/store/modules/Settings/NetworkStore.js | 23 | ||||
-rw-r--r-- | src/views/Settings/Network/ModalHostname.vue | 110 | ||||
-rw-r--r-- | src/views/Settings/Network/ModalMacAddress.vue | 109 | ||||
-rw-r--r-- | src/views/Settings/Network/Network.vue | 34 | ||||
-rw-r--r-- | src/views/Settings/Network/NetworkGlobalSettings.vue | 13 | ||||
-rw-r--r-- | src/views/Settings/Network/NetworkInterfaceSettings.vue | 22 |
7 files changed, 305 insertions, 11 deletions
diff --git a/src/locales/en-US.json b/src/locales/en-US.json index acf01192..132c750d 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -640,6 +640,7 @@ "ipv6": "IPv6", "linkStatus": "Link status", "macAddress": "MAC address", + "network": "network", "networkSettings": "Network settings", "ntp": "NTP server", "pageDescription": "Configure BMC network settings", @@ -649,8 +650,10 @@ "speed": "Speed (mbps)", "staticDns": "Static DNS", "modal": { - "ipAddress": "IP address", + "editHostnameTitle": "Edit hostname", + "editMacAddressTitle": "Edit MAC address", "gateway": "Gateway", + "ipAddress": "IP address", "staticDns": "Static DNS", "subnetMask": "Subnet mask" }, diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js index 176fcd74..54fb3e05 100644 --- a/src/store/modules/Settings/NetworkStore.js +++ b/src/store/modules/Settings/NetworkStore.js @@ -33,6 +33,7 @@ const NetworkStore = { IPv4Addresses, IPv4StaticAddresses, LinkStatus, + MACAddress, } = data; return { defaultGateway: IPv4StaticAddresses[0]?.Gateway, //First static gateway is the default gateway @@ -40,6 +41,7 @@ const NetworkStore = { (ipv4) => ipv4.AddressOrigin === 'DHCP' ), hostname: HostName, + macAddress: MACAddress, linkStatus: LinkStatus, staticAddress: IPv4StaticAddresses[0]?.Address, // Display first static address on overview page useDnsEnabled: DHCPv4.UseDNSServers, @@ -231,6 +233,27 @@ const NetworkStore = { ); }); }, + async saveSettings({ state, dispatch }, interfaceSettingsForm) { + return api + .patch( + `/redfish/v1/Managers/bmc/EthernetInterfaces/${state.selectedInterfaceId}`, + interfaceSettingsForm + ) + .then(dispatch('getEthernetData')) + .then(() => { + return i18n.t('pageNetwork.toast.successSaveNetworkSettings', { + setting: i18n.t('pageNetwork.network'), + }); + }) + .catch((error) => { + console.log(error); + throw new Error( + i18n.t('pageNetwork.toast.errorSaveNetworkSettings', { + setting: i18n.t('pageNetwork.network'), + }) + ); + }); + }, async saveDnsAddress({ dispatch, state }, dnsForm) { const newAddress = dnsForm; const originalAddresses = diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue new file mode 100644 index 00000000..f3221ec7 --- /dev/null +++ b/src/views/Settings/Network/ModalHostname.vue @@ -0,0 +1,110 @@ +<template> + <b-modal + id="modal-hostname" + ref="modal" + :title="$t('pageNetwork.modal.editHostnameTitle')" + @hidden="resetForm" + > + <b-form id="hostname-settings" @submit.prevent="handleSubmit"> + <b-row> + <b-col sm="6"> + <b-form-group + :label="$t('pageNetwork.hostname')" + label-for="hostname" + > + <b-form-input + id="hostname" + v-model="form.hostname" + type="text" + :state="getValidationState($v.form.hostname)" + @input="$v.form.hostname.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.hostname.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.hostname.validateHostname"> + {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + </b-form> + <template #modal-footer="{ cancel }"> + <b-button variant="secondary" @click="cancel()"> + {{ $t('global.action.cancel') }} + </b-button> + <b-button + form="hostname-settings" + type="submit" + variant="primary" + @click="onOk" + > + {{ $t('global.action.add') }} + </b-button> + </template> + </b-modal> +</template> + +<script> +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import { required, helpers } from 'vuelidate/lib/validators'; + +const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/); + +export default { + mixins: [VuelidateMixin], + props: { + hostname: { + type: String, + default: '', + }, + }, + data() { + return { + form: { + hostname: '', + }, + }; + }, + watch: { + hostname() { + this.form.hostname = this.hostname; + }, + }, + validations() { + return { + form: { + hostname: { + required, + validateHostname, + }, + }, + }; + }, + methods: { + handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.$emit('ok', { HostName: this.form.hostname }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.form.hostname = this.hostname; + this.$v.$reset(); + this.$emit('hidden'); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + }, + }, +}; +</script> diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue new file mode 100644 index 00000000..d563f4ce --- /dev/null +++ b/src/views/Settings/Network/ModalMacAddress.vue @@ -0,0 +1,109 @@ +<template> + <b-modal + id="modal-mac-address" + ref="modal" + :title="$t('pageNetwork.modal.editMacAddressTitle')" + @hidden="resetForm" + > + <b-form id="mac-settings" @submit.prevent="handleSubmit"> + <b-row> + <b-col sm="6"> + <b-form-group + :label="$t('pageNetwork.macAddress')" + label-for="macAddress" + > + <b-form-input + id="mac-address" + v-model.trim="form.macAddress" + data-test-id="network-input-macAddress" + type="text" + :state="getValidationState($v.form.macAddress)" + @change="$v.form.macAddress.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <div v-if="!$v.form.macAddress.required"> + {{ $t('global.form.fieldRequired') }} + </div> + <div v-if="!$v.form.macAddress.macAddress"> + {{ $t('global.form.invalidFormat') }} + </div> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + </b-form> + <template #modal-footer="{ cancel }"> + <b-button variant="secondary" @click="cancel()"> + {{ $t('global.action.cancel') }} + </b-button> + <b-button + form="mac-settings" + type="submit" + variant="primary" + @click="onOk" + > + {{ $t('global.action.add') }} + </b-button> + </template> + </b-modal> +</template> + +<script> +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import { macAddress, required } from 'vuelidate/lib/validators'; + +export default { + mixins: [VuelidateMixin], + props: { + macAddress: { + type: String, + default: '', + }, + }, + data() { + return { + form: { + macAddress: '', + }, + }; + }, + watch: { + macAddress() { + this.form.macAddress = this.macAddress; + }, + }, + validations() { + return { + form: { + macAddress: { + required, + macAddress: macAddress(), + }, + }, + }; + }, + methods: { + handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.$emit('ok', { MACAddress: this.form.macAddress }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.form.macAddress = this.macAddress; + this.$v.$reset(); + this.$emit('hidden'); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + }, + }, +}; +</script> diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue index 729a7a3c..2abbcd7a 100644 --- a/src/views/Settings/Network/Network.vue +++ b/src/views/Settings/Network/Network.vue @@ -4,7 +4,7 @@ <!-- Global settings for all interfaces --> <network-global-settings /> <!-- Interface tabs --> - <page-section v-if="ethernetData"> + <page-section v-show="ethernetData"> <b-row> <b-col> <b-card no-body> @@ -34,6 +34,8 @@ <!-- Modals --> <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" /> <modal-dns @ok="saveDnsAddress" /> + <modal-hostname :hostname="currentHostname" @ok="saveSettings" /> + <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" /> </b-container> </template> @@ -41,6 +43,8 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; +import ModalMacAddress from './ModalMacAddress.vue'; +import ModalHostname from './ModalHostname.vue'; import ModalIpv4 from './ModalIpv4.vue'; import ModalDns from './ModalDns.vue'; import NetworkGlobalSettings from './NetworkGlobalSettings.vue'; @@ -54,6 +58,8 @@ import { mapState } from 'vuex'; export default { name: 'Network', components: { + ModalHostname, + ModalMacAddress, ModalIpv4, ModalDns, NetworkGlobalSettings, @@ -70,6 +76,8 @@ export default { }, data() { return { + currentHostname: '', + currentMacAddress: '', defaultGateway: '', loading, tabIndex: 0, @@ -80,7 +88,7 @@ export default { }, watch: { ethernetData() { - this.getGateway(); + this.getModalInfo(); }, }, created() { @@ -108,10 +116,18 @@ export default { ]).finally(() => this.endLoader()); }, methods: { - getGateway() { + getModalInfo() { this.defaultGateway = this.$store.getters[ 'network/globalNetworkSettings' ][this.tabIndex].defaultGateway; + + this.currentHostname = this.$store.getters[ + 'network/globalNetworkSettings' + ][this.tabIndex].hostname; + + this.currentMacAddress = this.$store.getters[ + 'network/globalNetworkSettings' + ][this.tabIndex].macAddress; }, getTabIndex(selectedIndex) { this.tabIndex = selectedIndex; @@ -120,9 +136,7 @@ export default { 'network/setSelectedTabId', this.ethernetData[selectedIndex].Id ); - this.defaultGateway = this.$store.getters[ - 'network/globalNetworkSettings' - ][this.tabIndex].defaultGateway; + this.getModalInfo(); }, saveIpv4Address(modalFormData) { this.startLoader(); @@ -140,6 +154,14 @@ export default { .catch(({ message }) => this.errorToast(message)) .finally(() => this.endLoader()); }, + saveSettings(modalFormData) { + this.startLoader(); + this.$store + .dispatch('network/saveSettings', modalFormData) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, }, }; </script> diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue index fc82c86d..30287673 100644 --- a/src/views/Settings/Network/NetworkGlobalSettings.vue +++ b/src/views/Settings/Network/NetworkGlobalSettings.vue @@ -6,7 +6,12 @@ <b-row> <b-col md="3"> <dl> - <dt>{{ $t('pageNetwork.hostname') }}</dt> + <dt> + {{ $t('pageNetwork.hostname') }} + <b-button variant="link" class="p-1" @click="initSettingsModal()"> + <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" /> + </b-button> + </dt> <dd>{{ dataFormatter(firstInterface.hostname) }}</dd> </dl> </b-col> @@ -73,13 +78,14 @@ <script> import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import IconEdit from '@carbon/icons-vue/es/edit/16'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; import PageSection from '@/components/Global/PageSection'; import { mapState } from 'vuex'; export default { name: 'GlobalNetworkSettings', - components: { PageSection }, + components: { IconEdit, PageSection }, mixins: [BVToastMixin, DataFormatterMixin], data() { @@ -147,6 +153,9 @@ export default { .then((message) => this.successToast(message)) .catch(({ message }) => this.errorToast(message)); }, + initSettingsModal() { + this.$bvModal.show('modal-hostname'); + }, }, }; </script> diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue index bdcba4d8..023d29bc 100644 --- a/src/views/Settings/Network/NetworkInterfaceSettings.vue +++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue @@ -24,7 +24,9 @@ <b-row> <b-col md="3"> <dl> - <dt>{{ $t('pageNetwork.fqdn') }}</dt> + <dt> + {{ $t('pageNetwork.fqdn') }} + </dt> <dd> {{ dataFormatter(fqdn) }} </dd> @@ -32,7 +34,18 @@ </b-col> <b-col md="3"> <dl class="text-nowrap"> - <dt>{{ $t('pageNetwork.macAddress') }}</dt> + <dt> + {{ $t('pageNetwork.macAddress') }} + <b-button + variant="link" + class="p-1" + @click="initMacAddressModal()" + > + <icon-edit + :title="$t('pageNetwork.modal.editMacAddressTitle')" + /> + </b-button> + </dt> <dd> {{ dataFormatter(macAddress) }} </dd> @@ -45,6 +58,7 @@ <script> import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import IconEdit from '@carbon/icons-vue/es/edit/16'; import PageSection from '@/components/Global/PageSection'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; import { mapState } from 'vuex'; @@ -52,6 +66,7 @@ import { mapState } from 'vuex'; export default { name: 'Ipv4Table', components: { + IconEdit, PageSection, }, mixins: [BVToastMixin, DataFormatterMixin], @@ -94,6 +109,9 @@ export default { this.fqdn = this.ethernetData[this.selectedInterface].FQDN; this.macAddress = this.ethernetData[this.selectedInterface].MACAddress; }, + initMacAddressModal() { + this.$bvModal.show('modal-mac-address'); + }, }, }; </script> |