feat: add update failed display when the graph execution error

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>