From 9a51e0a00dc310cfce7585d203a3748c222a59cc Mon Sep 17 00:00:00 2001 From: 190km Date: Wed, 11 Dec 2024 17:58:35 +0100 Subject: [PATCH] show a message about no matches found --- .../dashboard/docker/logs/docker-logs-id.tsx | 504 +++++++++--------- 1 file changed, 251 insertions(+), 253 deletions(-) diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx index 7c0edf05..010a6265 100644 --- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx +++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx @@ -1,253 +1,251 @@ -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import React, { useEffect, useRef } from "react"; -import { getLogType, LogLine, parseLogs } from "./utils"; -import { TerminalLine } from "./terminal-line"; -import { Download as DownloadIcon } from "lucide-react"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Badge } from "@/components/ui/badge"; - -interface Props { - containerId: string; - serverId?: string | null; -} - -type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h"; -type TypeFilter = "all" | "error" | "warning" | "success" | "info"; - -export const DockerLogsId: React.FC = ({ containerId, serverId }) => { - const [rawLogs, setRawLogs] = React.useState(""); - const [filteredLogs, setFilteredLogs] = React.useState([]); - const [autoScroll, setAutoScroll] = React.useState(true); - const [lines, setLines] = React.useState(100); - const [search, setSearch] = React.useState(""); - const [since, setSince] = React.useState("all"); - const [typeFilter, setTypeFilter] = React.useState("all"); - const scrollRef = useRef(null); - - const scrollToBottom = () => { - if (autoScroll && scrollRef.current) { - scrollRef.current.scrollTop = scrollRef.current.scrollHeight; - } - }; - - const handleScroll = () => { - if (!scrollRef.current) return; - - const { scrollTop, scrollHeight, clientHeight } = scrollRef.current; - const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10; - setAutoScroll(isAtBottom); - }; - - const handleSearch = (e: React.ChangeEvent) => { - setRawLogs(""); - setFilteredLogs([]); - setSearch(e.target.value || ""); - }; - - const handleLines = (e: React.ChangeEvent) => { - setRawLogs(""); - setFilteredLogs([]); - setLines(Number(e.target.value) || 1); - }; - - const handleSince = (value: TimeFilter) => { - setRawLogs(""); - setFilteredLogs([]); - setSince(value); - }; - - const handleTypeFilter = (value: TypeFilter) => { - setTypeFilter(value); - }; - - useEffect(() => { - setRawLogs(""); - setFilteredLogs([]); - }, [containerId]); - - useEffect(() => { - if (!containerId) return; - - const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; - const params = new globalThis.URLSearchParams({ - containerId, - tail: lines.toString(), - since, - search - }); - - if (serverId) { - params.append('serverId', serverId); - } - - const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`; - console.log("Connecting to WebSocket:", wsUrl); - const ws = new WebSocket(wsUrl); - - ws.onopen = () => { - console.log("WebSocket connected"); - }; - - ws.onmessage = (e) => { - // console.log("Received message:", e.data); - setRawLogs((prev) => prev + e.data); - }; - - ws.onerror = (error) => { - console.error("WebSocket error:", error); - }; - - ws.onclose = (e) => { - console.log("WebSocket closed:", e.reason); - setRawLogs( - (prev) => - `${prev}Connection closed!\nReason: ${ - e.reason || "WebSocket was closed try to refresh" - }\n` - ); - }; - - return () => { - if (ws.readyState === WebSocket.OPEN) { - ws.close(); - } - }; - }, [containerId, serverId, lines, search, since]); - - const handleDownload = () => { - const logContent = filteredLogs - .map( - ({ timestamp, message }: { timestamp: Date | null; message: string }) => - `${timestamp?.toISOString() || "No timestamp"} ${message}` - ) - .join("\n"); - - const blob = new Blob([logContent], { type: "text/plain" }); - const url = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = url; - a.download = `dokploy-logs-${new Date().toISOString()}.txt`; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); - }; - - const handleFilter = (logs: LogLine[]) => { - return logs.filter((log) => { - const logType = getLogType(log.message).type; - - const matchesType = typeFilter === "all" || logType === typeFilter; - - return matchesType; - }); - }; - - useEffect(() => { - setRawLogs(""); - setFilteredLogs([]); - }, [containerId]); - - useEffect(() => { - const logs = parseLogs(rawLogs); - const filtered = handleFilter(logs); - setFilteredLogs(filtered); - }, [rawLogs, search, lines, since, typeFilter]); - - useEffect(() => { - scrollToBottom(); - - if (autoScroll && scrollRef.current) { - scrollRef.current.scrollTop = scrollRef.current.scrollHeight; - } - }, [filteredLogs, autoScroll]); - - return ( -
-
-
-
-
- - - - - -
- - -
-
- {filteredLogs.map((filteredLog: LogLine, index: number) => ( - - ))} -
-
-
-
- ); -}; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import React, { useEffect, useRef } from "react"; +import { getLogType, LogLine, parseLogs } from "./utils"; +import { TerminalLine } from "./terminal-line"; +import { Download as DownloadIcon } from "lucide-react"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; + +interface Props { + containerId: string; + serverId?: string | null; +} + +type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h"; +type TypeFilter = "all" | "error" | "warning" | "success" | "info"; + +export const DockerLogsId: React.FC = ({ containerId, serverId }) => { + const [rawLogs, setRawLogs] = React.useState(""); + const [filteredLogs, setFilteredLogs] = React.useState([]); + const [autoScroll, setAutoScroll] = React.useState(true); + const [lines, setLines] = React.useState(100); + const [search, setSearch] = React.useState(""); + const [since, setSince] = React.useState("all"); + const [typeFilter, setTypeFilter] = React.useState("all"); + const scrollRef = useRef(null); + const [errorMessage, setErrorMessage] = React.useState(null); + + const scrollToBottom = () => { + if (autoScroll && scrollRef.current) { + scrollRef.current.scrollTop = scrollRef.current.scrollHeight; + } + }; + + const handleScroll = () => { + if (!scrollRef.current) return; + + const { scrollTop, scrollHeight, clientHeight } = scrollRef.current; + const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10; + setAutoScroll(isAtBottom); + }; + + const handleSearch = (e: React.ChangeEvent) => { + setRawLogs(""); + setFilteredLogs([]); + setSearch(e.target.value || ""); + }; + + const handleLines = (e: React.ChangeEvent) => { + setRawLogs(""); + setFilteredLogs([]); + setLines(Number(e.target.value) || 1); + }; + + const handleSince = (value: TimeFilter) => { + setRawLogs(""); + setFilteredLogs([]); + setSince(value); + }; + + const handleTypeFilter = (value: TypeFilter) => { + setTypeFilter(value); + }; + + useEffect(() => { + setRawLogs(""); + setFilteredLogs([]); + }, [containerId]); + + useEffect(() => { + if (!containerId) return; + + const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; + const params = new globalThis.URLSearchParams({ + containerId, + tail: lines.toString(), + since, + search + }); + + if (serverId) { + params.append('serverId', serverId); + } + + const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`; + console.log("Connecting to WebSocket:", wsUrl); + const ws = new WebSocket(wsUrl); + + ws.onopen = () => { + console.log("WebSocket connected"); + }; + + ws.onmessage = (e) => { + // console.log("Received message:", e.data); + setRawLogs((prev) => prev + e.data); + }; + + ws.onerror = (error) => { + console.error("WebSocket error:", error); + }; + + ws.onclose = (e) => { + console.log("WebSocket closed:", e.reason); + setErrorMessage(`Connection closed!\nReason: ${e.reason || "WebSocket was closed try to refresh"}`); + }; + + return () => { + if (ws.readyState === WebSocket.OPEN) { + ws.close(); + } + }; + }, [containerId, serverId, lines, search, since]); + + const handleDownload = () => { + const logContent = filteredLogs + .map( + ({ timestamp, message }: { timestamp: Date | null; message: string }) => + `${timestamp?.toISOString() || "No timestamp"} ${message}` + ) + .join("\n"); + + const blob = new Blob([logContent], { type: "text/plain" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `dokploy-logs-${new Date().toISOString()}.txt`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }; + + const handleFilter = (logs: LogLine[]) => { + return logs.filter((log) => { + const logType = getLogType(log.message).type; + + const matchesType = typeFilter === "all" || logType === typeFilter; + + return matchesType; + }); + }; + + useEffect(() => { + setRawLogs(""); + setFilteredLogs([]); + }, [containerId]); + + useEffect(() => { + const logs = parseLogs(rawLogs); + const filtered = handleFilter(logs); + setFilteredLogs(filtered); + }, [rawLogs, search, lines, since, typeFilter]); + + useEffect(() => { + scrollToBottom(); + + if (autoScroll && scrollRef.current) { + scrollRef.current.scrollTop = scrollRef.current.scrollHeight; + } + }, [filteredLogs, autoScroll]); + + return ( +
+
+
+
+
+ + + + + +
+ + +
+
+ { + filteredLogs.length > 0 ? filteredLogs.map((filteredLog: LogLine, index: number) => ( + + )) :
No logs found
+ } +
+
+
+
+ ); +};