Pause and cancel backfills in table

monroeclinton · monroeclinton · commit 1cdb2778263f · 2026-02-25T16:19:57.000-05:00
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/components.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/components.json
@@ -33,7 +33,9 @@
     "backfillInProgress": "Backfill in progress",
     "cancel": "Cancel backfill",
     "pause": "Pause backfill",
-    "unpause": "Unpause backfill"
+    "unpause": "Unpause backfill",
+    "viewMore_one": "1 More Active Backfill",
+    "viewMore_other": "{{count}} More Active Backfills"
   },
   "clipboard": {
     "copy": "Copy"
diff --git a/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx b/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, HStack, Spacer, Text, type ButtonProps } from "@chakra-ui/react";
+import { Box, Button, HStack, Link, Spacer, Text, VStack, type ButtonProps } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
 import { RiArrowGoBackFill } from "react-icons/ri";
+import { Link as RouterLink } from "react-router-dom";
 
 import {
   useBackfillServiceCancelBackfill,
@@ -65,7 +66,8 @@ const BackfillBanner = ({ dagId }: Props) => {
           : false,
     },
   );
-  const [backfill] = data?.backfills.filter((bf: BackfillResponse) => bf.completed_at === null) ?? [];
+  const [backfill] = data?.backfills ?? [];
+  const additionalBackfillsCount = (data?.backfills.length ?? 0) - 1;
 
   const queryClient = useQueryClient();
   const onSuccess = async () => {
@@ -105,35 +107,49 @@ const BackfillBanner = ({ dagId }: Props) => {
   return (
     <Box bg="info.solid" borderRadius="full" color="info.contrast" my="1" px="2" py="1">
       <HStack alignItems="center" ml={3}>
-        <RiArrowGoBackFill />
-        <Text key="backfill">{translate("banner.backfillInProgress")}:</Text>
-        <Text fontSize="sm">
-          {" "}
-          <Time datetime={backfill.from_date} /> - <Time datetime={backfill.to_date} />
-        </Text>
-
-        <Spacer flex="max-content" />
-        <ProgressBar size="xs" visibility="visible" />
-        <Button
-          aria-label={backfill.is_paused ? translate("banner.unpause") : translate("banner.pause")}
-          loading={isPausePending || isUnPausePending}
-          onClick={() => {
-            togglePause();
-          }}
-          {...buttonProps}
-        >
-          {backfill.is_paused ? <MdPlayArrow /> : <MdPause />}
-        </Button>
-        <Button
-          aria-label={translate("banner.cancel")}
-          loading={isStopPending}
-          onClick={() => {
-            cancel();
-          }}
-          {...buttonProps}
-        >
-          <MdStop />
-        </Button>
+        <VStack align="stretch" flex={1} gap={1}>
+          <HStack alignItems="center">
+            <RiArrowGoBackFill />
+            <Text key="backfill">{translate("banner.backfillInProgress")}:</Text>
+            <Text fontSize="sm">
+              {" "}
+              <Time datetime={backfill.from_date} /> - <Time datetime={backfill.to_date} />
+            </Text>
+            <Spacer flex="max-content" />
+            <ProgressBar size="xs" visibility="visible" />
+          </HStack>
+          {additionalBackfillsCount > 0 && (
+            <HStack mb={1}>
+              <Link asChild color="info.contrast" fontSize="sm" textDecoration="underline">
+                <RouterLink to={`/dags/${dagId}/backfills`}>
+                  {translate("banner.viewMore", { count: additionalBackfillsCount })}
+                </RouterLink>
+              </Link>
+            </HStack>
+          )}
+        </VStack>
+        <HStack>
+          <Button
+            aria-label={backfill.is_paused ? translate("banner.unpause") : translate("banner.pause")}
+            loading={isPausePending || isUnPausePending}
+            onClick={() => {
+              togglePause();
+            }}
+            {...buttonProps}
+          >
+            {backfill.is_paused ? <MdPlayArrow /> : <MdPause />}
+          </Button>
+          <Button
+            aria-label={translate("banner.cancel")}
+            loading={isStopPending}
+            onClick={() => {
+              cancel();
+            }}
+            {...buttonProps}
+          >
+            <MdStop />
+          </Button>
+        </HStack>
       </HStack>
     </Box>
   );
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/Backfills.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/Backfills.tsx
@@ -16,20 +16,51 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Text, type ButtonProps } from "@chakra-ui/react";
+import { useQueryClient } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
 import { useParams } from "react-router-dom";
 
-import { useBackfillServiceListBackfillsUi } from "openapi/queries";
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfillsUi,
+  useBackfillServiceListBackfillsUiKey,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
 import type { BackfillResponse } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
-import { getDuration } from "src/utils";
+import { getDuration, useAutoRefresh } from "src/utils";
 
-const getColumns = (translate: (key: string) => string): Array<ColumnDef<BackfillResponse>> => [
+const buttonProps = {
+  rounded: "full",
+  size: "xs",
+  variant: "outline",
+} satisfies ButtonProps;
+
+type GetColumnsParams = {
+  readonly isCancelPending: boolean;
+  readonly isPausePending: boolean;
+  readonly isUnpausePending: boolean;
+  readonly onCancel: (backfill: BackfillResponse) => void;
+  readonly onPause: (backfill: BackfillResponse) => void;
+  readonly translate: (key: string) => string;
+};
+
+const getColumns = ({
+  isCancelPending,
+  isPausePending,
+  isUnpausePending,
+  onCancel,
+  onPause,
+  translate,
+}: GetColumnsParams): Array<ColumnDef<BackfillResponse>> => [
   {
     accessorKey: "date_from",
     cell: ({ row }) => (
@@ -101,6 +132,46 @@ const getColumns = (translate: (key: string) => string): Array<ColumnDef<Backfil
     enableSorting: false,
     header: translate("table.maxActiveRuns"),
   },
+  {
+    accessorKey: "actions",
+    cell: ({ row }) => {
+      const backfill = row.original;
+
+      if (backfill.completed_at !== null) {
+        return null;
+      }
+
+      return (
+        <Flex gap={2} justifyContent="end">
+          <Button
+            aria-label={
+              backfill.is_paused
+                ? translate("components:banner.unpause")
+                : translate("components:banner.pause")
+            }
+            loading={isPausePending || isUnpausePending}
+            onClick={() => onPause(backfill)}
+            {...buttonProps}
+          >
+            {backfill.is_paused ? <MdPlayArrow /> : <MdPause />}
+          </Button>
+          <Button
+            aria-label={translate("components:banner.cancel")}
+            loading={isCancelPending}
+            onClick={() => onCancel(backfill)}
+            {...buttonProps}
+          >
+            <MdStop />
+          </Button>
+        </Flex>
+      );
+    },
+    enableSorting: false,
+    header: "",
+    meta: {
+      skeletonWidth: 10,
+    },
+  },
 ];
 
 export const Backfills = () => {
@@ -110,14 +181,64 @@ export const Backfills = () => {
   const { pagination } = tableURLState;
 
   const { dagId = "" } = useParams();
+  const refetchInterval = useAutoRefresh({ dagId });
 
-  const { data, error, isFetching, isLoading } = useBackfillServiceListBackfillsUi({
-    dagId,
-    limit: pagination.pageSize,
-    offset: pagination.pageIndex * pagination.pageSize,
+  const { data, error, isFetching, isLoading } = useBackfillServiceListBackfillsUi(
+    {
+      dagId,
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+    },
+    undefined,
+    {
+      refetchInterval: (query) =>
+        query.state.data?.backfills.some((bf: BackfillResponse) => bf.completed_at === null && !bf.is_paused)
+          ? refetchInterval
+          : false,
+    },
+  );
+
+  const queryClient = useQueryClient();
+  const onSuccess = async () => {
+    await queryClient.invalidateQueries({
+      queryKey: [useBackfillServiceListBackfillsUiKey],
+    });
+  };
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill({ onSuccess });
+  const { isPending: isUnpausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill({
+    onSuccess,
   });
+  const { isPending: isCancelPending, mutate: cancelMutate } = useBackfillServiceCancelBackfill({
+    onSuccess,
+  });
+
+  const handlePause = useCallback(
+    (backfill: BackfillResponse) => {
+      if (backfill.is_paused) {
+        unpauseMutate({ backfillId: backfill.id });
+      } else {
+        pauseMutate({ backfillId: backfill.id });
+      }
+    },
+    [pauseMutate, unpauseMutate],
+  );
+
+  const handleCancel = useCallback(
+    (backfill: BackfillResponse) => {
+      cancelMutate({ backfillId: backfill.id });
+    },
+    [cancelMutate],
+  );
 
-  const columns = getColumns(translate);
+  const columns = getColumns({
+    isCancelPending,
+    isPausePending,
+    isUnpausePending,
+    onCancel: handleCancel,
+    onPause: handlePause,
+    translate,
+  });
 
   return (
     <Box>
