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

3 years ago · 7022b181f4
10 changed files with 173 additions and 54 deletions
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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'
  }
 }

--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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: '请输入一个正整数'
  }
 }

--- a/dolphinscheduler-ui-next/src/utils/column-width-config.ts
+++ b/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
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-datasource.ts
+++ b/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.push({ label: item.name, value: String(item.id) })
-    })
-    if (options.value && model.datasource) {
-      const item = find(options.value, { value: String(model.datasource) })
+    options.value = res.map((item: any) => ({
+      label: item.name,
+      value: item.id
+    }))
+    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
    }
  }
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-sql-type.ts
+++ b/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 options = ref([] as { label: string; value: string }[])
-  const loading = ref(false)
-
-  const sqlTypes = [
+  const querySpan = computed(() => (model.sqlType === '0' ? 6 : 0))
+  const emailSpan = computed(() => (model.sendEmail ? 24 : 0))
+  const groups = ref([])
+  const groupsLoading = ref(false)
+  const SQL_TYPES = [
    {
-      id: '0',
-      code: t('project.node.sql_type_query')
+      value: '0',
+      label: t('project.node.sql_type_query')
    },
    {
-      id: '1',
-      code: t('project.node.sql_type_non_query')
+      value: '1',
+      label: t('project.node.sql_type_non_query')
    }
  ]

-  const getSqlTypes = async () => {
-    if (loading.value) return
-    loading.value = true
-    options.value = sqlTypes.map((item) => ({
-      label: item.code,
+  const getGroups = async () => {
+    if (groupsLoading.value) return
+    groupsLoading.value = true
+    const res = await listAlertGroupById()
+    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',
-    span: 12,
+      span: 6,
      name: t('project.node.sql_type'),
+      options: SQL_TYPES,
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true
+      }
+    },
+    {
+      type: 'switch',
+      field: 'sendEmail',
+      span: querySpan,
+      name: t('project.node.send_email')
+    },
+    {
+      type: 'select',
+      field: 'displayRows',
+      span: querySpan,
+      name: t('project.node.log_display'),
+      options: DISPLAY_ROWS,
      props: {
-      loading: loading
+        filterable: true,
+        tag: true
      },
-    options: options,
      validate: {
        trigger: ['input', 'blur'],
-      required: true
+        validator(unuse, value) {
+          if (!/^\+?[1-9][0-9]*$/.test(value)) {
+            return new Error(t('project.node.integer_tips'))
+          }
+        }
+      }
+    },
+    {
+      type: 'custom',
+      field: 'displayRowsTips',
+      span: querySpan,
+      widget: h(
+        'div',
+        { class: styles['display-rows-tips'] },
+        t('project.node.rows_of_result')
+      )
    },
-    value: '0'
+    {
+      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
+  }
+]
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/format-data.ts
+++ b/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
 }

--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss
@ -51,3 +51,6 @@
    left: 20px;
  }
 }
+.display-rows-tips {
+  margin-top: 32px;
+}
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sql.ts
+++ b/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',
-    datasource: data?.taskParams?.datasource,
-    sql: data?.taskParams?.sql,
-    sqlType: data?.taskParams?.sqlType,
-    preStatements: data?.taskParams?.preStatements
-      ? data?.taskParams?.preStatements
-      : [],
-    postStatements: data?.taskParams?.postStatements
-      ? data?.taskParams?.postStatements
-      : []
+    type: 'MYSQL',
+    displayRows: 10,
+    sql: '',
+    sqlType: '0',
+    preStatements: [],
+    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[],
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts
+++ b/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
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
+++ b/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'),