diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index 61dcb70bd4..924dea628f 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -3125,6 +3125,7 @@ monitoring: editYaml: Edit AlertmanagerConfig detail: Receiver in AlertmanagerConfig disabledReceiverButton: The receiver form is available after the AlertmanagerConfig is created + error: An error occurred saving the AlertmanagerConfig email: username: Auth Username password: Secret with Auth Password diff --git a/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue b/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue index 0ff6d82b73..f09d2922d4 100644 --- a/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue +++ b/shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue @@ -12,6 +12,7 @@ import CreateEditView from '@shell/mixins/create-edit-view'; import jsyaml from 'js-yaml'; import ButtonDropdown from '@shell/components/ButtonDropdown'; import { _CREATE, _VIEW } from '@shell/config/query-params'; +import FormValidation from '@shell/mixins/form-validation'; export const RECEIVERS_TYPES = [ { @@ -100,7 +101,7 @@ export default { }, }, - mixins: [CreateEditView], + mixins: [CreateEditView, FormValidation], data(props) { const currentReceiver = {}; @@ -144,14 +145,18 @@ export default { } return { - create: _CREATE, + create: _CREATE, EDITOR_MODES, expectedFields, - fileFound: false, - receiverTypes: RECEIVERS_TYPES, + fileFound: false, + receiverTypes: RECEIVERS_TYPES, suffixYaml, - view: _VIEW, - yamlError: '', + view: _VIEW, + yamlError: '', + fvFormRuleSets: [ + { path: 'name', rules: ['required'] } + ], + fvReportedValidationPaths: ['value'] }; }, @@ -235,6 +240,14 @@ export default { createAddOptions(receiverType) { return receiverType.addOptions.map(); }, + + setError(err) { + if (!err) { + this.errors = []; + } else { + this.errors = [err]; + } + } } }; @@ -249,8 +262,9 @@ export default { :can-yaml="true" :errors="errors" :cancel-event="true" + :validation-passed="fvFormIsValid" @error="e=>errors = e" - @finish="saveOverride()" + @finish="saveOverride" @cancel="redirectAfterCancel" >
@@ -259,7 +273,9 @@ export default { v-model="value.name" :is-disabled="receiverNameDisabled" :label="t('generic.name')" + :required="true" :mode="mode" + :rules="fvGetAndReportPathRules('name')" />
diff --git a/shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue b/shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue index 65a42206ea..e70c548a77 100644 --- a/shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue +++ b/shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue @@ -156,7 +156,7 @@ export default { // being saved. Therefore we take the save from the // AlertmanagerConfig resource and pass it into the // receiver config form. - saveOverride(buttonDone) { + async saveOverride(buttonDone) { if (this.alertmanagerConfigResource.yamlError) { this.alertmanagerConfigResource.errors = this.alertmanagerConfigResource.errors || []; this.alertmanagerConfigResource.errors.push(this.alertmanagerConfigResource.yamlError); @@ -166,8 +166,18 @@ export default { return; } - this.alertmanagerConfigResource.save(...arguments); - this.redirectToAlertmanagerConfigDetail(); + try { + await this.alertmanagerConfigResource.save(...arguments); + + buttonDone(true); + + this.redirectToAlertmanagerConfigDetail(); + } catch (e) { + const msg = e?.message ? e.message : this.t('monitoring.alertmanagerConfig.error'); + + this.$refs.config.setError(msg); + buttonDone(false); + } }, handleButtonGroupClick(event) { if (event === this.yaml) { @@ -271,6 +281,7 @@ export default { />