vikarti.anatra/Skyvern
1
0
Fork 0
mirror of https://github.com/Skyvern-AI/skyvern.git synced 2025-09-02 02:30:07 +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,
} from "@/components/ui/table";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { basicTimeFormat } from "@/util/timeFormat";
import { cn } from "@/util/utils";
import { useQuery } from "@tanstack/react-query";
import {
@ -63,73 +64,88 @@ function WorkflowPage() {
<Link to="run">Create New Run</Link>
</Button>
</header>
<div>
<div className="space-y-4">
<header>
<h1 className="text-lg font-semibold">Past Runs</h1>
</header>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/2">ID</TableHead>
<TableHead className="w-1/2">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<div className="rounded-md border">
<Table>
<TableHeader>
<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>
) : workflowRuns?.length === 0 ? (
<TableRow>
<TableCell colSpan={2}>No workflow runs found</TableCell>
</TableRow>
) : (
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>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={3}>Loading...</TableCell>
</TableRow>
))
)}
</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>
) : workflowRuns?.length === 0 ? (
<TableRow>
<TableCell colSpan={3}>No workflow runs found</TableCell>
</TableRow>
) : (
workflowRuns?.map((workflowRun) => (
<TableRow
key={workflowRun.workflow_run_id}
onClick={(event) => {
if (event.ctrlKey || event.metaKey) {
window.open(
window.location.origin +
`/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}`,
"_blank",
"noopener,noreferrer",
);
return;
}
navigate(`${workflowRun.workflow_run_id}`);
}}
className="cursor-pointer"
>
<TableCell>{workflowRun.workflow_run_id}</TableCell>
<TableCell>
<StatusBadge status={workflowRun.status} />
</TableCell>
<TableCell>
{basicTimeFormat(workflowRun.created_at)}
</TableCell>
</TableRow>
))
)}
</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>
);

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

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