feat: update runs table

web/src/app/[workflow_id]/page.tsx

@@ -1,8 +1,10 @@
+import { LoadingIcon } from "@/components/LoadingIcon";
 import {
   MachineSelect,
   RunWorkflowButton,
   VersionSelect,
 } from "@/components/VersionSelect";
+import { Badge } from "@/components/ui/badge";
 import {
   Card,
   CardContent,
@@ -47,6 +49,7 @@ export async function findAllRuns(workflow_id: string) {
 
   return await db.query.workflowRunsTable.findMany({
     where: eq(workflowRunsTable.workflow_version_id, workflowVersion?.id),
+    orderBy: desc(workflowRunsTable.created_at),
     with: {
       machine: {
         columns: {
@@ -123,10 +126,32 @@ async function RunsTable(props: { workflow_id: string }) {
             <TableCell>{run.version.version}</TableCell>
             <TableCell className="font-medium">{run.machine.name}</TableCell>
             <TableCell>{getRelativeTime(run.created_at)}</TableCell>
-            <TableCell className="text-right">{run.status}</TableCell>
+            <TableCell className="text-right">
+              <StatusBadge run={run} />
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
     </Table>
   );
 }
+
+function StatusBadge({
+  run,
+}: {
+  run: Awaited<ReturnType<typeof findAllRuns>>[0];
+}) {
+  switch (run.status) {
+    case "running":
+      return (
+        <Badge variant="secondary">
+          {run.status} <LoadingIcon />
+        </Badge>
+      );
+    case "success":
+      return <Badge variant="success">{run.status}</Badge>;
+    case "failed":
+      return <Badge variant="destructive">{run.status}</Badge>;
+  }
+  return <Badge variant="secondary">{run.status}</Badge>;
+}

web/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        success:
+          "border-transparent bg-green-200 text-secondary-foreground hover:bg-green-200/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };