[Fix][UI Next][V1.0.0-Alpha] Fix the send email and the log not shown (#9112)

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -906,7 +906,15 @@ const project = {
     fix_value: 'FixValue',
     required: 'required',
     emr_flow_define_json: 'jobFlowDefineJson',
-    emr_flow_define_json_tips: 'Please enter the definition of the job flow.'
+    emr_flow_define_json_tips: 'Please enter the definition of the job flow.',
+    send_email: 'Send Email',
+    log_display: 'Log display',
+    rows_of_result: 'rows of result',
+    title: 'Title',
+    title_tips: 'Please enter the title of email',
+    alarm_group: 'Alarm group',
+    alarm_group_tips: 'Alarm group required',
+    integer_tips: 'Please enter a positive integer'
   }
 }
 

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -896,7 +896,15 @@ const project = {
     fix_value: '固定值',
     required: '必填',
     emr_flow_define_json: 'jobFlowDefineJson',
-    emr_flow_define_json_tips: '请输入工作流定义'
+    emr_flow_define_json_tips: '请输入工作流定义',
+    send_email: '发送邮件',
+    log_display: '日志显示',
+    rows_of_result: '行查询结果',
+    title: '主题',
+    title_tips: '请输入邮件主题',
+    alarm_group: '告警组',
+    alarm_group_tips: '告警组必填',
+    integer_tips: '请输入一个正整数'
   }
 }
 

dolphinscheduler-ui-next/src/utils/column-width-config.ts

@@ -38,7 +38,7 @@ export const COLUMN_WIDTH_CONFIG = {
     width: 120
   },
   type: {
-    width: 120
+    width: 130
   },
   version: {
     width: 80

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-datasource.ts

@@ -28,7 +28,7 @@ export function useDatasource(
 ): IJsonItem {
   const { t } = useI18n()
 
-  const options = ref([] as { label: string; value: string }[])
+  const options = ref([] as { label: string; value: number }[])
   const loading = ref(false)
   const defaultValue = ref(null)
 
@@ -45,11 +45,12 @@ export function useDatasource(
     defaultValue.value = null
     options.value = []
 
-    res.map((item: any) => {
+    options.value = res.map((item: any) => ({
-      options.value.push({ label: item.name, value: String(item.id) })
+      label: item.name,
-    })
+      value: item.id
-    if (options.value && model.datasource) {
+    }))
-      const item = find(options.value, { value: String(model.datasource) })
+    if (options.value.length && model.datasource) {
+      const item = find(options.value, { value: model.datasource })
       if (!item) {
         model.datasource = null
       }
@@ -70,7 +71,7 @@ export function useDatasource(
   })
   return {
     type: 'select',
-    field: field ? field : 'datasource',
+    field: field || 'datasource',
     span: 12,
     name: t('project.node.datasource_instances'),
     props: {
@@ -79,6 +80,7 @@ export function useDatasource(
     options: options,
     validate: {
       trigger: ['input', 'blur'],
+      type: 'number',
       required: true
     }
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-sql-type.ts

@@ -15,54 +15,149 @@
  * limitations under the License.
  */
 
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { listAlertGroupById } from '@/service/modules/alert-group'
+import styles from '../index.module.scss'
 import type { IJsonItem } from '../types'
 
-export function useSqlType(unusedModel: { [field: string]: any }): IJsonItem {
+export function useSqlType(model: { [field: string]: any }): IJsonItem[] {
   const { t } = useI18n()
-
+  const querySpan = computed(() => (model.sqlType === '0' ? 6 : 0))
-  const options = ref([] as { label: string; value: string }[])
+  const emailSpan = computed(() => (model.sendEmail ? 24 : 0))
-  const loading = ref(false)
+  const groups = ref([])
-
+  const groupsLoading = ref(false)
-  const sqlTypes = [
+  const SQL_TYPES = [
     {
-      id: '0',
+      value: '0',
-      code: t('project.node.sql_type_query')
+      label: t('project.node.sql_type_query')
     },
     {
-      id: '1',
+      value: '1',
-      code: t('project.node.sql_type_non_query')
+      label: t('project.node.sql_type_non_query')
     }
   ]
 
-  const getSqlTypes = async () => {
+  const getGroups = async () => {
-    if (loading.value) return
+    if (groupsLoading.value) return
-    loading.value = true
+    groupsLoading.value = true
-    options.value = sqlTypes.map((item) => ({
+    const res = await listAlertGroupById()
-      label: item.code,
+    groups.value = res.map((item: { id: number; groupName: string }) => ({
+      label: item.groupName,
       value: item.id
     }))
-    loading.value = false
+    groupsLoading.value = false
   }
 
   onMounted(() => {
-    getSqlTypes()
+    getGroups()
   })
 
-  return {
+  return [
-    type: 'select',
+    {
-    field: 'sqlType',
+      type: 'select',
-    span: 12,
+      field: 'sqlType',
-    name: t('project.node.sql_type'),
+      span: 6,
-    props: {
+      name: t('project.node.sql_type'),
-      loading: loading
+      options: SQL_TYPES,
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true
+      }
+    },
+    {
+      type: 'switch',
+      field: 'sendEmail',
+      span: querySpan,
+      name: t('project.node.send_email')
     },
-    options: options,
+    {
-    validate: {
+      type: 'select',
-      trigger: ['input', 'blur'],
+      field: 'displayRows',
-      required: true
+      span: querySpan,
+      name: t('project.node.log_display'),
+      options: DISPLAY_ROWS,
+      props: {
+        filterable: true,
+        tag: true
+      },
+      validate: {
+        trigger: ['input', 'blur'],
+        validator(unuse, value) {
+          if (!/^\+?[1-9][0-9]*$/.test(value)) {
+            return new Error(t('project.node.integer_tips'))
+          }
+        }
+      }
     },
-    value: '0'
+    {
-  }
+      type: 'custom',
+      field: 'displayRowsTips',
+      span: querySpan,
+      widget: h(
+        'div',
+        { class: styles['display-rows-tips'] },
+        t('project.node.rows_of_result')
+      )
+    },
+    {
+      type: 'input',
+      field: 'title',
+      name: t('project.node.title'),
+      props: {
+        placeholder: t('project.node.title_tips')
+      },
+      span: emailSpan,
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true,
+        validator(unuse, value) {
+          if (model.sendEmail && !value)
+            return new Error(t('project.node.title_tips'))
+        }
+      }
+    },
+    {
+      type: 'select',
+      field: 'groupId',
+      name: t('project.node.alarm_group'),
+      options: groups,
+      span: emailSpan,
+      props: {
+        loading: groupsLoading,
+        placeholder: t('project.node.alarm_group_tips')
+      },
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true,
+        validator(unuse, value) {
+          if (model.sendEmail && !value)
+            return new Error(t('project.node.alarm_group_tips'))
+        }
+      }
+    }
+  ]
 }
+
+const DISPLAY_ROWS = [
+  {
+    label: '1',
+    value: 1
+  },
+  {
+    label: '10',
+    value: 10
+  },
+  {
+    label: '25',
+    value: 25
+  },
+  {
+    label: '50',
+    value: 50
+  },
+  {
+    label: '100',
+    value: 100
+  }
+]

dolphinscheduler-ui-next/src/views/projects/task/components/node/format-data.ts

@@ -179,6 +179,10 @@ export function formatParams(data: INodeData): {
     taskParams.sqlType = data.sqlType
     taskParams.preStatements = data.preStatements
     taskParams.postStatements = data.postStatements
+    taskParams.sendEmail = data.sendEmail
+    taskParams.displayRows = data.displayRows
+    taskParams.title = data.title
+    taskParams.groupId = data.groupId
   }
 
   if (data.taskType === 'PROCEDURE') {
@@ -477,7 +481,6 @@ export function formatModel(data: ITaskData) {
   if (data.taskParams?.conditionResult?.failedNode?.length) {
     params.failedBranch = data.taskParams?.conditionResult.failedNode[0]
   }
-
   return params
 }
 

dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss

@@ -51,3 +51,6 @@
     left: 20px;
   }
 }
+.display-rows-tips {
+  margin-top: 32px;
+}

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sql.ts

@@ -44,16 +44,12 @@ export function useSql({
     workerGroup: 'default',
     delayTime: 0,
     timeout: 30,
-    type: data?.taskParams?.type ? data?.taskParams?.type : 'MYSQL',
+    type: 'MYSQL',
-    datasource: data?.taskParams?.datasource,
+    displayRows: 10,
-    sql: data?.taskParams?.sql,
+    sql: '',
-    sqlType: data?.taskParams?.sqlType,
+    sqlType: '0',
-    preStatements: data?.taskParams?.preStatements
+    preStatements: [],
-      ? data?.taskParams?.preStatements
+    postStatements: []
-      : [],
-    postStatements: data?.taskParams?.postStatements
-      ? data?.taskParams?.postStatements
-      : []
   } as INodeData)
 
   let extra: IJsonItem[] = []
@@ -85,7 +81,7 @@ export function useSql({
       ...Fields.useTimeoutAlarm(model),
       Fields.useDatasourceType(model),
       Fields.useDatasource(model),
-      Fields.useSqlType(model),
+      ...Fields.useSqlType(model),
       ...Fields.useSql(model),
       Fields.usePreTasks()
     ] as IJsonItem[],

dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts

@@ -237,6 +237,10 @@ interface ITaskParams {
   datasource?: string
   sql?: string
   sqlType?: string
+  sendEmail?: boolean
+  displayRows?: number
+  title?: string
+  groupId?: string
   preStatements?: string[]
   postStatements?: string[]
   method?: string

dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@@ -87,7 +87,7 @@ export function useTable(onEdit: Function) {
             )
           }
         },
-        ...COLUMN_WIDTH_CONFIG['state']
+        width: 130
       },
       {
         title: t('project.task.task_type'),