fix(frontend): 人工确认节点渲染问题 TencentBlueKing#8237

3octaves · Nov 27, 2024 · aa91602 · aa91602
1 parent e77f19e
commit aa91602
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 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
@@ -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 && (
             <div class='node-ractangle__operations'>
-              {!node.isTodoNode && status === 'RUNNING' && (
+              {!node.todoNodeStatus && status === 'RUNNING' && (
                 <i
                   class='operation-icon db-icon-qiangzhizhongzhi'
                   v-bk-tooltips={t('强制失败')}
@@ -255,7 +257,7 @@ export default class GraphRender {
               ) : (
                 ''
               )}
-              {node.isTodoNode ? (
+              {node.todoNodeStatus === 'TODO' ? (
                 <i
                   class='operation-icon db-icon-check'
                   v-bk-tooltips={t('人工确认')}

diff --git a/dbm-ui/frontend/src/views/task-history/common/utils.ts b/dbm-ui/frontend/src/views/task-history/common/utils.ts
@@ -32,7 +32,7 @@ export interface GraphNode {
   isExpand: boolean;
   index: number;
   parent: null | GraphNode;
-  isTodoNode: boolean;
+  todoNodeStatus: string;
   x?: number;
   y?: number;
   children?: GraphNode[][];
@@ -173,8 +173,8 @@ const formartLines = (data: FlowDetail, level = 0, lines: GraphLine[] = []) => {
  *  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<string, string>) => {
+  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<string, string>,
 ) {
   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<string, string>,
 ) {
   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<string, string>) {
   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
@@ -74,8 +74,9 @@
   type NodeType = ServiceReturnType<typeof getTaskflowDetails>['activities'][string];
 
   interface Props {
+    type: 'failed' | 'todo';
     nodesCount: number;
-    nodesTreeData: Array<NodeType & { failedChildren?: NodeType[] }>;
+    nodesTreeData: Array<NodeType & { failedChildren?: NodeType[]; todoChildren?: NodeType[] }>;
     statusKeypath: string;
     titleKeypath: string;
     tooltips: string;
@@ -95,7 +96,7 @@
     isOpen: () => boolean;
   }
 
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     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
@@ -128,6 +128,7 @@
                 theme="warning"
                 title-keypath="人工确认节点（n）"
                 :tooltips="t('人工确认节点列表')"
+                type="todo"
                 @after-show="(treeRef: Ref) => handleToolNodeTreeAfterShow(treeRef, false)"
                 @node-click="handleTreeNodeClick" />
               <PreviewNodeTree
@@ -139,6 +140,7 @@
                 status-keypath="失败n"
                 title-keypath="失败节点（n）"
                 :tooltips="t('失败节点列表')"
+                type="failed"
                 @after-show="(treeRef: Ref) => handleToolNodeTreeAfterShow(treeRef)"
                 @node-click="handleTreeNodeClick" />
               <i
@@ -275,6 +277,7 @@
               status-keypath="失败n"
               title-keypath="失败节点（n）"
               :tooltips="t('失败节点列表')"
+              type="failed"
               @after-show="(treeRef: Ref) => handleNodeTreeAfterShow(treeRef)"
               @node-click="handleTreeNodeClick" />
             <PreviewNodeTree
@@ -287,6 +290,7 @@
               theme="warning"
               title-keypath="人工确认节点（n）"
               :tooltips="t('人工确认节点列表')"
+              type="todo"
               @after-show="(treeRef: Ref) => handleNodeTreeAfterShow(treeRef, false)"
               @node-click="handleTreeNodeClick" />
             <BkTag
@@ -695,8 +699,8 @@
   watch(todoNodesCount, () => {
     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<string[]>((prevList, todoItem) => {
-      if ((status === 'RUNNING' || status === 'FAILED') && todoItem.status === 'TODO') {
-        prevList.push(todoItem.context.node_id)
+    return (details.todos || []).reduce<Record<string, string>>((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<string, string>) => {
     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,