Skip to content

Commit

Permalink
Add clear dag run list action (#45045)
Browse files Browse the repository at this point in the history
* Add Clear Run list action

* Update following code review

* Add aria label
  • Loading branch information
pierrejeambrun authored Dec 19, 2024
1 parent d6636f4 commit b423967
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 22 deletions.
49 changes: 31 additions & 18 deletions airflow/ui/src/components/ClearRun/ClearRunButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,28 @@
* 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";

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);
Expand All @@ -42,6 +48,8 @@ const ClearRunButton = ({ dagId, dagRunId }: Props) => {
total_entries: 0,
});

const ButtonComponent: FC<ButtonProps> = withText ? Button : IconButton;

const { isPending, mutate } = useClearDagRun({
dagId,
dagRunId,
Expand All @@ -51,20 +59,25 @@ const ClearRunButton = ({ dagId, dagRunId }: Props) => {

return (
<Box>
<Button
onClick={() => {
onOpen();
mutate({
dagId,
dagRunId,
requestBody: { dry_run: true, only_failed: onlyFailed },
});
}}
variant="outline"
>
<FiRefreshCw height={5} width={5} />
Clear Run
</Button>
<Tooltip content="Clear Dag Run" disabled={Boolean(withText)}>
<ButtonComponent
aria-label="Clear Dag Run"
colorPalette={withText ? undefined : "blue"}
onClick={() => {
onOpen();
mutate({
dagId,
dagRunId,
requestBody: { dry_run: true, only_failed: onlyFailed },
});
}}
size={withText ? "md" : "sm"}
variant={withText ? "outline" : "ghost"}
>
<FiRefreshCw />
{withText ? "Clear Run" : ""}
</ButtonComponent>
</Tooltip>

<ClearRunDialog
affectedTasks={affectedTasks}
Expand Down
8 changes: 4 additions & 4 deletions airflow/ui/src/components/ui/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
import { forwardRef } from "react";
import * as React from "react";

export type TooltipProps = {
content: React.ReactNode;
Expand All @@ -28,7 +28,7 @@ export type TooltipProps = {
showArrow?: boolean;
} & ChakraTooltip.RootProps;

export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
(props, ref) => {
const {
children,
Expand All @@ -46,7 +46,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
}

return (
<ChakraTooltip.Root closeDelay={100} openDelay={100} {...rest}>
<ChakraTooltip.Root {...rest}>
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
<Portal container={portalRef} disabled={!portalled}>
<ChakraTooltip.Positioner>
Expand All @@ -55,7 +55,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
<ChakraTooltip.Arrow>
<ChakraTooltip.ArrowTip />
</ChakraTooltip.Arrow>
) : undefined}
) : null}
{content}
</ChakraTooltip.Content>
</ChakraTooltip.Positioner>
Expand Down
15 changes: 15 additions & 0 deletions airflow/ui/src/pages/Dag/Runs/Runs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -92,6 +93,20 @@ const columns: Array<ColumnDef<DAGRunResponse>> = [
`${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
header: "Duration",
},
{
accessorKey: "clear_dag_run",
cell: ({ row }) => (
<Flex justifyContent="end">
<ClearRunButton
dagId={row.original.dag_id}
dagRunId={row.original.dag_run_id}
withText={false}
/>
</Flex>
),
enableSorting: false,
header: "",
},
];

const stateOptions = createListCollection({
Expand Down
2 changes: 2 additions & 0 deletions airflow/ui/src/queries/useClearRun.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { useQueryClient } from "@tanstack/react-query";
import {
useDagRunServiceClearDagRun,
UseDagRunServiceGetDagRunKeyFn,
useDagRunServiceGetDagRunsKey,
UseDagServiceGetDagDetailsKeyFn,
useTaskInstanceServiceGetTaskInstancesKey,
} from "openapi/queries";
Expand Down Expand Up @@ -66,6 +67,7 @@ export const useClearDagRun = ({
[useTaskInstanceServiceGetTaskInstancesKey],
UseDagServiceGetDagDetailsKeyFn({ dagId }),
UseDagRunServiceGetDagRunKeyFn({ dagId, dagRunId }),
[useDagRunServiceGetDagRunsKey],
];

await Promise.all(
Expand Down

0 comments on commit b423967

Please sign in to comment.