diff --git a/web/src/app/(app)/workflows/[workflow_id]/@runs/page.tsx b/web/src/app/(app)/workflows/[workflow_id]/@runs/page.tsx index 2843009..cf2952a 100644 --- a/web/src/app/(app)/workflows/[workflow_id]/@runs/page.tsx +++ b/web/src/app/(app)/workflows/[workflow_id]/@runs/page.tsx @@ -1,4 +1,5 @@ import { LoadingWrapper } from "@/components/LoadingWrapper"; +import { RouteRefresher } from "@/components/RouteRefresher"; import { RunsTable } from "@/components/RunsTable"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; @@ -13,8 +14,11 @@ export default async function Page({ return ( - + Run +
+ +
diff --git a/web/src/components/LiveStatus.tsx b/web/src/components/LiveStatus.tsx index deeb5e4..867cf5f 100644 --- a/web/src/components/LiveStatus.tsx +++ b/web/src/components/LiveStatus.tsx @@ -54,7 +54,7 @@ export function LiveStatus({ ? `${data.json.event} - ${data.json.data.node}` : "-"} - + diff --git a/web/src/components/PaginationControl.tsx b/web/src/components/PaginationControl.tsx index 19825dd..b805655 100644 --- a/web/src/components/PaginationControl.tsx +++ b/web/src/components/PaginationControl.tsx @@ -12,6 +12,22 @@ export function PaginationControl(props: { totalPage: number; currentPage: number; }) { + let startPage = Math.max(props.currentPage - 2, 1); + let endPage = Math.min(startPage + 3, props.totalPage); + + if (props.currentPage <= 2) { + endPage = Math.min(4, props.totalPage); + } + + if (props.currentPage > props.totalPage - 2) { + startPage = Math.max(props.totalPage - 3, 1); + } + + const pageNumbers = Array.from( + { length: endPage - startPage + 1 }, + (_, i) => startPage + i + ); + return ( @@ -22,9 +38,15 @@ export function PaginationControl(props: { : `?page=${props.currentPage}` } /> - - {props.currentPage} - + {pageNumbers.map((page) => ( + + {page} + + ))} diff --git a/web/src/components/RouteRefresher.tsx b/web/src/components/RouteRefresher.tsx new file mode 100644 index 0000000..b772986 --- /dev/null +++ b/web/src/components/RouteRefresher.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { LoadingIcon } from "@/components/LoadingIcon"; +import { useRouter } from "next/navigation"; +import { useEffect, useTransition } from "react"; + +export function RouteRefresher(props: { interval: number }) { + const [isPending, startTransition] = useTransition(); + const router = useRouter(); + + useEffect(() => { + let timeout: NodeJS.Timeout; + + const refresh = () => { + console.log("refreshing"); + + startTransition(() => { + router.refresh(); + }); + timeout = setTimeout(refresh, props.interval); + }; + + const handleVisibilityChange = () => { + if (document.hidden) { + clearTimeout(timeout); + } else { + refresh(); + } + }; + + window.addEventListener("visibilitychange", handleVisibilityChange); + refresh(); + + return () => { + clearTimeout(timeout); + window.removeEventListener("visibilitychange", handleVisibilityChange); + }; + }, [props.interval, router]); + + return
{isPending && }
; +} diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx index 8ee07d0..c9d35cd 100644 --- a/web/src/components/RunDisplay.tsx +++ b/web/src/components/RunDisplay.tsx @@ -24,8 +24,12 @@ export async function RunDisplay({ {run.number} - {run.machine?.name} - {getRelativeTime(run.created_at)} + + {run.machine?.name} + + + {getRelativeTime(run.created_at)} + {run.version?.version} diff --git a/web/src/components/RunsTable.tsx b/web/src/components/RunsTable.tsx index 8ac592f..bf1c8e7 100644 --- a/web/src/components/RunsTable.tsx +++ b/web/src/components/RunsTable.tsx @@ -15,7 +15,7 @@ import { } from "@/components/ui/table"; import { parseAsInteger } from "next-usequerystate"; -const itemPerPage = 4; +const itemPerPage = 6; const pageParser = parseAsInteger.withDefault(1); export async function RunsTable(props: { @@ -33,7 +33,7 @@ export async function RunsTable(props: { }); return (
-
+
{/* A list of your recent runs. */} @@ -42,7 +42,7 @@ export async function RunsTable(props: { Machine Time Version - Live Status + Live Status Status