From 33e345fe99152ba5d372ad0e87da652e1adcb2f8 Mon Sep 17 00:00:00 2001
From: ll <38578667+reele@users.noreply.github.com>
Date: Wed, 22 Feb 2023 10:26:12 +0800
Subject: [PATCH] [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 <lile@boimc.com>
---
 .../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()
+            }
           })
       },
       /**