feat: add new ws realtime event

web/src/components/MachinesWS.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import type { getMachines } from "@/server/curdMachine";
+import React, { useEffect } from "react";
+import useWebSocket, { ReadyState } from "react-use-websocket";
+import { create } from "zustand";
+
+type State = {
+  data: {
+    id: string;
+    json: {
+      event: string;
+      data: any;
+    };
+  }[];
+  addData: (
+    id: string,
+    json: {
+      event: string;
+      data: any;
+    }
+  ) => void;
+};
+
+export const useStore = create<State>((set) => ({
+  data: [],
+  addData: (id, json) =>
+    set((state) => ({
+      ...state,
+      data: [...state.data, { id, json }],
+    })),
+}));
+
+export function MachinesWSMain(props: {
+  machines: Awaited<ReturnType<typeof getMachines>>;
+}) {
+  return (
+    <div className="flex flex-col gap-2 mt-6">
+      Machine Status
+      {props.machines.map((x) => (
+        <MachineWS key={x.id} machine={x} />
+      ))}
+    </div>
+  );
+}
+
+function MachineWS({
+  machine,
+}: {
+  machine: Awaited<ReturnType<typeof getMachines>>[0];
+}) {
+  const { addData } = useStore();
+  const wsEndpoint = machine.endpoint.replace(/^http/, "ws");
+  const { lastMessage, readyState } = useWebSocket(
+    `${wsEndpoint}/comfy-deploy/ws`,
+    {
+      reconnectAttempts: 10,
+      reconnectInterval: 1000,
+    }
+  );
+
+  const connectionStatus = {
+    [ReadyState.CONNECTING]: "Connecting",
+    [ReadyState.OPEN]: "Open",
+    [ReadyState.CLOSING]: "Closing",
+    [ReadyState.CLOSED]: "Closed",
+    [ReadyState.UNINSTANTIATED]: "Uninstantiated",
+  }[readyState];
+
+  useEffect(() => {
+    if (!lastMessage?.data) return;
+
+    const message = JSON.parse(lastMessage.data);
+    console.log(message.event, message);
+
+    if (message.data?.prompt_id) {
+      addData(message.data.prompt_id, message);
+    }
+  }, [lastMessage]);
+
+  return (
+    <div className="text-sm">
+      {machine.name} - {connectionStatus}
+    </div>
+  );
+}

web/src/components/NavbarRight.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 

web/src/components/RunDisplay.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { findAllRuns } from "../app/[workflow_id]/page";
+import { StatusBadge } from "../app/[workflow_id]/page";
+import { useStore } from "@/components/MachinesWS";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { getRelativeTime } from "@/lib/getRelativeTime";
+
+export function RunDisplay({
+  run,
+}: {
+  run: Awaited<ReturnType<typeof findAllRuns>>[0];
+}) {
+  const data = useStore((state) => state.data.find((x) => x.id === run.id));
+
+  return (
+    <TableRow>
+      <TableCell>{run.version.version}</TableCell>
+      <TableCell className="font-medium">{run.machine.name}</TableCell>
+      <TableCell>{getRelativeTime(run.created_at)}</TableCell>
+      <TableCell>{data ? data.json.event : "-"}</TableCell>
+      <TableCell className="text-right">
+        <StatusBadge run={run} />
+      </TableCell>
+    </TableRow>
+  );
+}

web/src/components/VersionSelect.tsx

@@ -12,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { createRun } from "@/server/createRun";
 import type { getMachines } from "@/server/curdMachine";
 import { Play } from "lucide-react";
 import { parseAsInteger, useQueryState } from "next-usequerystate";
@@ -101,17 +102,15 @@ export function RunWorkflowButton({
       className="gap-2"
       disabled={isLoading}
       onClick={async () => {
+        const workflow_version_id = workflow?.versions.find(
+          (x) => x.version === version
+        )?.id;
+        if (!workflow_version_id) return;
+
         setIsLoading(true);
         try {
-          await fetch(`/api/create-run`, {
-            method: "POST",
-            body: JSON.stringify({
-              workflow_version_id: workflow?.versions.find(
-                (x) => x.version === version
-              )?.id,
-              machine_id: machine,
-            }),
-          });
+          const origin = window.location.origin;
+          await createRun(origin, workflow_version_id, machine);
           setIsLoading(false);
         } catch (error) {
           setIsLoading(false);