vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

MVP Debugger UI (#2888)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-07-07 22:30:33 -04:00
committed by GitHub
parent d63053835f
commit acbdb15265
65 changed files with 2071 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
View File

@@ -41,6 +41,8 @@ import { type ApiCommandOptions } from "@/util/apiCommands";
function WorkflowRun() {
const [searchParams, setSearchParams] = useSearchParams();
const embed = searchParams.get("embed");
const isEmbedded = embed === "true";
const active = searchParams.get("active");
const { workflowRunId, workflowPermanentId } = useParams();
const credentialGetter = useCredentialGetter();
@@ -169,92 +171,94 @@ function WorkflowRun() {
return (
<div className="space-y-8">
<header className="flex justify-between">
<div className="space-y-3">
<div className="flex items-center gap-5">
{title}
{workflowRunIsLoading ? (
<Skeleton className="h-8 w-28" />
) : workflowRun ? (
<StatusBadge status={workflowRun?.status} />
) : null}
{!isEmbedded && (
<header className="flex justify-between">
<div className="space-y-3">
<div className="flex items-center gap-5">
{title}
{workflowRunIsLoading ? (
<Skeleton className="h-8 w-28" />
) : workflowRun ? (
<StatusBadge status={workflowRun?.status} />
) : null}
</div>
<h2 className="text-2xl text-slate-400">{workflowRunId}</h2>
</div>
<h2 className="text-2xl text-slate-400">{workflowRunId}</h2>
</div>
<div className="flex gap-2">
<CopyApiCommandDropdown
getOptions={() =>
({
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body: {
data: workflowRun?.parameters,
proxy_location: "RESIDENTIAL",
},
headers: {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
}) satisfies ApiCommandOptions
}
/>
<Button asChild variant="secondary">
<Link to={`/workflows/${workflowPermanentId}/edit`}>
<Pencil2Icon className="mr-2 h-4 w-4" />
Edit
</Link>
</Button>
{workflowRunIsRunningOrQueued && (
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Cancel</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>
Are you sure you want to cancel this workflow run?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="secondary">Back</Button>
</DialogClose>
<Button
variant="destructive"
onClick={() => {
cancelWorkflowMutation.mutate();
}}
disabled={cancelWorkflowMutation.isPending}
>
{cancelWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Cancel Workflow Run
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
{workflowRunIsFinalized && !isTaskv2Run && (
<Button asChild>
<Link
to={`/workflows/${workflowPermanentId}/run`}
state={{
data: parameters,
proxyLocation,
webhookCallbackUrl: workflowRun?.webhook_callback_url ?? "",
maxScreenshotScrolls,
}}
>
<PlayIcon className="mr-2 h-4 w-4" />
Rerun
<div className="flex gap-2">
<CopyApiCommandDropdown
getOptions={() =>
({
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body: {
data: workflowRun?.parameters,
proxy_location: "RESIDENTIAL",
},
headers: {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
}) satisfies ApiCommandOptions
}
/>
<Button asChild variant="secondary">
<Link to={`/workflows/${workflowPermanentId}/edit`}>
<Pencil2Icon className="mr-2 h-4 w-4" />
Edit
</Link>
</Button>
)}
</div>
</header>
{workflowRunIsRunningOrQueued && (
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Cancel</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>
Are you sure you want to cancel this workflow run?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="secondary">Back</Button>
</DialogClose>
<Button
variant="destructive"
onClick={() => {
cancelWorkflowMutation.mutate();
}}
disabled={cancelWorkflowMutation.isPending}
>
{cancelWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Cancel Workflow Run
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
{workflowRunIsFinalized && !isTaskv2Run && (
<Button asChild>
<Link
to={`/workflows/${workflowPermanentId}/run`}
state={{
data: parameters,
proxyLocation,
webhookCallbackUrl: workflowRun?.webhook_callback_url ?? "",
maxScreenshotScrolls,
}}
>
<PlayIcon className="mr-2 h-4 w-4" />
Rerun
</Link>
</Button>
)}
</div>
</header>
)}
{showOutputSection && (
<div
className={cn("grid gap-4 rounded-lg bg-slate-elevation1 p-4", {
@@ -307,26 +311,28 @@ function WorkflowRun() {
</div>
)}
{workflowFailureReason}
<SwitchBarNavigation
options={[
{
label: "Overview",
to: "overview",
},
{
label: "Output",
to: "output",
},
{
label: "Parameters",
to: "parameters",
},
{
label: "Recording",
to: "recording",
},
]}
/>
{!isEmbedded && (
<SwitchBarNavigation
options={[
{
label: "Overview",
to: "overview",
},
{
label: "Output",
to: "output",
},
{
label: "Parameters",
to: "parameters",
},
{
label: "Recording",
to: "recording",
},
]}
/>
)}
<div className="flex h-[42rem] gap-6">
<div className="w-2/3">
<Outlet />