From 7da84e4aa19bb664681c89e111db0a7d7c75ef2b Mon Sep 17 00:00:00 2001 From: calvin Date: Sat, 19 Feb 2022 10:56:34 +0800 Subject: [PATCH] [Feature][UI Next] Add the form of python task to the module of next ui. (#8438) * add the form of python task * developed the form of python task --- .../docs/e2e/data-source.md | 6 +- dolphinscheduler-ui-next/docs/e2e/login.md | 8 +- dolphinscheduler-ui-next/docs/e2e/navbar.md | 1 + dolphinscheduler-ui-next/docs/e2e/project.md | 22 ++++- dolphinscheduler-ui-next/docs/e2e/resource.md | 19 ++++- dolphinscheduler-ui-next/docs/e2e/security.md | 63 +++++++------- .../src/components/crontab/index.module.scss | 10 +-- .../components/node/fields/use-delay-time.ts | 4 +- .../components/node/fields/use-task-type.ts | 2 +- .../task/components/node/format-data.ts | 2 +- .../task/components/node/tasks/use-python.ts | 83 +++++++++++++++++++ .../task/components/node/tasks/use-shell.ts | 2 +- .../projects/task/components/node/use-task.ts | 9 ++ .../views/projects/task/definition/index.tsx | 1 + .../workflow/instance/index.module.scss | 2 +- .../security/worker-group-manage/index.tsx | 13 ++- 16 files changed, 195 insertions(+), 52 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-python.ts diff --git a/dolphinscheduler-ui-next/docs/e2e/data-source.md b/dolphinscheduler-ui-next/docs/e2e/data-source.md index f93098d012..adde2109f5 100644 --- a/dolphinscheduler-ui-next/docs/e2e/data-source.md +++ b/dolphinscheduler-ui-next/docs/e2e/data-source.md @@ -1,10 +1,10 @@ ### data source | check | class | -|--------------------|--------------------------------| +| ------------------ | ------------------------------ | | :white_check_mark: | data-source-items | -| | el-popconfirm | -| | el-button--primary | +| | el-popconfirm | +| | el-button--primary | | :white_check_mark: | options-datasource-type | | :white_check_mark: | btn-create-data-source | | :white_check_mark: | dialog-create-data-source | diff --git a/dolphinscheduler-ui-next/docs/e2e/login.md b/dolphinscheduler-ui-next/docs/e2e/login.md index fb1cc92110..7f3e5e1bb9 100644 --- a/dolphinscheduler-ui-next/docs/e2e/login.md +++ b/dolphinscheduler-ui-next/docs/e2e/login.md @@ -1,7 +1,7 @@ ### login -| check | class | -|--------------------|----------------| +| check | class | +| ------------------ | --------------- | | :white_check_mark: | input-user-name | -| :white_check_mark: | input-password | -| :white_check_mark: | btn-login | +| :white_check_mark: | input-password | +| :white_check_mark: | btn-login | diff --git a/dolphinscheduler-ui-next/docs/e2e/navbar.md b/dolphinscheduler-ui-next/docs/e2e/navbar.md index 0fdd33df1e..17bc69d462 100644 --- a/dolphinscheduler-ui-next/docs/e2e/navbar.md +++ b/dolphinscheduler-ui-next/docs/e2e/navbar.md @@ -1,6 +1,7 @@ ### navbar id: + - [ ] tabProject - [ ] tabSecurity - [ ] tabResource diff --git a/dolphinscheduler-ui-next/docs/e2e/project.md b/dolphinscheduler-ui-next/docs/e2e/project.md index 4cb9c9af40..582a832b6d 100644 --- a/dolphinscheduler-ui-next/docs/e2e/project.md +++ b/dolphinscheduler-ui-next/docs/e2e/project.md @@ -1,6 +1,7 @@ ### project class: + - [ ] items-project - [ ] el-popconfirm - [ ] el-button--primary @@ -8,6 +9,7 @@ class: - [ ] delete id: + - [ ] btnCreateProject - [ ] inputProjectName - [ ] btnSubmit @@ -15,6 +17,7 @@ id: #### detail class: + - [ ] tab-process-definition - [ ] tab-process-instance - [ ] tab-task-instance @@ -22,6 +25,7 @@ class: #### workflow save dialog class: + - [ ] input-param-key - [ ] input-param-val - [ ] option-tenants @@ -29,6 +33,7 @@ class: - [ ] add-dp id: + - [ ] inputName - [ ] btnSubmit - [ ] selectTenant @@ -36,11 +41,13 @@ id: #### workflow run dialog id: + - [ ] btnSubmit #### workflow instance tab class: + - [ ] items-workflow-instances - [ ] select-all - [ ] btn-delete-all @@ -54,22 +61,26 @@ class: #### workflow format dialog class: -- [ ] el-dialog__wrapper + +- [ ] el-dialog\_\_wrapper - [ ] el-button--primary #### workflow form class: + - [ ] graph-format - [ ] task-item-`type` - [ ] dag-container id: + - [ ] btnSave #### workflow definition tab class: + - [ ] select-all - [ ] btn-delete-all - [ ] el-popconfirm @@ -81,11 +92,13 @@ class: - [ ] btn-cancel-publish id: + - [ ] btnCreateProcess #### task instance tab class: + - [ ] items-task-instances - [ ] task-instance-state - [ ] task-instance-name @@ -93,18 +106,21 @@ class: #### switch task form class: + - [ ] switch-task - [ ] switch-else -- [ ] el-input__inner +- [ ] el-input\_\_inner - [ ] option-else-branches - [ ] option-if-branches id: + - [ ] btnAddIfBranch #### switch task if branch class: + - [ ] switch-task - [ ] switch-list - [ ] el-input @@ -112,6 +128,7 @@ class: #### task node form class: + - [ ] input-param-key - [ ] input-param-val - [ ] pre_tasks-model @@ -121,5 +138,6 @@ class: - [ ] option-pre-tasks id: + - [ ] inputNodeName - [ ] btnSubmit diff --git a/dolphinscheduler-ui-next/docs/e2e/resource.md b/dolphinscheduler-ui-next/docs/e2e/resource.md index 8a65841455..452a2a2b56 100644 --- a/dolphinscheduler-ui-next/docs/e2e/resource.md +++ b/dolphinscheduler-ui-next/docs/e2e/resource.md @@ -3,11 +3,13 @@ #### file manage class: + - [ ] items - [ ] el-popconfirm - [ ] el-button--primary id: + - [ ] btnCreateDirectory - [ ] btnCreateFile - [ ] btnUploadFile @@ -19,6 +21,7 @@ id: ##### create directory id: + - [ ] inputDirectoryName - [ ] inputDescription - [ ] btnSubmit @@ -27,6 +30,7 @@ id: ##### rename directory id: + - [ ] inputName - [ ] inputDescription - [ ] btnSubmit @@ -35,6 +39,7 @@ id: ##### create file id: + - [ ] inputFileName - [ ] btnSubmit - [ ] btnCancel @@ -42,6 +47,7 @@ id: ##### upload file id: + - [ ] btnUpload - [ ] btnSubmit - [ ] btnCancel @@ -49,11 +55,13 @@ id: #### function manage class: + - [ ] udf-function-items - [ ] el-popconfirm - [ ] el-button--primary id: + - [ ] btnCreateUdfFunction - [ ] btnRename - [ ] btnDelete @@ -61,9 +69,11 @@ id: ##### create unf function class: -- [ ] vue-treeselect__menu + +- [ ] vue-treeselect\_\_menu id: + - [ ] inputFunctionName - [ ] inputClassName - [ ] btnUdfResourceDropDown @@ -74,6 +84,7 @@ id: ##### rename udf function id: + - [ ] inputFunctionName - [ ] inputClassName - [ ] inputDescription @@ -83,6 +94,7 @@ id: #### resource class: + - [ ] tab-file-manage - [ ] tab-udf-resource-manage - [ ] tab-function-resource-manage @@ -90,11 +102,13 @@ class: #### udf manage class: + - [ ] udf-items - [ ] el-popconfirm - [ ] el-button--primary id: + - [ ] btnCreateDirectory - [ ] btnUploadUdf - [ ] btnDownload @@ -104,6 +118,7 @@ id: ##### rename directory id: + - [ ] inputName - [ ] inputDescription - [ ] btnSubmit @@ -112,6 +127,7 @@ id: ##### upload file id: + - [ ] btnUpload - [ ] btnSubmit - [ ] btnCancel @@ -119,6 +135,7 @@ id: ##### create directory id: + - [ ] inputDirectoryName - [ ] inputDescription - [ ] btnSubmit diff --git a/dolphinscheduler-ui-next/docs/e2e/security.md b/dolphinscheduler-ui-next/docs/e2e/security.md index b581ff970f..16e37cd813 100644 --- a/dolphinscheduler-ui-next/docs/e2e/security.md +++ b/dolphinscheduler-ui-next/docs/e2e/security.md @@ -1,6 +1,7 @@ ### security class: + - [ ] tab-tenant-manage - [ ] tab-user-manage - [ ] tab-worker-group-manage @@ -11,6 +12,7 @@ class: #### tenant manage class: + - [ ] items - [ ] el-popconfirm - [ ] el-button--primary @@ -19,6 +21,7 @@ class: - [ ] delete id: + - [ ] btnCreateTenant - [ ] inputTenantCode - [ ] selectQueue @@ -29,6 +32,7 @@ id: #### user manage class: + - [ ] items - [ ] el-popconfirm - [ ] el-button--primary @@ -37,6 +41,7 @@ class: - [ ] delete id: + - [ ] btnCreateUser - [ ] inputUserName - [ ] inputUserPassword @@ -51,40 +56,40 @@ id: #### worker group manage -| check | class | -|--------------------|--------------------------------| -| :white_check_mark: | items | -| | el-popconfirm | -| | el-button--primary | -| :white_check_mark: | name | -| :white_check_mark: | edit | -| :white_check_mark: | delete | -| :white_check_mark: | btn-create-worker-group | -| :white_check_mark: | input-worker-group-name | -| :white_check_mark: | select-worker-address | -| :white_check_mark: | btn-submit | -| :white_check_mark: | btn-cancel | +| check | class | +| ------------------ | ----------------------- | +| :white_check_mark: | items | +| | el-popconfirm | +| | el-button--primary | +| :white_check_mark: | name | +| :white_check_mark: | edit | +| :white_check_mark: | delete | +| :white_check_mark: | btn-create-worker-group | +| :white_check_mark: | input-worker-group-name | +| :white_check_mark: | select-worker-address | +| :white_check_mark: | btn-submit | +| :white_check_mark: | btn-cancel | #### queue manage -| check | class | -|--------------------|--------------------------------| -| :white_check_mark: | items | -| :white_check_mark: | queue-name | -| :white_check_mark: | edit | -| :white_check_mark: | btn-create-queue | -| :white_check_mark: | input-queue-name | -| :white_check_mark: | input-queue-value | -| :white_check_mark: | btn-submit | -| :white_check_mark: | btn-cancel | +| check | class | +| ------------------ | ----------------- | +| :white_check_mark: | items | +| :white_check_mark: | queue-name | +| :white_check_mark: | edit | +| :white_check_mark: | btn-create-queue | +| :white_check_mark: | input-queue-name | +| :white_check_mark: | input-queue-value | +| :white_check_mark: | btn-submit | +| :white_check_mark: | btn-cancel | #### environment manage | check | class | -|--------------------|--------------------------------| +| ------------------ | ------------------------------ | | :white_check_mark: | items | -| | el-popconfirm | -| | el-button--primary | +| | el-popconfirm | +| | el-button--primary | | :white_check_mark: | environment-name | | :white_check_mark: | edit | | :white_check_mark: | delete | @@ -99,10 +104,10 @@ id: #### token manage | check | class | -|--------------------|--------------------| +| ------------------ | ------------------ | | :white_check_mark: | items | -| | el-popconfirm | -| | el-button--primary | +| | el-popconfirm | +| | el-button--primary | | :white_check_mark: | username | | :white_check_mark: | token | | :white_check_mark: | input-username | diff --git a/dolphinscheduler-ui-next/src/components/crontab/index.module.scss b/dolphinscheduler-ui-next/src/components/crontab/index.module.scss index 8c3fb30c89..93440f2d24 100644 --- a/dolphinscheduler-ui-next/src/components/crontab/index.module.scss +++ b/dolphinscheduler-ui-next/src/components/crontab/index.module.scss @@ -15,9 +15,9 @@ * limitations under the License. */ - .crontab-list { - display: flex; - .crontab-list-item { +.crontab-list { + display: flex; + .crontab-list-item { display: flex; vertical-align: middle; align-items: center; @@ -25,5 +25,5 @@ > div { margin: 5px; } - } - } \ No newline at end of file + } +} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-delay-time.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-delay-time.ts index 7a304d614b..18af0397cd 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-delay-time.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-delay-time.ts @@ -18,7 +18,7 @@ import { useI18n } from 'vue-i18n' import type { IJsonItem } from '../types' -export function useDelayTime(): IJsonItem { +export function useDelayTime(model: { [field: string]: any }): IJsonItem { const { t } = useI18n() return { type: 'input-number', @@ -28,6 +28,6 @@ export function useDelayTime(): IJsonItem { slots: { suffix: () => t('project.node.minute') }, - value: 0 + value: model.delayExecutionTime ? model.delayExecutionTime : 0 } } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts index 9450550c76..026cd97924 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts @@ -43,6 +43,6 @@ export function useTaskType( required: true, message: t('project.node.task_type_tips') }, - value: 'SHELL' + value: model.taskType ? model.taskType : 'SHELL' } } 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 717a303069..892238c341 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 @@ -43,7 +43,7 @@ export function formatParams(data: INodeData): { 'processName' ]), code: data.code, - delayTime: data.delayTime ? '0' : String(data.delayTime), + delayTime: data.delayTime ? String(data.delayTime) : '0', environmentCode: data.environmentCode || -1, failRetryTimes: data.failRetryTimes ? String(data.failRetryTimes) : '0', failRetryInterval: data.failRetryTimes diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-python.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-python.ts new file mode 100644 index 0000000000..b747e375a4 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-python.ts @@ -0,0 +1,83 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { reactive } from 'vue' +import * as Fields from '../fields/index' +import type { IJsonItem, INodeData } from '../types' +import { ITaskData } from '../types' + +export function usePython({ + projectCode, + from = 0, + readonly, + data +}: { + projectCode: number + from?: number + readonly?: boolean + data?: ITaskData +}) { + const model = reactive({ + name: '', + taskType: 'PYTHON', + flag: 'YES', + description: '', + timeoutFlag: false, + localParams: [], + environmentCode: null, + failRetryInterval: 1, + failRetryTimes: 0, + workerGroup: 'default', + delayTime: 0, + timeout: 30, + rawScript: '' + } as INodeData) + + let extra: IJsonItem[] = [] + if (from === 1) { + extra = [ + Fields.useTaskType(model, readonly), + Fields.useProcessName({ + model, + projectCode, + isCreate: !data?.id, + from, + processName: data?.processName, + code: data?.code + }) + ] + } + + return { + json: [ + Fields.useName(), + ...extra, + Fields.useRunFlag(), + Fields.useDescription(), + Fields.useTaskPriority(), + Fields.useWorkerGroup(), + Fields.useEnvironmentName(model, !model.id), + ...Fields.useTaskGroup(model, projectCode), + ...Fields.useFailed(), + Fields.useDelayTime(model), + ...Fields.useTimeoutAlarm(model), + ...Fields.useShell(model), + Fields.usePreTasks(model) + ] as IJsonItem[], + model + } +} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-shell.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-shell.ts index 865ae87a28..5c4b99d7aa 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-shell.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-shell.ts @@ -71,7 +71,7 @@ export function useShell({ Fields.useEnvironmentName(model, !data?.id), ...Fields.useTaskGroup(model, projectCode), ...Fields.useFailed(), - Fields.useDelayTime(), + Fields.useDelayTime(model), ...Fields.useTimeoutAlarm(model), ...Fields.useShell(model), Fields.usePreTasks(model) diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts index c0b5d03199..258988c148 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts @@ -16,6 +16,7 @@ */ import { useShell } from './tasks/use-shell' +import { usePython } from './tasks/use-python' import { IJsonItem, INodeData, ITaskData } from './types' export function useTask({ @@ -39,5 +40,13 @@ export function useTask({ data }) } + if (taskType === 'PYTHON') { + node = usePython({ + projectCode, + from, + readonly, + data + }) + } return node } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx index 74022dabee..022e8300e8 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx @@ -77,6 +77,7 @@ const TaskDefinition = defineComponent({ requestData() } const onCreate = () => { + task.taskReadonly = false onToggleShow(true) } const onTaskCancel = () => { diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss index 7622b8b36c..cfaee429a2 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss @@ -15,7 +15,7 @@ * limitations under the License. */ - .content { +.content { width: 100%; .card { diff --git a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx index d1534a0eca..4ad51f0ec9 100644 --- a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx +++ b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx @@ -106,7 +106,12 @@ const workerGroupManage = defineComponent({
- + {t('security.worker_group.create_worker_group')}
@@ -130,7 +135,11 @@ const workerGroupManage = defineComponent({
- +