Merge branch 'canary' into new-ansi-logs

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -111,7 +111,7 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<div 
 					ref={scrollRef}
 					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>					{ 
 						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
 							<TerminalLine

apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx

@@ -117,7 +117,7 @@ export const ShowDeploymentCompose = ({
 				<div 
 					ref={scrollRef}
 					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>
 						
 						

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

@@ -1,309 +1,291 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { Download as DownloadIcon, Loader2 } from "lucide-react";
 import React, { useEffect, useRef } from "react";
+import { LineCountFilter } from "./line-count-filter";
+import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
+import { StatusLogsFilter } from "./status-logs-filter";
 import { TerminalLine } from "./terminal-line";
 import { type LogLine, getLogType, parseLogs } from "./utils";
 
 interface Props {
-  containerId: string;
+	containerId: string;
-  serverId?: string | null;
+	serverId?: string | null;
 }
 
-type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+export const priorities = [
-type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
+	{
+		label: "Info",
+		value: "info",
+	},
+	{
+		label: "Success",
+		value: "success",
+	},
+	{
+		label: "Warning",
+		value: "warning",
+	},
+	{
+		label: "Debug",
+		value: "debug",
+	},
+	{
+		label: "Error",
+		value: "error",
+	},
+];
 
 export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
-  const { data } = api.docker.getConfig.useQuery(
+	const { data } = api.docker.getConfig.useQuery(
-    {
+		{
-      containerId,
+			containerId,
-      serverId: serverId ?? undefined,
+			serverId: serverId ?? undefined,
-    },
+		},
-    {
+		{
-      enabled: !!containerId,
+			enabled: !!containerId,
-    }
+		},
-  );
+	);
 
-  const [rawLogs, setRawLogs] = React.useState("");
+	const [rawLogs, setRawLogs] = React.useState("");
-  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+	const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
-  const [autoScroll, setAutoScroll] = React.useState(true);
+	const [autoScroll, setAutoScroll] = React.useState(true);
-  const [lines, setLines] = React.useState<number>(100);
+	const [lines, setLines] = React.useState<number>(100);
-  const [search, setSearch] = React.useState<string>("");
+	const [search, setSearch] = React.useState<string>("");
+	const [showTimestamp, setShowTimestamp] = React.useState(true);
+	const [since, setSince] = React.useState<TimeFilter>("all");
+	const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [isLoading, setIsLoading] = React.useState(false);
 
-  const [since, setSince] = React.useState<TimeFilter>("all");
+	const scrollToBottom = () => {
-  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+		if (autoScroll && scrollRef.current) {
-  const scrollRef = useRef<HTMLDivElement>(null);
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  const [isLoading, setIsLoading] = React.useState(false);
+		}
+	};
 
-  const scrollToBottom = () => {
+	const handleScroll = () => {
-    if (autoScroll && scrollRef.current) {
+		if (!scrollRef.current) return;
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  };
 
-  const handleScroll = () => {
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-    if (!scrollRef.current) return;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
 
-    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setSearch(e.target.value || "");
-    setAutoScroll(isAtBottom);
+	};
-  };
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleLines = (lines: number) => {
-    setSearch(e.target.value || "");
+		setRawLogs("");
-  };
+		setFilteredLogs([]);
+		setLines(lines);
+	};
 
-  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleSince = (value: TimeFilter) => {
-    setRawLogs("");
+		setRawLogs("");
-    setFilteredLogs([]);
+		setFilteredLogs([]);
-    setLines(Number(e.target.value) || 1);
+		setSince(value);
-  };
+	};
 
-  const handleSince = (value: TimeFilter) => {
+	useEffect(() => {
-    setRawLogs("");
+		if (!containerId) return;
-    setFilteredLogs([]);
-    setSince(value);
-  };
 
-  const handleTypeFilter = (value: TypeFilter) => {
+		let isCurrentConnection = true;
-    setTypeFilter(value);
+		let noDataTimeout: NodeJS.Timeout;
-  };
+		setIsLoading(true);
+		setRawLogs("");
+		setFilteredLogs([]);
 
-  useEffect(() => {
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    if (!containerId) return;
+		const params = new globalThis.URLSearchParams({
-    
+			containerId,
-    let isCurrentConnection = true;
+			tail: lines.toString(),
-    let noDataTimeout: NodeJS.Timeout;
+			since,
-    setIsLoading(true);
+			search,
-    setRawLogs("");
+		});
-    setFilteredLogs([]);
 
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+		if (serverId) {
-    const params = new globalThis.URLSearchParams({
+			params.append("serverId", serverId);
-      containerId,
+		}
-      tail: lines.toString(),
-      since,
-      search,
-    });
 
-    if (serverId) {
+		const wsUrl = `${protocol}//${
-      params.append("serverId", serverId);
+			window.location.host
-    }
+		}/docker-container-logs?${params.toString()}`;
+		console.log("Connecting to WebSocket:", wsUrl);
+		const ws = new WebSocket(wsUrl);
 
-    const wsUrl = `${protocol}//${
+		const resetNoDataTimeout = () => {
-      window.location.host
+			if (noDataTimeout) clearTimeout(noDataTimeout);
-    }/docker-container-logs?${params.toString()}`;
+			noDataTimeout = setTimeout(() => {
-    console.log("Connecting to WebSocket:", wsUrl);
+				if (isCurrentConnection) {
-    const ws = new WebSocket(wsUrl);
+					setIsLoading(false);
+				}
+			}, 2000); // Wait 2 seconds for data before showing "No logs found"
+		};
 
-    const resetNoDataTimeout = () => {
+		ws.onopen = () => {
-      if (noDataTimeout) clearTimeout(noDataTimeout);
+			if (!isCurrentConnection) {
-      noDataTimeout = setTimeout(() => {
+				ws.close();
-        if (isCurrentConnection) {
+				return;
-          setIsLoading(false);
+			}
-        }
+			console.log("WebSocket connected");
-      }, 2000); // Wait 2 seconds for data before showing "No logs found"
+			resetNoDataTimeout();
-    };
+		};
 
-    ws.onopen = () => {
+		ws.onmessage = (e) => {
-      if (!isCurrentConnection) {
+			if (!isCurrentConnection) return;
-        ws.close();
+			setRawLogs((prev) => prev + e.data);
-        return;
+			setIsLoading(false);
-      }
+			if (noDataTimeout) clearTimeout(noDataTimeout);
-      console.log("WebSocket connected");
+		};
-      resetNoDataTimeout();
-    };
 
-    ws.onmessage = (e) => {
+		ws.onerror = (error) => {
-      if (!isCurrentConnection) return;
+			if (!isCurrentConnection) return;
-      setRawLogs((prev) => prev + e.data);
+			console.error("WebSocket error:", error);
-      setIsLoading(false);
+			setIsLoading(false);
-      if (noDataTimeout) clearTimeout(noDataTimeout);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
-    };
+		};
 
-    ws.onerror = (error) => {
+		ws.onclose = (e) => {
-      if (!isCurrentConnection) return;
+			if (!isCurrentConnection) return;
-      console.error("WebSocket error:", error);
+			console.log("WebSocket closed:", e.reason);
-      setIsLoading(false);
+			setIsLoading(false);
-      if (noDataTimeout) clearTimeout(noDataTimeout);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
-    };
+		};
 
-    ws.onclose = (e) => {
+		return () => {
-      if (!isCurrentConnection) return;
+			isCurrentConnection = false;
-      console.log("WebSocket closed:", e.reason);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
-      setIsLoading(false);
+			if (ws.readyState === WebSocket.OPEN) {
-      if (noDataTimeout) clearTimeout(noDataTimeout);
+				ws.close();
-    };
+			}
+		};
+	}, [containerId, serverId, lines, search, since]);
 
-    return () => {
+	const handleDownload = () => {
-      isCurrentConnection = false;
+		const logContent = filteredLogs
-      if (noDataTimeout) clearTimeout(noDataTimeout);
+			.map(
-      if (ws.readyState === WebSocket.OPEN) {
+				({ timestamp, message }: { timestamp: Date | null; message: string }) =>
-        ws.close();
+					`${timestamp?.toISOString() || "No timestamp"} ${message}`,
-      }
+			)
-    };
+			.join("\n");
-  }, [containerId, serverId, lines, search, since]);
 
-  const handleDownload = () => {
+		const blob = new Blob([logContent], { type: "text/plain" });
-    const logContent = filteredLogs
+		const url = URL.createObjectURL(blob);
-      .map(
+		const a = document.createElement("a");
-        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+		const appName = data.Name.replace("/", "") || "app";
-          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+		const isoDate = new Date().toISOString();
-      )
+		a.href = url;
-      .join("\n");
+		a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
+			.slice(11, 19)
+			.replace(/:/g, "")}.log.txt`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
 
-    const blob = new Blob([logContent], { type: "text/plain" });
+	const handleFilter = (logs: LogLine[]) => {
-    const url = URL.createObjectURL(blob);
+		return logs.filter((log) => {
-    const a = document.createElement("a");
+			const logType = getLogType(log.message).type;
-    const appName = data.Name.replace("/", "") || "app";
-    const isoDate = new Date().toISOString();
-    a.href = url;
-    a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
-      .slice(11, 19)
-      .replace(/:/g, "")}.log.txt`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
 
-  const handleFilter = (logs: LogLine[]) => {
+			if (typeFilter.length === 0) {
-    return logs.filter((log) => {
+				return true;
-      const logType = getLogType(log.message).type;
+			}
 
-      const matchesType = typeFilter === "all" || logType === typeFilter;
+			return typeFilter.includes(logType);
+		});
+	};
 
-      return matchesType;
+	useEffect(() => {
-    });
+		setRawLogs("");
-  };
+		setFilteredLogs([]);
+	}, [containerId]);
 
-  useEffect(() => {
+	useEffect(() => {
-    setRawLogs("");
+		const logs = parseLogs(rawLogs);
-    setFilteredLogs([]);
+		const filtered = handleFilter(logs);
-  }, [containerId]);
+		setFilteredLogs(filtered);
+	}, [rawLogs, search, lines, since, typeFilter]);
 
-  useEffect(() => {
+	useEffect(() => {
-    const logs = parseLogs(rawLogs);
+		scrollToBottom();
-    const filtered = handleFilter(logs);
-    setFilteredLogs(filtered);
-  }, [rawLogs, search, lines, since, typeFilter]);
 
-  useEffect(() => {
+		if (autoScroll && scrollRef.current) {
-    scrollToBottom();
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
 
-    if (autoScroll && scrollRef.current) {
+	return (
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		<div className="flex flex-col gap-4">
-    }
+			<div className="rounded-lg overflow-hidden">
-  }, [filteredLogs, autoScroll]);
+				<div className="space-y-4">
+					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+						<div className="flex flex-wrap gap-4">
+							<LineCountFilter value={lines} onValueChange={handleLines} />
 
-  return (
+							<SinceLogsFilter
-    <div className="flex flex-col gap-4">
+								value={since}
-      <div className="rounded-lg overflow-hidden">
+								onValueChange={handleSince}
-        <div className="space-y-4">
+								showTimestamp={showTimestamp}
-          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+								onTimestampChange={setShowTimestamp}
-            <div className="flex flex-wrap gap-4">
+							/>
-              <Input
-                type="text"
-                placeholder="Number of lines to show"
-                value={lines}
-                onChange={handleLines}
-                className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
-              />
 
-              <Select value={since} onValueChange={handleSince}>
+							<StatusLogsFilter
-                <SelectTrigger className="sm:w-[180px] w-full h-9">
+								value={typeFilter}
-                  <SelectValue placeholder="Time filter" />
+								setValue={setTypeFilter}
-                </SelectTrigger>
+								title="Log type"
-                <SelectContent>
+								options={priorities}
-                  <SelectItem value="1h">Last hour</SelectItem>
+							/>
-                  <SelectItem value="6h">Last 6 hours</SelectItem>
-                  <SelectItem value="24h">Last 24 hours</SelectItem>
-                  <SelectItem value="168h">Last 7 days</SelectItem>
-                  <SelectItem value="720h">Last 30 days</SelectItem>
-                  <SelectItem value="all">All time</SelectItem>
-                </SelectContent>
-              </Select>
 
-              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+							<Input
-                <SelectTrigger className="sm:w-[180px] w-full h-9">
+								type="search"
-                  <SelectValue placeholder="Type filter" />
+								placeholder="Search logs..."
-                </SelectTrigger>
+								value={search}
-                <SelectContent>
+								onChange={handleSearch}
-                  <SelectItem value="all">
+								className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
-                    <Badge variant="blank">All</Badge>
+							/>
-                  </SelectItem>
+						</div>
-                  <SelectItem value="error">
-                    <Badge variant="red">Error</Badge>
-                  </SelectItem>
-                  <SelectItem value="warning">
-                    <Badge variant="orange">Warning</Badge>
-                  </SelectItem>
-                  <SelectItem value="debug">
-                    <Badge variant="yellow">Debug</Badge>
-                  </SelectItem>
-                  <SelectItem value="success">
-                    <Badge variant="green">Success</Badge>
-                  </SelectItem>
-                  <SelectItem value="info">
-                    <Badge variant="blue">Info</Badge>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
 
-              <Input
+						<Button
-                type="search"
+							variant="outline"
-                placeholder="Search logs..."
+							size="sm"
-                value={search}
+							className="h-9 sm:w-auto w-full"
-                onChange={handleSearch}
+							onClick={handleDownload}
-                className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
+							disabled={filteredLogs.length === 0 || !data?.Name}
-              />
+						>
-            </div>
+							<DownloadIcon className="mr-2 h-4 w-4" />
-
+							Download logs
-            <Button
+						</Button>
-              variant="outline"
+					</div>
-              size="sm"
+					<div
-              className="h-9"
+						ref={scrollRef}
-              onClick={handleDownload}
+						onScroll={handleScroll}
-              disabled={filteredLogs.length === 0 || !data?.Name}
+						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
-            >
+					>
-              <DownloadIcon className="mr-2 h-4 w-4" />
+						{filteredLogs.length > 0 ? (
-              Download logs
+							filteredLogs.map((filteredLog: LogLine, index: number) => (
-            </Button>
+								<TerminalLine
-          </div>
+									key={index}
-          <div
+									log={filteredLog}
-            ref={scrollRef}
+									searchTerm={search}
-            onScroll={handleScroll}
+									noTimestamp={!showTimestamp}
-            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+								/>
-          >
+							))
-            {filteredLogs.length > 0 ? (
+						) : isLoading ? (
-              filteredLogs.map((filteredLog: LogLine, index: number) => (
+							<div className="flex justify-center items-center h-full text-muted-foreground">
-                <TerminalLine
+								<Loader2 className="h-6 w-6 animate-spin" />
-                  key={index}
+							</div>
-                  log={filteredLog}
+						) : (
-                  searchTerm={search}
+							<div className="flex justify-center items-center h-full text-muted-foreground">
-                />
+								No logs found
-              ))
+							</div>
-            ) : isLoading ? (
+						)}
-              <div className="flex justify-center items-center h-full text-muted-foreground">
+					</div>
-                <Loader2 className="h-6 w-6 animate-spin" />
+				</div>
-              </div>
+			</div>
-            ) : (
+		</div>
-              <div className="flex justify-center items-center h-full text-muted-foreground">
+	);
-                No logs found
+};
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx

@@ -0,0 +1,173 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
+import { debounce } from "lodash";
+import { CheckIcon, Hash } from "lucide-react";
+import React, { useCallback, useRef } from "react";
+
+const lineCountOptions = [
+	{ label: "100 lines", value: 100 },
+	{ label: "300 lines", value: 300 },
+	{ label: "500 lines", value: 500 },
+	{ label: "1000 lines", value: 1000 },
+	{ label: "5000 lines", value: 5000 },
+] as const;
+
+interface LineCountFilterProps {
+	value: number;
+	onValueChange: (value: number) => void;
+	title?: string;
+}
+
+export function LineCountFilter({
+	value,
+	onValueChange,
+	title = "Limit to",
+}: LineCountFilterProps) {
+	const [open, setOpen] = React.useState(false);
+	const [inputValue, setInputValue] = React.useState("");
+	const pendingValueRef = useRef<number | null>(null);
+
+	const isPresetValue = lineCountOptions.some(
+		(option) => option.value === value,
+	);
+
+	const debouncedValueChange = useCallback(
+		debounce((numValue: number) => {
+			if (numValue > 0 && numValue !== value) {
+				onValueChange(numValue);
+				pendingValueRef.current = null;
+			}
+		}, 500),
+		[onValueChange, value],
+	);
+
+	const handleInputChange = (input: string) => {
+		setInputValue(input);
+
+		// Extract numbers from input and convert
+		const numValue = Number.parseInt(input.replace(/[^0-9]/g, ""));
+		if (!Number.isNaN(numValue)) {
+			pendingValueRef.current = numValue;
+			debouncedValueChange(numValue);
+		}
+	};
+
+	const handleSelect = (selectedValue: string) => {
+		const preset = lineCountOptions.find((opt) => opt.label === selectedValue);
+		if (preset) {
+			if (preset.value !== value) {
+				onValueChange(preset.value);
+			}
+			setInputValue("");
+			setOpen(false);
+			return;
+		}
+
+		const numValue = Number.parseInt(selectedValue);
+		if (
+			!Number.isNaN(numValue) &&
+			numValue > 0 &&
+			numValue !== value &&
+			numValue !== pendingValueRef.current
+		) {
+			onValueChange(numValue);
+			setInputValue("");
+			setOpen(false);
+		}
+	};
+
+	React.useEffect(() => {
+		return () => {
+			debouncedValueChange.cancel();
+		};
+	}, [debouncedValueChange]);
+
+	const displayValue = isPresetValue
+		? lineCountOptions.find((option) => option.value === value)?.label
+		: `${value} lines`;
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							{displayValue}
+						</Badge>
+					</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<CommandPrimitive className="overflow-hidden rounded-md border border-none bg-popover text-popover-foreground">
+					<div className="flex items-center border-b px-3">
+						<Hash className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+						<CommandPrimitive.Input
+							placeholder="Number of lines"
+							value={inputValue}
+							onValueChange={handleInputChange}
+							className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									const numValue = Number.parseInt(
+										inputValue.replace(/[^0-9]/g, ""),
+									);
+									if (
+										!Number.isNaN(numValue) &&
+										numValue > 0 &&
+										numValue !== value &&
+										numValue !== pendingValueRef.current
+									) {
+										handleSelect(inputValue);
+									}
+								}
+							}}
+						/>
+					</div>
+					<CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+						<CommandPrimitive.Group className="px-2 py-1.5">
+							{lineCountOptions.map((option) => {
+								const isSelected = value === option.value;
+								return (
+									<CommandPrimitive.Item
+										key={option.value}
+										onSelect={() => handleSelect(option.label)}
+										className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
+									>
+										<div
+											className={cn(
+												"flex h-4 w-4 items-center justify-center rounded-sm border border-primary mr-2",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										<span>{option.label}</span>
+									</CommandPrimitive.Item>
+								);
+							})}
+						</CommandPrimitive.Group>
+					</CommandPrimitive.List>
+				</CommandPrimitive>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export default LineCountFilter;

apps/dokploy/components/dashboard/docker/logs/since-logs-filter.tsx

@@ -0,0 +1,125 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+import React from "react";
+
+export type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+
+const timeRanges: Array<{ label: string; value: TimeFilter }> = [
+	{
+		label: "All time",
+		value: "all",
+	},
+	{
+		label: "Last hour",
+		value: "1h",
+	},
+	{
+		label: "Last 6 hours",
+		value: "6h",
+	},
+	{
+		label: "Last 24 hours",
+		value: "24h",
+	},
+	{
+		label: "Last 7 days",
+		value: "168h",
+	},
+	{
+		label: "Last 30 days",
+		value: "720h",
+	},
+] as const;
+
+interface SinceLogsFilterProps {
+	value: TimeFilter;
+	onValueChange: (value: TimeFilter) => void;
+	showTimestamp: boolean;
+	onTimestampChange: (show: boolean) => void;
+	title?: string;
+}
+
+export function SinceLogsFilter({
+	value,
+	onValueChange,
+	showTimestamp,
+	onTimestampChange,
+	title = "Time range",
+}: SinceLogsFilterProps) {
+	const selectedLabel =
+		timeRanges.find((range) => range.value === value)?.label ??
+		"Select time range";
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							{selectedLabel}
+						</Badge>
+					</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<Command>
+					<CommandList>
+						<CommandGroup>
+							{timeRanges.map((range) => {
+								const isSelected = value === range.value;
+								return (
+									<CommandItem
+										key={range.value}
+										onSelect={() => {
+											if (!isSelected) {
+												onValueChange(range.value);
+											}
+										}}
+									>
+										<div
+											className={cn(
+												"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										<span className="text-sm">{range.label}</span>
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+				<Separator className="my-2" />
+				<div className="p-2 flex items-center justify-between">
+					<span className="text-sm">Show timestamps</span>
+					<Switch checked={showTimestamp} onCheckedChange={onTimestampChange} />
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/dashboard/docker/logs/status-logs-filter.tsx

@@ -0,0 +1,170 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+import type React from "react";
+
+interface StatusLogsFilterProps {
+	value?: string[];
+	setValue?: (value: string[]) => void;
+	title?: string;
+	options: {
+		label: string;
+		value: string;
+		icon?: React.ComponentType<{ className?: string }>;
+	}[];
+}
+
+export function StatusLogsFilter({
+	value = [],
+	setValue,
+	title,
+	options,
+}: StatusLogsFilterProps) {
+	const selectedValues = new Set(value as string[]);
+	const allSelected = selectedValues.size === 0;
+
+	const getSelectedBadges = () => {
+		if (allSelected) {
+			return (
+				<Badge variant="blank" className="rounded-sm px-1 font-normal">
+					All
+				</Badge>
+			);
+		}
+
+		if (selectedValues.size >= 1) {
+			const selected = options.find((opt) => selectedValues.has(opt.value));
+			return (
+				<>
+					<Badge
+						variant={
+							selected?.value === "success"
+								? "green"
+								: selected?.value === "error"
+									? "red"
+									: selected?.value === "warning"
+										? "orange"
+										: selected?.value === "info"
+											? "blue"
+											: selected?.value === "debug"
+												? "yellow"
+												: "blank"
+						}
+						className="rounded-sm px-1 font-normal"
+					>
+						{selected?.label}
+					</Badge>
+					{selectedValues.size > 1 && (
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							+{selectedValues.size - 1}
+						</Badge>
+					)}
+				</>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">{getSelectedBadges()}</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<Command>
+					<CommandList>
+						<CommandGroup>
+							<CommandItem
+								onSelect={() => {
+									setValue?.([]); // Empty array means "All"
+								}}
+							>
+								<div
+									className={cn(
+										"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+										allSelected
+											? "bg-primary text-primary-foreground"
+											: "opacity-50 [&_svg]:invisible",
+									)}
+								>
+									<CheckIcon className={cn("h-4 w-4")} />
+								</div>
+								<Badge variant="blank">All</Badge>
+							</CommandItem>
+							{options.map((option) => {
+								const isSelected = selectedValues.has(option.value);
+								return (
+									<CommandItem
+										key={option.value}
+										onSelect={() => {
+											const newValues = new Set(selectedValues);
+											if (isSelected) {
+												newValues.delete(option.value);
+											} else {
+												newValues.add(option.value);
+											}
+											setValue?.(Array.from(newValues));
+										}}
+									>
+										<div
+											className={cn(
+												"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										{option.icon && (
+											<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+										)}
+										<Badge
+											variant={
+												option.value === "success"
+													? "green"
+													: option.value === "error"
+														? "red"
+														: option.value === "warning"
+															? "orange"
+															: option.value === "info"
+																? "blue"
+																: option.value === "debug"
+																	? "yellow"
+																	: "blank"
+											}
+										>
+											{option.label}
+										</Badge>
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/ui/badge.tsx

@@ -14,14 +14,14 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				destructive:
 					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-				red: "border-transparent select-none items-center whitespace-nowrap font-medium bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
+				red: "border-transparent select-none items-center whitespace-nowrap font-medium bg-red-600/20 dark:bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
 				yellow:
-					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-500/15 text-yellow-500 text-xs h-4 px-1 py-1 rounded-md",
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-600/20 dark:bg-yellow-500/15 dark:text-yellow-500 text-yellow-600 text-xs h-4 px-1 py-1 rounded-md",
 				orange:
-					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-500/15 text-orange-500 text-xs h-4 px-1 py-1 rounded-md",
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-600/20 dark:bg-orange-500/15 dark:text-orange-500 text-orange-600 text-xs h-4 px-1 py-1 rounded-md",
 				green:
-					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-500/15 text-emerald-500 text-xs h-4 px-1 py-1 rounded-md",
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-600/20 dark:bg-emerald-500/15 dark:text-emerald-500 text-emerald-600 text-xs h-4 px-1 py-1 rounded-md",
-				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 text-xs h-4 px-1 py-1 rounded-md",
+				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-600/20 dark:bg-blue-500/15 dark:text-blue-500 text-blue-600 text-xs h-4 px-1 py-1 rounded-md",
 				blank:
 					"border-transparent select-none items-center whitespace-nowrap font-medium dark:bg-white/15 bg-black/15 text-foreground text-xs h-4 px-1 py-1 rounded-md",
 				outline: "text-foreground",