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

Adjust responsiveness of workflow run tasks tabe (#1221)

Browse Source
This commit is contained in:
Shuchang Zheng
2024-11-19 12:46:56 -08:00
committed by GitHub
parent 9b29ed1d5b
commit cca254e5c9
2 changed files with 50 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx
View File

@@ -34,14 +34,22 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
/> />
) : null; ) : null;
const isCanceled = task?.status === Status.Canceled;
const showFailureReason = const showFailureReason =
task?.status === Status.Failed || task?.status === Status.Failed ||
task?.status === Status.Terminated || task?.status === Status.Terminated ||
task?.status === Status.TimedOut; task?.status === Status.TimedOut ||
task?.status === Status.Canceled;
const failureReason = showFailureReason ? ( const failureReason = showFailureReason ? (
<CodeEditor <CodeEditor
language="json" language="json"
value={JSON.stringify(task.failure_reason, null, 2)} value={JSON.stringify(
task.failure_reason ?? (isCanceled && "This task was canceled."),
null,
2,
)}
readOnly readOnly
minHeight={"96px"} minHeight={"96px"}
maxHeight={"500px"} maxHeight={"500px"}
@@ -59,7 +67,7 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
> >
<TableCell> <TableCell>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<div className="w-fit cursor-pointer rounded-full p-2 hover:bg-muted"> <div className="w-10 cursor-pointer rounded-full p-2 hover:bg-muted">
{open ? ( {open ? (
<ChevronDownIcon className="size-6" /> <ChevronDownIcon className="size-6" />
) : ( ) : (
@@ -68,11 +76,15 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
</div> </div>
</CollapsibleTrigger> </CollapsibleTrigger>
</TableCell> </TableCell>
<TableCell className="w-1/4 cursor-pointer"> <TableCell
className="w-1/5 max-w-0 cursor-pointer truncate"
title={task.request.title ?? undefined}
>
{task.request.title} {task.request.title}
</TableCell> </TableCell>
<TableCell <TableCell
className="w-1/4 cursor-pointer" className="w-1/6 max-w-0 cursor-pointer truncate"
title={task.task_id}
onClick={(event) => { onClick={(event) => {
onNavigate(event, task.task_id); onNavigate(event, task.task_id);
}} }}
@@ -80,19 +92,20 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
{task.task_id} {task.task_id}
</TableCell> </TableCell>
<TableCell <TableCell
className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap" className="w-1/4 max-w-0 cursor-pointer truncate"
title={task.request.url}
onClick={(event) => onNavigate(event, task.task_id)} onClick={(event) => onNavigate(event, task.task_id)}
> >
{task.request.url} {task.request.url}
</TableCell> </TableCell>
<TableCell <TableCell
className="w-1/6 cursor-pointer" className="w-1/8 cursor-pointer"
onClick={(event) => onNavigate(event, task.task_id)} onClick={(event) => onNavigate(event, task.task_id)}
> >
<StatusBadge status={task.status} /> <StatusBadge status={task.status} />
</TableCell> </TableCell>
<TableCell <TableCell
className="w-1/4 cursor-pointer whitespace-nowrap" className="w-1/5 max-w-0 cursor-pointer truncate"
onClick={(event) => onNavigate(event, task.task_id)} onClick={(event) => onNavigate(event, task.task_id)}
title={basicTimeFormat(task.created_at)} title={basicTimeFormat(task.created_at)}
> >

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

@@ -68,7 +68,6 @@ import {
useParams, useParams,
useSearchParams, useSearchParams,
} from "react-router-dom"; } from "react-router-dom";
import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
import { import {
statusIsFinalized, statusIsFinalized,
statusIsNotFinalized, statusIsNotFinalized,
@@ -354,6 +353,29 @@ function WorkflowRun() {
</div> </div>
) : null; ) : null;
const skeleton = (
<TableRow>
<TableCell className="w-10">
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/5">
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/6">
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/4">
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/8">
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/5">
<Skeleton className="h-6 w-full" />
</TableCell>
</TableRow>
);
return ( return (
<div className="space-y-8"> <div className="space-y-8">
<header className="flex justify-between"> <header className="flex justify-between">
@@ -522,21 +544,21 @@ function WorkflowRun() {
<Table> <Table>
<TableHeader className="rounded-t-md bg-slate-elevation2"> <TableHeader className="rounded-t-md bg-slate-elevation2">
<TableRow> <TableRow>
<TableHead className="rounded-tl-md"></TableHead> <TableHead className="w-10 rounded-tl-md"></TableHead>
<TableHead className="w-1/4 text-slate-400"> <TableHead className="w-1/5 text-slate-400">
Task Title Task Title
</TableHead> </TableHead>
<TableHead className="w-1/4 text-slate-400">ID</TableHead> <TableHead className="w-1/6 text-slate-400">ID</TableHead>
<TableHead className="w-1/4 text-slate-400">URL</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/8 text-slate-400">Status</TableHead>
<TableHead className="w-1/4 rounded-tr-md text-slate-400"> <TableHead className="w-1/5 rounded-tr-md text-slate-400">
Created At Created At
</TableHead> </TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{workflowTasksIsLoading ? ( {workflowTasksIsLoading ? (
<TaskListSkeletonRows /> skeleton
) : workflowTasks?.length === 0 ? ( ) : workflowTasks?.length === 0 ? (
<TableRow> <TableRow>
<TableCell colSpan={6}>Could not find any tasks</TableCell> <TableCell colSpan={6}>Could not find any tasks</TableCell>