[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

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      |

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       |

dolphinscheduler-ui-next/docs/e2e/navbar.md

@@ -1,6 +1,7 @@
 ### navbar
 
 id:
+
 - [ ] tabProject
 - [ ] tabSecurity
 - [ ] tabResource

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

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

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     |

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;
     }
-   }
- }
+  }
+}

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
   }
 }

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'
   }
 }

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

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
+  }
+}

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)

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
 }

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 = () => {

dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- .content {
+.content {
   width: 100%;
 
   .card {

dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx

@@ -106,7 +106,12 @@ const workerGroupManage = defineComponent({
         <NCard>
           <div class={styles['search-card']}>
             <div>
-              <NButton size='small' type='primary' onClick={handleModalChange} class='btn-create-worker-group'>
+              <NButton
+                size='small'
+                type='primary'
+                onClick={handleModalChange}
+                class='btn-create-worker-group'
+              >
                 {t('security.worker_group.create_worker_group')}
               </NButton>
             </div>
@@ -130,7 +135,11 @@ const workerGroupManage = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable row-class-name='items' columns={this.columns} data={this.tableData} />
+          <NDataTable
+            row-class-name='items'
+            columns={this.columns}
+            data={this.tableData}
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}