fix: docker terminal dropdown not showing containers for application of type "docker-compose"

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -195,6 +195,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 			<DockerTerminalModal
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
+				appType={data?.composeType || "docker-compose"}
 			>
 				<Button
 					variant="outline"

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

@@ -1,14 +1,15 @@
 import { Terminal } from "@xterm/xterm";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
 import { useTheme } from "next-themes";
+import { Label } from "@/components/ui/label";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface Props {
 	id: string;
-	containerId: string;
+	containerId?: string;
 	serverId?: string;
 }
 
@@ -19,6 +20,7 @@ export const DockerTerminal: React.FC<Props> = ({
 }) => {
 	const termRef = useRef(null);
 	const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
+	const [isConnected, setIsConnected] = useState(false);
 	const { resolvedTheme } = useTheme();
 	useEffect(() => {
 		const container = document.getElementById(id);
@@ -36,31 +38,48 @@ export const DockerTerminal: React.FC<Props> = ({
 			},
 		});
 		const addonFit = new FitAddon();
-
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
-
-		const ws = new WebSocket(wsUrl);
-
-		const addonAttach = new AttachAddon(ws);
 		// @ts-ignore
 		term.open(termRef.current);
 		// @ts-ignore
 		term.loadAddon(addonFit);
-		term.loadAddon(addonAttach);
 		addonFit.fit();
-		return () => {
+
-			ws.readyState === WebSocket.OPEN && ws.close();
+		// only connect if containerId is provided
-		};
+		if (
+			containerId &&
+			containerId !== "" &&
+			containerId !== "select-a-container"
+		) {
+			const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+			const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
+
+			const ws = new WebSocket(wsUrl);
+
+			const addonAttach = new AttachAddon(ws);
+
+			term.loadAddon(addonAttach);
+
+			ws.onopen = () => {
+				setIsConnected(true);
+			};
+
+			ws.onclose = () => {
+				setIsConnected(false);
+			};
+
+			return () => {
+				ws.readyState === WebSocket.OPEN && ws.close();
+			};
+		}
 	}, [containerId, activeWay, id]);
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="flex flex-col gap-2">
+			<div className="flex flex-col gap-2  mt-4">
-				<span>
+				<Label>
-					Select way to connect to <b>{containerId}</b>
+					Select shell to connect to <b>{isConnected ? containerId : "..."}</b>
-				</span>
+				</Label>
 				<Tabs value={activeWay} onValueChange={setActiveWay}>
 					<TabsList>
 						<TabsTrigger value="bash">Bash</TabsTrigger>

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -13,7 +13,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -40,23 +39,36 @@ interface Props {
 	appName: string;
 	children?: React.ReactNode;
 	serverId?: string;
+	appType?: "stack" | "docker-compose";
 }
 
-export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
+export const DockerTerminalModal = ({
+	children,
+	appName,
+	serverId,
+	appType,
+}: Props) => {
 	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
-			serverId,
+			appType,
+			...(serverId ? { serverId } : {}),
 		},
 		{
 			enabled: !!appName,
 		},
 	);
+
+	
 	const [containerId, setContainerId] = useState<string | undefined>();
 	const [mainDialogOpen, setMainDialogOpen] = useState(false);
 	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
 
 	const handleMainDialogOpenChange = (open: boolean) => {
+		if (!open && !containerId) {
+			setMainDialogOpen(false);
+			return;
+		}
 		if (!open) {
 			setConfirmDialogOpen(true);
 		} else {
@@ -83,7 +95,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent
-				className="max-h-[85vh]    sm:max-w-7xl"
+				className="max-h-[85vh] sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>
@@ -92,7 +104,6 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 						Easy way to access to docker container
 					</DialogDescription>
 				</DialogHeader>
-				<Label>Select a container to view logs</Label>
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
@@ -121,11 +132,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 						</SelectGroup>
 					</SelectContent>
 				</Select>
-				<Terminal
+				<Terminal serverId={serverId} id="terminal" containerId={containerId} />
-					serverId={serverId || ""}
-					id="terminal"
-					containerId={containerId || "select-a-container"}
-				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
 					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
 						<DialogHeader>