Sanitized mirror from private repository - 2026-04-18 11:19:59 UTC

dashboard/ui/components/container-logs-modal.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { fetchAPI } from "@/lib/api";
+
+interface ContainerLogsModalProps {
+  containerId: string | null;
+  containerName: string;
+  endpoint: string;
+  onClose: () => void;
+}
+
+export function ContainerLogsModal({
+  containerId,
+  containerName,
+  endpoint,
+  onClose,
+}: ContainerLogsModalProps) {
+  const [logs, setLogs] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!containerId) return;
+    setLoading(true);
+    setLogs("");
+    fetchAPI<{ logs: string }>(
+      `/api/containers/${containerId}/logs?endpoint=${endpoint}&tail=200`
+    )
+      .then((data) => setLogs(data.logs))
+      .catch((err) => setLogs(`Error fetching logs: ${err.message}`))
+      .finally(() => setLoading(false));
+  }, [containerId, endpoint]);
+
+  return (
+    <Dialog open={!!containerId} onOpenChange={() => onClose()}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="text-sm">
+            Logs: {containerName}
+          </DialogTitle>
+        </DialogHeader>
+        <ScrollArea className="h-[400px] mt-2">
+          {loading ? (
+            <p className="text-xs text-muted-foreground p-4">
+              Loading logs...
+            </p>
+          ) : (
+            <pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap p-2 leading-relaxed">
+              {logs || "No logs available"}
+            </pre>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}