Add basic autorefresh to grid and graph (apache#46330)

aws-mwaa · Jan 31, 2025 · 9ec0076 · 9ec0076
1 parent 41aae33
commit 9ec0076
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git 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
@@ -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,
     },
   );