fix: log viewer

web/src/components/LogsViewer.tsx

@@ -9,7 +9,10 @@ export type LogsType = {
   timestamp: number;
 }[];
 
-export function LogsViewer({ logs }: { logs: LogsType }) {
+export function LogsViewer({
+  logs,
+  hideTimestamp,
+}: { logs: LogsType; hideTimestamp?: boolean }) {
   const container = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -37,7 +40,7 @@ export function LogsViewer({ logs }: { logs: LogsType }) {
         }
         container.current = ref;
       }}
-      className="flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
+      className="h-full w-full flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
     >
       {logs.map((x, i) => (
         <div
@@ -48,10 +51,14 @@ export function LogsViewer({ logs }: { logs: LogsType }) {
             navigator.clipboard.writeText(x.logs);
           }}
         >
-          <span className="min-w-fit">
+          {!hideTimestamp && (
-            {new Date(x.timestamp).toLocaleString()}
+            <>
-          </span>
+              <span className="w-[150px] flex-shrink-0">
-          <div className="h-full w-[1px] bg-stone-400 flex-shrink-0"></div>
+                {new Date(x.timestamp * 1000).toLocaleString()}
+              </span>
+              <div className="h-full w-[1px] bg-stone-400 flex-shrink-0"></div>
+            </>
+          )}
           {/* Display timestamp */}
           <div>{x.logs}</div>
         </div>

web/src/components/MachineBuildLog.tsx

@@ -16,7 +16,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
+} from "@/components/ui/alert-dialog";
 import { useRouter } from "next/navigation";
 
 export function MachineBuildLog({
@@ -41,7 +41,7 @@ export function MachineBuildLog({
       reconnectAttempts: 20,
       reconnectInterval: 1000,
       queryParams: query,
-    }
+    },
   );
 
   const connectionStatus = getConnectionStatus(readyState);
@@ -57,59 +57,70 @@ export function MachineBuildLog({
       setLogs((logs) => [...(logs ?? []), message.data]);
     } else if (message?.event === "FINISHED") {
       setFinished(true);
-      setStatus(message.data.status)
+      setStatus(message.data.status);
     }
   }, [lastMessage]);
 
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <div>
       {connectionStatus}
-      <LogsViewer logs={logs} />
+      <LogsViewer logs={logs} hideTimestamp />
 
       <AlertDialog open={finished}>
         <AlertDialogContent>
-          {
+          {status == "succuss" ? (
-            status == "succuss" ? (
+            <>
-              <>
+              <AlertDialogHeader>
-                <AlertDialogHeader>
+                <AlertDialogTitle>Machine Built</AlertDialogTitle>
-                  <AlertDialogTitle>Machine Built</AlertDialogTitle>
+                <AlertDialogDescription>
-                  <AlertDialogDescription>
+                  Your machine is built, you can now integrate your API, or
-                    Your machine is built, you can now integrate your API, or directly run to check this machines.
+                  directly run to check this machines.
-                  </AlertDialogDescription>
+                </AlertDialogDescription>
-                </AlertDialogHeader>
+              </AlertDialogHeader>
-                <AlertDialogFooter>
+              <AlertDialogFooter>
-                  <AlertDialogAction onClick={() => {
+                <AlertDialogAction
-                    router.push("/workflows")
+                  onClick={() => {
-                  }}>See Workflows</AlertDialogAction>
+                    router.push("/workflows");
-                  <AlertDialogAction onClick={() => {
+                  }}
-                    router.push("/machines")
+                >
-                  }}>See All Machines</AlertDialogAction>
+                  See Workflows
-                </AlertDialogFooter></>
+                </AlertDialogAction>
-            ) : (
+                <AlertDialogAction
-              <>
+                  onClick={() => {
-                <AlertDialogHeader>
+                    router.push("/machines");
-                  <AlertDialogTitle>Machine Failed</AlertDialogTitle>
+                  }}
-                  <AlertDialogDescription>
+                >
-                    Something went wrong with the machine build, please check the log.
+                  See All Machines
-                    Possible cause could be conflits with custom nodes, build got stuck, timeout, or too many custom nodes installed.
+                </AlertDialogAction>
-                    Please attempt a rebuild or remove some of the custom nodes.
+              </AlertDialogFooter>
-                  </AlertDialogDescription>
+            </>
-                </AlertDialogHeader>
+          ) : (
-                <AlertDialogFooter>
+            <>
-                  <AlertDialogCancel>See logs</AlertDialogCancel>
+              <AlertDialogHeader>
-                  <AlertDialogAction onClick={() => {
+                <AlertDialogTitle>Machine Failed</AlertDialogTitle>
-                    router.push("/machines")
+                <AlertDialogDescription>
-                  }}>Back to machines</AlertDialogAction>
+                  Something went wrong with the machine build, please check the
-                </AlertDialogFooter></>
+                  log. Possible cause could be conflits with custom nodes, build
-            )
+                  got stuck, timeout, or too many custom nodes installed. Please
-          }
+                  attempt a rebuild or remove some of the custom nodes.
-
+                </AlertDialogDescription>
-
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>See logs</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => {
+                    router.push("/machines");
+                  }}
+                >
+                  Back to machines
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </>
+          )}
         </AlertDialogContent>
       </AlertDialog>
-
     </div>
   );
 }

web/src/components/MachinesWS.tsx

@@ -36,7 +36,7 @@ type State = {
     json: {
       event: string;
       data: any;
-    }
+    },
   ) => void;
 };
 
@@ -82,7 +82,7 @@ function MachineWS({
   const logs = useStore((x) =>
     x.logs
       .filter((p) => p.machine_id === machine.id)
-      .sort((a, b) => a.timestamp - b.timestamp)
+      .sort((a, b) => a.timestamp - b.timestamp),
   );
   const [sid, setSid] = useState("");
 
@@ -96,7 +96,7 @@ function MachineWS({
       // queryParams: {
       //   clientId: sid,
       // },
-    }
+    },
   );
 
   const connectionStatus = getConnectionStatus(readyState);
@@ -135,7 +135,9 @@ function MachineWS({
             You can view your run's outputs here
           </DialogDescription>
         </DialogHeader>
-        <LogsViewer logs={logs} />
+        <div className="h-[400px]">
+          <LogsViewer logs={logs} hideTimestamp />
+        </div>
       </DialogContent>
     </Dialog>
   );