Merge pull request #1 from drudge/log-test

feat(logs): improvements to searching

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -76,11 +76,18 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     if (!containerId) return;
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${protocol}//${
-      window.location.host
-    }/docker-container-logs?containerId=${containerId}&tail=${lines}&since=${since}&search=${search}${
-      serverId ? `&serverId=${serverId}` : ""
-    }`;
+    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);
 
@@ -101,8 +108,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
       console.log("WebSocket closed:", e.reason);
       setRawLogs(
         (prev) =>
-          prev +
-          `Connection closed!\nReason: ${
+          `${prev}Connection closed!\nReason: ${
             e.reason || "WebSocket was closed try to refresh"
           }\n`
       );
@@ -177,7 +183,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
                 className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
               />
               <Input
-                type="text"
+                type="search"
                 placeholder="Search logs..."
                 value={search}
                 onChange={handleSearch}

apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx

@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { getLogType, type LogLine } from "./utils";
 import React from "react";
+import { escapeRegExp } from 'lodash';
 
 interface LogLineProps {
   log: LogLine;
@@ -27,7 +28,7 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
   const highlightMessage = (text: string, term: string) => {
     if (!term) return text;
 
-    const parts = text.split(new RegExp(`(${term})`, "gi"));
+    const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
     return parts.map((part, index) =>
       part.toLowerCase() === term.toLowerCase() ? (
         <span key={index} className="bg-yellow-200 dark:bg-yellow-900">

apps/dokploy/server/wss/docker-container-logs.ts

@@ -32,7 +32,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
 		const search = url.searchParams.get("search");
-		const since = url.searchParams.get("since")
+		const since = url.searchParams.get("since");
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
@@ -53,9 +53,12 @@ export const setupDockerContainerLogsWebSocketServer = (
 				const client = new Client();
 				client
 					.once("ready", () => {
-						const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
-					`;
+						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+							since === "all" ? "" : `--since ${since}`
+						} --follow ${containerId}`;
+						const command = search
+							? `${baseCommand} 2>&1 | grep -iF '${search}'`
+							: baseCommand;
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -93,21 +96,20 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});
 
 				ptyProcess.onData((data) => {
 					ws.send(data);

packages/server/src/wss/docker-container-logs.ts

@@ -55,9 +55,12 @@ export const setupDockerContainerLogsWebSocketServer = (
 				new Promise<void>((resolve, reject) => {
 					client
 						.once("ready", () => {
-							const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
-					`;
+							const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+								since === "all" ? "" : `--since ${since}`
+							} --follow ${containerId}`;
+							const command = search
+								? `${baseCommand} 2>&1 | grep -iF '${search}'`
+								: baseCommand;
 							client.exec(command, (err, stream) => {
 								if (err) {
 									console.error("Execution error:", err);
@@ -87,21 +90,20 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});
 
 				ptyProcess.onData((data) => {
 					ws.send(data);