diff --git a/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx b/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx index 1c04bad64d4eb..fdc111654f9f2 100644 --- a/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx +++ b/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useState } from "react"; +import React, { useState, useReducer } from "react"; import { Flex, Button, @@ -41,6 +41,38 @@ interface Props extends MenuButtonProps { runId: string; } +interface State { + showConfirmationModal: boolean; + confirmingAction: "existing" | "failed" | "queue" | null; +} + +type Action = + | { + type: "SHOW_CONFIRMATION_MODAL"; + payload: "existing" | "failed" | "queue"; + } + | { type: "HIDE_CONFIRMATION_MODAL" }; + +const initialState = { + showConfirmationModal: false, + confirmingAction: null, +}; + +const reducer = (state: State, action: Action): State => { + switch (action.type) { + case "SHOW_CONFIRMATION_MODAL": + return { + ...state, + showConfirmationModal: true, + confirmingAction: action.payload, + }; + case "HIDE_CONFIRMATION_MODAL": + return { ...state, showConfirmationModal: false, confirmingAction: null }; + default: + return state; + } +}; + const ClearRun = ({ runId, ...otherProps }: Props) => { const { mutateAsync: onClear, isLoading: isClearLoading } = useClearRun( dagId, @@ -64,27 +96,47 @@ const ClearRun = ({ runId, ...otherProps }: Props) => { onQueue({ confirmed: true }); }; - const [showConfirmationModal, setShowConfirmationModal] = useState(false); + const [stateReducer, dispatch] = useReducer(reducer, initialState); const storedValue = localStorage.getItem("doNotShowClearRunModal"); const [doNotShowAgain, setDoNotShowAgain] = useState( storedValue ? JSON.parse(storedValue) : false ); + const confirmClearExisting = () => { + if (!doNotShowAgain) { + dispatch({ type: "SHOW_CONFIRMATION_MODAL", payload: "existing" }); + } else clearExistingTasks(); + }; + + const confirmClearFailed = () => { + if (!doNotShowAgain) { + dispatch({ type: "SHOW_CONFIRMATION_MODAL", payload: "failed" }); + } else clearFailedTasks(); + }; + + const confirmQueued = () => { + if (!doNotShowAgain) { + dispatch({ type: "SHOW_CONFIRMATION_MODAL", payload: "queue" }); + } else queueNewTasks(); + }; + const confirmAction = () => { localStorage.setItem( "doNotShowClearRunModal", JSON.stringify(doNotShowAgain) ); - clearExistingTasks(); - setShowConfirmationModal(false); + if (stateReducer.confirmingAction === "failed") { + clearFailedTasks(); + } else if (stateReducer.confirmingAction === "existing") { + clearExistingTasks(); + } else if (stateReducer.confirmingAction === "queue") { + queueNewTasks(); + } + dispatch({ type: "HIDE_CONFIRMATION_MODAL" }); }; - useKeysPress(keyboardShortcutIdentifier.dagRunClear, () => { - if (!doNotShowAgain) { - setShowConfirmationModal(true); - } else clearExistingTasks(); - }); + useKeysPress(keyboardShortcutIdentifier.dagRunClear, confirmClearExisting); const clearLabel = "Clear tasks or add new tasks"; return ( @@ -106,16 +158,18 @@ const ClearRun = ({ runId, ...otherProps }: Props) => { - Clear existing tasks - + + Clear existing tasks + + Clear only failed tasks - Queue up new tasks + Queue up new tasks setShowConfirmationModal(false)} + isOpen={stateReducer.showConfirmationModal} + onClose={() => dispatch({ type: "HIDE_CONFIRMATION_MODAL" })} header="Confirmation" submitButton={