refactor: remove cols

This commit is contained in:
Mauricio Siu
2024-12-14 23:12:21 -06:00
parent c6e512bec1
commit 86aba9ce3e
4 changed files with 40 additions and 58 deletions

View File

@@ -25,8 +25,6 @@ export const DockerTerminal: React.FC<Props> = ({
} }
const term = new Terminal({ const term = new Terminal({
cursorBlink: true, cursorBlink: true,
cols: 80,
rows: 30,
lineHeight: 1.4, lineHeight: 1.4,
convertEol: true, convertEol: true,
theme: { theme: {
@@ -45,6 +43,7 @@ export const DockerTerminal: React.FC<Props> = ({
const addonAttach = new AttachAddon(ws); const addonAttach = new AttachAddon(ws);
// @ts-ignore // @ts-ignore
term.open(termRef.current); term.open(termRef.current);
// @ts-ignore
term.loadAddon(addonFit); term.loadAddon(addonFit);
term.loadAddon(addonAttach); term.loadAddon(addonAttach);
addonFit.fit(); addonFit.fit();
@@ -66,7 +65,7 @@ export const DockerTerminal: React.FC<Props> = ({
</TabsList> </TabsList>
</Tabs> </Tabs>
</div> </div>
<div className="w-full h-full rounded-lg p-2 bg-[#19191A]"> <div className="w-full h-full rounded-lg p-2 bg-transparent border">
<div id={id} ref={termRef} /> <div id={id} ref={termRef} />
</div> </div>
</div> </div>

View File

@@ -20,13 +20,11 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
} }
const term = new XTerm({ const term = new XTerm({
cursorBlink: true, cursorBlink: true,
cols: 80,
rows: 30,
lineHeight: 1.4, lineHeight: 1.4,
convertEol: true, convertEol: true,
theme: { theme: {
cursor: "transparent", cursor: "transparent",
background: "#19191A", background: "transparent",
}, },
}); });
const addonFit = new FitAddon(); const addonFit = new FitAddon();
@@ -40,6 +38,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
// @ts-ignore // @ts-ignore
term.open(termRef.current); term.open(termRef.current);
// @ts-ignore
term.loadAddon(addonFit); term.loadAddon(addonFit);
term.loadAddon(addonAttach); term.loadAddon(addonAttach);
addonFit.fit(); addonFit.fit();
@@ -50,7 +49,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="w-full h-full bg-input rounded-lg p-2 "> <div className="w-full h-full bg-transparent border rounded-lg p-2 ">
<div id={id} ref={termRef} className="rounded-xl" /> <div id={id} ref={termRef} className="rounded-xl" />
</div> </div>
</div> </div>

View File

@@ -109,14 +109,7 @@ export const setupDockerContainerTerminalWebSocketServer = (
const ptyProcess = spawn( const ptyProcess = spawn(
shell, shell,
["-c", `docker exec -it ${containerId} ${activeWay}`], ["-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) => { ptyProcess.onData((data) => {

View File

@@ -70,53 +70,44 @@ export const setupTerminalWebSocketServer = (
let stderr = ""; let stderr = "";
conn conn
.once("ready", () => { .once("ready", () => {
conn.shell( conn.shell({}, (err, stream) => {
{ if (err) throw err;
term: "terminal",
cols: 80,
rows: 30,
height: 30,
width: 80,
},
(err, stream) => {
if (err) throw err;
stream stream
.on("close", (code: number, signal: string) => { .on("close", (code: number, signal: string) => {
ws.send(`\nContainer closed with code: ${code}\n`); ws.send(`\nContainer closed with code: ${code}\n`);
conn.end(); conn.end();
}) })
.on("data", (data: string) => { .on("data", (data: string) => {
stdout += data.toString(); stdout += data.toString();
ws.send(data.toString()); ws.send(data.toString());
}) })
.stderr.on("data", (data) => { .stderr.on("data", (data) => {
stderr += data.toString(); stderr += data.toString();
ws.send(data.toString()); ws.send(data.toString());
console.error("Error: ", data.toString()); console.error("Error: ", data.toString());
}); });
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;
}
stream.write(command.toString());
} catch (error) {
// @ts-ignore
const errorMessage = error?.message as unknown as string;
ws.send(errorMessage);
} }
}); stream.write(command.toString());
} catch (error) {
// @ts-ignore
const errorMessage = error?.message as unknown as string;
ws.send(errorMessage);
}
});
ws.on("close", () => { ws.on("close", () => {
stream.end(); stream.end();
}); });
}, });
);
}) })
.on("error", (err) => { .on("error", (err) => {
if (err.level === "client-authentication") { if (err.level === "client-authentication") {