diff --git a/airflow/ui/src/components/ClearRun/ClearRunButton.tsx b/airflow/ui/src/components/ClearRun/ClearRunButton.tsx index 7c3060765ccf8..ae0386612c3d5 100644 --- a/airflow/ui/src/components/ClearRun/ClearRunButton.tsx +++ b/airflow/ui/src/components/ClearRun/ClearRunButton.tsx @@ -16,12 +16,17 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, useDisclosure } from "@chakra-ui/react"; -import { useState } from "react"; +import { + Box, + type ButtonProps, + IconButton, + useDisclosure, +} from "@chakra-ui/react"; +import { type FC, useState } from "react"; import { FiRefreshCw } from "react-icons/fi"; import type { TaskInstanceCollectionResponse } from "openapi/requests/types.gen"; -import { Button } from "src/components/ui"; +import { Button, Tooltip } from "src/components/ui"; import { useClearDagRun } from "src/queries/useClearRun"; import ClearRunDialog from "./ClearRunDialog"; @@ -29,9 +34,10 @@ import ClearRunDialog from "./ClearRunDialog"; type Props = { readonly dagId: string; readonly dagRunId: string; + readonly withText?: boolean; }; -const ClearRunButton = ({ dagId, dagRunId }: Props) => { +const ClearRunButton = ({ dagId, dagRunId, withText = true }: Props) => { const { onClose, onOpen, open } = useDisclosure(); const [onlyFailed, setOnlyFailed] = useState(false); @@ -42,6 +48,8 @@ const ClearRunButton = ({ dagId, dagRunId }: Props) => { total_entries: 0, }); + const ButtonComponent: FC = withText ? Button : IconButton; + const { isPending, mutate } = useClearDagRun({ dagId, dagRunId, @@ -51,20 +59,25 @@ const ClearRunButton = ({ dagId, dagRunId }: Props) => { return ( - + + { + onOpen(); + mutate({ + dagId, + dagRunId, + requestBody: { dry_run: true, only_failed: onlyFailed }, + }); + }} + size={withText ? "md" : "sm"} + variant={withText ? "outline" : "ghost"} + > + + {withText ? "Clear Run" : ""} + + ( +export const Tooltip = React.forwardRef( (props, ref) => { const { children, @@ -46,7 +46,7 @@ export const Tooltip = forwardRef( } return ( - + {children} @@ -55,7 +55,7 @@ export const Tooltip = forwardRef( - ) : undefined} + ) : null} {content} diff --git a/airflow/ui/src/pages/Dag/Runs/Runs.tsx b/airflow/ui/src/pages/Dag/Runs/Runs.tsx index ae2cf2201c0ff..3d8be5adf6826 100644 --- a/airflow/ui/src/pages/Dag/Runs/Runs.tsx +++ b/airflow/ui/src/pages/Dag/Runs/Runs.tsx @@ -36,6 +36,7 @@ import { import { useDagRunServiceGetDagRuns } from "openapi/queries"; import type { DAGRunResponse, DagRunState } from "openapi/requests/types.gen"; +import ClearRunButton from "src/components/ClearRun/ClearRunButton"; import { DataTable } from "src/components/DataTable"; import { useTableURLState } from "src/components/DataTable/useTableUrlState"; import { ErrorAlert } from "src/components/ErrorAlert"; @@ -92,6 +93,20 @@ const columns: Array> = [ `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`, header: "Duration", }, + { + accessorKey: "clear_dag_run", + cell: ({ row }) => ( + + + + ), + enableSorting: false, + header: "", + }, ]; const stateOptions = createListCollection({ diff --git a/airflow/ui/src/queries/useClearRun.ts b/airflow/ui/src/queries/useClearRun.ts index 9efcb7ae03700..e1c7227ab9d2b 100644 --- a/airflow/ui/src/queries/useClearRun.ts +++ b/airflow/ui/src/queries/useClearRun.ts @@ -21,6 +21,7 @@ import { useQueryClient } from "@tanstack/react-query"; import { useDagRunServiceClearDagRun, UseDagRunServiceGetDagRunKeyFn, + useDagRunServiceGetDagRunsKey, UseDagServiceGetDagDetailsKeyFn, useTaskInstanceServiceGetTaskInstancesKey, } from "openapi/queries"; @@ -66,6 +67,7 @@ export const useClearDagRun = ({ [useTaskInstanceServiceGetTaskInstancesKey], UseDagServiceGetDagDetailsKeyFn({ dagId }), UseDagRunServiceGetDagRunKeyFn({ dagId, dagRunId }), + [useDagRunServiceGetDagRunsKey], ]; await Promise.all(