Add autorefresh to dags list page (apache#46326)

* Add autorefresh to dags list page

* Drop changes to toggle pause

* Fix toggle paused again

airflow/ui/src/pages/DagsList/DagCard.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, HStack, SimpleGrid, Link } from "@chakra-ui/react";
+import { Box, Flex, HStack, SimpleGrid, Link, Spinner } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
@@ -25,6 +25,7 @@ import { Stat } from "src/components/Stat";
 import { TogglePause } from "src/components/TogglePause";
 import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
 import { Tooltip } from "src/components/ui";
+import { isStatePending, useAutoRefresh } from "src/utils";
 
 import { DagTags } from "./DagTags";
 import { RecentRuns } from "./RecentRuns";
@@ -37,6 +38,8 @@ type Props = {
 export const DagCard = ({ dag }: Props) => {
   const [latestRun] = dag.latest_dag_runs;
 
+  const refetchInterval = useAutoRefresh({ dagId: dag.dag_id });
+
   return (
     <Box borderColor="border.emphasized" borderRadius={8} borderWidth={1} overflow="hidden">
       <Flex alignItems="center" bg="bg.muted" justifyContent="space-between" px={3} py={2}>
@@ -68,6 +71,7 @@ export const DagCard = ({ dag }: Props) => {
                   startDate={latestRun.start_date}
                   state={latestRun.state}
                 />
+                {isStatePending(latestRun.state) && Boolean(refetchInterval) ? <Spinner /> : undefined}
               </RouterLink>
             </Link>
           ) : undefined}

airflow/ui/src/pages/DagsList/DagsList.tsx

@@ -189,7 +189,7 @@ export const DagsList = () => {
     paused = false;
   }
 
-  const { data, error, isFetching, isLoading } = useDags({
+  const { data, error, isLoading } = useDags({
     dagDisplayNamePattern: Boolean(dagDisplayNamePattern) ? `${dagDisplayNamePattern}` : undefined,
     lastDagRunState,
     limit: pagination.pageSize,
@@ -244,7 +244,6 @@ export const DagsList = () => {
           displayMode={display}
           errorMessage={<ErrorAlert error={error} />}
           initialState={tableURLState}
-          isFetching={isFetching}
           isLoading={isLoading}
           modelName="Dag"
           onStateChange={setTableURLState}

airflow/ui/src/queries/useDags.tsx

@@ -18,6 +18,7 @@
  */
 import { useDagServiceGetDags, useDagsServiceRecentDagRuns } from "openapi/queries";
 import type { DagRunState, DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import { isStatePending, useAutoRefresh } from "src/utils";
 
 export type DagWithLatest = {
   last_run_start_date: string;
@@ -39,16 +40,27 @@ export const useDags = (
 ) => {
   const { data, error, isFetching, isLoading } = useDagServiceGetDags(searchParams);
 
+  const refetchInterval = useAutoRefresh({});
+
   const { orderBy, ...runsParams } = searchParams;
   const {
     data: runsData,
     error: runsError,
     isFetching: isRunsFetching,
     isLoading: isRunsLoading,
-  } = useDagsServiceRecentDagRuns({
-    ...runsParams,
-    dagRunsLimit: 14,
-  });
+  } = useDagsServiceRecentDagRuns(
+    {
+      ...runsParams,
+      dagRunsLimit: 14,
+    },
+    undefined,
+    {
+      refetchInterval: (query) =>
+        query.state.data?.dags.some((dag) => dag.latest_dag_runs.some((dr) => isStatePending(dr.state)))
+          ? refetchInterval
+          : false,
+    },
+  );
 
   const dags = (data?.dags ?? []).map((dag) => {
     const dagWithRuns = runsData?.dags.find((runsDag) => runsDag.dag_id === dag.dag_id);