[airflow] branch track_dag_paused created (now 67e57aa)

[bb...@apache.org]

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

bbovenzi pushed a change to branch track_dag_paused
in repository https://gitbox.apache.org/repos/asf/airflow.git.


      at 67e57aa  React can listen to pause events from FAB

This branch includes the following new commits:

     new 67e57aa  React can listen to pause events from FAB

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

[airflow] 01/01: React can listen to pause events from FAB

[bb...@apache.org]

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

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

commit 67e57aab239bd08d57c18a7aa045b7ea6959078a
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Thu Mar 31 15:26:43 2022 -0400

    React can listen to pause events from FAB
---
 airflow/www/static/js/dag.js                       | 11 ++++++++++-
 airflow/www/static/js/tree/Tree.jsx                |  5 ++---
 airflow/www/static/js/tree/context/autorefresh.jsx | 19 ++++++++++++++-----
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index 3e02c64..30e10ab 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global document, window, $ */
+/* global document, window, Event, $ */
 
 import { getMetaValue } from './utils';
 import { approxTimeFromNow, formatDateTime } from './datetime_utils';
@@ -368,10 +368,19 @@ $('#pause_resume').on('change', function onChange() {
   // Remove focus on element so the tooltip will go away
   $input.trigger('blur');
   $input.removeClass('switch-input--error');
+
+  // dispatch an event that React can listen for
+  const event = new Event('paused');
+  event.value = isPaused;
+  event.key = 'isPaused';
+  document.dispatchEvent(event);
+
   $.post(url).fail(() => {
     setTimeout(() => {
       $input.prop('checked', !isPaused);
       $input.addClass('switch-input--error');
+      event.value = !isPaused;
+      document.dispatchEvent(event);
     }, 500);
   });
 });
diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/tree/Tree.jsx
index 6f8c284..6108293 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/tree/Tree.jsx
@@ -34,7 +34,6 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import { getMetaValue } from '../utils';
 import { useTreeData } from './api';
 import renderTaskRows from './renderTaskRows';
 import ResetRoot from './ResetRoot';
@@ -43,7 +42,6 @@ import Details from './details';
 import { useSelection } from './context/selection';
 import { useAutoRefresh } from './context/autorefresh';
 
-const isPaused = getMetaValue('is_paused') === 'True';
 const sidePanelKey = 'showSidePanel';
 
 const Tree = () => {
@@ -51,7 +49,7 @@ const Tree = () => {
   const tableRef = useRef();
   const [tableWidth, setTableWidth] = useState('100%');
   const { data: { groups = {}, dagRuns = [] } } = useTreeData();
-  const { isRefreshOn, toggleRefresh } = useAutoRefresh();
+  const { isRefreshOn, toggleRefresh, isPaused } = useAutoRefresh();
   const isPanelOpen = JSON.parse(localStorage.getItem(sidePanelKey));
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
 
@@ -94,6 +92,7 @@ const Tree = () => {
             isDisabled={isPaused}
             isChecked={isRefreshOn}
             size="lg"
+            title={isPaused ? 'Autorefresh is disabled while the DAG is paused' : ''}
           />
         </FormControl>
         <Button
diff --git a/airflow/www/static/js/tree/context/autorefresh.jsx b/airflow/www/static/js/tree/context/autorefresh.jsx
index 34dd986..7a25435 100644
--- a/airflow/www/static/js/tree/context/autorefresh.jsx
+++ b/airflow/www/static/js/tree/context/autorefresh.jsx
@@ -17,23 +17,24 @@
  * under the License.
  */
 
-/* global localStorage, treeData */
+/* global localStorage, treeData, document */
 
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { getMetaValue } from '../../utils';
 import { formatData, areActiveRuns } from '../treeDataUtils';
 
 const autoRefreshKey = 'disabledAutoRefresh';
 
-const isPaused = getMetaValue('is_paused') === 'True';
+const initialIsPaused = getMetaValue('is_paused') === 'True';
 const isRefreshDisabled = JSON.parse(localStorage.getItem(autoRefreshKey));
-const isRefreshAllowed = !(isPaused || isRefreshDisabled);
 
 const AutoRefreshContext = React.createContext(null);
 
 export const AutoRefreshProvider = ({ children }) => {
   const dagRuns = treeData && treeData.dag_runs ? formatData(treeData.dag_runs, []) : [];
+  const [isPaused, setIsPaused] = useState(initialIsPaused);
   const isActive = areActiveRuns(dagRuns);
+  const isRefreshAllowed = !(isPaused || isRefreshDisabled);
   const initialState = isRefreshAllowed && isActive;
 
   const [isRefreshOn, setRefresh] = useState(initialState);
@@ -55,10 +56,18 @@ export const AutoRefreshProvider = ({ children }) => {
     }
   };
 
+  useEffect(() => {
+    const handleChange = (e) => setIsPaused(!e.value);
+    document.addEventListener('paused', handleChange);
+    return () => {
+      document.removeEventListener('paused', handleChange);
+    };
+  });
+
   return (
     <AutoRefreshContext.Provider
       value={{
-        isRefreshOn, toggleRefresh, stopRefresh, startRefresh,
+        isRefreshOn, toggleRefresh, stopRefresh, startRefresh, isPaused,
       }}
     >
       {children}