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}//${
+    const params = new globalThis.URLSearchParams({
-      window.location.host
+      containerId,
-    }/docker-container-logs?containerId=${containerId}&tail=${lines}&since=${since}&search=${search}${
+      tail: lines.toString(),
-      serverId ? `&serverId=${serverId}` : ""
+      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 +
+          `${prev}Connection closed!\nReason: ${
-          `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 = `
+						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
+							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,11 +96,17 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
+				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",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
+						command,
 					],
 					{
 						name: "xterm-256color",

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

@@ -56,7 +56,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					client
 						.once("ready", () => {
 							const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
+						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'"
 					`;
 							client.exec(command, (err, stream) => {
 								if (err) {
@@ -91,7 +91,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					shell,
 					[
 						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
+						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'`,
 					],
 					{
 						name: "xterm-256color",