Files
BennyKok-comfyui-deploy/web/src/components/RunsTable.tsx
T

88 lines
2.5 KiB
TypeScript

"use client";
import {
Table,
TableBody,
TableCaption,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { parseAsInteger } from "next-usequerystate";
import {
findAllRunsWithCounts,
getAllRunstableContent,
} from "../server/findAllRuns";
import { PaginationControl } from "./PaginationControl";
import { RunDisplay } from "./RunDisplay";
import useSWR from "swr";
import { LoadingIcon } from "@/components/LoadingIcon";
const itemPerPage = 6;
const pageParser = parseAsInteger.withDefault(1);
export function RunsTable(props: {
workflow_id: string;
searchParams: { [key: string]: any };
}) {
const page = pageParser.parse(props.searchParams?.page ?? undefined) ?? 1;
const { data, error, isLoading, isValidating } = useSWR(
"runs+" + page,
async () => {
const data = await findAllRunsWithCounts({
workflow_id: props.workflow_id,
limit: itemPerPage,
offset: (page - 1) * itemPerPage,
});
return data;
},
{
// suspense: false,
refreshInterval: 5000,
},
);
// await new Promise((resolve) => setTimeout(resolve, 5000));
return (
<div>
{isValidating ? (
<div className="absolute right-8 top-8">
<LoadingIcon />
</div>
) : null}
<div className="overflow-auto h-fit w-full">
<Table className="">
{/* {data?.allRuns.length === 0 && (
<TableCaption>A list of your recent runs.</TableCaption>
)} */}
<TableHeader className="bg-background top-0 sticky">
<TableRow>
<TableHead className="truncate">Number</TableHead>
<TableHead className="truncate">Machine</TableHead>
<TableHead className="truncate">Time</TableHead>
<TableHead className="truncate">Version</TableHead>
<TableHead className="truncate">Origin</TableHead>
<TableHead className="truncate">Duration</TableHead>
<TableHead className="truncate">Live Status</TableHead>
<TableHead className="text-right">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.allRuns.map((run) => (
<RunDisplay run={run} key={run.id} />
))}
</TableBody>
</Table>
</div>
{data && Math.ceil(data.total / itemPerPage) > 0 && (
<PaginationControl
totalPage={Math.ceil(data.total / itemPerPage)}
currentPage={page}
/>
)}
</div>
);
}