39 |
40 | ${preview.compose_files}
41 | Compose
42 |
43 |
44 | ${preview.env_files}
45 | Env Files
46 |
47 |
48 | ${preview.containers}
49 | Containers
50 |
51 |
179 |
180 |
Backup Information
181 |
Name: ${result.backup_info.name}
182 |
Created: ${new Date(result.backup_info.created).toLocaleString()}
183 |
Original Host: ${result.backup_info.host}
184 |
Containers: ${result.backup_info.container_count}
185 |
186 |
187 |
188 |
Restored Items
189 |
190 | - ${result.restored.compose_files} compose files
191 | - ${result.restored.env_files} environment files
192 | - ${result.restored.container_metadata} container settings (tags & URLs)
193 |
194 |
195 |
196 |
197 |
Next Steps
198 |
Your backup has been restored to the compose directory. You can now:
199 |
200 | - Go to the Config tab to review restored compose files
201 | - Deploy individual projects using the compose files
202 | - Or deploy everything at once using the backup compose file
203 |
204 |
205 |
206 |
207 |
210 |
213 |
214 |
|
8 | Name |
9 | Stack |
10 | Status |
11 | Uptime |
12 | Ports |
13 | Host |
14 | Actions |
15 | `;
16 |
17 | // Re-add select all functionality
18 | const selectAllCheckbox = document.getElementById('select-all');
19 | if (selectAllCheckbox) {
20 | selectAllCheckbox.addEventListener('change', (e) => {
21 | const checkboxes = document.querySelectorAll('.batch-checkbox');
22 | checkboxes.forEach(checkbox => {
23 | checkbox.checked = e.target.checked;
24 | const row = checkbox.closest('tr');
25 | if (row) {
26 | row.classList.toggle('selected', e.target.checked);
27 | }
28 | });
29 | });
30 | }
31 | }
32 | }
33 |
34 | // Also update ensureTableStructure to set table layout
35 | function ensureTableStructure() {
36 | const tableView = document.getElementById('table-view');
37 | let containerTable = document.getElementById('container-table');
38 |
39 | if (!containerTable) {
40 | console.log('Creating container table structure');
41 | containerTable = document.createElement('table');
42 | containerTable.id = 'container-table';
43 | containerTable.style.tableLayout = 'auto';
44 | //containerTable.style.width = '100%';
45 |
46 | const thead = document.createElement('thead');
47 | const headerRow = document.createElement('tr');
48 | headerRow.id = 'table-headers-row';
49 |
50 | const tbody = document.createElement('tbody');
51 | tbody.id = 'table-body';
52 |
53 | thead.appendChild(headerRow);
54 | containerTable.appendChild(thead);
55 | containerTable.appendChild(tbody);
56 | tableView.appendChild(containerTable);
57 | } else {
58 | // Ensure existing table has proper layout
59 | containerTable.style.tableLayout = 'auto';
60 | //containerTable.style.width = '100%';
61 | }
62 |
63 | // Ensure table body exists
64 | let tableBody = document.getElementById('table-body');
65 | if (!tableBody) {
66 | tableBody = document.createElement('tbody');
67 | tableBody.id = 'table-body';
68 | containerTable.appendChild(tableBody);
69 | }
70 |
71 | // Force table to be visible and properly styled
72 | containerTable.style.display = 'table';
73 | tableView.style.display = 'block';
74 |
75 | console.log('Table structure ensured with fixed layout');
76 | }
77 |
78 | // Main table rendering function
79 | function renderContainersAsTable(containers) {
80 | const tableView = document.getElementById('table-view');
81 | const tableBody = document.getElementById('table-body');
82 | const noContainers = document.getElementById('no-containers');
83 |
84 | if (!tableBody) {
85 | console.error('Table body not found! Creating...');
86 | ensureTableStructure();
87 | return;
88 | }
89 |
90 | // Clear existing rows
91 | tableBody.innerHTML = '';
92 |
93 | const group = document.getElementById('group-filter').value || document.getElementById('group-filter-mobile').value || 'none';
94 |
95 | // Set batch mode state
96 | const isBatchMode = document.getElementById('containers-list').classList.contains('batch-mode');
97 | tableView.classList.toggle('batch-mode', isBatchMode);
98 |
99 | if (!Array.isArray(containers) || !containers.length) {
100 | noContainers.style.display = 'block';
101 | const emptyRow = document.createElement('tr');
102 | emptyRow.innerHTML = 'No containers found. | ';
103 | tableBody.appendChild(emptyRow);
104 | return;
105 | }
106 |
107 | noContainers.style.display = 'none';
108 |
109 | // Update table headers for current grouping
110 | updateTableHeaders();
111 |
112 | // Render based on grouping
113 | if (group === 'stack') {
114 | renderContainersByStackAsTable(containers);
115 | } else if (group === 'host') {
116 | renderContainersByHostAsTable(containers);
117 | } else {
118 | // Render without grouping
119 | containers.forEach(container => {
120 | renderSingleContainerAsTableRow(container, tableBody);
121 | });
122 | }
123 |
124 | // Force table repaint
125 | const containerTable = document.getElementById('container-table');
126 | if (containerTable) {
127 | containerTable.style.display = 'none';
128 | containerTable.offsetHeight; // Force reflow
129 | containerTable.style.display = 'table';
130 | }
131 |
132 | console.log(`Rendered ${containers.length} containers in table view`);
133 | }
134 |
135 | // Render containers grouped by stack in table format
136 | function renderContainersByStackAsTable(containers) {
137 | const tableBody = document.getElementById('table-body');
138 | let allTags = new Set();
139 | let allStacks = new Set();
140 | let stackContainers = {};
141 |
142 | containers.forEach(container => {
143 | const stackName = window.extractStackName(container);
144 | allStacks.add(stackName);
145 | if (!stackContainers[stackName]) {
146 | stackContainers[stackName] = [];
147 | }
148 | stackContainers[stackName].push(container);
149 | if (container.tags && Array.isArray(container.tags)) {
150 | container.tags.forEach(tag => allTags.add(tag));
151 | }
152 | });
153 |
154 | // Calculate stats for each stack
155 | const stackStats = {};
156 | Object.keys(stackContainers).forEach(stackName => {
157 | const stackGroup = stackContainers[stackName];
158 | stackStats[stackName] = {
159 | total: stackGroup.length,
160 | running: stackGroup.filter(c => c.status === 'running').length,
161 | cpu: stackGroup.reduce((sum, c) => sum + (parseFloat(c.cpu_percent) || 0), 0).toFixed(1),
162 | memory: Math.round(stackGroup.reduce((sum, c) => sum + (parseFloat(c.memory_usage) || 0), 0))
163 | };
164 | });
165 |
166 | // Render each stack with its containers
167 | Object.keys(stackContainers).sort().forEach(stackName => {
168 | const stats = stackStats[stackName];
169 | const composeFile = window.findComposeFileForStack(stackContainers[stackName]);
170 |
171 | // Create stack header row
172 | const headerRow = document.createElement('tr');
173 | headerRow.className = 'stack-header-row';
174 | headerRow.innerHTML = `
175 |
176 |
177 | ${stackName}
178 |
179 |
180 | ${stats.running}/${stats.total} running
181 | CPU: ${stats.cpu}%
182 | Mem: ${stats.memory} MB
183 |
184 |
187 |
188 | |
190 | `;
191 | tableBody.appendChild(headerRow);
192 |
193 | // Render containers for this stack
194 | stackContainers[stackName].forEach(container => {
195 | renderSingleContainerAsTableRow(container, tableBody);
196 | });
197 | });
198 | }
199 |
200 | // Render containers grouped by host in table format
201 | function renderContainersByHostAsTable(containers) {
202 | const tableBody = document.getElementById('table-body');
203 | let hostGroups = {};
204 |
205 | // Group containers by host
206 | containers.forEach(container => {
207 | const host = container.host || 'local';
208 | if (!hostGroups[host]) {
209 | hostGroups[host] = [];
210 | }
211 | hostGroups[host].push(container);
212 | });
213 |
214 | // Render each host group
215 | Object.keys(hostGroups).sort().forEach(host => {
216 | const hostContainers = hostGroups[host];
217 | const hostDisplay = hostContainers[0]?.host_display || host;
218 |
219 | const stats = {
220 | total: hostContainers.length,
221 | running: hostContainers.filter(c => c.status === 'running').length,
222 | cpu: hostContainers.reduce((sum, c) => sum + (parseFloat(c.cpu_percent) || 0), 0).toFixed(1),
223 | memory: Math.round(hostContainers.reduce((sum, c) => sum + (parseFloat(c.memory_usage) || 0), 0))
224 | };
225 |
226 | // Create host header row
227 | const headerRow = document.createElement('tr');
228 | headerRow.className = 'stack-header-row';
229 | headerRow.innerHTML = `
230 |
231 |
232 | 🖥️ ${hostDisplay}
233 |
234 |
235 | ${stats.running}/${stats.total} running
236 | CPU: ${stats.cpu}%
237 | Mem: ${stats.memory} MB
238 |
239 |
242 |
243 | |
245 | `;
246 | tableBody.appendChild(headerRow);
247 |
248 | // Sort and render containers for this host
249 | hostContainers.sort((a, b) => a.name.localeCompare(b.name));
250 | hostContainers.forEach(container => {
251 | renderSingleContainerAsTableRow(container, tableBody);
252 | });
253 | });
254 | }
255 |
256 | // Render a single container as a table row
257 | function renderSingleContainerAsTableRow(container, tableBody) {
258 | const isBatchMode = document.getElementById('table-view').classList.contains('batch-mode');
259 | const row = document.createElement('tr');
260 | row.dataset.id = container.id;
261 | row.dataset.host = container.host || 'local';
262 | const uptimeDisplay = container.uptime && container.uptime.display ? container.uptime.display : 'N/A';
263 |
264 | // CRITICAL FIX: Ensure host is properly passed
265 | const containerHost = container.host || 'local';
266 | console.log(`Rendering table row for ${container.name} with host: ${containerHost}`);
267 |
268 | // Create ports HTML for table
269 | let portsHtml = '';
270 | if (container.ports && Object.keys(container.ports).length > 0) {
271 | const portsList = Object.entries(container.ports)
272 | .map(([hostPort, containerPort]) => `${hostPort}:${containerPort}`)
273 | .slice(0, 2)
274 | .join(', ');
275 |
276 | const remainingPorts = Object.keys(container.ports).length - 2;
277 | portsHtml = remainingPorts > 0 ? `${portsList} +${remainingPorts}` : portsList;
278 | } else {
279 | portsHtml = 'None';
280 | }
281 |
282 | // ADD THIS: Get health info for table
283 | const health = getContainerHealth(container);
284 |
285 | const hostDisplay = container.host_display || container.host || 'local';
286 |
287 | row.innerHTML = `
288 |
289 |
290 | |
291 |
292 | ${container.name}
293 | |
294 | ${window.extractStackName(container)} |
295 |
296 | ${container.status}
297 |
298 | |
299 |
300 | ${uptimeDisplay}
301 | |
302 | ${portsHtml} |
303 | ${hostDisplay} |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 | |
312 | `;
313 |
314 | if (isBatchMode) {
315 | const checkbox = row.querySelector('.batch-checkbox');
316 | checkbox.addEventListener('change', (e) => {
317 | row.classList.toggle('selected', e.target.checked);
318 | });
319 | }
320 |
321 | tableBody.appendChild(row);
322 | }
323 | // Render containers grouped by tag in table format (if needed)
324 | function renderContainersByTagAsTable(containers) {
325 | const tableBody = document.getElementById('table-body');
326 | let groupedByTag = {};
327 |
328 | containers.forEach(container => {
329 | const primaryTag = container.tags && container.tags.length ? container.tags[0] : 'Untagged';
330 | if (!groupedByTag[primaryTag]) {
331 | groupedByTag[primaryTag] = [];
332 | }
333 | groupedByTag[primaryTag].push(container);
334 | });
335 |
336 | Object.keys(groupedByTag).sort().forEach(tag => {
337 | const headerRow = document.createElement('tr');
338 | headerRow.className = 'stack-header-row';
339 | headerRow.innerHTML = `
340 |
341 | ${tag}
342 | |
343 | `;
344 | tableBody.appendChild(headerRow);
345 |
346 | groupedByTag[tag].forEach(container => {
347 | renderSingleContainerAsTableRow(container, tableBody);
348 | });
349 | });
350 | }
351 |
352 | // Enhanced batch selection with host awareness
353 | function toggleAllContainers() {
354 | const tableView = document.getElementById('table-view');
355 | const isTableView = tableView && tableView.classList.contains('active');
356 |
357 | if (isTableView) {
358 | const checkboxes = document.querySelectorAll('.batch-checkbox');
359 | const selectAllCheckbox = document.getElementById('select-all');
360 | const allSelected = Array.from(checkboxes).every(cb => cb.checked);
361 |
362 | checkboxes.forEach(checkbox => {
363 | checkbox.checked = !allSelected;
364 | const row = checkbox.closest('tr');
365 | if (row) {
366 | row.classList.toggle('selected', checkbox.checked);
367 | }
368 | });
369 |
370 | if (selectAllCheckbox) {
371 | selectAllCheckbox.checked = !allSelected;
372 | }
373 | } else {
374 | // Grid view
375 | const checkboxes = document.querySelectorAll('.container-select');
376 | const allSelected = Array.from(checkboxes).every(cb => cb.checked);
377 |
378 | checkboxes.forEach(checkbox => {
379 | checkbox.checked = !allSelected;
380 | checkbox.dispatchEvent(new Event('change'));
381 | });
382 | }
383 | }
384 |
385 | // Simplified sorting for table view
386 | function sortTable(key) {
387 | let direction = 'asc';
388 |
389 | // For metrics (cpu, memory, uptime), default to descending (highest first)
390 | if (key === 'cpu' || key === 'memory' || key === 'uptime') {
391 | direction = 'desc';
392 | }
393 | // For name and status, use ascending (A-Z)
394 | else {
395 | direction = 'asc';
396 | }
397 |
398 | // Update visual indicators
399 | document.querySelectorAll('#table-view th[onclick]').forEach(th => {
400 | th.classList.remove('sorted-asc', 'sorted-desc');
401 | });
402 |
403 | const currentHeader = document.querySelector(`#table-view th[onclick="sortTable('${key}')"]`);
404 | if (currentHeader) {
405 | currentHeader.classList.add(`sorted-${direction}`);
406 | }
407 |
408 | // Call refreshContainers with sort parameters
409 | refreshContainers(key, direction);
410 | }
411 | function ensureImagesTableStructure() {
412 | const imagesTableView = document.getElementById('images-table-view');
413 | if (!imagesTableView) {
414 | console.error('Images table view container not found');
415 | return;
416 | }
417 |
418 | let imagesTable = document.getElementById('images-table');
419 |
420 | if (!imagesTable) {
421 | console.log('Creating images table structure');
422 | imagesTable = document.createElement('table');
423 | imagesTable.id = 'images-table';
424 | imagesTable.className = 'images-table';
425 |
426 | const thead = document.createElement('thead');
427 | const headerRow = document.createElement('tr');
428 |
429 | // FIXED: Include Host header
430 | headerRow.innerHTML = `
431 | Name |
432 | Tags |
433 | Size |
434 | Created |
435 | Used By |
436 | Host |
437 | Actions |
438 | `;
439 |
440 | const tbody = document.createElement('tbody');
441 | tbody.id = 'images-table-body';
442 |
443 | thead.appendChild(headerRow);
444 | imagesTable.appendChild(thead);
445 | imagesTable.appendChild(tbody);
446 | imagesTableView.appendChild(imagesTable);
447 |
448 | console.log('Images table structure created with Host header');
449 | }
450 |
451 | // Ensure table is properly styled and visible
452 | imagesTable.style.width = '100%';
453 | imagesTable.style.borderCollapse = 'collapse';
454 | imagesTable.style.display = 'table';
455 |
456 | return imagesTable;
457 | }
458 |
459 | // Add this new function to handle image sorting:
460 | function sortImages(sortBy) {
461 | console.log(`Sorting images by: ${sortBy}`);
462 |
463 | // Get current images data
464 | const tableBody = document.getElementById('images-table-body');
465 | if (!tableBody) return;
466 |
467 | const rows = Array.from(tableBody.querySelectorAll('tr'));
468 |
469 | // Extract data from rows for sorting
470 | const imageData = rows.map(row => {
471 | const cells = row.querySelectorAll('td');
472 | return {
473 | element: row,
474 | name: cells[0]?.textContent || '',
475 | size: parseFloat(cells[2]?.textContent?.replace(' MB', '') || '0'),
476 | created: cells[3]?.textContent || '',
477 | host: cells[5]?.textContent?.trim() || 'local'
478 | };
479 | });
480 |
481 | // Sort the data
482 | imageData.sort((a, b) => {
483 | let valueA, valueB;
484 |
485 | switch(sortBy) {
486 | case 'name':
487 | valueA = a.name.toLowerCase();
488 | valueB = b.name.toLowerCase();
489 | return valueA.localeCompare(valueB);
490 |
491 | case 'size':
492 | return b.size - a.size; // Descending for size
493 |
494 | case 'created':
495 | valueA = a.created.toLowerCase();
496 | valueB = b.created.toLowerCase();
497 | return valueB.localeCompare(valueA); // Descending for created date
498 |
499 | case 'host':
500 | valueA = a.host.toLowerCase();
501 | valueB = b.host.toLowerCase();
502 | // Sort by host first, then by name within each host
503 | if (valueA !== valueB) {
504 | return valueA.localeCompare(valueB);
505 | }
506 | return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
507 |
508 | default:
509 | return 0;
510 | }
511 | });
512 |
513 | // Clear table body and re-append sorted rows
514 | tableBody.innerHTML = '';
515 | imageData.forEach(item => {
516 | tableBody.appendChild(item.element);
517 | });
518 |
519 | // Update visual indicators
520 | document.querySelectorAll('#images-table th[onclick]').forEach(th => {
521 | th.classList.remove('sorted-asc', 'sorted-desc');
522 | });
523 |
524 | const currentHeader = document.querySelector(`#images-table th[onclick="sortImages('${sortBy}')"]`);
525 | if (currentHeader) {
526 | // For size and created, show descending. For name and host, show ascending
527 | const isDescending = sortBy === 'size' || sortBy === 'created';
528 | currentHeader.classList.add(isDescending ? 'sorted-desc' : 'sorted-asc');
529 | }
530 | }
531 |
532 | // Initialize table view event listeners when DOM is ready
533 | document.addEventListener('DOMContentLoaded', () => {
534 | // Select all functionality
535 | const selectAllCheckbox = document.getElementById('select-all');
536 | if (selectAllCheckbox) {
537 | selectAllCheckbox.addEventListener('change', (e) => {
538 | const checkboxes = document.querySelectorAll('.batch-checkbox');
539 | checkboxes.forEach(checkbox => {
540 | checkbox.checked = e.target.checked;
541 | const row = checkbox.closest('tr');
542 | if (row) {
543 | row.classList.toggle('selected', e.target.checked);
544 | }
545 | });
546 | });
547 | }
548 |
549 | // Event listener for group filter changes to update table headers
550 | const groupFilter = document.getElementById('group-filter');
551 | const groupFilterMobile = document.getElementById('group-filter-mobile');
552 |
553 | if (groupFilter) {
554 | groupFilter.addEventListener('change', () => {
555 | setTimeout(updateTableHeaders, 100); // Small delay to ensure DOM updates
556 | });
557 | }
558 |
559 | if (groupFilterMobile) {
560 | groupFilterMobile.addEventListener('change', () => {
561 | setTimeout(updateTableHeaders, 100);
562 | });
563 | }
564 |
565 | // Also listen for view changes
566 | const toggleViewBtn = document.getElementById('toggle-view');
567 | if (toggleViewBtn) {
568 | toggleViewBtn.addEventListener('click', () => {
569 | setTimeout(updateTableHeaders, 200);
570 | });
571 | }
572 | });
573 |
574 | // Enhanced image table rendering for multi-host
575 | function renderImageTableRow(image, tableBody) {
576 | const row = document.createElement('tr');
577 | const isUsed = image.used_by && image.used_by.length > 0;
578 | const hostDisplay = image.host_display || image.host || 'local';
579 |
580 | row.innerHTML = `
581 | ${image.name} |
582 | ${image.tags.join(', ')} |
583 | ${image.size} MB |
584 | ${image.created} |
585 | ${isUsed ? image.used_by.join(', ') : 'None'} |
586 | ${hostDisplay} |
587 |
588 |
589 | |
590 | `;
591 | tableBody.appendChild(row);
592 | }
593 |
594 | // Export functions to window for global access
595 | window.ensureTableStructure = ensureTableStructure;
596 | window.updateTableHeaders = updateTableHeaders;
597 | window.renderContainersAsTable = renderContainersAsTable;
598 | window.renderImageTableRow = renderImageTableRow;
599 | window.renderContainersByTagAsTable = renderContainersByTagAsTable;
600 | window.sortTable = sortTable;
--------------------------------------------------------------------------------
/static/js/remote.js:
--------------------------------------------------------------------------------
1 | // static/js/remote.js - Fixed Composr Host Management
2 |
3 | // Load and display Docker hosts management
4 | function loadHostsManagement() {
5 | fetch('/api/hosts')
6 | .then(response => response.json())
7 | .then(data => {
8 | if (data.status === 'success') {
9 | updateHostsDisplay(data.hosts, data.current_host);
10 | loadMultiHostSystemOverview();
11 | } else {
12 | showMessage('error', 'Failed to load hosts');
13 | }
14 | })
15 | .catch(error => {
16 | console.error('Failed to load hosts:', error);
17 | showMessage('error', 'Failed to load hosts');
18 | });
19 | }
20 |
21 | // Add a new Docker host
22 | function addDockerHost() {
23 | const name = document.getElementById('new-host-name').value.trim();
24 | const url = document.getElementById('new-host-url').value.trim();
25 | const description = document.getElementById('new-host-description')?.value.trim() || '';
26 |
27 | if (!name || !url) {
28 | showMessage('error', 'Name and URL are required');
29 | return;
30 | }
31 |
32 | // Validate URL format for Docker
33 | if (!url.startsWith('tcp://')) {
34 | showMessage('error', 'URL must start with tcp:// (e.g., tcp://192.168.1.100:2375)');
35 | return;
36 | }
37 |
38 | setLoading(true, `Adding host ${name}...`);
39 |
40 | fetch('/api/hosts/add', {
41 | method: 'POST',
42 | headers: { 'Content-Type': 'application/json' },
43 | body: JSON.stringify({ name, url, description })
44 | })
45 | .then(response => response.json())
46 | .then(result => {
47 | setLoading(false);
48 | if (result.status === 'success') {
49 | showMessage('success', result.message);
50 | // Clear form
51 | document.getElementById('new-host-name').value = '';
52 | document.getElementById('new-host-url').value = '';
53 | if (document.getElementById('new-host-description')) {
54 | document.getElementById('new-host-description').value = '';
55 | }
56 | // Reload host management
57 | loadHostsManagement();
58 | } else {
59 | showMessage('error', result.message);
60 | }
61 | })
62 | .catch(error => {
63 | setLoading(false);
64 | showMessage('error', 'Failed to add Docker host');
65 | console.error('Add host error:', error);
66 | });
67 | }
68 |
69 | // Remove a Docker host
70 | function removeHost(hostName) {
71 | if (!confirm(`Remove Docker host "${hostName}"? This will disconnect from the host but won't affect the actual Docker host.`)) {
72 | return;
73 | }
74 |
75 | setLoading(true, `Removing host ${hostName}...`);
76 |
77 | fetch('/api/hosts/remove', {
78 | method: 'POST',
79 | headers: { 'Content-Type': 'application/json' },
80 | body: JSON.stringify({ name: hostName })
81 | })
82 | .then(response => response.json())
83 | .then(result => {
84 | setLoading(false);
85 | if (result.status === 'success') {
86 | showMessage('success', result.message);
87 | loadHostsManagement();
88 | // Refresh containers as the host list changed
89 | if (typeof refreshContainers === 'function') {
90 | refreshContainers();
91 | }
92 | } else {
93 | showMessage('error', result.message);
94 | }
95 | })
96 | .catch(error => {
97 | setLoading(false);
98 | showMessage('error', 'Failed to remove host');
99 | console.error('Remove host error:', error);
100 | });
101 | }
102 |
103 | // Test Docker host connection
104 | function testHost(hostName, url) {
105 | if (!url) {
106 | showMessage('error', 'Please enter a Docker URL to test');
107 | return;
108 | }
109 |
110 | setLoading(true, `Testing connection to ${hostName || 'host'}...`);
111 |
112 | fetch('/api/hosts/test', {
113 | method: 'POST',
114 | headers: { 'Content-Type': 'application/json' },
115 | body: JSON.stringify({ url })
116 | })
117 | .then(response => response.json())
118 | .then(result => {
119 | setLoading(false);
120 | if (result.status === 'success') {
121 | showMessage('success', `Connection to ${hostName || 'host'} successful`);
122 | } else {
123 | showMessage('error', `Connection failed: ${result.message}`);
124 | }
125 | })
126 | .catch(error => {
127 | setLoading(false);
128 | showMessage('error', `Failed to test connection to ${hostName || 'host'}`);
129 | console.error('Test host error:', error);
130 | });
131 | }
132 |
133 | // Switch to a different Docker host (for current context)
134 | function switchToHost(hostName) {
135 | setLoading(true, `Switching to ${hostName}...`);
136 |
137 | fetch('/api/hosts/switch', {
138 | method: 'POST',
139 | headers: { 'Content-Type': 'application/json' },
140 | body: JSON.stringify({ host: hostName })
141 | })
142 | .then(response => response.json())
143 | .then(result => {
144 | setLoading(false);
145 | if (result.status === 'success') {
146 | showMessage('success', result.message);
147 | // Reload everything for the new host context
148 | loadHostsManagement();
149 | if (typeof refreshContainers === 'function') {
150 | refreshContainers();
151 | }
152 | if (typeof loadSystemStatsMultiHost === 'function') {
153 | loadSystemStatsMultiHost();
154 | }
155 | } else {
156 | showMessage('error', result.message);
157 | }
158 | })
159 | .catch(error => {
160 | setLoading(false);
161 | showMessage('error', `Failed to switch to ${hostName}`);
162 | console.error('Switch host error:', error);
163 | });
164 | }
165 |
166 | // Update the hosts display
167 | function updateHostsDisplay(hosts, currentHost) {
168 | const container = document.getElementById('hosts-list-content');
169 | if (!container) return;
170 |
171 | container.innerHTML = '';
172 |
173 | // Group hosts by connection status
174 | const connectedHosts = [];
175 | const disconnectedHosts = [];
176 |
177 | Object.entries(hosts).forEach(([hostName, hostInfo]) => {
178 | if (hostName === 'local') return; // Skip local in the list
179 |
180 | if (hostInfo.connected) {
181 | connectedHosts.push([hostName, hostInfo]);
182 | } else {
183 | disconnectedHosts.push([hostName, hostInfo]);
184 | }
185 | });
186 |
187 | // Render connected hosts
188 | if (connectedHosts.length > 0) {
189 | const connectedSection = document.createElement('div');
190 | connectedSection.className = 'host-section';
191 | connectedSection.innerHTML = '🟢 Connected
';
192 | container.appendChild(connectedSection);
193 |
194 | connectedHosts.forEach(([hostName, hostInfo]) => {
195 | const hostDiv = createHostListItem(hostName, hostInfo, currentHost);
196 | container.appendChild(hostDiv);
197 | });
198 | }
199 |
200 | // Render disconnected hosts
201 | if (disconnectedHosts.length > 0) {
202 | const disconnectedSection = document.createElement('div');
203 | disconnectedSection.className = 'host-section';
204 | disconnectedSection.innerHTML = '🔴 Disconnected
';
205 | container.appendChild(disconnectedSection);
206 |
207 | disconnectedHosts.forEach(([hostName, hostInfo]) => {
208 | const hostDiv = createHostListItem(hostName, hostInfo, currentHost);
209 | container.appendChild(hostDiv);
210 | });
211 | }
212 |
213 | // Show message if no external hosts
214 | if (connectedHosts.length === 0 && disconnectedHosts.length === 0) {
215 | container.innerHTML = 'No external Docker hosts configured. Add a host using the form below.
';
216 | }
217 | }
218 |
219 | // Create a host list item
220 | function createHostListItem(hostName, hostInfo, currentHost) {
221 | const hostDiv = document.createElement('div');
222 | hostDiv.className = `host-item ${hostInfo.connected ? 'connected' : 'disconnected'}`;
223 |
224 | const statusIcon = hostInfo.connected ? '🟢' : '🔴';
225 |
226 | hostDiv.innerHTML = `
227 |
228 |
232 |
233 | ${hostInfo.url}
234 | ${hostInfo.connected ? `
235 | tcp
236 | Last check: ${formatLastCheck(hostInfo.last_check)}
237 | ` : `
238 | Connection failed
239 | `}
240 |
241 |
243 | ${hostInfo.connected ? `
244 | Available for deployment
245 |
246 | ` : `
247 |
248 | `}
249 |
250 |
251 | `;
252 |
253 | return hostDiv;
254 | }
255 |
256 | // Format last check timestamp
257 | function formatLastCheck(timestamp) {
258 | if (!timestamp) return 'Never';
259 | const now = Date.now() / 1000;
260 | const diff = Math.floor(now - timestamp);
261 |
262 | if (diff < 60) return `${diff}s ago`;
263 | if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
264 | if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
265 | return `${Math.floor(diff / 86400)}d ago`;
266 | }
267 |
268 | // Load multi-host system overview
269 | function loadMultiHostSystemOverview() {
270 | fetch('/api/system/overview')
271 | .then(response => response.json())
272 | .then(data => {
273 | if (data.status === 'success') {
274 | updateMultiHostStats(data.hosts, data.totals);
275 | } else {
276 | console.error('System overview error:', data.message);
277 | }
278 | })
279 | .catch(error => {
280 | console.error('Failed to load system overview:', error);
281 | });
282 | }
283 |
284 | // Update multi-host statistics display
285 | function updateMultiHostStats(hosts, totals) {
286 | const container = document.getElementById('multi-host-stats');
287 | if (!container) return;
288 |
289 | container.innerHTML = `
290 |
291 | ${totals.connected_hosts || 0}
292 | Connected Hosts
293 |
294 |
295 | ${totals.total_containers || 0}
296 | Total Containers
297 |
298 |
299 | ${totals.total_running || 0}
300 | Running Containers
301 |
302 |
303 | ${totals.total_cpu_cores || 0}
304 | Total CPU Cores
305 |
306 |
307 | ${totals.total_memory_gb || 0} GB
308 | Total Memory
309 |
310 |
311 | ${totals.total_images || 0}
312 | Total Images
313 |
314 | `;
315 | }
316 | // Load available Docker hosts for deployment
317 | function loadAvailableHosts() {
318 | fetch('/api/hosts')
319 | .then(response => response.json())
320 | .then(data => {
321 | const select = document.getElementById('deploy-host-select');
322 | if (!select) return;
323 |
324 | // Clear existing options except local
325 | select.innerHTML = '';
326 |
327 | if (data.status === 'success' && data.hosts) {
328 | Object.entries(data.hosts).forEach(([hostName, hostInfo]) => {
329 | if (hostName !== 'local' && hostInfo.connected) {
330 | const option = document.createElement('option');
331 | option.value = hostName;
332 | option.textContent = `${hostInfo.name || hostName} (${hostInfo.url})`;
333 |
334 | // Mark current host
335 | if (hostName === data.current_host) {
336 | option.textContent += ' [Current]';
337 | }
338 |
339 | select.appendChild(option);
340 | }
341 | });
342 |
343 | // Show disconnected hosts as disabled options
344 | Object.entries(data.hosts).forEach(([hostName, hostInfo]) => {
345 | if (hostName !== 'local' && !hostInfo.connected) {
346 | const option = document.createElement('option');
347 | option.value = hostName;
348 | option.textContent = `${hostInfo.name || hostName} (Disconnected)`;
349 | option.disabled = true;
350 | option.style.color = 'var(--text-disabled)';
351 | select.appendChild(option);
352 | }
353 | });
354 | }
355 | })
356 | .catch(error => {
357 | console.error('Failed to load hosts:', error);
358 | showMessage('error', 'Failed to load available hosts');
359 | });
360 | }
361 | // Legacy compatibility functions - keeping these for compatibility with other parts of the app
362 | function loadDockerHosts() {
363 | fetch('/api/docker/hosts')
364 | .then(response => response.json())
365 | .then(data => {
366 | const instanceSelector = document.getElementById('composr-instance-selector');
367 | if (instanceSelector) {
368 | instanceSelector.innerHTML = '';
369 |
370 | Object.keys(data.hosts || {}).forEach(host => {
371 | if (host !== 'local') {
372 | const hostInfo = data.hosts[host];
373 | const option = document.createElement('option');
374 | option.value = hostInfo.url || '';
375 | option.textContent = host;
376 | instanceSelector.appendChild(option);
377 | }
378 | });
379 | }
380 | })
381 | .catch(error => {
382 | console.error('Failed to load hosts:', error);
383 | });
384 | }
385 |
386 | // Load and display hosts list (legacy compatibility)
387 | function loadHostsList() {
388 | loadHostsManagement();
389 | }
390 |
391 |
392 |
393 | // Analyze volume mappings
394 | function analyzeVolumes(composeData) {
395 | const volumeWarning = document.getElementById('volume-warning');
396 | const volumePathsList = document.getElementById('volume-paths-list');
397 |
398 | if (!volumeWarning || !volumePathsList || !composeData.services) {
399 | return;
400 | }
401 |
402 | const hostPaths = new Set();
403 |
404 | // Check each service for volume mappings
405 | Object.values(composeData.services).forEach(service => {
406 | if (service.volumes && Array.isArray(service.volumes)) {
407 | service.volumes.forEach(volume => {
408 | if (typeof volume === 'string' && volume.includes(':')) {
409 | const hostPath = volume.split(':')[0];
410 |
411 | // Only warn about absolute host paths (not named volumes or relative paths)
412 | if (hostPath.startsWith('/') || hostPath.match(/^[A-Za-z]:\//)) {
413 | hostPaths.add(hostPath);
414 | }
415 | }
416 | });
417 | }
418 | });
419 |
420 | if (hostPaths.size > 0) {
421 | volumePathsList.innerHTML = Array.from(hostPaths)
422 | .map(path => `${path}`)
423 | .join('');
424 | volumeWarning.style.display = 'block';
425 | } else {
426 | volumeWarning.style.display = 'none';
427 | }
428 | }
429 |
430 | // Analyze network requirements
431 | function analyzeNetworks(composeData) {
432 | const networkWarning = document.getElementById('network-warning');
433 | const networkList = document.getElementById('network-list');
434 |
435 | if (!networkWarning || !networkList) {
436 | return;
437 | }
438 |
439 | const externalNetworks = new Set();
440 |
441 | // Check for external networks
442 | if (composeData.networks) {
443 | Object.entries(composeData.networks).forEach(([networkName, networkConfig]) => {
444 | if (networkConfig && networkConfig.external) {
445 | externalNetworks.add(networkName);
446 | }
447 | });
448 | }
449 |
450 | // Check services for network references
451 | if (composeData.services) {
452 | Object.values(composeData.services).forEach(service => {
453 | if (service.networks && Array.isArray(service.networks)) {
454 | service.networks.forEach(network => {
455 | if (typeof network === 'string' && !['default', 'bridge', 'host', 'none'].includes(network)) {
456 | // This might be an external network
457 | externalNetworks.add(network);
458 | }
459 | });
460 | }
461 | });
462 | }
463 |
464 | if (externalNetworks.size > 0) {
465 | networkList.innerHTML = Array.from(externalNetworks)
466 | .map(network => `${network}`)
467 | .join('');
468 | networkWarning.style.display = 'block';
469 | } else {
470 | networkWarning.style.display = 'none';
471 | }
472 | }
473 |
474 | // Hide all warning boxes
475 | function hideAllWarnings() {
476 | const volumeWarning = document.getElementById('volume-warning');
477 | const networkWarning = document.getElementById('network-warning');
478 |
479 | if (volumeWarning) volumeWarning.style.display = 'none';
480 | if (networkWarning) networkWarning.style.display = 'none';
481 | }
482 |
483 | // Show deployment log in modal
484 | function showDeploymentLog(action, host, output) {
485 | const modal = document.createElement('div');
486 | modal.className = 'logs-modal deployment-log-modal';
487 | modal.innerHTML = `
488 |
492 |
495 | `;
496 | document.body.appendChild(modal);
497 | }
498 |
499 | // Validate compose file YAML syntax
500 | function validateComposeFile() {
501 | const content = window.getCodeMirrorContent ?
502 | window.getCodeMirrorContent('compose-editor') :
503 | document.getElementById('compose-editor').value;
504 |
505 | if (!content.trim()) {
506 | showMessage('warning', 'Compose file is empty');
507 | return;
508 | }
509 |
510 | try {
511 | const parsed = jsyaml.load(content);
512 |
513 | // Basic validation
514 | if (!parsed) {
515 | throw new Error('Empty YAML document');
516 | }
517 |
518 | if (!parsed.services) {
519 | throw new Error('No services defined in compose file');
520 | }
521 |
522 | if (Object.keys(parsed.services).length === 0) {
523 | throw new Error('Services section is empty');
524 | }
525 |
526 | showMessage('success', `✅ Valid compose file with ${Object.keys(parsed.services).length} services`);
527 |
528 | } catch (error) {
529 | showMessage('error', `❌ Invalid YAML: ${error.message}`);
530 | }
531 | }
532 |
533 | // Show compose file preview
534 | function showComposePreview() {
535 | const content = window.getCodeMirrorContent ?
536 | window.getCodeMirrorContent('compose-editor') :
537 | document.getElementById('compose-editor').value;
538 |
539 | if (!content.trim()) {
540 | showMessage('warning', 'Compose file is empty');
541 | return;
542 | }
543 |
544 | try {
545 | const parsed = jsyaml.load(content);
546 | const serviceCount = parsed.services ? Object.keys(parsed.services).length : 0;
547 | const networkCount = parsed.networks ? Object.keys(parsed.networks).length : 0;
548 | const volumeCount = parsed.volumes ? Object.keys(parsed.volumes).length : 0;
549 |
550 | const modal = document.createElement('div');
551 | modal.className = 'logs-modal';
552 | modal.innerHTML = `
553 |
557 |
558 |
559 |
Summary
560 |
561 | 📦 ${serviceCount} Services
562 | 🌐 ${networkCount} Networks
563 | 💾 ${volumeCount} Volumes
564 |
565 |
566 | ${serviceCount > 0 ? `
567 |
Services:
568 |
569 | ${Object.entries(parsed.services).map(([name, service]) =>
570 | `- ${name} - ${service.image || 'No image specified'}
`
571 | ).join('')}
572 |
573 | ` : ''}
574 |
575 |
276 |
336 |
337 |
338 |
342 |
346 |
350 |
354 |
358 |
359 |
360 |
361 |
364 |
365 |
366 |
367 |
368 |
369 |
370 |
373 |
374 |
377 |
378 |
383 |
384 |
389 |
390 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
No containers found.
422 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
🖥️ Docker Host Management
451 |
452 |
453 |
454 |
455 |
456 |
Connected Hosts
457 |
458 |
459 |
460 |
461 |
462 |
463 |
482 |
483 |
484 |
485 |
🔗 Docker Host Setup
486 |
487 |
Enable Docker Remote API:
488 |
489 |
Method 1: Docker Daemon Configuration
490 |
# Edit /etc/docker/daemon.json
491 | {
492 | "hosts": ["unix:///var/run/docker.sock", "tcp://0.0.0.0:2375"]
493 | }
494 |
495 | # Restart Docker
496 | sudo systemctl restart docker
497 |
498 |
499 |
Method 2: Docker Compose Override
500 |
# Add to docker-compose.yml
501 | services:
502 | composr:
503 | environment:
504 | - DOCKER_HOSTS=local=unix:///var/run/docker.sock,prod=tcp://192.168.1.100:2375
505 |
506 |
507 |
⚠️ Security Warning
508 |
Only enable the Docker remote API on trusted networks. Consider using TLS certificates for production environments.
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
683 |
684 |
685 |
686 |
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
704 |
707 |
708 |
709 |
710 |
711 | | Image Name |
712 | Tags |
713 | Size |
714 | Created |
715 | Used By |
716 | Actions |
717 |
718 |
719 |
720 |
721 |
722 |
723 |
724 |
725 |
726 |
727 |
728 |
729 |
📦 Create Backup
730 |
731 |
736 |
737 |
763 |
764 |
765 |
766 |
767 |
📂 Restore Backup
768 |
769 |
785 |
786 |
787 |
Restores: Compose files, .env files, container tags & URLs
788 |
Note: Volume data not included - backup separately
789 |
790 |
791 |
792 |
793 |
794 |
795 |
796 |
Loading history...
797 |
798 |
799 |
800 |
801 |
802 |
803 |
804 |
805 |
806 |
807 |
808 |
809 |
810 |
811 |
--------------------------------------------------------------------------------
278 |