211 lines
7.3 KiB
HTML
211 lines
7.3 KiB
HTML
{% 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 = "#0c0c0c";
|
||
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 %}
|