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) {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<div class="panel-tabs">
|
||||
<button class="panel-tab active" data-panel="stats-live">Live Stats</button>
|
||||
<button class="panel-tab" data-panel="stats-aggregated">24h Summary</button>
|
||||
<button class="panel-tab" data-panel="stats-history">History</button>
|
||||
<button class="panel-tab" data-panel="stats-alerts">Alerts</button>
|
||||
</div>
|
||||
|
||||
@@ -34,6 +35,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Long-term History -->
|
||||
<div id="stats-history" class="panel-section">
|
||||
<div style="display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;">
|
||||
<label style="font-size: 0.85rem; color: var(--muted);">Container:</label>
|
||||
<select id="stats-history-container" style="padding: 4px 8px; background: var(--card-base); border: 1px solid var(--border); color: var(--fg); border-radius: 4px; font-size: 0.85rem; flex: 1; min-width: 180px;"></select>
|
||||
<div id="stats-history-range-buttons" style="display: flex; gap: 4px;">
|
||||
<button class="stats-range-btn active" data-range="1h">1h</button>
|
||||
<button class="stats-range-btn" data-range="24h">24h</button>
|
||||
<button class="stats-range-btn" data-range="7d">7d</button>
|
||||
<button class="stats-range-btn" data-range="30d">30d</button>
|
||||
<button class="stats-range-btn" data-range="1y">1y</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="stats-history-container-area" class="scroll-container">
|
||||
<div class="panel-empty">
|
||||
<span class="empty-icon">📊</span>
|
||||
Choose a container and time range to view history.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Alert Configuration -->
|
||||
<div id="stats-alerts" class="panel-section">
|
||||
<div id="stats-alerts-container" class="scroll-container">
|
||||
@@ -325,4 +347,141 @@
|
||||
// Lazy-load tabs
|
||||
document.querySelector('[data-panel="stats-aggregated"]')?.addEventListener('click', loadAggregated);
|
||||
document.querySelector('[data-panel="stats-alerts"]')?.addEventListener('click', loadAlerts);
|
||||
|
||||
// === History Tab ===
|
||||
const historyContainerSelect = document.getElementById('stats-history-container');
|
||||
const historyArea = document.getElementById('stats-history-container-area');
|
||||
const rangeButtons = document.querySelectorAll('.stats-range-btn');
|
||||
|
||||
let currentRange = '1h';
|
||||
|
||||
function rangeToMs(range) {
|
||||
switch (range) {
|
||||
case '1h': return 60 * 60 * 1000;
|
||||
case '24h': return 24 * 60 * 60 * 1000;
|
||||
case '7d': return 7 * 24 * 60 * 60 * 1000;
|
||||
case '30d': return 30 * 24 * 60 * 60 * 1000;
|
||||
case '1y': return 365 * 24 * 60 * 60 * 1000;
|
||||
default: return 60 * 60 * 1000;
|
||||
}
|
||||
}
|
||||
|
||||
function tierLabel(tier) {
|
||||
if (tier === 'raw') return 'live (10s samples)';
|
||||
if (tier === 'hourly') return 'hourly average';
|
||||
if (tier === 'daily') return 'daily average';
|
||||
return tier;
|
||||
}
|
||||
|
||||
// Simple SVG sparkline — no external lib
|
||||
function renderSparkline(samples, accessor, color, label, unit) {
|
||||
if (!samples || samples.length === 0) {
|
||||
return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
|
||||
}
|
||||
const values = samples.map(accessor).filter(v => v != null);
|
||||
if (values.length === 0) {
|
||||
return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
|
||||
}
|
||||
const max = Math.max(...values, 1);
|
||||
const min = Math.min(...values, 0);
|
||||
const range = max - min || 1;
|
||||
const w = 600, h = 80, pad = 4;
|
||||
const stepX = (w - pad * 2) / Math.max(values.length - 1, 1);
|
||||
const points = values.map((v, i) => {
|
||||
const x = pad + i * stepX;
|
||||
const y = h - pad - ((v - min) / range) * (h - pad * 2);
|
||||
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
}).join(' ');
|
||||
const last = values[values.length - 1];
|
||||
const avg = values.reduce((a, b) => a + b, 0) / values.length;
|
||||
return `
|
||||
<div style="margin-bottom: 14px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;">
|
||||
<span style="font-weight: 600; font-size: 0.9rem;">${escapeHtml(label)}</span>
|
||||
<span style="font-size: 0.75rem; color: var(--muted);">last ${last.toFixed(1)}${unit} · avg ${avg.toFixed(1)}${unit} · max ${max.toFixed(1)}${unit}</span>
|
||||
</div>
|
||||
<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="width: 100%; height: ${h}px; background: var(--base); border-radius: 4px;">
|
||||
<polyline fill="none" stroke="${color}" stroke-width="1.5" points="${points}" />
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function populateHistoryContainerSelect() {
|
||||
if (!historyContainerSelect) return;
|
||||
const data = cachedMonitoringData || {};
|
||||
const previous = historyContainerSelect.value;
|
||||
const entries = Object.entries(data);
|
||||
if (entries.length === 0) {
|
||||
historyContainerSelect.innerHTML = '<option value="">No containers</option>';
|
||||
return;
|
||||
}
|
||||
historyContainerSelect.innerHTML = entries
|
||||
.map(([id, info]) => `<option value="${escapeHtml(id)}">${escapeHtml(info.name || id)}</option>`)
|
||||
.join('');
|
||||
if (previous && data[previous]) historyContainerSelect.value = previous;
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
if (!historyArea || !historyContainerSelect) return;
|
||||
const containerId = historyContainerSelect.value;
|
||||
if (!containerId) {
|
||||
historyArea.innerHTML = '<div class="panel-empty"><span class="empty-icon">📊</span>No container selected.</div>';
|
||||
return;
|
||||
}
|
||||
const endTime = Date.now();
|
||||
const startTime = endTime - rangeToMs(currentRange);
|
||||
historyArea.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading history...</div>';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/v1/monitoring/history/${encodeURIComponent(containerId)}?startTime=${startTime}&endTime=${endTime}`);
|
||||
const data = await res.json();
|
||||
if (!data.success) throw new Error(data.error || 'Failed to load history');
|
||||
|
||||
const samples = data.samples || [];
|
||||
const tier = data.tier || 'raw';
|
||||
|
||||
if (samples.length === 0) {
|
||||
historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">📊</span>No data for the last ${currentRange}. Tier: ${tierLabel(tier)}.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Different shape between raw vs rolled-up samples
|
||||
const isRaw = tier === 'raw';
|
||||
const cpuAccessor = isRaw ? (s) => s.cpu?.percent : (s) => s.cpu?.avg;
|
||||
const memAccessor = isRaw ? (s) => s.memory?.percent : (s) => s.memory?.avgPercent;
|
||||
const netRxAccessor = isRaw ? (s) => (s.network?.rxMB || 0) : (s) => (s.network?.rxMB || 0);
|
||||
const netTxAccessor = isRaw ? (s) => (s.network?.txMB || 0) : (s) => (s.network?.txMB || 0);
|
||||
|
||||
let html = `
|
||||
<div style="font-size: 0.75rem; color: var(--muted); margin-bottom: 8px;">
|
||||
${samples.length} samples · ${escapeHtml(tierLabel(tier))} · ${new Date(startTime).toLocaleString()} → ${new Date(endTime).toLocaleString()}
|
||||
</div>
|
||||
`;
|
||||
html += renderSparkline(samples, cpuAccessor, '#2ecc71', 'CPU', '%');
|
||||
html += renderSparkline(samples, memAccessor, '#3498db', 'Memory', '%');
|
||||
html += renderSparkline(samples, netRxAccessor, '#9b59b6', 'Network RX', ' MB');
|
||||
html += renderSparkline(samples, netTxAccessor, '#e67e22', 'Network TX', ' MB');
|
||||
|
||||
historyArea.innerHTML = html;
|
||||
} catch (e) {
|
||||
historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">⚠️</span>Failed to load history: ${escapeHtml(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
rangeButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
rangeButtons.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentRange = btn.dataset.range;
|
||||
loadHistory();
|
||||
});
|
||||
});
|
||||
|
||||
historyContainerSelect?.addEventListener('change', loadHistory);
|
||||
|
||||
document.querySelector('[data-panel="stats-history"]')?.addEventListener('click', () => {
|
||||
populateHistoryContainerSelect();
|
||||
loadHistory();
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user