[GitHub] [airflow] ryanahamilton commented on a change in pull request #15474: Auto refresh on Tree View

[GitBox <gi...@apache.org>]

ryanahamilton commented on a change in pull request #15474:
URL: https://github.com/apache/airflow/pull/15474#discussion_r618576408



##########
File path: airflow/www/static/js/tree.js
##########
@@ -392,4 +403,70 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     update(clicked);
   }
+
+  function handleRefresh() {
+    $('#loading-dots').css('display', 'inline-block');
+    $.get(`/object/tree_data?dag_id=${dagId}`)
+      .done(
+        (runs) => {
+          const newData = {
+            ...data,
+            ...JSON.parse(runs),
+          };
+          // only rerender the graph if the instances have changed
+          if (JSON.stringify(data.instances) !== JSON.stringify(newData.instances)) {
+            nodes = tree.nodes(newData);
+            nodes.forEach((node) => renderNode(node));
+            update(root = newData, false);
+            data = newData;
+          }
+          setTimeout(() => { $('#loading-dots').hide(); }, 500);
+          $('#error').hide();
+        },
+      ).fail((_, textStatus, err) => {
+        $('#error_msg').text(`${textStatus}: ${err}`);
+        $('#error').show();
+        setTimeout(() => { $('#loading-dots').hide(); }, 500);
+      });
+  }
+
+  let refreshInterval;
+
+  function startOrStopRefresh() {
+    if ($('#auto_refresh').is(':checked')) {
+      refreshInterval = setInterval(() => {
+        // only do a refresh if there are any active dag runs
+        if (getActiveRuns()) {
+          handleRefresh();
+        } else {
+          $('#auto_refresh').removeAttr('checked');
+        }
+      }, 3000); // run refresh every 3 seconds
+    } else {
+      clearInterval(refreshInterval);
+    }
+  }
+
+  $('#auto_refresh').change(() => {
+    if ($('#auto_refresh').is(':checked')) {
+      // Run an initial refesh before starting interval if manually turned on
+
+      handleRefresh();
+      localStorage.removeItem('disableAutoRefresh');

Review comment:
       Thinking out lout… I realize that this key name was established by the Graph view auto-refresh feature (that I added in #11534), and that we explicitly made it shared across all DAGs (not unique per DAG). I'm wondering if it makes sense to keep it a global feature across Tree/Graph or if there would be a use-case to make them separate? I'm inclined to say it is good as-is.

##########
File path: airflow/www/templates/airflow/graph.html
##########
@@ -24,7 +24,6 @@
 
 {% block head_meta %}
   {{ super() }}
-  <meta name="dag_id" content="{{ dag.dag_id }}">

Review comment:
       There's one of these in `ti_log.html` as well that needs to be removed (so there aren't two identical meta tags).

##########
File path: airflow/www/static/css/tree.css
##########
@@ -118,3 +118,20 @@ g.axis path {
 g.tick line {
   shape-rendering: crispEdges;
 }
+
+.refresh-actions {
+  float: right;
+  display: inline-flex;
+  align-items: center;
+  right: 10px;
+  margin-bottom: 15px;
+  position: relative;
+}
+
+.refresh-actions > .switch-label {
+  margin: 0 10px 0 20px;
+}
+
+.loading-dots.refresh-loading {
+  display: none;
+}

Review comment:
       Move this to `main.css` and remove from `graph.css` as well?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org