adjust the sequence of alarm group and add validate (#15382) (#15384)

dolphinscheduler-ui/src/locales/en_US/project.ts

@@ -129,6 +129,7 @@ export default {
     success_send: 'Success',
     failure_send: 'Failure',
     all_send: 'All',
+    warning_group_tip: 'Please select alarm group',
     whether_complement_data: 'Whether it is a complement process?',
     schedule_date: 'Schedule date',
     select_date: 'Select Date',

dolphinscheduler-ui/src/locales/zh_CN/project.ts

@@ -129,6 +129,7 @@ export default {
     success_send: '成功发',
     failure_send: '失败发',
     all_send: '成功或失败都发',
+    warning_group_tip: '请选择告警组',
     whether_complement_data: '是否是补数',
     schedule_date: '调度日期',
     select_date: '日期选择',

dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx

@@ -293,6 +293,21 @@ export default defineComponent({
               v-model:value={this.startForm.warningType}
             />
           </NFormItem>
+          {this.startForm.warningType !== 'NONE' && (
+            <NFormItem
+              label={t('project.workflow.alarm_group')}
+              path='warningGroupId'
+              required
+            >
+              <NSelect
+                options={this.alertGroups}
+                placeholder={t('project.workflow.please_choose')}
+                v-model:value={this.startForm.warningGroupId}
+                clearable
+                filterable
+              />
+            </NFormItem>
+          )}
           <NFormItem
             label={t('project.workflow.workflow_priority')}
             path='processInstancePriority'
@@ -338,20 +353,6 @@ export default defineComponent({
               filterable
             />
           </NFormItem>
-          {this.startForm.warningType !== 'NONE' && (
-            <NFormItem
-              label={t('project.workflow.alarm_group')}
-              path='warningGroupId'
-            >
-              <NSelect
-                options={this.alertGroups}
-                placeholder={t('project.workflow.please_choose')}
-                v-model:value={this.startForm.warningGroupId}
-                clearable
-                filterable
-              />
-            </NFormItem>
-          )}
           <NFormItem
             label={t('project.workflow.complement_data')}
             path='complement_data'

dolphinscheduler-ui/src/views/projects/workflow/definition/components/timing-modal.tsx

@@ -332,7 +332,7 @@ export default defineComponent({
         onConfirm={this.handleTiming}
         confirmLoading={this.saving}
       >
-        <NForm ref='timingFormRef'>
+        <NForm ref='timingFormRef' rules={this.rules}>
           <NFormItem
             label={t('project.workflow.start_and_stop_time')}
             path='startEndTime'
@@ -440,6 +440,21 @@ export default defineComponent({
               v-model:value={this.timingForm.warningType}
             />
           </NFormItem>
+          {this.timingForm.warningType !== 'NONE' && (
+            <NFormItem
+              label={t('project.workflow.alarm_group')}
+              path='warningGroupId'
+              required
+            >
+              <NSelect
+                options={this.alertGroups}
+                placeholder={t('project.workflow.please_choose')}
+                v-model:value={this.timingForm.warningGroupId}
+                clearable
+                filterable
+              />
+            </NFormItem>
+          )}
           <NFormItem
             label={t('project.workflow.workflow_priority')}
             path='processInstancePriority'
@@ -482,20 +497,6 @@ export default defineComponent({
               filterable
             />
           </NFormItem>
-          {this.timingForm.warningType !== 'NONE' && (
-            <NFormItem
-              label={t('project.workflow.alarm_group')}
-              path='warningGroupId'
-            >
-              <NSelect
-                options={this.alertGroups}
-                placeholder={t('project.workflow.please_choose')}
-                v-model:value={this.timingForm.warningGroupId}
-                clearable
-                filterable
-              />
-            </NFormItem>
-          )}
         </NForm>
       </Modal>
     )

dolphinscheduler-ui/src/views/projects/workflow/definition/components/use-form.ts

@@ -71,7 +71,7 @@ export const useForm = () => {
       testFlag: 0,
       version: null,
       allLevelDependent: 'false',
-      executionOrder: 'DESC_ORDER',
+      executionOrder: 'DESC_ORDER'
     },
     saving: false,
     rules: {
@@ -91,6 +91,17 @@ export const useForm = () => {
             return new Error(t('project.workflow.schedule_date_limit'))
           }
         }
+      },
+      warningGroupId: {
+        trigger: ['blur'],
+        validator() {
+          if (
+            startState.startForm.warningType !== 'NONE' &&
+            !startState.startForm.warningGroupId
+          ) {
+            return new Error(t('project.workflow.warning_group_tip'))
+          }
+        }
       }
     }
   })
@@ -112,7 +123,20 @@ export const useForm = () => {
       tenantCode: 'default',
       environmentCode: null as null | string
     },
-    saving: false
+    saving: false,
+    rules: {
+      warningGroupId: {
+        trigger: ['blur'],
+        validator() {
+          if (
+            timingState.timingForm.warningType !== 'NONE' &&
+            !timingState.timingForm.warningGroupId
+          ) {
+            return new Error(t('project.workflow.warning_group_tip'))
+          }
+        }
+      }
+    }
   })
 
   const copyState = reactive({