feat: cloud backup destinations + long-term resource history
Cloud backups (Dropbox / WebDAV / SFTP):
- backup-manager.js: save + load handlers per provider, credential
resolution via credentialManager, destination probe.
- routes/backups.js: /credentials/{provider} (masked GET, POST, DELETE),
/test-destination, scheduling endpoints.
- status/js/backup-restore.js: destination picker, provider-specific
credential forms, test button wired to backend probe.
- npm deps already present (dropbox 10.34.0, webdav 5.7.1,
ssh2-sftp-client 11.0.0).
Resource history:
- resource-monitor.js: three-tier rollup storage — raw 10s samples
(7-day retention), hourly rollups (30-day), daily rollups
(365-day). getHistoryByRange() auto-selects the appropriate tier.
- routes/monitoring.js: /monitoring/history/:containerId now supports
startTime/endTime range mode (legacy ?hours=N still works).
- status/js/resource-monitor.js + dashboard.css: "History" tab with
range buttons (1h/24h/7d/30d/1y), SVG sparklines for
CPU / memory / network. Renderer handles raw and rolled-up shapes.
status/dist/features.js rebuilt from source via build.js.
Lifted out of wip/cloud-backups-and-history; the half-finished
app-deps feature from that branch (frontend calls /api/v1/apps/
check-dependencies but the endpoint doesn't exist) is preserved
separately on wip/app-deps for later.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -384,6 +384,9 @@
|
||||
});
|
||||
|
||||
// === Automated Backups Tab ===
|
||||
// Holds the destination currently being edited in the form
|
||||
var currentDestination = { type: 'local' };
|
||||
|
||||
async function loadBackupSchedule() {
|
||||
if (!scheduleContainer) return;
|
||||
try {
|
||||
@@ -394,6 +397,10 @@
|
||||
var autoKey = Object.keys(cfg)[0];
|
||||
var auto = autoKey ? cfg[autoKey] : null;
|
||||
|
||||
// Pull existing destination (first one) — fall back to local
|
||||
var existingDest = (auto?.destinations && auto.destinations[0]) || { type: 'local' };
|
||||
currentDestination = JSON.parse(JSON.stringify(existingDest));
|
||||
|
||||
var html = '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
|
||||
html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">⏰ Backup Schedule</h4>';
|
||||
html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">';
|
||||
@@ -423,20 +430,238 @@
|
||||
html += ' <button id="backup-run-now" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">▶️ Run Backup Now</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// === Destination Section ===
|
||||
html += '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
|
||||
html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">☁️ Backup Destination</h4>';
|
||||
html += '<div><label style="font-size: 0.8rem; color: var(--muted);">Where to store backups:</label>';
|
||||
html += ' <select id="backup-dest-type" style="width: 100%;">';
|
||||
html += ' <option value="local"' + (currentDestination.type === 'local' ? ' selected' : '') + '>💾 Local disk</option>';
|
||||
html += ' <option value="dropbox"' + (currentDestination.type === 'dropbox' ? ' selected' : '') + '>📦 Dropbox</option>';
|
||||
html += ' <option value="webdav"' + (currentDestination.type === 'webdav' ? ' selected' : '') + '>🌐 WebDAV (Nextcloud / ownCloud)</option>';
|
||||
html += ' <option value="sftp"' + (currentDestination.type === 'sftp' ? ' selected' : '') + '>🔐 SFTP</option>';
|
||||
html += ' </select></div>';
|
||||
html += '<div id="backup-dest-form" style="margin-top: 12px;"></div>';
|
||||
html += '<div id="backup-dest-result" style="display: none; margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem;"></div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div id="backup-schedule-result" style="display: none; margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 0.85rem;"></div>';
|
||||
scheduleContainer.innerHTML = html;
|
||||
|
||||
document.getElementById('backup-save-schedule')?.addEventListener('click', saveSchedule);
|
||||
document.getElementById('backup-run-now')?.addEventListener('click', runBackupNow);
|
||||
|
||||
var destTypeSel = document.getElementById('backup-dest-type');
|
||||
destTypeSel?.addEventListener('change', function() {
|
||||
currentDestination = { type: destTypeSel.value };
|
||||
renderDestinationForm(destTypeSel.value);
|
||||
});
|
||||
renderDestinationForm(currentDestination.type);
|
||||
} catch (e) {
|
||||
scheduleContainer.innerHTML = '<div class="panel-empty" style="color: var(--bad-fg);">Failed to load schedule: ' + escapeHtml(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Render the provider-specific form fields and load saved credentials (masked)
|
||||
async function renderDestinationForm(type) {
|
||||
var formEl = document.getElementById('backup-dest-form');
|
||||
if (!formEl) return;
|
||||
|
||||
if (type === 'local') {
|
||||
formEl.innerHTML = '<div style="font-size: 0.8rem; color: var(--muted); padding: 8px;">Backups are stored on the host filesystem. No additional configuration required.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
||||
if (type === 'dropbox') {
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Access Token:</label>';
|
||||
html += '<input type="password" id="dest-dropbox-token" placeholder="sl.B..." style="width: 100%; margin-bottom: 8px;" />';
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
|
||||
html += '<input type="text" id="dest-dropbox-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
|
||||
html += '<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 8px;">Generate a token at <a href="https://www.dropbox.com/developers/apps" target="_blank" style="color: var(--accent);">Dropbox App Console</a> with files.content.write + files.content.read scopes.</div>';
|
||||
} else if (type === 'webdav') {
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Server URL:</label>';
|
||||
html += '<input type="text" id="dest-webdav-url" placeholder="https://cloud.example.com/remote.php/dav/files/username" style="width: 100%; margin-bottom: 8px;" />';
|
||||
html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;">';
|
||||
html += ' <div><label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
|
||||
html += ' <input type="text" id="dest-webdav-username" style="width: 100%;" /></div>';
|
||||
html += ' <div><label style="font-size: 0.8rem; color: var(--muted);">Password / App password:</label>';
|
||||
html += ' <input type="password" id="dest-webdav-password" style="width: 100%;" /></div>';
|
||||
html += '</div>';
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
|
||||
html += '<input type="text" id="dest-webdav-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
|
||||
} else if (type === 'sftp') {
|
||||
html += '<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 8px;">';
|
||||
html += ' <div><label style="font-size: 0.8rem; color: var(--muted);">Host:</label>';
|
||||
html += ' <input type="text" id="dest-sftp-host" placeholder="backup.example.com" style="width: 100%;" /></div>';
|
||||
html += ' <div><label style="font-size: 0.8rem; color: var(--muted);">Port:</label>';
|
||||
html += ' <input type="number" id="dest-sftp-port" value="22" style="width: 100%;" /></div>';
|
||||
html += '</div>';
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
|
||||
html += '<input type="text" id="dest-sftp-username" style="width: 100%; margin-bottom: 8px;" />';
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Auth method:</label>';
|
||||
html += '<select id="dest-sftp-authtype" style="width: 100%; margin-bottom: 8px;">';
|
||||
html += ' <option value="password">Password</option>';
|
||||
html += ' <option value="key">Private key</option>';
|
||||
html += '</select>';
|
||||
html += '<div id="dest-sftp-password-row"><label style="font-size: 0.8rem; color: var(--muted);">Password:</label>';
|
||||
html += ' <input type="password" id="dest-sftp-password" style="width: 100%; margin-bottom: 8px;" /></div>';
|
||||
html += '<div id="dest-sftp-key-row" style="display: none;"><label style="font-size: 0.8rem; color: var(--muted);">Private key (PEM):</label>';
|
||||
html += ' <textarea id="dest-sftp-privatekey" rows="4" style="width: 100%; font-family: monospace; font-size: 0.75rem; margin-bottom: 8px;" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea></div>';
|
||||
html += '<label style="font-size: 0.8rem; color: var(--muted);">Remote path:</label>';
|
||||
html += '<input type="text" id="dest-sftp-path" placeholder="/home/user/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/home/user/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
|
||||
}
|
||||
|
||||
html += '<div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">';
|
||||
html += ' <button id="dest-save-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;">💾 Save Credentials</button>';
|
||||
html += ' <button id="dest-test-conn" style="padding: 6px 12px; font-size: 0.8rem; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; cursor: pointer;">🔌 Test Connection</button>';
|
||||
html += ' <button id="dest-clear-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; color: var(--bad-fg);">🗑️ Clear</button>';
|
||||
html += '</div>';
|
||||
|
||||
formEl.innerHTML = html;
|
||||
|
||||
// SFTP auth type toggle
|
||||
if (type === 'sftp') {
|
||||
var authSel = document.getElementById('dest-sftp-authtype');
|
||||
var pwRow = document.getElementById('dest-sftp-password-row');
|
||||
var keyRow = document.getElementById('dest-sftp-key-row');
|
||||
authSel?.addEventListener('change', function() {
|
||||
if (authSel.value === 'key') { pwRow.style.display = 'none'; keyRow.style.display = ''; }
|
||||
else { pwRow.style.display = ''; keyRow.style.display = 'none'; }
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('dest-save-creds')?.addEventListener('click', function() { saveCredentials(type); });
|
||||
document.getElementById('dest-test-conn')?.addEventListener('click', function() { testDestination(type); });
|
||||
document.getElementById('dest-clear-creds')?.addEventListener('click', function() { clearCredentials(type); });
|
||||
|
||||
// Pull existing (masked) credentials
|
||||
await loadCredentials(type);
|
||||
}
|
||||
|
||||
function destResult(msg, ok) {
|
||||
var el = document.getElementById('backup-dest-result');
|
||||
if (!el) return;
|
||||
el.innerHTML = msg;
|
||||
el.style.display = 'block';
|
||||
el.style.background = ok ? 'color-mix(in srgb, var(--ok-fg) 15%, transparent)' : 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
el.style.border = ok ? '1px solid var(--ok-fg)' : '1px solid var(--bad-fg)';
|
||||
}
|
||||
|
||||
async function loadCredentials(provider) {
|
||||
try {
|
||||
var res = await fetch('/api/v1/backups/credentials/' + provider);
|
||||
var data = await res.json();
|
||||
if (!data.success || !data.credentials) return;
|
||||
var c = data.credentials;
|
||||
if (provider === 'dropbox') {
|
||||
var t = document.getElementById('dest-dropbox-token'); if (t && c.token) t.value = c.token;
|
||||
} else if (provider === 'webdav') {
|
||||
var u = document.getElementById('dest-webdav-url'); if (u && c.url) u.value = c.url;
|
||||
var n = document.getElementById('dest-webdav-username'); if (n && c.username) n.value = c.username;
|
||||
var p = document.getElementById('dest-webdav-password'); if (p && c.password) p.value = c.password;
|
||||
} else if (provider === 'sftp') {
|
||||
var h = document.getElementById('dest-sftp-host'); if (h && c.host) h.value = c.host;
|
||||
var po = document.getElementById('dest-sftp-port'); if (po && c.port) po.value = c.port;
|
||||
var un = document.getElementById('dest-sftp-username'); if (un && c.username) un.value = c.username;
|
||||
var pw = document.getElementById('dest-sftp-password'); if (pw && c.password) pw.value = c.password;
|
||||
var pk = document.getElementById('dest-sftp-privatekey'); if (pk && c.privateKey) pk.value = c.privateKey;
|
||||
if (c.privateKey) {
|
||||
var sel = document.getElementById('dest-sftp-authtype');
|
||||
if (sel) { sel.value = 'key'; sel.dispatchEvent(new Event('change')); }
|
||||
}
|
||||
}
|
||||
} catch (e) { /* no creds yet — silent */ }
|
||||
}
|
||||
|
||||
function collectCredentials(provider) {
|
||||
if (provider === 'dropbox') {
|
||||
return { token: document.getElementById('dest-dropbox-token')?.value };
|
||||
}
|
||||
if (provider === 'webdav') {
|
||||
return {
|
||||
url: document.getElementById('dest-webdav-url')?.value,
|
||||
username: document.getElementById('dest-webdav-username')?.value,
|
||||
password: document.getElementById('dest-webdav-password')?.value
|
||||
};
|
||||
}
|
||||
if (provider === 'sftp') {
|
||||
var auth = document.getElementById('dest-sftp-authtype')?.value;
|
||||
var creds = {
|
||||
host: document.getElementById('dest-sftp-host')?.value,
|
||||
port: parseInt(document.getElementById('dest-sftp-port')?.value) || 22,
|
||||
username: document.getElementById('dest-sftp-username')?.value
|
||||
};
|
||||
if (auth === 'key') creds.privateKey = document.getElementById('dest-sftp-privatekey')?.value;
|
||||
else creds.password = document.getElementById('dest-sftp-password')?.value;
|
||||
return creds;
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
async function saveCredentials(provider) {
|
||||
try {
|
||||
var creds = collectCredentials(provider);
|
||||
var res = await secureFetch('/api/v1/backups/credentials/' + provider, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(creds)
|
||||
});
|
||||
var data = await res.json();
|
||||
destResult(data.success ? '✅ Credentials saved' : '⚠️ ' + escapeHtml(data.error || 'Failed'), data.success);
|
||||
} catch (e) {
|
||||
destResult('❌ ' + escapeHtml(e.message), false);
|
||||
}
|
||||
}
|
||||
|
||||
async function clearCredentials(provider) {
|
||||
if (!confirm('Delete saved ' + provider + ' credentials?')) return;
|
||||
try {
|
||||
var res = await secureFetch('/api/v1/backups/credentials/' + provider, { method: 'DELETE' });
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
destResult('✅ Credentials cleared', true);
|
||||
renderDestinationForm(provider);
|
||||
} else {
|
||||
destResult('⚠️ ' + escapeHtml(data.error || 'Failed'), false);
|
||||
}
|
||||
} catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
|
||||
}
|
||||
|
||||
function buildDestination(type) {
|
||||
var dest = { type: type };
|
||||
if (type === 'local') return dest;
|
||||
if (type === 'dropbox') dest.path = document.getElementById('dest-dropbox-path')?.value || '/dashcaddy-backups';
|
||||
else if (type === 'webdav') dest.path = document.getElementById('dest-webdav-path')?.value || '/dashcaddy-backups';
|
||||
else if (type === 'sftp') dest.path = document.getElementById('dest-sftp-path')?.value || '/dashcaddy-backups';
|
||||
return dest;
|
||||
}
|
||||
|
||||
async function testDestination(type) {
|
||||
destResult('<span class="brand-spinner"></span> Testing connection...', true);
|
||||
try {
|
||||
var dest = buildDestination(type);
|
||||
var res = await secureFetch('/api/v1/backups/test-destination', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(dest)
|
||||
});
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
var ms = data.elapsedMs ? ' (' + data.elapsedMs + 'ms)' : '';
|
||||
destResult('✅ Connection OK' + ms + ' — write/read/delete probe succeeded', true);
|
||||
} else {
|
||||
destResult('❌ ' + escapeHtml(data.error || 'Connection failed'), false);
|
||||
}
|
||||
} catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
|
||||
}
|
||||
|
||||
async function saveSchedule() {
|
||||
var schedule = document.getElementById('backup-schedule-select')?.value;
|
||||
var retention = parseInt(document.getElementById('backup-retention-select')?.value) || 5;
|
||||
var encrypt = document.getElementById('backup-encrypt-toggle')?.checked ?? true;
|
||||
var destType = document.getElementById('backup-dest-type')?.value || 'local';
|
||||
var resultEl = document.getElementById('backup-schedule-result');
|
||||
try {
|
||||
var res = await secureFetch('/api/v1/backups/config', {
|
||||
@@ -451,7 +676,7 @@
|
||||
encrypt: encrypt,
|
||||
verify: true,
|
||||
retention: { keep: retention },
|
||||
destinations: [{ type: 'local' }]
|
||||
destinations: [buildDestination(destType)]
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -477,12 +702,13 @@
|
||||
async function runBackupNow() {
|
||||
var btn = document.getElementById('backup-run-now');
|
||||
var resultEl = document.getElementById('backup-schedule-result');
|
||||
var destType = document.getElementById('backup-dest-type')?.value || 'local';
|
||||
if (btn) { btn.disabled = true; btn.innerHTML = '<span class="brand-spinner"></span> Running...'; }
|
||||
try {
|
||||
var res = await secureFetch('/api/v1/backups/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ include: ['all'], destinations: [{ type: 'local' }] })
|
||||
body: JSON.stringify({ include: ['all'], destinations: [buildDestination(destType)] })
|
||||
});
|
||||
var data = await res.json();
|
||||
if (resultEl) {
|
||||
|
||||
Reference in New Issue
Block a user