From 9cf5c6d00eb70166eeb58d750910935e60df6acd Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Wed, 16 Mar 2022 16:04:38 +0800 Subject: [PATCH] [Fix] [UI Next][V1.0.0-Alpha] Fix pre task error when creating task in dag page. (#8928) --- .../components/dag/dag-save-modal.tsx | 2 +- .../workflow/components/dag/index.tsx | 12 ++- .../projects/workflow/components/dag/types.ts | 6 ++ .../components/dag/use-cell-update.ts | 31 ++++++- .../workflow/components/dag/use-task-edit.ts | 90 ++++++++++++------- 5 files changed, 102 insertions(+), 39 deletions(-) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx index 53b900ba36..0562db820f 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx @@ -29,11 +29,11 @@ import { NCheckbox } from 'naive-ui' import { queryTenantList } from '@/service/modules/tenants' -import { SaveForm, WorkflowDefinition, WorkflowInstance } from './types' import { useRoute } from 'vue-router' import { verifyName } from '@/service/modules/process-definition' import './x6-style.scss' import { positiveIntegerRegex } from '@/utils/regex' +import type { SaveForm, WorkflowDefinition, WorkflowInstance } from './types' const props = { visible: { diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx index b13e971036..77742986a9 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx @@ -106,7 +106,7 @@ export default defineComponent({ appendTask, editTask, copyTask, - taskDefinitions, + processDefinition, removeTasks } = useTaskEdit({ graph, definition: toRef(props, 'definition') }) @@ -212,10 +212,14 @@ export default defineComponent({ saveModelToggle(false) return } - const connects = getConnects(nodes, edges, taskDefinitions.value as any) + const connects = getConnects( + nodes, + edges, + processDefinition.value.taskDefinitionList as any + ) const locations = getLocations(nodes) context.emit('save', { - taskDefinitions: taskDefinitions.value, + taskDefinitions: processDefinition.value.taskDefinitionList, saveForm, connects, locations @@ -288,7 +292,7 @@ export default defineComponent({ taskInstance={currentTaskInstance.value} onViewLog={handleViewLog} data={currTask.value as any} - definition={props.definition} + definition={processDefinition} onSubmit={taskConfirm} onCancel={taskCancel} /> diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts index e0f2f0b469..c823f69c85 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts @@ -115,6 +115,12 @@ export interface WorkflowInstance { warningGroupId: number } +export interface EditWorkflowDefinition { + processDefinition: ProcessDefinition + processTaskRelationList: Connect[] + taskDefinitionList: NodeData[] +} + export interface Dragged { x: number y: number diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts index 53e65ca5d2..f001924e41 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts @@ -22,6 +22,7 @@ import type { Coordinate } from './types' import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type' import { useCustomCellBuilder } from './dag-hooks' import utils from '@/utils' +import type { Edge } from '@antv/x6' interface Options { graph: Ref @@ -70,10 +71,19 @@ export function useCellUpdate(options: Options) { graph.value?.addNode(node) } - const setNodeEdge = (id: string, preTaskCode: number[]) => { + function removeNode(id: string) { + graph.value?.removeNode(id) + } + + const getNodeEdge = (id: string): Edge[] => { const node = graph.value?.getCellById(id) - if (!node) return + if (!node) return [] const edges = graph.value?.getConnectedEdges(node) + return edges || [] + } + + const setNodeEdge = (id: string, preTaskCode: number[]) => { + const edges = getNodeEdge(id) if (edges?.length) { edges.forEach((edge) => { graph.value?.removeEdge(edge) @@ -84,9 +94,24 @@ export function useCellUpdate(options: Options) { }) } + const getSources = (id: string): number[] => { + const edges = getNodeEdge(id) + if (!edges.length) return [] + const targets = [] as number[] + edges.forEach((edge) => { + const targetNode = edge.getSourceNode() + if (targetNode) { + targets.push(Number(targetNode.id)) + } + }) + return targets + } + return { setNodeName, setNodeEdge, - addNode + addNode, + removeNode, + getSources } } diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts index 9d9c574926..e15d23d80a 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts @@ -22,7 +22,12 @@ import { formatParams } from '@/views/projects/task/components/node/format-data' import { useCellUpdate } from './dag-hooks' import type { Ref } from 'vue' import type { Graph } from '@antv/x6' -import type { Coordinate, NodeData, WorkflowDefinition } from './types' +import type { + Coordinate, + NodeData, + WorkflowDefinition, + EditWorkflowDefinition +} from './types' interface Options { graph: Ref @@ -36,10 +41,18 @@ interface Options { */ export function useTaskEdit(options: Options) { const { graph, definition } = options - const { addNode, setNodeName, setNodeEdge } = useCellUpdate({ graph }) - const taskDefinitions = ref( - definition.value?.taskDefinitionList || [] - ) + const { addNode, removeNode, getSources, setNodeName, setNodeEdge } = + useCellUpdate({ + graph + }) + const processDefinition = ref( + definition?.value || { + processDefinition: {}, + processTaskRelationList: [], + taskDefinitionList: [] + } + ) as Ref + const currTask = ref({ taskType: 'SHELL', code: 0, @@ -52,7 +65,7 @@ export function useTaskEdit(options: Options) { */ function appendTask(code: number, type: TaskType, coordinate: Coordinate) { addNode(code + '', type, '', 'YES', coordinate) - taskDefinitions.value.push({ + processDefinition.value.taskDefinitionList.push({ code, taskType: type, name: '' @@ -72,7 +85,9 @@ export function useTaskEdit(options: Options) { coordinate: Coordinate ) { addNode(code + '', type, name, flag, coordinate) - const definition = taskDefinitions.value.find((t) => t.code === targetCode) + const definition = processDefinition.value.taskDefinitionList.find( + (t) => t.code === targetCode + ) const newDefinition = { ...definition, @@ -80,7 +95,7 @@ export function useTaskEdit(options: Options) { name } as NodeData - taskDefinitions.value.push(newDefinition) + processDefinition.value.taskDefinitionList.push(newDefinition) } /** @@ -88,9 +103,10 @@ export function useTaskEdit(options: Options) { * @param {number} code */ function removeTasks(codes: number[]) { - taskDefinitions.value = taskDefinitions.value.filter( - (task) => !codes.includes(task.code) - ) + processDefinition.value.taskDefinitionList = + processDefinition.value.taskDefinitionList.filter( + (task) => !codes.includes(task.code) + ) } function openTaskModal(task: NodeData) { @@ -103,10 +119,13 @@ export function useTaskEdit(options: Options) { * @param {number} code */ function editTask(code: number) { - const definition = taskDefinitions.value.find((t) => t.code === code) + const definition = processDefinition.value.taskDefinitionList.find( + (t) => t.code === code + ) if (definition) { currTask.value = definition } + updatePreTasks(getSources(String(code)), code) taskModalVisible.value = true } @@ -118,19 +137,22 @@ export function useTaskEdit(options: Options) { function taskConfirm({ data }: any) { const taskDef = formatParams(data).taskDefinitionJsonObj as NodeData // override target config - taskDefinitions.value = taskDefinitions.value.map((task) => { - if (task.code === currTask.value?.code) { - setNodeName(task.code + '', taskDef.name) - updatePreTasks(data.preTasks, task.code) - return { - ...taskDef, - version: task.version, - code: task.code, - taskType: currTask.value.taskType + processDefinition.value.taskDefinitionList = + processDefinition.value.taskDefinitionList.map((task) => { + if (task.code === currTask.value?.code) { + setNodeName(task.code + '', taskDef.name) + + setNodeEdge(String(task.code), data.preTasks) + updatePreTasks(data.preTasks, task.code) + return { + ...taskDef, + version: task.version, + code: task.code, + taskType: currTask.value.taskType + } } - } - return task - }) + return task + }) taskModalVisible.value = false } @@ -139,19 +161,25 @@ export function useTaskEdit(options: Options) { */ function taskCancel() { taskModalVisible.value = false + if (!currTask.value.name) { + removeNode(String(currTask.value.code)) + remove( + processDefinition.value.taskDefinitionList, + (task) => task.code === currTask.value.code + ) + } } function updatePreTasks(preTasks: number[], code: number) { - if (!preTasks?.length) return - setNodeEdge(String(code), preTasks) - if (definition.value?.processTaskRelationList?.length) { + if (processDefinition.value?.processTaskRelationList?.length) { remove( - definition.value.processTaskRelationList, + processDefinition.value.processTaskRelationList, (process) => process.postTaskCode === code ) } + if (!preTasks?.length) return preTasks.forEach((task) => { - definition.value?.processTaskRelationList.push({ + processDefinition.value?.processTaskRelationList.push({ postTaskCode: code, preTaskCode: task, name: '', @@ -173,18 +201,18 @@ export function useTaskEdit(options: Options) { }) watch(definition, () => { - taskDefinitions.value = definition.value?.taskDefinitionList || [] + if (definition.value) processDefinition.value = definition.value }) return { currTask, taskModalVisible, + processDefinition, taskConfirm, taskCancel, appendTask, editTask, copyTask, - taskDefinitions, removeTasks } }