fix: auto refresh table

web/src/app/(app)/workflows/[workflow_id]/@deployment/page.tsx

@@ -1,5 +1,5 @@
 import { LoadingWrapper } from "@/components/LoadingWrapper";
-import { DeploymentsTable } from "@/components/RunsTable";
+import { DeploymentsTable } from "@/components/DeploymentsTable";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default async function Page({

web/src/components/DeploymentsTable.tsx

@@ -0,0 +1,41 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { headers } from "next/headers";
+import { findAllDeployments } from "../server/findAllRuns";
+import { DeploymentDisplay } from "./DeploymentDisplay";
+
+export async function DeploymentsTable(props: { workflow_id: string }) {
+  const allRuns = await findAllDeployments(props.workflow_id);
+
+  const headersList = headers();
+  const host = headersList.get("host") || "";
+  const protocol = headersList.get("x-forwarded-proto") || "";
+  const domain = `${protocol}://${host}`;
+
+  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} domain={domain} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

web/src/components/RunDisplay.tsx

@@ -25,7 +25,7 @@ import { LogsType, LogsViewer } from "@/components/LogsViewer";
 import { Button } from "@/components/ui/button";
 import { Edit, ExternalLink } from "lucide-react";
 
-export async function RunDisplay({
+export function RunDisplay({
   run,
 }: {
   run: Awaited<ReturnType<typeof findAllRuns>>[0];

web/src/components/RunsTable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Table,
   TableBody,
@@ -7,94 +9,69 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { parseAsInteger } from "next-usequerystate";
-import { headers } from "next/headers";
 import {
-	findAllDeployments,
+  findAllRunsWithCounts,
-	findAllRunsWithCounts,
+  getAllRunstableContent,
 } from "../server/findAllRuns";
-import { DeploymentDisplay } from "./DeploymentDisplay";
 import { PaginationControl } from "./PaginationControl";
 import { RunDisplay } from "./RunDisplay";
+import useSWR from "swr";
 
 const itemPerPage = 6;
 const pageParser = parseAsInteger.withDefault(1);
 
-export async function RunsTable(props: {
+export function RunsTable(props: {
   workflow_id: string;
-  searchParams: { [key: string]: string | string[] | undefined };
+  searchParams: { [key: string]: any };
 }) {
-  // await new Promise((resolve) => setTimeout(resolve, 5000));
+  const page = pageParser.parse(props.searchParams?.page ?? undefined) ?? 1;
-  const page = pageParser.parseServerSide(
+  const { data, error, isLoading } = useSWR(
-    props.searchParams?.page ?? undefined
+    "runs+" + page,
+    async () => {
+      const data = await getAllRunstableContent({
+        workflow_id: props.workflow_id,
+        limit: itemPerPage,
+        offset: (page - 1) * itemPerPage,
+      });
+      return data;
+    },
+    {
+      // suspense: false,
+      refreshInterval: 5000,
+    },
   );
-  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="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>
-							{allRuns.map((run) => (
-								<RunDisplay run={run} key={run.id} />
-							))}
-						</TableBody>
-					</Table>
-				</div>
 
-				{Math.ceil(total / itemPerPage) > 0 && (
+  // await new Promise((resolve) => setTimeout(resolve, 5000));
-					<PaginationControl
-						totalPage={Math.ceil(total / itemPerPage)}
-						currentPage={page}
-					/>
-				)}
-			</div>
-		);
-}
-
-export async function DeploymentsTable(props: { workflow_id: string }) {
-  const allRuns = await findAllDeployments(props.workflow_id);
-
-  const headersList = headers();
-  const host = headersList.get("host") || "";
-  const protocol = headersList.get("x-forwarded-proto") || "";
-  const domain = `${protocol}://${host}`;
 
   return (
-    <div className="overflow-auto h-fit w-full">
+    <div>
-      <Table className="">
+      <div className="overflow-auto h-fit w-full">
-        <TableCaption>A list of your deployments</TableCaption>
+        <Table className="">
-        <TableHeader className="bg-background top-0 sticky">
+          {/* {data?.allRuns.length === 0 && (
-          <TableRow>
+            <TableCaption>A list of your recent runs.</TableCaption>
-            <TableHead className=" w-[100px]">Environment</TableHead>
+          )} */}
-            <TableHead className=" w-[100px]">Version</TableHead>
+          <TableHeader className="bg-background top-0 sticky">
-            <TableHead className="">Machine</TableHead>
+            <TableRow>
-            <TableHead className=" text-right">Updated At</TableHead>
+              <TableHead className="truncate">Number</TableHead>
-          </TableRow>
+              <TableHead className="truncate">Machine</TableHead>
-        </TableHeader>
+              <TableHead className="truncate">Time</TableHead>
-        <TableBody>
+              <TableHead className="truncate">Version</TableHead>
-          {allRuns.map((run) => (
+              <TableHead className="truncate">Origin</TableHead>
-            <DeploymentDisplay deployment={run} key={run.id} domain={domain} />
+              <TableHead className="truncate">Duration</TableHead>
-          ))}
+              <TableHead className="truncate">Live Status</TableHead>
-        </TableBody>
+              <TableHead className="text-right">Status</TableHead>
-      </Table>
+            </TableRow>
+          </TableHeader>
+          <TableBody>{data?.table}</TableBody>
+        </Table>
+      </div>
+
+      {data && Math.ceil(data.total / itemPerPage) > 0 && (
+        <PaginationControl
+          totalPage={Math.ceil(data.total / itemPerPage)}
+          currentPage={page}
+        />
+      )}
     </div>
   );
 }

web/src/server/findAllRuns.tsx

@@ -1,5 +1,6 @@
 "use server";
 
+import { RunDisplay } from "@/components/RunDisplay";
 import { db } from "@/db/db";
 import { deploymentsTable, workflowRunsTable } from "@/db/schema";
 import { count, desc, eq, sql } from "drizzle-orm";
@@ -56,6 +57,15 @@ export async function findAllRuns({
   });
 }
 
+export async function getAllRunstableContent(props: RunsSearchTypes) {
+  const data = await findAllRunsWithCounts(props);
+
+  return {
+    table: data?.allRuns.map((run) => <RunDisplay run={run} key={run.id} />),
+    total: data?.total,
+  };
+}
+
 export async function findAllRunsWithCounts(props: RunsSearchTypes) {
   const a = await db
     .select({