[Fix][UI Next][V1.0.0-Alpha]Fix branch flown and Custom Parameters field options missing. (#8933)

dolphinscheduler-ui-next/src/store/project/task-node.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 { defineStore } from 'pinia'
+import { uniqBy } from 'lodash'
+import type { TaskNodeState, EditWorkflowDefinition, IOption } from './types'
+
+export const useTaskNodeStore = defineStore({
+  id: 'project-task',
+  state: (): TaskNodeState => ({
+    preTaskOptions: [],
+    postTaskOptions: [],
+    preTasks: []
+  }),
+  persist: true,
+  getters: {
+    getPreTaskOptions(): IOption[] {
+      return this.preTaskOptions
+    },
+    getPostTaskOptions(): IOption[] {
+      return this.postTaskOptions
+    },
+    getPreTasks(): number[] {
+      return this.preTasks
+    }
+  },
+  actions: {
+    updateDefinition(definition?: EditWorkflowDefinition, code?: number) {
+      if (!definition) return
+      const { processTaskRelationList = [], taskDefinitionList = [] } =
+        definition
+
+      const preTaskOptions: { value: number; label: string }[] = []
+      const tasks: { [field: number]: string } = {}
+      taskDefinitionList.forEach(
+        (task: { code: number; taskType: string; name: string }) => {
+          tasks[task.code] = task.name
+          if (task.code === code) return
+          if (
+            task.taskType === 'CONDITIONS' &&
+            processTaskRelationList.filter(
+              (relation: { preTaskCode: number }) =>
+                relation.preTaskCode === task.code
+            ).length >= 2
+          ) {
+            return
+          }
+          preTaskOptions.push({
+            value: task.code,
+            label: task.name
+          })
+        }
+      )
+
+      this.preTaskOptions = uniqBy(preTaskOptions, 'value')
+      if (!code) return
+      const preTasks: number[] = []
+      const postTaskOptions: { value: number; label: string }[] = []
+      processTaskRelationList.forEach(
+        (relation: { preTaskCode: number; postTaskCode: number }) => {
+          if (relation.preTaskCode === code) {
+            postTaskOptions.push({
+              value: relation.postTaskCode,
+              label: tasks[relation.postTaskCode]
+            })
+          }
+          if (relation.postTaskCode === code && relation.preTaskCode !== 0) {
+            preTasks.push(relation.preTaskCode)
+          }
+        }
+      )
+      this.preTasks = preTasks
+      this.postTaskOptions = postTaskOptions
+    }
+  }
+})

dolphinscheduler-ui-next/src/store/project/types.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 type { EditWorkflowDefinition } from '@/views/projects/workflow/components/dag/types'
+import type { IOption } from '@/components/form/types'
+
+interface TaskNodeState {
+  postTaskOptions: IOption[]
+  preTaskOptions: IOption[]
+  preTasks: number[]
+}
+export { TaskNodeState, EditWorkflowDefinition, IOption }

dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx

@@ -23,13 +23,13 @@ import {
   nextTick,
   provide,
   computed,
-  h
+  h,
+  Ref
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
 import Detail from './detail'
 import { formatModel } from './format-data'
-import type { ITaskData, ITaskType } from './types'
 import {
   HistoryOutlined,
   ProfileOutlined,
@@ -38,10 +38,13 @@ import {
 import { NIcon } from 'naive-ui'
 import { TASK_TYPES_MAP } from '../../constants/task-type'
 import { Router, useRouter } from 'vue-router'
-import {
+import type {
+  ITaskData,
+  ITaskType,
+  EditWorkflowDefinition,
   IWorkflowTaskInstance,
   WorkflowInstance
-} from '@/views/projects/workflow/components/dag/types'
+} from './types'
 
 const props = {
   show: {
@@ -65,7 +68,7 @@ const props = {
     default: 0
   },
   definition: {
-    type: Object as PropType<any>
+    type: Object as PropType<Ref<EditWorkflowDefinition>>
   },
   processInstance: {
     type: Object as PropType<WorkflowInstance>

dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx

@@ -18,7 +18,7 @@
 import { defineComponent, ref, watch, inject, Ref, unref } from 'vue'
 import Form from '@/components/form'
 import { useTask } from './use-task'
-import type { ITaskData } from './types'
+import type { ITaskData, EditWorkflowDefinition } from './types'
 
 interface IDetailPanel {
   projectCode: number
@@ -26,7 +26,7 @@ interface IDetailPanel {
   readonly: false
   from: number
   detailRef?: Ref
-  definition?: object
+  definition?: EditWorkflowDefinition
 }
 
 const NodeDetail = defineComponent({

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-conditions.ts

@@ -15,48 +15,23 @@
  * limitations under the License.
  */
 
-import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import { useRelationCustomParams, useTimeoutAlarm } from '.'
 import type { IJsonItem } from '../types'
 
 export function useConditions(model: { [field: string]: any }): IJsonItem[] {
   const { t } = useI18n()
+  const taskStore = useTaskNodeStore()
 
-  const taskCodeOptions = ref([] as { label: string; value: number }[])
+  const preTaskOptions = taskStore.preTaskOptions.filter((option) =>
-  const postTasksOptions = ref([] as { label: string; value: number }[])
+    taskStore.preTasks.includes(Number(option.value))
+  )
   const stateOptions = [
     { label: t('project.node.success'), value: 'success' },
     { label: t('project.node.failed'), value: 'failed' }
   ]
 
-  watch(
-    () => model.preTasks,
-    () => {
-      taskCodeOptions.value =
-        model.preTaskOptions
-          ?.filter((task: { code: number }) =>
-            model.preTasks?.includes(task.code)
-          )
-          .map((task: { code: number; name: string }) => ({
-            value: task.code,
-            label: task.name
-          })) || []
-    }
-  )
-
-  watch(
-    () => model.postTaskOptions,
-    () => {
-      postTasksOptions.value = model.postTasksOptions.map(
-        (task: { code: number; name: string }) => ({
-          value: task.code,
-          label: task.name
-        })
-      )
-    }
-  )
-
   return [
     {
       type: 'select',
@@ -76,7 +51,7 @@ export function useConditions(model: { [field: string]: any }): IJsonItem[] {
       props: {
         clearable: true
       },
-      options: postTasksOptions
+      options: taskStore.getPostTaskOptions
     },
     {
       type: 'select',
@@ -96,7 +71,7 @@ export function useConditions(model: { [field: string]: any }): IJsonItem[] {
       props: {
         clearable: true
       },
-      options: postTasksOptions
+      options: taskStore.getPostTaskOptions
     },
     ...useTimeoutAlarm(model),
     ...useRelationCustomParams({
@@ -110,7 +85,7 @@ export function useConditions(model: { [field: string]: any }): IJsonItem[] {
             type: 'select',
             field: 'depTaskCode',
             span: 10,
-            options: taskCodeOptions
+            options: preTaskOptions
           },
           {
             type: 'select',

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-pre-tasks.ts

@@ -15,43 +15,13 @@
  * limitations under the License.
  */
 
-import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { uniqBy } from 'lodash'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import type { IJsonItem } from '../types'
 
-export function usePreTasks(
+export function usePreTasks(): IJsonItem {
-  model: { [field: string]: any },
-  code?: number
-): IJsonItem {
   const { t } = useI18n()
-
+  const taskStore = useTaskNodeStore()
-  const options = ref([] as { value: number; label: string }[])
-
-  const getOptions = (
-    options: { code: number; name: string }[]
-  ): { value: number; label: string }[] => {
-    if (!options?.length) return []
-    return options.map((task: { code: number; name: string }) => ({
-      value: task.code,
-      label: task.name
-    }))
-  }
-
-  watch(
-    () => model.definition,
-    (value) => {
-      if (!value) return
-      const {
-        preTaskOptions,
-        preTasks = [],
-        postTaskOptions = []
-      } = getTaskOptions(value, code)
-      model.preTasks = preTasks
-      model.postTaskOptions = postTaskOptions
-      options.value = getOptions(preTaskOptions)
-    }
-  )
 
   return {
     type: 'select',
@@ -63,67 +33,6 @@ export function usePreTasks(
       multiple: true,
       filterable: true
     },
-    options
+    options: taskStore.getPreTaskOptions
-  }
-}
-
-function getTaskOptions(
-  processDefinition: {
-    processTaskRelationList: []
-    taskDefinitionList: []
-  },
-  code?: number
-): {
-  preTaskOptions: { code: number; name: string }[]
-  preTasks?: number[]
-  postTaskOptions?: { code: number; name: string }[]
-} {
-  const { processTaskRelationList = [], taskDefinitionList = [] } =
-    processDefinition
-
-  const preTaskOptions: { code: number; name: string }[] = []
-  const tasks: { [field: number]: string } = {}
-  taskDefinitionList.forEach(
-    (task: { code: number; taskType: string; name: string }) => {
-      tasks[task.code] = task.name
-      if (task.code === code) return
-      if (
-        task.taskType === 'CONDITIONS' &&
-        processTaskRelationList.filter(
-          (relation: { preTaskCode: number }) =>
-            relation.preTaskCode === task.code
-        ).length >= 2
-      ) {
-        return
-      }
-      preTaskOptions.push({
-        code: task.code,
-        name: task.name
-      })
-    }
-  )
-  if (!code)
-    return {
-      preTaskOptions: uniqBy(preTaskOptions, 'code')
-    }
-  const preTasks: number[] = []
-  const postTaskOptions: { code: number; name: string }[] = []
-  processTaskRelationList.forEach(
-    (relation: { preTaskCode: number; postTaskCode: number }) => {
-      if (relation.preTaskCode === code) {
-        postTaskOptions.push({
-          code: relation.postTaskCode,
-          name: tasks[relation.postTaskCode]
-        })
-      }
-      if (relation.postTaskCode === code && relation.preTaskCode !== 0) {
-        preTasks.push(relation.preTaskCode)
-      }
-    }
-  )
-  return {
-    preTaskOptions: uniqBy(preTaskOptions, 'code'),
-    preTasks,
-    postTaskOptions
   }
 }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-conditions.ts

@@ -75,7 +75,7 @@ export function useConditions({
       ...Fields.useTaskGroup(model, projectCode),
       ...Fields.useFailed(),
       ...Fields.useConditions(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-data-quality.ts

@@ -108,7 +108,7 @@ export function useDataQuality({
         field: 'localParams',
         isSimple: true
       }),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-datax.ts

@@ -94,7 +94,7 @@ export function useDataX({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useDataX(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-dependent.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ref, reactive, watch } from 'vue'
+import { reactive } from 'vue'
 import * as Fields from '../fields/index'
 import type { IJsonItem, INodeData, ITaskData } from '../types'
 
@@ -30,7 +30,6 @@ export function useDependent({
   readonly?: boolean
   data?: ITaskData
 }) {
-  const taskCodeOptions = ref([] as { label: string; value: number }[])
   const model = reactive({
     taskType: 'DEPENDENT',
     name: '',
@@ -66,21 +65,6 @@ export function useDependent({
     ]
   }
 
-  watch(
-    () => model.preTasks,
-    () => {
-      taskCodeOptions.value =
-        model.preTaskOptions
-          ?.filter((task: { code: number }) =>
-            model.preTasks?.includes(task.code)
-          )
-          .map((task: { code: number; name: string }) => ({
-            value: task.code,
-            label: task.name
-          })) || []
-    }
-  )
-
   return {
     json: [
       Fields.useName(),
@@ -93,7 +77,7 @@ export function useDependent({
       ...Fields.useTaskGroup(model, projectCode),
       ...Fields.useFailed(),
       ...Fields.useDependent(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-emr.ts

@@ -74,7 +74,7 @@ export function useEmr({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useEmr(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-flink.ts

@@ -81,7 +81,7 @@ export function useFlink({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useFlink(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-http.ts

@@ -81,7 +81,7 @@ export function useHttp({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useHttp(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-mr.ts

@@ -74,7 +74,7 @@ export function useMr({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useMr(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-pigeon.ts

@@ -73,7 +73,7 @@ export function usePigeon({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       Fields.useTargetTaskName(),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-procedure.ts

@@ -79,7 +79,7 @@ export function useProcedure({
       Fields.useDatasourceType(model),
       Fields.useDatasource(model),
       ...Fields.useProcedure(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-python.ts

@@ -75,7 +75,7 @@ export function usePython({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useShell(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sea-tunnel.ts

@@ -79,7 +79,7 @@ export function useSeaTunnel({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useSeaTunnel(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-shell.ts

@@ -75,7 +75,7 @@ export function useShell({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useShell(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-spark.ts

@@ -81,7 +81,7 @@ export function useSpark({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useSpark(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sql.ts

@@ -87,7 +87,7 @@ export function useSql({
       Fields.useDatasource(model),
       Fields.useSqlType(model),
       ...Fields.useSql(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sqoop.ts

@@ -93,7 +93,7 @@ export function useSqoop({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useSqoop(model),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sub-process.ts

@@ -81,7 +81,7 @@ export function useSubProcess({
         processName: data?.processName,
         code: from === 1 ? 0 : Number(workflowCode)
       }),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-switch.ts

@@ -77,7 +77,7 @@ export function useSwitch({
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
       ...Fields.useSwitch(model, projectCode),
-      Fields.usePreTasks(model, data?.code)
+      Fields.usePreTasks()
     ] as IJsonItem[],
     model
   }

dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts

@@ -17,7 +17,6 @@
 
 import { VNode } from 'vue'
 import type { SelectOption } from 'naive-ui'
-
 import type { TaskType } from '@/views/projects/task/constants/task-type'
 import type { IDataBase } from '@/service/modules/data-source/types'
 import type {
@@ -26,6 +25,11 @@ import type {
   FormRules,
   IJsonItemParams
 } from '@/components/form/types'
+export type { EditWorkflowDefinition } from '@/views/projects/workflow/components/dag/types'
+export type {
+  IWorkflowTaskInstance,
+  WorkflowInstance
+} from '@/views/projects/workflow/components/dag/types'
 
 type ProgramType = 'JAVA' | 'SCALA' | 'PYTHON'
 type SourceType = 'MYSQL' | 'HDFS' | 'HIVE'

dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts

@@ -14,10 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ref, Ref, watch } from 'vue'
+import { ref, Ref, unref, watch } from 'vue'
 import nodes from './tasks'
 import getElementByJson from '@/components/form/get-elements-by-json'
-import { IFormItem, IJsonItem, INodeData, ITaskData, FormRules } from './types'
+import { useTaskNodeStore } from '@/store/project/task-node'
+import type {
+  IFormItem,
+  IJsonItem,
+  INodeData,
+  ITaskData,
+  FormRules,
+  EditWorkflowDefinition
+} from './types'
 
 export function useTask({
   data,
@@ -30,15 +38,19 @@ export function useTask({
   projectCode: number
   from?: number
   readonly?: boolean
-  definition?: object
+  definition?: EditWorkflowDefinition
 }): {
   elementsRef: Ref<IFormItem[]>
   rulesRef: Ref<FormRules>
   model: INodeData
 } {
+  const taskStore = useTaskNodeStore()
+  taskStore.updateDefinition(unref(definition), data?.code)
+
   const jsonRef = ref([]) as Ref<IJsonItem[]>
   const elementsRef = ref([]) as Ref<IFormItem[]>
   const rulesRef = ref({})
+
   const params = {
     projectCode,
     from,
@@ -49,7 +61,7 @@ export function useTask({
 
   const { model, json } = nodes[data.taskType || 'SHELL'](params)
   jsonRef.value = json
-  model.definition = definition
+  model.preTasks = taskStore.getPreTasks
 
   const getElements = () => {
     const { rules, elements } = getElementByJson(jsonRef.value, model)

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts

@@ -99,9 +99,9 @@ export function useCellUpdate(options: Options) {
     if (!edges.length) return []
     const targets = [] as number[]
     edges.forEach((edge) => {
-      const targetNode = edge.getSourceNode()
+      const sourceNode = edge.getSourceNode()
-      if (targetNode) {
+      if (sourceNode && sourceNode.id !== id) {
-        targets.push(Number(targetNode.id))
+        targets.push(Number(sourceNode.id))
       }
     })
     return targets