forked from MrKalzu/traceroute_map
TEMP: Working data pipeline & rendering
This commit is contained in:
parent
f1c3cf8758
commit
964e9b3806
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.db
|
||||
122
app/collector.py
122
app/collector.py
@ -1,102 +1,63 @@
|
||||
#!/usr/bin/env python3.11
|
||||
|
||||
import re
|
||||
import json
|
||||
import ipaddress
|
||||
import uuid
|
||||
import hashlib
|
||||
|
||||
from datetime import datetime
|
||||
|
||||
from .db import Database
|
||||
|
||||
def parse_traceroute_output(output, timestamp):
|
||||
lines = output.strip().split('\n')
|
||||
trace = {}
|
||||
hops = []
|
||||
|
||||
ip_regex = r"\((.*?)\)" # ipaddress are in ()
|
||||
def parse_traceroute_output(data: str, origin: str):
|
||||
lines = data.strip().split("\n")
|
||||
target = lines[0].split()[2]
|
||||
|
||||
target = output.strip().split('\n')[0].split()[2]
|
||||
created = datetime.now().isoformat()
|
||||
|
||||
trace = {"target": target, "created": created, "origin": origin, "hops": []}
|
||||
|
||||
prev_latency = 0
|
||||
|
||||
for line in lines[1:]:
|
||||
hop = {}
|
||||
hop_info = line.split()
|
||||
hop_number = int(hop_info[0])
|
||||
hop_name = None
|
||||
hop_ip = None
|
||||
hop_latency = None
|
||||
print("LINE:", hop_info)
|
||||
try:
|
||||
number, name, ip, latency, _ = hop_info
|
||||
hop = {
|
||||
"created": created,
|
||||
"number": number,
|
||||
"name": name,
|
||||
"ip": ip.strip("()"),
|
||||
"latency": float(latency),
|
||||
}
|
||||
except ValueError:
|
||||
number, name = hop_info
|
||||
hop = {
|
||||
"created": created,
|
||||
"number": number,
|
||||
"name": name,
|
||||
"ip": None,
|
||||
"latency": None,
|
||||
}
|
||||
|
||||
latencies = []
|
||||
|
||||
#print("##### "+str(hop_info))
|
||||
count = 0
|
||||
for part in hop_info[1:]:
|
||||
count += 1
|
||||
|
||||
# source node drops or blocks icmp packages
|
||||
# We will give funny to name to hop for not answering and move on.
|
||||
if part == '*':
|
||||
hop_name = 'unresponsive'
|
||||
hop_ip = 'unresponsive'
|
||||
break
|
||||
|
||||
|
||||
# If first colum is either name or ip-address
|
||||
if count == 1:
|
||||
match = re.search(ip_regex, part)
|
||||
if match:
|
||||
hop_ip = part.strip('()')
|
||||
else:
|
||||
hop_name = part
|
||||
|
||||
# Second colum is ip-address first latency reading
|
||||
if count == 2:
|
||||
if re.search(ip_regex, part):
|
||||
try:
|
||||
_ip = ipaddress.ip_address(part.strip('()'))
|
||||
hop_ip = part.strip('()')
|
||||
except ValueError:
|
||||
pass # Ignore if it's not a valid IP address
|
||||
|
||||
# Rest of the input colums are either latency floats, 'ms' or
|
||||
# reruns of the hop_name and hop_ip...
|
||||
# We only need the latency floats anymore.
|
||||
else:
|
||||
try:
|
||||
latency = float(part)
|
||||
latencies.append(latency)
|
||||
except ValueError:
|
||||
pass
|
||||
|
||||
hop_latency = sum(latencies) / len(latencies) if latencies else None
|
||||
|
||||
hop['hop_number'] = hop_number
|
||||
if not hop_name == None:
|
||||
hop['hop_name'] = hop_name
|
||||
hop['hop_ip'] = hop_ip
|
||||
hop['hop_latency'] = hop_latency
|
||||
hops.append(hop)
|
||||
|
||||
trace['target'] = target
|
||||
trace['timestamp'] = timestamp
|
||||
trace['hops'] = hops
|
||||
trace["hops"].append(hop)
|
||||
|
||||
return trace
|
||||
|
||||
|
||||
def store_traceroute(node, trace):
|
||||
def store_traceroute(trace):
|
||||
db = Database()
|
||||
|
||||
#hops_json = json.dumps(trace['hops'])
|
||||
# hops_json = json.dumps(trace['hops'])
|
||||
|
||||
path_ids = {}
|
||||
|
||||
previous_hop_ip = None
|
||||
previous_hop_latency = None
|
||||
for hop in trace['hops']:
|
||||
hop_number = hop['hop_number']
|
||||
hop_name = hop.get('hop_name')
|
||||
hop_ip = hop.get('hop_ip')
|
||||
hop_latency = hop.get('hop_latency')
|
||||
for hop in trace["hops"]:
|
||||
hop_number = hop["number"]
|
||||
hop_name = hop.get("name")
|
||||
hop_ip = hop.get("ip")
|
||||
hop_latency = hop.get("latency")
|
||||
link_id = None
|
||||
|
||||
# insert links and get their id's
|
||||
@ -112,20 +73,21 @@ def store_traceroute(node, trace):
|
||||
# calculate link latency if possible and store it
|
||||
if link_id and previous_hop_latency:
|
||||
link_latency = hop_latency - previous_hop_latency
|
||||
db.create_latency(link_id, trace['timestamp'], link_latency)
|
||||
db.create_latency(link_id, trace["created"], link_latency)
|
||||
|
||||
# make entry to "Paths" table
|
||||
if path_ids:
|
||||
json_path_ids = json.dumps(path_ids)
|
||||
db.create_path(node, trace['target'], json_path_ids)
|
||||
db.create_path(node, trace["target"], json_path_ids)
|
||||
|
||||
db.end()
|
||||
|
||||
|
||||
|
||||
def generate_node_id():
|
||||
mac = uuid.getnode()
|
||||
mac_str = ':'.join(['{:02x}'.format((mac >> ele) & 0xff) for ele in range(0,8*6,8)][::-1])
|
||||
mac_str = ":".join(
|
||||
["{:02x}".format((mac >> ele) & 0xFF) for ele in range(0, 8 * 6, 8)][::-1]
|
||||
)
|
||||
|
||||
# Hash the MAC address using SHA-256 to generate a unique ID
|
||||
unique_id = hashlib.sha256(mac_str.encode()).hexdigest()
|
||||
|
||||
150
app/db.py
150
app/db.py
@ -12,40 +12,35 @@ class Database:
|
||||
def __init__(self):
|
||||
self.db_file = DB_FILE
|
||||
self.conn = sqlite3.connect(self.db_file, check_same_thread=False)
|
||||
|
||||
# Return fetch() data as Row objects, instead of tuples.
|
||||
self.conn.row_factory = sqlite3.Row
|
||||
|
||||
self.cursor = self.conn.cursor()
|
||||
|
||||
def create_tables(self):
|
||||
self.cursor.executescript("""
|
||||
CREATE TABLE IF NOT EXISTS Links (
|
||||
id INTEGER PRIMARY KEY,
|
||||
source_ip TEXT NOT NULL,
|
||||
destination_ip TEXT NOT NULL,
|
||||
UNIQUE(source_ip, destination_ip)
|
||||
self.cursor.executescript(
|
||||
"""
|
||||
CREATE TABLE IF NOT EXISTS Traces (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
created TEXT NOT NULL,
|
||||
origin TEXT NOT NULL,
|
||||
target TEXT NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS Paths (
|
||||
id INTEGER PRIMARY KEY,
|
||||
node TEXT NOT NULL,
|
||||
target TEXT NOT NULL,
|
||||
hops_json TEXT NOT NULL,
|
||||
UNIQUE(node, target, hops_json)
|
||||
);
|
||||
CREATE TABLE IF NOT EXISTS Hops (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
trace_id INTEGER,
|
||||
created TEXT NOT NULL,
|
||||
number INTEGER NOT NULL,
|
||||
name TEXT,
|
||||
ip TEXT,
|
||||
latency TEXT,
|
||||
|
||||
CREATE TABLE IF NOT EXISTS Latency (
|
||||
id INTEGER PRIMARY KEY,
|
||||
link_id INTEGER NOT NULL,
|
||||
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
latency_ms REAL NOT NULL,
|
||||
FOREIGN KEY (link_id) REFERENCES Links(id)
|
||||
FOREIGN KEY(trace_id) REFERENCES Traces(id)
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS HopDetails (
|
||||
id INTEGER PRIMARY KEY,
|
||||
hop_name TEXT,
|
||||
hop_ip TEXT,
|
||||
hop_latency TEXT
|
||||
);
|
||||
""")
|
||||
"""
|
||||
)
|
||||
|
||||
def end(self):
|
||||
"""Always call this after you're done with the connection / request."""
|
||||
@ -53,71 +48,80 @@ class Database:
|
||||
self.conn.commit()
|
||||
self.conn.close()
|
||||
|
||||
def get_traceroute(self):
|
||||
retval = {}
|
||||
def list_traces(self):
|
||||
# TODO: time filter
|
||||
result = []
|
||||
|
||||
self.cursor.execute('''
|
||||
SELECT target, hops_json
|
||||
FROM Paths
|
||||
''')
|
||||
retval['path'] = self.cursor.fetchall()
|
||||
self.cursor.execute("SELECT * FROM Traces")
|
||||
traces = self.cursor.fetchall()
|
||||
|
||||
self.cursor.execute('''
|
||||
SELECT source_ip, destination_ip
|
||||
FROM Links
|
||||
''')
|
||||
retval['links'] = self.cursor.fetchall()
|
||||
for t in traces:
|
||||
trace = dict(t)
|
||||
|
||||
return retval
|
||||
self.cursor.execute(
|
||||
"SELECT number, name, ip, latency FROM Hops WHERE trace_id = ? ORDER BY number ASC",
|
||||
(trace["id"],),
|
||||
)
|
||||
hops = self.cursor.fetchall()
|
||||
trace["hops"] = hops
|
||||
|
||||
def create_link(self, previous_hop_ip, hop_ip):
|
||||
result.append(trace)
|
||||
|
||||
return result
|
||||
|
||||
def create_trace(self, trace):
|
||||
self.cursor.execute(
|
||||
"INSERT OR IGNORE INTO Links (source_ip, destination_ip) VALUES (?, ?)",
|
||||
(previous_hop_ip, hop_ip)
|
||||
)
|
||||
self.cursor.execute(
|
||||
"SELECT id FROM Links WHERE source_ip = ? AND destination_ip = ?",
|
||||
(previous_hop_ip, hop_ip)
|
||||
"INSERT OR IGNORE INTO Traces (created, origin, target) VALUES (?, ?, ?)",
|
||||
(trace["created"], trace["origin"], trace["target"]),
|
||||
)
|
||||
trace_id = self.cursor.lastrowid
|
||||
|
||||
for hop in trace["hops"]:
|
||||
self.cursor.execute(
|
||||
"INSERT OR IGNORE INTO Hops (trace_id, created, number, name, ip, latency) VALUES (?, ?, ?, ?, ?, ?)",
|
||||
(
|
||||
trace_id,
|
||||
hop["created"],
|
||||
hop["number"],
|
||||
hop["name"],
|
||||
hop["ip"],
|
||||
hop["latency"],
|
||||
),
|
||||
)
|
||||
|
||||
return self.cursor.fetchone()
|
||||
|
||||
def create_hop(self, name, ip, latency):
|
||||
self.cursor.execute(
|
||||
"INSERT INTO HopDetails (hop_name, hop_ip, hop_latency) VALUES (?, ?, ?)",
|
||||
(name, ip, latency)
|
||||
"INSERT INTO Hops (name, ip, latency) VALUES (?, ?, ?)",
|
||||
(name, ip, latency),
|
||||
)
|
||||
|
||||
def create_latency(self, link_id, timestamp, link_latency):
|
||||
self.cursor.execute(
|
||||
"INSERT INTO Latency (link_id, timestamp, latency_ms) VALUES (?, NOW(), ?)",
|
||||
(link_id, timestamp, link_latency)
|
||||
"INSERT INTO Latency (link_id, timestamp, latency_ms) VALUES (?, ?, ?)",
|
||||
(link_id, timestamp, link_latency),
|
||||
)
|
||||
|
||||
def create_path(self, node, target, json):
|
||||
self.cursor.execute(
|
||||
"INSERT OR IGNORE INTO Paths (node, target, hops_json) VALUES (?, ?, ?)",
|
||||
(node, target, json)
|
||||
(node, target, json),
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
def ensure_table_setup():
|
||||
db = Database()
|
||||
db.create_tables()
|
||||
db.end()
|
||||
|
||||
|
||||
####################################################################
|
||||
####################################################################
|
||||
####################################################################
|
||||
####################################################################
|
||||
|
||||
|
||||
|
||||
####################################################################
|
||||
####################################################################
|
||||
####################################################################
|
||||
####################################################################
|
||||
# Temp testing. Fancy decorator stuff.
|
||||
|
||||
def with_connection(func):
|
||||
@wraps(func)
|
||||
def wrapped(*args, **kwargs):
|
||||
@ -130,12 +134,14 @@ def with_connection(func):
|
||||
conn.close()
|
||||
|
||||
return result
|
||||
|
||||
return wrapped
|
||||
|
||||
|
||||
@with_connection
|
||||
def init_db(cursor: Cursor):
|
||||
cursor.executescript("""
|
||||
cursor.executescript(
|
||||
"""
|
||||
CREATE TABLE IF NOT EXISTS Links (
|
||||
id INTEGER PRIMARY KEY,
|
||||
source_ip TEXT NOT NULL,
|
||||
@ -165,18 +171,22 @@ def init_db(cursor: Cursor):
|
||||
hop_ip TEXT,
|
||||
hop_latency TEXT
|
||||
);
|
||||
""")
|
||||
"""
|
||||
)
|
||||
|
||||
|
||||
@with_connection
|
||||
def create_link(cursor: Cursor, previous_hop_ip: str, hop_ip: str):
|
||||
def insert_hop(cursor: Cursor, previous_hop_ip: str, hop_ip: str):
|
||||
"""Insert a new hop and return related Link id"""
|
||||
|
||||
cursor.execute("""
|
||||
INSERT OR IGNORE INTO Links (source_ip, destination_ip) VALUES (?, ?)
|
||||
""", (previous_hop_ip, hop_ip))
|
||||
cursor.execute(
|
||||
"INSERT OR IGNORE INTO Links (source_ip, destination_ip) VALUES (?, ?)",
|
||||
(previous_hop_ip, hop_ip),
|
||||
)
|
||||
|
||||
cursor.execute("""
|
||||
SELECT id FROM Links WHERE source_ip = ? AND destination_ip = ?
|
||||
""", (previous_hop_ip, hop_ip))
|
||||
cursor.execute(
|
||||
"SELECT id FROM Links WHERE source_ip = ? AND destination_ip = ?",
|
||||
(previous_hop_ip, hop_ip),
|
||||
)
|
||||
|
||||
return cursor.fetchone()
|
||||
|
||||
34
app/main.py
34
app/main.py
@ -1,10 +1,8 @@
|
||||
from fastapi import Request, FastAPI
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
|
||||
from datetime import datetime
|
||||
|
||||
from .collector import parse_traceroute_output, store_traceroute
|
||||
from .db import ensure_table_setup
|
||||
from .db import Database, ensure_table_setup
|
||||
|
||||
from pprint import pprint as print
|
||||
|
||||
@ -14,7 +12,8 @@ ensure_table_setup()
|
||||
|
||||
# Setup web framework thingies
|
||||
app = FastAPI()
|
||||
app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||
app.mount("/static", StaticFiles(directory="app/static"), name="static")
|
||||
|
||||
|
||||
@app.get("/")
|
||||
def read_root():
|
||||
@ -33,23 +32,36 @@ def read_root():
|
||||
"",
|
||||
"",
|
||||
"END OF TRANSMISSION",
|
||||
] + [None]*800
|
||||
]
|
||||
+ [None] * 800,
|
||||
}
|
||||
|
||||
|
||||
@app.post("/trace/{hostname}")
|
||||
async def create_trace(hostname: str, request: Request):
|
||||
@app.get("/trace/")
|
||||
def list_traces():
|
||||
db = Database()
|
||||
|
||||
trace = db.list_traces()
|
||||
|
||||
db.end()
|
||||
return trace
|
||||
|
||||
|
||||
@app.post("/trace/{origin}")
|
||||
async def create_trace(origin: str, request: Request):
|
||||
raw_data = await request.body()
|
||||
data = raw_data.decode("utf-8", "ignore")
|
||||
|
||||
print(f"Received data from {hostname}:")
|
||||
print(f"Received data from {origin}:")
|
||||
print(data)
|
||||
|
||||
trace = parse_traceroute_output(data, datetime.now())
|
||||
trace = parse_traceroute_output(data, origin)
|
||||
|
||||
print("Parsed data:")
|
||||
print(trace)
|
||||
|
||||
store_traceroute(hostname, trace)
|
||||
db = Database()
|
||||
db.create_trace(trace)
|
||||
db.end()
|
||||
|
||||
return {"status": "ok" }
|
||||
return {"status": "ok"}
|
||||
|
||||
2
app/static/d3.v7.min.js
vendored
Normal file
2
app/static/d3.v7.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -4,53 +4,11 @@
|
||||
<title>Kalzu</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js" integrity="sha512-iiPEYww3QXZU5C795JnnINBRNgHqDnRHs9mA7aJoqx4pNE4u3CknCDGmePHFoHtKR/6C9aIcRFa+HJ6obtlteQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js" integrity="sha512-tjMBhL9fLMcqoccPOwpRiIQIOAyUh18lWUlUvE10zvG1UNMfxUC4qSERmUq+VF30iavIyqs/q6fSP2o475FAUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="/static/d3.v7.min.js"></script>
|
||||
</head>
|
||||
<body style="background: lightgrey">
|
||||
<div id="container" style="width: 97%; height: 95vh; background: white; margin: auto; margin-top: 32px"></div>
|
||||
<script>
|
||||
|
||||
const hops = [
|
||||
["_gateway", "(192.168.0.1) 0.549 ms"],
|
||||
["83-148-246-178.static.lounea.fi", "(83.148.246.178) 1.200 ms"],
|
||||
["*"],
|
||||
["*"],
|
||||
["*"],
|
||||
["86-60-254-198.static.lounea.fi", "(86.60.254.198) 3.719 ms"],
|
||||
["72.14.194.142", " (72.14.194.142) 3.716 ms"],
|
||||
["142.251.53.71", " (142.251.53.71) 3.704 ms"],
|
||||
["142.250.229.87", " (142.250.229.87) 4.603 ms"],
|
||||
["mad06s09-in-f142.1e100.net", " (216.58.210.142) 3.700 ms"],
|
||||
];
|
||||
|
||||
console.log("Hops!", hops)
|
||||
|
||||
|
||||
// Create a graphology graph
|
||||
const graph = new graphology.Graph();
|
||||
|
||||
hops.forEach((hop, i) => {
|
||||
const [ label, extra ] = hop;
|
||||
|
||||
const size = i === 0 ? 15 : 10;
|
||||
const color = "green"
|
||||
|
||||
graph.addNode(i, { label, x: 0, y: i, size, color });
|
||||
if (i > 0) {
|
||||
|
||||
graph.addEdge(i, i-1, { size: 2, color: "purple" });
|
||||
}
|
||||
});
|
||||
|
||||
// graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
|
||||
// graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
|
||||
// graph.addEdge("1", "2", { size: 5, color: "purple" });
|
||||
|
||||
// Instantiate sigma.js and render the graph
|
||||
const sigmaInstance = new Sigma(graph, document.getElementById("container"));
|
||||
</script>
|
||||
<body style="background: #EEE">
|
||||
<div id="container"></div>
|
||||
<script src="/static/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
308
app/static/index.js
Normal file
308
app/static/index.js
Normal file
@ -0,0 +1,308 @@
|
||||
const linkArc = (d) => {
|
||||
const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
|
||||
return `
|
||||
M${d.source.x},${d.source.y}
|
||||
A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
|
||||
`;
|
||||
};
|
||||
|
||||
const drag = (simulation) => {
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
}
|
||||
|
||||
return d3
|
||||
.drag()
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended);
|
||||
};
|
||||
|
||||
const drawChart = (data) => {
|
||||
// Specify the dimensions of the chart.
|
||||
const width = 1600;
|
||||
const height = 1200;
|
||||
|
||||
// Specify the color scale.
|
||||
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||
|
||||
// The force simulation mutates links and nodes, so create a copy
|
||||
// so that re-evaluating this cell produces the same result.
|
||||
const links = data.links.map((d) => ({ ...d }));
|
||||
const nodes = data.nodes.map((d) => ({ ...d }));
|
||||
|
||||
// Create a simulation with several forces.
|
||||
const simulation = d3
|
||||
.forceSimulation(nodes)
|
||||
.force(
|
||||
"link",
|
||||
d3.forceLink(links).id((d) => d.id),
|
||||
)
|
||||
.force("charge", d3.forceManyBody())
|
||||
.force("x", d3.forceX())
|
||||
.force("y", d3.forceY());
|
||||
|
||||
// Create the SVG container.
|
||||
const svg = d3
|
||||
.create("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||
.attr("style", "max-width: 100%; height: auto;");
|
||||
|
||||
// Add a line for each link, and a circle for each node.
|
||||
const link = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#999")
|
||||
.attr("stroke-opacity", 0.6)
|
||||
.selectAll("line")
|
||||
.data(links)
|
||||
.join("line")
|
||||
.attr("stroke-width", 1); // (d) => Math.sqrt(d.value));
|
||||
|
||||
const node = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#fff")
|
||||
.attr("stroke-width", 1.5)
|
||||
.selectAll("circle")
|
||||
.data(nodes)
|
||||
.join("circle")
|
||||
.attr("r", 5)
|
||||
.attr("fill", (d) => color(d.group));
|
||||
|
||||
node.append("title").text((d) => d.id);
|
||||
|
||||
// Add a drag behavior.
|
||||
node.call(
|
||||
d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended),
|
||||
);
|
||||
|
||||
// Set the position attributes of links and nodes each time the simulation ticks.
|
||||
simulation.on("tick", () => {
|
||||
link
|
||||
.attr("x1", (d) => d.source.x)
|
||||
.attr("y1", (d) => d.source.y)
|
||||
.attr("x2", (d) => d.target.x)
|
||||
.attr("y2", (d) => d.target.y);
|
||||
|
||||
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
|
||||
});
|
||||
|
||||
// Reheat the simulation when drag starts, and fix the subject position.
|
||||
function dragstarted(event) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
event.subject.fx = event.subject.x;
|
||||
event.subject.fy = event.subject.y;
|
||||
}
|
||||
|
||||
// Update the subject (dragged node) position during drag.
|
||||
function dragged(event) {
|
||||
event.subject.fx = event.x;
|
||||
event.subject.fy = event.y;
|
||||
}
|
||||
|
||||
// Restore the target alpha so the simulation cools after dragging ends.
|
||||
// Unfix the subject position now that it’s no longer being dragged.
|
||||
function dragended(event) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
event.subject.fx = null;
|
||||
event.subject.fy = null;
|
||||
}
|
||||
|
||||
// When this cell is re-run, stop the previous simulation. (This doesn’t
|
||||
// really matter since the target alpha is zero and the simulation will
|
||||
// stop naturally, but it’s a good practice.)
|
||||
// invalidation.then(() => simulation.stop());
|
||||
|
||||
return svg.node();
|
||||
};
|
||||
|
||||
const drawChart2 = (data) => {
|
||||
const width = 1600;
|
||||
const height = 1200;
|
||||
const types = Array.from(new Set(data.map((d) => d.type)));
|
||||
const nodes = Array.from(
|
||||
new Set(data.flatMap((l) => [l.source, l.target])),
|
||||
(id) => ({ id }),
|
||||
);
|
||||
const links = data.map((d) => Object.create(d));
|
||||
|
||||
const color = d3.scaleOrdinal(types, d3.schemeCategory10);
|
||||
|
||||
const simulation = d3
|
||||
.forceSimulation(nodes)
|
||||
.force(
|
||||
"link",
|
||||
d3.forceLink(links).id((d) => d.id),
|
||||
)
|
||||
.force("charge", d3.forceManyBody().strength(-400))
|
||||
.force("x", d3.forceX())
|
||||
.force("y", d3.forceY());
|
||||
|
||||
const svg = d3
|
||||
.create("svg")
|
||||
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;");
|
||||
|
||||
// Per-type markers, as they don't inherit styles.
|
||||
svg
|
||||
.append("defs")
|
||||
.selectAll("marker")
|
||||
.data(types)
|
||||
.join("marker")
|
||||
.attr("id", (d) => `arrow-${d}`)
|
||||
.attr("viewBox", "0 -5 10 10")
|
||||
.attr("refX", 15)
|
||||
.attr("refY", -0.5)
|
||||
.attr("markerWidth", 6)
|
||||
.attr("markerHeight", 6)
|
||||
.attr("orient", "auto")
|
||||
.append("path")
|
||||
.attr("fill", color)
|
||||
.attr("d", "M0,-5L10,0L0,5");
|
||||
|
||||
const link = svg
|
||||
.append("g")
|
||||
.attr("fill", "none")
|
||||
.attr("stroke-width", 1.5)
|
||||
.selectAll("path")
|
||||
.data(links)
|
||||
.join("path")
|
||||
.attr("stroke", (d) => color(d.type))
|
||||
.attr("marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location)})`);
|
||||
|
||||
const node = svg
|
||||
.append("g")
|
||||
.attr("fill", "currentColor")
|
||||
.attr("stroke-linecap", "round")
|
||||
.attr("stroke-linejoin", "round")
|
||||
.selectAll("g")
|
||||
.data(nodes)
|
||||
.join("g")
|
||||
.call(drag(simulation));
|
||||
|
||||
node
|
||||
.append("circle")
|
||||
.attr("stroke", "white")
|
||||
.attr("stroke-width", 1.5)
|
||||
.attr("r", 4);
|
||||
|
||||
node
|
||||
.append("text")
|
||||
.attr("x", 8)
|
||||
.attr("y", "0.31em")
|
||||
.text((d) => (d.id.endsWith("*") ? "*" : d.id))
|
||||
.clone(true)
|
||||
.lower()
|
||||
.attr("fill", "none")
|
||||
.attr("stroke", "white")
|
||||
.attr("stroke-width", 3);
|
||||
|
||||
simulation.on("tick", () => {
|
||||
link.attr("d", linkArc);
|
||||
node.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
||||
});
|
||||
|
||||
// invalidation.then(() => simulation.stop());
|
||||
|
||||
return Object.assign(svg.node(), { scales: { color } });
|
||||
};
|
||||
|
||||
const parseNodesAndLinks = (traces) => {
|
||||
const result = {
|
||||
nodes: [],
|
||||
links: [],
|
||||
};
|
||||
|
||||
traces.forEach((trace) => {
|
||||
let prevId = null;
|
||||
|
||||
const getId = (hop) => {
|
||||
if (prevId === null) {
|
||||
return trace.origin;
|
||||
}
|
||||
if (hop.name === "*") {
|
||||
return `${trace.id}-${hop.number}-*`;
|
||||
}
|
||||
|
||||
return hop.ip;
|
||||
};
|
||||
|
||||
trace.hops.forEach((hop) => {
|
||||
const id = getId(hop);
|
||||
|
||||
// New node
|
||||
result.nodes.push({
|
||||
id: id,
|
||||
group: trace.origin,
|
||||
radius: 8,
|
||||
value: hop.name || "name?",
|
||||
origin: trace.origin,
|
||||
});
|
||||
|
||||
if (prevId) {
|
||||
// New link
|
||||
result.links.push({
|
||||
source: prevId,
|
||||
target: id,
|
||||
type: trace.origin,
|
||||
group: trace.origin,
|
||||
});
|
||||
}
|
||||
|
||||
prevId = id;
|
||||
});
|
||||
|
||||
// Last "destination" node
|
||||
result.nodes.push({
|
||||
id: trace.id,
|
||||
group: trace.origin,
|
||||
radius: 8,
|
||||
value: trace.target,
|
||||
});
|
||||
|
||||
if (prevId) {
|
||||
// New link
|
||||
result.links.push({
|
||||
source: prevId,
|
||||
target: trace.target,
|
||||
type: trace.origin,
|
||||
group: trace.origin,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// { id: ip, group: origin, radius: 2 }
|
||||
// { source: prev.ip, target: ip, value: latency }
|
||||
return result;
|
||||
};
|
||||
|
||||
async function main() {
|
||||
const response = await fetch("/trace/");
|
||||
const traces = await response.json();
|
||||
|
||||
console.log("Traces:", traces);
|
||||
const data = parseNodesAndLinks(traces);
|
||||
|
||||
console.log("Data:", data);
|
||||
const chart = drawChart2(data.links);
|
||||
|
||||
container.append(chart);
|
||||
}
|
||||
|
||||
main();
|
||||
Binary file not shown.
Loading…
Reference in New Issue
Block a user