Merge pull request #1006 from Dokploy/canary

v0.16.0

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

@@ -1,15 +1,16 @@
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
-import { LogLine, parseLogs } from "../../docker/logs/utils";
-import { Badge } from "@/components/ui/badge";
-import { Loader2 } from "lucide-react";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
@@ -19,26 +20,26 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
+	const [showExtraLogs, setShowExtraLogs] = useState(false);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 	const [autoScroll, setAutoScroll] = useState(true);
 	const scrollRef = useRef<HTMLDivElement>(null);
 
-
 	const scrollToBottom = () => {
 		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			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);
-	  };
-	
+	};
+
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -69,20 +70,34 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-
 	useEffect(() => {
 		const logs = parseLogs(data);
-		setFilteredLogs(logs);
-	}, [data]);
+		let filteredLogsResult = logs;
+		if (serverId) {
+			let hideSubsequentLogs = false;
+			filteredLogsResult = logs.filter((log) => {
+				if (
+					log.message.includes(
+						"===================================EXTRA LOGS============================================",
+					)
+				) {
+					hideSubsequentLogs = true;
+					return showExtraLogs;
+				}
+				return showExtraLogs ? true : !hideSubsequentLogs;
+			});
+		}
+
+		setFilteredLogs(filteredLogsResult);
+	}, [data, showExtraLogs]);
 
 	useEffect(() => {
 		scrollToBottom();
-	
+
 		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
 		}
-	  }, [filteredLogs, autoScroll]);
-
+	}, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -103,28 +118,49 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
-					<DialogDescription>
-						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
+					<DialogDescription className="flex items-center gap-2">
+						<span>
+							See all the details of this deployment |{" "}
+							<Badge variant="blank" className="text-xs">
+								{filteredLogs.length} lines
+							</Badge>
+						</span>
+
+						{serverId && (
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="show-extra-logs"
+									checked={showExtraLogs}
+									onCheckedChange={(checked) =>
+										setShowExtraLogs(checked as boolean)
+									}
+								/>
+								<label
+									htmlFor="show-extra-logs"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									Show Extra Logs
+								</label>
+							</div>
+						)}
 					</DialogDescription>
 				</DialogHeader>
 
-				<div 
+				<div
 					ref={scrollRef}
 					onScroll={handleScroll}
 					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
-								key={index}
-								log={log}
-								noTimestamp
-							/>
-						)) : 
-						(
-							<div className="flex justify-center items-center h-full text-muted-foreground">
-								<Loader2 className="h-6 w-6 animate-spin" />
-							</div>
-						)}
+				>
+					{" "}
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/application/domains/add-domain.tsx

@@ -264,21 +264,21 @@ export const AddDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>

apps/dokploy/components/dashboard/application/logs/show.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -15,6 +16,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
@@ -29,28 +31,67 @@ export const DockerLogs = dynamic(
 	},
 );
 
+export const badgeStateColor = (state: string) => {
+	switch (state) {
+		case "running":
+			return "green";
+		case "exited":
+		case "shutdown":
+			return "red";
+		case "accepted":
+		case "created":
+			return "blue";
+		default:
+			return "default";
+	}
+};
+
 interface Props {
 	appName: string;
 	serverId?: string;
 }
 
 export const ShowDockerLogs = ({ appName, serverId }: Props) => {
-	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
-		{
-			appName,
-			serverId,
-		},
-		{
-			enabled: !!appName,
-		},
-	);
 	const [containerId, setContainerId] = useState<string | undefined>();
+	const [option, setOption] = useState<"swarm" | "native">("native");
+
+	const { data: services, isLoading: servicesLoading } =
+		api.docker.getServiceContainersByAppName.useQuery(
+			{
+				appName,
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "swarm",
+			},
+		);
+
+	const { data: containers, isLoading: containersLoading } =
+		api.docker.getContainersByAppNameMatch.useQuery(
+			{
+				appName,
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "native",
+			},
+		);
 
 	useEffect(() => {
-		if (data && data?.length > 0) {
-			setContainerId(data[0]?.containerId);
+		if (option === "native") {
+			if (containers && containers?.length > 0) {
+				setContainerId(containers[0]?.containerId);
+			}
+		} else {
+			if (services && services?.length > 0) {
+				setContainerId(services[0]?.containerId);
+			}
 		}
-	}, [data]);
+	}, [option, services, containers]);
+
+	const isLoading = option === "native" ? containersLoading : servicesLoading;
+	const containersLenght =
+		option === "native" ? containers?.length : services?.length;
 
 	return (
 		<Card className="bg-background">
@@ -62,7 +103,21 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 			</CardHeader>
 
 			<CardContent className="flex flex-col gap-4">
-				<Label>Select a container to view logs</Label>
+				<div className="flex flex-row justify-between items-center gap-2">
+					<Label>Select a container to view logs</Label>
+					<div className="flex flex-row gap-2 items-center">
+						<span className="text-sm text-muted-foreground">
+							{option === "native" ? "Native" : "Swarm"}
+						</span>
+						<Switch
+							checked={option === "native"}
+							onCheckedChange={(checked) => {
+								setOption(checked ? "native" : "swarm");
+							}}
+						/>
+					</div>
+				</div>
+
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
@@ -76,21 +131,45 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 					</SelectTrigger>
 					<SelectContent>
 						<SelectGroup>
-							{data?.map((container) => (
-								<SelectItem
-									key={container.containerId}
-									value={container.containerId}
-								>
-									{container.name} ({container.containerId}) {container.state}
-								</SelectItem>
-							))}
-							<SelectLabel>Containers ({data?.length})</SelectLabel>
+							{option === "native" ? (
+								<div>
+									{containers?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}){" "}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</div>
+							) : (
+								<>
+									{services?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}@{container.node}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</>
+							)}
+
+							<SelectLabel>Containers ({containersLenght})</SelectLabel>
 						</SelectGroup>
 					</SelectContent>
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
 					containerId={containerId || "select-a-container"}
+					runType={option}
 				/>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -265,21 +265,21 @@ export const AddPreviewDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>