diff --git a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
index dcc615b9..d7b2353c 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
@@ -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() {
Create New Run
-
+
-
-
-
- ID
- Status
-
-
-
- {isLoading ? (
+
+
+
- Loading...
+ ID
+ Status
+ Created At
- ) : workflowRuns?.length === 0 ? (
-
- No workflow runs found
-
- ) : (
- workflowRuns?.map((workflowRun) => (
- {
- navigate(`${workflowRun.workflow_run_id}`);
- }}
- className="cursor-pointer"
- >
- {workflowRun.workflow_run_id}
-
-
-
+
+
+ {isLoading ? (
+
+ Loading...
- ))
- )}
-
-
-
-
-
- {
- if (page === 1) {
- return;
- }
- const params = new URLSearchParams();
- params.set("page", String(Math.max(1, page - 1)));
- setSearchParams(params, { replace: true });
- }}
- />
-
-
- {page}
-
-
- {
- const params = new URLSearchParams();
- params.set("page", String(page + 1));
- setSearchParams(params, { replace: true });
- }}
- />
-
-
-
+ ) : workflowRuns?.length === 0 ? (
+
+ No workflow runs found
+
+ ) : (
+ workflowRuns?.map((workflowRun) => (
+
{
+ 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"
+ >
+ {workflowRun.workflow_run_id}
+
+
+
+
+ {basicTimeFormat(workflowRun.created_at)}
+
+
+ ))
+ )}
+
+
+
+
+
+ {
+ if (page === 1) {
+ return;
+ }
+ const params = new URLSearchParams();
+ params.set("page", String(Math.max(1, page - 1)));
+ setSearchParams(params, { replace: true });
+ }}
+ />
+
+
+ {page}
+
+
+ {
+ const params = new URLSearchParams();
+ params.set("page", String(page + 1));
+ setSearchParams(params, { replace: true });
+ }}
+ />
+
+
+
+
);
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 229e7b57..a51bd553 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -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
>({
- 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() {
) : workflowTasks?.length === 0 ? (
-
- This workflow run does not have any tasks
-
+ No tasks
) : (
workflowTasks?.map((task) => {
@@ -131,6 +143,35 @@ function WorkflowRun() {
)}
+
+
+
+ {
+ if (page === 1) {
+ return;
+ }
+ const params = new URLSearchParams();
+ params.set("page", String(Math.max(1, page - 1)));
+ setSearchParams(params, { replace: true });
+ }}
+ />
+
+
+ {page}
+
+
+ {
+ const params = new URLSearchParams();
+ params.set("page", String(page + 1));
+ setSearchParams(params, { replace: true });
+ }}
+ />
+
+
+