[airflow] branch main updated: Better handle auto-refresh errors (#22840)

[bbovenzi]

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

bbovenzi 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 85da728de7 Better handle auto-refresh errors (#22840)
85da728de7 is described below

commit 85da728de78eb3a97309c930f46772f326a36478
Author: Brent Bovenzi <brent.bove...@gmail.com>
AuthorDate: Fri Apr 8 10:33:11 2022 -0500

    Better handle auto-refresh errors (#22840)
---
 airflow/www/static/js/tree/api/useTreeData.js      | 30 ++++++++++++----------
 .../www/static/js/tree/api/useTreeData.test.jsx    |  3 +--
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/airflow/www/static/js/tree/api/useTreeData.js 
b/airflow/www/static/js/tree/api/useTreeData.js
index 83d638f0e0..ddb0a9dfed 100644
--- a/airflow/www/static/js/tree/api/useTreeData.js
+++ b/airflow/www/static/js/tree/api/useTreeData.js
@@ -17,9 +17,11 @@
  * under the License.
  */
 
-/* global treeData, autoRefreshInterval, fetch */
+/* global treeData, autoRefreshInterval */
 
 import { useQuery } from 'react-query';
+import axios from 'axios';
+import { useToast } from '@chakra-ui/react';
 
 import { getMetaValue } from '../../utils';
 import { useAutoRefresh } from '../context/autorefresh';
@@ -39,26 +41,26 @@ const useTreeData = () => {
   };
   const initialData = formatData(treeData, emptyData);
   const { isRefreshOn, stopRefresh } = useAutoRefresh();
+  const toast = useToast();
   return useQuery('treeData', async () => {
     try {
       const root = urlRoot ? `&root=${urlRoot}` : '';
       const base = baseDate ? `&base_date=${baseDate}` : '';
-      const resp = await 
fetch(`${treeDataUrl}?dag_id=${dagId}&num_runs=${numRuns}${root}${base}`);
-      if (resp) {
-        let newData = await resp.json();
-        newData = formatData(newData);
-        // turn off auto refresh if there are no active runs
-        if (!areActiveRuns(newData.dagRuns)) stopRefresh();
-        return newData;
-      }
+      const newData = await 
axios.get(`${treeDataUrl}?dag_id=${dagId}&num_runs=${numRuns}${root}${base}`);
+      // turn off auto refresh if there are no active runs
+      if (!areActiveRuns(newData.dagRuns)) stopRefresh();
+      return newData;
     } catch (e) {
       stopRefresh();
-      console.error(e);
+      // Display error in a toast message
+      toast({
+        title: 'Auto-refresh Error',
+        description: e.message,
+        isClosable: true,
+        status: 'error',
+      });
+      throw (e);
     }
-    return {
-      groups: {},
-      dagRuns: [],
-    };
   }, {
     // only enabled and refetch if the refresh switch is on
     enabled: isRefreshOn,
diff --git a/airflow/www/static/js/tree/api/useTreeData.test.jsx 
b/airflow/www/static/js/tree/api/useTreeData.test.jsx
index ab6b73a97b..03d99ea7e0 100644
--- a/airflow/www/static/js/tree/api/useTreeData.test.jsx
+++ b/airflow/www/static/js/tree/api/useTreeData.test.jsx
@@ -22,7 +22,7 @@ import { QueryClient, QueryClientProvider } from 
'react-query';
 import useTreeData from './useTreeData';
 import { AutoRefreshProvider } from '../context/autorefresh';
 
-/* global describe, test, expect, jest, beforeAll */
+/* global describe, test, expect, beforeAll */
 
 const pendingTreeData = {
   groups: {},
@@ -55,7 +55,6 @@ const Wrapper = ({ children }) => {
 describe('Test useTreeData hook', () => {
   beforeAll(() => {
     global.autoRefreshInterval = 5;
-    global.fetch = jest.fn();
   });
 
   test('data is valid camelcase json', () => {