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,38 +9,47 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { parseAsInteger } from "next-usequerystate";
-import { headers } from "next/headers";
 import {
-	findAllDeployments,
   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 { allRuns, total } = await findAllRunsWithCounts({
+      const data = await getAllRunstableContent({
         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>
       <div className="overflow-auto h-fit w-full">
         <Table className="">
-						{allRuns.length === 0 && (
+          {/* {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>
@@ -51,50 +62,16 @@ export async function RunsTable(props: {
               <TableHead className="text-right">Status</TableHead>
             </TableRow>
           </TableHeader>
-						<TableBody>
+          <TableBody>{data?.table}</TableBody>
-							{allRuns.map((run) => (
-								<RunDisplay run={run} key={run.id} />
-							))}
-						</TableBody>
         </Table>
       </div>
 
-				{Math.ceil(total / itemPerPage) > 0 && (
+      {data && Math.ceil(data.total / itemPerPage) > 0 && (
         <PaginationControl
-						totalPage={Math.ceil(total / itemPerPage)}
+          totalPage={Math.ceil(data.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">
-      <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/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({