feat: add new ws realtime event

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

@@ -1,4 +1,6 @@
+import { RunDisplay } from "../../components/RunDisplay";
 import { LoadingIcon } from "@/components/LoadingIcon";
+import { MachinesWSMain } from "@/components/MachinesWS";
 import {
   MachineSelect,
   RunWorkflowButton,
@@ -16,7 +18,6 @@ import {
   Table,
   TableBody,
   TableCaption,
-  TableCell,
   TableHead,
   TableHeader,
   TableRow,
@@ -83,6 +84,8 @@ export default async function Page({
             <MachineSelect machines={machines} />
             <RunWorkflowButton workflow={workflow} machines={machines} />
           </div>
+
+          <MachinesWSMain machines={machines} />
         </CardContent>
       </Card>
 
@@ -109,26 +112,20 @@ async function RunsTable(props: { workflow_id: string }) {
           <TableHead className="w-[100px]">Version</TableHead>
           <TableHead>Machine</TableHead>
           <TableHead>Time</TableHead>
+          <TableHead>Live Status</TableHead>
           <TableHead className="text-right">Status</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
         {allRuns.map((run) => (
-          <TableRow key={run.id}>
-            <TableCell>{run.version.version}</TableCell>
-            <TableCell className="font-medium">{run.machine.name}</TableCell>
-            <TableCell>{getRelativeTime(run.created_at)}</TableCell>
-            <TableCell className="text-right">
-              <StatusBadge run={run} />
-            </TableCell>
-          </TableRow>
+          <RunDisplay run={run} key={run.id} />
         ))}
       </TableBody>
     </Table>
   );
 }
 
-function StatusBadge({
+export function StatusBadge({
   run,
 }: {
   run: Awaited<ReturnType<typeof findAllRuns>>[0];

web/src/app/api/create-run/route.ts

@@ -1,9 +1,5 @@
 import { parseDataSafe } from "../../../lib/parseDataSafe";
-import { db } from "@/db/db";
-import { workflowRunsTable } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { revalidatePath } from "next/cache";
-import { NextResponse } from "next/server";
+import { createRun } from "../../../server/createRun";
 import { z } from "zod";
 
 const Request = z.object({
@@ -12,7 +8,7 @@ const Request = z.object({
   machine_id: z.string(),
 });
 
-const ComfyAPI_Run = z.object({
+export const ComfyAPI_Run = z.object({
   prompt_id: z.string(),
   number: z.number(),
   node_errors: z.any(),
@@ -26,84 +22,5 @@ export async function POST(request: Request) {
 
   const { workflow_version_id, machine_id } = data;
 
-  const machine = await db.query.machinesTable.findFirst({
-    where: eq(workflowRunsTable.id, machine_id),
-  });
-
-  if (!machine) {
-    return new Response("Machine not found", {
-      status: 404,
-    });
-  }
-
-  const workflow_version_data =
-    // workflow_version_id
-    //   ?
-    await db.query.workflowVersionTable.findFirst({
-      where: eq(workflowRunsTable.id, workflow_version_id),
-    });
-  // : workflow_version != undefined
-  // ? await db.query.workflowVersionTable.findFirst({
-  //     where: and(
-  //       eq(workflowVersionTable.version, workflow_version),
-  //       eq(workflowVersionTable.workflow_id)
-  //     ),
-  //   })
-  // : null;
-
-  if (!workflow_version_data) {
-    return new Response("Workflow version not found", {
-      status: 404,
-    });
-  }
-
-  const comfyui_endpoint = `${machine.endpoint}/comfy-deploy/run`;
-
-  // Sending to comfyui
-  const result = await fetch(comfyui_endpoint, {
-    method: "POST",
-    // headers: {
-    //   "Content-Type": "application/json",
-    // },
-    body: JSON.stringify({
-      workflow_api: workflow_version_data.workflow_api,
-      status_endpoint: `${origin}/api/update-run`,
-    }),
-  })
-    .then(async (res) => ComfyAPI_Run.parseAsync(await res.json()))
-    .catch((error) => {
-      console.error(error);
-      return new Response(error.details, {
-        status: 500,
-      });
-    });
-
-  console.log(result);
-
-  // return the error
-  if (result instanceof Response) {
-    return result;
-  }
-
-  // Add to our db
-  const workflow_run = await db
-    .insert(workflowRunsTable)
-    .values({
-      id: result.prompt_id,
-      workflow_id: workflow_version_data.workflow_id,
-      workflow_version_id: workflow_version_data.id,
-      machine_id,
-    })
-    .returning();
-
-  revalidatePath(`./${workflow_version_data.workflow_id}`);
-
-  return NextResponse.json(
-    {
-      workflow_run_id: workflow_run[0].id,
-    },
-    {
-      status: 200,
-    }
-  );
+  return await createRun(origin, workflow_version_id, machine_id);
 }