Addding kill terminal button

This commit is contained in:
Raven Scott 2024-11-26 03:31:29 -05:00
parent e1bc040673
commit 8ebb9efe5a
2 changed files with 37 additions and 10 deletions

32
app.js
View File

@ -20,6 +20,25 @@ const containerList = document.getElementById('container-list');
// Initialize the app // Initialize the app
console.log('[INFO] Client app initialized'); console.log('[INFO] Client app initialized');
// Add Kill Terminal button functionality
document.getElementById('kill-terminal-btn').onclick = () => {
const containerId = terminalTitle.dataset.containerId;
if (containerId && terminalSessions[containerId]) {
console.log(`[INFO] Killing terminal session for container: ${containerId}`);
// Send kill command to server
window.sendCommand('killTerminal', { containerId });
// Clean up terminal state
terminalModal.style.display = 'none';
delete terminalSessions[containerId];
xterm.dispose(); // Dispose of the current terminal instance
xterm = null; // Reset xterm instance
} else {
console.error('[ERROR] No terminal session found to kill.');
}
};
// Add a new connection // Add a new connection
document.getElementById('add-connection-form').addEventListener('submit', (e) => { document.getElementById('add-connection-form').addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
@ -134,7 +153,7 @@ function renderContainers(containers) {
<button class="btn btn-success btn-sm" onclick="window.sendCommand('startContainer', { id: '${container.Id}' })">Start</button> <button class="btn btn-success btn-sm" onclick="window.sendCommand('startContainer', { id: '${container.Id}' })">Start</button>
<button class="btn btn-warning btn-sm" onclick="window.sendCommand('stopContainer', { id: '${container.Id}' })">Stop</button> <button class="btn btn-warning btn-sm" onclick="window.sendCommand('stopContainer', { id: '${container.Id}' })">Stop</button>
<button class="btn btn-danger btn-sm" onclick="window.sendCommand('removeContainer', { id: '${container.Id}' })">Remove</button> <button class="btn btn-danger btn-sm" onclick="window.sendCommand('removeContainer', { id: '${container.Id}' })">Remove</button>
<button class="btn btn-info btn-sm" onclick="window.startTerminal('${container.Id}')">Terminal</button> <button class="btn btn-info btn-sm" onclick="window.startTerminal('${container.Id}', '${name}')">Terminal</button>
</td> </td>
`; `;
containerList.appendChild(row); containerList.appendChild(row);
@ -161,7 +180,7 @@ function initializeTerminal() {
} }
// Start terminal session // Start terminal session
function startTerminal(containerId) { function startTerminal(containerId, containerName) {
if (!activePeer) { if (!activePeer) {
console.error('[ERROR] No active peer for terminal.'); console.error('[ERROR] No active peer for terminal.');
return; return;
@ -176,13 +195,18 @@ function startTerminal(containerId) {
xterm.write(session.output); xterm.write(session.output);
terminalModal.style.display = 'flex'; terminalModal.style.display = 'flex';
terminalTitle.textContent = `Container Terminal: ${containerId}`; terminalTitle.dataset.containerId = containerId;
terminalTitle.textContent = `Container Terminal: ${containerName}`;
console.log(`[INFO] Starting terminal for container: ${containerId}`); console.log(`[INFO] Starting terminal for container: ${containerId}`);
activePeer.write(JSON.stringify({ command: 'startTerminal', args: { containerId } })); activePeer.write(JSON.stringify({ command: 'startTerminal', args: { containerId } }));
xterm.onData((data) => { xterm.onData((data) => {
console.log(`[DEBUG] Sending terminal input: ${data}`); console.log(`[DEBUG] Sending terminal input: ${data}`);
if (data === '\u001b[2;5R') {
fitAddon.fit();
return;
}
activePeer.write(JSON.stringify({ type: 'terminalInput', data })); activePeer.write(JSON.stringify({ type: 'terminalInput', data }));
}); });
@ -205,7 +229,7 @@ function appendTerminalOutput(data, containerId) {
console.log(`[DEBUG] Appending terminal output: ${data}`); console.log(`[DEBUG] Appending terminal output: ${data}`);
const session = terminalSessions[containerId]; const session = terminalSessions[containerId];
session.output += data; session.output += data;
if (terminalTitle.textContent.includes(containerId)) { if (terminalTitle.dataset.containerId === containerId) {
xterm.write(data); xterm.write(data);
} }
} }

View File

@ -104,11 +104,11 @@
align-items: center; align-items: center;
} }
#terminal-container { #terminal-container {
flex: 1; flex: 1;
overflow: hidden; /* Ensure no scrollbars appear */ overflow: hidden;
background-color: black; background-color: black;
color: white; color: white;
} }
#tray { #tray {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -165,7 +165,10 @@
<div id="terminal-modal"> <div id="terminal-modal">
<div class="header"> <div class="header">
<span id="terminal-title"></span> <span id="terminal-title"></span>
<button id="minimize-terminal-btn" class="btn btn-sm btn-secondary">Minimize</button> <div>
<button id="kill-terminal-btn" class="btn btn-sm btn-danger">Kill Terminal</button>
<button id="minimize-terminal-btn" class="btn btn-sm btn-secondary">Minimize</button>
</div>
</div> </div>
<div id="terminal-container"></div> <div id="terminal-container"></div>
</div> </div>