Add collapsible for workflow run tasks table (#1219)
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Shuchang Zheng
215
skyvern-frontend/package-lock.json
generated
215
skyvern-frontend/package-lock.json
generated
@@ -16,6 +16,7 @@
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
||||
"@radix-ui/react-checkbox": "^1.1.1",
|
||||
"@radix-ui/react-collapsible": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
@@ -1125,6 +1126,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-collapsible": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
|
||||
"integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-arrow": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
|
||||
@@ -1372,25 +1403,24 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
|
||||
"integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
|
||||
"integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.0.1"
|
||||
"@radix-ui/primitive": "1.1.0",
|
||||
"@radix-ui/react-compose-refs": "1.1.0",
|
||||
"@radix-ui/react-context": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.0",
|
||||
"@radix-ui/react-presence": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.0.0",
|
||||
"@radix-ui/react-use-controllable-state": "1.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
@@ -1401,6 +1431,163 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
|
||||
"integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
|
||||
"integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
|
||||
"integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
|
||||
"integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
|
||||
"integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
|
||||
"integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
|
||||
"integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
|
||||
"integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
|
||||
"integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-callback-ref": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
|
||||
"integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
||||
"@radix-ui/react-checkbox": "^1.1.1",
|
||||
"@radix-ui/react-collapsible": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
|
||||
@@ -277,6 +277,7 @@ export type WorkflowRunStatusApiResponse = {
|
||||
screenshot_urls: Array<string> | null;
|
||||
recording_url: string | null;
|
||||
outputs: Record<string, unknown> | null;
|
||||
failure_reason: string | null;
|
||||
};
|
||||
|
||||
export type TaskGenerationApiResponse = {
|
||||
|
||||
9
skyvern-frontend/src/components/ui/collapsible.tsx
Normal file
9
skyvern-frontend/src/components/ui/collapsible.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
||||
|
||||
const Collapsible = CollapsiblePrimitive.Root;
|
||||
|
||||
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
||||
|
||||
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
||||
@@ -0,0 +1,188 @@
|
||||
import { Status, TaskApiResponse } from "@/api/types";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { TableCell, TableRow } from "@/components/ui/table";
|
||||
import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
|
||||
import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/util/utils";
|
||||
import { CodeEditor } from "./components/CodeEditor";
|
||||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
|
||||
type Props = {
|
||||
task: TaskApiResponse;
|
||||
onNavigate: (event: React.MouseEvent, id: string) => void;
|
||||
};
|
||||
|
||||
function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const showExtractedInformation = task?.status === Status.Completed;
|
||||
const extractedInformation = showExtractedInformation ? (
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={JSON.stringify(task.extracted_information, null, 2)}
|
||||
readOnly
|
||||
minHeight={"96px"}
|
||||
maxHeight={"500px"}
|
||||
className="w-full"
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const showFailureReason =
|
||||
task?.status === Status.Failed ||
|
||||
task?.status === Status.Terminated ||
|
||||
task?.status === Status.TimedOut;
|
||||
const failureReason = showFailureReason ? (
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={JSON.stringify(task.failure_reason, null, 2)}
|
||||
readOnly
|
||||
minHeight={"96px"}
|
||||
maxHeight={"500px"}
|
||||
className="w-full"
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Collapsible key={task.task_id} asChild open={open} onOpenChange={setOpen}>
|
||||
<>
|
||||
<TableRow
|
||||
className={cn("hover:bg-slate-elevation2", {
|
||||
"border-b-0 bg-slate-elevation2": open,
|
||||
})}
|
||||
>
|
||||
<TableCell>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div className="w-fit cursor-pointer rounded-full p-2 hover:bg-muted">
|
||||
{open ? (
|
||||
<ChevronDownIcon className="size-6" />
|
||||
) : (
|
||||
<ChevronRightIcon className="size-6" />
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
</TableCell>
|
||||
<TableCell className="w-1/4 cursor-pointer">
|
||||
{task.request.title}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer"
|
||||
onClick={(event) => {
|
||||
onNavigate(event, task.task_id);
|
||||
}}
|
||||
>
|
||||
{task.task_id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
|
||||
onClick={(event) => onNavigate(event, task.task_id)}
|
||||
>
|
||||
{task.request.url}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/6 cursor-pointer"
|
||||
onClick={(event) => onNavigate(event, task.task_id)}
|
||||
>
|
||||
<StatusBadge status={task.status} />
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer whitespace-nowrap"
|
||||
onClick={(event) => onNavigate(event, task.task_id)}
|
||||
title={basicTimeFormat(task.created_at)}
|
||||
>
|
||||
{basicLocalTimeFormat(task.created_at)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<CollapsibleContent asChild>
|
||||
<TableRow className="bg-slate-elevation2 hover:bg-slate-elevation2">
|
||||
<TableCell colSpan={6} className="border-b">
|
||||
<div className="space-y-2 px-6">
|
||||
<div className="flex gap-1">
|
||||
<div
|
||||
className={cn(
|
||||
"cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700",
|
||||
{
|
||||
"bg-slate-700 text-foreground": activeTab === 0,
|
||||
},
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveTab(0);
|
||||
}}
|
||||
>
|
||||
{showExtractedInformation
|
||||
? "Extracted Information"
|
||||
: showFailureReason
|
||||
? "Failure Reason"
|
||||
: ""}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700 hover:text-foreground",
|
||||
{
|
||||
"bg-slate-700 text-foreground": activeTab === 1,
|
||||
},
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveTab(1);
|
||||
}}
|
||||
>
|
||||
Navigation Goal
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700 hover:text-foreground",
|
||||
{
|
||||
"bg-slate-700 text-foreground": activeTab === 2,
|
||||
},
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveTab(2);
|
||||
}}
|
||||
>
|
||||
Parameters
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{activeTab === 0 &&
|
||||
(showExtractedInformation
|
||||
? extractedInformation
|
||||
: showFailureReason
|
||||
? failureReason
|
||||
: null)}
|
||||
{activeTab === 1 && (
|
||||
<AutoResizingTextarea
|
||||
value={task.request.navigation_goal ?? ""}
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
{activeTab === 2 && (
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={JSON.stringify(
|
||||
task.request.navigation_payload,
|
||||
null,
|
||||
2,
|
||||
)}
|
||||
minHeight={"96px"}
|
||||
maxHeight={"500px"}
|
||||
className="w-full"
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</CollapsibleContent>
|
||||
</>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowBlockCollapsibleContent };
|
||||
@@ -8,6 +8,16 @@ import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { ZoomableImage } from "@/components/ZoomableImage";
|
||||
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
@@ -33,8 +43,6 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { copyText } from "@/util/copyText";
|
||||
import { apiBaseUrl, envCredential } from "@/util/env";
|
||||
import {
|
||||
basicLocalTimeFormat,
|
||||
basicTimeFormat,
|
||||
localTimeFormatWithShortDate,
|
||||
timeFormatWithShortDate,
|
||||
} from "@/util/timeFormat";
|
||||
@@ -60,25 +68,15 @@ import {
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from "react-router-dom";
|
||||
import { TaskActions } from "../tasks/list/TaskActions";
|
||||
import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
|
||||
import {
|
||||
statusIsFinalized,
|
||||
statusIsNotFinalized,
|
||||
statusIsRunningOrQueued,
|
||||
} from "../tasks/types";
|
||||
import { WorkflowBlockCollapsibleContent } from "./WorkflowBlockCollapsibleContent";
|
||||
import { CodeEditor } from "./components/CodeEditor";
|
||||
import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
type StreamMessage = {
|
||||
task_id: string;
|
||||
@@ -199,6 +197,8 @@ function WorkflowRun() {
|
||||
|
||||
const workflowRunIsFinalized = workflowRun && statusIsFinalized(workflowRun);
|
||||
|
||||
const showStream = workflowRun && statusIsNotFinalized(workflowRun);
|
||||
|
||||
useEffect(() => {
|
||||
if (!workflowRunIsRunningOrQueued) {
|
||||
return;
|
||||
@@ -336,25 +336,37 @@ function WorkflowRun() {
|
||||
|
||||
const parameters = workflowRun?.parameters ?? {};
|
||||
|
||||
const title = workflowIsLoading ? (
|
||||
<Skeleton className="h-9 w-48" />
|
||||
) : (
|
||||
<h1 className="text-3xl">{workflow?.title}</h1>
|
||||
);
|
||||
|
||||
const workflowFailureReason = workflowRun?.failure_reason ? (
|
||||
<div
|
||||
className="space-y-2 rounded-md border border-red-600 p-4"
|
||||
style={{
|
||||
backgroundColor: "rgba(220, 38, 38, 0.10)",
|
||||
}}
|
||||
>
|
||||
<div className="font-bold">Workflow Failure Reason</div>
|
||||
<div className="text-sm">{workflowRun.failure_reason}</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="flex justify-between">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-5">
|
||||
<h1 className="text-3xl">{workflowRunId}</h1>
|
||||
{title}
|
||||
{workflowRunIsLoading ? (
|
||||
<Skeleton className="h-8 w-28" />
|
||||
) : workflowRun ? (
|
||||
<StatusBadge status={workflowRun?.status} />
|
||||
) : null}
|
||||
</div>
|
||||
<h2 className="text-2xl text-slate-400">
|
||||
{workflowIsLoading ? (
|
||||
<Skeleton className="h-8 w-48" />
|
||||
) : (
|
||||
workflow?.title
|
||||
)}
|
||||
</h2>
|
||||
<h2 className="text-2xl text-slate-400">{workflowRunId}</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
@@ -442,7 +454,8 @@ function WorkflowRun() {
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
{workflowRun && statusIsNotFinalized(workflowRun) && (
|
||||
{workflowFailureReason}
|
||||
{showStream && (
|
||||
<div className="flex gap-5">
|
||||
<div className="w-3/4 shrink-0">
|
||||
<AspectRatio ratio={16 / 9}>{getStream()}</AspectRatio>
|
||||
@@ -507,17 +520,18 @@ function WorkflowRun() {
|
||||
</header>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader className="rounded-t-md bg-slate-elevation1">
|
||||
<TableHeader className="rounded-t-md bg-slate-elevation2">
|
||||
<TableRow>
|
||||
<TableHead className="w-1/4 rounded-tl-md text-slate-400">
|
||||
ID
|
||||
<TableHead className="rounded-tl-md"></TableHead>
|
||||
<TableHead className="w-1/4 text-slate-400">
|
||||
Task Title
|
||||
</TableHead>
|
||||
<TableHead className="w-1/4 text-slate-400">ID</TableHead>
|
||||
<TableHead className="w-1/4 text-slate-400">URL</TableHead>
|
||||
<TableHead className="w-1/6 text-slate-400">Status</TableHead>
|
||||
<TableHead className="w-1/4 text-slate-400">
|
||||
<TableHead className="w-1/4 rounded-tr-md text-slate-400">
|
||||
Created At
|
||||
</TableHead>
|
||||
<TableHead className="w-1/12 rounded-tr-md" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@@ -525,7 +539,7 @@ function WorkflowRun() {
|
||||
<TaskListSkeletonRows />
|
||||
) : workflowTasks?.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5}>No tasks</TableCell>
|
||||
<TableCell colSpan={6}>Could not find any tasks</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
workflowTasks
|
||||
@@ -534,44 +548,11 @@ function WorkflowRun() {
|
||||
)
|
||||
.map((task) => {
|
||||
return (
|
||||
<TableRow key={task.task_id}>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer"
|
||||
onClick={(event) =>
|
||||
handleNavigate(event, task.task_id)
|
||||
}
|
||||
>
|
||||
{task.task_id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
|
||||
onClick={(event) =>
|
||||
handleNavigate(event, task.task_id)
|
||||
}
|
||||
>
|
||||
{task.request.url}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/6 cursor-pointer"
|
||||
onClick={(event) =>
|
||||
handleNavigate(event, task.task_id)
|
||||
}
|
||||
>
|
||||
<StatusBadge status={task.status} />
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer"
|
||||
onClick={(event) =>
|
||||
handleNavigate(event, task.task_id)
|
||||
}
|
||||
title={basicTimeFormat(task.created_at)}
|
||||
>
|
||||
{basicLocalTimeFormat(task.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="w-1/12">
|
||||
<TaskActions task={task} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<WorkflowBlockCollapsibleContent
|
||||
key={task.task_id}
|
||||
task={task}
|
||||
onNavigate={handleNavigate}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
@@ -620,8 +601,10 @@ function WorkflowRun() {
|
||||
return (
|
||||
<div key={key} className="flex flex-col gap-2">
|
||||
<Label>{key}</Label>
|
||||
{typeof value === "string" ? (
|
||||
<Input value={value} readOnly />
|
||||
{typeof value === "string" ||
|
||||
typeof value === "number" ||
|
||||
typeof value === "boolean" ? (
|
||||
<Input value={String(value)} readOnly />
|
||||
) : (
|
||||
<CodeEditor
|
||||
value={JSON.stringify(value, null, 2)}
|
||||
|
||||
@@ -555,6 +555,7 @@ function getWorkflowBlock(node: WorkflowBlockNode): BlockYAML {
|
||||
...base,
|
||||
block_type: "task",
|
||||
url: node.data.url,
|
||||
title: node.data.label,
|
||||
navigation_goal: node.data.navigationGoal,
|
||||
data_extraction_goal: node.data.dataExtractionGoal,
|
||||
data_schema: JSONParseSafe(node.data.dataSchema),
|
||||
|
||||
Reference in New Issue
Block a user