From 7022b181f4e02b253b3fac3a51f2873808f4aefd Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Wed, 23 Mar 2022 12:40:42 +0800 Subject: [PATCH] [Fix][UI Next][V1.0.0-Alpha] Fix the send email and the log not shown (#9112) --- .../src/locales/modules/en_US.ts | 10 +- .../src/locales/modules/zh_CN.ts | 10 +- .../src/utils/column-width-config.ts | 2 +- .../components/node/fields/use-datasource.ts | 16 +- .../components/node/fields/use-sql-type.ts | 157 ++++++++++++++---- .../task/components/node/format-data.ts | 5 +- .../task/components/node/index.module.scss | 3 + .../task/components/node/tasks/use-sql.ts | 18 +- .../projects/task/components/node/types.ts | 4 + .../projects/task/definition/use-table.ts | 2 +- 10 files changed, 173 insertions(+), 54 deletions(-) diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 9e2d9c2c42..2cdc8706a0 100644 --- 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' } } diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index 158a4ecf93..180a8b15e2 100644 --- 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: '请输入一个正整数' } } diff --git a/dolphinscheduler-ui-next/src/utils/column-width-config.ts b/dolphinscheduler-ui-next/src/utils/column-width-config.ts index a4ccda0132..30798e932f 100644 --- 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 diff --git 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 index 0c9dfed269..950981cf61 100644 --- 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 } } diff --git 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 index e5740487bf..225f6449be 100644 --- 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 { - type: 'select', - field: 'sqlType', - span: 12, - name: t('project.node.sql_type'), - props: { - loading: loading + return [ + { + type: 'select', + field: 'sqlType', + 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') }, - options: options, - validate: { - trigger: ['input', 'blur'], - required: true + { + type: 'select', + field: 'displayRows', + 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 + } +] diff --git 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 index e06617fe98..ce1c23c4f3 100644 --- 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 } diff --git 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 index 8fc6ada599..6d9f1c9432 100644 --- 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; +} diff --git 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 index 639ae73c82..2e8ccc7776 100644 --- 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[], diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts index f8bdf0ae74..d6af9bba4b 100644 --- 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 diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts index 88b1b86f23..23fb500b83 100644 --- 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'),