zwitschi/intrusion-detection
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(graph): reformat graph template and switch canvas background to dark

Browse Source
This commit is contained in:
zwitschi committed 2026-09-12 14:07:21 +02:00
1 parent 4ba40dfef2
commit 0137264fe4
1 file changed
+12 -29
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/graph.html
+12 -29
View File
@@ -1,9 +1,8 @@
{% extends "base.html" %} {% block title %}Graph — Intrusion Detection{%
endblock %} {% block content %}
{% extends "base.html" %} {% block title %}Graph — Intrusion Detection{% endblock %} {% block content %}
<h1>IPv4 address space map</h1>
<p class="muted">
One pixel per /24 network, arranged as 16×16 tiles of /8 (first octet).
Blocked targets are red, whitelisted ranges are green.
One pixel per /24 network, arranged as 16×16 tiles of /8 (first octet). Blocked targets are red, whitelisted ranges
are green.
</p>
<div class="panel">
@@ -14,8 +13,7 @@ endblock %} {% block content %}
Show whitelisted
</label>
<span class="legend">
<span class="sw red"></span> Blocked
<span class="sw green"></span> Whitelisted
<span class="sw red"></span> Blocked <span class="sw green"></span> Whitelisted
<span class="sw plain"></span> Unlisted
</span>
</div>
@@ -113,7 +111,7 @@ endblock %} {% block content %}
function render() {
const showWl = document.getElementById("show-whitelisted").checked;
ctx.fillStyle = "#ffffff";
ctx.fillStyle = "#0c0c0c";
ctx.fillRect(0, 0, TOTAL, TOTAL);
for (const [idx, value] of marked) {
if (!showWl && value === V_WHITELISTED) continue;
@@ -142,37 +140,24 @@ endblock %} {% block content %}
const c = y % SIZE;
const idx = (a << 16) | (b << 8) | c;
const value = marked.get(idx) ?? V_UNLISTED;
const status =
value === V_BLOCKED
? "blocked"
: value === V_WHITELISTED
? "whitelisted"
: "unlisted";
const entries = matchesIn(blockedRanges, idx).concat(
matchesIn(whitelistedRanges, idx),
);
const status = value === V_BLOCKED ? "blocked" : value === V_WHITELISTED ? "whitelisted" : "unlisted";
const entries = matchesIn(blockedRanges, idx).concat(matchesIn(whitelistedRanges, idx));
tooltip.innerHTML = "";
tooltip.append(
el("div", { class: "tt-head mono", text: `${a}.${b}.${c}.0/24` }),
el("div", { class: `tt-status ${status}`, text: status }),
);
if (entries.length) {
tooltip.append(
el("div", { class: "tt-list mono", text: entries.join("\n") }),
);
tooltip.append(el("div", { class: "tt-list mono", text: entries.join("\n") }));
} else {
tooltip.append(
el("div", { class: "tt-list muted", text: "no matching entry" }),
);
tooltip.append(el("div", { class: "tt-list muted", text: "no matching entry" }));
}
tooltip.classList.remove("hidden");
const rect = canvas.getBoundingClientRect();
let left = e.clientX - rect.left + 14;
let top = e.clientY - rect.top + 14;
if (left + tooltip.offsetWidth > rect.width)
left = e.clientX - rect.left - tooltip.offsetWidth - 14;
if (top + tooltip.offsetHeight > rect.height)
top = e.clientY - rect.top - tooltip.offsetHeight - 14;
if (left + tooltip.offsetWidth > rect.width) left = e.clientX - rect.left - tooltip.offsetWidth - 14;
if (top + tooltip.offsetHeight > rect.height) top = e.clientY - rect.top - tooltip.offsetHeight - 14;
tooltip.style.left = `${Math.max(0, left)}px`;
tooltip.style.top = `${Math.max(0, top)}px`;
}
@@ -217,9 +202,7 @@ endblock %} {% block content %}
}
}
document
.getElementById("show-whitelisted")
.addEventListener("change", render);
document.getElementById("show-whitelisted").addEventListener("change", render);
document.getElementById("graph-refresh").addEventListener("click", loadGraph);
loadGraph();