refactor: show logs to each application and database

This commit is contained in:
Mauricio Siu
2024-09-09 00:14:08 -06:00
parent ea5349c844
commit cf06162be7
6 changed files with 66 additions and 46 deletions

View File

@@ -66,7 +66,10 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
) : ( ) : (
<StopApplication applicationId={applicationId} /> <StopApplication applicationId={applicationId} />
)} )}
<DockerTerminalModal appName={data?.appName || ""}> <DockerTerminalModal
appName={data?.appName || ""}
serverId={data?.serverId || ""}
>
<Button variant="outline"> <Button variant="outline">
<Terminal /> <Terminal />
Open Terminal Open Terminal

View File

@@ -18,10 +18,15 @@ const Terminal = dynamic(
interface Props { interface Props {
containerId: string; containerId: string;
serverId?: string;
children?: React.ReactNode; children?: React.ReactNode;
} }
export const DockerTerminalModal = ({ children, containerId }: Props) => { export const DockerTerminalModal = ({
children,
containerId,
serverId,
}: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
@@ -40,7 +45,11 @@ export const DockerTerminalModal = ({ children, containerId }: Props) => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<Terminal id="terminal" containerId={containerId} /> <Terminal
id="terminal"
containerId={containerId}
serverId={serverId || ""}
/>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

View File

@@ -8,9 +8,14 @@ import { AttachAddon } from "@xterm/addon-attach";
interface Props { interface Props {
id: string; id: string;
containerId: string; containerId: string;
serverId?: string;
} }
export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => { export const DockerTerminal: React.FC<Props> = ({
id,
containerId,
serverId,
}) => {
const termRef = useRef(null); const termRef = useRef(null);
const [activeWay, setActiveWay] = React.useState<string | undefined>("bash"); const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
useEffect(() => { useEffect(() => {
@@ -33,7 +38,7 @@ export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => {
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}`; const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}&serverId=${serverId}`;
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);

View File

@@ -34,12 +34,14 @@ const Terminal = dynamic(
interface Props { interface Props {
appName: string; appName: string;
children?: React.ReactNode; children?: React.ReactNode;
serverId?: string;
} }
export const DockerTerminalModal = ({ children, appName }: Props) => { export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
const { data } = api.docker.getContainersByAppNameMatch.useQuery( const { data } = api.docker.getContainersByAppNameMatch.useQuery(
{ {
appName, appName,
serverId,
}, },
{ {
enabled: !!appName, enabled: !!appName,
@@ -82,6 +84,7 @@ export const DockerTerminalModal = ({ children, appName }: Props) => {
</SelectContent> </SelectContent>
</Select> </Select>
<Terminal <Terminal
serverId={serverId || ""}
id="terminal" id="terminal"
containerId={containerId || "select-a-container"} containerId={containerId || "select-a-container"}
/> />

View File

@@ -20,7 +20,6 @@ export const executeCommand = async (serverId: string, command: string) => {
} }
stream stream
.on("close", (code, signal) => { .on("close", (code, signal) => {
console.log("Connection closed ✅");
client.end(); client.end();
if (code === 0) { if (code === 0) {
resolve(); resolve();
@@ -28,12 +27,8 @@ export const executeCommand = async (serverId: string, command: string) => {
reject(new Error(`Command exited with code ${code}`)); reject(new Error(`Command exited with code ${code}`));
} }
}) })
.on("data", (data: string) => { .on("data", (data: string) => {})
console.log(`OUTPUT: ${data.toString()}`); .stderr.on("data", (data) => {});
})
.stderr.on("data", (data) => {
console.error(`STDERR: ${data.toString()}`);
});
}); });
}) })
.connect({ .connect({

View File

@@ -30,6 +30,7 @@ export const setupDockerContainerTerminalWebSocketServer = (
const url = new URL(req.url || "", `http://${req.headers.host}`); const url = new URL(req.url || "", `http://${req.headers.host}`);
const containerId = url.searchParams.get("containerId"); const containerId = url.searchParams.get("containerId");
const activeWay = url.searchParams.get("activeWay"); const activeWay = url.searchParams.get("activeWay");
const serverId = url.searchParams.get("serverId");
const { user, session } = await validateWebSocketRequest(req); const { user, session } = await validateWebSocketRequest(req);
if (!containerId) { if (!containerId) {
@@ -42,41 +43,45 @@ export const setupDockerContainerTerminalWebSocketServer = (
return; return;
} }
try { try {
const shell = getShell(); if (serverId) {
const ptyProcess = spawn( // const server = await findServerById(serverId);
shell, } else {
["-c", `docker exec -it ${containerId} ${activeWay}`], const shell = getShell();
{ const ptyProcess = spawn(
name: "xterm-256color", shell,
cwd: process.env.HOME, ["-c", `docker exec -it ${containerId} ${activeWay}`],
env: process.env, {
encoding: "utf8", name: "xterm-256color",
cols: 80, cwd: process.env.HOME,
rows: 30, env: process.env,
}, encoding: "utf8",
); cols: 80,
rows: 30,
},
);
ptyProcess.onData((data) => { ptyProcess.onData((data) => {
ws.send(data); ws.send(data);
}); });
ws.on("close", () => { ws.on("close", () => {
ptyProcess.kill(); ptyProcess.kill();
}); });
ws.on("message", (message) => { ws.on("message", (message) => {
try { try {
let command: string | Buffer[] | Buffer | ArrayBuffer; let command: string | Buffer[] | Buffer | ArrayBuffer;
if (Buffer.isBuffer(message)) { if (Buffer.isBuffer(message)) {
command = message.toString("utf8"); command = message.toString("utf8");
} else { } else {
command = message; 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) { } catch (error) {
// @ts-ignore // @ts-ignore
const errorMessage = error?.message as unknown as string; const errorMessage = error?.message as unknown as string;