Skip to content

Commit

Permalink
子流程节点重试操作优化&&子流程画布优化&&子流程配置快照传参逻辑优化 (#7024)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ywywZhou
ywywZhou authored Aug 28, 2023
1 parent 61e745e commit cbe6312
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 78 deletions.
2 changes: 1 addition & 1 deletion frontend/desktop/src/config/i18n/cn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1766,7 +1766,7 @@ const cn = {
'跳过节点将忽略失败继续往后执行': '跳过节点将忽略失败继续往后执行',
'确定重试子流程【n】 ？': '确定重试子流程【{n}】 ？',
'确定重试节点【n】 ？': '确定重试节点【{n}】 ？',
'子任务中重试无法修改参数，如需修改请在根任务中操作': '子任务中重试无法修改参数，如需修改请在根任务中操作'
'非根节点仅支持以原参数进行重试': '非根节点仅支持以原参数进行重试'
}

export default cn
2 changes: 1 addition & 1 deletion frontend/desktop/src/config/i18n/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1800,7 +1800,7 @@ const en = {
'跳过节点将忽略失败继续往后执行': 'Skipping node will ignore the failure and continue executing the next step.',
'确定重试子流程【n】 ？': 'Retry this subflow [ {n} ] ？',
'确定重试节点【n】 ？': 'Retry this node [ {n} ] ？',
'子任务中重试无法修改参数，如需修改请在根任务中操作': 'Retrying in a sub-task does not allow modifying parameters. If modification is needed, please operate in the root task.'
'非根节点仅支持以原参数进行重试': 'Non-root nodes only support retrying with the original parameters.'
}

export default en
170 changes: 138 additions & 32 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,11 @@
v-bk-tooltips.top="$t('放大')"
@click="onZoomIn">
</i>
<i
:class="canvasExpand ? 'common-icon-partial-screen' : 'common-icon-full-screen'"
v-bk-tooltips.top="$t(canvasExpand ? '收起' : '最大化')"
@click="canvasExpand = !canvasExpand">
</i>
</div>
<!--可拖拽-->
<div class="resize-trigger" @mousedown.left="handleMousedown($event)"></div>
<i :class="['resize-proxy', 'top']" ref="resizeProxy"></i>
<div class="resize-mask" ref="resizeMask"></div>
</div>
<div
v-if="location"
Expand Down Expand Up @@ -534,7 +533,7 @@
this.loadNodeInfo()
if (this.subProcessPipeline) {
this.$nextTick(() => {
this.setSubprocessCanvasZoom()
this.initCanvasZoom()
})
}
},
Expand Down Expand Up @@ -701,13 +700,13 @@
* 兼容旧版本子流程节点输入数据
* 获取子流程输入参数 (subflow_detail_var 标识当前为子流程节点详情)
*/
constants = { subflow_detail_var: true, ...inputsInfo }
inputsInfo = Object.values(this.pipelineData.constants).reduce((acc, cur) => {
if (cur.show_type === 'show') {
acc[cur.key] = cur.value
}
return acc
}, {})
constants = { subflow_detail_var: true, ...inputsInfo }
}
for (const key in inputsInfo) {
renderData[key] = inputsInfo[key]
Expand Down Expand Up @@ -997,7 +996,9 @@
const time = name === 'history' ? 300 : 0
setTimeout(() => {
const scrollBoxDom = document.querySelector('.scroll-box')
scrollBoxDom.scrollTo({ top: scrollBoxDom.scrollHeight, behavior: 'smooth' })
const subProcessCanvasDom = document.querySelector('.sub-process')
const { height = 0 } = subProcessCanvasDom.getBoundingClientRect()
scrollBoxDom.scrollTo({ top: height, behavior: 'smooth' })
}, time)
}
},
Expand All @@ -1021,7 +1022,7 @@
if (node.isSubProcess || updateCanvas) {
this.canvasRandomKey = new Date().getTime()
this.$nextTick(() => {
this.setSubprocessCanvasZoom()
this.initCanvasZoom()
})
}
this.$emit('onClickTreeNode', node)
Expand All @@ -1040,23 +1041,11 @@
}
})
},
setSubprocessCanvasZoom () {
const flowDom = this.$el.querySelector('.sub-flow')
if (!flowDom) return
const { height = 0, width = 0 } = flowDom.getBoundingClientRect()
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
jsFlowInstance && jsFlowInstance.zoomOut(0.75, width / 2, height / 2)
const { start_event, flows } = this.subProcessPipeline
const firstNodeId = flows[start_event.outgoing].target
const firstNodeDom = document.querySelector(`#${firstNodeId}`)
const { y } = firstNodeDom.getBoundingClientRect()
jsFlowInstance.setCanvasPosition(0, 180 - y)
},
// 移动画布，将节点放到画布中央
moveNodeToView (id) {
// 判断dom是否存在当前视图中
const nodeEl = document.querySelector(`#${id} .canvas-node-item`)
if (!nodeEl) return
const isInViewPort = this.judgeInViewPort(nodeEl)
// 如果不存在需要将节点挪到画布中间
if (!isInViewPort) {
Expand All @@ -1079,6 +1068,34 @@
const { top, left } = element.getBoundingClientRect()
return top > canvasTop && top < canvasTop + height && left > canvasLeft && left < canvasLeft + width
},
// 画布初始化时缩放比偏移
initCanvasZoom () {
// 获取画布上下左右最大坐标
const xList = this.canvasData.locations.map(node => node.x)
const yList = this.canvasData.locations.map(node => node.y)
const minX = Math.min(...xList)
const maxX = Math.max(...xList)
const minY = Math.min(...yList)
const maxY = Math.max(...yList)
const maxXNodeId = this.canvasData.locations.find(node => node.x === maxX).id
const maxYNodeId = this.canvasData.locations.find(node => node.y === maxY).id
const { width } = this.$el.querySelector(`#${maxXNodeId}`).getBoundingClientRect()
const { height } = this.$el.querySelector(`#${maxYNodeId}`).getBoundingClientRect()
const netHeight = maxY - minY + height + 60
const netWidth = maxX - minX + width + 80
const subprocessDom = this.$el.querySelector('.sub-process')
const { height: canvasHeight, width: canvasWidth } = subprocessDom.getBoundingClientRect()
// 最大比例0.75
let ratio = Math.min(canvasHeight / netHeight, canvasWidth / netWidth)
ratio = ratio > 0.75 ? 0.75 : ratio
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
jsFlowInstance && jsFlowInstance.zoomOut(ratio, 0, 0)
// 设置偏移量
const offsetX = canvasWidth / 2 - (minX - 30 + netWidth / 2) * ratio
const offsetY = canvasHeight / 2 - (minY + netHeight / 2) * ratio
jsFlowInstance.setCanvasPosition(offsetX, offsetY, true)
},
toggleNodeActive (id, isActive) {
const node = document.getElementById(id)
Expand Down Expand Up @@ -1265,6 +1282,7 @@
const pipelineTree = JSON.parse(resp.pipeline_tree)
const parentInfo = {
parentId: nodeInfo.parentId ? nodeInfo.parentId + '-' + nodeInfo.id : nodeInfo.id,
independentId: nodeInfo.id,
parentLevel: nodeInfo.nodeLevel,
lastLevelStyle: 'margin-left: 0px',
taskId
Expand Down Expand Up @@ -1294,7 +1312,7 @@
this.$set(nodeActivity, 'pipeline', { ...pipelineTree, taskId })
this.canvasRandomKey = new Date().getTime()
this.$nextTick(() => {
this.setSubprocessCanvasZoom()
this.initCanvasZoom()
})
}
} catch (error) {
Expand Down Expand Up @@ -1394,7 +1412,8 @@
const info = {
name: this.executeInfo.name,
taskId: this.subProcessTaskId,
isSubProcessNode: this.isSubProcessNode
isSubProcessNode: this.isSubProcessNode,
isSubNode: !!this.nodeDetailConfig.root_node
}
this.$emit('onRetryClick', this.nodeDetailConfig.node_id, info)
},
Expand All @@ -1420,6 +1439,44 @@
},
onContinueClick () {
this.$emit('onContinueClick', this.nodeDetailConfig.node_id, this.subProcessTaskId)
},
handleMousedown (event) {
this.updateResizeMaskStyle()
this.updateResizeProxyStyle()
this.canvasExpand = false
document.addEventListener('mousemove', this.handleMouseMove)
document.addEventListener('mouseup', this.handleMouseUp)
},
handleMouseMove (event) {
const flowDom = this.$el.querySelector('.sub-flow')
const { top: flowTop } = flowDom.getBoundingClientRect()
let top = event.clientY - flowTop
let maxHeight = window.innerHeight - 180
maxHeight = maxHeight - (this.isShowActionWrap ? 48 : 0)
top = top > maxHeight ? maxHeight : top
top = top < 160 ? 160 : top
const resizeProxy = this.$refs.resizeProxy
resizeProxy.style.top = `${top}px`
},
updateResizeMaskStyle () {
const resizeMask = this.$refs.resizeMask
resizeMask.style.display = 'block'
resizeMask.style.cursor = 'row-resize'
},
updateResizeProxyStyle () {
const resizeProxy = this.$refs.resizeProxy
resizeProxy.style.visibility = 'visible'
},
handleMouseUp () {
const resizeMask = this.$refs.resizeMask
const resizeProxy = this.$refs.resizeProxy
resizeProxy.style.visibility = 'hidden'
resizeMask.style.display = 'none'
const subProcessDom = document.querySelector('.sub-process')
subProcessDom.style.height = resizeProxy.style.top
this.canvasExpand = true
document.removeEventListener('mousemove', this.handleMouseMove)
document.removeEventListener('mouseup', this.handleMouseUp)
}
}
}
Expand Down Expand Up @@ -1530,7 +1587,7 @@
}
.sub-process {
flex-shrink: 0;
height: 160px;
height: 320px;
margin: 0 25px 8px 15px;
position: relative;
background: #e1e4e8;
Expand Down Expand Up @@ -1573,7 +1630,7 @@
}
}
.flow-option {
width: 96px;
width: 68px;
height: 32px;
position: absolute;
bottom: 16px;
Expand All @@ -1589,22 +1646,18 @@
border-radius: 2px;
i {
cursor: pointer;
&:nth-child(2) {
margin: 0 14px;
}
&:last-child {
font-size: 14px;
margin-left: 14px;
}
&:hover {
color: #3a84ff;
}
}
}
&.canvas-expand {
height: calc(100% - 85px);
& + div {
.log-section {
height: 858px;
height: 768px;
}
}
}
Expand Down Expand Up @@ -1715,5 +1768,58 @@
}
}
}
.resize-trigger {
height: 5px;
width: calc(100% + 40px);
position: absolute;
left: -15px;
bottom: -5px;
cursor: row-resize;
z-index: 3;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 100%;
}
&::after {
content: "";
position: absolute;
top: 5px;
right: 50%;
width: 2px;
height: 2px;
color: #979ba5;
transform: translate3d(0,-50%,0);
background: currentColor;
box-shadow: 4px 0 0 0 currentColor,8px 0 0 0 currentColor,-4px 0 0 0 currentColor,-8px 0 0 0 currentColor;
}
&:hover::before {
background-color: #3a84ff;
}
}
.resize-proxy {
visibility: hidden;
position: absolute;
pointer-events: none;
z-index: 9999;
&.top {
top: 320px;
left: -15px;
width: calc(100% + 40px);
border-top: 1px dashed #3a84ff;
}
}
.resize-mask {
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
}
}
</style>
2 changes: 1 addition & 1 deletion frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteInfoForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@
async initData () {
try {
// 获取对应模板配置
const tplConfig = this.getNodeSnapshotConfig ? {} : await this.getNodeSnapshotConfig(this.nodeDetailConfig)
const tplConfig = await this.getNodeSnapshotConfig(this.nodeDetailConfig)
this.templateConfig = tplConfig.data || { ...this.nodeActivity, isOldData: true } || {}
if (this.isSubProcessNode || this.nodeActivity.type === 'SubProcess') { // 子流程任务节点
// tplConfig.data为null为该功能之前的旧数据，没有original_template_id字段的，不调接口
Expand Down
13 changes: 7 additions & 6 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/InputParams.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
:scheme="renderConfig"
:form-option="renderOption"
:constants="inputConstants"
v-model="inputRenderDate">
v-model="inputRenderData">
</RenderForm>
<NoData v-else></NoData>
</template>
<template v-else>
<jsonschema-form
v-if="renderConfig && renderConfig.properties && Object.keys(renderConfig.properties).length > 0"
:schema="renderConfig"
:value="inputRenderDate">
:value="inputRenderData">
</jsonschema-form>
<no-data v-else></no-data>
</template>
Expand Down Expand Up @@ -99,7 +99,7 @@
},
renderKey: null,
inputConstants: {},
inputRenderDate: {},
inputRenderData: {},
isExpand: true
}
},
Expand Down Expand Up @@ -132,7 +132,8 @@
}
this.inputConstants = constants
},
deep: true
deep: true,
immediate: true
},
renderData: {
handler (val) {
Expand All @@ -143,11 +144,11 @@
Object.keys(this.renderData).forEach(key => {
const value = this.renderData[key]
if (/^\${[^${}]+}$/.test(value) && key in this.inputConstants) {
this.renderData[key] = this.inputConstants[key]
renderData[key] = this.inputConstants[key]
}
})
}
this.inputRenderDate = renderData
this.inputRenderData = renderData
},
deep: true,
immediate: true
Expand Down
Loading

0 comments on commit cbe6312

Please sign in to comment.