Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

子流程节点重试操作优化&&子流程画布优化&&子流程配置快照传参逻辑优化 #7024

Merged
merged 2 commits into from
Aug 28, 2023
Merged

子流程节点重试操作优化&&子流程画布优化&&子流程配置快照传参逻辑优化 #7024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d206c5
optimization: 子流程节点重试操作优化&&子流程画布优化&&子流程配置快照传参逻辑优化
ywywZhou Aug 28, 2023
1390623
minor: 修改高度
ywywZhou Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/desktop/src/config/i18n/cn.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading