domverse
ff8ed3428f
All checks were successful
Deploy / deploy (push) Successful in 17s
Two new performance + UX wins: - Server: /decisions now accepts reason (scenarios_containing), origin (origins), and limit. Default 200, max 2000. Header shows current count and warns when at the cap. - Client: a "quick filter rows" input does substring match across all visible columns instantly with no server round-trip. Useful when the server-side result is small enough to scroll but you still want to find one scenario fast. - Bulk select-all now toggles only currently visible rows so you can filter then bulk-unban. Drops inline onclick handlers in favor of delegated change listeners to keep per-row cost low at large limits. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
95 lines
4.1 KiB
HTML
95 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CrowdSec Admin</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
body { font-family: system-ui, sans-serif; max-width: 1100px; margin: 2rem auto; padding: 0 1rem; background:#111; color:#ddd; }
|
|
h1 { margin-top: 0; }
|
|
table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
|
|
th, td { padding: .4rem .6rem; border-bottom: 1px solid #333; text-align: left; font-size: 0.9rem; }
|
|
th { background: #222; }
|
|
tr:hover { background: #1a1a1a; }
|
|
button, input[type=submit] { background:#3a6; color:#fff; border:0; padding:.4rem .7rem; border-radius:4px; cursor:pointer; }
|
|
button.danger { background:#c44; }
|
|
button.warn { background:#a82; }
|
|
input[type=text] { background:#222; color:#ddd; border:1px solid #444; padding:.4rem .6rem; border-radius:4px; }
|
|
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
|
|
.pill { background:#333; padding:.15rem .5rem; border-radius:99px; font-size:.8rem; }
|
|
.me { background:#2a4; }
|
|
section { margin-top: 1.5rem; padding: 1rem; background:#181818; border-radius:6px; }
|
|
.err { color:#f88; }
|
|
code { background:#222; padding:.1rem .3rem; border-radius:3px; }
|
|
.row > * { flex: 0 0 auto; }
|
|
.grow { flex: 1 1 200px; }
|
|
.htmx-request #decisions::after { content: " loading…"; color:#888; }
|
|
.hidden-row { display:none; }
|
|
select { background:#222; color:#ddd; border:1px solid #444; padding:.4rem; border-radius:4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>CrowdSec Admin</h1>
|
|
<div class="row">
|
|
<span class="pill me">Your IP: <code>{{ my_ip }}</code></span>
|
|
<form hx-post="/unban-me" hx-target="#unban-me-result" hx-swap="innerHTML" hx-confirm="Unban {{ my_ip }}?">
|
|
<button class="warn" type="submit">Unban my IP</button>
|
|
</form>
|
|
</div>
|
|
<div id="unban-me-result"></div>
|
|
|
|
<section>
|
|
<h2>Active decisions</h2>
|
|
<form hx-get="/decisions" hx-target="#decisions" hx-trigger="submit, load delay:200ms" hx-swap="innerHTML" hx-indicator="#decisions" class="row">
|
|
<input type="text" name="ip" placeholder="IP (server-side)">
|
|
<input type="text" name="reason" placeholder="Reason contains (server-side)">
|
|
<select name="origin">
|
|
<option value="">any origin</option>
|
|
<option value="crowdsec">crowdsec</option>
|
|
<option value="cscli">cscli</option>
|
|
<option value="CAPI">CAPI</option>
|
|
<option value="lists">lists</option>
|
|
</select>
|
|
<select name="limit">
|
|
<option value="100">100</option>
|
|
<option value="200" selected>200</option>
|
|
<option value="500">500</option>
|
|
<option value="1000">1000</option>
|
|
<option value="2000">2000</option>
|
|
</select>
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
<div class="row" style="margin-top:.6rem;">
|
|
<input type="text" id="client-filter" placeholder="Quick filter rows (any column)…" class="grow"
|
|
oninput="filterRows()">
|
|
<span class="pill" id="visible-count"></span>
|
|
</div>
|
|
<div id="decisions">Loading…</div>
|
|
</section>
|
|
<script>
|
|
function filterRows(){
|
|
const q = (document.getElementById('client-filter').value || '').toLowerCase();
|
|
const rows = document.querySelectorAll('#decisions tbody tr');
|
|
let shown = 0;
|
|
rows.forEach(r => {
|
|
const match = !q || r.textContent.toLowerCase().includes(q);
|
|
r.classList.toggle('hidden-row', !match);
|
|
if (match) shown++;
|
|
});
|
|
const p = document.getElementById('visible-count');
|
|
if (p) p.textContent = shown + ' / ' + rows.length + ' visible';
|
|
}
|
|
document.body.addEventListener('htmx:afterSwap', e => { if (e.detail.target.id === 'decisions') filterRows(); });
|
|
</script>
|
|
|
|
<section>
|
|
<h2>Unban by IP</h2>
|
|
<form hx-post="/unban" hx-target="#decisions" hx-swap="innerHTML" hx-confirm="Unban entered IP?" class="row">
|
|
<input type="text" name="ip" placeholder="e.g. 1.2.3.4" required>
|
|
<button class="danger" type="submit">Unban IP</button>
|
|
</form>
|
|
</section>
|
|
</body>
|
|
</html>
|