forked from snxraven/peardock
random changes
This commit is contained in:
parent
f4d88e0ded
commit
db04774fb4
353
app.js
353
app.js
@ -1,49 +1,50 @@
|
||||
import Hyperswarm from 'hyperswarm';
|
||||
import b4a from 'b4a';
|
||||
import { Terminal } from 'xterm';
|
||||
import { FitAddon } from 'xterm-addon-fit';
|
||||
|
||||
const swarm = new Hyperswarm();
|
||||
const connections = {};
|
||||
let activePeer = null;
|
||||
let terminalSessions = {}; // Track terminal states per container
|
||||
let xterm = null; // The current terminal instance
|
||||
let fitAddon = null; // FitAddon instance
|
||||
import { startTerminal, appendTerminalOutput } from './libs/terminal.js';
|
||||
|
||||
// DOM Elements
|
||||
const terminalModal = document.getElementById('terminal-modal');
|
||||
const terminalTitle = document.getElementById('terminal-title');
|
||||
const terminalContainer = document.getElementById('terminal-container');
|
||||
const tray = document.getElementById('tray');
|
||||
const containerList = document.getElementById('container-list');
|
||||
const connectionList = document.getElementById('connection-list');
|
||||
const addConnectionForm = document.getElementById('add-connection-form');
|
||||
const newConnectionTopic = document.getElementById('new-connection-topic');
|
||||
const connectionTitle = document.getElementById('connection-title');
|
||||
const dashboard = document.getElementById('dashboard');
|
||||
|
||||
// Modal Elements
|
||||
const duplicateModalElement = document.getElementById('duplicateModal');
|
||||
const duplicateModal = new bootstrap.Modal(duplicateModalElement);
|
||||
const duplicateContainerForm = document.getElementById('duplicate-container-form');
|
||||
|
||||
// Global variables
|
||||
const connections = {};
|
||||
let activePeer = null;
|
||||
window.activePeer = null; // Expose to other modules
|
||||
|
||||
// Initialize the app
|
||||
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.');
|
||||
}
|
||||
};
|
||||
// Collapse Sidebar Functionality
|
||||
const collapseSidebarBtn = document.getElementById('collapse-sidebar-btn');
|
||||
collapseSidebarBtn.addEventListener('click', () => {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('collapsed');
|
||||
const btn = collapseSidebarBtn;
|
||||
btn.innerHTML = sidebar.classList.contains('collapsed') ? '>' : '<';
|
||||
});
|
||||
|
||||
// Add a new connection
|
||||
document.getElementById('add-connection-form').addEventListener('submit', (e) => {
|
||||
addConnectionForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const topicHex = document.getElementById('new-connection-topic').value;
|
||||
const topicHex = newConnectionTopic.value.trim();
|
||||
if (topicHex) {
|
||||
addConnection(topicHex);
|
||||
newConnectionTopic.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Function to add a new connection
|
||||
function addConnection(topicHex) {
|
||||
const topic = b4a.from(topicHex, 'hex');
|
||||
const topicId = topicHex.substring(0, 12);
|
||||
|
||||
@ -55,14 +56,27 @@ document.getElementById('add-connection-form').addEventListener('submit', (e) =>
|
||||
connectionItem.innerHTML = `
|
||||
<span class="connection-status status-disconnected"></span>${topicId}
|
||||
`;
|
||||
connectionItem.addEventListener('click', () => window.switchConnection(topicId));
|
||||
document.getElementById('connection-list').appendChild(connectionItem);
|
||||
connectionItem.addEventListener('click', () => switchConnection(topicId));
|
||||
connectionList.appendChild(connectionItem);
|
||||
|
||||
connections[topicId] = { topic, peer: null };
|
||||
connections[topicId] = { topic, peer: null, swarm: null };
|
||||
|
||||
// Create a new swarm for this connection
|
||||
const swarm = new Hyperswarm();
|
||||
connections[topicId].swarm = swarm;
|
||||
|
||||
swarm.join(topic, { client: true, server: false });
|
||||
|
||||
swarm.on('connection', (peer) => {
|
||||
console.log(`[INFO] Connected to peer for topic: ${topicHex}`);
|
||||
|
||||
// Prevent duplicate connections
|
||||
if (connections[topicId].peer) {
|
||||
console.warn(`[WARN] Duplicate connection detected for topic: ${topicId}. Closing.`);
|
||||
peer.destroy();
|
||||
return;
|
||||
}
|
||||
|
||||
connections[topicId].peer = peer;
|
||||
updateConnectionStatus(topicId, true);
|
||||
|
||||
@ -72,9 +86,20 @@ document.getElementById('add-connection-form').addEventListener('submit', (e) =>
|
||||
console.log(`[DEBUG] Received data from server: ${JSON.stringify(response)}`);
|
||||
|
||||
if (response.type === 'containers') {
|
||||
if (window.activePeer === peer) {
|
||||
renderContainers(response.data);
|
||||
}
|
||||
} else if (response.type === 'terminalOutput') {
|
||||
appendTerminalOutput(response.data, response.containerId);
|
||||
appendTerminalOutput(response.data, response.containerId, response.encoding);
|
||||
} else if (response.type === 'containerConfig') {
|
||||
if (window.inspectContainerCallback) {
|
||||
window.inspectContainerCallback(response.data);
|
||||
window.inspectContainerCallback = null; // Reset the callback
|
||||
}
|
||||
} else if (response.type === 'stats') {
|
||||
updateContainerStats(response.data);
|
||||
} else if (response.error) {
|
||||
console.log(`Error: ${response.error}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to parse data from server: ${err.message}`);
|
||||
@ -84,41 +109,50 @@ document.getElementById('add-connection-form').addEventListener('submit', (e) =>
|
||||
peer.on('close', () => {
|
||||
console.log(`[INFO] Disconnected from peer for topic: ${topicHex}`);
|
||||
updateConnectionStatus(topicId, false);
|
||||
});
|
||||
});
|
||||
connections[topicId].peer = null; // Clear the peer reference
|
||||
|
||||
if (window.activePeer === peer) {
|
||||
window.activePeer = null;
|
||||
connectionTitle.textContent = 'Disconnected';
|
||||
dashboard.classList.add('hidden');
|
||||
containerList.innerHTML = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Collapse/Expand Sidebar
|
||||
document.getElementById('collapse-sidebar-btn').addEventListener('click', () => {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
sidebar.classList.toggle('collapsed');
|
||||
const btn = document.getElementById('collapse-sidebar-btn');
|
||||
btn.textContent = sidebar.classList.contains('collapsed') ? '>' : '<';
|
||||
// If this is the first connection, switch to it
|
||||
if (!window.activePeer) {
|
||||
switchConnection(topicId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update connection status
|
||||
function updateConnectionStatus(topicId, isConnected) {
|
||||
const connectionItem = document.querySelector(`[data-topic-id="${topicId}"] .connection-status`);
|
||||
if (connectionItem) {
|
||||
connectionItem.className = `connection-status ${isConnected ? 'status-connected' : 'status-disconnected'}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Switch between connections
|
||||
function switchConnection(topicId) {
|
||||
activePeer = connections[topicId].peer;
|
||||
const connectionTitle = document.getElementById('connection-title');
|
||||
if (!connectionTitle) {
|
||||
console.error('[ERROR] Connection title element is missing.');
|
||||
const connection = connections[topicId];
|
||||
if (!connection) {
|
||||
console.error(`[ERROR] No connection found for topicId: ${topicId}`);
|
||||
return;
|
||||
}
|
||||
connectionTitle.textContent = `Connection: ${topicId}`;
|
||||
document.getElementById('dashboard').classList.remove('hidden');
|
||||
|
||||
if (activePeer) {
|
||||
console.log('[INFO] Sending "listContainers" command');
|
||||
window.sendCommand('listContainers');
|
||||
} else {
|
||||
console.error('[ERROR] No active peer to send command.');
|
||||
if (!connection.peer) {
|
||||
console.error('[ERROR] No active peer for this connection.');
|
||||
return;
|
||||
}
|
||||
|
||||
window.activePeer = connection.peer;
|
||||
connectionTitle.textContent = `Connection: ${topicId}`;
|
||||
dashboard.classList.remove('hidden');
|
||||
|
||||
console.log('[INFO] Sending "listContainers" command');
|
||||
sendCommand('listContainers');
|
||||
}
|
||||
|
||||
// Attach switchConnection to the global window object
|
||||
@ -126,10 +160,10 @@ window.switchConnection = switchConnection;
|
||||
|
||||
// Send a command to the active peer
|
||||
function sendCommand(command, args = {}) {
|
||||
if (activePeer) {
|
||||
if (window.activePeer) {
|
||||
const message = JSON.stringify({ command, args });
|
||||
console.log(`[DEBUG] Sending command to server: ${message}`);
|
||||
activePeer.write(message);
|
||||
window.activePeer.write(message);
|
||||
} else {
|
||||
console.error('[ERROR] No active peer to send command.');
|
||||
}
|
||||
@ -141,109 +175,164 @@ window.sendCommand = sendCommand;
|
||||
// Render the container list
|
||||
function renderContainers(containers) {
|
||||
console.log(`[INFO] Rendering ${containers.length} containers`);
|
||||
containerList.innerHTML = '';
|
||||
containerList.innerHTML = ''; // Clear the current list
|
||||
|
||||
containers.forEach((container) => {
|
||||
const name = container.Names[0].replace(/^\//, ''); // Remove leading slash from container names
|
||||
const image = container.Image;
|
||||
const containerId = container.Id;
|
||||
const row = document.createElement('tr');
|
||||
row.dataset.containerId = containerId; // Store container ID for reference
|
||||
row.innerHTML = `
|
||||
<td>${name}</td>
|
||||
<td>${image}</td>
|
||||
<td>${container.State}</td>
|
||||
<td class="cpu">0</td>
|
||||
<td class="memory">0</td>
|
||||
<td class="ip-address">-</td>
|
||||
<td>
|
||||
<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-danger btn-sm" onclick="window.sendCommand('removeContainer', { id: '${container.Id}' })">Remove</button>
|
||||
<button class="btn btn-info btn-sm" onclick="window.startTerminal('${container.Id}', '${name}')">Terminal</button>
|
||||
<button class="btn btn-success btn-sm action-start" ${container.State === 'running' ? 'disabled' : ''}>Start</button>
|
||||
<button class="btn btn-warning btn-sm action-stop" ${container.State !== 'running' ? 'disabled' : ''}>Stop</button>
|
||||
<button class="btn btn-danger btn-sm action-remove">Remove</button>
|
||||
<button class="btn btn-primary btn-sm action-terminal" ${container.State !== 'running' ? 'disabled' : ''}>Terminal</button>
|
||||
<button class="btn btn-secondary btn-sm action-duplicate">Duplicate</button>
|
||||
</td>
|
||||
`;
|
||||
containerList.appendChild(row);
|
||||
|
||||
// Add event listeners for action buttons
|
||||
addActionListeners(row, container);
|
||||
|
||||
// Add event listener for duplicate button
|
||||
const duplicateBtn = row.querySelector('.action-duplicate');
|
||||
duplicateBtn.addEventListener('click', () => openDuplicateModal(container));
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize Xterm.js terminal
|
||||
function initializeTerminal() {
|
||||
if (xterm) {
|
||||
xterm.dispose(); // Dispose existing terminal instance
|
||||
}
|
||||
xterm = new Terminal({ cursorBlink: true, theme: { background: '#000000', foreground: '#ffffff' } });
|
||||
fitAddon = new FitAddon(); // Create a new FitAddon instance
|
||||
xterm.loadAddon(fitAddon);
|
||||
|
||||
xterm.open(terminalContainer);
|
||||
setTimeout(() => fitAddon.fit(), 10); // Ensure terminal fits properly after rendering
|
||||
xterm.write('\x1b[1;32mWelcome to the Docker Terminal\x1b[0m\r\n');
|
||||
// Add event listeners to action buttons
|
||||
function addActionListeners(row, container) {
|
||||
const startBtn = row.querySelector('.action-start');
|
||||
const stopBtn = row.querySelector('.action-stop');
|
||||
const removeBtn = row.querySelector('.action-remove');
|
||||
const terminalBtn = row.querySelector('.action-terminal');
|
||||
|
||||
// Adjust terminal size dynamically when the window is resized
|
||||
window.addEventListener('resize', () => {
|
||||
fitAddon.fit();
|
||||
startBtn.addEventListener('click', () => {
|
||||
sendCommand('startContainer', { id: container.Id });
|
||||
});
|
||||
|
||||
stopBtn.addEventListener('click', () => {
|
||||
sendCommand('stopContainer', { id: container.Id });
|
||||
});
|
||||
|
||||
removeBtn.addEventListener('click', () => {
|
||||
sendCommand('removeContainer', { id: container.Id });
|
||||
});
|
||||
|
||||
terminalBtn.addEventListener('click', () => {
|
||||
startTerminal(container.Id, container.Names[0] || container.Id);
|
||||
});
|
||||
}
|
||||
|
||||
// Start terminal session
|
||||
function startTerminal(containerId, containerName) {
|
||||
if (!activePeer) {
|
||||
console.error('[ERROR] No active peer for terminal.');
|
||||
// Function to update container statistics
|
||||
function updateContainerStats(stats) {
|
||||
console.log(`[DEBUG] Updating stats for container ID: ${stats.id}`);
|
||||
let row = containerList.querySelector(`tr[data-container-id="${stats.id}"]`);
|
||||
|
||||
if (!row) {
|
||||
console.warn(`[WARN] No row found for container ID: ${stats.id}. Adding a placeholder.`);
|
||||
// Create a placeholder row if it doesn't exist
|
||||
row = document.createElement('tr');
|
||||
row.dataset.containerId = stats.id;
|
||||
row.innerHTML = `
|
||||
<td>Unknown</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td class="cpu">0</td>
|
||||
<td class="memory">0</td>
|
||||
<td class="ip-address">-</td>
|
||||
<td>-</td>
|
||||
`;
|
||||
containerList.appendChild(row);
|
||||
}
|
||||
|
||||
row.querySelector('.cpu').textContent = stats.cpu.toFixed(2);
|
||||
row.querySelector('.memory').textContent = (stats.memory / (1024 * 1024)).toFixed(2);
|
||||
row.querySelector('.ip-address').textContent = stats.ip || '-';
|
||||
}
|
||||
|
||||
// Function to open the Duplicate Modal with container configurations
|
||||
function openDuplicateModal(container) {
|
||||
console.log(`[INFO] Opening Duplicate Modal for container: ${container.Id}`);
|
||||
|
||||
// Send a command to get container configurations
|
||||
sendCommand('inspectContainer', { id: container.Id });
|
||||
|
||||
// Listen for the response
|
||||
window.inspectContainerCallback = (config) => {
|
||||
if (!config) {
|
||||
alert('Failed to retrieve container configuration.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!terminalSessions[containerId]) {
|
||||
terminalSessions[containerId] = { output: '' }; // Initialize terminal state
|
||||
}
|
||||
// Populate the modal fields with the current configurations
|
||||
document.getElementById('container-name').value = config.Name.replace(/^\//, '');
|
||||
document.getElementById('container-image').value = config.Config.Image;
|
||||
document.getElementById('container-config').value = JSON.stringify(config, null, 2);
|
||||
|
||||
const session = terminalSessions[containerId];
|
||||
initializeTerminal();
|
||||
xterm.write(session.output);
|
||||
|
||||
terminalModal.style.display = 'flex';
|
||||
terminalTitle.dataset.containerId = containerId;
|
||||
terminalTitle.textContent = `Container Terminal: ${containerName}`;
|
||||
|
||||
console.log(`[INFO] Starting terminal for container: ${containerId}`);
|
||||
activePeer.write(JSON.stringify({ command: 'startTerminal', args: { containerId } }));
|
||||
|
||||
xterm.onData((data) => {
|
||||
console.log(`[DEBUG] Sending terminal input: ${data}`);
|
||||
|
||||
activePeer.write(JSON.stringify({ type: 'terminalInput', data }));
|
||||
});
|
||||
|
||||
document.getElementById('minimize-terminal-btn').onclick = () => {
|
||||
terminalModal.style.display = 'none';
|
||||
addToTray(containerId); // Minimize to tray
|
||||
// Show the modal
|
||||
duplicateModal.show();
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Handle the Duplicate Container Form Submission
|
||||
duplicateContainerForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const name = document.getElementById('container-name').value.trim();
|
||||
const image = document.getElementById('container-image').value.trim();
|
||||
const configJSON = document.getElementById('container-config').value.trim();
|
||||
|
||||
let config;
|
||||
try {
|
||||
config = JSON.parse(configJSON);
|
||||
} catch (err) {
|
||||
alert('Invalid JSON in configuration.');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[INFO] Sending duplicateContainer command for name: ${name}`);
|
||||
|
||||
// Send the duplicate command to the server
|
||||
sendCommand('duplicateContainer', { name, config });
|
||||
|
||||
// Close the modal
|
||||
duplicateModal.hide();
|
||||
|
||||
// Notify the user
|
||||
alert('Duplicate command sent.');
|
||||
|
||||
// Trigger container list update after a short delay
|
||||
setTimeout(() => {
|
||||
console.log('[INFO] Fetching updated container list after duplication');
|
||||
sendCommand('listContainers');
|
||||
}, 2000); // Wait for duplication to complete
|
||||
});
|
||||
|
||||
|
||||
// Attach startTerminal to the global window object
|
||||
window.startTerminal = startTerminal;
|
||||
|
||||
// Append terminal output
|
||||
function appendTerminalOutput(data, containerId) {
|
||||
if (!terminalSessions[containerId]) {
|
||||
console.error(`[ERROR] No terminal session found for container: ${containerId}`);
|
||||
return;
|
||||
// Handle window unload to clean up swarms and peers
|
||||
window.addEventListener('beforeunload', () => {
|
||||
for (const topicId in connections) {
|
||||
const connection = connections[topicId];
|
||||
if (connection.peer) {
|
||||
connection.peer.destroy();
|
||||
}
|
||||
|
||||
console.log(`[DEBUG] Appending terminal output: ${data}`);
|
||||
const session = terminalSessions[containerId];
|
||||
session.output += data;
|
||||
if (terminalTitle.dataset.containerId === containerId) {
|
||||
xterm.write(data);
|
||||
}
|
||||
}
|
||||
|
||||
// Add terminal to tray
|
||||
function addToTray(containerId) {
|
||||
let trayItem = document.querySelector(`.tray-item[data-id="${containerId}"]`);
|
||||
if (!trayItem) {
|
||||
trayItem = document.createElement('div');
|
||||
trayItem.className = 'tray-item';
|
||||
trayItem.dataset.id = containerId;
|
||||
trayItem.textContent = `Terminal: ${containerId}`;
|
||||
trayItem.onclick = () => {
|
||||
terminalModal.style.display = 'flex';
|
||||
xterm.write(terminalSessions[containerId].output);
|
||||
setTimeout(() => fitAddon.fit(), 10); // Ensure proper resize
|
||||
};
|
||||
tray.appendChild(trayItem);
|
||||
if (connection.swarm) {
|
||||
connection.swarm.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
58
index.html
58
index.html
@ -2,10 +2,15 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Docker P2P Manager</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- xterm.css for Terminal -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@ -135,6 +140,7 @@
|
||||
<div id="titlebar">
|
||||
<pear-ctrl></pear-ctrl>
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
<button id="collapse-sidebar-btn"><</button>
|
||||
<div class="content">
|
||||
@ -146,6 +152,7 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<h1 id="connection-title">Select a Connection</h1>
|
||||
<div id="dashboard" class="hidden">
|
||||
@ -154,7 +161,11 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Status</th>
|
||||
<th>CPU (%)</th>
|
||||
<th>Memory (MB)</th>
|
||||
<th>IP Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -162,18 +173,57 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duplicate Container Modal -->
|
||||
<div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content bg-dark text-white">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="duplicateModalLabel">Duplicate Container</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="duplicate-container-form">
|
||||
<div class="mb-3">
|
||||
<label for="container-name" class="form-label">Container Name</label>
|
||||
<input type="text" class="form-control" id="container-name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="container-image" class="form-label">Image</label>
|
||||
<input type="text" class="form-control" id="container-image" required>
|
||||
</div>
|
||||
<!-- Container Configuration as JSON -->
|
||||
<div class="mb-3">
|
||||
<label for="container-config" class="form-label">Container Configuration (JSON)</label>
|
||||
<textarea class="form-control" id="container-config" rows="10" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Deploy Duplicate</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Modal -->
|
||||
<div id="terminal-modal">
|
||||
<div class="header">
|
||||
<span id="terminal-title"></span>
|
||||
<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 id="terminal-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="tray"></div>
|
||||
|
||||
<!-- xterm.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
|
||||
|
||||
<!-- Bootstrap JS for Modal Functionality -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Your App JS -->
|
||||
<script type="module" src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
203
libs/terminal.js
Normal file
203
libs/terminal.js
Normal file
@ -0,0 +1,203 @@
|
||||
// terminal.js
|
||||
import { Terminal } from 'xterm';
|
||||
import { FitAddon } from 'xterm-addon-fit';
|
||||
|
||||
// DOM Elements
|
||||
const terminalModal = document.getElementById('terminal-modal');
|
||||
const terminalTitle = document.getElementById('terminal-title');
|
||||
const terminalContainer = document.getElementById('terminal-container');
|
||||
const tray = document.getElementById('tray');
|
||||
|
||||
// Terminal variables
|
||||
let terminalSessions = {}; // Track terminal sessions per containerId
|
||||
let activeContainerId = null; // Currently displayed containerId
|
||||
|
||||
// Kill Terminal button functionality
|
||||
document.getElementById('kill-terminal-btn').onclick = () => {
|
||||
const containerId = activeContainerId;
|
||||
|
||||
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 session
|
||||
const session = terminalSessions[containerId];
|
||||
session.xterm.dispose();
|
||||
session.onDataDisposable.dispose();
|
||||
if (session.resizeListener) {
|
||||
window.removeEventListener('resize', session.resizeListener);
|
||||
}
|
||||
// Remove the terminal's container div from DOM
|
||||
session.container.parentNode.removeChild(session.container);
|
||||
|
||||
delete terminalSessions[containerId];
|
||||
|
||||
// Remove from tray if exists
|
||||
removeFromTray(containerId);
|
||||
|
||||
// Hide the terminal modal if this was the active session
|
||||
if (activeContainerId === containerId) {
|
||||
terminalModal.style.display = 'none';
|
||||
activeContainerId = null;
|
||||
}
|
||||
} else {
|
||||
console.error('[ERROR] No terminal session found to kill.');
|
||||
}
|
||||
};
|
||||
|
||||
// Start terminal session
|
||||
function startTerminal(containerId, containerName) {
|
||||
if (!window.activePeer) {
|
||||
console.error('[ERROR] No active peer for terminal.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (terminalSessions[containerId]) {
|
||||
// Terminal session already exists
|
||||
console.log(`[INFO] Terminal session already exists for container: ${containerId}`);
|
||||
|
||||
// If terminal is minimized or not active, switch to it
|
||||
if (activeContainerId !== containerId || terminalModal.style.display === 'none') {
|
||||
switchTerminal(containerId);
|
||||
} else {
|
||||
console.log(`[INFO] Terminal for container ${containerId} is already active`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Create new terminal session
|
||||
console.log(`[INFO] Creating new terminal session for container: ${containerId}`);
|
||||
|
||||
// Initialize new terminal session
|
||||
const xterm = new Terminal({
|
||||
cursorBlink: true,
|
||||
theme: { background: '#000000', foreground: '#ffffff' },
|
||||
});
|
||||
const fitAddon = new FitAddon();
|
||||
xterm.loadAddon(fitAddon);
|
||||
|
||||
// Create a container div for this terminal
|
||||
const terminalDiv = document.createElement('div');
|
||||
terminalDiv.style.width = '100%';
|
||||
terminalDiv.style.height = '100%';
|
||||
terminalDiv.style.display = 'none'; // Initially hidden
|
||||
terminalContainer.appendChild(terminalDiv);
|
||||
|
||||
// Open the terminal in the container div
|
||||
xterm.open(terminalDiv);
|
||||
|
||||
// Set up event listener for terminal input using onData
|
||||
const onDataDisposable = xterm.onData((data) => {
|
||||
console.log(`[DEBUG] Sending terminal input for container ${containerId}: ${data}`);
|
||||
|
||||
// Base64 encode the data
|
||||
window.activePeer.write(
|
||||
JSON.stringify({
|
||||
type: 'terminalInput',
|
||||
containerId,
|
||||
data: btoa(data),
|
||||
encoding: 'base64',
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Store the terminal session
|
||||
terminalSessions[containerId] = {
|
||||
xterm,
|
||||
fitAddon,
|
||||
onDataDisposable,
|
||||
output: '',
|
||||
name: containerName,
|
||||
resizeListener: null,
|
||||
container: terminalDiv,
|
||||
};
|
||||
|
||||
// Send startTerminal command to server
|
||||
console.log(`[INFO] Starting terminal for container: ${containerId}`);
|
||||
window.activePeer.write(
|
||||
JSON.stringify({ command: 'startTerminal', args: { containerId } })
|
||||
);
|
||||
|
||||
// Switch to the requested terminal session
|
||||
switchTerminal(containerId);
|
||||
}
|
||||
|
||||
// Switch to a terminal session
|
||||
function switchTerminal(containerId) {
|
||||
const session = terminalSessions[containerId];
|
||||
if (!session) {
|
||||
console.error(`[ERROR] No terminal session found for container: ${containerId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide the current terminal if any
|
||||
if (activeContainerId && activeContainerId !== containerId) {
|
||||
const currentSession = terminalSessions[activeContainerId];
|
||||
if (currentSession) {
|
||||
// Remove resize listener for current session
|
||||
if (currentSession.resizeListener) {
|
||||
window.removeEventListener('resize', currentSession.resizeListener);
|
||||
currentSession.resizeListener = null;
|
||||
}
|
||||
// Hide current terminal's container
|
||||
currentSession.container.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Show the terminal
|
||||
session.container.style.display = 'block';
|
||||
|
||||
setTimeout(() => session.fitAddon.fit(), 10); // Ensure terminal fits properly after rendering
|
||||
|
||||
// Update modal title
|
||||
terminalTitle.dataset.containerId = containerId;
|
||||
terminalTitle.textContent = `Container Terminal: ${session.name}`;
|
||||
|
||||
// Show the terminal modal
|
||||
terminalModal.style.display = 'flex';
|
||||
activeContainerId = containerId;
|
||||
|
||||
// Remove from tray if it exists
|
||||
removeFromTray(containerId);
|
||||
|
||||
console.log(`[INFO] Switched to terminal for container: ${containerId}`);
|
||||
|
||||
// Adjust resize event listener
|
||||
if (session.resizeListener) {
|
||||
window.removeEventListener('resize', session.resizeListener);
|
||||
}
|
||||
session.resizeListener = () => session.fitAddon.fit();
|
||||
window.addEventListener('resize', session.resizeListener);
|
||||
}
|
||||
|
||||
// Append terminal output
|
||||
function appendTerminalOutput(data, containerId, encoding) {
|
||||
const session = terminalSessions[containerId];
|
||||
if (!session) {
|
||||
console.error(`[ERROR] No terminal session found for container: ${containerId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
let outputData;
|
||||
if (encoding === 'base64') {
|
||||
outputData = atob(data);
|
||||
} else {
|
||||
outputData = data;
|
||||
}
|
||||
|
||||
// Write the decoded data to the terminal
|
||||
session.xterm.write(outputData);
|
||||
}
|
||||
|
||||
// Remove terminal from tray
|
||||
function removeFromTray(containerId) {
|
||||
const trayItem = document.querySelector(`.tray-item[data-id="${containerId}"]`);
|
||||
if (trayItem) {
|
||||
trayItem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Expose functions to app.js
|
||||
export { startTerminal, appendTerminalOutput };
|
218
server/server.js
218
server/server.js
@ -1,3 +1,5 @@
|
||||
// server.js
|
||||
|
||||
import Hyperswarm from 'hyperswarm';
|
||||
import Docker from 'dockerode';
|
||||
import crypto from 'hypercore-crypto';
|
||||
@ -5,15 +7,18 @@ import crypto from 'hypercore-crypto';
|
||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
||||
const swarm = new Hyperswarm();
|
||||
const connectedPeers = new Set();
|
||||
const terminalSessions = new Map(); // Map to track terminal sessions per peer
|
||||
|
||||
// Generate a topic for the server
|
||||
const topic = crypto.randomBytes(32);
|
||||
console.log(`[INFO] Server started with topic: ${topic.toString('hex')}`);
|
||||
|
||||
// Join the swarm with the generated topic
|
||||
swarm.join(topic, { server: true, client: false });
|
||||
|
||||
// Handle incoming peer connections
|
||||
swarm.on('connection', (peer) => {
|
||||
console.log(`[INFO] Peer connected`);
|
||||
console.log('[INFO] Peer connected');
|
||||
connectedPeers.add(peer);
|
||||
|
||||
peer.on('data', async (data) => {
|
||||
@ -24,11 +29,24 @@ swarm.on('connection', (peer) => {
|
||||
|
||||
switch (parsedData.command) {
|
||||
case 'listContainers':
|
||||
console.log(`[INFO] Handling 'listContainers' command`);
|
||||
console.log('[INFO] Handling \'listContainers\' command');
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
response = { type: 'containers', data: containers };
|
||||
break;
|
||||
|
||||
case 'inspectContainer':
|
||||
console.log(`[INFO] Handling 'inspectContainer' command for container: ${parsedData.args.id}`);
|
||||
const container = docker.getContainer(parsedData.args.id);
|
||||
const config = await container.inspect();
|
||||
response = { type: 'containerConfig', data: config };
|
||||
break;
|
||||
|
||||
case 'duplicateContainer':
|
||||
console.log('[INFO] Handling \'duplicateContainer\' command');
|
||||
const { name, config: dupConfig } = parsedData.args;
|
||||
await duplicateContainer(name, dupConfig, peer);
|
||||
return; // Response is handled within the duplicateContainer function
|
||||
|
||||
case 'startContainer':
|
||||
console.log(`[INFO] Handling 'startContainer' command for container: ${parsedData.args.id}`);
|
||||
await docker.getContainer(parsedData.args.id).start();
|
||||
@ -50,15 +68,27 @@ swarm.on('connection', (peer) => {
|
||||
case 'startTerminal':
|
||||
console.log(`[INFO] Starting terminal for container: ${parsedData.args.containerId}`);
|
||||
handleTerminal(parsedData.args.containerId, peer);
|
||||
return; // No response needed for streaming
|
||||
return; // No immediate response needed for streaming commands
|
||||
|
||||
case 'killTerminal':
|
||||
console.log(`[INFO] Handling 'killTerminal' command for container: ${parsedData.args.containerId}`);
|
||||
handleKillTerminal(parsedData.args.containerId, peer);
|
||||
response = {
|
||||
success: true,
|
||||
message: `Terminal for container ${parsedData.args.containerId} killed`,
|
||||
};
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn(`[WARN] Unknown command: ${parsedData.command}`);
|
||||
response = { error: 'Unknown command' };
|
||||
}
|
||||
|
||||
// Send response if one was generated
|
||||
if (response) {
|
||||
console.log(`[DEBUG] Sending response to peer: ${JSON.stringify(response)}`);
|
||||
peer.write(JSON.stringify(response));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to handle data from peer: ${err.message}`);
|
||||
peer.write(JSON.stringify({ error: err.message }));
|
||||
@ -66,11 +96,68 @@ swarm.on('connection', (peer) => {
|
||||
});
|
||||
|
||||
peer.on('close', () => {
|
||||
console.log(`[INFO] Peer disconnected`);
|
||||
console.log('[INFO] Peer disconnected');
|
||||
connectedPeers.delete(peer);
|
||||
|
||||
// Clean up any terminal session associated with this peer
|
||||
if (terminalSessions.has(peer)) {
|
||||
const session = terminalSessions.get(peer);
|
||||
console.log(`[INFO] Cleaning up terminal session for container: ${session.containerId}`);
|
||||
session.stream.end();
|
||||
peer.removeListener('data', session.onData);
|
||||
terminalSessions.delete(peer);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Function to duplicate a container
|
||||
async function duplicateContainer(name, config, peer) {
|
||||
try {
|
||||
// Remove non-essential fields from the configuration
|
||||
const sanitizedConfig = { ...config };
|
||||
delete sanitizedConfig.Id;
|
||||
delete sanitizedConfig.State;
|
||||
delete sanitizedConfig.Created;
|
||||
delete sanitizedConfig.NetworkSettings;
|
||||
delete sanitizedConfig.Mounts;
|
||||
delete sanitizedConfig.Path;
|
||||
delete sanitizedConfig.Args;
|
||||
delete sanitizedConfig.Image;
|
||||
|
||||
// Ensure the container has a unique name
|
||||
const newName = name;
|
||||
const existingContainers = await docker.listContainers({ all: true });
|
||||
const nameExists = existingContainers.some(c => c.Names.includes(`/${newName}`));
|
||||
|
||||
if (nameExists) {
|
||||
peer.write(JSON.stringify({ error: `Container name '${newName}' already exists.` }));
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a new container with the provided configuration
|
||||
const newContainer = await docker.createContainer({
|
||||
...sanitizedConfig.Config,
|
||||
name: newName,
|
||||
});
|
||||
|
||||
// Start the new container
|
||||
await newContainer.start();
|
||||
|
||||
// Send success response
|
||||
peer.write(JSON.stringify({ success: true, message: `Container '${newName}' duplicated and started successfully.` }));
|
||||
|
||||
// List containers again to update the client
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
const update = { type: 'containers', data: containers };
|
||||
for (const connectedPeer of connectedPeers) {
|
||||
connectedPeer.write(JSON.stringify(update));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to duplicate container: ${err.message}`);
|
||||
peer.write(JSON.stringify({ error: `Failed to duplicate container: ${err.message}` }));
|
||||
}
|
||||
}
|
||||
|
||||
// Stream Docker events to all peers
|
||||
docker.getEvents({}, (err, stream) => {
|
||||
if (err) {
|
||||
@ -81,9 +168,10 @@ docker.getEvents({}, (err, stream) => {
|
||||
stream.on('data', async (chunk) => {
|
||||
try {
|
||||
const event = JSON.parse(chunk.toString());
|
||||
if (event.status === "undefined") return
|
||||
console.log(`[INFO] Docker event received: ${event.status} - ${event.id}`);
|
||||
|
||||
// Get updated container list and broadcast
|
||||
// Get updated container list and broadcast it to all connected peers
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
const update = { type: 'containers', data: containers };
|
||||
|
||||
@ -96,12 +184,70 @@ docker.getEvents({}, (err, stream) => {
|
||||
});
|
||||
});
|
||||
|
||||
// Collect and stream container stats
|
||||
docker.listContainers({ all: true }, (err, containers) => {
|
||||
if (err) {
|
||||
console.error(`[ERROR] Failed to list containers for stats: ${err.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
containers.forEach((containerInfo) => {
|
||||
const container = docker.getContainer(containerInfo.Id);
|
||||
container.stats({ stream: true }, (err, stream) => {
|
||||
if (err) {
|
||||
console.error(`[ERROR] Failed to get stats for container ${containerInfo.Id}: ${err.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
stream.on('data', (data) => {
|
||||
try {
|
||||
const stats = JSON.parse(data.toString());
|
||||
const cpuUsage = calculateCPUPercent(stats);
|
||||
const memoryUsage = stats.memory_stats.usage;
|
||||
const networks = stats.networks;
|
||||
const ipAddress = networks ? Object.values(networks)[0].IPAddress : '-';
|
||||
|
||||
const statsData = {
|
||||
id: containerInfo.Id,
|
||||
cpu: cpuUsage,
|
||||
memory: memoryUsage,
|
||||
ip: ipAddress,
|
||||
};
|
||||
|
||||
// Broadcast stats to all connected peers
|
||||
for (const peer of connectedPeers) {
|
||||
peer.write(JSON.stringify({ type: 'stats', data: statsData }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to parse stats for container ${containerInfo.Id}: ${err.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
stream.on('error', (err) => {
|
||||
console.error(`[ERROR] Stats stream error for container ${containerInfo.Id}: ${err.message}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Function to calculate CPU usage percentage
|
||||
function calculateCPUPercent(stats) {
|
||||
const cpuDelta = stats.cpu_stats.cpu_usage.total_usage - stats.precpu_stats.cpu_usage.total_usage;
|
||||
const systemDelta = stats.cpu_stats.system_cpu_usage - stats.precpu_stats.system_cpu_usage;
|
||||
const cpuCount = stats.cpu_stats.online_cpus || stats.cpu_stats.cpu_usage.percpu_usage.length;
|
||||
if (systemDelta > 0.0 && cpuDelta > 0.0) {
|
||||
return (cpuDelta / systemDelta) * cpuCount * 100.0;
|
||||
}
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
// Function to handle terminal sessions
|
||||
async function handleTerminal(containerId, peer) {
|
||||
const container = docker.getContainer(containerId);
|
||||
|
||||
try {
|
||||
const exec = await container.exec({
|
||||
Cmd: ['/bin/sh'],
|
||||
Cmd: ['/bin/bash'],
|
||||
AttachStdin: true,
|
||||
AttachStdout: true,
|
||||
AttachStderr: true,
|
||||
@ -112,26 +258,43 @@ async function handleTerminal(containerId, peer) {
|
||||
|
||||
console.log(`[INFO] Terminal session started for container: ${containerId}`);
|
||||
|
||||
stream.on('data', (chunk) => {
|
||||
console.log(`[DEBUG] Terminal output: ${chunk.toString()}`);
|
||||
peer.write(JSON.stringify({ type: 'terminalOutput', containerId, data: chunk.toString() }));
|
||||
});
|
||||
|
||||
peer.on('data', (input) => {
|
||||
const onData = (input) => {
|
||||
try {
|
||||
const parsed = JSON.parse(input.toString());
|
||||
if (parsed.type === 'terminalInput' && parsed.data) {
|
||||
console.log(`[DEBUG] Terminal input: ${parsed.data}`);
|
||||
stream.write(parsed.data);
|
||||
let inputData;
|
||||
if (parsed.encoding === 'base64') {
|
||||
inputData = Buffer.from(parsed.data, 'base64');
|
||||
} else {
|
||||
inputData = Buffer.from(parsed.data);
|
||||
}
|
||||
stream.write(inputData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to parse terminal input: ${err.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
peer.on('data', onData);
|
||||
|
||||
// Store the session along with the onData listener
|
||||
terminalSessions.set(peer, { containerId, exec, stream, onData });
|
||||
|
||||
stream.on('data', (chunk) => {
|
||||
const dataBase64 = chunk.toString('base64');
|
||||
peer.write(JSON.stringify({
|
||||
type: 'terminalOutput',
|
||||
containerId,
|
||||
data: dataBase64,
|
||||
encoding: 'base64',
|
||||
}));
|
||||
});
|
||||
|
||||
peer.on('close', () => {
|
||||
console.log(`[INFO] Peer disconnected, ending terminal session for container: ${containerId}`);
|
||||
stream.end();
|
||||
terminalSessions.delete(peer);
|
||||
peer.removeListener('data', onData);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to start terminal for container ${containerId}: ${err.message}`);
|
||||
@ -139,8 +302,33 @@ async function handleTerminal(containerId, peer) {
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle killing terminal sessions
|
||||
function handleKillTerminal(containerId, peer) {
|
||||
const session = terminalSessions.get(peer);
|
||||
|
||||
if (session && session.containerId === containerId) {
|
||||
console.log(`[INFO] Killing terminal session for container: ${containerId}`);
|
||||
|
||||
// Close the stream and exec session
|
||||
session.stream.end();
|
||||
terminalSessions.delete(peer);
|
||||
|
||||
// Remove the specific 'data' event listener for terminal input
|
||||
peer.removeListener('data', session.onData);
|
||||
|
||||
console.log(`[INFO] Terminal session for container ${containerId} terminated`);
|
||||
} else {
|
||||
console.warn(`[WARN] No terminal session found for container: ${containerId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to duplicate a container (already defined above)
|
||||
|
||||
// Stream Docker events to all peers (already defined above)
|
||||
|
||||
// Handle process termination
|
||||
process.on('SIGINT', () => {
|
||||
console.log(`[INFO] Server shutting down`);
|
||||
console.log('[INFO] Server shutting down');
|
||||
swarm.destroy();
|
||||
process.exit();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user