feat(canvas): update run and log viewer

canvas/app/dashboard/project/id/[id]/view/runs/run.tsx

@@ -3,8 +3,7 @@ import { ProjectRunBadge } from "./badge";
 import { RunPathsPopover } from "./run-paths-popover";
 import { useParsePathRecordToArray } from "../hooks/useParsePathRecordToArray";
 import { FileInput, FileOutput, ScrollText } from "lucide-react";
-import { ActionButton } from "@/components/custom/action-button";
-import { FeatureNotImplementedModal } from "@/components/custom/feature-not-implemented-modal";
+import { RunViewLog } from "./view-logs";
 
 export type TProjectRun = {
   run: TRun;
@@ -43,9 +42,7 @@ export function ProjectRun(props: TProjectRun) {
               children: <FileOutput />,
             }}
           />
-          <FeatureNotImplementedModal featureName="View Logs">
-            <ActionButton icon={<ScrollText />} message="View logs" />
-          </FeatureNotImplementedModal>
+          <RunViewLog run={run} />
         </div>
       </div>
     </div>

canvas/app/dashboard/project/id/[id]/view/runs/view-logs.tsx

@@ -0,0 +1,33 @@
+import { ActionButton } from "@/components/custom/action-button";
+import { LogViewer } from "@/components/custom/log-viewer";
+import { Modal } from "@/components/custom/modal";
+import { WS_BASE_URL } from "@/services/api";
+import { TRun } from "@/services/run";
+import { ScrollText } from "lucide-react";
+import React from "react";
+
+export type TRunViewLogProps = {
+  run: TRun;
+};
+
+export function RunViewLog(props: TRunViewLogProps) {
+  const { run } = props;
+  return (
+    <Modal
+      title="Logs"
+      trigger={<ActionButton icon={<ScrollText />} message="View logs" />}
+      contentProps={{
+        className:
+          "sm:max-w-[95vw] md:max-w-[95vw] xl:max-w-[1250px] h-[95vh] max-h-[800px] flex flex-col gap-0",
+      }}
+      headerProps={{
+        className: "border-b-transparent",
+      }}
+      footerProps={{
+        className: "border-t-transparent",
+      }}
+    >
+      <LogViewer endpoint={`${WS_BASE_URL}/ws/run/log/${run.id}`} />
+    </Modal>
+  );
+}

canvas/components/custom/file-viewer/table-view/index.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import React from "react";
 import { VariableSizeGrid as Grid } from "react-window";
 import { FileViewerTableViewCell } from "./cell";
@@ -59,7 +58,7 @@ export function FileViewerTableView(props: TFileViewerTableView) {
       className="bg-accent border-l-accent border-l overflow-auto"
       overscanRowCount={50}
     >
-      {({ columnIndex, rowIndex, style, data: d }) => (
+      {({ columnIndex, rowIndex, style }) => (
         <FileViewerTableViewCell
           data={data[rowIndex][columnIndex]}
           isHeader={rowIndex === 0}

canvas/components/custom/log-viewer.tsx

@@ -1,37 +1,49 @@
 "use client";
 
+import { useDimension } from "@/hooks/useDimension";
 import { LazyLog, ScrollFollow } from "@melloware/react-logviewer";
+import React from "react";
+import { PageSpinner } from "./page-spinner";
 
 export type TLogViewerProps = {
   endpoint: string;
 };
 
 export function LogViewer(props: TLogViewerProps) {
   const { endpoint } = props;
-  let socket = null;
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const { width, height } = useDimension({ ref });
 
   return (
-    <ScrollFollow
-      startFollowing={true}
-      render={({ follow, onScroll }) => (
-        <LazyLog
-          extraLines={1}
-          enableSearch
-          url={endpoint}
-          websocket
-          websocketOptions={{
-            onOpen: (_e, sock) => {
-              socket = sock;
-              sock.send(JSON.stringify({ message: "Socket has been opened!" }));
-            },
-            formatMessage: (e) => JSON.parse(e).message,
-            reconnect: true,
-            reconnectWait: 5,
-          }}
-          onScroll={onScroll}
-          follow={follow}
-        />
+    <div ref={ref} className="flex-1">
+      {width === 0 || height === 0 ? (
+        <PageSpinner />
+      ) : (
+        /**
+         * ScrollFollow wrapper should have a parent with a fixed width and height.
+         * @link https://github.com/melloware/react-logviewer?tab=readme-ov-file#usage-1
+         */
+        <div style={{ width, height }}>
+          <ScrollFollow
+            startFollowing={true}
+            render={({ follow, onScroll }) => (
+              <LazyLog
+                extraLines={1}
+                enableSearch
+                url={endpoint}
+                websocket
+                websocketOptions={{
+                  reconnect: true,
+                  reconnectWait: 5,
+                }}
+                onScroll={onScroll}
+                follow={follow}
+              />
+            )}
+          />
+        </div>
       )}
-    />
+    </div>
   );
 }