vikarti.anatra/Skyvern
1
0
Fork 0
mirror of https://github.com/Skyvern-AI/skyvern.git synced 2025-09-02 10:41:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add pagination to workflow tasks (#647)

Browse source
This commit is contained in:
Kerem Yilmaz 2024-07-25 07:35:47 -07:00 • committed by GitHub
parent 7d2dd26931
commit 9f0cad5dd8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 124 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
View file

@ -19,6 +19,7 @@ import {
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { basicTimeFormat } from "@/util/timeFormat";
import { cn } from "@/util/utils"; import { cn } from "@/util/utils";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { import {
@ -63,73 +64,88 @@ function WorkflowPage() {
<Link to="run">Create New Run</Link> <Link to="run">Create New Run</Link>
</Button> </Button>
</header> </header>
<div> <div className="space-y-4">
<header> <header>
<h1 className="text-lg font-semibold">Past Runs</h1> <h1 className="text-lg font-semibold">Past Runs</h1>
</header> </header>
<Table> <div className="rounded-md border">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead className="w-1/2">ID</TableHead>
<TableHead className="w-1/2">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow> <TableRow>
<TableCell colSpan={2}>Loading...</TableCell> <TableHead className="w-1/3">ID</TableHead>
<TableHead className="w-1/3">Status</TableHead>
<TableHead className="w-1/3">Created At</TableHead>
</TableRow> </TableRow>
) : workflowRuns?.length === 0 ? ( </TableHeader>
<TableRow> <TableBody>
<TableCell colSpan={2}>No workflow runs found</TableCell> {isLoading ? (
</TableRow> <TableRow>
) : ( <TableCell colSpan={3}>Loading...</TableCell>
workflowRuns?.map((workflowRun) => (
<TableRow
key={workflowRun.workflow_run_id}
onClick={() => {
navigate(`${workflowRun.workflow_run_id}`);
}}
className="cursor-pointer"
>
<TableCell>{workflowRun.workflow_run_id}</TableCell>
<TableCell>
<StatusBadge status={workflowRun.status} />
</TableCell>
</TableRow> </TableRow>
)) ) : workflowRuns?.length === 0 ? (
)} <TableRow>
</TableBody> <TableCell colSpan={3}>No workflow runs found</TableCell>
</Table> </TableRow>
<Pagination className="pt-2"> ) : (
<PaginationContent> workflowRuns?.map((workflowRun) => (
<PaginationItem> <TableRow
<PaginationPrevious key={workflowRun.workflow_run_id}
className={cn({ "cursor-not-allowed": page === 1 })} onClick={(event) => {
onClick={() => { if (event.ctrlKey || event.metaKey) {
if (page === 1) { window.open(
return; window.location.origin +
} `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}`,
const params = new URLSearchParams(); "_blank",
params.set("page", String(Math.max(1, page - 1))); "noopener,noreferrer",
setSearchParams(params, { replace: true }); );
}} return;
/> }
</PaginationItem> navigate(`${workflowRun.workflow_run_id}`);
<PaginationItem> }}
<PaginationLink>{page}</PaginationLink> className="cursor-pointer"
</PaginationItem> >
<PaginationItem> <TableCell>{workflowRun.workflow_run_id}</TableCell>
<PaginationNext <TableCell>
onClick={() => { <StatusBadge status={workflowRun.status} />
const params = new URLSearchParams(); </TableCell>
params.set("page", String(page + 1)); <TableCell>
setSearchParams(params, { replace: true }); {basicTimeFormat(workflowRun.created_at)}
}} </TableCell>
/> </TableRow>
</PaginationItem> ))
</PaginationContent> )}
</Pagination> </TableBody>
</Table>
<Pagination className="pt-2">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
className={cn({ "cursor-not-allowed": page === 1 })}
onClick={() => {
if (page === 1) {
return;
}
const params = new URLSearchParams();
params.set("page", String(Math.max(1, page - 1)));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink>{page}</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={() => {
const params = new URLSearchParams();
params.set("page", String(page + 1));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div> </div>
</div> </div>
); );

53
skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
View file

@ -12,14 +12,26 @@ import {
} from "@/components/ui/table"; } from "@/components/ui/table";
import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows"; import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
import { basicTimeFormat } from "@/util/timeFormat"; import { basicTimeFormat } from "@/util/timeFormat";
import { TaskActions } from "../tasks/list/TaskActions"; import { TaskActions } from "../tasks/list/TaskActions";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { cn } from "@/util/utils";
function WorkflowRun() { function WorkflowRun() {
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
const { workflowRunId, workflowPermanentId } = useParams(); const { workflowRunId, workflowPermanentId } = useParams();
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const navigate = useNavigate(); const navigate = useNavigate();
@ -37,11 +49,13 @@ function WorkflowRun() {
const { data: workflowTasks, isLoading: workflowTasksIsLoading } = useQuery< const { data: workflowTasks, isLoading: workflowTasksIsLoading } = useQuery<
Array<TaskApiResponse> Array<TaskApiResponse>
>({ >({
queryKey: ["workflowTasks", workflowRunId], queryKey: ["workflowTasks", workflowRunId, page],
queryFn: async () => { queryFn: async () => {
const client = await getClient(credentialGetter); const client = await getClient(credentialGetter);
const params = new URLSearchParams();
params.append("page", String(page));
return client return client
.get(`/tasks?workflow_run_id=${workflowRunId}&page_size=200`) .get(`/tasks?workflow_run_id=${workflowRunId}`, { params })
.then((response) => response.data); .then((response) => response.data);
}, },
}); });
@ -90,9 +104,7 @@ function WorkflowRun() {
<TaskListSkeletonRows /> <TaskListSkeletonRows />
) : workflowTasks?.length === 0 ? ( ) : workflowTasks?.length === 0 ? (
<TableRow> <TableRow>
<TableCell colSpan={5}> <TableCell colSpan={5}>No tasks</TableCell>
This workflow run does not have any tasks
</TableCell>
</TableRow> </TableRow>
) : ( ) : (
workflowTasks?.map((task) => { workflowTasks?.map((task) => {
@ -131,6 +143,35 @@ function WorkflowRun() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
<Pagination className="pt-2">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
className={cn({ "cursor-not-allowed": page === 1 })}
onClick={() => {
if (page === 1) {
return;
}
const params = new URLSearchParams();
params.set("page", String(Math.max(1, page - 1)));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink>{page}</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={() => {
const params = new URLSearchParams();
params.set("page", String(page + 1));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">