From e88ec66539feec36614fd21a9dcfd56844ecdf7b Mon Sep 17 00:00:00 2001
From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com>
Date: Thu, 23 Nov 2023 09:46:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=90=E6=B5=81=E7=A8=8B=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20(#7182)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* bugfix: 线上测试问题修复

* optimization: 子流程交互优化
---
 .../common/RenderForm/tags/TagInput.vue       |   8 +-
 .../common/RenderForm/tags/TagTextarea.vue    |   6 +-
 .../pages/task/TaskExecute/ExecuteInfo.vue    |  49 ++++--
 .../TaskExecute/ExecuteInfo/ExecuteRecord.vue |   2 +-
 .../pages/task/TaskExecute/ModifyParams.vue   |   2 +-
 .../src/pages/task/TaskExecute/NodeTree.vue   |  15 +-
 .../pages/task/TaskExecute/NodeTreeItem.vue   |  12 +-
 .../pages/task/TaskExecute/TaskOperation.vue  | 152 +++++++++++++-----
 8 files changed, 173 insertions(+), 73 deletions(-)

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
index 39ad5725bd..5559ddd513 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -171,7 +171,7 @@
                         const divInputDom = this.$el.querySelector('.div-input')
                         if (divInputDom) {
                             divInputDom.innerText = this.value
-                            this.handleInputBlur()
+                            this.updateInputHtml()
                         }
                     })
                 }
@@ -182,7 +182,7 @@
                     const divInputDom = this.$el.querySelector('.div-input')
                     divInputDom.innerText = this.value
                 } else {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
             },
             formMode (val) {
@@ -190,7 +190,7 @@
                     this.$nextTick(() => {
                         const divInputDom = this.$el.querySelector('.div-input')
                         divInputDom.innerText = this.value
-                        this.handleInputBlur()
+                        this.updateInputHtml()
                     })
                 } else {
                     this.validate()
@@ -205,7 +205,7 @@
             if (divInputDom) {
                 divInputDom.innerText = this.value
                 if (this.render && this.value) {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
                 divInputDom.addEventListener('paste', this.handlePaste)
             }
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
index 0513a7e852..e32e75f5e3 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -138,7 +138,7 @@
                         const divInputDom = this.$el.querySelector('.div-input')
                         if (divInputDom) {
                             divInputDom.innerText = this.value
-                            this.handleInputBlur()
+                            this.updateInputHtml()
                         }
                     })
                 }
@@ -149,7 +149,7 @@
                     const divInputDom = this.$el.querySelector('.div-input')
                     divInputDom.innerText = this.value
                 } else {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
             }
         },
@@ -162,7 +162,7 @@
                 const value = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
                 divInputDom.innerText = value
                 if (this.render && value) {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
                 divInputDom.addEventListener('paste', this.handlePaste)
             }
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
index 304b8d9969..87cadc8558 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -168,7 +168,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="action-wrapper" v-if="isShowActionWrap">
+                <div class="action-wrapper" v-if="isShowActionWrap && !loading">
                     <template v-if="executeInfo.state === 'RUNNING' && !isSubProcessNode">
                         <bk-button
                             v-if="nodeDetailConfig.component_code === 'pause_node'"
@@ -227,7 +227,7 @@
 <script>
     import i18n from '@/config/i18n/index.js'
     import TemplateCanvas from '@/components/common/TemplateCanvas/index.vue'
-    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { mapState, mapActions } from 'vuex'
     import axios from 'axios'
     import tools from '@/utils/tools.js'
     import atomFilter from '@/utils/atomFilter.js'
@@ -332,8 +332,6 @@
                 loop: 1,
                 theExecuteTime: undefined,
                 isReadyStatus: true,
-                isShowSkipBtn: false,
-                isShowRetryBtn: false,
                 curActiveTab: 'record',
                 theExecuteRecord: 0,
                 executeRecord: {},
@@ -350,9 +348,6 @@
             }
         },
         computed: {
-            ...mapMutations('template/', [
-                'setLine'
-            ]),
             ...mapState({
                 'atomFormConfig': state => state.atomForm.config,
                 'atomOutputConfig': state => state.atomForm.outputConfig,
@@ -441,6 +436,22 @@
             isShowContinueBtn () {
                 return this.isLegacySubProcess && this.executeInfo.state === 'SUSPENDED'
             },
+            isShowSkipBtn () {
+                let isShow = false
+                if (this.realTimeState.state === 'FAILED') {
+                    const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
+                    isShow = this.location.type === 'tasknode' && activity.skippable
+                }
+                return isShow
+            },
+            isShowRetryBtn () {
+                let isShow = false
+                if (this.realTimeState.state === 'FAILED') {
+                    const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
+                    isShow = this.location.type === 'tasknode' ? activity.retryable : false
+                }
+                return isShow
+            },
             isShowActionWrap () {
                 // 任务终止时禁止节点操作
                 if (this.state === 'REVOKED') return false
@@ -508,7 +519,10 @@
                             this.loading = false
                             this.subprocessLoading = false
                             this.randomKey = new Date().getTime()
+                            const nodeInfo = this.getNodeInfo(this.nodeData, val.root_node, val.node_id)
+                            nodeInfo.dynamicLoad = false
                         } else {
+                            this.executeInfo.state = ''
                             this.loadNodeInfo()
                         }
                     }
@@ -625,15 +639,6 @@
                         const pluginInfo = this.atomFormInfo[componentCode][version]
                         this.executeInfo.plugin_name = `${pluginInfo.group_name}-${pluginInfo.name}`
                     }
-                    // 获取执行失败节点是否允许跳过，重试状态
-                    if (this.realTimeState.state === 'FAILED') {
-                        const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
-                        this.isShowSkipBtn = this.location.type === 'tasknode' && activity.skippable
-                        this.isShowRetryBtn = this.location.type === 'tasknode' ? activity.retryable : false
-                    } else {
-                        this.isShowSkipBtn = false
-                        this.isShowRetryBtn = false
-                    }
                 } catch (e) {
                     this.theExecuteTime = undefined
                     this.executeInfo = {}
@@ -970,7 +975,14 @@
                 this.randomKey = new Date().getTime()
             },
             onNodeClick (node) {
-                const nodeInfo = this.getNodeInfo(this.nodeData, '', node)
+                let parentId = ''
+                const { node_id: nodeId, root_node: rootNode } = this.nodeDetailConfig
+                if (nodeId === this.subProcessPipeline.id) {
+                    parentId = rootNode ? `${rootNode}-${nodeId}` : nodeId
+                } else {
+                    parentId = rootNode
+                }
+                const nodeInfo = this.getNodeInfo(this.nodeData, parentId, node)
                 if (nodeInfo) {
                     nodeInfo && this.onSelectNode(nodeInfo)
                     const parentInstance = this.$parent.$parent
@@ -1500,6 +1512,9 @@
     }
     .bk-resize-layout-border {
         border: none;
+        .bk-resize-layout-aside {
+            overflow: hidden;
+        }
     }
     .action-wrapper {
         width: 100%;
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue
index f64e4a0635..f9bf8a19e8 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue
@@ -113,7 +113,7 @@
                 if (state === 'CREATED') return this.$t('未执行')
                 // 如果整体任务执行完毕但有的节点没执行的话不展示描述
                 if (['FAILED', 'FINISHED'].includes(state) && state === 'READY') return this.$t('未执行')
-                return skip || error_ignored ? this.$t.t('失败后跳过') : state && TASK_STATE_DICT[state]
+                return skip || error_ignored ? this.$t('失败后跳过') : state && TASK_STATE_DICT[state]
             }
         },
         mounted () {
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue b/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue
index f990ad8553..0631bc4f36 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue
@@ -44,7 +44,7 @@
                         {{ confirmBtnText }}
                     </bk-button>
                 </span>
-                <bk-button theme="default" data-test-id="taskExecute_form_cancelBtn" @click="onCancelRetry">{{ $t('取消') }}</bk-button>
+                <bk-button theme="default" :disabled="pending" data-test-id="taskExecute_form_cancelBtn" @click="onCancelRetry">{{ $t('取消') }}</bk-button>
             </div>
 
             <bk-button v-else theme="default" data-test-id="taskExecute_form_closeBtn" @click="onCancelRetry">{{ $t('关闭') }}</bk-button>
diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue
index 2f373b45d2..08f9e27e5b 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue
@@ -55,7 +55,20 @@
                         nodeId = val.split('-').slice(0, -1).join('-')
                         this.activeId = nodeId
                     }
-                    this.setDefaultActiveId(this.treeData, nodeId)
+                    // 根据父节点过滤节点树
+                    let nodes = this.treeData
+                    const parentId = val.split('-').slice(1)
+                    if (parentId.length) {
+                        parentId.forEach(id => {
+                            nodes.some(item => {
+                                if (item.id === id) {
+                                    nodes = item.children
+                                    return true
+                                }
+                            })
+                        })
+                    }
+                    this.setDefaultActiveId(nodes, nodeId)
                 },
                 deep: true,
                 immediate: true
diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
index 810e6ee58c..c41cc5f308 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
@@ -65,8 +65,8 @@
                     <span v-else-if="!node.conditionType" class="default-node" :class="nodeStateMap[node.state]"></span>
                 </div>
                 <!-- 节点名称 -->
-                <span v-bk-overflow-tips class="node-name">
-                    <span>{{ node.title }}</span>
+                <span class="node-name">
+                    <span class="name" v-bk-overflow-tips>{{ node.title }}</span>
                     <span v-if="node.conditionType && (!node.children || !node.children.length)" class="empty-branch">
                         {{ $t('（') + $t('空分支') + $t('）') }}
                     </span>
@@ -283,9 +283,13 @@
                 display: flex;
                 align-items: center;
                 overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                .name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
                 .empty-branch {
+                    flex-shrink: 0;
                     font-size: 12px;
                     color: #979ba5;
                 }
diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
index 84024b69fe..c16267ed86 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -79,7 +79,7 @@
             </div>
             <div class="node-info-panel" ref="nodeInfoPanel" v-if="isNodeInfoPanelShow" slot="content">
                 <!--可拖拽-->
-                <template v-if="['viewNodeDetails', 'executeInfo'].includes(nodeInfoType)">
+                <template v-if="nodeInfoType === 'executeInfo'">
                     <div class="resize-trigger" @mousedown.left="handleMousedown($event)"></div>
                     <i :class="['resize-proxy', 'left']" ref="resizeProxy"></i>
                     <div class="resize-mask" ref="resizeMask"></div>
@@ -98,7 +98,8 @@
                     @packUp="packUp">
                 </ModifyParams>
                 <ExecuteInfo
-                    v-if="nodeInfoType === 'executeInfo' || nodeInfoType === 'viewNodeDetails'"
+                    v-if="nodeInfoType === 'executeInfo'"
+                    ref="executeInfo"
                     :state="state"
                     :node-data="nodeData"
                     :engine-ver="engineVer"
@@ -395,7 +396,8 @@
                 convergeInfo: {},
                 nodeSourceMaps: {},
                 nodeTargetMaps: {},
-                retryNodeName: ''
+                retryNodeName: '',
+                isSourceDetailSideBar: false // 节点重试侧栏是否从节点详情打开
             }
         },
         computed: {
@@ -513,12 +515,14 @@
                     this.onOperationClick('execute')
                 })
             }
+            window.addEventListener('resize', this.onWindowResize, false)
         },
         beforeDestroy () {
             if (source) {
                 source.cancel('cancelled')
             }
             this.cancelTaskStatusTimer()
+            window.removeEventListener('resize', this.onWindowResize, false)
         },
         methods: {
             ...mapActions('task/', [
@@ -849,15 +853,12 @@
                     }
                     const res = await this.instanceNodeSkip(data)
                     if (res.result) {
-                        this.isNodeInfoPanelShow = false
-                        this.nodeInfoType = ''
                         this.$bkMessage({
                             message: i18n.t('跳过成功'),
                             theme: 'success'
                         })
-                        setTimeout(() => {
-                            this.setTaskStatusTimer()
-                        }, 1000)
+                        // 更新节点执行信息
+                        this.updateNodeExecuteInfo()
                     }
                 } catch (e) {
                     console.log(e)
@@ -881,11 +882,8 @@
                             message: i18n.t('强制终止执行成功'),
                             theme: 'success'
                         })
-                        this.isNodeInfoPanelShow = false
-                        this.nodeInfoType = ''
-                        setTimeout(() => {
-                            this.setTaskStatusTimer()
-                        }, 1000)
+                        // 更新节点执行信息
+                        this.updateNodeExecuteInfo()
                     }
                 } catch (e) {
                     console.log(e)
@@ -934,11 +932,8 @@
                             message: i18n.t('继续成功'),
                             theme: 'success'
                         })
-                        this.isNodeInfoPanelShow = false
-                        this.nodeInfoType = ''
-                        setTimeout(() => {
-                            this.setTaskStatusTimer()
-                        }, 1000)
+                        // 更新节点执行信息
+                        this.updateNodeExecuteInfo()
                     }
                 } catch (e) {
                     console.log(e)
@@ -1075,6 +1070,8 @@
                         this.openNodeInfoPanel('modifyParams', isSubProcessNode ? i18n.t('重试子流程') : i18n.t('重试节点'))
                         this.retryNodeId = id
                     }
+                    // 记录是否由【节点详情侧栏】打开的【重试侧栏】
+                    this.isSourceDetailSideBar = !!info
                 } catch (error) {
                     console.warn(error)
                 }
@@ -1235,11 +1232,21 @@
                         data.node_id = node_id
                     }
                     await this.onRetryTask(data)
-                    this.isNodeInfoPanelShow = false
-                    this.retryNodeId = undefined
-                    // 重新轮询任务状态
-                    this.setTaskStatusTimer()
                     this.updateNodeActived(this.nodeDetailConfig.id, false)
+                    // 重新打开详情面板
+                    if (this.isSourceDetailSideBar) {
+                        setTimeout(() => {
+                            // 重新轮询任务状态
+                            Promise.resolve(this.loadTaskStatus()).then(() => {
+                                this.onNodeClick(data.node_id)
+                                this.retryNodeId = undefined
+                            })
+                        }, 1000)
+                    } else {
+                        this.retryNodeId = undefined
+                        // 更新节点执行信息
+                        this.updateNodeExecuteInfo()
+                    }
                 } catch (error) {
                     console.warn(error)
                 } finally {
@@ -1323,9 +1330,9 @@
                     return
                 }
 
+                this.approval.pending = true
                 this.$refs.approvalForm.validate().then(async () => {
                     try {
-                        this.approval.pending = true
                         const { id, is_passed, message } = this.approval
                         const params = {
                             is_passed,
@@ -1347,11 +1354,19 @@
                         this.approval.is_passed = true
                         this.approval.message = ''
                         this.approval.dialogShow = false
+                        this.$bkMessage({
+                            message: i18n.t('节点审批成功'),
+                            theme: 'success'
+                        })
+                        // 更新节点执行信息
+                        this.updateNodeExecuteInfo()
                     } catch (e) {
                         console.error(e)
                     } finally {
                         this.approval.pending = false
                     }
+                }, () => {
+                    this.approval.pending = false
                 })
             },
             onApprovalCancel () {
@@ -1360,21 +1375,23 @@
                 this.approval.message = ''
                 this.approval.dialogShow = false
             },
-            onPauseClick (id, taskId) {
-                this.taskPause(true, id, taskId)
-                this.isNodeInfoPanelShow = false
-                this.nodeInfoType = ''
-                setTimeout(() => {
-                    this.setTaskStatusTimer()
-                }, 1000)
+            async onPauseClick (id, taskId) {
+                try {
+                    await this.taskPause(true, id, taskId)
+                    // 更新节点执行信息
+                    this.updateNodeExecuteInfo()
+                } catch (error) {
+                    console.warn(error)
+                }
             },
-            onContinueClick (id, taskId) {
-                this.taskResume(true, id, taskId)
-                this.isNodeInfoPanelShow = false
-                this.nodeInfoType = ''
-                setTimeout(() => {
-                    this.setTaskStatusTimer()
-                }, 1000)
+            async onContinueClick (id, taskId) {
+                try {
+                    await this.taskResume(true, id, taskId)
+                    // 更新节点执行信息
+                    this.updateNodeExecuteInfo()
+                } catch (error) {
+                    console.warn(error)
+                }
             },
             onCloseConfigPanel () {
                 this.isShowConditionEdit = false
@@ -2329,9 +2346,20 @@
                 try {
                     this.pending.retry = true
                     await this.onRetryTask(data)
-                    this.isNodeInfoPanelShow = false
-                    this.setTaskStatusTimer()
-                    this.updateNodeActived(this.nodeDetailConfig.id, false)
+                    // 重新打开详情面板
+                    if (this.isSourceDetailSideBar) {
+                        setTimeout(() => {
+                            // 重新轮询任务状态
+                            Promise.resolve(this.loadTaskStatus()).then(() => {
+                                this.onNodeClick(data.node_id)
+                                this.retryNodeId = undefined
+                            })
+                        }, 1000)
+                    } else {
+                        this.isNodeInfoPanelShow = false
+                        this.setTaskStatusTimer()
+                        this.updateNodeActived(this.nodeDetailConfig.id, false)
+                    }
                 } catch (error) {
                     console.warn(error)
                 } finally {
@@ -2342,6 +2370,10 @@
                 this.isNodeInfoPanelShow = false
                 this.retryNodeId = undefined
                 this.updateNodeActived(id, false)
+                // 重新打开详情面板
+                if (this.isSourceDetailSideBar) {
+                    this.onNodeClick(id)
+                }
             },
             onModifyTimeSuccess (id) {
                 this.isNodeInfoPanelShow = false
@@ -2399,6 +2431,10 @@
             },
             packUp () {
                 this.isNodeInfoPanelShow = false
+                // 重新打开详情面板
+                if (this.isSourceDetailSideBar) {
+                    this.onNodeClick(this.retryNodeId)
+                }
                 this.retryNodeId = undefined
             },
             onshutDown () {
@@ -2482,6 +2518,35 @@
                 }
                 document.removeEventListener('mousemove', this.handleMouseMove)
                 document.removeEventListener('mouseup', this.handleMouseUp)
+            },
+            onWindowResize () {
+                const maxWidth = window.innerWidth - 400
+                let width = this.sidebarWidth
+                width = width > maxWidth ? maxWidth : width
+                width = width < 960 ? 960 : width
+                this.sidebarWidth = width
+            },
+            updateNodeExecuteInfo () {
+                if (this.isNodeInfoPanelShow && this.nodeInfoType === 'executeInfo') {
+                    this.updateNodeActived(this.nodeDetailConfig.id, true)
+                    const execInfoInstance = this.$refs.executeInfo
+                    execInfoInstance.loading = true
+                    execInfoInstance.subprocessLoading = !!execInfoInstance.subProcessPipeline
+                    setTimeout(() => {
+                        Promise.resolve(this.loadTaskStatus()).then(() => {
+                            execInfoInstance.loadNodeInfo()
+                        }).catch(() => {
+                            execInfoInstance.loading = false
+                            execInfoInstance.subprocessLoading = false
+                        })
+                    }, 1000)
+                } else {
+                    this.isNodeInfoPanelShow = false
+                    this.nodeInfoType = ''
+                    setTimeout(() => {
+                        this.setTaskStatusTimer()
+                    }, 1000)
+                }
             }
         }
     }
@@ -2549,8 +2614,11 @@
         }
     }
 }
-/deep/.bk-sideslider-content {
-    height: calc(100% - 60px);
+/deep/.bk-sideslider {
+    min-width: 1360px;
+    .bk-sideslider-content {
+        height: calc(100% - 60px);
+    }
 }
 .header {
     display: flex;