You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ke...@apache.org on 2022/09/19 02:41:12 UTC

[dolphinscheduler] branch 3.0.1-prepare updated: [3.0.1-prepare][cherry-pick]3.0.1 UI 1 (#12033)

This is an automated email from the ASF dual-hosted git repository.

kerwin pushed a commit to branch 3.0.1-prepare
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/3.0.1-prepare by this push:
     new ffb58c1e32 [3.0.1-prepare][cherry-pick]3.0.1 UI 1 (#12033)
ffb58c1e32 is described below

commit ffb58c1e3272fa5cffc9cd94cfc1d46842899dfd
Author: Kerwin <37...@users.noreply.github.com>
AuthorDate: Mon Sep 19 10:41:06 2022 +0800

    [3.0.1-prepare][cherry-pick]3.0.1 UI 1 (#12033)
    
    * [Improvement][UI] Unified local parameters UI (#11190)
    
    * [Fix][UI] fix bug where icons are displayed in one line. (#11320)
    
    * cherry pick [Improvement-11386][UI] Concise the logic available for task action buttons
    
    * [Fix][UI] Fix the preTask options are unavailable when creating a tas...
    
    * fix build
    
    Co-authored-by: Chris Ho <re...@gmail.com>
    Co-authored-by: Devosend <de...@gmail.com>
    Co-authored-by: Sheldon <39...@users.noreply.github.com>
    Co-authored-by: Amy0104 <am...@163.com>
---
 .../projects/task/components/node/fields/index.ts  |   1 +
 .../components/node/fields/use-custom-params.ts    | 170 ++++++++-------------
 .../task/components/node/fields/use-pre-tasks.ts   |  11 +-
 .../components/node/fields/use-process-name.ts     |   8 +-
 .../{use-pre-tasks.ts => use-task-definition.ts}   |  46 +++---
 .../task/components/node/tasks/use-conditions.ts   |  16 +-
 .../task/components/node/tasks/use-data-quality.ts |  16 +-
 .../task/components/node/tasks/use-datax.ts        |  16 +-
 .../task/components/node/tasks/use-dependent.ts    |  16 +-
 .../projects/task/components/node/tasks/use-emr.ts |  16 +-
 .../task/components/node/tasks/use-flink.ts        |  16 +-
 .../task/components/node/tasks/use-http.ts         |  16 +-
 .../projects/task/components/node/tasks/use-mr.ts  |  16 +-
 .../task/components/node/tasks/use-pigeon.ts       |  16 +-
 .../task/components/node/tasks/use-procedure.ts    |  16 +-
 .../task/components/node/tasks/use-python.ts       |  16 +-
 .../task/components/node/tasks/use-sea-tunnel.ts   |  16 +-
 .../task/components/node/tasks/use-shell.ts        |  16 +-
 .../task/components/node/tasks/use-spark.ts        |  16 +-
 .../projects/task/components/node/tasks/use-sql.ts |  16 +-
 .../task/components/node/tasks/use-sqoop.ts        |  16 +-
 .../task/components/node/tasks/use-sub-process.ts  |  16 +-
 .../task/components/node/tasks/use-switch.ts       |  16 +-
 .../task/components/node/tasks/use-zeppelin.ts     |  16 +-
 .../workflow/components/dag/dag-context-menu.tsx   |  54 +++----
 .../projects/workflow/components/dag/index.tsx     |  25 ++-
 .../projects/workflow/instance/index.module.scss   |   8 -
 .../views/projects/workflow/instance/use-table.ts  |   4 +-
 28 files changed, 164 insertions(+), 467 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/index.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/index.ts
index 38cb3fac3c..e5f6cee7d4 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/index.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/index.ts
@@ -47,6 +47,7 @@ export { useExecutorMemory } from './use-executor-memory'
 export { useExecutorCores } from './use-executor-cores'
 export { useMainJar } from './use-main-jar'
 export { useResources } from './use-resources'
+export { useTaskDefinition } from './use-task-definition'
 
 export { useShell } from './use-shell'
 export { useSpark } from './use-spark'
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
index 6adac53b30..fb9d098d45 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
@@ -33,120 +33,76 @@ export function useCustomParams({
 }): IJsonItem[] {
   const { t } = useI18n()
 
-  if (isSimple) {
-    return [
-      {
-        type: 'custom-parameters',
-        field: field,
-        name: t(`project.node.${name}`),
-        class: 'btn-custom-parameters',
-        span,
-        children: [
-          {
-            type: 'input',
-            field: 'prop',
-            span: 10,
-            class: 'input-param-key',
-            props: {
-              placeholder: t('project.node.prop_tips'),
-              maxLength: 256
-            },
-            validate: {
-              trigger: ['input', 'blur'],
-              required: true,
-              validator(validate: any, value: string) {
-                if (!value) {
-                  return new Error(t('project.node.prop_tips'))
-                }
-
-                const sameItems = model[field].filter(
-                  (item: { prop: string }) => item.prop === value
-                )
-
-                if (sameItems.length > 1) {
-                  return new Error(t('project.node.prop_repeat'))
-                }
-              }
-            }
+  return [
+    {
+      type: 'custom-parameters',
+      field: field,
+      name: t(`project.node.${name}`),
+      class: 'btn-custom-parameters',
+      span,
+      children: [
+        {
+          type: 'input',
+          field: 'prop',
+          span: 6,
+          class: 'input-param-key',
+          props: {
+            placeholder: t('project.node.prop_tips'),
+            maxLength: 256
           },
-          {
-            type: 'input',
-            field: 'value',
-            span: 10,
-            class: 'input-param-value',
-            props: {
-              placeholder: t('project.node.value_tips'),
-              maxLength: 256
-            }
-          }
-        ]
-      }
-    ]
-  } else {
-    return [
-      {
-        type: 'custom-parameters',
-        field: field,
-        name: t(`project.node.${name}`),
-        class: 'btn-custom-parameters',
-        span,
-        children: [
-          {
-            type: 'input',
-            field: 'prop',
-            span: 6,
-            class: 'input-param-key',
-            props: {
-              placeholder: t('project.node.prop_tips'),
-              maxLength: 256
-            },
-            validate: {
-              trigger: ['input', 'blur'],
-              required: true,
-              validator(validate: any, value: string) {
-                if (!value) {
-                  return new Error(t('project.node.prop_tips'))
-                }
+          validate: {
+            trigger: ['input', 'blur'],
+            required: true,
+            validator(validate: any, value: string) {
+              if (!value) {
+                return new Error(t('project.node.prop_tips'))
+              }
 
-                const sameItems = model[field].filter(
-                  (item: { prop: string }) => item.prop === value
-                )
+              const sameItems = model[field].filter(
+                (item: { prop: string }) => item.prop === value
+              )
 
-                if (sameItems.length > 1) {
-                  return new Error(t('project.node.prop_repeat'))
-                }
+              if (sameItems.length > 1) {
+                return new Error(t('project.node.prop_repeat'))
               }
             }
-          },
-          {
-            type: 'select',
-            field: 'direct',
-            span: 4,
-            options: DIRECT_LIST,
-            value: 'IN'
-          },
-          {
-            type: 'select',
-            field: 'type',
-            span: 6,
-            options: TYPE_LIST,
-            value: 'VARCHAR'
-          },
-          {
-            type: 'input',
-            field: 'value',
-            span: 6,
-            class: 'input-param-value',
-            props: {
-              placeholder: t('project.node.value_tips'),
-              maxLength: 256
-            }
           }
-        ]
-      }
-    ]
-  }
+        },
+        {
+          type: 'select',
+          field: 'direct',
+          span: 4,
+          options: DIRECT_LIST,
+          value: 'IN',
+          props: {
+            disabled: isSimple
+          }
+        },
+        {
+          type: 'select',
+          field: 'type',
+          span: 6,
+          options: TYPE_LIST,
+          value: 'VARCHAR',
+          props: {
+            disabled: isSimple
+          }
+        },
+        {
+          type: 'input',
+          field: 'value',
+          span: 6,
+          class: 'input-param-value',
+          props: {
+            placeholder: t('project.node.value_tips'),
+            maxLength: 256
+          }
+        }
+      ]
+    }
+  ]
 }
+
 export const TYPE_LIST = [
   {
     value: 'VARCHAR',
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts
index 5a472d92ae..80bd285e21 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTaskNodeStore } from '@/store/project/task-node'
 import type { IJsonItem } from '../types'
@@ -22,6 +23,14 @@ import type { IJsonItem } from '../types'
 export function usePreTasks(): IJsonItem {
   const { t } = useI18n()
   const taskStore = useTaskNodeStore()
+  const options = ref(taskStore.getPreTaskOptions)
+
+  watch(
+    () => taskStore.getPreTaskOptions,
+    (value) => {
+      options.value = value
+    }
+  )
 
   return {
     type: 'select',
@@ -33,6 +42,6 @@ export function usePreTasks(): IJsonItem {
       multiple: true,
       filterable: true
     },
-    options: taskStore.getPreTaskOptions
+    options
   }
 }
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-process-name.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-process-name.ts
index d754acbf46..f9cdccc224 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-process-name.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-process-name.ts
@@ -21,6 +21,7 @@ import {
   querySimpleList,
   queryProcessDefinitionByCode
 } from '@/service/modules/process-definition'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import type { IJsonItem } from '../types'
 
 export function useProcessName({
@@ -28,16 +29,18 @@ export function useProcessName({
   projectCode,
   isCreate,
   from,
-  processName
+  processName,
+  taskCode
 }: {
   model: { [field: string]: any }
   projectCode: number
   isCreate: boolean
   from?: number
   processName?: number
+  taskCode?: number
 }): IJsonItem {
   const { t } = useI18n()
-
+  const taskStore = useTaskNodeStore()
   const options = ref([] as { label: string; value: string }[])
   const loading = ref(false)
 
@@ -55,6 +58,7 @@ export function useProcessName({
     if (!processCode) return
     const res = await queryProcessDefinitionByCode(processCode, projectCode)
     model.definition = res
+    taskStore.updateDefinition(res, taskCode)
   }
 
   const onChange = (code: number) => {
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-task-definition.ts
similarity index 58%
copy from dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts
copy to dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-task-definition.ts
index 5a472d92ae..d740e366c1 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-pre-tasks.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-task-definition.ts
@@ -15,24 +15,32 @@
  * limitations under the License.
  */
 
-import { useI18n } from 'vue-i18n'
-import { useTaskNodeStore } from '@/store/project/task-node'
-import type { IJsonItem } from '../types'
+import { useTaskType, useProcessName } from '.'
+import type { IJsonItem, ITaskData } from '../types'
 
-export function usePreTasks(): IJsonItem {
-  const { t } = useI18n()
-  const taskStore = useTaskNodeStore()
-
-  return {
-    type: 'select',
-    field: 'preTasks',
-    span: 24,
-    class: 'pre-tasks-model',
-    name: t('project.node.pre_tasks'),
-    props: {
-      multiple: true,
-      filterable: true
-    },
-    options: taskStore.getPreTaskOptions
-  }
+export const useTaskDefinition = ({
+  projectCode,
+  from = 0,
+  readonly,
+  data,
+  model
+}: {
+  projectCode: number
+  from?: number
+  readonly?: boolean
+  data?: ITaskData
+  model: { [field: string]: any }
+}): IJsonItem[] => {
+  if (from === 0) return []
+  return [
+    useTaskType(model, readonly),
+    useProcessName({
+      model,
+      projectCode,
+      isCreate: !data?.id,
+      from,
+      processName: data?.processName,
+      taskCode: data?.code
+    })
+  ]
 }
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-conditions.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-conditions.ts
index 69f8adaf19..2ee376c024 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-conditions.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-conditions.ts
@@ -49,24 +49,10 @@ export function useConditions({
     failedNode: 'failed'
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-data-quality.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-data-quality.ts
index 91e667dd1b..0110570dd9 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-data-quality.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-data-quality.ts
@@ -60,24 +60,10 @@ export function useDataQuality({
     others: '--conf spark.yarn.maxAppAttempts=1'
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-datax.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-datax.ts
index a75c852a8e..8eab2af6a4 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-datax.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-datax.ts
@@ -51,24 +51,10 @@ export function useDataX({
     postStatements: []
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-dependent.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-dependent.ts
index 5bb2e0e470..2551d1076f 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-dependent.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-dependent.ts
@@ -51,24 +51,10 @@ export function useDependent({
     ...data
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-emr.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-emr.ts
index 4f4695d897..d67ff2bbdd 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-emr.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-emr.ts
@@ -46,24 +46,10 @@ export function useEmr({
     timeout: 30
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-flink.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-flink.ts
index acf41992c8..c36450346b 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-flink.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-flink.ts
@@ -55,24 +55,10 @@ export function useFlink({
     parallelism: 1
   })
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-http.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-http.ts
index 89dd2394e6..c3ff864068 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-http.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-http.ts
@@ -52,24 +52,10 @@ export function useHttp({
     socketTimeout: 60000
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-mr.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-mr.ts
index f5bbdeca59..ec35cc3d8e 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-mr.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-mr.ts
@@ -46,24 +46,10 @@ export function useMr({
     programType: 'SCALA'
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-pigeon.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-pigeon.ts
index 4bd9eedd42..eaf2209fc7 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-pigeon.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-pigeon.ts
@@ -45,24 +45,10 @@ export function usePigeon({
     targetJobName: ''
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-procedure.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-procedure.ts
index 130853d549..9dace0c15f 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-procedure.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-procedure.ts
@@ -49,24 +49,10 @@ export function useProcedure({
     method: data?.taskParams?.method
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-python.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-python.ts
index 0d35d7a01a..a4fc118488 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-python.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-python.ts
@@ -47,24 +47,10 @@ export function usePython({
     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
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sea-tunnel.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sea-tunnel.ts
index 4f619a8695..cd6d42c35c 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sea-tunnel.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sea-tunnel.ts
@@ -51,24 +51,10 @@ export function useSeaTunnel({
     resourceFiles: []
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-shell.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-shell.ts
index d0c38cd8e6..574fd4a310 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-shell.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-shell.ts
@@ -47,24 +47,10 @@ export function useShell({
     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
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-spark.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-spark.ts
index 46061ffc9c..04e1891ff3 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-spark.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-spark.ts
@@ -54,24 +54,10 @@ export function useSpark({
     executorCores: 2
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sql.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sql.ts
index c23311c257..3bee95e9e3 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sql.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sql.ts
@@ -54,24 +54,10 @@ export function useSql({
     udfs: []
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sqoop.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sqoop.ts
index fc385372b1..4d6b5bbaab 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sqoop.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sqoop.ts
@@ -65,24 +65,10 @@ export function useSqoop({
     concurrency: 1
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sub-process.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sub-process.ts
index 7338da437b..47d8e1cd4d 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sub-process.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-sub-process.ts
@@ -48,24 +48,10 @@ export function useSubProcess({
     timeout: 30
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-switch.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-switch.ts
index 20412242c0..bf7bc6ed33 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-switch.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-switch.ts
@@ -49,24 +49,10 @@ export function useSwitch({
     nextNode: undefined
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-zeppelin.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-zeppelin.ts
index a625c7461c..e722793534 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-zeppelin.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/tasks/use-zeppelin.ts
@@ -45,24 +45,10 @@ export function useZeppelin({
     timeout: 30
   } as INodeData)
 
-  let extra: IJsonItem[] = []
-  if (from === 1) {
-    extra = [
-      Fields.useTaskType(model, readonly),
-      Fields.useProcessName({
-        model,
-        projectCode,
-        isCreate: !data?.id,
-        from,
-        processName: data?.processName
-      })
-    ]
-  }
-
   return {
     json: [
       Fields.useName(from),
-      ...extra,
+      ...Fields.useTaskDefinition({ projectCode, from, readonly, data, model }),
       Fields.useRunFlag(),
       Fields.useDescription(),
       Fields.useTaskPriority(),
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
index 87161c3d27..98d4e04706 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
@@ -26,15 +26,11 @@ import { IWorkflowTaskInstance } from './types'
 import { NButton } from 'naive-ui'
 
 const props = {
-  startButtonDisplay: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  startReadonly: {
+  startDisplay: {
     type: Boolean as PropType<boolean>,
     default: false
   },
-  menuReadonly: {
+  menuDisplay: {
     type: Boolean as PropType<boolean>,
     default: false
   },
@@ -131,36 +127,36 @@ export default defineComponent({
           class={styles['dag-context-menu']}
           style={{ left: `${this.left}px`, top: `${this.top}px` }}
         >
-          {this.startButtonDisplay && (
+          {this.startDisplay && (
             <NButton
               class={`${styles['menu-item']}`}
-              disabled={this.startReadonly}
               onClick={this.startRunning}
             >
               {t('project.node.start')}
             </NButton>)
           }
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleEdit}
-          >
-            {t('project.node.edit')}
-          </NButton>
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleCopy}
-          >
-            {t('project.node.copy')}
-          </NButton>
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleDelete}
-          >
-            {t('project.node.delete')}
-          </NButton>
+          {this.menuDisplay && (
+            <>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleEdit}
+              >
+                {t('project.node.edit')}
+              </NButton>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleCopy}
+              >
+                {t('project.node.copy')}
+              </NButton>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleDelete}
+              >
+                {t('project.node.delete')}
+              </NButton>
+            </>
+          )}
           {this.taskInstance && (
             <NButton
               class={`${styles['menu-item']}`}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
index 3e167bd81e..9d419f2657 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
@@ -119,11 +119,11 @@ export default defineComponent({
     })
 
     // start button in the dag node menu
-    const startReadonly = computed(() => {
+    const startDisplay = computed(() => {
       if (props.definition) {
         return (
           route.name === 'workflow-definition-detail' &&
-          props.definition!.processDefinition.releaseState === 'NOT_RELEASE'
+          props.definition!.processDefinition.releaseState === 'ONLINE'
         )
       } else {
         return false
@@ -131,17 +131,17 @@ export default defineComponent({
     })
 
     // other button in the dag node menu
-    const menuReadonly = computed(() => {
+    const menuDisplay = computed(() => {
       if (props.instance) {
         return (
-          props.instance.state !== 'WAITING_THREAD' &&
-          props.instance.state !== 'SUCCESS' &&
-          props.instance.state !== 'PAUSE' &&
-          props.instance.state !== 'FAILURE' &&
-          props.instance.state !== 'STOP'
+          props.instance.state === 'WAITING_THREAD' ||
+          props.instance.state === 'SUCCESS' ||
+          props.instance.state === 'PAUSE' ||
+          props.instance.state === 'FAILURE' ||
+          props.instance.state === 'STOP'
         )
       } else if (props.definition) {
-        return props.definition!.processDefinition.releaseState === 'ONLINE'
+        return props.definition!.processDefinition.releaseState === 'OFFLINE'
       } else {
         return false
       }
@@ -337,7 +337,7 @@ export default defineComponent({
         />
         {!!props.definition && (
           <VersionModal
-            isInstance={props.instance ? true : false}
+            isInstance={!!props.instance}
             v-model:row={props.definition.processDefinition}
             v-model:show={versionModalShow.value}
             onUpdateList={refreshDetail}
@@ -362,9 +362,8 @@ export default defineComponent({
           onCancel={taskCancel}
         />
         <ContextMenuItem
-          startButtonDisplay={!props.instance}
-          startReadonly={startReadonly.value}
-          menuReadonly={menuReadonly.value}
+          startDisplay={startDisplay.value}
+          menuDisplay={menuDisplay.value}
           taskInstance={taskInstance.value}
           cell={nodeVariables.menuCell as Cell}
           visible={nodeVariables.menuVisible}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
index 7eac171996..f29869391b 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
@@ -72,14 +72,6 @@
   margin-top: 20px;
 }
 
-.operation {
-  > div {
-    > div {
-      margin-right: 5px !important;
-    }
-  }
-}
-
 .startup {
   align-items: center;
   > div:first-child {
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
index 2ac774716d..08e4d312fa 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
@@ -30,7 +30,6 @@ import {
 import { execute } from '@/service/modules/executors'
 import TableAction from './components/table-action'
 import { renderTableTime, runningType } from '@/common/common'
-import styles from './index.module.scss'
 import { renderStateCell } from '../../task/instance/use-table'
 import {
   COLUMN_WIDTH_CONFIG,
@@ -175,8 +174,7 @@ export function useTable() {
       {
         title: t('project.workflow.operation'),
         key: 'operation',
-        ...COLUMN_WIDTH_CONFIG['operation'](6),
-        className: styles.operation,
+        ...COLUMN_WIDTH_CONFIG['operation'](7),
         render: (_row: IWorkflowInstance, index: number) =>
           h(TableAction, {
             row: _row,