diff --git a/skyvern-frontend/README.md b/skyvern-frontend/README.md index ae092a9b..3811d3ee 100644 --- a/skyvern-frontend/README.md +++ b/skyvern-frontend/README.md @@ -1,6 +1,5 @@ -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [Skyvern Frontend](#skyvern-frontend) - [Development](#development) diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx index 283de853..63af54b4 100644 --- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx +++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx @@ -39,7 +39,7 @@ function TaskDetails() { query.state.data?.status === Status.Running || query.state.data?.status === Status.Queued ) { - return 3000; + return 30000; } return false; }, diff --git a/skyvern-frontend/src/routes/tasks/list/TaskList.tsx b/skyvern-frontend/src/routes/tasks/list/TaskList.tsx index a38db083..f397d338 100644 --- a/skyvern-frontend/src/routes/tasks/list/TaskList.tsx +++ b/skyvern-frontend/src/routes/tasks/list/TaskList.tsx @@ -1,6 +1,6 @@ import { client } from "@/api/AxiosClient"; import { TaskApiResponse } from "@/api/types"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { Table, TableBody, @@ -44,7 +44,7 @@ function TaskList() { isError, error, } = useQuery>({ - queryKey: ["tasks", page], + queryKey: ["tasks", "all", page], queryFn: async () => { return client .get("/tasks", { @@ -55,8 +55,6 @@ function TaskList() { }) .then((response) => response.data); }, - refetchInterval: 3000, - placeholderData: keepPreviousData, }); if (isError) { diff --git a/skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx b/skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx index 237786b8..e81184af 100644 --- a/skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx +++ b/skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx @@ -56,7 +56,7 @@ function LatestScreenshot({ id }: Props) { return Promise.reject("No screenshots found"); }, - refetchInterval: 2000, + refetchInterval: 5000, placeholderData: keepPreviousData, }); diff --git a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx index dda37fd5..d93f0e8f 100644 --- a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx +++ b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx @@ -1,6 +1,6 @@ import { client } from "@/api/AxiosClient"; import { Status, TaskApiResponse } from "@/api/types"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { basicTimeFormat } from "@/util/timeFormat"; import { Table, @@ -16,12 +16,16 @@ import { StatusBadge } from "@/components/StatusBadge"; function QueuedTasks() { const navigate = useNavigate(); const { data: tasks } = useQuery>({ - queryKey: ["tasks"], + queryKey: ["tasks", "queued"], queryFn: async () => { - return client.get("/tasks").then((response) => response.data); + return client + .get("/tasks", { + params: { + task_status: "queued", + }, + }) + .then((response) => response.data); }, - refetchInterval: 3000, - placeholderData: keepPreviousData, }); const queuedTasks = tasks diff --git a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx index d48e3570..7261bd99 100644 --- a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx +++ b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx @@ -1,7 +1,7 @@ import { client } from "@/api/AxiosClient"; -import { Status, TaskApiResponse } from "@/api/types"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { TaskApiResponse } from "@/api/types"; +import { useQuery } from "@tanstack/react-query"; +import { useNavigate } from "react-router-dom"; import { Card, CardContent, @@ -10,33 +10,25 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { PAGE_SIZE } from "../constants"; import { basicTimeFormat } from "@/util/timeFormat"; import { LatestScreenshot } from "./LatestScreenshot"; function RunningTasks() { const navigate = useNavigate(); - const [searchParams] = useSearchParams(); - const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1; - const { data: tasks } = useQuery>({ - queryKey: ["tasks", page], + const { data: runningTasks } = useQuery>({ + queryKey: ["tasks", "running"], queryFn: async () => { return client .get("/tasks", { params: { - page: 1, - page_size: PAGE_SIZE, + task_status: "running", }, }) .then((response) => response.data); }, - refetchInterval: 3000, - placeholderData: keepPreviousData, }); - const runningTasks = tasks?.filter((task) => task.status === Status.Running); - if (runningTasks?.length === 0) { return
No running tasks
; }