LukeParke/dokploy
1
0
Fork 0
mirror of https://github.com/LukeHagar/dokploy.git synced 2025-12-10 04:19:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify WebSocket connection logic in DockerTerminal component

Browse Source 
- Removed redundant checks for containerId before establishing WebSocket connection.
- Streamlined the connection setup and added the AttachAddon directly after the terminal is opened.
- Updated UI text to clarify the connection method.
This commit is contained in:
Mauricio Siu
2025-10-05 00:45:07 -06:00
parent 47a9bd9c86
commit aadb278e5f
1 changed files with 14 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx
View File

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