feat: add IPv4 address space graph with interactive tooltip
This commit is contained in:
zwitschi committed
1 parent
51f57f7a04
commit
94f62ae591
6 files changed
+609
-3
No files matched your search
@@ -0,0 +1,227 @@
|
||||
{% 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.
|
||||
</p>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<div class="graph-controls">
|
||||
<label class="check" style="margin-top: 0">
|
||||
<input type="checkbox" id="show-whitelisted" checked />
|
||||
Show whitelisted
|
||||
</label>
|
||||
<span class="legend">
|
||||
<span class="sw red"></span> Blocked
|
||||
<span class="sw green"></span> Whitelisted
|
||||
<span class="sw plain"></span> Unlisted
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn ghost" id="graph-refresh">↻ Refresh</button>
|
||||
</div>
|
||||
<div class="graph-wrap" id="graph-wrap">
|
||||
<canvas id="graph-canvas" width="4096" height="4096"></canvas>
|
||||
<div class="graph-overlay" id="graph-overlay"></div>
|
||||
<div class="graph-tooltip hidden" id="graph-tooltip"></div>
|
||||
</div>
|
||||
<p class="muted mono" id="graph-stats">Loading…</p>
|
||||
</div>
|
||||
{% endblock %} {% block scripts %}
|
||||
<script>
|
||||
// Layout mirrors plot.py: 16x16 grid of /8 tiles, each 256x256 px (one pixel
|
||||
// per /24). Blocked ranges override whitelisted ranges.
|
||||
const TILE = 16;
|
||||
const SIZE = 256;
|
||||
const TOTAL = TILE * SIZE; // 4096
|
||||
|
||||
const V_UNLISTED = 0;
|
||||
const V_WHITELISTED = 1;
|
||||
const V_BLOCKED = 2;
|
||||
const COLOR_WHITELISTED = "#43a047";
|
||||
const COLOR_BLOCKED = "#e53935";
|
||||
|
||||
const canvas = document.getElementById("graph-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const overlay = document.getElementById("graph-overlay");
|
||||
const tooltip = document.getElementById("graph-tooltip");
|
||||
const stats = document.getElementById("graph-stats");
|
||||
|
||||
// /24 index (0..2^24-1) -> value (whitelisted/blocked)
|
||||
const marked = new Map();
|
||||
|
||||
function parseCIDR(s) {
|
||||
const m = String(s)
|
||||
.trim()
|
||||
.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(?:\/(\d{1,2}))?$/);
|
||||
if (!m) return null;
|
||||
const o = [m[1], m[2], m[3], m[4]].map(Number);
|
||||
if (o.some((n) => n > 255)) return null;
|
||||
const prefix = m[5] === undefined ? 32 : Number(m[5]);
|
||||
if (prefix < 0 || prefix > 32) return null;
|
||||
const ip = ((o[0] << 24) | (o[1] << 16) | (o[2] << 8) | o[3]) >>> 0;
|
||||
const mask = prefix === 0 ? 0 : (0xffffffff << (32 - prefix)) >>> 0;
|
||||
const network = (ip & mask) >>> 0;
|
||||
const broadcast = (ip | (~mask >>> 0)) >>> 0;
|
||||
return {
|
||||
first24: network >>> 8,
|
||||
last24: broadcast >>> 8,
|
||||
label: `${o[0]}.${o[1]}.${o[2]}.${o[3]}/${prefix}`,
|
||||
};
|
||||
}
|
||||
|
||||
function idxToPos(idx) {
|
||||
const a = (idx >>> 16) & 0xff;
|
||||
const b = (idx >>> 8) & 0xff;
|
||||
const c = idx & 0xff;
|
||||
return {
|
||||
x: (a % TILE) * SIZE + b,
|
||||
y: Math.floor(a / TILE) * SIZE + c,
|
||||
};
|
||||
}
|
||||
|
||||
function markRange(range, value) {
|
||||
for (let idx = range.first24; idx <= range.last24; idx++) {
|
||||
const prev = marked.get(idx);
|
||||
if (prev === undefined || value > prev) marked.set(idx, value);
|
||||
}
|
||||
}
|
||||
|
||||
function drawOverlay() {
|
||||
overlay.innerHTML = "";
|
||||
// /8 tile borders
|
||||
for (let i = 0; i <= TILE; i++) {
|
||||
const pct = (i / TILE) * 100;
|
||||
const v = el("div", { class: "g-line g-v", style: `left:${pct}%` });
|
||||
const h = el("div", { class: "g-line g-h", style: `top:${pct}%` });
|
||||
overlay.append(v, h);
|
||||
}
|
||||
// first-octet labels, one per /8 tile
|
||||
for (let a = 0; a < 256; a++) {
|
||||
const col = a % TILE;
|
||||
const row = Math.floor(a / TILE);
|
||||
overlay.append(
|
||||
el("div", {
|
||||
class: "g-label",
|
||||
style: `left:${(col / TILE) * 100}%;top:${(row / TILE) * 100}%`,
|
||||
text: `${a}.0.0.0/8`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
const showWl = document.getElementById("show-whitelisted").checked;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(0, 0, TOTAL, TOTAL);
|
||||
for (const [idx, value] of marked) {
|
||||
if (!showWl && value === V_WHITELISTED) continue;
|
||||
const p = idxToPos(idx);
|
||||
ctx.fillStyle = value === V_BLOCKED ? COLOR_BLOCKED : COLOR_WHITELISTED;
|
||||
ctx.fillRect(p.x, p.y, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// --- hover tooltip ------------------------------------------------------
|
||||
|
||||
function matchesIn(ranges, idx) {
|
||||
const out = [];
|
||||
for (const r of ranges) {
|
||||
if (idx >= r.first24 && idx <= r.last24) out.push(r.label);
|
||||
if (out.length >= 12) break;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function showTooltip(e, x, y) {
|
||||
const tileCol = Math.floor(x / SIZE);
|
||||
const tileRow = Math.floor(y / SIZE);
|
||||
const a = tileRow * TILE + tileCol;
|
||||
const b = x % SIZE;
|
||||
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),
|
||||
);
|
||||
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") }),
|
||||
);
|
||||
} else {
|
||||
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;
|
||||
tooltip.style.left = `${Math.max(0, left)}px`;
|
||||
tooltip.style.top = `${Math.max(0, top)}px`;
|
||||
}
|
||||
|
||||
canvas.addEventListener("mousemove", (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const lx = ((e.clientX - rect.left) * TOTAL) / rect.width;
|
||||
const ly = ((e.clientY - rect.top) * TOTAL) / rect.height;
|
||||
const x = Math.floor(lx);
|
||||
const y = Math.floor(ly);
|
||||
if (x < 0 || x >= TOTAL || y < 0 || y >= TOTAL) {
|
||||
tooltip.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
showTooltip(e, x, y);
|
||||
});
|
||||
|
||||
canvas.addEventListener("mouseleave", () => {
|
||||
tooltip.classList.add("hidden");
|
||||
});
|
||||
|
||||
// --- load ---------------------------------------------------------------
|
||||
|
||||
let blockedRanges = [];
|
||||
let whitelistedRanges = [];
|
||||
|
||||
async function loadGraph() {
|
||||
try {
|
||||
const d = await api("/api/graph/ipv4");
|
||||
blockedRanges = (d.blocked || []).map(parseCIDR).filter(Boolean);
|
||||
whitelistedRanges = (d.whitelisted || []).map(parseCIDR).filter(Boolean);
|
||||
marked.clear();
|
||||
for (const r of whitelistedRanges) markRange(r, V_WHITELISTED);
|
||||
for (const r of blockedRanges) markRange(r, V_BLOCKED);
|
||||
render();
|
||||
drawOverlay();
|
||||
const c = d.counts || {};
|
||||
stats.textContent = `blocked targets: ${c.blocked ?? blockedRanges.length} · whitelisted ranges: ${c.whitelisted ?? whitelistedRanges.length} · marked /24 pixels: ${marked.size}`;
|
||||
} catch (err) {
|
||||
stats.textContent = `failed to load graph data: ${err.message}`;
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("show-whitelisted")
|
||||
.addEventListener("change", render);
|
||||
document.getElementById("graph-refresh").addEventListener("click", loadGraph);
|
||||
|
||||
loadGraph();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in new issue
Block a user