Initial commit: DashCaddy v1.0
Full codebase including API server (32 modules + routes), dashboard frontend, DashCA certificate distribution, installer script, and deployment skills.
This commit is contained in:
274
status/js/update-management.js
Normal file
274
status/js/update-management.js
Normal file
@@ -0,0 +1,274 @@
|
||||
// ========== UPDATE MANAGEMENT ==========
|
||||
(function() {
|
||||
// Inject modal HTML
|
||||
injectModal('updates-modal', `<div id="updates-modal" class="weather-modal">
|
||||
<div class="weather-modal-content" style="min-width: 750px; max-width: 950px;">
|
||||
<h3>⬆️ Update Management</h3>
|
||||
<p class="modal-subtitle">
|
||||
Check for container image updates, apply them, and manage rollbacks.
|
||||
</p>
|
||||
|
||||
<div class="panel-tabs">
|
||||
<button class="panel-tab active" data-panel="updates-available">Available</button>
|
||||
<button class="panel-tab" data-panel="updates-history">History</button>
|
||||
<button class="panel-tab" data-panel="updates-auto">Auto-Update</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Available Updates -->
|
||||
<div id="updates-available" class="panel-section active">
|
||||
<div style="margin-bottom: 12px;">
|
||||
<button id="updates-check-btn" class="btn-accent-solid">🔍 Check for Updates</button>
|
||||
</div>
|
||||
<div id="updates-available-container" style="max-height: 450px; overflow-y: auto;">
|
||||
<div class="panel-empty"><span class="empty-icon">📦</span> Click "Check for Updates" to scan containers.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: History -->
|
||||
<div id="updates-history" class="panel-section">
|
||||
<div id="updates-history-container" class="scroll-container">
|
||||
<div class="panel-empty"><span class="brand-spinner"></span> Loading update history...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Auto-Update -->
|
||||
<div id="updates-auto" class="panel-section">
|
||||
<div id="updates-auto-container" class="scroll-container">
|
||||
<div class="panel-empty"><span class="empty-icon">🤖</span> Loading auto-update configuration...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-bottom-bar">
|
||||
<span id="updates-last-check" class="text-auto-right"></span>
|
||||
</div>
|
||||
|
||||
<div class="weather-modal-buttons modal-footer-bar">
|
||||
<button id="updates-cancel">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const modal = document.getElementById('updates-modal');
|
||||
const openBtn = document.getElementById('updates-btn');
|
||||
const cancelBtn = document.getElementById('updates-cancel');
|
||||
const checkBtn = document.getElementById('updates-check-btn');
|
||||
const availableContainer = document.getElementById('updates-available-container');
|
||||
const historyContainer = document.getElementById('updates-history-container');
|
||||
const autoContainer = document.getElementById('updates-auto-container');
|
||||
const lastCheckSpan = document.getElementById('updates-last-check');
|
||||
|
||||
async function loadAvailable() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/updates/available');
|
||||
const data = await res.json();
|
||||
if (!data.success) throw new Error(data.error);
|
||||
|
||||
const updates = data.updates || [];
|
||||
if (updates.length === 0) {
|
||||
availableContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">✅</span>All containers are up to date.</div>';
|
||||
lastCheckSpan.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">';
|
||||
html += '<tr style="border-bottom: 1px solid var(--border); color: var(--muted);"><th style="padding: 8px; text-align: left;">Container</th><th style="padding: 8px; text-align: left;">Image</th><th style="padding: 8px; text-align: left;">Current</th><th style="padding: 8px; text-align: left;">Latest</th><th style="padding: 8px; text-align: right;">Actions</th></tr>';
|
||||
for (const u of updates) {
|
||||
html += `<tr style="border-bottom: 1px solid var(--border);">`;
|
||||
html += `<td style="padding: 8px; font-weight: 500;">${u.containerName}</td>`;
|
||||
html += `<td style="padding: 8px; color: var(--muted);">${u.imageName}</td>`;
|
||||
html += `<td style="padding: 8px;"><code style="font-size: 0.78rem; background: var(--bg); padding: 2px 6px; border-radius: 4px;">${u.currentDigest}</code></td>`;
|
||||
html += `<td style="padding: 8px;"><code style="font-size: 0.78rem; background: var(--ok-bg); color: var(--ok-fg); padding: 2px 6px; border-radius: 4px;">${u.latestDigest}</code></td>`;
|
||||
html += `<td style="padding: 8px; text-align: right;">`;
|
||||
html += `<button class="update-now-btn" data-id="${u.containerId}" data-name="${u.containerName}" style="padding: 4px 10px; font-size: 0.78rem; background: var(--accent); color: var(--bg); border-color: var(--accent); margin-right: 4px;">Update</button>`;
|
||||
html += `<button class="rollback-btn" data-id="${u.containerId}" data-name="${u.containerName}" style="padding: 4px 10px; font-size: 0.78rem;">Rollback</button>`;
|
||||
html += '</td></tr>';
|
||||
}
|
||||
html += '</table>';
|
||||
availableContainer.innerHTML = html;
|
||||
lastCheckSpan.textContent = updates.length + ' update(s) available';
|
||||
|
||||
// Wire update buttons
|
||||
availableContainer.querySelectorAll('.update-now-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const id = btn.dataset.id;
|
||||
const name = btn.dataset.name;
|
||||
if (!confirm(`Update "${name}" to the latest version? The container will restart.`)) return;
|
||||
btn.textContent = 'Updating...';
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await secureFetch(`/api/v1/updates/update/${encodeURIComponent(id)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ autoRollback: true })
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.success) {
|
||||
btn.textContent = 'Done!';
|
||||
btn.style.background = 'var(--ok-fg)';
|
||||
setTimeout(() => loadAvailable(), 2000);
|
||||
} else {
|
||||
throw new Error(d.error || 'Update failed');
|
||||
}
|
||||
} catch (e) {
|
||||
btn.textContent = 'Failed';
|
||||
btn.style.color = 'var(--bad-fg)';
|
||||
showNotification('Update error: ' + e.message, 'error');
|
||||
setTimeout(() => { btn.textContent = 'Update'; btn.disabled = false; btn.style.color = ''; btn.style.background = ''; }, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Wire rollback buttons
|
||||
availableContainer.querySelectorAll('.rollback-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const id = btn.dataset.id;
|
||||
const name = btn.dataset.name;
|
||||
if (!confirm(`Rollback "${name}" to its previous version?`)) return;
|
||||
btn.textContent = 'Rolling back...';
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await secureFetch(`/api/v1/updates/rollback/${encodeURIComponent(id)}`, { method: 'POST' });
|
||||
const d = await r.json();
|
||||
if (d.success) {
|
||||
btn.textContent = 'Rolled back!';
|
||||
setTimeout(() => loadAvailable(), 2000);
|
||||
} else {
|
||||
throw new Error(d.error || 'Rollback failed');
|
||||
}
|
||||
} catch (e) {
|
||||
btn.textContent = 'Failed';
|
||||
showNotification('Rollback error: ' + e.message, 'error');
|
||||
setTimeout(() => { btn.textContent = 'Rollback'; btn.disabled = false; }, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
availableContainer.innerHTML = `<div class="panel-empty" style="color: var(--bad-fg);">Failed: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
checkBtn.textContent = '🔍 Checking...';
|
||||
checkBtn.disabled = true;
|
||||
try {
|
||||
const res = await secureFetch('/api/v1/updates/check', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (!data.success) throw new Error(data.error);
|
||||
checkBtn.textContent = '✅ Done!';
|
||||
await loadAvailable();
|
||||
} catch (e) {
|
||||
checkBtn.textContent = '❌ Failed';
|
||||
showNotification('Check error: ' + e.message, 'error');
|
||||
}
|
||||
setTimeout(() => { checkBtn.textContent = '🔍 Check for Updates'; checkBtn.disabled = false; }, 3000);
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
historyContainer.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading...</div>';
|
||||
const res = await fetch('/api/v1/updates/history?limit=50');
|
||||
const data = await res.json();
|
||||
const history = data.success && data.history ? data.history : [];
|
||||
if (history.length === 0) {
|
||||
historyContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">📋</span>No update history yet.</div>';
|
||||
return;
|
||||
}
|
||||
let html = '<table style="width: 100%; border-collapse: collapse; font-size: 0.82rem;">';
|
||||
html += '<tr style="border-bottom: 1px solid var(--border); color: var(--muted);"><th style="padding: 6px; text-align: left;">When</th><th style="padding: 6px; text-align: left;">Container</th><th style="padding: 6px; text-align: left;">Image</th><th style="padding: 6px; text-align: left;">Duration</th><th style="padding: 6px; text-align: left;">Status</th></tr>';
|
||||
for (const h of history) {
|
||||
const ok = h.status === 'success';
|
||||
const dur = h.duration ? (h.duration < 1000 ? h.duration + 'ms' : Math.round(h.duration / 1000) + 's') : '-';
|
||||
html += `<tr style="border-bottom: 1px solid var(--border);">`;
|
||||
html += `<td style="padding: 6px; color: var(--muted);">${timeAgo(h.timestamp)}</td>`;
|
||||
html += `<td style="padding: 6px; font-weight: 500;">${h.containerName}</td>`;
|
||||
html += `<td style="padding: 6px; color: var(--muted);">${h.imageName}</td>`;
|
||||
html += `<td style="padding: 6px;">${dur}</td>`;
|
||||
html += `<td style="padding: 6px;"><span style="color: ${ok ? 'var(--ok-fg)' : 'var(--bad-fg)'};">${ok ? '✓ success' : '✗ failed'}</span></td>`;
|
||||
html += '</tr>';
|
||||
if (!ok && h.error) {
|
||||
html += `<tr><td colspan="5" style="padding: 4px 6px 8px; font-size: 0.78rem; color: var(--bad-fg);">${h.error}</td></tr>`;
|
||||
}
|
||||
}
|
||||
html += '</table>';
|
||||
historyContainer.innerHTML = html;
|
||||
} catch (e) {
|
||||
historyContainer.innerHTML = `<div class="panel-empty" style="color: var(--bad-fg);">Failed: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAutoConfig() {
|
||||
try {
|
||||
autoContainer.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading...</div>';
|
||||
// Get running containers to show auto-update toggles
|
||||
const res = await fetch('/api/v1/stats/containers');
|
||||
const data = await res.json();
|
||||
const containers = data.success && data.stats ? data.stats : [];
|
||||
if (containers.length === 0) {
|
||||
autoContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">🤖</span>No running containers found.</div>';
|
||||
return;
|
||||
}
|
||||
let html = '<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">';
|
||||
html += '<tr style="border-bottom: 1px solid var(--border); color: var(--muted);"><th style="padding: 8px; text-align: left;">Container</th><th style="padding: 8px; text-align: left;">Schedule</th><th style="padding: 8px; text-align: left;">Auto-Rollback</th><th style="padding: 8px; text-align: right;">Actions</th></tr>';
|
||||
for (const c of containers) {
|
||||
const name = c.name || c.Names?.[0]?.replace(/^\//, '') || c.Id?.substring(0, 12);
|
||||
const cid = c.containerId || c.Id;
|
||||
html += `<tr style="border-bottom: 1px solid var(--border);" data-container-id="${cid}">`;
|
||||
html += `<td style="padding: 8px; font-weight: 500;">${name}</td>`;
|
||||
html += `<td style="padding: 8px;">
|
||||
<select class="auto-schedule" data-id="${cid}" style="padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.82rem;">
|
||||
<option value="">Disabled</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
</select></td>`;
|
||||
html += `<td style="padding: 8px;"><input type="checkbox" class="auto-rollback" data-id="${cid}" checked /></td>`;
|
||||
html += `<td style="padding: 8px; text-align: right;"><button class="save-auto-btn" data-id="${cid}" data-name="${name}" style="padding: 4px 10px; font-size: 0.78rem;">Save</button></td>`;
|
||||
html += '</tr>';
|
||||
}
|
||||
html += '</table>';
|
||||
autoContainer.innerHTML = html;
|
||||
|
||||
// Wire save buttons
|
||||
autoContainer.querySelectorAll('.save-auto-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const id = btn.dataset.id;
|
||||
const row = btn.closest('tr');
|
||||
const schedule = row.querySelector('.auto-schedule').value;
|
||||
const rollback = row.querySelector('.auto-rollback').checked;
|
||||
btn.textContent = 'Saving...';
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await secureFetch(`/api/v1/updates/auto-update/${encodeURIComponent(id)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled: !!schedule, schedule: schedule || 'weekly', autoRollback: rollback })
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.success) {
|
||||
btn.textContent = '✓ Saved';
|
||||
} else {
|
||||
throw new Error(d.error);
|
||||
}
|
||||
} catch (e) {
|
||||
btn.textContent = '✗ Error';
|
||||
showNotification('Save error: ' + e.message, 'error');
|
||||
}
|
||||
setTimeout(() => { btn.textContent = 'Save'; btn.disabled = false; }, 2000);
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
autoContainer.innerHTML = `<div class="panel-empty" style="color: var(--bad-fg);">Failed: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
checkBtn?.addEventListener('click', checkForUpdates);
|
||||
openBtn?.addEventListener('click', () => {
|
||||
modal?.classList.add('show');
|
||||
loadAvailable();
|
||||
});
|
||||
wireModal(modal, cancelBtn);
|
||||
|
||||
// Lazy-load tabs
|
||||
document.querySelector('[data-panel="updates-history"]')?.addEventListener('click', loadHistory);
|
||||
document.querySelector('[data-panel="updates-auto"]')?.addEventListener('click', loadAutoConfig);
|
||||
})();
|
||||
Reference in New Issue
Block a user