feat: add update failed display when the graph execution error

web/src/components/CodeBlock.tsx

@@ -8,12 +8,12 @@ export async function CodeBlock(props: { code: string; lang: Lang }) {
   });
 
   return (
-    <div className="relative w-full max-w-full text-sm">
+    <div className="relative w-full text-sm">
       {/* max-w-[calc(32rem-1.5rem-1.5rem)] */}
       {/* <div className=""> */}
       <p
         // tabIndex={1}
-        className="[&>pre]:p-4 rounded-sm "
+        className="[&>pre]:p-4 rounded-lg max-h-96 overflow-auto w-full"
         style={{
           overflowWrap: "break-word",
         }}

web/src/components/LiveStatus.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useStore } from "@/components/MachinesWS";
+import { StatusBadge } from "@/components/StatusBadge";
+import { TableCell } from "@/components/ui/table";
+import { type findAllRuns } from "@/server/findAllRuns";
+
+export function LiveStatus({
+  run,
+}: {
+  run: Awaited<ReturnType<typeof findAllRuns>>[0];
+}) {
+  const data = useStore(
+    (state) =>
+      state.data
+        .filter((x) => x.id === run.id)
+        .sort((a, b) => b.timestamp - a.timestamp)?.[0]
+  );
+
+  let status = run.status;
+
+  // const [view, setView] = useState<any>();
+  if (data?.json.event == "executing" && data.json.data.node == undefined) {
+    status = "success";
+  } else if (data?.json.event == "executing") {
+    status = "running";
+  }
+
+  return (
+    <>
+      <TableCell>
+        {data && status != "success"
+          ? `${data.json.event} - ${data.json.data.node}`
+          : "-"}
+      </TableCell>
+      <TableCell className="text-right">
+        <StatusBadge status={status} />
+      </TableCell>
+    </>
+  );
+}

web/src/components/RunDisplay.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { RunOutputs } from "./RunOutputs";
-import { useStore } from "@/components/MachinesWS";
-import { StatusBadge } from "@/components/StatusBadge";
+import { LiveStatus } from "./LiveStatus";
 import {
   Dialog,
   DialogContent,
@@ -14,52 +12,44 @@ import {
 import { TableCell, TableRow } from "@/components/ui/table";
 import { getRelativeTime } from "@/lib/getRelativeTime";
 import { type findAllRuns } from "@/server/findAllRuns";
+import { getRunsOutputDisplay } from "@/server/getRunsOutput";
+import { useState } from "react";
 
 export function RunDisplay({
   run,
 }: {
   run: Awaited<ReturnType<typeof findAllRuns>>[0];
 }) {
-  const data = useStore(
-    (state) =>
-      state.data
-        .filter((x) => x.id === run.id)
-        .sort((a, b) => b.timestamp - a.timestamp)?.[0]
-  );
-
-  let status = run.status;
-
-  if (data?.json.event == "executing" && data.json.data.node == undefined) {
-    status = "success";
-  } else if (data?.json.event == "executing") {
-    status = "running";
-  }
-
+  const [view, setView] = useState<any>();
   return (
     <Dialog>
-      <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
+      <DialogTrigger
+        asChild
+        className="appearance-none hover:cursor-pointer"
+        onClick={async () => {
+          if (view) return;
+          const _view = await getRunsOutputDisplay(run.id);
+          setView(_view);
+        }}
+      >
         <TableRow>
           <TableCell>{run.version?.version}</TableCell>
           <TableCell className="font-medium">{run.machine?.name}</TableCell>
           <TableCell>{getRelativeTime(run.created_at)}</TableCell>
-          <TableCell>
-            {data && status != "success"
-              ? `${data.json.event} - ${data.json.data.node}`
-              : "-"}
-          </TableCell>
-          <TableCell className="text-right">
-            <StatusBadge status={status} />
-          </TableCell>
+          <LiveStatus run={run} />
         </TableRow>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-w-3xl">
         <DialogHeader>
           <DialogTitle>Run outputs</DialogTitle>
           <DialogDescription>
             You can view your run&apos;s outputs here
           </DialogDescription>
         </DialogHeader>
-        <RunOutputs run_id={run.id} />
+        {/* <Suspense>
+          <RunOutputs run_id={run.id} />
+        </Suspense> */}
+        {view}
       </DialogContent>
     </Dialog>
   );

web/src/components/RunOutputs.tsx

@@ -1,7 +1,5 @@
-"use client";
-
 import { OutputRender } from "./RunDisplay";
-import { callServerPromise } from "@/components/MachineList";
+import { CodeBlock } from "@/components/CodeBlock";
 import {
   Table,
   TableBody,
@@ -11,22 +9,24 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { getRunsOutput } from "@/server/getRunsOutput";
-import { useEffect, useState } from "react";
 
-export function RunOutputs({ run_id }: { run_id: string }) {
-  const [outputs, setOutputs] =
-    useState<Awaited<ReturnType<typeof getRunsOutput>>>();
+export async function RunOutputs({ run_id }: { run_id: string }) {
+  const outputs = await getRunsOutput(run_id);
+  console.log("Getting runs out put");
 
-  useEffect(() => {
-    if (!run_id) return;
-    // fetch(`/api/run?run_id=${run_id}`)
-    //   .then((x) => x.json())
-    //   .then((x) => setOutputs(x));
-    callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
-  }, [run_id]);
+  // const [outputs, setOutputs] =
+  //   useState<Awaited<ReturnType<typeof getRunsOutput>>>();
+
+  // useEffect(() => {
+  //   if (!run_id) return;
+  //   // fetch(`/api/run?run_id=${run_id}`)
+  //   //   .then((x) => x.json())
+  //   //   .then((x) => setOutputs(x));
+  //   callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
+  // }, [run_id]);
 
   return (
-    <Table>
+    <Table className="table-fixed">
       {/* <TableCaption>A list of your recent runs.</TableCaption> */}
       <TableHeader className="bg-background top-0 sticky">
         <TableRow>
@@ -36,11 +36,25 @@ export function RunOutputs({ run_id }: { run_id: string }) {
       </TableHeader>
       <TableBody>
         {outputs?.map((run) => {
-          const fileName = run.data.images[0].filename;
+          const fileName = run.data.images?.[0].filename;
+
+          if (!fileName)
+            return (
+              <TableRow key={run.id}>
+                <TableCell>Output</TableCell>
+                <TableCell className="max-h-44">
+                  <CodeBlock
+                    code={JSON.stringify(run.data, null, 2)}
+                    lang="json"
+                  />
+                </TableCell>
+              </TableRow>
+            );
+
           // const filePath
           return (
             <TableRow key={run.id}>
-              <TableCell>{fileName}</TableCell>
+              <TableCell className="break-words">{fileName}</TableCell>
               <TableCell>
                 <OutputRender run_id={run_id} filename={fileName} />
               </TableCell>