[airflow] branch main updated: Improve graph view refresh (#16696)

[ry...@apache.org]

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

ryanahamilton pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new c3dd89c  Improve graph view refresh (#16696)
c3dd89c is described below

commit c3dd89c61bea72987a57e2c4ea7c4f5daee01a07
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Wed Jul 7 18:09:24 2021 -0700

    Improve graph view refresh (#16696)
    
    * Improve graph view refresh
    
    - only refresh if state has actually changed
    
    - stop refresh if all states are final
    
    - swap out `.attr()` to `.prop()` for handling `checked` see https://stackoverflow.com/questions/5874652/prop-vs-attr
    
    * check only on final states instead of pending
---
 airflow/www/static/js/graph.js | 21 ++++++++++++++++++---
 airflow/www/static/js/tree.js  |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index 1f422ff..d3d913b 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -364,14 +364,29 @@ function setFocusMap(state) {
 
 const stateIsSet = () => !!Object.keys(stateFocusMap).find((key) => stateFocusMap[key]);
 
+let prevTis;
+
 function handleRefresh() {
   $('#loading-dots').css('display', 'inline-block');
   $.get(getTaskInstanceURL)
     .done(
       (tis) => {
+        // only refresh if the data has changed
+        if (prevTis !== tis) {
         // eslint-disable-next-line no-global-assign
-        taskInstances = JSON.parse(tis);
-        updateNodesStates(taskInstances);
+          taskInstances = JSON.parse(tis);
+          const states = Object.values(taskInstances).map((ti) => ti.state);
+          updateNodesStates(taskInstances);
+
+          // end refresh if all states are final
+          if (!states.some((state) => (
+            ['success', 'failed', 'upstream_failed', 'skipped', 'removed'].indexOf(state) === -1))
+          ) {
+            $('#auto_refresh').prop('checked', false);
+            clearInterval(refreshInterval);
+          }
+        }
+        prevTis = tis;
         setTimeout(() => { $('#loading-dots').hide(); }, 500);
         $('#error').hide();
       },
@@ -409,7 +424,7 @@ $('#auto_refresh').change(() => {
 
 function initRefresh() {
   if (localStorage.getItem('disableAutoRefresh')) {
-    $('#auto_refresh').removeAttr('checked');
+    $('#auto_refresh').prop('checked', false);
   }
   startOrStopRefresh();
   d3.select('#refresh_button').on('click', () => handleRefresh());
diff --git a/airflow/www/static/js/tree.js b/airflow/www/static/js/tree.js
index f4d5fd3..b604eec 100644
--- a/airflow/www/static/js/tree.js
+++ b/airflow/www/static/js/tree.js
@@ -457,7 +457,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (getActiveRuns()) {
           handleRefresh();
         } else {
-          $('#auto_refresh').removeAttr('checked');
+          $('#auto_refresh').prop('checked', false);
         }
       }, 3000); // run refresh every 3 seconds
     } else {
@@ -480,7 +480,7 @@ document.addEventListener('DOMContentLoaded', () => {
   function initRefresh() {
     // default to auto-refresh if there are any active dag runs
     if (getActiveRuns() && !localStorage.getItem('disableAutoRefresh')) {
-      $('#auto_refresh').attr('checked', true);
+      $('#auto_refresh').prop('checked', true);
     }
     startOrStopRefresh();
     d3.select('#refresh_button').on('click', () => handleRefresh());