Joachim Friberg
187 lines
5.7 KiB
HTML
187 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Caddy AutoGen Status</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f172a;
|
|
--panel: #111827;
|
|
--muted: #9ca3af;
|
|
--ok: #22c55e;
|
|
--warn: #f59e0b;
|
|
--bad: #ef4444;
|
|
--text: #e5e7eb;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: "Iosevka", "Menlo", "Consolas", monospace;
|
|
background: radial-gradient(circle at top, #1e293b, #0b1020 60%);
|
|
color: var(--text);
|
|
}
|
|
.wrap {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
h1 { margin: 0 0 8px; }
|
|
.subtitle { color: var(--muted); margin-bottom: 16px; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.card {
|
|
background: color-mix(in oklab, var(--panel), black 8%);
|
|
border: 1px solid #1f2937;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
}
|
|
.label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
|
|
.value { font-size: 20px; margin-top: 6px; }
|
|
.ok { color: var(--ok); }
|
|
.warn { color: var(--warn); }
|
|
.bad { color: var(--bad); }
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
text-align: left;
|
|
border-bottom: 1px solid #1f2937;
|
|
padding: 8px 6px;
|
|
font-size: 14px;
|
|
}
|
|
.raw {
|
|
white-space: pre-wrap;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.topline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
button {
|
|
background: #1d4ed8;
|
|
color: white;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: #2563eb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="topline">
|
|
<h1>Caddy AutoGen Status</h1>
|
|
<button id="refresh">Refresh</button>
|
|
</div>
|
|
<div class="subtitle" id="updated">Loading...</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="label">Caddy Apply</div>
|
|
<div class="value" id="apply-status">-</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">Cloudflare Reachability</div>
|
|
<div class="value" id="cf-reachable">-</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">Cloudflare Token</div>
|
|
<div class="value" id="cf-token">-</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">Routes</div>
|
|
<div class="value" id="route-count">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="margin-bottom: 12px;">
|
|
<div class="label">Generated Hosts</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>Upstream</th>
|
|
<th>Scheme</th>
|
|
<th>Path</th>
|
|
<th>LE Cert</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="routes-body"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="label">Last Error</div>
|
|
<div id="last-error" class="raw">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function stateText(ok) {
|
|
return ok ? ["ok", "OK"] : ["bad", "FAIL"];
|
|
}
|
|
|
|
function setEl(id, text, cls) {
|
|
const el = document.getElementById(id);
|
|
el.textContent = text;
|
|
el.classList.remove("ok", "warn", "bad");
|
|
if (cls) el.classList.add(cls);
|
|
}
|
|
|
|
function fmtTs(ts) {
|
|
if (!ts) return "-";
|
|
return new Date(ts * 1000).toLocaleString();
|
|
}
|
|
|
|
async function loadStatus() {
|
|
const res = await fetch('/status.json', { cache: 'no-store' });
|
|
if (!res.ok) throw new Error('status fetch failed: ' + res.status);
|
|
const data = await res.json();
|
|
|
|
const applyPair = stateText(Boolean(data.last_apply_ok));
|
|
setEl('apply-status', applyPair[1] + (data.last_apply_http_status ? ` (${data.last_apply_http_status})` : ''), applyPair[0]);
|
|
|
|
const reachablePair = stateText(Boolean(data.cloudflare && data.cloudflare.reachable));
|
|
setEl('cf-reachable', reachablePair[1], reachablePair[0]);
|
|
|
|
const tokenPair = stateText(Boolean(data.cloudflare && data.cloudflare.token_valid));
|
|
setEl('cf-token', tokenPair[1], tokenPair[0]);
|
|
|
|
setEl('route-count', String((data.routes || []).length));
|
|
setEl('updated', `Last tick: ${fmtTs(data.last_tick_ts)} | Cloudflare check: ${fmtTs(data.cloudflare && data.cloudflare.last_check_ts)}`);
|
|
|
|
const certByHost = new Map((data.certs || []).map((c) => [c.fqdn, c.letsencrypt_present]));
|
|
const rows = (data.routes || []).map((r) => {
|
|
const cert = certByHost.get(r.fqdn) ? 'yes' : 'no';
|
|
return `<tr><td>${r.fqdn}</td><td>${r.upstream}</td><td>${r.scheme}</td><td>${r.path}</td><td>${cert}</td></tr>`;
|
|
});
|
|
document.getElementById('routes-body').innerHTML = rows.join('') || '<tr><td colspan="5">No routes</td></tr>';
|
|
|
|
const err = data.last_error || data.cloudflare?.error || '';
|
|
document.getElementById('last-error').textContent = err || '(none)';
|
|
}
|
|
|
|
async function refresh() {
|
|
try {
|
|
await loadStatus();
|
|
} catch (err) {
|
|
setEl('updated', 'Error: ' + err.message, 'bad');
|
|
}
|
|
}
|
|
|
|
document.getElementById('refresh').addEventListener('click', refresh);
|
|
refresh();
|
|
setInterval(refresh, 15000);
|
|
</script>
|
|
</body>
|
|
</html>
|