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

* modify workflow instance interval refresh

* workflow instance add dag refresh button

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',

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: '层次布局',

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: {

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={{

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} />

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) => {