feat(web): paginated runs table, add loading page

web/src/components/LoadingWrapper.tsx

@@ -0,0 +1,37 @@
+import { LoadingIcon } from "@/components/LoadingIcon";
+import { cn } from "@/lib/utils";
+import { Suspense } from "react";
+
+export function LoadingWrapper(props: {
+  tag: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <div className="w-full py-4 flex justify-center items-center gap-2 text-sm">
+          Fetching {props.tag} <LoadingIcon />
+        </div>
+      }
+    >
+      {props.children}
+    </Suspense>
+  );
+}
+
+export function LoadingPageWrapper(props: {
+  tag: string;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "w-full py-4 flex justify-center items-center gap-2 text-sm",
+        props.className
+      )}
+    >
+      Fetching {props.tag} <LoadingIcon />
+    </div>
+  );
+}

web/src/components/PaginationControl.tsx

@@ -0,0 +1,42 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export function PaginationControl(props: {
+  totalPage: number;
+  currentPage: number;
+}) {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationPrevious
+          href={
+            props.currentPage > 1
+              ? `?page=${props.currentPage - 1}`
+              : `?page=${props.currentPage}`
+          }
+        />
+        <PaginationLink href="#" isActive>
+          {props.currentPage}
+        </PaginationLink>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationNext
+          className="cursor-pointer"
+          href={
+            props.currentPage < props.totalPage
+              ? `?page=${props.currentPage + 1}`
+              : `?page=${props.totalPage}`
+          }
+        />
+      </PaginationContent>
+    </Pagination>
+  );
+}

web/src/components/RunsTable.tsx

@@ -1,5 +1,9 @@
-import { findAllDeployments, findAllRuns } from "../server/findAllRuns";
+import {
+  findAllDeployments,
+  findAllRunsWithCounts,
+} from "../server/findAllRuns";
 import { DeploymentDisplay } from "./DeploymentDisplay";
+import { PaginationControl } from "./PaginationControl";
 import { RunDisplay } from "./RunDisplay";
 import {
   Table,
@@ -9,29 +13,51 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { parseAsInteger } from "next-usequerystate";
 
-export async function RunsTable(props: { workflow_id: string }) {
-  const allRuns = await findAllRuns(props.workflow_id);
+const itemPerPage = 4;
+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 className="overflow-auto h-[400px] w-full">
-      <Table className="">
-        <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="">Live Status</TableHead>
-            <TableHead className=" text-right">Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {allRuns.map((run) => (
-            <RunDisplay run={run} key={run.id} />
-          ))}
-        </TableBody>
-      </Table>
+    <div>
+      <div className="overflow-auto h-[400px] w-full">
+        <Table className="">
+          {/* <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="">Live Status</TableHead>
+              <TableHead className=" text-right">Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {allRuns.map((run) => (
+              <RunDisplay run={run} key={run.id} />
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationControl
+        totalPage={Math.ceil(total / itemPerPage)}
+        currentPage={page}
+      />
     </div>
   );
 }

web/src/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import type { ButtonProps } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import Link from "next/link";
+import * as React from "react";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<typeof Link>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <PaginationItem>
+    <Link
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  </PaginationItem>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }