From aa91602ae3df103b46d08099e67d72d354fc6a29 Mon Sep 17 00:00:00 2001 From: 3octaves <873551943@qq.com> Date: Wed, 27 Nov 2024 19:01:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BA=BA=E5=B7=A5=E7=A1=AE?= =?UTF-8?q?=E8=AE=A4=E8=8A=82=E7=82=B9=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20#8237?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/task-history/common/graphRender.tsx | 10 +++--- .../src/views/task-history/common/utils.ts | 25 ++++++++------- .../components/PreviewNodeTree.vue | 7 +++-- .../src/views/task-history/pages/Details.vue | 31 +++++++++++-------- 4 files changed, 41 insertions(+), 32 deletions(-) diff --git a/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx b/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx index 355cc1e13d..5a9c3bf9f5 100644 --- a/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx +++ b/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx @@ -135,8 +135,10 @@ export default class GraphRender { }); } + console.log(node.todoNodeStatus); + const getNodeCls = (nodeStatus: string, isSkip: boolean) => { - if (node.isTodoNode) { + if (node.todoNodeStatus === 'TODO') { return 'node-ractangle--todo'; } if (isSkip) { @@ -162,7 +164,7 @@ export default class GraphRender { : 'db-icon-default-node'; const nodeCls = getNodeCls(status, skip); const createdStatus = status && status.toLowerCase() === 'created'; - const nodeClickType = type === 'ServiceActivity' && !createdStatus ? 'log' : ''; + const nodeClickType = type === 'ServiceActivity' && !createdStatus && !node.todoNodeStatus ? 'log' : ''; const isShowTime = status !== 'CREATED' && updatedAt && startedAt && updatedAt - startedAt >= 0; const diffSeconds = status === 'RUNNING' ? Math.floor(Date.now() / 1000) - startedAt : updatedAt - startedAt; return ( @@ -230,7 +232,7 @@ export default class GraphRender { {flowInfo.status !== 'REVOKED' && node.children === undefined && (
- {!node.isTodoNode && status === 'RUNNING' && ( + {!node.todoNodeStatus && status === 'RUNNING' && ( { * lines * } */ -export const formatGraphData = (data: FlowDetail, expandNodes: string[] = [], todoNodeIdList: string[] = []) => { - const rootNodes = getLevelNodes(data, null, 0, expandNodes); // 所有根节点 +export const formatGraphData = (data: FlowDetail, expandNodes: string[] = [], todoNodeMap?: Record) => { + const rootNodes = getLevelNodes(data, null, 0, expandNodes, true, todoNodeMap); // 所有根节点 const bothEndNodes = []; // 开始、结束根节点 const roots = []; // 非开始、结束的根节点 // 分离开始、结束根节点 @@ -186,7 +186,7 @@ export const formatGraphData = (data: FlowDetail, expandNodes: string[] = [], to } } // 获取子节点 - getNodeChildren(roots, expandNodes, todoNodeIdList); + getNodeChildren(roots, expandNodes, todoNodeMap); // 初始化根节点 x 位置 initRootNodesX(rootNodes); // 计算节点位置 @@ -283,10 +283,11 @@ function addNode( index: number, level: number, expandNodes: string[] = [], - todoNodeIdList: string[] = [], + todoNodeMap?: Record, ) { const isRoundType = bothEndTypes.includes(node.type); const len = nodes[index].length; + console.log(todoNodeMap); const graphNode: GraphNode = { id: node.id, tpl: isRoundType ? 'round' : 'ractangle', @@ -297,7 +298,7 @@ function addNode( level, parent, isExpand: expandNodes.includes(node.id), - isTodoNode: todoNodeIdList.includes(node.id), + todoNodeStatus: todoNodeMap ? todoNodeMap[node.id] : '', }; nodes[index].push(graphNode); } @@ -317,7 +318,7 @@ function getLevelNodes( level = 0, expandNodes: string[] = [], includesBothEnd = true, - todoNodeIdList: string[] = [], + todoNodeMap?: Record, ) { const nodes: GraphNode[][] = []; @@ -335,7 +336,7 @@ function getLevelNodes( // 处理开始节点 nodes[index] = []; - addNode(startNode as any as FlowDetail, parent, nodes, index, level, expandNodes, todoNodeIdList); + addNode(startNode as any as FlowDetail, parent, nodes, index, level, expandNodes, todoNodeMap); const queue = [[startNode]]; while (queue.length > 0) { @@ -356,7 +357,7 @@ function getLevelNodes( // 网关节点不处理 const isGetewaysType = getewayTypes.includes(targetNode.type); !isGetewaysType && - addNode(targetNode as any as FlowDetail, parent, nodes, index, level, expandNodes, todoNodeIdList); + addNode(targetNode as any as FlowDetail, parent, nodes, index, level, expandNodes, todoNodeMap); nextColumnNodes.push(targetNode); } } @@ -386,13 +387,13 @@ function getLevelNodes( * @param nodes 当层节点信息 * @param expandNodes 展开节点ID列表 */ -function getNodeChildren(nodes: GraphNode[][], expandNodes: string[] = [], todoNodeIdList: string[] = []) { +function getNodeChildren(nodes: GraphNode[][], expandNodes: string[] = [], todoNodeMap?: Record) { for (const columnNodes of nodes) { for (const node of columnNodes) { const { data, level } = node; if (data.pipeline) { - const childrenNodes = getLevelNodes(data.pipeline, node, level + 1, expandNodes, false, todoNodeIdList); - getNodeChildren(childrenNodes, expandNodes, todoNodeIdList); + const childrenNodes = getLevelNodes(data.pipeline, node, level + 1, expandNodes, false, todoNodeMap); + getNodeChildren(childrenNodes, expandNodes, todoNodeMap); node.children = childrenNodes; } } diff --git a/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue b/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue index abe0790b55..02eaef27f0 100644 --- a/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue +++ b/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue @@ -74,8 +74,9 @@ type NodeType = ServiceReturnType['activities'][string]; interface Props { + type: 'failed' | 'todo'; nodesCount: number; - nodesTreeData: Array; + nodesTreeData: Array; statusKeypath: string; titleKeypath: string; tooltips: string; @@ -95,7 +96,7 @@ isOpen: () => boolean; } - withDefaults(defineProps(), { + const props = withDefaults(defineProps(), { theme: 'error', children: 'children', marginRight: false, @@ -114,7 +115,7 @@ }; const handleNodeClick = (node: Props['nodesTreeData'][number]) => { - const iShowLog = !node.failedChildren; + const iShowLog = props.type === 'failed' && !node.failedChildren; emits('node-click', node, treeRef, iShowLog); }; diff --git a/dbm-ui/frontend/src/views/task-history/pages/Details.vue b/dbm-ui/frontend/src/views/task-history/pages/Details.vue index 2ac21b6ce4..5ce58448c9 100644 --- a/dbm-ui/frontend/src/views/task-history/pages/Details.vue +++ b/dbm-ui/frontend/src/views/task-history/pages/Details.vue @@ -128,6 +128,7 @@ theme="warning" title-keypath="人工确认节点（n）" :tooltips="t('人工确认节点列表')" + type="todo" @after-show="(treeRef: Ref) => handleToolNodeTreeAfterShow(treeRef, false)" @node-click="handleTreeNodeClick" /> { isFindFirstLeafTodoNode = false expandTodoNodeObjects = [] - const todoNodeIdList = getTodoNodeIdList(flowState.details) - todoNodesTreeData.value = todoNodeIdList.length ? generateTodoNodesTree(flowState.details.activities, todoNodeIdList) : []; + const todoNodeMap = getTodoNodeMap(flowState.details) + todoNodesTreeData.value = Object.keys(todoNodeMap).length ? generateTodoNodesTree(flowState.details.activities, todoNodeMap) : []; setTreeOpen([ todoTopPreviewNodeTreeRef, @@ -719,14 +723,14 @@ immediate: true, }); - const getTodoNodeIdList = (details: TaskflowDetails) => { + const getTodoNodeMap = (details: TaskflowDetails) => { const { status } = details.flow_info; - return (details.todos || []).reduce((prevList, todoItem) => { - if ((status === 'RUNNING' || status === 'FAILED') && todoItem.status === 'TODO') { - prevList.push(todoItem.context.node_id) + return (details.todos || []).reduce>((prevMap, todoItem) => { + if ((status === 'RUNNING' || status === 'FAILED') && (todoItem.status === 'TODO' || todoItem.status === 'RUNNING')) { + return Object.assign({}, prevMap, { [todoItem.context.node_id]: todoItem.status }) } - return prevList - }, []) + return prevMap + }, {}) } const generateFailNodesTree = (activities: TaskflowDetails['activities']) => { @@ -752,11 +756,11 @@ return flowList; } - const generateTodoNodesTree = (activities: TaskflowDetails['activities'], nodeList: string[]) => { + const generateTodoNodesTree = (activities: TaskflowDetails['activities'], todoNodeMap: Record) => { const flowList: TaskflowList = [] Object.values(activities).forEach((activityItem) => { if (activityItem.pipeline) { - const activityChildren = generateTodoNodesTree(activityItem.pipeline.activities, nodeList) + const activityChildren = generateTodoNodesTree(activityItem.pipeline.activities, todoNodeMap) Object.assign(activityItem, { todoChildren: activityChildren, }); @@ -769,7 +773,8 @@ } } } else { - if (nodeList.includes(activityItem.id)) { + const todoNodeItem = todoNodeMap[activityItem.id] + if (todoNodeItem && todoNodeItem === 'TODO') { flowList.push(activityItem); } } @@ -889,8 +894,8 @@ * 渲染画布节点 */ const renderNodes = (updateLogData = false) => { - const todoNodeIdList = getTodoNodeIdList(flowState.details) - const { locations, lines } = formatGraphData(flowState.details, expandNodes, todoNodeIdList); + const todoNodeMap = getTodoNodeMap(flowState.details) + const { locations, lines } = formatGraphData(flowState.details, expandNodes, todoNodeMap); flowState.instance.update({ locations, lines,