feat(web): add display number for workflow

web/src/components/RunDisplay.tsx

@@ -26,9 +26,10 @@ export async function RunDisplay({
         className="appearance-none hover:cursor-pointer"
       >
         <TableRow>
-          <TableCell>{run.version?.version}</TableCell>
+          <TableCell>{run.number}</TableCell>
           <TableCell className="font-medium">{run.machine?.name}</TableCell>
           <TableCell>{getRelativeTime(run.created_at)}</TableCell>
+          <TableCell>{run.version?.version}</TableCell>
           <LiveStatus run={run} />
         </TableRow>
       </DialogTrigger>

web/src/components/RunsTable.tsx

@@ -18,9 +18,10 @@ export async function RunsTable(props: { workflow_id: string }) {
         <TableCaption>A list of your recent runs.</TableCaption>
         <TableHeader className="bg-background top-0 sticky">
           <TableRow>
-            <TableHead className=" w-[100px]">Version</TableHead>
+            <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>

web/src/server/findAllRuns.tsx

@@ -1,12 +1,15 @@
 import { db } from "@/db/db";
 import { deploymentsTable, workflowRunsTable } from "@/db/schema";
-import { desc, eq } from "drizzle-orm";
+import { desc, eq, sql } from "drizzle-orm";
 
 export async function findAllRuns(workflow_id: string) {
   return await db.query.workflowRunsTable.findMany({
     where: eq(workflowRunsTable.workflow_id, workflow_id),
     orderBy: desc(workflowRunsTable.created_at),
     limit: 10,
+    extras: {
+      "number": sql<number>`row_number() over (order by created_at)`.as("number"),
+    },
     with: {
       machine: {
         columns: {