Add read-only web dashboard and phone push notifications
Both zero-dependency (stdlib http.server + urllib), consistent with the project's no-dependency-tree stance for a security daemon. Web dashboard (enodia_sentinel/web.py + static/dashboard.html): - read-only JSON API over the log dir: /api/status, /api/alerts, /api/alerts/<id>, /api/events - bearer-token auth (constant-time; header or ?token=), required on non- loopback binds, auto-generated + persisted (0600) when unset - binds the host's Tailscale IP by default (auto-detected), reachable from the tailnet but not the LAN/internet - self-contained dark SPA: severity cards, live alert list, full snapshot viewer; 10s auto-refresh - path-traversal-safe alert lookup; `enodia-sentinel web` subcommand; daemon now writes a pidfile so the dashboard can show live status - hardened enodia-sentinel-web.service (read-only, no caps) Phone push (enodia_sentinel/notify/): - pluggable backends — ntfy, Pushover, generic webhook — each separating a pure build() (unit-tested, no network) from send() - a backend turns on when its config keys are set; pushes gated by notify_min_severity; severity → per-service priority/tags - fired from snapshot.capture on worker threads, errors swallowed - desktop notify-send retained Tests: +16 (9 web incl. a real-server 401/200 auth test, 7 notify request-build cases). 55/55 pass. Live end-to-end verified: daemon → alert → API → page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Luna
parent
0eb5077551
commit
c00fff224c
17 changed files with 960 additions and 5 deletions
158
enodia_sentinel/static/dashboard.html
Normal file
158
enodia_sentinel/static/dashboard.html
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Enodia Sentinel</title>
|
||||
<style>
|
||||
:root{
|
||||
--bg:#0b0e14; --panel:#11151f; --panel2:#161b27; --line:#222a3a;
|
||||
--fg:#cdd6e4; --dim:#7c8aa5; --accent:#5ad1c8;
|
||||
--crit:#ff5370; --high:#ffb454; --med:#73d0ff;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg);color:var(--fg);
|
||||
font:14px/1.5 ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace}
|
||||
header{display:flex;align-items:center;gap:14px;padding:14px 20px;
|
||||
border-bottom:1px solid var(--line);background:var(--panel)}
|
||||
header h1{font-size:16px;margin:0;letter-spacing:.18em;color:var(--accent)}
|
||||
header .host{color:var(--dim)}
|
||||
.dot{width:10px;height:10px;border-radius:50%;background:#444;display:inline-block}
|
||||
.dot.up{background:#46d160;box-shadow:0 0 8px #46d160}
|
||||
.dot.down{background:var(--crit)}
|
||||
.spacer{flex:1}
|
||||
.meta{color:var(--dim);font-size:12px}
|
||||
.cards{display:flex;gap:12px;padding:16px 20px;flex-wrap:wrap}
|
||||
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
|
||||
padding:12px 16px;min-width:120px}
|
||||
.card .n{font-size:26px;font-weight:700}
|
||||
.card .l{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
|
||||
.card.crit .n{color:var(--crit)} .card.high .n{color:var(--high)}
|
||||
.card.med .n{color:var(--med)}
|
||||
main{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:0;
|
||||
border-top:1px solid var(--line);height:calc(100vh - 180px)}
|
||||
.list,.detail{overflow:auto;height:100%}
|
||||
.list{border-right:1px solid var(--line)}
|
||||
.row{padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer}
|
||||
.row:hover{background:var(--panel2)} .row.sel{background:var(--panel2);
|
||||
border-left:3px solid var(--accent);padding-left:13px}
|
||||
.row .top{display:flex;justify-content:space-between;gap:8px}
|
||||
.sev{font-weight:700;font-size:11px;padding:1px 7px;border-radius:4px}
|
||||
.sev.CRITICAL{color:var(--crit);border:1px solid var(--crit)}
|
||||
.sev.HIGH{color:var(--high);border:1px solid var(--high)}
|
||||
.sev.MEDIUM{color:var(--med);border:1px solid var(--med)}
|
||||
.row .sigs{color:var(--fg);margin-top:4px;font-size:13px}
|
||||
.row .t{color:var(--dim);font-size:11px}
|
||||
.row .sids{color:var(--dim);font-size:11px}
|
||||
.detail{padding:18px 22px}
|
||||
.detail pre{white-space:pre-wrap;word-break:break-word;margin:0;
|
||||
color:#b9c4d8;font-size:12.5px}
|
||||
.empty{color:var(--dim);padding:40px;text-align:center}
|
||||
.err{color:var(--crit);padding:30px;text-align:center}
|
||||
footer{border-top:1px solid var(--line);background:var(--panel);
|
||||
padding:8px 20px;color:var(--dim);font-size:11px;display:flex;gap:18px}
|
||||
a{color:var(--accent)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>ENODIA SENTINEL</h1>
|
||||
<span class="dot" id="dot"></span>
|
||||
<span class="host" id="host">—</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="meta" id="ebpf"></span>
|
||||
<span class="meta" id="ver"></span>
|
||||
</header>
|
||||
|
||||
<div class="cards" id="cards"></div>
|
||||
|
||||
<main>
|
||||
<div class="list" id="list"><div class="empty">loading…</div></div>
|
||||
<div class="detail" id="detail"><div class="empty">Select an alert to view its forensic snapshot.</div></div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<span id="status">connecting…</span>
|
||||
<span class="spacer" style="flex:1"></span>
|
||||
<span id="refreshed"></span>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const TOKEN = new URLSearchParams(location.search).get("token") || "";
|
||||
const HDR = TOKEN ? {Authorization:"Bearer "+TOKEN} : {};
|
||||
let selected = null;
|
||||
|
||||
async function api(path){
|
||||
const r = await fetch(path, {headers:HDR});
|
||||
if(r.status===401) throw new Error("unauthorized — bad or missing ?token");
|
||||
if(!r.ok) throw new Error("HTTP "+r.status);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
function el(tag, cls, txt){const e=document.createElement(tag);
|
||||
if(cls)e.className=cls; if(txt!=null)e.textContent=txt; return e;}
|
||||
|
||||
async function refresh(){
|
||||
try{
|
||||
const st = await api("/api/status");
|
||||
document.getElementById("dot").className = "dot "+(st.running?"up":"down");
|
||||
document.getElementById("host").textContent = st.host || "";
|
||||
document.getElementById("ver").textContent = "v"+st.version;
|
||||
document.getElementById("ebpf").textContent = "eBPF: "+(st.ebpf||"?");
|
||||
document.getElementById("status").textContent =
|
||||
st.running ? "daemon running" : "daemon NOT running";
|
||||
const c = st.counts||{};
|
||||
const cards = document.getElementById("cards"); cards.innerHTML="";
|
||||
for(const [lbl,key] of [["CRITICAL","crit"],["HIGH","high"],["MEDIUM","med"]]){
|
||||
const card=el("div","card "+key);
|
||||
card.append(el("div","n",String(c[lbl]||0))); card.append(el("div","l",lbl));
|
||||
cards.append(card);
|
||||
}
|
||||
const tot=el("div","card"); tot.append(el("div","n",String(st.total_alerts||0)));
|
||||
tot.append(el("div","l","total alerts")); cards.append(tot);
|
||||
|
||||
const alerts = await api("/api/alerts");
|
||||
const list = document.getElementById("list"); list.innerHTML="";
|
||||
if(!alerts.length){ list.append(el("div","empty","No alerts captured.")); }
|
||||
for(const a of alerts){
|
||||
const row=el("div","row"); row.dataset.name=a.name;
|
||||
if(a.name===selected) row.classList.add("sel");
|
||||
const top=el("div","top");
|
||||
top.append(el("span","sev "+a.severity, a.severity));
|
||||
top.append(el("span","t", (a.time||"").replace("T"," ").slice(0,19)));
|
||||
row.append(top);
|
||||
row.append(el("div","sigs", a.signatures.join(", ")));
|
||||
if(a.sids.length) row.append(el("div","sids","sid: "+a.sids.join(", ")));
|
||||
row.onclick=()=>openAlert(a.name);
|
||||
list.append(row);
|
||||
}
|
||||
document.getElementById("refreshed").textContent =
|
||||
"updated "+new Date().toLocaleTimeString();
|
||||
}catch(e){
|
||||
document.getElementById("status").textContent = "error: "+e.message;
|
||||
if(String(e.message).includes("unauthorized"))
|
||||
document.getElementById("detail").innerHTML =
|
||||
'<div class="err">Unauthorized. Open this page with ?token=YOUR_TOKEN</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function openAlert(name){
|
||||
selected = name;
|
||||
document.querySelectorAll(".row").forEach(r=>
|
||||
r.classList.toggle("sel", r.dataset.name===name));
|
||||
const d = document.getElementById("detail");
|
||||
d.innerHTML='<div class="empty">loading…</div>';
|
||||
try{
|
||||
const a = await api("/api/alerts/"+encodeURIComponent(name));
|
||||
d.innerHTML="";
|
||||
const pre=el("pre",null,a.text || JSON.stringify(a.json,null,2));
|
||||
d.append(pre);
|
||||
}catch(e){ d.innerHTML='<div class="err">'+e.message+'</div>'; }
|
||||
}
|
||||
|
||||
refresh();
|
||||
setInterval(refresh, 10000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue