From 95d22a563d9059b70e4e2db6f8158015187634d1 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Mon, 2 Sep 2024 18:51:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E4=BB=BB=E5=8A=A1=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E4=BA=BA=E5=B7=A5=E7=A1=AE=E8=AE=A4=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96=20#6179?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |   4 +
 .../views/task-history/common/graphRender.tsx |   2 +-
 .../components/PreviewNodeTree.vue            |  18 +++
 .../src/views/task-history/pages/Details.vue  | 140 +++++++++++++-----
 .../common/components/flow-content/Index.vue  |  27 +++-
 .../components/flow/components/Approve.vue    |   7 +-
 .../components/approve/InnerManualConfirm.vue |  23 ++-
 .../flow/components/approve/ManualConfirm.vue |   7 +-
 8 files changed, 178 insertions(+), 50 deletions(-)

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 18ed5fd000..065e30fa72 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3462,5 +3462,9 @@
     "% 或 ? 不允许单独使用": "% 或 ? 不允许单独使用",
     "不允许为 *": "不允许为 *",
     "RedisCluster集群": "RedisCluster 集群",
+    "任务_待确认": "任务“待确认”",
+    "任务_执行成功": "任务“执行成功”",
+    "任务_执行失败": "任务“执行失败”",
+    "确认继续所有人工确认节点": "确认继续所有人工确认节点",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
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 a50bf8bb29..dd19c66265 100644
--- a/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx
+++ b/dbm-ui/frontend/src/views/task-history/common/graphRender.tsx
@@ -228,7 +228,7 @@ export default class GraphRender {
 
           {flowInfo.status !== 'REVOKED' && node.children === undefined && (
             <div class='node-ractangle__operations'>
-              {status === 'RUNNING' && (
+              {!todoNodeIdList.includes(node.id) && status === 'RUNNING' && (
                 <i
                   class='operation-icon db-icon-qiangzhizhongzhi'
                   v-bk-tooltips={t('强制失败')}
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 14a94e04c9..b8c3df9dd3 100644
--- a/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue
+++ b/dbm-ui/frontend/src/views/task-history/components/PreviewNodeTree.vue
@@ -87,6 +87,12 @@
     (e: 'after-show', value: typeof treeRef): void;
   }
 
+  interface Exposes {
+    close: () => void;
+    getTreeRef: () => typeof treeRef;
+    isOpen: () => boolean;
+  }
+
   withDefaults(defineProps<Props>(), {
     theme: 'error',
     children: 'children',
@@ -112,6 +118,18 @@
   const handleShowFailNodePanel = () => {
     isShowNodePanel.value = true;
   };
+
+  defineExpose<Exposes>({
+    close() {
+      isShowNodePanel.value = false;
+    },
+    getTreeRef() {
+      return treeRef;
+    },
+    isOpen() {
+      return isShowNodePanel.value === true;
+    },
+  });
 </script>
 
 <style lang="less">
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 aaea0fb1b7..6254cfc1b0 100644
--- a/dbm-ui/frontend/src/views/task-history/pages/Details.vue
+++ b/dbm-ui/frontend/src/views/task-history/pages/Details.vue
@@ -119,6 +119,7 @@
               @click.stop>
               <PreviewNodeTree
                 v-if="todoNodesCount > 0"
+                ref="todoToolPreviewNodeTreeRef"
                 children="todoChildren"
                 margin-right
                 :nodes-count="todoNodesCount"
@@ -127,17 +128,18 @@
                 theme="warning"
                 title-keypath="人工确认节点（n）"
                 :tooltips="t('人工确认节点列表')"
-                @after-show="(treeRef: Ref) => handleNodeTreeAfterShow(treeRef, false)"
+                @after-show="(treeRef: Ref) => handleToolNodeTreeAfterShow(treeRef, false)"
                 @node-click="(node: TaskflowList[number], treeRef: Ref) => handleTreeNodeClick(node, treeRef, false)" />
               <PreviewNodeTree
                 v-if="flowState.details.flow_info?.status === 'FAILED'"
+                ref="failedToolPreviewNodeTreeRef"
                 children="failedChildren"
                 :nodes-count="failNodesCount"
                 :nodes-tree-data="failNodesTreeData"
                 status-keypath="失败n"
                 title-keypath="失败节点（n）"
                 :tooltips="t('失败节点列表')"
-                @after-show="(treeRef: Ref) => handleNodeTreeAfterShow(treeRef)"
+                @after-show="(treeRef: Ref) => handleToolNodeTreeAfterShow(treeRef)"
                 @node-click="(node: TaskflowList[number], treeRef: Ref) => handleTreeNodeClick(node, treeRef)" />
               <i
                 v-bk-tooltips="t('放大')"
@@ -266,6 +268,7 @@
           <span>
             <PreviewNodeTree
               v-if="flowState.details.flow_info?.status === 'FAILED'"
+              ref="todoTopPreviewNodeTreeRef"
               children="failedChildren"
               :nodes-count="failNodesCount"
               :nodes-tree-data="failNodesTreeData"
@@ -276,6 +279,7 @@
               @node-click="(node: TaskflowList[number], treeRef: Ref) => handleTreeNodeClick(node, treeRef)" />
             <PreviewNodeTree
               v-else-if="todoNodesCount > 0"
+              ref="failedTopPreviewNodeTreeRef"
               children="todoChildren"
               :nodes-count="todoNodesCount"
               :nodes-tree-data="todoNodesTreeData"
@@ -426,6 +430,10 @@
   const todoNodesTreeData = ref<TaskflowList>([]);
   const failNodesTreeData = ref<TaskflowList>([]);
   const failNodesCount = ref(0);
+  const todoTopPreviewNodeTreeRef = ref<InstanceType<typeof PreviewNodeTree>>()
+  const failedTopPreviewNodeTreeRef = ref<InstanceType<typeof PreviewNodeTree>>()
+  const todoToolPreviewNodeTreeRef = ref<InstanceType<typeof PreviewNodeTree>>()
+  const failedToolPreviewNodeTreeRef = ref<InstanceType<typeof PreviewNodeTree>>()
   // const failNodeTreeRef = ref();
   // const topFailNodeTreeRef = ref();
   // const isShowFailNodePanel = ref(false);
@@ -625,12 +633,88 @@
    */
   const { isFullscreen, toggle } = useFullscreen(flowTopoRef);
 
-  const expandNodes:string[] = [];
-  const expandFailedNodeObjects: TaskflowList = [];
-  const expandTodoNodeObjects: TaskflowList = [];
+  let expandFailedNodeObjects: TaskflowList = [];
+  let expandTodoNodeObjects: TaskflowList = [];
+  const expandNodes: string[] = [];
   const showResultFileTypes: TicketTypesStrings[] = [TicketTypes.REDIS_KEYS_EXTRACT, TicketTypes.REDIS_KEYS_DELETE];
 
-  const generateFailNodesTree = (activities: TaskflowDetails['activities'] ) => {
+  watch(() => flowState.details, () => {
+    // if (failNodesTreeData.value.length > 0 || todoNodesTreeData.value.length > 0) {
+    //   return
+    // };
+    // failNodesCount.value = 0;
+
+    // if (flowState.details.activities) {
+    //   failNodesTreeData.value = flowState.details.flow_info?.status === 'FAILED' ? generateFailNodesTree(flowState.details.activities) : [];
+
+    //   const todoNodeIdList = flowState.details.todos.map(todoItem => todoItem.context.node_id)
+    //   todoNodesTreeData.value = todoNodeIdList.length ? generateTodoNodesTree(flowState.details.activities, todoNodeIdList) : [];
+    // }
+
+    // 只计算数量，当 待确认节点数 或 失败节点数 变化时，才刷新树结构
+    if (flowState.details.activities) {
+      let failNodesNum = 0
+
+      const getFailNodesNum = (activities: TaskflowDetails['activities']) => {
+        const flowList: TaskflowList = []
+        Object.values(activities).forEach(item  => {
+          if (item.status === 'FAILED') {
+            if (item.pipeline) {
+               getFailNodesNum(item.pipeline.activities)
+            } else {
+              failNodesNum = failNodesNum + 1;
+            }
+          }
+        })
+        return flowList;
+      }
+      getFailNodesNum(flowState.details.activities)
+
+      failNodesCount.value = failNodesNum
+    }
+  })
+
+  watch(failNodesCount, () => {
+    isFindFirstLeafFailNode = false;
+    failLeafNodes.value = []
+    expandFailedNodeObjects = []
+    failNodesTreeData.value = flowState.details.flow_info?.status === 'FAILED' ? generateFailNodesTree(flowState.details.activities) : [];
+
+    setTreeOpen([
+      failedTopPreviewNodeTreeRef,
+      failedToolPreviewNodeTreeRef
+    ])
+  })
+
+  watch(todoNodesCount, () => {
+    isFindFirstLeafTodoNode = false
+    expandTodoNodeObjects = []
+    const todoNodeIdList = flowState.details.todos.map(todoItem => todoItem.context.node_id)
+    todoNodesTreeData.value = todoNodeIdList.length ? generateTodoNodesTree(flowState.details.activities, todoNodeIdList) : [];
+
+    setTreeOpen([
+      todoTopPreviewNodeTreeRef,
+      todoToolPreviewNodeTreeRef,
+    ], false)
+  })
+
+  watch(() => baseInfo.value.status, (status) => {
+    if (status && flowState.instance === null) {
+      setTimeout(() => {
+        const todoNodeIdList = flowState.details.todos.map(todoItem => todoItem.context.node_id)
+        flowState.instance = new GraphCanvas(`#${flowState.flowSelectorId}`, baseInfo.value, todoNodeIdList);
+        flowState.instance
+          .on('nodeClick', handleNodeClick)
+          .on('nodeMouseEnter', handleNodeMouseEnter)
+          .on('nodeMouseLeave', handleNodeMouseLeave);
+        retryRenderFailedTips();
+      });
+    }
+  }, {
+    immediate: true,
+  });
+
+  const generateFailNodesTree = (activities: TaskflowDetails['activities']) => {
     const flowList: TaskflowList = []
     Object.values(activities).forEach(item  => {
       if (item.status === 'FAILED') {
@@ -645,7 +729,7 @@
           });
         } else {
           isFindFirstLeafFailNode = true;
-          failNodesCount.value = failNodesCount.value + 1;
+          // failNodesCount.value = failNodesCount.value + 1;
           failLeafNodes.value.push({ data: _.cloneDeep(item) } as GraphNode)
         }
       }
@@ -678,38 +762,22 @@
     return flowList;
   }
 
-  watch(() => flowState.details, () => {
-    if (failNodesTreeData.value.length > 0 || todoNodesTreeData.value.length > 0) {
-      return
-    };
-
-    failNodesCount.value = 0;
-    if (flowState.details.activities) {
-      if (flowState.details.flow_info?.status === 'FAILED') {
-        failNodesTreeData.value = generateFailNodesTree(flowState.details.activities);
+  const setTreeOpen = (refList: Array<typeof failedTopPreviewNodeTreeRef>, isFailed = true) => {
+    refList.forEach((refItem) => {
+      if (refItem.value?.isOpen()) {
+        handleNodeTreeAfterShow(refItem.value.getTreeRef(), isFailed)
       }
-      const todoNodeIdList = flowState.details.todos.map(todoItem => todoItem.context.node_id)
-      if (todoNodeIdList.length) {
-        todoNodesTreeData.value = generateTodoNodesTree(flowState.details.activities, todoNodeIdList);
-      }
-    }
-  })
+    })
+  }
 
-  watch(() => baseInfo.value.status, (status) => {
-    if (status && flowState.instance === null) {
-      setTimeout(() => {
-        const todoNodeIdList = flowState.details.todos.map(todoItem => todoItem.context.node_id)
-        flowState.instance = new GraphCanvas(`#${flowState.flowSelectorId}`, baseInfo.value, todoNodeIdList);
-        flowState.instance
-          .on('nodeClick', handleNodeClick)
-          .on('nodeMouseEnter', handleNodeMouseEnter)
-          .on('nodeMouseLeave', handleNodeMouseLeave);
-        retryRenderFailedTips();
-      });
+  const handleToolNodeTreeAfterShow = (treeRef: Ref, isFailed = true) => {
+    if (isFailed) {
+      todoToolPreviewNodeTreeRef.value?.close()
+    } else {
+      failedToolPreviewNodeTreeRef.value?.close()
     }
-  }, {
-    immediate: true,
-  });
+    handleNodeTreeAfterShow(treeRef, isFailed)
+  }
 
   const handleNodeTreeAfterShow = (treeRef: Ref, isFailed = true) => {
     setTimeout(() => {
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue
index fd0313fb55..656ea6d76c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue
@@ -128,12 +128,16 @@
       </template>
       <template
         v-else-if="
-          content.status === 'RUNNING' &&
           content.flow_type === 'INNER_FLOW' &&
           content.todos.length > 0 &&
           content.todos.every((todoItem) => todoItem.type !== 'RESOURCE_REPLENISH')
         ">
-        {{ t('任务待确认') }}
+        <span
+          :style="{
+            color: getStatusColor(content.status) || '#63656e',
+          }">
+          {{ getStatusText(content.status) || content.summary }}
+        </span>
       </template>
       <template v-else-if="isPause && isTodos === false">
         <span>{{ t('处理人') }}: </span>
@@ -293,6 +297,25 @@
   //   return `${expireTime * 24} ${t('小时')}`;
   // });
 
+  const getStatusText = (status: string) => {
+    const infoMap: Record<string, string> = {
+      SUCCEEDED: t('任务_执行成功'),
+      FAILED: t('任务_执行失败'),
+      RUNNING: t('任务_待确认'),
+    };
+    return infoMap[status] ? infoMap[status] : null;
+  };
+
+  const getStatusColor = (status: string) => {
+    const infoMap: Record<string, string> = {
+      SUCCEEDED: '#14a568',
+      FAILED: '#ea3636',
+      RUNNING: '#ff9c01',
+      TERMINATED: '#ea3636',
+    };
+    return infoMap[status] ? infoMap[status] : null;
+  };
+
   const handleConfirmTerminal = (item: FlowItem) => {
     btnState.terminateLoading = true;
     revokeTicketFlow({
diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/Approve.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/Approve.vue
index cd0d244338..181db7a90c 100644
--- a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/Approve.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/Approve.vue
@@ -117,10 +117,9 @@
           <div
             v-else
             class="flow-todo__infos">
-            {{ item.done_by }} {{ t('处理完成') }}， {{ t('操作') }}：<span
-              :class="String(item.status).toLowerCase()"
-              >{{ getOperation(item) }}</span
-            >， {{ t('耗时') }}：{{ getCostTimeDisplay(item.cost_time) }}
+            {{ item.done_by }} {{ t('处理完成') }}， {{ t('操作') }}：
+            <span :class="String(item.status).toLowerCase()">{{ getOperation(item) }} </span>
+            ， {{ t('耗时') }}：{{ getCostTimeDisplay(item.cost_time) }}
             <template v-if="content.url">
               ，<a :href="content.url">{{ t('查看详情') }} &gt;</a>
             </template>
diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/InnerManualConfirm.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/InnerManualConfirm.vue
index f8161da334..32f5b22818 100644
--- a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/InnerManualConfirm.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/InnerManualConfirm.vue
@@ -14,14 +14,14 @@
 <template>
   <div>
     <template v-if="content.status === 'RUNNING'">
-      {{ t('任务待确认') }}
+      <span style="color: #ff9c01">{{ t('任务“待确认”') }}</span>
     </template>
     <template v-else>
       <span
         :style="{
-          color: content.status === 'TERMINATED' ? '#ea3636' : '#63656e',
+          color: getStatusColor(content.status) || '#63656e',
         }">
-        {{ content.summary }}
+        {{ getStatusText(content.status) || content.summary }}
       </span>
       <template v-if="content.err_msg">
         <span>，{{ t('处理人') }}: </span>
@@ -69,4 +69,21 @@
   defineProps<Props>();
 
   const { t } = useI18n();
+
+  const getStatusText = (status: string) => {
+    const infoMap: Record<string, string> = {
+      SUCCEEDED: t('任务_执行成功'),
+      FAILED: t('任务_执行失败'),
+    };
+    return infoMap[status] ? infoMap[status] : null;
+  };
+
+  const getStatusColor = (status: string) => {
+    const infoMap: Record<string, string> = {
+      SUCCEEDED: '#14a568',
+      FAILED: '#ea3636',
+      TERMINATED: '#ea3636',
+    };
+    return infoMap[status] ? infoMap[status] : null;
+  };
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/ManualConfirm.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/ManualConfirm.vue
index e1e5672b2d..26dcad07d8 100644
--- a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/ManualConfirm.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/approve/ManualConfirm.vue
@@ -109,10 +109,9 @@
     <div
       v-else
       class="flow-todo__infos">
-      {{ data.done_by }} {{ t('处理完成') }}， {{ t('操作') }}：<span :class="String(data.status).toLowerCase()">{{
-        getOperation(data)
-      }}</span
-      >， {{ t('耗时') }}：{{ getCostTimeDisplay(data.cost_time) }}
+      {{ data.done_by }} {{ t('处理完成') }}， {{ t('操作') }}：
+      <span :class="String(data.status).toLowerCase()">{{ getOperation(data) }} </span>
+      ， {{ t('耗时') }}：{{ getCostTimeDisplay(data.cost_time) }}
       <template v-if="content.url">
         ，<a :href="content.url">{{ t('查看详情') }} &gt;</a>
       </template>