feat: add logs for each application

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

@@ -30,12 +30,14 @@ export const DockerLogs = dynamic(
 
 interface Props {
 	appName: string;
+	serverId?: string;
 }
 
-export const ShowDockerLogs = ({ appName }: Props) => {
+export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -79,6 +81,7 @@ export const ShowDockerLogs = ({ appName }: Props) => {
 					</SelectContent>
 				</Select>
 				<DockerLogs
+					serverId={serverId || ""}
 					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>

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

@@ -30,14 +30,20 @@ export const DockerLogs = dynamic(
 
 interface Props {
 	appName: string;
+	serverId?: string;
 	appType: "stack" | "docker-compose";
 }
 
-export const ShowDockerLogsCompose = ({ appName, appType }: Props) => {
+export const ShowDockerLogsCompose = ({
+	appName,
+	appType,
+	serverId,
+}: Props) => {
 	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
 			appType,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -81,6 +87,7 @@ export const ShowDockerLogsCompose = ({ appName, appType }: Props) => {
 					</SelectContent>
 				</Select>
 				<DockerLogs
+					serverId={serverId || ""}
 					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>

apps/dokploy/components/dashboard/compose/monitoring/show.tsx

@@ -23,17 +23,20 @@ import { DockerMonitoring } from "../../monitoring/docker/show";
 
 interface Props {
 	appName: string;
+	serverId?: string;
 	appType: "stack" | "docker-compose";
 }
 
 export const ShowMonitoringCompose = ({
 	appName,
 	appType = "stack",
+	serverId,
 }: Props) => {
 	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName: appName,
 			appType,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -108,6 +111,7 @@ export const ShowMonitoringCompose = ({
 						</Button>
 					</div>
 					<DockerMonitoring
+						serverId={serverId || ""}
 						appName={containerAppName || ""}
 						appType={appType}
 					/>

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

@@ -8,9 +8,14 @@ import "@xterm/xterm/css/xterm.css";
 interface Props {
 	id: string;
 	containerId: string;
+	serverId?: string;
 }
 
-export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
+export const DockerLogsId: React.FC<Props> = ({
+	id,
+	containerId,
+	serverId,
+}) => {
 	const [term, setTerm] = React.useState<Terminal>();
 	const [lines, setLines] = React.useState<number>(40);
 
@@ -38,7 +43,7 @@ export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}`;
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}&serverId=${serverId}`;
 		const ws = new WebSocket(wsUrl);
 
 		const fitAddon = new FitAddon();

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -159,7 +159,10 @@ const Service = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="deployments" className="w-full">

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -151,6 +151,7 @@ const Service = (
 				<TabsContent value="monitoring">
 					<div className="flex flex-col gap-4 pt-2.5">
 						<ShowMonitoringCompose
+							serverId={data?.serverId || ""}
 							appName={data?.appName || ""}
 							appType={data?.composeType || "docker-compose"}
 						/>
@@ -160,6 +161,7 @@ const Service = (
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4 pt-2.5">
 						<ShowDockerLogsCompose
+							serverId={data?.serverId || ""}
 							appName={data?.appName || ""}
 							appType={data?.composeType || "docker-compose"}
 						/>

apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx

@@ -143,7 +143,10 @@ const Mariadb = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							serverId={data?.serverId || ""}
+							appName={data?.appName || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="backups">

apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx

@@ -145,7 +145,10 @@ const Mongo = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							serverId={data?.serverId || ""}
+							appName={data?.appName || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="backups">

apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx

@@ -144,7 +144,10 @@ const MySql = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							serverId={data?.serverId || ""}
+							appName={data?.appName || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="backups">

apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx

@@ -145,7 +145,10 @@ const Postgresql = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							serverId={data?.serverId || ""}
+							appName={data?.appName || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="backups">

apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx

@@ -143,7 +143,10 @@ const Redis = (
 				</TabsContent>
 				<TabsContent value="logs">
 					<div className="flex flex-col gap-4  pt-2.5">
-						<ShowDockerLogs appName={data?.appName || ""} />
+						<ShowDockerLogs
+							serverId={data?.serverId || ""}
+							appName={data?.appName || ""}
+						/>
 					</div>
 				</TabsContent>
 				<TabsContent value="advanced">

apps/dokploy/server/api/routers/docker.ts

@@ -40,10 +40,15 @@ export const dockerRouter = createTRPCRouter({
 					.union([z.literal("stack"), z.literal("docker-compose")])
 					.optional(),
 				appName: z.string().min(1),
+				serverId: z.string().optional(),
 			}),
 		)
 		.query(async ({ input }) => {
-			return await getContainersByAppNameMatch(input.appName, input.appType);
+			return await getContainersByAppNameMatch(
+				input.appName,
+				input.appType,
+				input.serverId,
+			);
 		}),
 
 	getContainersByAppLabel: protectedProcedure

apps/dokploy/server/api/services/docker.ts

@@ -1,4 +1,9 @@
+import { readSSHKey } from "@/server/utils/filesystem/ssh";
 import { execAsync } from "@/server/utils/process/execAsync";
+import { tail } from "lodash";
+import { stderr, stdout } from "node:process";
+import { Client } from "ssh2";
+import { findServerById } from "./server";
 
 export const getContainers = async () => {
 	try {
@@ -69,25 +74,65 @@ export const getConfig = async (containerId: string) => {
 export const getContainersByAppNameMatch = async (
 	appName: string,
 	appType?: "stack" | "docker-compose",
+	serverId?: string,
 ) => {
 	try {
+		let result: string[] = [];
 		const cmd =
 			"docker ps -a --format 'CONTAINER ID : {{.ID}} | Name: {{.Names}} | State: {{.State}}'";
 
-		const { stdout, stderr } = await execAsync(
+		const command =
 			appType === "docker-compose"
 				? `${cmd} --filter='label=com.docker.compose.project=${appName}'`
-				: `${cmd} | grep ${appName}`,
-		);
+				: `${cmd} | grep ${appName}`;
+		if (serverId) {
+			const server = await findServerById(serverId);
 
-		if (stderr) {
-			return [];
+			if (!server.sshKeyId) return;
+			const keys = await readSSHKey(server.sshKeyId);
+			const client = new Client();
+			result = await new Promise<string[]>((resolve, reject) => {
+				let output = "";
+				client
+					.on("ready", () => {
+						client.exec(command, (err, stream) => {
+							if (err) {
+								console.error("Execution error:", err);
+								reject(err);
+								return;
+							}
+							stream
+								.on("close", () => {
+									client.end();
+									resolve(output.trim().split("\n"));
+								})
+								.on("data", (data: string) => {
+									output += data.toString();
+								})
+								.stderr.on("data", (data) => {});
+						});
+					})
+					.connect({
+						host: server.ipAddress,
+						port: server.port,
+						username: server.username,
+						privateKey: keys.privateKey,
+						timeout: 99999,
+					});
+			});
+		} else {
+			const { stdout, stderr } = await execAsync(command);
+
+			if (stderr) {
+				return [];
+			}
+
+			if (!stdout) return [];
+
+			result = stdout.trim().split("\n");
 		}
 
-		if (!stdout) return [];
-
-		const lines = stdout.trim().split("\n");
-		const containers = lines.map((line) => {
+		const containers = result.map((line) => {
 			const parts = line.split(" | ");
 			const containerId = parts[0]
 				? parts[0].replace("CONTAINER ID : ", "").trim()

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

@@ -3,6 +3,9 @@ import { spawn } from "node-pty";
 import { WebSocketServer } from "ws";
 import { validateWebSocketRequest } from "../auth/auth";
 import { getShell } from "./utils";
+import { Client } from "ssh2";
+import { findServerById } from "../api/services/server";
+import { readSSHKey } from "../utils/filesystem/ssh";
 
 export const setupDockerContainerLogsWebSocketServer = (
 	server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>,
@@ -30,6 +33,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const url = new URL(req.url || "", `http://${req.headers.host}`);
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
+		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
 		if (!containerId) {
@@ -42,41 +46,88 @@ export const setupDockerContainerLogsWebSocketServer = (
 			return;
 		}
 		try {
-			const shell = getShell();
-			const ptyProcess = spawn(
-				shell,
-				["-c", `docker container logs --tail ${tail} --follow ${containerId}`],
-				{
-					name: "xterm-256color",
-					cwd: process.env.HOME,
-					env: process.env,
-					encoding: "utf8",
-					cols: 80,
-					rows: 30,
-				},
-			);
+			if (serverId) {
+				const server = await findServerById(serverId);
 
-			ptyProcess.onData((data) => {
-				ws.send(data);
-			});
-			ws.on("close", () => {
-				ptyProcess.kill();
-			});
-			ws.on("message", (message) => {
-				try {
-					let command: string | Buffer[] | Buffer | ArrayBuffer;
-					if (Buffer.isBuffer(message)) {
-						command = message.toString("utf8");
-					} else {
-						command = message;
+				if (!server.sshKeyId) return;
+				const keys = await readSSHKey(server.sshKeyId);
+				const client = new Client();
+				new Promise<void>((resolve, reject) => {
+					client
+						.on("ready", () => {
+							const command = `
+						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
+					`;
+							client.exec(command, (err, stream) => {
+								if (err) {
+									console.error("Execution error:", err);
+									reject(err);
+									return;
+								}
+								stream
+									.on("close", () => {
+										console.log("Connection closed ✅");
+										client.end();
+										resolve();
+									})
+									.on("data", (data: string) => {
+										ws.send(data.toString());
+										// console.log(`OUTPUT: ${data.toString()}`);
+									})
+									.stderr.on("data", (data) => {
+										ws.send(data.toString());
+										// console.error(`STDERR: ${data.toString()}`);
+									});
+							});
+						})
+						.connect({
+							host: server.ipAddress,
+							port: server.port,
+							username: server.username,
+							privateKey: keys.privateKey,
+							timeout: 99999,
+						});
+				});
+			} else {
+				const shell = getShell();
+				const ptyProcess = spawn(
+					shell,
+					[
+						"-c",
+						`docker container logs --tail ${tail} --follow ${containerId}`,
+					],
+					{
+						name: "xterm-256color",
+						cwd: process.env.HOME,
+						env: process.env,
+						encoding: "utf8",
+						cols: 80,
+						rows: 30,
+					},
+				);
+
+				ptyProcess.onData((data) => {
+					ws.send(data);
+				});
+				ws.on("close", () => {
+					ptyProcess.kill();
+				});
+				ws.on("message", (message) => {
+					try {
+						let command: string | Buffer[] | Buffer | ArrayBuffer;
+						if (Buffer.isBuffer(message)) {
+							command = message.toString("utf8");
+						} else {
+							command = message;
+						}
+						ptyProcess.write(command.toString());
+					} catch (error) {
+						// @ts-ignore
+						const errorMessage = error?.message as unknown as string;
+						ws.send(errorMessage);
 					}
-					ptyProcess.write(command.toString());
-				} catch (error) {
-					// @ts-ignore
-					const errorMessage = error?.message as unknown as string;
-					ws.send(errorMessage);
-				}
-			});
+				});
+			}
 		} catch (error) {
 			// @ts-ignore
 			const errorMessage = error?.message as unknown as string;