Add LAN-only status UI for caddy-autogen
This commit is contained in:
Joachim Friberg
@@ -0,0 +1,186 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user