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

web/src/server/findAllRuns.tsx

@@ -1,14 +1,28 @@
+"use server";
+
 import { db } from "@/db/db";
 import { deploymentsTable, workflowRunsTable } from "@/db/schema";
-import { desc, eq, sql } from "drizzle-orm";
+import { count, desc, eq, sql } from "drizzle-orm";
 
-export async function findAllRuns(workflow_id: string) {
+type RunsSearchTypes = {
+  workflow_id: string;
+  limit: number;
+  offset: number;
+};
+
+export async function findAllRuns({
+  workflow_id,
+  limit = 10,
+  offset = 0,
+}: RunsSearchTypes) {
   return await db.query.workflowRunsTable.findMany({
     where: eq(workflowRunsTable.workflow_id, workflow_id),
     orderBy: desc(workflowRunsTable.created_at),
-    limit: 10,
+    offset: offset,
+    limit: limit,
     extras: {
       number: sql<number>`row_number() over (order by created_at)`.as("number"),
+      total: sql<number>`count(*) over ()`.as("total"),
     },
     with: {
       machine: {
@@ -26,6 +40,20 @@ export async function findAllRuns(workflow_id: string) {
   });
 }
 
+export async function findAllRunsWithCounts(props: RunsSearchTypes) {
+  const a = await db
+    .select({
+      count: count(workflowRunsTable.id),
+    })
+    .from(workflowRunsTable)
+    .where(eq(workflowRunsTable.workflow_id, props.workflow_id));
+
+  return {
+    allRuns: await findAllRuns(props),
+    total: a[0].count,
+  };
+}
+
 export async function findAllDeployments(workflow_id: string) {
   return await db.query.deploymentsTable.findMany({
     where: eq(deploymentsTable.workflow_id, workflow_id),