[dolphinscheduler] branch 2.0.9-prepare updated: [improvement][UI][2.0.9] Speed up the refresh of task status in process instance (#13587)

[jinyleechina]

This is an automated email from the ASF dual-hosted git repository.

jinyleechina pushed a commit to branch 2.0.9-prepare
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/2.0.9-prepare by this push:
     new 33e345fe99 [improvement][UI][2.0.9] Speed up the refresh of task 
status in process instance (#13587)
33e345fe99 is described below

commit 33e345fe99152ba5d372ad0e87da652e1adcb2f8
Author: ll <38578667+re...@users.noreply.github.com>
AuthorDate: Wed Feb 22 10:26:12 2023 +0800

    [improvement][UI][2.0.9] Speed up the refresh of task status in process 
instance (#13587)
    
    * [Improvement][UI][2.0.x] Speed up the refresh of task status in process 
instance
    
    * [Improvement][UI][2.0.x] Speed up the refresh of task status in process 
instance
    
    ---------
    
    Co-authored-by: lile <l...@boimc.com>
---
 .../src/js/conf/home/pages/dag/_source/dag.vue     | 40 +++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue 
b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 5a8d8cc56a..7c330aacb4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -157,7 +157,9 @@
         // log dialog
         logDialog: false,
         logTaskInstance: null,
-        taskInstances: []
+        taskInstances: [],
+        // incremental comparison after the first refresh
+        lastStatues: new Map()
       }
     },
     mounted () {
@@ -182,11 +184,13 @@
 
       // refresh task status
       if (this.type === 'instance') {
-        this.refreshTaskStatus()
-        // status polling
-        this.statusTimer = setInterval(() => {
-          this.refreshTaskStatus()
-        }, 90000)
+        this.refreshTaskStatus(() => {
+          // set the timer after the first refresh
+          // status polling
+          this.statusTimer = setInterval(() => {
+            this.refreshTaskStatus()
+          }, 90000)
+        })
       }
     },
     beforeDestroy () {
@@ -558,7 +562,7 @@
       /**
        * Task status
        */
-      refreshTaskStatus () {
+      refreshTaskStatus (callback = undefined) {
         const instanceId = this.$route.params.id
         this.loading(true)
         this.getTaskState(instanceId)
@@ -569,11 +573,20 @@
             if (taskList) {
               this.taskInstances = taskList
               taskList.forEach((taskInstance) => {
-                this.$refs.canvas.setNodeStatus({
-                  code: taskInstance.taskCode,
-                  state: taskInstance.state,
-                  taskInstance
-                })
+                const lastStatus = this.lastStatues.get(taskInstance.taskCode)
+                if (!lastStatus ||
+                  (lastStatus.host !== taskInstance.host) ||
+                  (lastStatus.retryTimes !== taskInstance.retryTimes) ||
+                  (lastStatus.submitTime !== taskInstance.submitTime) ||
+                  (lastStatus.startTime !== taskInstance.startTime) ||
+                  (lastStatus.endTime !== taskInstance.endTime)) {
+                  this.lastStatues.set(taskInstance.taskCode, taskInstance)
+                  this.$refs.canvas.setNodeStatus({
+                    code: taskInstance.taskCode,
+                    state: taskInstance.state,
+                    taskInstance
+                  })
+                }
               })
             }
             if (list) {
@@ -586,6 +599,9 @@
           })
           .finally(() => {
             this.loading(false)
+            if (callback) {
+              callback()
+            }
           })
       },
       /**