diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts index 931e7ad4..d818e1d7 100644 --- a/skyvern-frontend/src/api/types.ts +++ b/skyvern-frontend/src/api/types.ts @@ -78,6 +78,7 @@ export type TaskApiResponse = { failure_reason: string | null; errors: Array>; max_steps_per_run: number | null; + workflow_run_id: string | null; }; export type CreateTaskRequest = { diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx index a5e4f26d..342cf212 100644 --- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx +++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx @@ -1,5 +1,9 @@ import { getClient } from "@/api/AxiosClient"; -import { Status, TaskApiResponse } from "@/api/types"; +import { + Status, + TaskApiResponse, + WorkflowRunStatusApiResponse, +} from "@/api/types"; import { Button } from "@/components/ui/button"; import { Dialog, @@ -18,7 +22,7 @@ import { toast } from "@/components/ui/use-toast"; import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { cn } from "@/util/utils"; import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons"; -import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { Link, NavLink, Outlet, useParams } from "react-router-dom"; import { TaskInfo } from "./TaskInfo"; import { useTaskQuery } from "./hooks/useTaskQuery"; @@ -27,6 +31,7 @@ import fetchToCurl from "fetch-to-curl"; import { apiBaseUrl } from "@/util/env"; import { useApiCredential } from "@/hooks/useApiCredential"; import { copyText } from "@/util/copyText"; +import { WorkflowApiResponse } from "@/routes/workflows/types/workflowTypes"; function createTaskRequestObject(values: TaskApiResponse) { return { @@ -54,6 +59,30 @@ function TaskDetails() { error: taskError, } = useTaskQuery({ id: taskId }); + const { data: workflowRun, isLoading: workflowRunIsLoading } = + useQuery({ + queryKey: ["workflowRun", task?.workflow_run_id], + queryFn: async () => { + const client = await getClient(credentialGetter); + return client + .get(`/workflows/runs/${task?.workflow_run_id}`) + .then((response) => response.data); + }, + enabled: !!task?.workflow_run_id, + }); + + const { data: workflow, isLoading: workflowIsLoading } = + useQuery({ + queryKey: ["workflow", workflowRun?.workflow_id], + queryFn: async () => { + const client = await getClient(credentialGetter); + return client + .get(`/workflows/${workflowRun?.workflow_id}`) + .then((response) => response.data); + }, + enabled: !!workflowRun?.workflow_id, + }); + const cancelTaskMutation = useMutation({ mutationFn: async () => { const client = await getClient(credentialGetter); @@ -122,82 +151,99 @@ function TaskDetails() { return (
-
-
- {taskId} - {taskId && } -
-
- - {taskIsRunningOrQueued && ( - - - - - - - Are you sure? - - Are you sure you want to cancel this task? - - - - - - - - - - - )} - {taskHasTerminalState && ( - + {taskIsRunningOrQueued && ( + + + + + + + Are you sure? + + Are you sure you want to cancel this task? + + + + + + + + + + + )} + {taskHasTerminalState && ( + + )} +
+
+
+ {workflowIsLoading || workflowRunIsLoading ? ( + + ) : ( + workflow && + workflowRun && ( + + {workflow.title} + + ) )}
-
+ + {taskIsLoading ? (