(airflow) branch main updated: Add basic autorefresh to grid and graph (#46330)

[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 9ec00767540 Add basic autorefresh to grid and graph (#46330)
9ec00767540 is described below

commit 9ec00767540bc8b2ed87f683edf085d0c19ca5cc
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Fri Jan 31 13:05:46 2025 -0500

    Add basic autorefresh to grid and graph (#46330)
---
 airflow/ui/src/layouts/Details/Graph/Graph.tsx | 5 +++++
 airflow/ui/src/layouts/Details/Grid/Grid.tsx   | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/airflow/ui/src/layouts/Details/Graph/Graph.tsx 
b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
index 43b914e115b..ef58246e39a 100644
--- a/airflow/ui/src/layouts/Details/Graph/Graph.tsx
+++ b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
@@ -24,6 +24,7 @@ import { useParams } from "react-router-dom";
 import { useGridServiceGridData, useStructureServiceStructureData } from 
"openapi/queries";
 import { useColorMode } from "src/context/colorMode";
 import { useOpenGroups } from "src/context/openGroups";
+import { isStatePending, useAutoRefresh } from "src/utils";
 
 import Edge from "./Edge";
 import { JoinNode } from "./JoinNode";
@@ -87,6 +88,8 @@ export const Graph = () => {
     openGroupIds,
   });
 
+  const refetchInterval = useAutoRefresh({ dagId });
+
   const { data: gridData } = useGridServiceGridData(
     {
       dagId,
@@ -97,6 +100,8 @@ export const Graph = () => {
     undefined,
     {
       enabled: Boolean(runId),
+      refetchInterval: (query) =>
+        query.state.data?.dag_runs.some((dr) => isStatePending(dr.state)) && 
refetchInterval,
     },
   );
 
diff --git a/airflow/ui/src/layouts/Details/Grid/Grid.tsx 
b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 1e36c2a763e..f66a7b4a5de 100644
--- a/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -27,6 +27,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { useGridServiceGridData, useStructureServiceStructureData } from 
"openapi/queries";
 import type { GridResponse } from "openapi/requests/types.gen";
 import { useOpenGroups } from "src/context/openGroups";
+import { isStatePending, useAutoRefresh } from "src/utils";
 
 import { Bar } from "./Bar";
 import { DurationAxis } from "./DurationAxis";
@@ -47,6 +48,7 @@ export const Grid = () => {
   });
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const refetchInterval = useAutoRefresh({ dagId });
 
   const offset = parseInt(searchParams.get("offset") ?? "0", 10);
 
@@ -62,6 +64,8 @@ export const Grid = () => {
     undefined,
     {
       placeholderData: keepPreviousData,
+      refetchInterval: (query) =>
+        query.state.data?.dag_runs.some((dr) => isStatePending(dr.state)) && 
refetchInterval,
     },
   );