Browse Source

[Feature][UI Next] Add dag refresh button on workflow instance (#8514)

* modify workflow instance interval refresh

* workflow instance add dag refresh button
3.0.0/version-upgrade
Devosend 3 years ago committed by GitHub
parent
commit
52ed895338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  2. 4
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  3. 2
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx
  4. 32
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
  5. 19
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
  6. 2
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts

4
dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@ -480,7 +480,8 @@ const project = {
local_parameters: 'Local parameters',
type: 'Type',
retry_count: 'Retry Count',
submit_time: 'Submit Time'
submit_time: 'Submit Time',
refresh_status_succeeded: 'Refresh status succeeded'
},
task: {
task_name: 'Task Name',
@ -540,6 +541,7 @@ const project = {
save: 'Save',
close: 'Close',
format: 'Format',
refresh_dag_status: 'Refresh DAG status',
layout_type: 'Layout Type',
grid_layout: 'Grid',
dagre_layout: 'Dagre',

4
dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@ -478,7 +478,8 @@ const project = {
local_parameters: '局部参数',
type: '类型',
retry_count: '重试次数',
submit_time: '提交时间'
submit_time: '提交时间',
refresh_status_succeeded: '刷新状态成功'
},
task: {
task_name: '任务名称',
@ -538,6 +539,7 @@ const project = {
save: '保存',
close: '关闭',
format: '格式化',
refresh_dag_status: '刷新DAG状态',
layout_type: '布局类型',
grid_layout: '网格布局',
dagre_layout: '层次布局',

2
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx

@ -21,7 +21,7 @@ import styles from './status.module.scss'
const props = {
t: {
type: Object as PropType<any>,
type: Function as PropType<any>,
require: true
},
taskInstance: {

32
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx

@ -29,7 +29,8 @@ import {
CopyOutlined,
DeleteOutlined,
RightCircleOutlined,
FundViewOutlined
FundViewOutlined,
SyncOutlined
} from '@vicons/antd'
import { useNodeSearch, useTextCopy } from './dag-hooks'
import { DataUri } from '@antv/x6'
@ -60,7 +61,7 @@ const props = {
export default defineComponent({
name: 'workflow-dag-toolbar',
props,
emits: ['versionToggle', 'saveModelToggle', 'removeTasks'],
emits: ['versionToggle', 'saveModelToggle', 'removeTasks', 'refresh'],
setup(props, context) {
const { t } = useI18n()
@ -302,6 +303,33 @@ export default defineComponent({
default: () => t('project.dag.download_png')
}}
></NTooltip>
{/* Refresh */}
{props.instance && (
<NTooltip
v-slots={{
trigger: () => (
<NButton
class={Styles['toolbar-right-item']}
strong
secondary
circle
type='info'
onClick={() => {
context.emit('refresh')
}}
v-slots={{
icon: () => (
<NIcon>
<SyncOutlined />
</NIcon>
)
}}
/>
),
default: () => t('project.dag.refresh_dag_status')
}}
></NTooltip>
)}
{/* Delete */}
<NTooltip
v-slots={{

19
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@ -22,8 +22,8 @@ import {
provide,
PropType,
toRef,
onMounted,
watch
watch,
onBeforeUnmount
} from 'vue'
import DagToolbar from './dag-toolbar'
import DagCanvas from './dag-canvas'
@ -117,6 +117,7 @@ export default defineComponent({
graph
})
const statusTimerRef = ref()
const { refreshTaskStatus } = useNodeStatus({ graph })
const { onDragStart, onDrop } = useDagDragAndDrop({
@ -166,15 +167,18 @@ export default defineComponent({
saveModelToggle(false)
}
onMounted(() => {
refreshTaskStatus()
})
watch(
() => props.definition,
() => refreshTaskStatus()
() => {
if (props.instance) {
refreshTaskStatus()
statusTimerRef.value = setInterval(() => refreshTaskStatus(), 9000)
}
}
)
onBeforeUnmount(() => clearInterval(statusTimerRef.value))
return () => (
<div
class={[
@ -189,6 +193,7 @@ export default defineComponent({
onVersionToggle={versionToggle}
onSaveModelToggle={saveModelToggle}
onRemoveTasks={removeTasks}
onRefresh={refreshTaskStatus}
/>
<div class={Styles.content}>
<DagSidebar onDragStart={onDragStart} />

2
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts

@ -65,7 +65,7 @@ export function useNodeStatus(options: Options) {
const instanceId = Number(route.params.id)
queryTaskListByProcessId(instanceId, projectCode).then((res: any) => {
window.$message.success(t('project.workflow.success'))
window.$message.success(t('project.workflow.refresh_status_succeeded'))
const { taskList } = res
if (taskList) {
taskList.forEach((taskInstance: any) => {

Loading…
Cancel
Save