refactor: move workflow to /workflow

web/src/app/api/view/route.ts

@@ -2,7 +2,7 @@ import { NextResponse, type NextRequest } from "next/server";
 
 export async function GET(request: NextRequest) {
   const file = new URL(request.url).searchParams.get("file");
-  console.log(file);
+  console.log(`${process.env.SPACES_ENDPOINT}/comfyui-deploy/${file}`);
   return NextResponse.redirect(
     `${process.env.SPACES_ENDPOINT}/comfyui-deploy/${file}`
   );

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

@@ -1,5 +1,5 @@
-import { DeploymentsTable, RunsTable } from "../../components/RunsTable";
-import { findFirstTableWithVersion } from "../../server/findFirstTableWithVersion";
+import { DeploymentsTable, RunsTable } from "../../../components/RunsTable";
+import { findFirstTableWithVersion } from "../../../server/findFirstTableWithVersion";
 import { MachinesWSMain } from "@/components/MachinesWS";
 import {
   CreateDeploymentButton,
@@ -49,7 +49,7 @@ export default async function Page({
             <MachinesWSMain machines={machines} />
           </CardContent>
         </Card>
-        <Card className="w-full ">
+        <Card className="w-full h-fit">
           <CardHeader>
             <CardTitle>Deployments</CardTitle>
           </CardHeader>
@@ -60,7 +60,7 @@ export default async function Page({
         </Card>
       </div>
 
-      <Card className="w-full ">
+      <Card className="w-full h-fit">
         <CardHeader>
           <CardTitle>Run</CardTitle>
         </CardHeader>

web/src/components/DeploymentDisplay.tsx

@@ -21,28 +21,32 @@ curl --request POST \
 }'
 `;
 
+const curlTemplate_checkStatus = `
+curl --request GET \
+  --url 'http://localhost:3000/api/run?run_id=xxx' \
+  --header 'Content-Type: application/json'
+`;
+
 const jsTemplate = `
-const options = {
+fetch('<URL>', {
   method: 'POST',
   headers: {'Content-Type': 'application/json'},
-  body: '{"deployment_id":"<ID>"}'
-};
-
-fetch('<URL>', options)
+  body: JSON.stringify({
+    deployment_id: '<ID>',
+  }),
+})
   .then(response => response.json())
   .then(response => console.log(response))
   .catch(err => console.error(err));
 `;
 
 const jsTemplate_checkStatus = `
-const options = {
-  method: 'GET',
-  headers: {'Content-Type': 'application/json'},
-};
-
 const run_id = '<RUN_ID>';
 
-fetch('<URL>?run_id=' + run_id, options)
+fetch('<URL>?run_id=' + run_id, {
+  method: 'GET',
+  headers: {'Content-Type': 'application/json'},
+})
   .then(response => response.json())
   .then(response => console.log(response))
   .catch(err => console.error(err));
@@ -82,17 +86,23 @@ export function DeploymentDisplay({
             <TabsTrigger value="curl">curl</TabsTrigger>
           </TabsList>
           <TabsContent className="flex flex-col gap-2" value="js">
+            Trigger the workflow
             <CodeBlock lang="js" code={formatCode(jsTemplate, deployment)} />
+            Check the status of the run, and retrieve the outputs
             <CodeBlock
               lang="js"
               code={formatCode(jsTemplate_checkStatus, deployment)}
             />
           </TabsContent>
-          <TabsContent value="curl">
+          <TabsContent className="flex flex-col gap-2" value="curl">
             <CodeBlock
               lang="bash"
               code={formatCode(curlTemplate, deployment)}
             />
+            <CodeBlock
+              lang="bash"
+              code={formatCode(curlTemplate_checkStatus, deployment)}
+            />
           </TabsContent>
         </Tabs>
       </DialogContent>

web/src/components/RunDisplay.tsx

@@ -70,7 +70,7 @@ export function OutputRender(props: { run_id: string; filename: string }) {
     return (
       <img
         alt={props.filename}
-        src={`api/view?file=${encodeURIComponent(
+        src={`/api/view?file=${encodeURIComponent(
           `outputs/runs/${props.run_id}/${props.filename}`
         )}`}
       />

web/src/components/RunOutputs.tsx

@@ -23,7 +23,7 @@ export function RunOutputs({ run_id }: { run_id: string }) {
     //   .then((x) => x.json())
     //   .then((x) => setOutputs(x));
     callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
-  }, [run_id, outputs]);
+  }, [run_id]);
 
   return (
     <Table>

web/src/components/WorkflowList.tsx

@@ -9,7 +9,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
@@ -85,7 +84,7 @@ export const columns: ColumnDef<Payment>[] = [
     },
     cell: ({ row }) => {
       return (
-        <a className="hover:underline" href={`/${row.original.id}`}>
+        <a className="hover:underline" href={`/workflow/${row.original.id}`}>
           {row.getValue("email")}
         </a>
       );
@@ -167,7 +166,7 @@ export const columns: ColumnDef<Payment>[] = [
 export function WorkflowList({ data }: { data: Payment[] }) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    [],
+    []
   );
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
@@ -242,7 +241,7 @@ export function WorkflowList({ data }: { data: Payment[] }) {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </TableHead>
                   );
@@ -261,7 +260,7 @@ export function WorkflowList({ data }: { data: Payment[] }) {
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </TableCell>
                   ))}