Skip to content

Commit

Permalink
optimization: 节点&任务状态优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@ywywZhou @ZhuoZhuoCrayon
ywywZhou authored and ZhuoZhuoCrayon committed Oct 30, 2023
1 parent b0cdb91 commit 2a27b2e
Show file tree
Hide file tree
Showing 18 changed files with 602 additions and 244 deletions.
Binary file modified frontend/desktop/src/assets/fonts/bksops-icon.eot
View file
Binary file not shown.
20 changes: 19 additions & 1 deletion 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.
17 changes: 9 additions & 8 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,19 @@
<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="['PENDING_PROCESSING', 'PENDING_APPROVAL', 'PENDING_CONFIRMATION'].includes(node.status)" class="task-status-icon node-pending">
<i v-if="node.status === 'PENDING_PROCESSING'" v-bk-tooltips="$t('等待处理')" class="common-icon-clock"></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">
<div v-else-if="node.status === 'FINISHED' && node.skip" class="task-status-icon">
<i class="bk-icon icon-arrows-right-shape"></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="task-status-icon node-subscript">
<i class="bk-icon icon-arrows-right-shape"></i>
</div>
<!-- 节点顶部右侧生命周期 icon -->
<div class="node-phase-icon" v-if="[1, 2].includes(node.phase)">
Expand Down
26 changes: 22 additions & 4 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', { '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" class="error-handle-icon">
<span class="text">MR</span>
<span class="count">1</span>
</span>
<span v-if="node.retry" class="error-handle-icon">
<span class="text">AR</span>
<span class="count">2</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 Down
55 changes: 44 additions & 11 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,14 @@
@include nodeClick ($blueDark);
}
}
&.pending_processing,
&.pending_approval,
&.pending_confirmation {
@include taskNodeStyle (#ffb848);
&.actived {
@include nodeClick (#ffb848);
}
}
&.running {
.node-name {
border-color: $blueDark;
Expand Down Expand Up @@ -447,7 +455,6 @@
position: absolute;
top: -20px;
left: 0;
overflow: hidden;
.bk-form-checkbox,
.dark-circle {
float: left;
Expand All @@ -456,17 +463,29 @@
color: #979ba5;
}
.error-handle-icon {
float: left;
margin-right: 2px;
padding: 0 3px;
display: flex;
align-items: center;
margin: 4px 0 -4px;
line-height: 12px;
color: #ffffff;
background: #979ba5;
border-radius: 2px;
font-size: 12px;
transform: scale(0.75);
.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;
}
&:last-child {
margin-left: -5px;
}
&:first-child {
margin-left: -4px;
}
}
}
Expand Down Expand Up @@ -541,6 +560,12 @@
.common-icon-clock {
display: inline-block;
}
.common-icon-clock,
.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;
Expand All @@ -551,19 +576,27 @@
.retry-times {
font-size: 12px;
}
&.node-pending {
height: 20px;
width: 20px;
box-shadow: none;
}
&.task-node-loop {
position: relative;
top: 2px;
height: 16px;
width: 16px;
margin-left: 0;
color: #3a84ff;
background: #fff !important;
> i {
position: absolute;
font-size: 14px;
font-size: 16px;
}
> span {
position: relative;
top: -0.5px;
left: -0.5px;
font-weight: 700;
font-size: 18px;
transform: scale(.5);
Expand Down
10 changes: 9 additions & 1 deletion frontend/desktop/src/config/i18n/cn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1788,7 +1788,15 @@ const cn = {
'清除所有IP': '清除所有IP',
'清除异常IP': '清除异常IP',
'节点输入型变量仅支持从节点"取消使用变量"来删除': '节点输入型变量仅支持从节点"取消使用变量"来删除',
'节点输出型变量仅支持从节点"取消接收输出"来删除': '节点输出型变量仅支持从节点"取消接收输出"来删除 '
'节点输出型变量仅支持从节点"取消接收输出"来删除': '节点输出型变量仅支持从节点"取消接收输出"来删除',
'等待处理': '等待处理',
'等待审批': '等待处理',
'等待确认': '等待处理',
'再次执行': '再次执行',
'暂停执行': '暂停执行',
'终止执行': '终止执行',
'状态明细': '状态明细',
'已自动重试 m 次 (最多 10 次)，手动重试 n 次': '已自动重试 {m} 次 (最多 10 次)，手动重试 {n} 次'
}

export default cn
10 changes: 9 additions & 1 deletion frontend/desktop/src/config/i18n/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1822,7 +1822,15 @@ const en = {
'清除所有IP': 'Clear all IPs',
'清除异常IP': 'Clear abnormal IP',
'节点输入型变量仅支持从节点"取消使用变量"来删除': 'Node input variables can only be deleted by the node "Cancel Using variable"',
'节点输出型变量仅支持从节点"取消接收输出"来删除': 'Node output variables can only be deleted by the node "Cancel Receiving Output"'
'节点输出型变量仅支持从节点"取消接收输出"来删除': 'Node output variables can only be deleted by the node "Cancel Receiving Output"',
'等待处理': 'Pending Processing',
'等待审批': 'Pending Approval',
'等待确认': 'Pending Confirmation',
'再次执行': 'Redo',
'暂停执行': 'Pause',
'终止执行': 'Terminate',
'状态明细': 'Detail',
'已自动重试 m 次 (最多 10 次)，手动重试 n 次': ''
}

export default en
3 changes: 3 additions & 0 deletions frontend/desktop/src/constants/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const TASK_STATE_DICT = {
'READY': i18n.t('排队中'),
'SUSPENDED': i18n.t('已暂停'),
'NODE_SUSPENDED': i18n.t('节点暂停'),
'PENDING_PROCESSING': i18n.t('等待处理'),
'PENDING_APPROVAL': i18n.t('等待审批'),
'PENDING_CONFIRMATION': i18n.t('等待确认'),
'FAILED': i18n.t('失败'),
'FINISHED': i18n.t('完成'),
'REVOKED': i18n.t('终止')
Expand Down
4 changes: 4 additions & 0 deletions frontend/desktop/src/mixins/task.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ const task = {
status.cls = 'failed common-icon-dark-circle-close'
status.text = i18n.t('失败')
break
case 'PENDING_PROCESSING':
status.cls = 'running common-icon-dark-circle-ellipsis'
status.text = i18n.t('等待处理')
break
default:
status.text = i18n.t('未知')
}
Expand Down
41 changes: 28 additions & 13 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,9 @@
</bk-select>
<span>{{$t('次执行')}}</span>
</div>
<p class="retry-details-tips" v-if="realTimeState.state === 'FAILED' && realTimeState.retry">
{{ $t('已自动重试 m 次 (最多 10 次)，手动重试 n 次', { m: 1, n: 2 }) }}
</p>
</section>
<ExecuteRecord
v-if="curActiveTab === 'record'"
Expand Down Expand Up @@ -376,19 +379,27 @@
},
displayStatus () {
let state = ''
if (this.realTimeState.state === 'RUNNING') {
state = 'common-icon-dark-circle-ellipsis'
} else if (this.realTimeState.state === 'SUSPENDED') {
state = 'common-icon-dark-circle-pause'
} else if (this.realTimeState.state === 'FINISHED') {
const { skip, error_ignored } = this.realTimeState
state = skip || error_ignored ? 'common-icon-fail-skip' : 'bk-icon icon-check-circle-shape'
} else if (this.realTimeState.state === 'FAILED') {
state = 'common-icon-dark-circle-close'
} else if (this.realTimeState.state === 'CREATED') {
state = 'common-icon-waitting'
} else if (this.realTimeState.state === 'READY') {
state = 'common-icon-waitting'
switch (this.realTimeState.state) {
case 'RUNNING':
state = 'common-icon-dark-circle-ellipsis'
break
case 'SUSPENDED':
case 'PENDING_PROCESSING':
case 'PENDING_APPROVAL':
case 'PENDING_CONFIRMATION':
state = 'common-icon-dark-circle-pause'
break
case 'FINISHED':
const { skip, error_ignored } = this.realTimeState
state = skip || error_ignored ? 'common-icon-fail-skip' : 'bk-icon icon-check-circle-shape'
break
case 'FAILED':
state = 'common-icon-dark-circle-close'
break
case 'CREATED':
case 'READY':
state = 'common-icon-waitting'
break
}
return state
},
Expand Down Expand Up @@ -1717,6 +1728,10 @@
margin: 0 16px;
background: #dcdee5;
}
.retry-details-tips {
color: #979ba5;
margin-left: 16px;
}
}
.panel-title {
margin: 0;
Expand Down
Loading

0 comments on commit 2a27b2e

Please sign in to comment.