Canvas: Logs tab
Change-Id: Iddf52dbce6fb2090f095cecb04bafcb50c47e4a7
diff --git a/apps/canvas/front/src/components/logs.tsx b/apps/canvas/front/src/components/logs.tsx
new file mode 100644
index 0000000..5918cf7
--- /dev/null
+++ b/apps/canvas/front/src/components/logs.tsx
@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import { useProjectId, useEnv } from "@/lib/state";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
+
+// ANSI escape sequence regex
+const ANSI_ESCAPE_REGEX = /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g;
+
+function cleanAnsiEscapeSequences(text: string): string {
+ return text.replace(ANSI_ESCAPE_REGEX, "");
+}
+
+export function Logs() {
+ const { toast } = useToast();
+ const projectId = useProjectId();
+ const env = useEnv();
+ const [selectedService, setSelectedService] = useState<string>("");
+ const [logs, setLogs] = useState<string>("");
+ const preRef = useRef<HTMLPreElement>(null);
+ const wasAtBottom = useRef(true);
+
+ const checkIfAtBottom = useCallback(() => {
+ if (!preRef.current) return;
+ const { scrollTop, scrollHeight, clientHeight } = preRef.current;
+ wasAtBottom.current = Math.abs(scrollHeight - clientHeight - scrollTop) < 10;
+ }, []);
+
+ const scrollToBottom = useCallback(() => {
+ if (!preRef.current) return;
+ preRef.current.scrollTop = preRef.current.scrollHeight;
+ }, []);
+
+ const fetchLogs = useCallback(
+ async (service: string) => {
+ if (!projectId || !service) return;
+
+ try {
+ const resp = await fetch(`/api/project/${projectId}/logs/${service}`);
+ if (!resp.ok) {
+ throw new Error("Failed to fetch logs");
+ }
+ const data = await resp.json();
+ setLogs(data.logs || "");
+ } catch (e) {
+ console.error(e);
+ toast({
+ variant: "destructive",
+ title: "Failed to fetch logs",
+ });
+ }
+ },
+ [projectId, toast],
+ );
+
+ useEffect(() => {
+ if (selectedService) {
+ // Initial fetch
+ fetchLogs(selectedService);
+
+ // Set up interval for periodic updates
+ const interval = setInterval(() => {
+ fetchLogs(selectedService);
+ }, 5000);
+
+ // Cleanup interval on unmount or when service changes
+ return () => clearInterval(interval);
+ }
+ }, [selectedService, fetchLogs]);
+
+ // Handle scroll events
+ useEffect(() => {
+ const pre = preRef.current;
+ if (!pre) return;
+
+ const handleScroll = () => {
+ checkIfAtBottom();
+ };
+
+ pre.addEventListener("scroll", handleScroll);
+ return () => pre.removeEventListener("scroll", handleScroll);
+ }, [checkIfAtBottom]);
+
+ // Auto-scroll when new logs arrive
+ useEffect(() => {
+ if (wasAtBottom.current) {
+ scrollToBottom();
+ }
+ }, [logs, scrollToBottom]);
+
+ const sortedServices = useMemo(() => (env?.services ? [...env.services].sort() : []), [env]);
+
+ // Auto-select first service when services are available
+ useEffect(() => {
+ if (sortedServices.length && !selectedService) {
+ setSelectedService(sortedServices[0]);
+ }
+ }, [sortedServices, selectedService]);
+
+ return (
+ <Card>
+ <CardHeader>
+ <Select value={selectedService} onValueChange={setSelectedService}>
+ <SelectTrigger>
+ <SelectValue placeholder="Select a service" />
+ </SelectTrigger>
+ <SelectContent>
+ {sortedServices.map((service) => (
+ <SelectItem key={service} value={service}>
+ {service}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </CardHeader>
+ <CardContent className="h-full">
+ {selectedService && (
+ <pre
+ ref={preRef}
+ className="p-4 bg-muted rounded-lg overflow-auto max-h-[500px] font-['JetBrains_Mono'] whitespace-pre-wrap break-all"
+ >
+ {cleanAnsiEscapeSequences(logs) || "No logs available"}
+ </pre>
+ )}
+ </CardContent>
+ </Card>
+ );
+}