92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import {
|
|
findAllDeployments,
|
|
findAllRunsWithCounts,
|
|
} from "../server/findAllRuns";
|
|
import { DeploymentDisplay } from "./DeploymentDisplay";
|
|
import { PaginationControl } from "./PaginationControl";
|
|
import { RunDisplay } from "./RunDisplay";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { parseAsInteger } from "next-usequerystate";
|
|
|
|
const itemPerPage = 6;
|
|
const pageParser = parseAsInteger.withDefault(1);
|
|
|
|
export async function RunsTable(props: {
|
|
workflow_id: string;
|
|
searchParams: { [key: string]: string | string[] | undefined };
|
|
}) {
|
|
// await new Promise((resolve) => setTimeout(resolve, 5000));
|
|
const page = pageParser.parseServerSide(
|
|
props.searchParams?.page ?? undefined
|
|
);
|
|
const { allRuns, total } = await findAllRunsWithCounts({
|
|
workflow_id: props.workflow_id,
|
|
limit: itemPerPage,
|
|
offset: (page - 1) * itemPerPage,
|
|
});
|
|
return (
|
|
<div>
|
|
<div className="overflow-auto h-fit w-full">
|
|
<Table className="">
|
|
{allRuns.length == 0 && (
|
|
<TableCaption>A list of your recent runs.</TableCaption>
|
|
)}
|
|
<TableHeader className="bg-background top-0 sticky">
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">Number</TableHead>
|
|
<TableHead className="">Machine</TableHead>
|
|
<TableHead className="">Time</TableHead>
|
|
<TableHead className="w-[100px]">Version</TableHead>
|
|
<TableHead className="truncate">Live Status</TableHead>
|
|
<TableHead className=" text-right">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{allRuns.map((run) => (
|
|
<RunDisplay run={run} key={run.id} />
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{Math.ceil(total / itemPerPage) > 0 && (
|
|
<PaginationControl
|
|
totalPage={Math.ceil(total / itemPerPage)}
|
|
currentPage={page}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export async function DeploymentsTable(props: { workflow_id: string }) {
|
|
const allRuns = await findAllDeployments(props.workflow_id);
|
|
return (
|
|
<div className="overflow-auto h-fit w-full">
|
|
<Table className="">
|
|
<TableCaption>A list of your deployments</TableCaption>
|
|
<TableHeader className="bg-background top-0 sticky">
|
|
<TableRow>
|
|
<TableHead className=" w-[100px]">Environment</TableHead>
|
|
<TableHead className=" w-[100px]">Version</TableHead>
|
|
<TableHead className="">Machine</TableHead>
|
|
<TableHead className=" text-right">Updated At</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{allRuns.map((run) => (
|
|
<DeploymentDisplay deployment={run} key={run.id} />
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|