-
-
-
+function clusterGroup(label, hosts, color) {
+ return `
+
+
+ ${hosts.map(h => `
+
+
+
${h.name}
+
schedule ${h.last_backup ? timeAgo(h.last_backup) : 'Never'}
+
+
${h.status.toUpperCase()}
- `).join('');
-
- // Load minibars
- for (const h of hosts) {
- loadMinibar(h.name);
- }
+ `).join('')}
+
`;
}
-async function loadMinibar(host) {
- const r = await fetch(`${API}/api/calendar/${host}?days=14`);
- const cal = await r.json();
- const el = document.getElementById(`mini-${host}`);
- if (!el) return;
-
- const days = [];
- for (let i = 13; i >= 0; i--) {
- const d = new Date();
- d.setDate(d.getDate() - i);
- const key = d.toISOString().split('T')[0];
- days.push({ key, data: cal[key] || null });
- }
-
- const maxSize = Math.max(...days.map(d => d.data?.total_size || 0), 1);
- el.innerHTML = days.map(d => {
- if (!d.data) return `
`;
- const h = Math.max(15, (d.data.total_size / maxSize) * 100);
- const cls = d.data.has_error ? 'error' : 'ok';
- return `
`;
+function renderLiveStream() {
+ const sorted = [...allHosts].filter(h => h.last_backup).sort((a,b) => new Date(b.last_backup) - new Date(a.last_backup)).slice(0, 8);
+ const ls = document.getElementById('liveStream');
+ ls.innerHTML = sorted.map(h => {
+ const t = new Date(h.last_backup).toLocaleTimeString('de-DE', {hour:'2-digit',minute:'2-digit',second:'2-digit'});
+ const isErr = h.last_status !== 'ok';
+ return `
+
+
${t}
+
+
${isErr ? 'ERROR: ' : ''}Backup for ${h.name} ${isErr ? 'failed' : 'completed successfully'}.
+ ${h.last_message ? `
${h.last_message} ` : ''}
+
`;
}).join('');
}
-// ── Host Detail Drawer ────────────────────────────────────────
+async function loadVolumeChart() {
+ // Aggregate daily totals from all hosts
+ const days = [];
+ for (let i = 29; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate() - i); days.push(d.toISOString().split('T')[0]); }
+ const dailyTotals = {};
+ days.forEach(d => dailyTotals[d] = 0);
+
+ // Fetch calendar for top hosts (limit to avoid too many requests)
+ const topHosts = allHosts.slice(0, 10);
+ const cals = await Promise.all(topHosts.map(h => fetch(`${API}/api/calendar/${h.name}?days=30`).then(r => r.json())));
+ cals.forEach(cal => { Object.entries(cal).forEach(([day, data]) => { if (dailyTotals[day] !== undefined) dailyTotals[day] += data.total_size; }); });
+
+ const values = days.map(d => dailyTotals[d]);
+ const max = Math.max(...values, 1);
+ const points = values.map((v, i) => `${(i / (values.length - 1)) * 100},${100 - (v / max) * 80}`);
+ const pathD = 'M' + points.join(' L');
+ const fillD = pathD + ` L100,100 L0,100 Z`;
+
+ document.getElementById('chartSvg').innerHTML = `
+
+ ${[20,40,60,80].map(y => `
`).join('')}
+
+
+ `;
+ document.getElementById('chartSvg').setAttribute('viewBox', '0 0 100 100');
+ document.getElementById('chartSvg').setAttribute('preserveAspectRatio', 'none');
+}
+
+// ── Alerts ────────────────────────────────────────────────
+function renderAlerts() {
+ const issues = allHosts.filter(h => h.status === 'error' || h.status === 'stale');
+ document.getElementById('aCrit').textContent = String(allHosts.filter(h => h.status === 'error').length).padStart(2, '0');
+ document.getElementById('aStale').textContent = String(allHosts.filter(h => h.status === 'stale').length).padStart(2, '0');
+
+ const al = document.getElementById('alertList');
+ if (!issues.length) { al.innerHTML = '
No active alerts – all systems operational ✓
'; return; }
+
+ al.innerHTML = issues.map(h => {
+ const isCrit = h.status === 'error';
+ const color = isCrit ? 'error' : 'tertiary';
+ const icon = isCrit ? 'error' : 'warning';
+ const label = isCrit ? 'CRITICAL' : 'STALE';
+ return `
+
+
+
+ ${icon}
+
+
+
+
${isCrit ? 'Backup Failed' : 'Backup Overdue'} – ${h.name}
+ ${label}
+
+
+ dns ${h.name}schedule ${h.last_backup ? timeAgo(h.last_backup) : 'Never'}${h.last_message} ` : `${Math.round(h.age_hours)}h without backup `}
+
+
+
+ Details
+
+
+
`;
+ }).join('');
+}
+
+// ── Host Grid ─────────────────────────────────────────────
+function renderHostGrid() {
+ const grid = document.getElementById('hostGrid');
+ grid.innerHTML = allHosts.map(h => `
+
+
+
+
${h.name}
+
${h.status.toUpperCase()}
+
+
+
Last Backup ${h.last_backup ? timeAgo(h.last_backup) : 'Never'}
+
7d Backups ${h.backup_count_7d}
+
Avg Duration ${fmtDuration(h.avg_duration_7d)}
+
7d Volume ${fmtBytes(h.total_size_7d)}
+
+
+ `).join('');
+}
+
+// ── Host Detail Drawer ────────────────────────────────────
async function openHost(name) {
document.getElementById('drawerTitle').textContent = name;
- document.getElementById('drawerOverlay').classList.add('open');
- document.getElementById('drawer').classList.add('open');
-
+ document.getElementById('drawerBg').classList.remove('opacity-0','pointer-events-none');
+ document.getElementById('drawer').classList.remove('translate-x-full');
const body = document.getElementById('drawerBody');
- body.innerHTML = '
Lade...
';
+ body.innerHTML = '
Loading...
';
- const [histR, calR, hostsR] = await Promise.all([
- fetch(`${API}/api/history/${name}?days=30`),
- fetch(`${API}/api/calendar/${name}?days=30`),
- fetch(`${API}/api/hosts`),
- ]);
+ const [histR, calR] = await Promise.all([fetch(`${API}/api/history/${name}?days=30`), fetch(`${API}/api/calendar/${name}?days=30`)]);
const history = await histR.json();
const calendar = await calR.json();
- const hosts = await hostsR.json();
- const host = hosts.find(h => h.name === name) || {};
+ const host = allHosts.find(h => h.name === name) || {};
- // Stats
- const totalSize = history.reduce((s, e) => s + e.original_size, 0);
- const avgDuration = history.length ? Math.round(history.reduce((s, e) => s + e.duration_sec, 0) / history.length) : 0;
- const successRate = history.length ? Math.round(history.filter(e => e.status === 'ok').length / history.length * 100) : 0;
+ const totalSize = history.reduce((s,e) => s + e.original_size, 0);
+ const avgDur = history.length ? Math.round(history.reduce((s,e) => s + e.duration_sec, 0) / history.length) : 0;
+ const rate = history.length ? Math.round(history.filter(e => e.status === 'ok').length / history.length * 100) : 0;
body.innerHTML = `
-
-
-
${history.length}
-
Backups (30d)
-
-
-
${successRate}%
-
Erfolgsrate
-
-
-
${fmtDuration(avgDuration)}
-
Ø Dauer
-
-
+
+
-
-
${buildCalendar(calendar)}
+
+
30-Day Calendar
+
${buildCalendar(calendar)}
-
-
${buildSizeChart(history)}
+
+
Data Volume
+
${buildSizeChart(history)}
-
-
- Datum Status Dauer Größe Dateien
- ${history.slice(0, 20).map(e => `
-
- ${new Date(e.timestamp).toLocaleString('de-DE', {day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}
- ${e.status} ${fmtDuration(e.duration_sec)}
- ${fmtBytes(e.original_size)}
- ${e.nfiles_new ? `+${e.nfiles_new}` : '–'} ${e.nfiles_changed ? `/ ~${e.nfiles_changed}` : ''}
-
- `).join('')}
-
-
+
+
Recent Backups
+
+ ${history.slice(0, 15).map(e => `
+
+ ${new Date(e.timestamp).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}
+ ${fmtDuration(e.duration_sec)}
+ ${fmtBytes(e.original_size)}
+ ${e.nfiles_new ? `+${e.nfiles_new}` : ''}
+
+ `).join('')}
+
-
- ⚙ Bearbeiten
- 🗑 Löschen
-
+
+
+
+ settings Edit
+
+
+ delete Delete
+
+
`;
}
function buildCalendar(cal) {
const days = [];
- const now = new Date();
for (let i = 29; i >= 0; i--) {
- const d = new Date();
- d.setDate(d.getDate() - i);
+ const d = new Date(); d.setDate(d.getDate() - i);
const key = d.toISOString().split('T')[0];
const data = cal[key];
- const dayNum = d.getDate();
-
- if (!data) {
- days.push(`
${dayNum}
${key}
`);
- } else {
- const cls = data.has_error ? 'error' : 'ok';
- days.push(`
${dayNum}
${key}
`);
+ const num = d.getDate();
+ if (!data) { days.push(`
${num}
`); }
+ else {
+ const cls = data.has_error ? 'bg-error/20 text-error' : 'bg-secondary/20 text-secondary';
+ days.push(`
${num}
`);
}
}
- // Future days to fill the row
- for (let i = 1; i <= 5; i++) {
- const d = new Date();
- d.setDate(d.getDate() + i);
- days.push(`
${d.getDate()}
`);
- }
return days.join('');
}
function buildSizeChart(history) {
- // Group by day, last 30 days
const byDay = {};
- history.forEach(e => {
- const day = e.timestamp.split('T')[0];
- if (!byDay[day]) byDay[day] = 0;
- byDay[day] += e.original_size;
- });
-
+ history.forEach(e => { const d = e.timestamp.split('T')[0]; byDay[d] = (byDay[d]||0) + e.original_size; });
const days = [];
- for (let i = 29; i >= 0; i--) {
- const d = new Date();
- d.setDate(d.getDate() - i);
- const key = d.toISOString().split('T')[0];
- days.push({ key, size: byDay[key] || 0 });
- }
-
- const maxSize = Math.max(...days.map(d => d.size), 1);
+ for (let i = 29; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate()-i); days.push({key:d.toISOString().split('T')[0], size: byDay[d.toISOString().split('T')[0]]||0}); }
+ const max = Math.max(...days.map(d=>d.size), 1);
return days.map(d => {
- const h = d.size ? Math.max(4, (d.size / maxSize) * 100) : 2;
- const opacity = d.size ? '' : 'opacity:0.2;';
- return `
${d.key}
`;
+ const h = d.size ? Math.max(6, (d.size/max)*100) : 4;
+ return `
`;
}).join('');
}
function closeDrawer() {
- document.getElementById('drawerOverlay').classList.remove('open');
- document.getElementById('drawer').classList.remove('open');
+ document.getElementById('drawerBg').classList.add('opacity-0','pointer-events-none');
+ document.getElementById('drawer').classList.add('translate-x-full');
}
-// ── Add/Edit Host Modal ───────────────────────────────────────
+// ── Modal ─────────────────────────────────────────────────
function openAddHost() {
- document.getElementById('modalTitle').textContent = 'Host hinzufügen';
+ document.getElementById('modalTitle').textContent = 'Add Host';
document.getElementById('formMode').value = 'add';
- document.getElementById('formName').value = '';
- document.getElementById('formName').disabled = false;
+ document.getElementById('formName').value = ''; document.getElementById('formName').disabled = false;
document.getElementById('formKumaUrl').value = '';
document.getElementById('formEnabled').checked = true;
openModal();
@@ -255,15 +297,10 @@ function openAddHost() {
async function openEditHost(name) {
closeDrawer();
- const r = await fetch(`${API}/api/hosts`);
- const hosts = await r.json();
- const h = hosts.find(x => x.name === name);
- if (!h) return;
-
- document.getElementById('modalTitle').textContent = `${name} bearbeiten`;
+ const h = allHosts.find(x => x.name === name); if (!h) return;
+ document.getElementById('modalTitle').textContent = `Edit: ${name}`;
document.getElementById('formMode').value = 'edit';
- document.getElementById('formName').value = h.name;
- document.getElementById('formName').disabled = true;
+ document.getElementById('formName').value = h.name; document.getElementById('formName').disabled = true;
document.getElementById('formKumaUrl').value = h.kuma_push_url || '';
document.getElementById('formEnabled').checked = h.enabled;
openModal();
@@ -275,77 +312,49 @@ async function saveHost(e) {
const name = document.getElementById('formName').value.trim();
const kuma = document.getElementById('formKumaUrl').value.trim();
const enabled = document.getElementById('formEnabled').checked;
-
if (mode === 'add') {
- await apiFetch(`${API}/api/hosts`, {
- method: 'POST',
- headers: authHeaders(),
- body: JSON.stringify({ name, kuma_push_url: kuma })
- });
- toast(`${name} hinzugefügt`, 'success');
+ await apiFetch(`${API}/api/hosts`, { method:'POST', headers:authHeaders(), body:JSON.stringify({name, kuma_push_url:kuma}) });
+ toast(`${name} added`);
} else {
- await apiFetch(`${API}/api/hosts/${name}`, {
- method: 'PUT',
- headers: authHeaders(),
- body: JSON.stringify({ kuma_push_url: kuma, enabled })
- });
- toast(`${name} aktualisiert`, 'success');
+ await apiFetch(`${API}/api/hosts/${name}`, { method:'PUT', headers:authHeaders(), body:JSON.stringify({kuma_push_url:kuma, enabled}) });
+ toast(`${name} updated`);
}
-
- closeModal();
- loadAll();
+ closeModal(); loadAll();
}
async function confirmDelete(name) {
- if (!confirm(`Host "${name}" und alle History wirklich löschen?`)) return;
- await apiFetch(`${API}/api/hosts/${name}`, { method: 'DELETE', headers: authHeaders() });
- toast(`${name} gelöscht`, 'success');
- closeDrawer();
- loadAll();
+ if (!confirm(`Delete "${name}" and all history?`)) return;
+ await apiFetch(`${API}/api/hosts/${name}`, { method:'DELETE', headers:authHeaders() });
+ toast(`${name} deleted`); closeDrawer(); loadAll();
}
-function openModal() {
- document.getElementById('modalOverlay').classList.add('open');
- document.getElementById('modal').classList.add('open');
-}
-function closeModal() {
- document.getElementById('modalOverlay').classList.remove('open');
- document.getElementById('modal').classList.remove('open');
+function openModal() { document.getElementById('modalBg').classList.remove('opacity-0','pointer-events-none'); const m = document.getElementById('modal'); m.classList.remove('scale-95','opacity-0','pointer-events-none'); }
+function closeModal() { document.getElementById('modalBg').classList.add('opacity-0','pointer-events-none'); const m = document.getElementById('modal'); m.classList.add('scale-95','opacity-0','pointer-events-none'); }
+
+// ── Navigation ────────────────────────────────────────────
+function showPage(page) {
+ currentPage = page;
+ ['dashboard','alerts','hosts','config'].forEach(p => {
+ document.getElementById(`page-${p}`).classList.toggle('hidden', p !== page);
+ // Nav highlights
+ const nav = document.getElementById(`nav-${p}`);
+ const side = document.getElementById(`side-${p}`);
+ if (nav) { nav.className = p === page ? 'text-sm font-bold tracking-tight text-blue-400 px-3 py-1 rounded-lg font-headline' : 'text-sm font-medium tracking-tight text-slate-400 hover:bg-slate-800/50 px-3 py-1 rounded-lg transition-colors font-headline'; }
+ if (side) { side.className = p === page ? 'flex items-center gap-3 px-4 py-3 rounded-xl bg-blue-600/10 text-blue-400 border-r-2 border-blue-500 font-headline text-sm font-semibold' : 'flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-slate-900/80 transition-all font-headline text-sm font-semibold'; }
+ });
}
-// ── Toast ─────────────────────────────────────────────────────
-function toast(msg, type = 'success') {
- const c = document.getElementById('toastContainer');
+// ── Toast ─────────────────────────────────────────────────
+function toast(msg) {
const t = document.createElement('div');
- t.className = `toast ${type}`;
- t.innerHTML = `${type === 'success' ? '✓' : '✕'} ${msg}`;
- c.appendChild(t);
+ t.className = 'glass px-5 py-3 rounded-xl text-sm font-medium text-white shadow-2xl flex items-center gap-2 animate-[slideIn_0.3s_ease-out]';
+ t.innerHTML = `
check_circle ${msg}`;
+ document.getElementById('toasts').appendChild(t);
setTimeout(() => t.remove(), 4000);
}
-// ── Helpers ───────────────────────────────────────────────────
-function fmtBytes(b) {
- if (!b || b === 0) return '0 B';
- const units = ['B', 'KB', 'MB', 'GB', 'TB'];
- const i = Math.floor(Math.log(b) / Math.log(1024));
- return (b / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
-}
-
-function fmtDuration(sec) {
- if (!sec || sec === 0) return '–';
- if (sec < 60) return `${sec}s`;
- if (sec < 3600) return `${Math.floor(sec/60)}m ${sec%60}s`;
- return `${Math.floor(sec/3600)}h ${Math.floor((sec%3600)/60)}m`;
-}
-
-function timeAgo(iso) {
- const diff = (Date.now() - new Date(iso).getTime()) / 1000;
- if (diff < 60) return 'gerade eben';
- if (diff < 3600) return `vor ${Math.floor(diff/60)}m`;
- if (diff < 86400) return `vor ${Math.floor(diff/3600)}h`;
- return `vor ${Math.floor(diff/86400)}d`;
-}
-
-function statusLabel(s) {
- return { ok: 'OK', stale: 'Überfällig', error: 'Fehler', disabled: 'Deaktiviert' }[s] || s;
-}
+// ── Helpers ───────────────────────────────────────────────
+function fmtBytes(b) { if (!b) return '0 B'; const u = ['B','KB','MB','GB','TB']; const i = Math.floor(Math.log(b)/Math.log(1024)); return (b/Math.pow(1024,i)).toFixed(i>0?1:0)+' '+u[i]; }
+function fmtDuration(s) { if (!s) return '–'; if (s<60) return s+'s'; if (s<3600) return Math.floor(s/60)+'m'; return Math.floor(s/3600)+'h '+Math.floor((s%3600)/60)+'m'; }
+function timeAgo(iso) { const d=(Date.now()-new Date(iso).getTime())/1000; if(d<60) return 'just now'; if(d<3600) return Math.floor(d/60)+'m ago'; if(d<86400) return Math.floor(d/3600)+'h ago'; return Math.floor(d/86400)+'d ago'; }
+function statusChipClass(s) { return { ok:'bg-secondary/10 text-secondary border border-secondary/20', error:'bg-error/10 text-error border border-error/20', stale:'bg-tertiary/10 text-tertiary border border-tertiary/20', disabled:'bg-outline/10 text-outline border border-outline/20' }[s] || ''; }
diff --git a/templates/index.html b/templates/index.html
index 91f2a71..6eb279d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,102 +1,295 @@
-
+
-
-
-
Backup Monitor – Pfannkuchen
-
-
+
+
+
The Sentinel – Backup Monitor
+
+
+
+
+
+
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ cloud_done
+ System OK
+
+
refresh
+
add_circle
+
-
-
+
+
+
+
+
+ shield
+
+
+
The Sentinel
+
Backup Monitor
+
+
+
+
+ add New Host
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
–
+
Latest Backup
+
–
+
+
+
+
+
Issues
+
+ View alerts arrow_forward
+
+
+
+
+
+
+
+
+
+
+
Backup Volume Trends
+
Storage growth across all hosts (Last 30 Days)
+
+
+
+
+
+
+
+
+
+
+
+
+
Live Backup Stream
+ Auto-refresh: 30s
+
+
+
+
+
+
+
No active alerts – all systems operational ✓
+
+
+
+
+
+
Push Endpoint
+ POST /api/push
+
+
+
Prometheus Metrics
+ GET /metrics
+
+
+
API Key
+
{{ 'Enabled – set via API_KEY env var' if api_key_required else 'Disabled – all endpoints open' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
Add Host
+ close
+
+
+
+
+
+
+
+