Skip to content

Commit

Permalink
Merge pull request #7066 from TencentBlueKing/feature/issue_6653
Browse files Browse the repository at this point in the history 
节点&任务状态优化
  • Loading branch information
@hanshuaikang
hanshuaikang authored Dec 20, 2023
2 parents d4f252e + a3f2385 commit 8cd814e
Show file tree
Hide file tree
Showing 49 changed files with 1,702 additions and 509 deletions.
Binary file modified frontend/desktop/src/assets/fonts/bksops-icon.eot
View file
Binary file not shown.
63 changes: 57 additions & 6 deletions frontend/desktop/src/assets/fonts/bksops-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/desktop/src/assets/fonts/bksops-icon.ttf
View file
Binary file not shown.
Binary file modified frontend/desktop/src/assets/fonts/bksops-icon.woff
View file
Binary file not shown.
7 changes: 2 additions & 5 deletions frontend/desktop/src/components/common/TableRenderHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,17 +339,14 @@
}
.table-header-filter-popover {
.tippy-tooltip {
padding: 4px 0 0 0;
.tippy-content {
background: #fff;
}
padding: 4px 0;
background: #fff !important;
}
.option-list {
width: 200px;
max-height: 350px;
overflow: auto;
@include scrollbar;
margin-bottom: 15px;
background: #fff;
.option-item {
height: 32px;
Expand Down
28 changes: 19 additions & 9 deletions frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/NodeRightIconStatus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,23 @@
<div v-if="node.status === 'RUNNING'" class="task-status-icon">
<i class="common-icon-loading"></i>
</div>
<div v-else-if="node.status === 'FINISHED' && (node.retry > 0 || node.skip)" class="task-status-icon">
<i v-if="node.skip" class="bk-icon icon-arrows-right-shape"></i>
<span v-else-if="node.retry > 0" class="retry-times">{{ node.retry > 99 ? '100+' : node.retry }}</span>
<!-- 节点等待任务继续 -->
<div v-else-if="node.status === 'PENDING_TASK_CONTINUE'" class="node-pending task-status-icon">
<i v-bk-tooltips="$t('等待任务继续')" class="common-icon-pause"></i>
</div>
<!--节点等待处理/等待审批/等待确认-->
<div v-else-if="isPendingState" class="task-status-icon node-pending">
<i v-if="node.status === 'PENDING_PROCESSING'" v-bk-tooltips="$t('等待处理')" class="bk-icon icon-time"></i>
<i v-if="node.status === 'PENDING_APPROVAL'" v-bk-tooltips="$t('等待审批')" class="common-icon-pending-approval"></i>
<i v-if="node.status === 'PENDING_CONFIRMATION'" v-bk-tooltips="$t('等待确认')" class="common-icon-pending-confirm"></i>
</div>
<!-- 节点失败后自动忽略icon -->
<div v-else-if="node.status === 'FINISHED' && node.error_ignored" class="task-status-icon node-subscript">
<i class="bk-icon icon-arrows-right-shape"></i>
<div v-else-if="node.status === 'FINISHED' && node.skip" class="node-manual-skip">
<i class="common-icon-manual-skip"></i>
</div>
<!-- 节点循环次数 -->
<div v-if="node.loop > 1" :class="['task-status-icon task-node-loop', { 'loop-plural': node.loop > 9 }]">
<i :class="`common-icon-loading-${ node.loop > 9 ? 'oval' : 'round' }`"></i>
<span>{{ node.loop > 99 ? '99+' : node.loop }}</span>
<!-- 节点失败后自动忽略icon -->
<div v-else-if="node.status === 'FINISHED' && node.error_ignored" class="node-auto-skip">
<i class="common-icon-auto-skip"></i>
</div>
<!-- 节点顶部右侧生命周期 icon -->
<div class="node-phase-icon" v-if="[1, 2].includes(node.phase)">
Expand All @@ -38,6 +43,11 @@
name: 'NodeRightIconStatus',
props: {
node: Object
},
computed: {
isPendingState () {
return ['PENDING_PROCESSING', 'PENDING_APPROVAL', 'PENDING_CONFIRMATION'].includes(this.node.status)
}
}
}
</script>
Expand Down
24 changes: 23 additions & 1 deletion frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/Subflow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,28 @@
@change="onNodeCheckClick">
</bk-checkbox>
</template>
<!-- 节点循环次数 -->
<div v-if="node.loop > 1" :class="['task-status-icon task-node-loop', { 'loop-plural': node.loop > 9 }]">
<i :class="`common-icon-loading-${ node.loop > 9 ? 'oval' : 'round' }`"></i>
<span>{{ node.loop > 99 ? '99+' : node.loop }}</span>
</div>
<!-- 任务节点自动重试/手动重试 -->
<template v-if="node.mode === 'execute'">
<span v-if="node.retry - node.auto_skip > 0" class="error-handle-icon">
<span class="text">MR</span>
<span class="count">{{ node.retry - node.auto_skip }}</span>
</span>
<span v-if="node.auto_skip" class="error-handle-icon">
<span class="text">AR</span>
<span class="count">{{ node.auto_skip }}</span>
</span>
</template>
<template v-else>
<span v-if="node.error_ignorable" class="error-handle-icon"><span class="text">AS</span></span>
<span v-if="node.isSkipped || node.skippable" class="error-handle-icon"><span class="text">MS</span></span>
<span v-if="node.can_retry || node.retryable" class="error-handle-icon"><span class="text">MR</span></span>
<span v-if="node.auto_retry && node.auto_retry.enable" class="error-handle-icon"><span class="text">AR</span></span>
</template>
</div>
<div v-if="node.hasUpdated" class="updated-dot">
<div class="ripple"></div>
Expand Down Expand Up @@ -67,7 +89,7 @@
</template>
<span v-if="node.status === 'SUSPENDED'" @click.stop="onSubflowPauseResumeClick('resume')">
<i class="common-icon-play"></i>
{{ $t('继续') }}
{{ $t('确认继续') }}
</span>
</template>
</div>
Expand Down
30 changes: 24 additions & 6 deletions frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/TaskNode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,28 @@
@change="onNodeCheckClick">
</bk-checkbox>
</template>
<span v-if="node.error_ignorable" class="error-handle-icon"><span class="text">AS</span></span>
<span v-if="node.isSkipped || node.skippable" class="error-handle-icon"><span class="text">MS</span></span>
<span v-if="node.can_retry || node.retryable" class="error-handle-icon"><span class="text">MR</span></span>
<span v-if="node.auto_retry && node.auto_retry.enable" class="error-handle-icon"><span class="text">AR</span></span>
<!-- 节点循环次数 -->
<div v-if="node.loop > 1" class="task-status-icon task-node-loop">
<i class="common-icon-loading-oval"></i>
<span>{{ node.loop > 99 ? '99+' : node.loop }}</span>
</div>
<!-- 任务节点自动重试/手动重试 -->
<template v-if="node.mode === 'execute'">
<span v-if="node.retry - node.auto_skip > 0" class="error-handle-icon">
<span class="text">MR</span>
<span class="count">{{ node.retry - node.auto_skip }}</span>
</span>
<span v-if="node.auto_skip" class="error-handle-icon">
<span class="text">AR</span>
<span class="count">{{ node.auto_skip }}</span>
</span>
</template>
<template v-else>
<span v-if="node.error_ignorable" class="error-handle-icon"><span class="text">AS</span></span>
<span v-if="node.isSkipped || node.skippable" class="error-handle-icon"><span class="text">MS</span></span>
<span v-if="node.can_retry || node.retryable" class="error-handle-icon"><span class="text">MR</span></span>
<span v-if="node.auto_retry && node.auto_retry.enable" class="error-handle-icon"><span class="text">AR</span></span>
</template>
</div>
<!-- 节点右上角执行相关的icon区域 -->
<node-right-icon-status :node="node"></node-right-icon-status>
Expand All @@ -58,10 +76,10 @@
<i class="common-icon-skip"></i>
{{ $t('跳过') }}
</span>
<template v-if="node.status === 'RUNNING'">
<template v-if="['RUNNING', 'PENDING_PROCESSING', 'PENDING_APPROVAL', 'PENDING_CONFIRMATION'].includes(node.status)">
<span v-if="node.code === 'pause_node'" @click.stop="$emit('onTaskNodeResumeClick', node.id)">
<i class="common-icon-play"></i>
{{ $t('继续') }}
{{ $t('确认继续') }}
</span>
<span v-else-if="node.code === 'bk_approve'" @click.stop="$emit('onApprovalClick', node.id)">
<i class="common-icon-circulation"></i>
Expand Down
115 changes: 82 additions & 33 deletions frontend/desktop/src/components/common/TemplateCanvas/NodeTemplate/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,15 @@
@include nodeClick ($blueDark);
}
}
&.pending_task_continue,
&.pending_processing,
&.pending_approval,
&.pending_confirmation {
@include taskNodeStyle (#ffb848);
&.actived {
@include nodeClick (#ffb848);
}
}
&.running {
.node-name {
border-color: $blueDark;
Expand Down Expand Up @@ -406,6 +415,11 @@
.node-icon-font {
font-size: 16px;
color: #ffffff;
&.common-icon-bk-plugin-message,
&.common-icon-bk-plugin-confirm,
&.common-icon-bk-plugin-approval {
font-size: 14px;
}
}
.stage-name {
padding: 0 4px;
Expand Down Expand Up @@ -447,26 +461,43 @@
position: absolute;
top: -20px;
left: 0;
overflow: hidden;
height: 20px;
.bk-form-checkbox,
.dark-circle {
float: left;
margin-right: 2px;
margin-bottom: 2px;
font-size: 14px;
color: #979ba5;
}
.error-handle-icon {
float: left;
margin-right: 2px;
padding: 0 3px;
display: flex;
align-items: center;
margin-left: -4px;
line-height: 12px;
color: #ffffff;
background: #979ba5;
border-radius: 2px;
font-size: 12px;
transform: scale(0.75) translateY(-1px);
.text {
display: inline-block;
font-size: 12px;
transform: scale(0.8);
padding: 2px 3px;
color: #ffffff;
background: #979ba5;
border-radius: 1px 0 0 1px;
}
.count {
padding: 2px 3px;
color: #636568;
background: #dcdee5;
border-radius: 0px 1px 1px 0;
}
&:nth-of-type(2) {
margin-left: -1px;
}
&:last-child {
margin-left: -5px;
}
&:nth-of-type(4) {
margin-left: -5px;
}
&:nth-of-type(5) {
margin-left: -4px;
}
}
}
Expand Down Expand Up @@ -518,16 +549,16 @@
align-items: center;
justify-content: space-between;
top: -10px;
right: -8px;
height: 18px;
right: -10px;
height: 20px;
}
.task-status-icon {
display: flex;
justify-content: center;
align-items: center;
margin-left: 2px;
width: 18px;
height: 18px;
width: 20px;
height: 20px;
font-size: 14px;
border-radius: 50%;
background: #f8b53f;
Expand All @@ -541,37 +572,45 @@
.common-icon-clock {
display: inline-block;
}
.common-icon-pending-approval,
.common-icon-pending-confirm {
font-size: 12px;
color: #fff;
}
.common-icon-loading {
display: inline-block;
animation: loading 1.4s infinite linear;
}
.icon-arrows-right-shape {
font-size: 12px;
.common-icon-pause {
font-size: 20px;
transform: scale(0.5);
}
.retry-times {
font-size: 12px;
}
&.node-pending {
height: 20px;
width: 20px;
box-shadow: none;
}
&.task-node-loop {
position: relative;
height: 16px;
width: 16px;
width: 24px;
margin: 0 4px 0 0;
transform: translateY(1px);
color: #3a84ff;
background: #fff !important;
background: transparent !important;
box-shadow: none;
> i {
position: absolute;
font-size: 14px;
}
> span {
position: relative;
top: -0.5px;
top: -1px;
left: 0px;
font-weight: 700;
font-size: 18px;
transform: scale(.5);
}
&.loop-plural {
width: 26px;
height: 16px;
border-radius: 8px;
transform: scale(.5) translateY(2px);
}
}
@keyframes loading {
Expand All @@ -583,13 +622,23 @@
}
}
}
.node-subscript {
font-size: 12px;
background: #ea3636 !important;
.node-manual-skip,
.node-auto-skip {
display: flex;
height: 20px;
font-size: 20px;
border-radius: 50%;
color: #f0a0a0;
background: #fff;
i {
transform: translateY(1px);
}
}
.node-phase-icon {
transform: translateY(-2px);
margin-right: 4px;
i {
font-size: 14px;
font-size: 16px;
&.phase-warn {
color: $yellowDark;
}
Expand Down
12 changes: 6 additions & 6 deletions frontend/desktop/src/components/common/TemplateCanvas/ToolPanel/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="tool-position">
<div
:class="['tool-icon', {
'actived': showSmallMap
'is-active': showSmallMap
}]"
v-bk-tooltips="{
content: $t('缩略视图'),
Expand Down Expand Up @@ -60,7 +60,7 @@
</div>
<div
:class="['tool-icon', {
'actived': isSelectionOpen
'is-active': isSelectionOpen
}]"
v-if="editable"
v-bk-tooltips="{
Expand All @@ -85,7 +85,7 @@
</div>
<div
:class="['tool-icon', {
'actived': isAllSelected
'is-active': isAllSelected
}]"
v-if="isShowSelectAllTool"
v-bk-tooltips="{
Expand All @@ -99,7 +99,7 @@
</div>
<div
:class="['tool-icon', {
'actived': isShowHotKey
'is-active': isShowHotKey
}]"
v-bk-tooltips="{
content: $t('快捷键'),
Expand All @@ -111,7 +111,7 @@
</div>
<div
:class="['tool-icon', {
'actived': isPerspective
'is-active': isPerspective
}]"
v-bk-tooltips="{
content: $t('变量引用预览'),
Expand Down Expand Up @@ -251,7 +251,7 @@
background: #f4f7ff;
border-radius: 1px;
}
&.actived {
&.is-active {
color: #3a84ff;
background: #f4f7ff;
border-radius: 1px;
Expand Down
Loading

0 comments on commit 8cd814e

Please sign in to comment.