diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts index 1d920060..3a0216b6 100644 --- a/frontend/src/api/api.ts +++ b/frontend/src/api/api.ts @@ -919,6 +919,22 @@ export function getTasks(req: ListTaskService): ThunkResponse }; } +export function sendCancelTask(id: string): ThunkResponse { + return async (dispatch, _getState) => { + return await dispatch( + send( + `/workflow/${id}/cancel`, + { + method: "POST", + }, + { + ...defaultOpts, + }, + ), + ); + }; +} + export function sendRetryTask(id: string): ThunkResponse { return async (dispatch, _getState) => { return await dispatch( diff --git a/frontend/src/component/Pages/Tasks/TaskDetail.tsx b/frontend/src/component/Pages/Tasks/TaskDetail.tsx index 9979ae15..1012b813 100644 --- a/frontend/src/component/Pages/Tasks/TaskDetail.tsx +++ b/frontend/src/component/Pages/Tasks/TaskDetail.tsx @@ -12,7 +12,7 @@ import { } from "@mui/material"; import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { sendRetryTask } from "../../../api/api.ts"; +import { sendCancelTask, sendRetryTask } from "../../../api/api.ts"; import { TaskResponse, TaskStatus } from "../../../api/workflow.ts"; import { useAppDispatch } from "../../../redux/hooks.ts"; import { SecondaryLoadingButton, StyledTableContainerPaper } from "../../Common/StyledComponents.tsx"; @@ -30,6 +30,7 @@ const TaskDetail = ({ task, downloading, onRetried }: TaskDetailProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const [retrying, setRetrying] = useState(false); + const [canceling, setCanceling] = useState(false); const retry = () => { setRetrying(true); @@ -38,6 +39,16 @@ const TaskDetail = ({ task, downloading, onRetried }: TaskDetailProps) => { .catch(() => {}) .finally(() => setRetrying(false)); }; + + const cancel = () => { + setCanceling(true); + dispatch(sendCancelTask(task.id)) + .then(() => onRetried?.()) + .catch(() => {}) + .finally(() => setCanceling(false)); + }; + + const cancelable = task.status == TaskStatus.queued || task.status == TaskStatus.suspending; return ( @@ -60,6 +71,18 @@ const TaskDetail = ({ task, downloading, onRetried }: TaskDetailProps) => { })} )} + {cancelable && ( + + {t("common:cancel")} + + )} {task.status == TaskStatus.error && (