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} />
)}
<DockerTerminalModal appName={data?.appName || ""}>
<DockerTerminalModal
appName={data?.appName || ""}
serverId={data?.serverId || ""}
>
<Button variant="outline">
<Terminal />
Open Terminal

View File

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

View File

@@ -8,9 +8,14 @@ import { AttachAddon } from "@xterm/addon-attach";
interface Props {
id: 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 [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
useEffect(() => {
@@ -33,7 +38,7 @@ export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => {
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);

View File

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

View File

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

View File

@@ -30,6 +30,7 @@ export const setupDockerContainerTerminalWebSocketServer = (
const url = new URL(req.url || "", `http://${req.headers.host}`);
const containerId = url.searchParams.get("containerId");
const activeWay = url.searchParams.get("activeWay");
const serverId = url.searchParams.get("serverId");
const { user, session } = await validateWebSocketRequest(req);
if (!containerId) {
@@ -42,41 +43,45 @@ export const setupDockerContainerTerminalWebSocketServer = (
return;
}
try {
const shell = getShell();
const ptyProcess = spawn(
shell,
["-c", `docker exec -it ${containerId} ${activeWay}`],
{
name: "xterm-256color",
cwd: process.env.HOME,
env: process.env,
encoding: "utf8",
cols: 80,
rows: 30,
},
);
if (serverId) {
// const server = await findServerById(serverId);
} else {
const shell = getShell();
const ptyProcess = spawn(
shell,
["-c", `docker exec -it ${containerId} ${activeWay}`],
{
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.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;