[AIRFLOW-7019] Show un/pause errors in dags view. (apache#7669)

Pausing and unpausing dags in the dags view is asynchronous, and there is currently no indication to the user if the operation fails. This patch updates the paused input and highlights it in red when pausing or unpausing fails.
feyman2016 · Mar 14, 2020 · d466148 · d466148
1 parent 8badb3d
commit d466148
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
@@ -563,13 +563,23 @@ <h4 class="modal-title" id="dagModalLabel">
 
     $("#pause_resume").change(function() {
       var dag_id = $(this).attr('dag_id');
-      if ($(this).prop('checked')) {
+      var $input = $(this);
+      var $buttons = $input.parent('.toggle').find('.btn');
+      $buttons.removeClass('btn-danger');
+      if ($input.prop('checked')) {
         is_paused = 'true'
       } else {
         is_paused = 'false'
       }
-      url = "{{ url_for('Airflow.paused') }}" + '?is_paused=' + is_paused + '&dag_id=' + encodeURIComponent(dag_id);
-      $.post(url);
+      var url = "{{ url_for('Airflow.paused') }}" + '?is_paused=' + is_paused + '&dag_id=' + encodeURIComponent(dag_id);
+      $.post(url).fail(function() {
+        if (is_paused === 'true') {
+          $input.data('bs.toggle').off(true);
+        } else {
+          $input.data('bs.toggle').on(true);
+        }
+        $buttons.addClass('btn-danger');
+      });
     });
 
   </script>

diff --git a/airflow/www/templates/airflow/dags.html b/airflow/www/templates/airflow/dags.html
@@ -283,17 +283,27 @@ <h2>DAGs</h2>
       var encoded_dag_ids = new URLSearchParams();
 
       $.each($("[id^=toggle]"), function(i, v) {
-        var dag_id = $(v).attr('dag_id');
+        var $input = $(v);
+        var dag_id = $input.attr('dag_id');
         encoded_dag_ids.append('dag_ids', dag_id);
 
-        $(v).change (function() {
-          if ($(v).prop('checked')) {
+        $input.change(function() {
+          var $buttons = $input.parent('.toggle').find('.btn');
+          $buttons.removeClass('btn-danger');
+          if ($input.prop('checked')) {
             is_paused = 'true'
           } else {
             is_paused = 'false'
           }
-          url = 'paused?is_paused=' + is_paused + '&dag_id=' + dag_id;
-          $.post(url);
+          var url = 'paused?is_paused=' + is_paused + '&dag_id=' + dag_id;
+          $.post(url).fail(function() {
+            if (is_paused === 'true') {
+              $input.data('bs.toggle').off(true);
+            } else {
+              $input.data('bs.toggle').on(true);
+            }
+            $buttons.addClass('btn-danger');
+          });
         });
       });
 

diff --git a/docs/faq.rst b/docs/faq.rst
@@ -220,3 +220,11 @@ How do I stop the sync perms happening multiple times per webserver?
 --------------------------------------------------------------------
 
 Set the value of ``update_fab_perms`` configuration in ``airflow.cfg`` to ``False``.
+
+Why did the pause dag toggle turn red?
+--------------------------------------
+
+If pausing or unpausing a dag fails for any reason, the dag toggle will
+revert to its previous state and turn red. If you observe this behavior,
+try pausing the dag again, or check the console or server logs if the
+issue recurs.