refactor: extract 3,432 lines of embedded HTML to include_str!()
Move HTML content from Rust raw string literals into proper .html files, replacing each _html.rs with a 1-line include_str!() call. - runtime-dashboard: dashboard.html (511), actors.html (739), distribution.html (746) - simulation-dashboard: dashboard.html (1,436) Enables proper HTML syntax highlighting and linting in editors. Authored by Claude, lovingly guided by Zachery Aaron Shores-Chmielewski
This commit is contained in:
Claude
parent
3a6f124379
commit
c0b7449430
8 changed files with 3715 additions and 3715 deletions
739
crates/runtime-dashboard/src/actors.html
Normal file
739
crates/runtime-dashboard/src/actors.html
Normal file
|
|
@ -0,0 +1,739 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Swactor Runtime – Actors</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
||||||
|
}
|
||||||
|
.header-left { display: flex; align-items: center; }
|
||||||
|
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
||||||
|
.status-dot {
|
||||||
|
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
||||||
|
display: inline-block; margin-left: 8px; vertical-align: middle;
|
||||||
|
}
|
||||||
|
.status-dot.disconnected { background: #f44336; }
|
||||||
|
.status-dot.done { background: #ff9800; }
|
||||||
|
.status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.replay-badge {
|
||||||
|
display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
|
||||||
|
padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.replay-badge.visible { display: inline-block; }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
||||||
|
.nav-link {
|
||||||
|
color: #888; text-decoration: none; font-size: 12px;
|
||||||
|
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: #e0e0e0; }
|
||||||
|
.nav-link.active { color: #fff; background: #2a2d3e; }
|
||||||
|
|
||||||
|
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||||
|
|
||||||
|
.progress-bar-wrap {
|
||||||
|
display: none; width: 100%; height: 3px; background: #2a2d3e;
|
||||||
|
}
|
||||||
|
.progress-bar-wrap.visible { display: block; }
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px; padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
||||||
|
padding: 14px; overflow: hidden;
|
||||||
|
}
|
||||||
|
.panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
|
||||||
|
|
||||||
|
.full-width { grid-column: 1 / -1; }
|
||||||
|
|
||||||
|
.stats-cards {
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
||||||
|
}
|
||||||
|
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
||||||
|
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
||||||
|
|
||||||
|
canvas { width: 100%; height: 200px; }
|
||||||
|
|
||||||
|
.search-wrap { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
|
||||||
|
.search-input {
|
||||||
|
background: #1c1f2e; border: 1px solid #2a2d3e; color: #e0e0e0;
|
||||||
|
padding: 6px 10px; border-radius: 4px; font-family: inherit;
|
||||||
|
font-size: 12px; width: 300px; outline: none;
|
||||||
|
}
|
||||||
|
.search-input:focus { border-color: #6366f1; }
|
||||||
|
.search-info { color: #555; font-size: 11px; }
|
||||||
|
|
||||||
|
.actor-list-wrap { max-height: 500px; overflow-y: auto; }
|
||||||
|
.actor-list-wrap table { width: 100%; border-collapse: collapse; }
|
||||||
|
.actor-list-wrap th, .actor-list-wrap td {
|
||||||
|
padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
|
||||||
|
}
|
||||||
|
.actor-list-wrap th {
|
||||||
|
color: #888; font-weight: 500; position: sticky; top: 0; background: #161822;
|
||||||
|
}
|
||||||
|
.sortable { cursor: pointer; user-select: none; }
|
||||||
|
.sortable:hover { color: #e0e0e0; }
|
||||||
|
.sort-arrow { font-size: 10px; margin-left: 4px; color: #6366f1; }
|
||||||
|
|
||||||
|
.depth-bar {
|
||||||
|
height: 8px; border-radius: 2px; max-width: 120px; min-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-type { color: #4caf50; }
|
||||||
|
.msg-type.none { color: #555; font-style: italic; }
|
||||||
|
|
||||||
|
tr.focused { background: #1c1f2e; }
|
||||||
|
tr.clickable { cursor: pointer; }
|
||||||
|
tr.clickable:hover { background: #1a1d2c; }
|
||||||
|
|
||||||
|
.detail-panel { display: none; }
|
||||||
|
.detail-panel.visible { display: block; }
|
||||||
|
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
||||||
|
.detail-close {
|
||||||
|
background: none; border: 1px solid #2a2d3e; color: #888; border-radius: 3px;
|
||||||
|
padding: 2px 8px; cursor: pointer; font-family: inherit; font-size: 11px;
|
||||||
|
}
|
||||||
|
.detail-close:hover { color: #e0e0e0; border-color: #555; }
|
||||||
|
.detail-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.detail-item { background: #1c1f2e; border-radius: 4px; padding: 8px 10px; }
|
||||||
|
.detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
|
||||||
|
.detail-item .d-value { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
|
||||||
|
.poisoned-badge {
|
||||||
|
background: #f44336; color: #fff; font-size: 10px; font-weight: 700;
|
||||||
|
padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.healthy-badge { color: #4caf50; font-size: 12px; }
|
||||||
|
canvas.sparkline { width: 100%; height: 60px; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: #0f1117; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h1>
|
||||||
|
Swactor Runtime Dashboard
|
||||||
|
<span id="statusDot" class="status-dot"></span>
|
||||||
|
<span id="replayBadge" class="replay-badge">REPLAY</span>
|
||||||
|
</h1>
|
||||||
|
<nav class="nav-links">
|
||||||
|
<a href="/" class="nav-link">Overview</a>
|
||||||
|
<a href="/actors" class="nav-link active">Actors</a>
|
||||||
|
<a href="/distribution" class="nav-link">Distribution</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
|
||||||
|
<span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
|
||||||
|
<span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="progressBarWrap" class="progress-bar-wrap">
|
||||||
|
<div id="progressFill" class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<!-- Stat cards -->
|
||||||
|
<div class="panel full-width">
|
||||||
|
<h2>Actor Stats</h2>
|
||||||
|
<div class="stats-cards">
|
||||||
|
<div class="stat-card"><div class="value" id="statTotal">0</div><div class="label">Total Actors</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statAvgMbox">0</div><div class="label">Avg Mailbox</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statMaxMbox">0</div><div class="label">Max Mailbox</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statActiveWorkers">0</div><div class="label">Active Workers</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mailbox depth distribution -->
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Mailbox Depth Distribution</h2>
|
||||||
|
<canvas id="depthChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actors per worker -->
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Actors per Worker</h2>
|
||||||
|
<canvas id="workerChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actor table -->
|
||||||
|
<div class="panel full-width">
|
||||||
|
<h2>All Actors <span id="actorCount" style="color:#555;font-weight:400;"></span></h2>
|
||||||
|
<div class="search-wrap">
|
||||||
|
<input type="text" id="actorSearch" class="search-input" placeholder="Filter by address or worker..." />
|
||||||
|
<span id="searchInfo" class="search-info"></span>
|
||||||
|
</div>
|
||||||
|
<div class="actor-list-wrap">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="sortable" data-sort="address">Address <span id="sortArrowAddress" class="sort-arrow"></span></th>
|
||||||
|
<th class="sortable" data-sort="worker">Worker <span id="sortArrowWorker" class="sort-arrow"></span></th>
|
||||||
|
<th class="sortable" data-sort="mailbox">Mailbox <span id="sortArrowMailbox" class="sort-arrow"></span></th>
|
||||||
|
<th class="sortable" data-sort="msgs">Msgs <span id="sortArrowMsgs" class="sort-arrow"></span></th>
|
||||||
|
<th>Last Msg</th>
|
||||||
|
<th>Depth</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="actorTableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actor detail panel -->
|
||||||
|
<div id="detailPanel" class="panel full-width detail-panel">
|
||||||
|
<div class="detail-header">
|
||||||
|
<h2>Actor Detail <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
|
||||||
|
<button class="detail-close" id="detailClose">Close</button>
|
||||||
|
</div>
|
||||||
|
<div class="detail-grid">
|
||||||
|
<div class="detail-item"><div class="d-label">Full Address</div><div class="d-value" id="detailFullAddr" style="font-size:11px;"></div></div>
|
||||||
|
<div class="detail-item"><div class="d-label">Worker</div><div class="d-value" id="detailWorker"></div></div>
|
||||||
|
<div class="detail-item"><div class="d-label">Mailbox Depth</div><div class="d-value" id="detailMailbox"></div></div>
|
||||||
|
<div class="detail-item"><div class="d-label">Messages Processed</div><div class="d-value" id="detailMsgCount"></div></div>
|
||||||
|
<div class="detail-item"><div class="d-label">Last Message Type</div><div class="d-value" id="detailLastMsg"></div></div>
|
||||||
|
<div class="detail-item"><div class="d-label">Status</div><div class="d-value" id="detailStatus"></div></div>
|
||||||
|
</div>
|
||||||
|
<h2>Mailbox Depth History</h2>
|
||||||
|
<canvas id="sparkline" class="sparkline"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
||||||
|
var isReplay = (DASHBOARD_MODE === 'replay');
|
||||||
|
var lastUptimeMs = null;
|
||||||
|
var lastStatsTime = null;
|
||||||
|
|
||||||
|
var dot = document.getElementById('statusDot');
|
||||||
|
var uptimeLabel = document.getElementById('uptimeLabel');
|
||||||
|
var replayBadge = document.getElementById('replayBadge');
|
||||||
|
var replaySpeed = document.getElementById('replaySpeed');
|
||||||
|
var replayPct = document.getElementById('replayPct');
|
||||||
|
var progressBarWrap = document.getElementById('progressBarWrap');
|
||||||
|
var progressFill = document.getElementById('progressFill');
|
||||||
|
|
||||||
|
if (isReplay) {
|
||||||
|
replayBadge.className = 'replay-badge visible';
|
||||||
|
progressBarWrap.className = 'progress-bar-wrap visible';
|
||||||
|
dot.className = 'status-dot replaying';
|
||||||
|
uptimeLabel.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUptime() {
|
||||||
|
if (isReplay) return;
|
||||||
|
var up = lastUptimeMs;
|
||||||
|
if (up !== null && lastStatsTime !== null) {
|
||||||
|
up += (Date.now() - lastStatsTime);
|
||||||
|
}
|
||||||
|
if (up === null) { uptimeLabel.textContent = ''; return; }
|
||||||
|
var s = Math.floor(up / 1000);
|
||||||
|
var d = Math.floor(s / 86400);
|
||||||
|
var h = Math.floor((s % 86400) / 3600);
|
||||||
|
var m = Math.floor((s % 3600) / 60);
|
||||||
|
var sec = s % 60;
|
||||||
|
var parts = [];
|
||||||
|
if (d > 0) parts.push(d + 'd');
|
||||||
|
if (h > 0 || d > 0) parts.push(h + 'h');
|
||||||
|
parts.push(m + 'm');
|
||||||
|
parts.push(sec + 's');
|
||||||
|
uptimeLabel.textContent = parts.join(' ');
|
||||||
|
}
|
||||||
|
setInterval(updateUptime, 1000);
|
||||||
|
|
||||||
|
// ── State ──────────────────────────────────────────────
|
||||||
|
var currentActors = [];
|
||||||
|
var sortCol = 'worker';
|
||||||
|
var sortAsc = true;
|
||||||
|
var searchTimer = null;
|
||||||
|
var focusedAddrHex = null;
|
||||||
|
var depthHistory = {};
|
||||||
|
var HISTORY_MAX = 120;
|
||||||
|
|
||||||
|
var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────
|
||||||
|
function addrToHex(addr) {
|
||||||
|
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
||||||
|
var hex = '';
|
||||||
|
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
||||||
|
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
||||||
|
}
|
||||||
|
return hex + '\u2026';
|
||||||
|
}
|
||||||
|
|
||||||
|
function addrToFullHex(addr) {
|
||||||
|
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
||||||
|
var hex = '';
|
||||||
|
for (var j = 0; j < bytes.length; j++) {
|
||||||
|
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
||||||
|
}
|
||||||
|
return hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shortTypeName(full) {
|
||||||
|
if (!full) return '';
|
||||||
|
var parts = full.split('::');
|
||||||
|
return parts[parts.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(s) {
|
||||||
|
if (!s) return '';
|
||||||
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function depthColor(d) {
|
||||||
|
if (d === 0) return '#4caf50';
|
||||||
|
if (d <= 2) return '#8bc34a';
|
||||||
|
if (d <= 5) return '#cddc39';
|
||||||
|
if (d <= 10) return '#ff9800';
|
||||||
|
if (d <= 20) return '#ff5722';
|
||||||
|
return '#f44336';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Stat cards ─────────────────────────────────────────
|
||||||
|
function updateStatCards(actors) {
|
||||||
|
var total = actors.length;
|
||||||
|
var sum = 0, max = 0;
|
||||||
|
var workerSet = {};
|
||||||
|
for (var i = 0; i < actors.length; i++) {
|
||||||
|
sum += actors[i].mailbox_depth;
|
||||||
|
if (actors[i].mailbox_depth > max) max = actors[i].mailbox_depth;
|
||||||
|
workerSet[actors[i].worker_id] = true;
|
||||||
|
}
|
||||||
|
var avg = total > 0 ? (sum / total).toFixed(1) : '0';
|
||||||
|
document.getElementById('statTotal').textContent = total;
|
||||||
|
document.getElementById('statAvgMbox').textContent = avg;
|
||||||
|
document.getElementById('statMaxMbox').textContent = max;
|
||||||
|
document.getElementById('statActiveWorkers').textContent = Object.keys(workerSet).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Mailbox depth distribution chart ───────────────────
|
||||||
|
var depthCanvas = document.getElementById('depthChart');
|
||||||
|
var depthCtx = depthCanvas.getContext('2d');
|
||||||
|
|
||||||
|
var buckets = [
|
||||||
|
{label: '0', min: 0, max: 0},
|
||||||
|
{label: '1-2', min: 1, max: 2},
|
||||||
|
{label: '3-5', min: 3, max: 5},
|
||||||
|
{label: '6-10', min: 6, max: 10},
|
||||||
|
{label: '11-20', min: 11, max: 20},
|
||||||
|
{label: '21-50', min: 21, max: 50},
|
||||||
|
{label: '50+', min: 51, max: Infinity}
|
||||||
|
];
|
||||||
|
|
||||||
|
var bucketColors = ['#4caf50','#8bc34a','#cddc39','#ff9800','#ff5722','#f44336','#d32f2f'];
|
||||||
|
|
||||||
|
function drawDepthChart(actors) {
|
||||||
|
var dpr = window.devicePixelRatio || 1;
|
||||||
|
var rect = depthCanvas.getBoundingClientRect();
|
||||||
|
depthCanvas.width = rect.width * dpr;
|
||||||
|
depthCanvas.height = rect.height * dpr;
|
||||||
|
depthCtx.scale(dpr, dpr);
|
||||||
|
var W = rect.width, H = rect.height;
|
||||||
|
depthCtx.clearRect(0, 0, W, H);
|
||||||
|
|
||||||
|
var counts = buckets.map(function() { return 0; });
|
||||||
|
for (var i = 0; i < actors.length; i++) {
|
||||||
|
var d = actors[i].mailbox_depth;
|
||||||
|
for (var b = 0; b < buckets.length; b++) {
|
||||||
|
if (d >= buckets[b].min && d <= buckets[b].max) {
|
||||||
|
counts[b]++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var maxCount = Math.max(1, Math.max.apply(null, counts));
|
||||||
|
var barW = Math.max(12, Math.floor((W - 40) / buckets.length) - 8);
|
||||||
|
var chartH = H - 35;
|
||||||
|
|
||||||
|
for (var i = 0; i < buckets.length; i++) {
|
||||||
|
var x = 20 + i * (barW + 8);
|
||||||
|
var h = (counts[i] / maxCount) * (chartH - 10);
|
||||||
|
depthCtx.fillStyle = bucketColors[i];
|
||||||
|
depthCtx.globalAlpha = 0.85;
|
||||||
|
depthCtx.fillRect(x, chartH - h, barW, h);
|
||||||
|
|
||||||
|
if (counts[i] > 0) {
|
||||||
|
depthCtx.globalAlpha = 1;
|
||||||
|
depthCtx.fillStyle = '#e0e0e0';
|
||||||
|
depthCtx.font = '10px monospace';
|
||||||
|
depthCtx.textAlign = 'center';
|
||||||
|
depthCtx.fillText(counts[i], x + barW / 2, chartH - h - 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
depthCtx.globalAlpha = 1;
|
||||||
|
depthCtx.fillStyle = '#888';
|
||||||
|
depthCtx.font = '10px monospace';
|
||||||
|
depthCtx.textAlign = 'center';
|
||||||
|
depthCtx.fillText(buckets[i].label, x + barW / 2, H - 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Actors per worker chart ────────────────────────────
|
||||||
|
var workerCanvas = document.getElementById('workerChart');
|
||||||
|
var workerCtx = workerCanvas.getContext('2d');
|
||||||
|
|
||||||
|
function drawWorkerChart(actors) {
|
||||||
|
var dpr = window.devicePixelRatio || 1;
|
||||||
|
var rect = workerCanvas.getBoundingClientRect();
|
||||||
|
workerCanvas.width = rect.width * dpr;
|
||||||
|
workerCanvas.height = rect.height * dpr;
|
||||||
|
workerCtx.scale(dpr, dpr);
|
||||||
|
var W = rect.width, H = rect.height;
|
||||||
|
workerCtx.clearRect(0, 0, W, H);
|
||||||
|
|
||||||
|
var workerCounts = {};
|
||||||
|
for (var i = 0; i < actors.length; i++) {
|
||||||
|
var wid = actors[i].worker_id;
|
||||||
|
workerCounts[wid] = (workerCounts[wid] || 0) + 1;
|
||||||
|
}
|
||||||
|
var entries = Object.keys(workerCounts).sort(function(a, b) { return +a - +b; })
|
||||||
|
.map(function(wid) { return {id: +wid, count: workerCounts[wid]}; });
|
||||||
|
|
||||||
|
if (entries.length === 0) return;
|
||||||
|
|
||||||
|
var maxCount = Math.max(1, Math.max.apply(null, entries.map(function(e) { return e.count; })));
|
||||||
|
var barW = Math.max(12, Math.floor((W - 40) / entries.length) - 8);
|
||||||
|
var chartH = H - 35;
|
||||||
|
|
||||||
|
for (var i = 0; i < entries.length; i++) {
|
||||||
|
var x = 20 + i * (barW + 8);
|
||||||
|
var h = (entries[i].count / maxCount) * (chartH - 10);
|
||||||
|
workerCtx.fillStyle = colors[entries[i].id % colors.length];
|
||||||
|
workerCtx.globalAlpha = 0.85;
|
||||||
|
workerCtx.fillRect(x, chartH - h, barW, h);
|
||||||
|
|
||||||
|
workerCtx.globalAlpha = 1;
|
||||||
|
workerCtx.fillStyle = '#e0e0e0';
|
||||||
|
workerCtx.font = '10px monospace';
|
||||||
|
workerCtx.textAlign = 'center';
|
||||||
|
workerCtx.fillText(entries[i].count, x + barW / 2, chartH - h - 4);
|
||||||
|
|
||||||
|
workerCtx.fillStyle = '#888';
|
||||||
|
workerCtx.fillText('W' + entries[i].id, x + barW / 2, H - 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Actor table ────────────────────────────────────────
|
||||||
|
var MAX_TABLE_ROWS = 2000;
|
||||||
|
|
||||||
|
function renderActorTable() {
|
||||||
|
var filter = document.getElementById('actorSearch').value.toLowerCase();
|
||||||
|
var filtered = currentActors;
|
||||||
|
if (filter) {
|
||||||
|
filtered = currentActors.filter(function(a) {
|
||||||
|
var hex = addrToHex(a.address).toLowerCase();
|
||||||
|
return hex.indexOf(filter) >= 0 || ('w' + a.worker_id).indexOf(filter) >= 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort
|
||||||
|
filtered.sort(function(a, b) {
|
||||||
|
var va, vb;
|
||||||
|
if (sortCol === 'address') {
|
||||||
|
va = addrToHex(a.address);
|
||||||
|
vb = addrToHex(b.address);
|
||||||
|
return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
|
||||||
|
} else if (sortCol === 'worker') {
|
||||||
|
va = a.worker_id; vb = b.worker_id;
|
||||||
|
} else if (sortCol === 'msgs') {
|
||||||
|
va = a.messages_processed || 0; vb = b.messages_processed || 0;
|
||||||
|
} else {
|
||||||
|
va = a.mailbox_depth; vb = b.mailbox_depth;
|
||||||
|
}
|
||||||
|
return sortAsc ? va - vb : vb - va;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update sort arrows
|
||||||
|
['address', 'worker', 'mailbox', 'msgs'].forEach(function(col) {
|
||||||
|
var key = col.charAt(0).toUpperCase() + col.slice(1);
|
||||||
|
var el = document.getElementById('sortArrow' + key);
|
||||||
|
if (col === sortCol) {
|
||||||
|
el.textContent = sortAsc ? '\u25B2' : '\u25BC';
|
||||||
|
} else {
|
||||||
|
el.textContent = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var maxDepth = 1;
|
||||||
|
for (var i = 0; i < currentActors.length; i++) {
|
||||||
|
if (currentActors[i].mailbox_depth > maxDepth) maxDepth = currentActors[i].mailbox_depth;
|
||||||
|
}
|
||||||
|
|
||||||
|
var tbody = document.getElementById('actorTableBody');
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
var count = Math.min(filtered.length, MAX_TABLE_ROWS);
|
||||||
|
for (var i = 0; i < count; i++) {
|
||||||
|
var a = filtered[i];
|
||||||
|
var hex = addrToHex(a.address);
|
||||||
|
var fullHex = addrToFullHex(a.address);
|
||||||
|
var pct = Math.round((a.mailbox_depth / maxDepth) * 120);
|
||||||
|
var bc = depthColor(a.mailbox_depth);
|
||||||
|
var hasMsg = !!a.last_msg_type;
|
||||||
|
var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : '\u2014';
|
||||||
|
var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
|
||||||
|
var msgTitle = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
tr.className = 'clickable' + (fullHex === focusedAddrHex ? ' focused' : '');
|
||||||
|
if (a.poisoned) tr.style.opacity = '0.6';
|
||||||
|
tr.setAttribute('data-addr', fullHex);
|
||||||
|
tr.innerHTML =
|
||||||
|
'<td style="color:#aaa;font-size:11px;">' + escapeHtml(hex) + (a.poisoned ? ' <span style="color:#f44336;font-size:9px;">DEAD</span>' : '') + '</td>' +
|
||||||
|
'<td>W' + a.worker_id + '</td>' +
|
||||||
|
'<td>' + a.mailbox_depth + '</td>' +
|
||||||
|
'<td>' + (a.messages_processed || 0).toLocaleString() + '</td>' +
|
||||||
|
'<td class="' + msgClass + '"' + msgTitle + '>' + escapeHtml(msgShort) + '</td>' +
|
||||||
|
'<td><div class="depth-bar" style="width:' + pct + 'px;background:' + bc + ';"></div></td>';
|
||||||
|
tr.addEventListener('click', (function(fh) { return function() { focusActor(fh); }; })(fullHex));
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filtered.length > MAX_TABLE_ROWS) {
|
||||||
|
var tr2 = document.createElement('tr');
|
||||||
|
tr2.innerHTML = '<td colspan="6" style="color:#555;">... and ' + (filtered.length - MAX_TABLE_ROWS) + ' more</td>';
|
||||||
|
tbody.appendChild(tr2);
|
||||||
|
}
|
||||||
|
|
||||||
|
var info = '(' + filtered.length + (filtered.length !== currentActors.length ? ' of ' + currentActors.length : '') + ')';
|
||||||
|
document.getElementById('actorCount').textContent = info;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Focus / detail panel ───────────────────────────────
|
||||||
|
function focusActor(fullHex) {
|
||||||
|
focusedAddrHex = fullHex;
|
||||||
|
document.getElementById('detailPanel').className = 'panel full-width detail-panel visible';
|
||||||
|
updateDetailPanel();
|
||||||
|
renderActorTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFocus() {
|
||||||
|
focusedAddrHex = null;
|
||||||
|
document.getElementById('detailPanel').className = 'panel full-width detail-panel';
|
||||||
|
renderActorTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('detailClose').addEventListener('click', clearFocus);
|
||||||
|
|
||||||
|
function updateDetailPanel() {
|
||||||
|
if (!focusedAddrHex) return;
|
||||||
|
var actor = null;
|
||||||
|
for (var i = 0; i < currentActors.length; i++) {
|
||||||
|
if (addrToFullHex(currentActors[i].address) === focusedAddrHex) {
|
||||||
|
actor = currentActors[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!actor) {
|
||||||
|
document.getElementById('detailAddr').textContent = focusedAddrHex.substring(0, 16) + '\u2026 (gone)';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('detailAddr').textContent = addrToHex(actor.address);
|
||||||
|
document.getElementById('detailFullAddr').textContent = focusedAddrHex;
|
||||||
|
document.getElementById('detailWorker').textContent = 'W' + actor.worker_id;
|
||||||
|
document.getElementById('detailMailbox').textContent = actor.mailbox_depth;
|
||||||
|
document.getElementById('detailMsgCount').textContent = (actor.messages_processed || 0).toLocaleString();
|
||||||
|
|
||||||
|
var hasMsg = !!actor.last_msg_type;
|
||||||
|
document.getElementById('detailLastMsg').innerHTML = hasMsg
|
||||||
|
? '<span class="msg-type" title="' + escapeHtml(actor.last_msg_type) + '">' + escapeHtml(shortTypeName(actor.last_msg_type)) + '</span>'
|
||||||
|
: '<span class="msg-type none">\u2014</span>';
|
||||||
|
|
||||||
|
var isPoisoned = !!actor.poisoned;
|
||||||
|
document.getElementById('detailStatus').innerHTML = isPoisoned
|
||||||
|
? '<span class="poisoned-badge">POISONED</span>'
|
||||||
|
: '<span class="healthy-badge">Healthy</span>';
|
||||||
|
|
||||||
|
drawSparkline();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sparkline ──────────────────────────────────────────
|
||||||
|
function drawSparkline() {
|
||||||
|
var canvas = document.getElementById('sparkline');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
var dpr = window.devicePixelRatio || 1;
|
||||||
|
var rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width * dpr;
|
||||||
|
canvas.height = rect.height * dpr;
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
var W = rect.width, H = rect.height;
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
|
||||||
|
var hist = depthHistory[focusedAddrHex];
|
||||||
|
if (!hist || hist.length < 2) {
|
||||||
|
ctx.fillStyle = '#555';
|
||||||
|
ctx.font = '11px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText('Collecting data\u2026', W / 2, H / 2);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var max = Math.max(1, Math.max.apply(null, hist));
|
||||||
|
var padY = 6, padX = 4;
|
||||||
|
var drawW = W - padX * 2;
|
||||||
|
var drawH = H - padY * 2;
|
||||||
|
|
||||||
|
// Fill area
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(padX, H - padY);
|
||||||
|
for (var i = 0; i < hist.length; i++) {
|
||||||
|
var x = padX + (i / (hist.length - 1)) * drawW;
|
||||||
|
var y = (H - padY) - (hist[i] / max) * drawH;
|
||||||
|
ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.lineTo(padX + drawW, H - padY);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = 'rgba(99, 102, 241, 0.15)';
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Line
|
||||||
|
ctx.beginPath();
|
||||||
|
for (var i = 0; i < hist.length; i++) {
|
||||||
|
var x = padX + (i / (hist.length - 1)) * drawW;
|
||||||
|
var y = (H - padY) - (hist[i] / max) * drawH;
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.strokeStyle = '#6366f1';
|
||||||
|
ctx.lineWidth = 1.5;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Label
|
||||||
|
var last = hist[hist.length - 1];
|
||||||
|
ctx.fillStyle = '#e0e0e0';
|
||||||
|
ctx.font = '10px monospace';
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.fillText('depth: ' + last + ' max: ' + max, W - padX, padY + 8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sort click handlers ────────────────────────────────
|
||||||
|
var sortHeaders = document.querySelectorAll('.sortable');
|
||||||
|
for (var i = 0; i < sortHeaders.length; i++) {
|
||||||
|
sortHeaders[i].addEventListener('click', function() {
|
||||||
|
var col = this.getAttribute('data-sort');
|
||||||
|
if (sortCol === col) { sortAsc = !sortAsc; }
|
||||||
|
else { sortCol = col; sortAsc = true; }
|
||||||
|
renderActorTable();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Search handler ─────────────────────────────────────
|
||||||
|
document.getElementById('actorSearch').addEventListener('keyup', function() {
|
||||||
|
clearTimeout(searchTimer);
|
||||||
|
searchTimer = setTimeout(renderActorTable, 150);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Status helpers ─────────────────────────────────────
|
||||||
|
function setStatus(s) {
|
||||||
|
if (s === 'done') {
|
||||||
|
dot.className = 'status-dot done';
|
||||||
|
if (isReplay) {
|
||||||
|
replayPct.textContent = '100%';
|
||||||
|
progressFill.style.width = '100%';
|
||||||
|
}
|
||||||
|
} else if (s === 'disconnected') {
|
||||||
|
dot.className = 'status-dot disconnected';
|
||||||
|
} else {
|
||||||
|
dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── SSE connection ─────────────────────────────────────
|
||||||
|
var es = new EventSource('/events');
|
||||||
|
|
||||||
|
es.addEventListener('stats', function(e) {
|
||||||
|
try {
|
||||||
|
var data = JSON.parse(e.data);
|
||||||
|
if (typeof data.uptime_ms === 'number') {
|
||||||
|
lastUptimeMs = data.uptime_ms;
|
||||||
|
lastStatsTime = Date.now();
|
||||||
|
}
|
||||||
|
currentActors = data.actor_details || [];
|
||||||
|
updateStatCards(currentActors);
|
||||||
|
drawDepthChart(currentActors);
|
||||||
|
drawWorkerChart(currentActors);
|
||||||
|
|
||||||
|
// Accumulate per-actor depth history
|
||||||
|
var liveAddrs = {};
|
||||||
|
for (var i = 0; i < currentActors.length; i++) {
|
||||||
|
var fh = addrToFullHex(currentActors[i].address);
|
||||||
|
liveAddrs[fh] = true;
|
||||||
|
if (!depthHistory[fh]) depthHistory[fh] = [];
|
||||||
|
depthHistory[fh].push(currentActors[i].mailbox_depth);
|
||||||
|
if (depthHistory[fh].length > HISTORY_MAX) depthHistory[fh].shift();
|
||||||
|
}
|
||||||
|
// Clean up stale entries for removed actors
|
||||||
|
for (var key in depthHistory) {
|
||||||
|
if (!liveAddrs[key]) delete depthHistory[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
renderActorTable();
|
||||||
|
if (focusedAddrHex) updateDetailPanel();
|
||||||
|
} catch(err) { console.error('stats parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('replay_meta', function(e) {
|
||||||
|
try {
|
||||||
|
var meta = JSON.parse(e.data);
|
||||||
|
replaySpeed.textContent = meta.speed + 'x';
|
||||||
|
replaySpeed.style.display = 'inline';
|
||||||
|
replayPct.style.display = 'inline';
|
||||||
|
replayPct.textContent = '0%';
|
||||||
|
} catch(err) { console.error('replay_meta parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('replay_progress', function(e) {
|
||||||
|
try {
|
||||||
|
var data = JSON.parse(e.data);
|
||||||
|
var pct = Math.round(data.progress * 100);
|
||||||
|
replayPct.textContent = pct + '%';
|
||||||
|
progressFill.style.width = pct + '%';
|
||||||
|
} catch(err) { console.error('replay_progress parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('done', function() {
|
||||||
|
setStatus('done');
|
||||||
|
es.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
es.onerror = function() {
|
||||||
|
setStatus('disconnected');
|
||||||
|
};
|
||||||
|
|
||||||
|
es.onopen = function() {
|
||||||
|
setStatus('connected');
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,740 +1 @@
|
||||||
pub const ACTORS_HTML: &str = r##"<!DOCTYPE html>
|
pub const ACTORS_HTML: &str = include_str!("actors.html");
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Swactor Runtime – Actors</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
|
||||||
}
|
|
||||||
.header-left { display: flex; align-items: center; }
|
|
||||||
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
|
||||||
.status-dot {
|
|
||||||
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
|
||||||
display: inline-block; margin-left: 8px; vertical-align: middle;
|
|
||||||
}
|
|
||||||
.status-dot.disconnected { background: #f44336; }
|
|
||||||
.status-dot.done { background: #ff9800; }
|
|
||||||
.status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.4; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.replay-badge {
|
|
||||||
display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
|
|
||||||
padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.replay-badge.visible { display: inline-block; }
|
|
||||||
|
|
||||||
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
|
||||||
.nav-link {
|
|
||||||
color: #888; text-decoration: none; font-size: 12px;
|
|
||||||
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.nav-link:hover { color: #e0e0e0; }
|
|
||||||
.nav-link.active { color: #fff; background: #2a2d3e; }
|
|
||||||
|
|
||||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
|
||||||
|
|
||||||
.progress-bar-wrap {
|
|
||||||
display: none; width: 100%; height: 3px; background: #2a2d3e;
|
|
||||||
}
|
|
||||||
.progress-bar-wrap.visible { display: block; }
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 12px; padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
|
||||||
padding: 14px; overflow: hidden;
|
|
||||||
}
|
|
||||||
.panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
|
|
||||||
|
|
||||||
.full-width { grid-column: 1 / -1; }
|
|
||||||
|
|
||||||
.stats-cards {
|
|
||||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
|
||||||
}
|
|
||||||
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
|
||||||
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
|
||||||
|
|
||||||
canvas { width: 100%; height: 200px; }
|
|
||||||
|
|
||||||
.search-wrap { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
|
|
||||||
.search-input {
|
|
||||||
background: #1c1f2e; border: 1px solid #2a2d3e; color: #e0e0e0;
|
|
||||||
padding: 6px 10px; border-radius: 4px; font-family: inherit;
|
|
||||||
font-size: 12px; width: 300px; outline: none;
|
|
||||||
}
|
|
||||||
.search-input:focus { border-color: #6366f1; }
|
|
||||||
.search-info { color: #555; font-size: 11px; }
|
|
||||||
|
|
||||||
.actor-list-wrap { max-height: 500px; overflow-y: auto; }
|
|
||||||
.actor-list-wrap table { width: 100%; border-collapse: collapse; }
|
|
||||||
.actor-list-wrap th, .actor-list-wrap td {
|
|
||||||
padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
|
|
||||||
}
|
|
||||||
.actor-list-wrap th {
|
|
||||||
color: #888; font-weight: 500; position: sticky; top: 0; background: #161822;
|
|
||||||
}
|
|
||||||
.sortable { cursor: pointer; user-select: none; }
|
|
||||||
.sortable:hover { color: #e0e0e0; }
|
|
||||||
.sort-arrow { font-size: 10px; margin-left: 4px; color: #6366f1; }
|
|
||||||
|
|
||||||
.depth-bar {
|
|
||||||
height: 8px; border-radius: 2px; max-width: 120px; min-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msg-type { color: #4caf50; }
|
|
||||||
.msg-type.none { color: #555; font-style: italic; }
|
|
||||||
|
|
||||||
tr.focused { background: #1c1f2e; }
|
|
||||||
tr.clickable { cursor: pointer; }
|
|
||||||
tr.clickable:hover { background: #1a1d2c; }
|
|
||||||
|
|
||||||
.detail-panel { display: none; }
|
|
||||||
.detail-panel.visible { display: block; }
|
|
||||||
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
|
||||||
.detail-close {
|
|
||||||
background: none; border: 1px solid #2a2d3e; color: #888; border-radius: 3px;
|
|
||||||
padding: 2px 8px; cursor: pointer; font-family: inherit; font-size: 11px;
|
|
||||||
}
|
|
||||||
.detail-close:hover { color: #e0e0e0; border-color: #555; }
|
|
||||||
.detail-grid {
|
|
||||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.detail-item { background: #1c1f2e; border-radius: 4px; padding: 8px 10px; }
|
|
||||||
.detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
|
|
||||||
.detail-item .d-value { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
|
|
||||||
.poisoned-badge {
|
|
||||||
background: #f44336; color: #fff; font-size: 10px; font-weight: 700;
|
|
||||||
padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.healthy-badge { color: #4caf50; font-size: 12px; }
|
|
||||||
canvas.sparkline { width: 100%; height: 60px; }
|
|
||||||
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: #0f1117; }
|
|
||||||
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h1>
|
|
||||||
Swactor Runtime Dashboard
|
|
||||||
<span id="statusDot" class="status-dot"></span>
|
|
||||||
<span id="replayBadge" class="replay-badge">REPLAY</span>
|
|
||||||
</h1>
|
|
||||||
<nav class="nav-links">
|
|
||||||
<a href="/" class="nav-link">Overview</a>
|
|
||||||
<a href="/actors" class="nav-link active">Actors</a>
|
|
||||||
<a href="/distribution" class="nav-link">Distribution</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
|
|
||||||
<span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
|
|
||||||
<span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="progressBarWrap" class="progress-bar-wrap">
|
|
||||||
<div id="progressFill" class="progress-fill"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Stat cards -->
|
|
||||||
<div class="panel full-width">
|
|
||||||
<h2>Actor Stats</h2>
|
|
||||||
<div class="stats-cards">
|
|
||||||
<div class="stat-card"><div class="value" id="statTotal">0</div><div class="label">Total Actors</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statAvgMbox">0</div><div class="label">Avg Mailbox</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statMaxMbox">0</div><div class="label">Max Mailbox</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statActiveWorkers">0</div><div class="label">Active Workers</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mailbox depth distribution -->
|
|
||||||
<div class="panel">
|
|
||||||
<h2>Mailbox Depth Distribution</h2>
|
|
||||||
<canvas id="depthChart"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actors per worker -->
|
|
||||||
<div class="panel">
|
|
||||||
<h2>Actors per Worker</h2>
|
|
||||||
<canvas id="workerChart"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actor table -->
|
|
||||||
<div class="panel full-width">
|
|
||||||
<h2>All Actors <span id="actorCount" style="color:#555;font-weight:400;"></span></h2>
|
|
||||||
<div class="search-wrap">
|
|
||||||
<input type="text" id="actorSearch" class="search-input" placeholder="Filter by address or worker..." />
|
|
||||||
<span id="searchInfo" class="search-info"></span>
|
|
||||||
</div>
|
|
||||||
<div class="actor-list-wrap">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="sortable" data-sort="address">Address <span id="sortArrowAddress" class="sort-arrow"></span></th>
|
|
||||||
<th class="sortable" data-sort="worker">Worker <span id="sortArrowWorker" class="sort-arrow"></span></th>
|
|
||||||
<th class="sortable" data-sort="mailbox">Mailbox <span id="sortArrowMailbox" class="sort-arrow"></span></th>
|
|
||||||
<th class="sortable" data-sort="msgs">Msgs <span id="sortArrowMsgs" class="sort-arrow"></span></th>
|
|
||||||
<th>Last Msg</th>
|
|
||||||
<th>Depth</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="actorTableBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actor detail panel -->
|
|
||||||
<div id="detailPanel" class="panel full-width detail-panel">
|
|
||||||
<div class="detail-header">
|
|
||||||
<h2>Actor Detail <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
|
|
||||||
<button class="detail-close" id="detailClose">Close</button>
|
|
||||||
</div>
|
|
||||||
<div class="detail-grid">
|
|
||||||
<div class="detail-item"><div class="d-label">Full Address</div><div class="d-value" id="detailFullAddr" style="font-size:11px;"></div></div>
|
|
||||||
<div class="detail-item"><div class="d-label">Worker</div><div class="d-value" id="detailWorker"></div></div>
|
|
||||||
<div class="detail-item"><div class="d-label">Mailbox Depth</div><div class="d-value" id="detailMailbox"></div></div>
|
|
||||||
<div class="detail-item"><div class="d-label">Messages Processed</div><div class="d-value" id="detailMsgCount"></div></div>
|
|
||||||
<div class="detail-item"><div class="d-label">Last Message Type</div><div class="d-value" id="detailLastMsg"></div></div>
|
|
||||||
<div class="detail-item"><div class="d-label">Status</div><div class="d-value" id="detailStatus"></div></div>
|
|
||||||
</div>
|
|
||||||
<h2>Mailbox Depth History</h2>
|
|
||||||
<canvas id="sparkline" class="sparkline"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
|
||||||
var isReplay = (DASHBOARD_MODE === 'replay');
|
|
||||||
var lastUptimeMs = null;
|
|
||||||
var lastStatsTime = null;
|
|
||||||
|
|
||||||
var dot = document.getElementById('statusDot');
|
|
||||||
var uptimeLabel = document.getElementById('uptimeLabel');
|
|
||||||
var replayBadge = document.getElementById('replayBadge');
|
|
||||||
var replaySpeed = document.getElementById('replaySpeed');
|
|
||||||
var replayPct = document.getElementById('replayPct');
|
|
||||||
var progressBarWrap = document.getElementById('progressBarWrap');
|
|
||||||
var progressFill = document.getElementById('progressFill');
|
|
||||||
|
|
||||||
if (isReplay) {
|
|
||||||
replayBadge.className = 'replay-badge visible';
|
|
||||||
progressBarWrap.className = 'progress-bar-wrap visible';
|
|
||||||
dot.className = 'status-dot replaying';
|
|
||||||
uptimeLabel.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUptime() {
|
|
||||||
if (isReplay) return;
|
|
||||||
var up = lastUptimeMs;
|
|
||||||
if (up !== null && lastStatsTime !== null) {
|
|
||||||
up += (Date.now() - lastStatsTime);
|
|
||||||
}
|
|
||||||
if (up === null) { uptimeLabel.textContent = ''; return; }
|
|
||||||
var s = Math.floor(up / 1000);
|
|
||||||
var d = Math.floor(s / 86400);
|
|
||||||
var h = Math.floor((s % 86400) / 3600);
|
|
||||||
var m = Math.floor((s % 3600) / 60);
|
|
||||||
var sec = s % 60;
|
|
||||||
var parts = [];
|
|
||||||
if (d > 0) parts.push(d + 'd');
|
|
||||||
if (h > 0 || d > 0) parts.push(h + 'h');
|
|
||||||
parts.push(m + 'm');
|
|
||||||
parts.push(sec + 's');
|
|
||||||
uptimeLabel.textContent = parts.join(' ');
|
|
||||||
}
|
|
||||||
setInterval(updateUptime, 1000);
|
|
||||||
|
|
||||||
// ── State ──────────────────────────────────────────────
|
|
||||||
var currentActors = [];
|
|
||||||
var sortCol = 'worker';
|
|
||||||
var sortAsc = true;
|
|
||||||
var searchTimer = null;
|
|
||||||
var focusedAddrHex = null;
|
|
||||||
var depthHistory = {};
|
|
||||||
var HISTORY_MAX = 120;
|
|
||||||
|
|
||||||
var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
|
||||||
|
|
||||||
// ── Helpers ────────────────────────────────────────────
|
|
||||||
function addrToHex(addr) {
|
|
||||||
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
|
||||||
var hex = '';
|
|
||||||
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
|
||||||
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
|
||||||
}
|
|
||||||
return hex + '\u2026';
|
|
||||||
}
|
|
||||||
|
|
||||||
function addrToFullHex(addr) {
|
|
||||||
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
|
||||||
var hex = '';
|
|
||||||
for (var j = 0; j < bytes.length; j++) {
|
|
||||||
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
|
||||||
}
|
|
||||||
return hex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function shortTypeName(full) {
|
|
||||||
if (!full) return '';
|
|
||||||
var parts = full.split('::');
|
|
||||||
return parts[parts.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
function escapeHtml(s) {
|
|
||||||
if (!s) return '';
|
|
||||||
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function depthColor(d) {
|
|
||||||
if (d === 0) return '#4caf50';
|
|
||||||
if (d <= 2) return '#8bc34a';
|
|
||||||
if (d <= 5) return '#cddc39';
|
|
||||||
if (d <= 10) return '#ff9800';
|
|
||||||
if (d <= 20) return '#ff5722';
|
|
||||||
return '#f44336';
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Stat cards ─────────────────────────────────────────
|
|
||||||
function updateStatCards(actors) {
|
|
||||||
var total = actors.length;
|
|
||||||
var sum = 0, max = 0;
|
|
||||||
var workerSet = {};
|
|
||||||
for (var i = 0; i < actors.length; i++) {
|
|
||||||
sum += actors[i].mailbox_depth;
|
|
||||||
if (actors[i].mailbox_depth > max) max = actors[i].mailbox_depth;
|
|
||||||
workerSet[actors[i].worker_id] = true;
|
|
||||||
}
|
|
||||||
var avg = total > 0 ? (sum / total).toFixed(1) : '0';
|
|
||||||
document.getElementById('statTotal').textContent = total;
|
|
||||||
document.getElementById('statAvgMbox').textContent = avg;
|
|
||||||
document.getElementById('statMaxMbox').textContent = max;
|
|
||||||
document.getElementById('statActiveWorkers').textContent = Object.keys(workerSet).length;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Mailbox depth distribution chart ───────────────────
|
|
||||||
var depthCanvas = document.getElementById('depthChart');
|
|
||||||
var depthCtx = depthCanvas.getContext('2d');
|
|
||||||
|
|
||||||
var buckets = [
|
|
||||||
{label: '0', min: 0, max: 0},
|
|
||||||
{label: '1-2', min: 1, max: 2},
|
|
||||||
{label: '3-5', min: 3, max: 5},
|
|
||||||
{label: '6-10', min: 6, max: 10},
|
|
||||||
{label: '11-20', min: 11, max: 20},
|
|
||||||
{label: '21-50', min: 21, max: 50},
|
|
||||||
{label: '50+', min: 51, max: Infinity}
|
|
||||||
];
|
|
||||||
|
|
||||||
var bucketColors = ['#4caf50','#8bc34a','#cddc39','#ff9800','#ff5722','#f44336','#d32f2f'];
|
|
||||||
|
|
||||||
function drawDepthChart(actors) {
|
|
||||||
var dpr = window.devicePixelRatio || 1;
|
|
||||||
var rect = depthCanvas.getBoundingClientRect();
|
|
||||||
depthCanvas.width = rect.width * dpr;
|
|
||||||
depthCanvas.height = rect.height * dpr;
|
|
||||||
depthCtx.scale(dpr, dpr);
|
|
||||||
var W = rect.width, H = rect.height;
|
|
||||||
depthCtx.clearRect(0, 0, W, H);
|
|
||||||
|
|
||||||
var counts = buckets.map(function() { return 0; });
|
|
||||||
for (var i = 0; i < actors.length; i++) {
|
|
||||||
var d = actors[i].mailbox_depth;
|
|
||||||
for (var b = 0; b < buckets.length; b++) {
|
|
||||||
if (d >= buckets[b].min && d <= buckets[b].max) {
|
|
||||||
counts[b]++;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var maxCount = Math.max(1, Math.max.apply(null, counts));
|
|
||||||
var barW = Math.max(12, Math.floor((W - 40) / buckets.length) - 8);
|
|
||||||
var chartH = H - 35;
|
|
||||||
|
|
||||||
for (var i = 0; i < buckets.length; i++) {
|
|
||||||
var x = 20 + i * (barW + 8);
|
|
||||||
var h = (counts[i] / maxCount) * (chartH - 10);
|
|
||||||
depthCtx.fillStyle = bucketColors[i];
|
|
||||||
depthCtx.globalAlpha = 0.85;
|
|
||||||
depthCtx.fillRect(x, chartH - h, barW, h);
|
|
||||||
|
|
||||||
if (counts[i] > 0) {
|
|
||||||
depthCtx.globalAlpha = 1;
|
|
||||||
depthCtx.fillStyle = '#e0e0e0';
|
|
||||||
depthCtx.font = '10px monospace';
|
|
||||||
depthCtx.textAlign = 'center';
|
|
||||||
depthCtx.fillText(counts[i], x + barW / 2, chartH - h - 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
depthCtx.globalAlpha = 1;
|
|
||||||
depthCtx.fillStyle = '#888';
|
|
||||||
depthCtx.font = '10px monospace';
|
|
||||||
depthCtx.textAlign = 'center';
|
|
||||||
depthCtx.fillText(buckets[i].label, x + barW / 2, H - 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Actors per worker chart ────────────────────────────
|
|
||||||
var workerCanvas = document.getElementById('workerChart');
|
|
||||||
var workerCtx = workerCanvas.getContext('2d');
|
|
||||||
|
|
||||||
function drawWorkerChart(actors) {
|
|
||||||
var dpr = window.devicePixelRatio || 1;
|
|
||||||
var rect = workerCanvas.getBoundingClientRect();
|
|
||||||
workerCanvas.width = rect.width * dpr;
|
|
||||||
workerCanvas.height = rect.height * dpr;
|
|
||||||
workerCtx.scale(dpr, dpr);
|
|
||||||
var W = rect.width, H = rect.height;
|
|
||||||
workerCtx.clearRect(0, 0, W, H);
|
|
||||||
|
|
||||||
var workerCounts = {};
|
|
||||||
for (var i = 0; i < actors.length; i++) {
|
|
||||||
var wid = actors[i].worker_id;
|
|
||||||
workerCounts[wid] = (workerCounts[wid] || 0) + 1;
|
|
||||||
}
|
|
||||||
var entries = Object.keys(workerCounts).sort(function(a, b) { return +a - +b; })
|
|
||||||
.map(function(wid) { return {id: +wid, count: workerCounts[wid]}; });
|
|
||||||
|
|
||||||
if (entries.length === 0) return;
|
|
||||||
|
|
||||||
var maxCount = Math.max(1, Math.max.apply(null, entries.map(function(e) { return e.count; })));
|
|
||||||
var barW = Math.max(12, Math.floor((W - 40) / entries.length) - 8);
|
|
||||||
var chartH = H - 35;
|
|
||||||
|
|
||||||
for (var i = 0; i < entries.length; i++) {
|
|
||||||
var x = 20 + i * (barW + 8);
|
|
||||||
var h = (entries[i].count / maxCount) * (chartH - 10);
|
|
||||||
workerCtx.fillStyle = colors[entries[i].id % colors.length];
|
|
||||||
workerCtx.globalAlpha = 0.85;
|
|
||||||
workerCtx.fillRect(x, chartH - h, barW, h);
|
|
||||||
|
|
||||||
workerCtx.globalAlpha = 1;
|
|
||||||
workerCtx.fillStyle = '#e0e0e0';
|
|
||||||
workerCtx.font = '10px monospace';
|
|
||||||
workerCtx.textAlign = 'center';
|
|
||||||
workerCtx.fillText(entries[i].count, x + barW / 2, chartH - h - 4);
|
|
||||||
|
|
||||||
workerCtx.fillStyle = '#888';
|
|
||||||
workerCtx.fillText('W' + entries[i].id, x + barW / 2, H - 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Actor table ────────────────────────────────────────
|
|
||||||
var MAX_TABLE_ROWS = 2000;
|
|
||||||
|
|
||||||
function renderActorTable() {
|
|
||||||
var filter = document.getElementById('actorSearch').value.toLowerCase();
|
|
||||||
var filtered = currentActors;
|
|
||||||
if (filter) {
|
|
||||||
filtered = currentActors.filter(function(a) {
|
|
||||||
var hex = addrToHex(a.address).toLowerCase();
|
|
||||||
return hex.indexOf(filter) >= 0 || ('w' + a.worker_id).indexOf(filter) >= 0;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort
|
|
||||||
filtered.sort(function(a, b) {
|
|
||||||
var va, vb;
|
|
||||||
if (sortCol === 'address') {
|
|
||||||
va = addrToHex(a.address);
|
|
||||||
vb = addrToHex(b.address);
|
|
||||||
return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
|
|
||||||
} else if (sortCol === 'worker') {
|
|
||||||
va = a.worker_id; vb = b.worker_id;
|
|
||||||
} else if (sortCol === 'msgs') {
|
|
||||||
va = a.messages_processed || 0; vb = b.messages_processed || 0;
|
|
||||||
} else {
|
|
||||||
va = a.mailbox_depth; vb = b.mailbox_depth;
|
|
||||||
}
|
|
||||||
return sortAsc ? va - vb : vb - va;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update sort arrows
|
|
||||||
['address', 'worker', 'mailbox', 'msgs'].forEach(function(col) {
|
|
||||||
var key = col.charAt(0).toUpperCase() + col.slice(1);
|
|
||||||
var el = document.getElementById('sortArrow' + key);
|
|
||||||
if (col === sortCol) {
|
|
||||||
el.textContent = sortAsc ? '\u25B2' : '\u25BC';
|
|
||||||
} else {
|
|
||||||
el.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var maxDepth = 1;
|
|
||||||
for (var i = 0; i < currentActors.length; i++) {
|
|
||||||
if (currentActors[i].mailbox_depth > maxDepth) maxDepth = currentActors[i].mailbox_depth;
|
|
||||||
}
|
|
||||||
|
|
||||||
var tbody = document.getElementById('actorTableBody');
|
|
||||||
tbody.innerHTML = '';
|
|
||||||
var count = Math.min(filtered.length, MAX_TABLE_ROWS);
|
|
||||||
for (var i = 0; i < count; i++) {
|
|
||||||
var a = filtered[i];
|
|
||||||
var hex = addrToHex(a.address);
|
|
||||||
var fullHex = addrToFullHex(a.address);
|
|
||||||
var pct = Math.round((a.mailbox_depth / maxDepth) * 120);
|
|
||||||
var bc = depthColor(a.mailbox_depth);
|
|
||||||
var hasMsg = !!a.last_msg_type;
|
|
||||||
var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : '\u2014';
|
|
||||||
var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
|
|
||||||
var msgTitle = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tr.className = 'clickable' + (fullHex === focusedAddrHex ? ' focused' : '');
|
|
||||||
if (a.poisoned) tr.style.opacity = '0.6';
|
|
||||||
tr.setAttribute('data-addr', fullHex);
|
|
||||||
tr.innerHTML =
|
|
||||||
'<td style="color:#aaa;font-size:11px;">' + escapeHtml(hex) + (a.poisoned ? ' <span style="color:#f44336;font-size:9px;">DEAD</span>' : '') + '</td>' +
|
|
||||||
'<td>W' + a.worker_id + '</td>' +
|
|
||||||
'<td>' + a.mailbox_depth + '</td>' +
|
|
||||||
'<td>' + (a.messages_processed || 0).toLocaleString() + '</td>' +
|
|
||||||
'<td class="' + msgClass + '"' + msgTitle + '>' + escapeHtml(msgShort) + '</td>' +
|
|
||||||
'<td><div class="depth-bar" style="width:' + pct + 'px;background:' + bc + ';"></div></td>';
|
|
||||||
tr.addEventListener('click', (function(fh) { return function() { focusActor(fh); }; })(fullHex));
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filtered.length > MAX_TABLE_ROWS) {
|
|
||||||
var tr2 = document.createElement('tr');
|
|
||||||
tr2.innerHTML = '<td colspan="6" style="color:#555;">... and ' + (filtered.length - MAX_TABLE_ROWS) + ' more</td>';
|
|
||||||
tbody.appendChild(tr2);
|
|
||||||
}
|
|
||||||
|
|
||||||
var info = '(' + filtered.length + (filtered.length !== currentActors.length ? ' of ' + currentActors.length : '') + ')';
|
|
||||||
document.getElementById('actorCount').textContent = info;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Focus / detail panel ───────────────────────────────
|
|
||||||
function focusActor(fullHex) {
|
|
||||||
focusedAddrHex = fullHex;
|
|
||||||
document.getElementById('detailPanel').className = 'panel full-width detail-panel visible';
|
|
||||||
updateDetailPanel();
|
|
||||||
renderActorTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearFocus() {
|
|
||||||
focusedAddrHex = null;
|
|
||||||
document.getElementById('detailPanel').className = 'panel full-width detail-panel';
|
|
||||||
renderActorTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('detailClose').addEventListener('click', clearFocus);
|
|
||||||
|
|
||||||
function updateDetailPanel() {
|
|
||||||
if (!focusedAddrHex) return;
|
|
||||||
var actor = null;
|
|
||||||
for (var i = 0; i < currentActors.length; i++) {
|
|
||||||
if (addrToFullHex(currentActors[i].address) === focusedAddrHex) {
|
|
||||||
actor = currentActors[i];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!actor) {
|
|
||||||
document.getElementById('detailAddr').textContent = focusedAddrHex.substring(0, 16) + '\u2026 (gone)';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('detailAddr').textContent = addrToHex(actor.address);
|
|
||||||
document.getElementById('detailFullAddr').textContent = focusedAddrHex;
|
|
||||||
document.getElementById('detailWorker').textContent = 'W' + actor.worker_id;
|
|
||||||
document.getElementById('detailMailbox').textContent = actor.mailbox_depth;
|
|
||||||
document.getElementById('detailMsgCount').textContent = (actor.messages_processed || 0).toLocaleString();
|
|
||||||
|
|
||||||
var hasMsg = !!actor.last_msg_type;
|
|
||||||
document.getElementById('detailLastMsg').innerHTML = hasMsg
|
|
||||||
? '<span class="msg-type" title="' + escapeHtml(actor.last_msg_type) + '">' + escapeHtml(shortTypeName(actor.last_msg_type)) + '</span>'
|
|
||||||
: '<span class="msg-type none">\u2014</span>';
|
|
||||||
|
|
||||||
var isPoisoned = !!actor.poisoned;
|
|
||||||
document.getElementById('detailStatus').innerHTML = isPoisoned
|
|
||||||
? '<span class="poisoned-badge">POISONED</span>'
|
|
||||||
: '<span class="healthy-badge">Healthy</span>';
|
|
||||||
|
|
||||||
drawSparkline();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Sparkline ──────────────────────────────────────────
|
|
||||||
function drawSparkline() {
|
|
||||||
var canvas = document.getElementById('sparkline');
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
var dpr = window.devicePixelRatio || 1;
|
|
||||||
var rect = canvas.getBoundingClientRect();
|
|
||||||
canvas.width = rect.width * dpr;
|
|
||||||
canvas.height = rect.height * dpr;
|
|
||||||
ctx.scale(dpr, dpr);
|
|
||||||
var W = rect.width, H = rect.height;
|
|
||||||
ctx.clearRect(0, 0, W, H);
|
|
||||||
|
|
||||||
var hist = depthHistory[focusedAddrHex];
|
|
||||||
if (!hist || hist.length < 2) {
|
|
||||||
ctx.fillStyle = '#555';
|
|
||||||
ctx.font = '11px monospace';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText('Collecting data\u2026', W / 2, H / 2);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var max = Math.max(1, Math.max.apply(null, hist));
|
|
||||||
var padY = 6, padX = 4;
|
|
||||||
var drawW = W - padX * 2;
|
|
||||||
var drawH = H - padY * 2;
|
|
||||||
|
|
||||||
// Fill area
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(padX, H - padY);
|
|
||||||
for (var i = 0; i < hist.length; i++) {
|
|
||||||
var x = padX + (i / (hist.length - 1)) * drawW;
|
|
||||||
var y = (H - padY) - (hist[i] / max) * drawH;
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
ctx.lineTo(padX + drawW, H - padY);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fillStyle = 'rgba(99, 102, 241, 0.15)';
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Line
|
|
||||||
ctx.beginPath();
|
|
||||||
for (var i = 0; i < hist.length; i++) {
|
|
||||||
var x = padX + (i / (hist.length - 1)) * drawW;
|
|
||||||
var y = (H - padY) - (hist[i] / max) * drawH;
|
|
||||||
if (i === 0) ctx.moveTo(x, y);
|
|
||||||
else ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
ctx.strokeStyle = '#6366f1';
|
|
||||||
ctx.lineWidth = 1.5;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Label
|
|
||||||
var last = hist[hist.length - 1];
|
|
||||||
ctx.fillStyle = '#e0e0e0';
|
|
||||||
ctx.font = '10px monospace';
|
|
||||||
ctx.textAlign = 'right';
|
|
||||||
ctx.fillText('depth: ' + last + ' max: ' + max, W - padX, padY + 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Sort click handlers ────────────────────────────────
|
|
||||||
var sortHeaders = document.querySelectorAll('.sortable');
|
|
||||||
for (var i = 0; i < sortHeaders.length; i++) {
|
|
||||||
sortHeaders[i].addEventListener('click', function() {
|
|
||||||
var col = this.getAttribute('data-sort');
|
|
||||||
if (sortCol === col) { sortAsc = !sortAsc; }
|
|
||||||
else { sortCol = col; sortAsc = true; }
|
|
||||||
renderActorTable();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Search handler ─────────────────────────────────────
|
|
||||||
document.getElementById('actorSearch').addEventListener('keyup', function() {
|
|
||||||
clearTimeout(searchTimer);
|
|
||||||
searchTimer = setTimeout(renderActorTable, 150);
|
|
||||||
});
|
|
||||||
|
|
||||||
// ── Status helpers ─────────────────────────────────────
|
|
||||||
function setStatus(s) {
|
|
||||||
if (s === 'done') {
|
|
||||||
dot.className = 'status-dot done';
|
|
||||||
if (isReplay) {
|
|
||||||
replayPct.textContent = '100%';
|
|
||||||
progressFill.style.width = '100%';
|
|
||||||
}
|
|
||||||
} else if (s === 'disconnected') {
|
|
||||||
dot.className = 'status-dot disconnected';
|
|
||||||
} else {
|
|
||||||
dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── SSE connection ─────────────────────────────────────
|
|
||||||
var es = new EventSource('/events');
|
|
||||||
|
|
||||||
es.addEventListener('stats', function(e) {
|
|
||||||
try {
|
|
||||||
var data = JSON.parse(e.data);
|
|
||||||
if (typeof data.uptime_ms === 'number') {
|
|
||||||
lastUptimeMs = data.uptime_ms;
|
|
||||||
lastStatsTime = Date.now();
|
|
||||||
}
|
|
||||||
currentActors = data.actor_details || [];
|
|
||||||
updateStatCards(currentActors);
|
|
||||||
drawDepthChart(currentActors);
|
|
||||||
drawWorkerChart(currentActors);
|
|
||||||
|
|
||||||
// Accumulate per-actor depth history
|
|
||||||
var liveAddrs = {};
|
|
||||||
for (var i = 0; i < currentActors.length; i++) {
|
|
||||||
var fh = addrToFullHex(currentActors[i].address);
|
|
||||||
liveAddrs[fh] = true;
|
|
||||||
if (!depthHistory[fh]) depthHistory[fh] = [];
|
|
||||||
depthHistory[fh].push(currentActors[i].mailbox_depth);
|
|
||||||
if (depthHistory[fh].length > HISTORY_MAX) depthHistory[fh].shift();
|
|
||||||
}
|
|
||||||
// Clean up stale entries for removed actors
|
|
||||||
for (var key in depthHistory) {
|
|
||||||
if (!liveAddrs[key]) delete depthHistory[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
renderActorTable();
|
|
||||||
if (focusedAddrHex) updateDetailPanel();
|
|
||||||
} catch(err) { console.error('stats parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('replay_meta', function(e) {
|
|
||||||
try {
|
|
||||||
var meta = JSON.parse(e.data);
|
|
||||||
replaySpeed.textContent = meta.speed + 'x';
|
|
||||||
replaySpeed.style.display = 'inline';
|
|
||||||
replayPct.style.display = 'inline';
|
|
||||||
replayPct.textContent = '0%';
|
|
||||||
} catch(err) { console.error('replay_meta parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('replay_progress', function(e) {
|
|
||||||
try {
|
|
||||||
var data = JSON.parse(e.data);
|
|
||||||
var pct = Math.round(data.progress * 100);
|
|
||||||
replayPct.textContent = pct + '%';
|
|
||||||
progressFill.style.width = pct + '%';
|
|
||||||
} catch(err) { console.error('replay_progress parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('done', function() {
|
|
||||||
setStatus('done');
|
|
||||||
es.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
es.onerror = function() {
|
|
||||||
setStatus('disconnected');
|
|
||||||
};
|
|
||||||
|
|
||||||
es.onopen = function() {
|
|
||||||
setStatus('connected');
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
"##;
|
|
||||||
|
|
|
||||||
511
crates/runtime-dashboard/src/dashboard.html
Normal file
511
crates/runtime-dashboard/src/dashboard.html
Normal file
|
|
@ -0,0 +1,511 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Swactor Runtime Dashboard</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
||||||
|
}
|
||||||
|
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
||||||
|
.status-dot {
|
||||||
|
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
||||||
|
display: inline-block; margin-left: 8px; vertical-align: middle;
|
||||||
|
}
|
||||||
|
.status-dot.disconnected { background: #f44336; }
|
||||||
|
.status-dot.done { background: #ff9800; }
|
||||||
|
.status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.replay-badge {
|
||||||
|
display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
|
||||||
|
padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.replay-badge.visible { display: inline-block; }
|
||||||
|
|
||||||
|
.header-left { display: flex; align-items: center; }
|
||||||
|
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
||||||
|
.nav-link {
|
||||||
|
color: #888; text-decoration: none; font-size: 12px;
|
||||||
|
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: #e0e0e0; }
|
||||||
|
.nav-link.active { color: #fff; background: #2a2d3e; }
|
||||||
|
|
||||||
|
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||||
|
|
||||||
|
.progress-bar-wrap {
|
||||||
|
display: none; width: 100%; height: 3px; background: #2a2d3e;
|
||||||
|
}
|
||||||
|
.progress-bar-wrap.visible { display: block; }
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: 12px; padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
||||||
|
padding: 14px; overflow: hidden;
|
||||||
|
}
|
||||||
|
.panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
|
||||||
|
|
||||||
|
.stats-cards {
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
||||||
|
}
|
||||||
|
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
||||||
|
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
||||||
|
|
||||||
|
.chart-panel { grid-row: span 2; }
|
||||||
|
canvas#workerChart { width: 100%; height: 200px; }
|
||||||
|
|
||||||
|
.actor-table-wrap { max-height: 200px; overflow-y: auto; }
|
||||||
|
.actor-table-wrap table { width: 100%; border-collapse: collapse; }
|
||||||
|
.actor-table-wrap th, .actor-table-wrap td {
|
||||||
|
padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
|
||||||
|
}
|
||||||
|
.actor-table-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
||||||
|
|
||||||
|
.log-panel {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
.log-wrap { max-height: 300px; overflow-y: auto; }
|
||||||
|
.log-wrap table { width: 100%; border-collapse: collapse; }
|
||||||
|
.log-wrap th, .log-wrap td {
|
||||||
|
padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.log-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
||||||
|
.log-wrap td.msg { white-space: normal; word-break: break-all; max-width: 400px; }
|
||||||
|
|
||||||
|
.level-ERROR { color: #f44336; font-weight: 700; }
|
||||||
|
.level-WARN { color: #ff9800; }
|
||||||
|
.level-INFO { color: #4caf50; }
|
||||||
|
.level-DEBUG { color: #2196f3; }
|
||||||
|
.level-TRACE { color: #666; }
|
||||||
|
|
||||||
|
.worker-detail-panel { grid-column: 1 / -1; }
|
||||||
|
.worker-detail-scroll { max-height: 360px; overflow-y: auto; }
|
||||||
|
.worker-group { margin-bottom: 8px; border: 1px solid #2a2d3e; border-radius: 4px; overflow: hidden; }
|
||||||
|
.worker-group-header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 7px 12px; background: #1c1f2e; cursor: pointer; user-select: none;
|
||||||
|
}
|
||||||
|
.worker-group-header:hover { background: #22253a; }
|
||||||
|
.worker-group-header .wid { font-weight: 700; }
|
||||||
|
.worker-group-header .summary { color: #888; font-size: 11px; }
|
||||||
|
.worker-group-header .toggle { color: #555; font-size: 14px; }
|
||||||
|
.worker-group-body { display: none; }
|
||||||
|
.worker-group.open .worker-group-body { display: block; }
|
||||||
|
.worker-group-body table { width: 100%; border-collapse: collapse; }
|
||||||
|
.worker-group-body th, .worker-group-body td {
|
||||||
|
padding: 3px 10px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
||||||
|
}
|
||||||
|
.worker-group-body th { color: #888; font-weight: 500; background: #161822; }
|
||||||
|
.msg-type { color: #4caf50; }
|
||||||
|
.msg-type.none { color: #555; font-style: italic; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: #0f1117; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h1>
|
||||||
|
Swactor Runtime Dashboard
|
||||||
|
<span id="statusDot" class="status-dot"></span>
|
||||||
|
<span id="replayBadge" class="replay-badge">REPLAY</span>
|
||||||
|
</h1>
|
||||||
|
<nav class="nav-links">
|
||||||
|
<a href="/" class="nav-link active">Overview</a>
|
||||||
|
<a href="/actors" class="nav-link">Actors</a>
|
||||||
|
<a href="/distribution" class="nav-link">Distribution</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
|
||||||
|
<span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
|
||||||
|
<span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="progressBarWrap" class="progress-bar-wrap">
|
||||||
|
<div id="progressFill" class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="panel chart-panel">
|
||||||
|
<h2>Worker Distribution</h2>
|
||||||
|
<canvas id="workerChart"></canvas>
|
||||||
|
<div id="workerLegend" style="margin-top:8px;font-size:11px;color:#888;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Stats</h2>
|
||||||
|
<div class="stats-cards">
|
||||||
|
<div class="stat-card"><div class="value" id="statActors">0</div><div class="label">Actors</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statMessages">0</div><div class="label">Messages</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statWorkers">0</div><div class="label">Workers</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statMailbox">0</div><div class="label">Mailbox</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Actors</h2>
|
||||||
|
<div class="actor-table-wrap">
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>Address</th><th>Worker</th></tr></thead>
|
||||||
|
<tbody id="actorTableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel worker-detail-panel">
|
||||||
|
<h2>Worker Details</h2>
|
||||||
|
<div class="worker-detail-scroll" id="workerDetailContainer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel log-panel">
|
||||||
|
<h2>Activity Log <span id="logCount" style="color:#555;font-weight:400;"></span></h2>
|
||||||
|
<div class="log-wrap" id="logWrap">
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>Seq</th><th>Time</th><th>Level</th><th>Worker</th><th>Message</th><th>Fields</th></tr></thead>
|
||||||
|
<tbody id="logTableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
||||||
|
var logRowCount = 0;
|
||||||
|
var MAX_LOG_ROWS = 2000;
|
||||||
|
var isReplay = (DASHBOARD_MODE === 'replay');
|
||||||
|
var lastUptimeMs = null;
|
||||||
|
var lastStatsTime = null;
|
||||||
|
|
||||||
|
var dot = document.getElementById('statusDot');
|
||||||
|
var uptimeLabel = document.getElementById('uptimeLabel');
|
||||||
|
var replayBadge = document.getElementById('replayBadge');
|
||||||
|
var replaySpeed = document.getElementById('replaySpeed');
|
||||||
|
var replayPct = document.getElementById('replayPct');
|
||||||
|
var progressBarWrap = document.getElementById('progressBarWrap');
|
||||||
|
var progressFill = document.getElementById('progressFill');
|
||||||
|
|
||||||
|
if (isReplay) {
|
||||||
|
replayBadge.className = 'replay-badge visible';
|
||||||
|
progressBarWrap.className = 'progress-bar-wrap visible';
|
||||||
|
dot.className = 'status-dot replaying';
|
||||||
|
uptimeLabel.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUptime() {
|
||||||
|
if (isReplay) return;
|
||||||
|
var up = lastUptimeMs;
|
||||||
|
if (up !== null && lastStatsTime !== null) {
|
||||||
|
up += (Date.now() - lastStatsTime);
|
||||||
|
}
|
||||||
|
if (up === null) { uptimeLabel.textContent = ''; return; }
|
||||||
|
var s = Math.floor(up / 1000);
|
||||||
|
var d = Math.floor(s / 86400);
|
||||||
|
var h = Math.floor((s % 86400) / 3600);
|
||||||
|
var m = Math.floor((s % 3600) / 60);
|
||||||
|
var sec = s % 60;
|
||||||
|
var parts = [];
|
||||||
|
if (d > 0) parts.push(d + 'd');
|
||||||
|
if (h > 0 || d > 0) parts.push(h + 'h');
|
||||||
|
parts.push(m + 'm');
|
||||||
|
parts.push(sec + 's');
|
||||||
|
uptimeLabel.textContent = parts.join(' ');
|
||||||
|
}
|
||||||
|
setInterval(updateUptime, 1000);
|
||||||
|
|
||||||
|
var canvas = document.getElementById('workerChart');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
||||||
|
|
||||||
|
function drawWorkerChart(workers) {
|
||||||
|
var dpr = window.devicePixelRatio || 1;
|
||||||
|
var rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width * dpr;
|
||||||
|
canvas.height = rect.height * dpr;
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
var W = rect.width, H = rect.height;
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
|
||||||
|
if (!workers || workers.length === 0) return;
|
||||||
|
|
||||||
|
var maxActors = Math.max(1, Math.max.apply(null, workers.map(function(w) { return w.num_actors; })));
|
||||||
|
var barW = Math.max(8, Math.floor((W - 40) / workers.length) - 6);
|
||||||
|
var chartH = H - 30;
|
||||||
|
|
||||||
|
workers.forEach(function(w, i) {
|
||||||
|
var x = 20 + i * (barW + 6);
|
||||||
|
var h = (w.num_actors / maxActors) * (chartH * 0.45);
|
||||||
|
ctx.fillStyle = colors[i % colors.length];
|
||||||
|
ctx.globalAlpha = 0.8;
|
||||||
|
ctx.fillRect(x, chartH * 0.5 - h, barW, h);
|
||||||
|
|
||||||
|
var mh = Math.min(w.mailbox_depth * 2, chartH * 0.4);
|
||||||
|
ctx.globalAlpha = 0.4;
|
||||||
|
ctx.fillRect(x, chartH * 0.55, barW, mh);
|
||||||
|
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
ctx.fillStyle = '#888';
|
||||||
|
ctx.font = '10px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText('W' + w.id, x + barW / 2, H - 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
var legend = document.getElementById('workerLegend');
|
||||||
|
legend.innerHTML = workers.map(function(w, i) {
|
||||||
|
return '<span style="color:' + colors[i % colors.length] + '">W' + w.id +
|
||||||
|
': ' + w.num_actors + ' actors, ' + w.messages_processed + ' msgs, mbox ' + w.mailbox_depth + '</span>';
|
||||||
|
}).join(' | ');
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateStats(data) {
|
||||||
|
if (typeof data.uptime_ms === 'number') {
|
||||||
|
lastUptimeMs = data.uptime_ms;
|
||||||
|
lastStatsTime = Date.now();
|
||||||
|
}
|
||||||
|
var totalActors = data.actors ? data.actors.length : 0;
|
||||||
|
var totalMsgs = data.workers ? data.workers.reduce(function(s, w) { return s + w.messages_processed; }, 0) : 0;
|
||||||
|
var totalMailbox = data.workers ? data.workers.reduce(function(s, w) { return s + w.mailbox_depth; }, 0) : 0;
|
||||||
|
|
||||||
|
document.getElementById('statActors').textContent = totalActors;
|
||||||
|
document.getElementById('statMessages').textContent = totalMsgs.toLocaleString();
|
||||||
|
document.getElementById('statWorkers').textContent = data.num_workers || 0;
|
||||||
|
document.getElementById('statMailbox').textContent = totalMailbox;
|
||||||
|
|
||||||
|
drawWorkerChart(data.workers);
|
||||||
|
|
||||||
|
var tbody = document.getElementById('actorTableBody');
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
if (data.actors) {
|
||||||
|
var shown = data.actors.slice(0, 200);
|
||||||
|
shown.forEach(function(entry) {
|
||||||
|
var addr = entry[0];
|
||||||
|
var wid = entry[1];
|
||||||
|
var hex = '';
|
||||||
|
if (addr && addr.length > 0) {
|
||||||
|
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
||||||
|
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
||||||
|
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
||||||
|
}
|
||||||
|
hex += '\u2026';
|
||||||
|
}
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
tr.innerHTML = '<td style="color:#aaa;font-size:11px;">' + hex + '</td><td>W' + wid + '</td>';
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
if (data.actors.length > 200) {
|
||||||
|
var tr2 = document.createElement('tr');
|
||||||
|
tr2.innerHTML = '<td colspan="2" style="color:#555;">... and ' + (data.actors.length - 200) + ' more</td>';
|
||||||
|
tbody.appendChild(tr2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateWorkerDetails(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatAddr(addr) {
|
||||||
|
var hex = '';
|
||||||
|
if (addr && addr.length > 0) {
|
||||||
|
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
||||||
|
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
||||||
|
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
||||||
|
}
|
||||||
|
hex += '\u2026';
|
||||||
|
}
|
||||||
|
return hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shortTypeName(full) {
|
||||||
|
if (!full) return '';
|
||||||
|
var parts = full.split('::');
|
||||||
|
return parts[parts.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateWorkerDetails(data) {
|
||||||
|
var container = document.getElementById('workerDetailContainer');
|
||||||
|
if (!data.workers) return;
|
||||||
|
|
||||||
|
var groups = {};
|
||||||
|
data.workers.forEach(function(w) { groups[w.id] = { info: w, actors: [] }; });
|
||||||
|
if (data.actor_details) {
|
||||||
|
data.actor_details.forEach(function(a) {
|
||||||
|
if (groups[a.worker_id]) groups[a.worker_id].actors.push(a);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var openState = {};
|
||||||
|
container.querySelectorAll('.worker-group').forEach(function(g) {
|
||||||
|
openState[g.dataset.wid] = g.classList.contains('open');
|
||||||
|
});
|
||||||
|
|
||||||
|
container.innerHTML = '';
|
||||||
|
var wids = Object.keys(groups).sort(function(a, b) { return a - b; });
|
||||||
|
|
||||||
|
wids.forEach(function(wid) {
|
||||||
|
var g = groups[wid];
|
||||||
|
var div = document.createElement('div');
|
||||||
|
var isOpen = openState[wid] || false;
|
||||||
|
div.className = 'worker-group' + (isOpen ? ' open' : '');
|
||||||
|
div.dataset.wid = wid;
|
||||||
|
|
||||||
|
var hdr = document.createElement('div');
|
||||||
|
hdr.className = 'worker-group-header';
|
||||||
|
var panicHtml = g.info.panics > 0 ? ', <span style="color:#f44336">' + g.info.panics + ' panics</span>' : '';
|
||||||
|
hdr.innerHTML =
|
||||||
|
'<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
|
||||||
|
'<span class="summary">' + g.actors.length + ' actors, ' +
|
||||||
|
g.info.messages_processed.toLocaleString() + ' msgs, mbox ' + g.info.mailbox_depth + panicHtml + '</span>' +
|
||||||
|
'<span class="toggle">' + (isOpen ? '\u25BC' : '\u25B6') + '</span>';
|
||||||
|
hdr.onclick = function() {
|
||||||
|
div.classList.toggle('open');
|
||||||
|
hdr.querySelector('.toggle').textContent = div.classList.contains('open') ? '\u25BC' : '\u25B6';
|
||||||
|
};
|
||||||
|
div.appendChild(hdr);
|
||||||
|
|
||||||
|
var body = document.createElement('div');
|
||||||
|
body.className = 'worker-group-body';
|
||||||
|
if (g.actors.length === 0) {
|
||||||
|
body.innerHTML = '<div style="padding:6px 12px;color:#555;">No actors</div>';
|
||||||
|
} else {
|
||||||
|
var rows = '';
|
||||||
|
g.actors.forEach(function(a) {
|
||||||
|
var hex = formatAddr(a.address);
|
||||||
|
var hasMsg = !!a.last_msg_type;
|
||||||
|
var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : 'none';
|
||||||
|
var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
|
||||||
|
var title = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
|
||||||
|
rows += '<tr><td style="color:#aaa;">' + hex + '</td>' +
|
||||||
|
'<td>' + a.mailbox_depth + '</td>' +
|
||||||
|
'<td class="' + msgClass + '"' + title + '>' + escapeHtml(msgShort) + '</td></tr>';
|
||||||
|
});
|
||||||
|
body.innerHTML = '<table><thead><tr><th>Address</th><th>Mailbox</th><th>Last Message</th></tr></thead><tbody>' + rows + '</tbody></table>';
|
||||||
|
}
|
||||||
|
div.appendChild(body);
|
||||||
|
container.appendChild(div);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addLogEvents(events) {
|
||||||
|
var tbody = document.getElementById('logTableBody');
|
||||||
|
var wrap = document.getElementById('logWrap');
|
||||||
|
var wasAtBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
|
||||||
|
|
||||||
|
events.forEach(function(ev) {
|
||||||
|
if (logRowCount >= MAX_LOG_ROWS) {
|
||||||
|
tbody.removeChild(tbody.firstChild);
|
||||||
|
logRowCount--;
|
||||||
|
}
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
var ts = new Date(ev.timestamp_ms);
|
||||||
|
var timeStr = ts.toLocaleTimeString() + '.' + String(ts.getMilliseconds()).padStart(3, '0');
|
||||||
|
var wid = ev.worker_id !== null && ev.worker_id !== undefined ? 'W' + ev.worker_id : '-';
|
||||||
|
var fieldsStr = Object.keys(ev.fields).length > 0 ? JSON.stringify(ev.fields) : '';
|
||||||
|
|
||||||
|
tr.innerHTML =
|
||||||
|
'<td>' + ev.seq + '</td>' +
|
||||||
|
'<td>' + timeStr + '</td>' +
|
||||||
|
'<td class="level-' + ev.level + '">' + ev.level + '</td>' +
|
||||||
|
'<td>' + wid + '</td>' +
|
||||||
|
'<td class="msg">' + escapeHtml(ev.message) + '</td>' +
|
||||||
|
'<td style="color:#555;max-width:300px;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(fieldsStr) + '</td>';
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
logRowCount++;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('logCount').textContent = '(' + logRowCount + ')';
|
||||||
|
|
||||||
|
if (wasAtBottom) {
|
||||||
|
wrap.scrollTop = wrap.scrollHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(s) {
|
||||||
|
if (!s) return '';
|
||||||
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(s) {
|
||||||
|
if (s === 'done') {
|
||||||
|
dot.className = 'status-dot done';
|
||||||
|
if (isReplay) {
|
||||||
|
replayPct.textContent = '100%';
|
||||||
|
progressFill.style.width = '100%';
|
||||||
|
}
|
||||||
|
} else if (s === 'disconnected') {
|
||||||
|
dot.className = 'status-dot disconnected';
|
||||||
|
} else {
|
||||||
|
dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var es = new EventSource('/events');
|
||||||
|
|
||||||
|
es.addEventListener('stats', function(e) {
|
||||||
|
try { updateStats(JSON.parse(e.data)); } catch(err) { console.error('stats parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('activity', function(e) {
|
||||||
|
try { addLogEvents(JSON.parse(e.data)); } catch(err) { console.error('activity parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('replay_meta', function(e) {
|
||||||
|
try {
|
||||||
|
var meta = JSON.parse(e.data);
|
||||||
|
replaySpeed.textContent = meta.speed + 'x';
|
||||||
|
replaySpeed.style.display = 'inline';
|
||||||
|
replayPct.style.display = 'inline';
|
||||||
|
replayPct.textContent = '0%';
|
||||||
|
} catch(err) { console.error('replay_meta parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('replay_progress', function(e) {
|
||||||
|
try {
|
||||||
|
var data = JSON.parse(e.data);
|
||||||
|
var pct = Math.round(data.progress * 100);
|
||||||
|
replayPct.textContent = pct + '%';
|
||||||
|
progressFill.style.width = pct + '%';
|
||||||
|
} catch(err) { console.error('replay_progress parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('done', function() {
|
||||||
|
setStatus('done');
|
||||||
|
es.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
es.onerror = function() {
|
||||||
|
setStatus('disconnected');
|
||||||
|
};
|
||||||
|
|
||||||
|
es.onopen = function() {
|
||||||
|
setStatus('connected');
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,512 +1 @@
|
||||||
pub const DASHBOARD_HTML: &str = r##"<!DOCTYPE html>
|
pub const DASHBOARD_HTML: &str = include_str!("dashboard.html");
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Swactor Runtime Dashboard</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
|
||||||
}
|
|
||||||
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
|
||||||
.status-dot {
|
|
||||||
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
|
||||||
display: inline-block; margin-left: 8px; vertical-align: middle;
|
|
||||||
}
|
|
||||||
.status-dot.disconnected { background: #f44336; }
|
|
||||||
.status-dot.done { background: #ff9800; }
|
|
||||||
.status-dot.replaying { background: #2196f3; animation: pulse 1.5s infinite; }
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.4; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.replay-badge {
|
|
||||||
display: none; background: #2196f3; color: #fff; font-size: 10px; font-weight: 700;
|
|
||||||
padding: 2px 8px; border-radius: 3px; margin-left: 10px; letter-spacing: 1px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.replay-badge.visible { display: inline-block; }
|
|
||||||
|
|
||||||
.header-left { display: flex; align-items: center; }
|
|
||||||
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
|
||||||
.nav-link {
|
|
||||||
color: #888; text-decoration: none; font-size: 12px;
|
|
||||||
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.nav-link:hover { color: #e0e0e0; }
|
|
||||||
.nav-link.active { color: #fff; background: #2a2d3e; }
|
|
||||||
|
|
||||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
|
||||||
|
|
||||||
.progress-bar-wrap {
|
|
||||||
display: none; width: 100%; height: 3px; background: #2a2d3e;
|
|
||||||
}
|
|
||||||
.progress-bar-wrap.visible { display: block; }
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
gap: 12px; padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
|
||||||
padding: 14px; overflow: hidden;
|
|
||||||
}
|
|
||||||
.panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
|
|
||||||
|
|
||||||
.stats-cards {
|
|
||||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
|
||||||
}
|
|
||||||
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
|
||||||
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
|
||||||
|
|
||||||
.chart-panel { grid-row: span 2; }
|
|
||||||
canvas#workerChart { width: 100%; height: 200px; }
|
|
||||||
|
|
||||||
.actor-table-wrap { max-height: 200px; overflow-y: auto; }
|
|
||||||
.actor-table-wrap table { width: 100%; border-collapse: collapse; }
|
|
||||||
.actor-table-wrap th, .actor-table-wrap td {
|
|
||||||
padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2d3e; font-size: 12px;
|
|
||||||
}
|
|
||||||
.actor-table-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
|
||||||
|
|
||||||
.log-panel {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
.log-wrap { max-height: 300px; overflow-y: auto; }
|
|
||||||
.log-wrap table { width: 100%; border-collapse: collapse; }
|
|
||||||
.log-wrap th, .log-wrap td {
|
|
||||||
padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.log-wrap th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
|
||||||
.log-wrap td.msg { white-space: normal; word-break: break-all; max-width: 400px; }
|
|
||||||
|
|
||||||
.level-ERROR { color: #f44336; font-weight: 700; }
|
|
||||||
.level-WARN { color: #ff9800; }
|
|
||||||
.level-INFO { color: #4caf50; }
|
|
||||||
.level-DEBUG { color: #2196f3; }
|
|
||||||
.level-TRACE { color: #666; }
|
|
||||||
|
|
||||||
.worker-detail-panel { grid-column: 1 / -1; }
|
|
||||||
.worker-detail-scroll { max-height: 360px; overflow-y: auto; }
|
|
||||||
.worker-group { margin-bottom: 8px; border: 1px solid #2a2d3e; border-radius: 4px; overflow: hidden; }
|
|
||||||
.worker-group-header {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
padding: 7px 12px; background: #1c1f2e; cursor: pointer; user-select: none;
|
|
||||||
}
|
|
||||||
.worker-group-header:hover { background: #22253a; }
|
|
||||||
.worker-group-header .wid { font-weight: 700; }
|
|
||||||
.worker-group-header .summary { color: #888; font-size: 11px; }
|
|
||||||
.worker-group-header .toggle { color: #555; font-size: 14px; }
|
|
||||||
.worker-group-body { display: none; }
|
|
||||||
.worker-group.open .worker-group-body { display: block; }
|
|
||||||
.worker-group-body table { width: 100%; border-collapse: collapse; }
|
|
||||||
.worker-group-body th, .worker-group-body td {
|
|
||||||
padding: 3px 10px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
|
||||||
}
|
|
||||||
.worker-group-body th { color: #888; font-weight: 500; background: #161822; }
|
|
||||||
.msg-type { color: #4caf50; }
|
|
||||||
.msg-type.none { color: #555; font-style: italic; }
|
|
||||||
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: #0f1117; }
|
|
||||||
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h1>
|
|
||||||
Swactor Runtime Dashboard
|
|
||||||
<span id="statusDot" class="status-dot"></span>
|
|
||||||
<span id="replayBadge" class="replay-badge">REPLAY</span>
|
|
||||||
</h1>
|
|
||||||
<nav class="nav-links">
|
|
||||||
<a href="/" class="nav-link active">Overview</a>
|
|
||||||
<a href="/actors" class="nav-link">Actors</a>
|
|
||||||
<a href="/distribution" class="nav-link">Distribution</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<span id="replaySpeed" style="color:#2196f3;font-size:12px;display:none;"></span>
|
|
||||||
<span id="replayPct" style="color:#888;font-size:12px;display:none;"></span>
|
|
||||||
<span id="uptimeLabel" style="color:#888;font-size:12px;"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="progressBarWrap" class="progress-bar-wrap">
|
|
||||||
<div id="progressFill" class="progress-fill"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<div class="panel chart-panel">
|
|
||||||
<h2>Worker Distribution</h2>
|
|
||||||
<canvas id="workerChart"></canvas>
|
|
||||||
<div id="workerLegend" style="margin-top:8px;font-size:11px;color:#888;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel">
|
|
||||||
<h2>Stats</h2>
|
|
||||||
<div class="stats-cards">
|
|
||||||
<div class="stat-card"><div class="value" id="statActors">0</div><div class="label">Actors</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statMessages">0</div><div class="label">Messages</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statWorkers">0</div><div class="label">Workers</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statMailbox">0</div><div class="label">Mailbox</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel">
|
|
||||||
<h2>Actors</h2>
|
|
||||||
<div class="actor-table-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>Address</th><th>Worker</th></tr></thead>
|
|
||||||
<tbody id="actorTableBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel worker-detail-panel">
|
|
||||||
<h2>Worker Details</h2>
|
|
||||||
<div class="worker-detail-scroll" id="workerDetailContainer"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel log-panel">
|
|
||||||
<h2>Activity Log <span id="logCount" style="color:#555;font-weight:400;"></span></h2>
|
|
||||||
<div class="log-wrap" id="logWrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>Seq</th><th>Time</th><th>Level</th><th>Worker</th><th>Message</th><th>Fields</th></tr></thead>
|
|
||||||
<tbody id="logTableBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
|
||||||
var logRowCount = 0;
|
|
||||||
var MAX_LOG_ROWS = 2000;
|
|
||||||
var isReplay = (DASHBOARD_MODE === 'replay');
|
|
||||||
var lastUptimeMs = null;
|
|
||||||
var lastStatsTime = null;
|
|
||||||
|
|
||||||
var dot = document.getElementById('statusDot');
|
|
||||||
var uptimeLabel = document.getElementById('uptimeLabel');
|
|
||||||
var replayBadge = document.getElementById('replayBadge');
|
|
||||||
var replaySpeed = document.getElementById('replaySpeed');
|
|
||||||
var replayPct = document.getElementById('replayPct');
|
|
||||||
var progressBarWrap = document.getElementById('progressBarWrap');
|
|
||||||
var progressFill = document.getElementById('progressFill');
|
|
||||||
|
|
||||||
if (isReplay) {
|
|
||||||
replayBadge.className = 'replay-badge visible';
|
|
||||||
progressBarWrap.className = 'progress-bar-wrap visible';
|
|
||||||
dot.className = 'status-dot replaying';
|
|
||||||
uptimeLabel.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUptime() {
|
|
||||||
if (isReplay) return;
|
|
||||||
var up = lastUptimeMs;
|
|
||||||
if (up !== null && lastStatsTime !== null) {
|
|
||||||
up += (Date.now() - lastStatsTime);
|
|
||||||
}
|
|
||||||
if (up === null) { uptimeLabel.textContent = ''; return; }
|
|
||||||
var s = Math.floor(up / 1000);
|
|
||||||
var d = Math.floor(s / 86400);
|
|
||||||
var h = Math.floor((s % 86400) / 3600);
|
|
||||||
var m = Math.floor((s % 3600) / 60);
|
|
||||||
var sec = s % 60;
|
|
||||||
var parts = [];
|
|
||||||
if (d > 0) parts.push(d + 'd');
|
|
||||||
if (h > 0 || d > 0) parts.push(h + 'h');
|
|
||||||
parts.push(m + 'm');
|
|
||||||
parts.push(sec + 's');
|
|
||||||
uptimeLabel.textContent = parts.join(' ');
|
|
||||||
}
|
|
||||||
setInterval(updateUptime, 1000);
|
|
||||||
|
|
||||||
var canvas = document.getElementById('workerChart');
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
var colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
|
||||||
|
|
||||||
function drawWorkerChart(workers) {
|
|
||||||
var dpr = window.devicePixelRatio || 1;
|
|
||||||
var rect = canvas.getBoundingClientRect();
|
|
||||||
canvas.width = rect.width * dpr;
|
|
||||||
canvas.height = rect.height * dpr;
|
|
||||||
ctx.scale(dpr, dpr);
|
|
||||||
var W = rect.width, H = rect.height;
|
|
||||||
ctx.clearRect(0, 0, W, H);
|
|
||||||
|
|
||||||
if (!workers || workers.length === 0) return;
|
|
||||||
|
|
||||||
var maxActors = Math.max(1, Math.max.apply(null, workers.map(function(w) { return w.num_actors; })));
|
|
||||||
var barW = Math.max(8, Math.floor((W - 40) / workers.length) - 6);
|
|
||||||
var chartH = H - 30;
|
|
||||||
|
|
||||||
workers.forEach(function(w, i) {
|
|
||||||
var x = 20 + i * (barW + 6);
|
|
||||||
var h = (w.num_actors / maxActors) * (chartH * 0.45);
|
|
||||||
ctx.fillStyle = colors[i % colors.length];
|
|
||||||
ctx.globalAlpha = 0.8;
|
|
||||||
ctx.fillRect(x, chartH * 0.5 - h, barW, h);
|
|
||||||
|
|
||||||
var mh = Math.min(w.mailbox_depth * 2, chartH * 0.4);
|
|
||||||
ctx.globalAlpha = 0.4;
|
|
||||||
ctx.fillRect(x, chartH * 0.55, barW, mh);
|
|
||||||
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
ctx.fillStyle = '#888';
|
|
||||||
ctx.font = '10px monospace';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText('W' + w.id, x + barW / 2, H - 2);
|
|
||||||
});
|
|
||||||
|
|
||||||
var legend = document.getElementById('workerLegend');
|
|
||||||
legend.innerHTML = workers.map(function(w, i) {
|
|
||||||
return '<span style="color:' + colors[i % colors.length] + '">W' + w.id +
|
|
||||||
': ' + w.num_actors + ' actors, ' + w.messages_processed + ' msgs, mbox ' + w.mailbox_depth + '</span>';
|
|
||||||
}).join(' | ');
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStats(data) {
|
|
||||||
if (typeof data.uptime_ms === 'number') {
|
|
||||||
lastUptimeMs = data.uptime_ms;
|
|
||||||
lastStatsTime = Date.now();
|
|
||||||
}
|
|
||||||
var totalActors = data.actors ? data.actors.length : 0;
|
|
||||||
var totalMsgs = data.workers ? data.workers.reduce(function(s, w) { return s + w.messages_processed; }, 0) : 0;
|
|
||||||
var totalMailbox = data.workers ? data.workers.reduce(function(s, w) { return s + w.mailbox_depth; }, 0) : 0;
|
|
||||||
|
|
||||||
document.getElementById('statActors').textContent = totalActors;
|
|
||||||
document.getElementById('statMessages').textContent = totalMsgs.toLocaleString();
|
|
||||||
document.getElementById('statWorkers').textContent = data.num_workers || 0;
|
|
||||||
document.getElementById('statMailbox').textContent = totalMailbox;
|
|
||||||
|
|
||||||
drawWorkerChart(data.workers);
|
|
||||||
|
|
||||||
var tbody = document.getElementById('actorTableBody');
|
|
||||||
tbody.innerHTML = '';
|
|
||||||
if (data.actors) {
|
|
||||||
var shown = data.actors.slice(0, 200);
|
|
||||||
shown.forEach(function(entry) {
|
|
||||||
var addr = entry[0];
|
|
||||||
var wid = entry[1];
|
|
||||||
var hex = '';
|
|
||||||
if (addr && addr.length > 0) {
|
|
||||||
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
|
||||||
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
|
||||||
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
|
||||||
}
|
|
||||||
hex += '\u2026';
|
|
||||||
}
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tr.innerHTML = '<td style="color:#aaa;font-size:11px;">' + hex + '</td><td>W' + wid + '</td>';
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
});
|
|
||||||
if (data.actors.length > 200) {
|
|
||||||
var tr2 = document.createElement('tr');
|
|
||||||
tr2.innerHTML = '<td colspan="2" style="color:#555;">... and ' + (data.actors.length - 200) + ' more</td>';
|
|
||||||
tbody.appendChild(tr2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateWorkerDetails(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatAddr(addr) {
|
|
||||||
var hex = '';
|
|
||||||
if (addr && addr.length > 0) {
|
|
||||||
var bytes = Array.isArray(addr) ? addr : Object.values(addr);
|
|
||||||
for (var j = 0; j < Math.min(8, bytes.length); j++) {
|
|
||||||
hex += ('0' + bytes[j].toString(16)).slice(-2);
|
|
||||||
}
|
|
||||||
hex += '\u2026';
|
|
||||||
}
|
|
||||||
return hex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function shortTypeName(full) {
|
|
||||||
if (!full) return '';
|
|
||||||
var parts = full.split('::');
|
|
||||||
return parts[parts.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateWorkerDetails(data) {
|
|
||||||
var container = document.getElementById('workerDetailContainer');
|
|
||||||
if (!data.workers) return;
|
|
||||||
|
|
||||||
var groups = {};
|
|
||||||
data.workers.forEach(function(w) { groups[w.id] = { info: w, actors: [] }; });
|
|
||||||
if (data.actor_details) {
|
|
||||||
data.actor_details.forEach(function(a) {
|
|
||||||
if (groups[a.worker_id]) groups[a.worker_id].actors.push(a);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var openState = {};
|
|
||||||
container.querySelectorAll('.worker-group').forEach(function(g) {
|
|
||||||
openState[g.dataset.wid] = g.classList.contains('open');
|
|
||||||
});
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
var wids = Object.keys(groups).sort(function(a, b) { return a - b; });
|
|
||||||
|
|
||||||
wids.forEach(function(wid) {
|
|
||||||
var g = groups[wid];
|
|
||||||
var div = document.createElement('div');
|
|
||||||
var isOpen = openState[wid] || false;
|
|
||||||
div.className = 'worker-group' + (isOpen ? ' open' : '');
|
|
||||||
div.dataset.wid = wid;
|
|
||||||
|
|
||||||
var hdr = document.createElement('div');
|
|
||||||
hdr.className = 'worker-group-header';
|
|
||||||
var panicHtml = g.info.panics > 0 ? ', <span style="color:#f44336">' + g.info.panics + ' panics</span>' : '';
|
|
||||||
hdr.innerHTML =
|
|
||||||
'<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
|
|
||||||
'<span class="summary">' + g.actors.length + ' actors, ' +
|
|
||||||
g.info.messages_processed.toLocaleString() + ' msgs, mbox ' + g.info.mailbox_depth + panicHtml + '</span>' +
|
|
||||||
'<span class="toggle">' + (isOpen ? '\u25BC' : '\u25B6') + '</span>';
|
|
||||||
hdr.onclick = function() {
|
|
||||||
div.classList.toggle('open');
|
|
||||||
hdr.querySelector('.toggle').textContent = div.classList.contains('open') ? '\u25BC' : '\u25B6';
|
|
||||||
};
|
|
||||||
div.appendChild(hdr);
|
|
||||||
|
|
||||||
var body = document.createElement('div');
|
|
||||||
body.className = 'worker-group-body';
|
|
||||||
if (g.actors.length === 0) {
|
|
||||||
body.innerHTML = '<div style="padding:6px 12px;color:#555;">No actors</div>';
|
|
||||||
} else {
|
|
||||||
var rows = '';
|
|
||||||
g.actors.forEach(function(a) {
|
|
||||||
var hex = formatAddr(a.address);
|
|
||||||
var hasMsg = !!a.last_msg_type;
|
|
||||||
var msgShort = hasMsg ? shortTypeName(a.last_msg_type) : 'none';
|
|
||||||
var msgClass = hasMsg ? 'msg-type' : 'msg-type none';
|
|
||||||
var title = hasMsg ? ' title="' + escapeHtml(a.last_msg_type) + '"' : '';
|
|
||||||
rows += '<tr><td style="color:#aaa;">' + hex + '</td>' +
|
|
||||||
'<td>' + a.mailbox_depth + '</td>' +
|
|
||||||
'<td class="' + msgClass + '"' + title + '>' + escapeHtml(msgShort) + '</td></tr>';
|
|
||||||
});
|
|
||||||
body.innerHTML = '<table><thead><tr><th>Address</th><th>Mailbox</th><th>Last Message</th></tr></thead><tbody>' + rows + '</tbody></table>';
|
|
||||||
}
|
|
||||||
div.appendChild(body);
|
|
||||||
container.appendChild(div);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function addLogEvents(events) {
|
|
||||||
var tbody = document.getElementById('logTableBody');
|
|
||||||
var wrap = document.getElementById('logWrap');
|
|
||||||
var wasAtBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
|
|
||||||
|
|
||||||
events.forEach(function(ev) {
|
|
||||||
if (logRowCount >= MAX_LOG_ROWS) {
|
|
||||||
tbody.removeChild(tbody.firstChild);
|
|
||||||
logRowCount--;
|
|
||||||
}
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
var ts = new Date(ev.timestamp_ms);
|
|
||||||
var timeStr = ts.toLocaleTimeString() + '.' + String(ts.getMilliseconds()).padStart(3, '0');
|
|
||||||
var wid = ev.worker_id !== null && ev.worker_id !== undefined ? 'W' + ev.worker_id : '-';
|
|
||||||
var fieldsStr = Object.keys(ev.fields).length > 0 ? JSON.stringify(ev.fields) : '';
|
|
||||||
|
|
||||||
tr.innerHTML =
|
|
||||||
'<td>' + ev.seq + '</td>' +
|
|
||||||
'<td>' + timeStr + '</td>' +
|
|
||||||
'<td class="level-' + ev.level + '">' + ev.level + '</td>' +
|
|
||||||
'<td>' + wid + '</td>' +
|
|
||||||
'<td class="msg">' + escapeHtml(ev.message) + '</td>' +
|
|
||||||
'<td style="color:#555;max-width:300px;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(fieldsStr) + '</td>';
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
logRowCount++;
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('logCount').textContent = '(' + logRowCount + ')';
|
|
||||||
|
|
||||||
if (wasAtBottom) {
|
|
||||||
wrap.scrollTop = wrap.scrollHeight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function escapeHtml(s) {
|
|
||||||
if (!s) return '';
|
|
||||||
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function setStatus(s) {
|
|
||||||
if (s === 'done') {
|
|
||||||
dot.className = 'status-dot done';
|
|
||||||
if (isReplay) {
|
|
||||||
replayPct.textContent = '100%';
|
|
||||||
progressFill.style.width = '100%';
|
|
||||||
}
|
|
||||||
} else if (s === 'disconnected') {
|
|
||||||
dot.className = 'status-dot disconnected';
|
|
||||||
} else {
|
|
||||||
dot.className = isReplay ? 'status-dot replaying' : 'status-dot';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var es = new EventSource('/events');
|
|
||||||
|
|
||||||
es.addEventListener('stats', function(e) {
|
|
||||||
try { updateStats(JSON.parse(e.data)); } catch(err) { console.error('stats parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('activity', function(e) {
|
|
||||||
try { addLogEvents(JSON.parse(e.data)); } catch(err) { console.error('activity parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('replay_meta', function(e) {
|
|
||||||
try {
|
|
||||||
var meta = JSON.parse(e.data);
|
|
||||||
replaySpeed.textContent = meta.speed + 'x';
|
|
||||||
replaySpeed.style.display = 'inline';
|
|
||||||
replayPct.style.display = 'inline';
|
|
||||||
replayPct.textContent = '0%';
|
|
||||||
} catch(err) { console.error('replay_meta parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('replay_progress', function(e) {
|
|
||||||
try {
|
|
||||||
var data = JSON.parse(e.data);
|
|
||||||
var pct = Math.round(data.progress * 100);
|
|
||||||
replayPct.textContent = pct + '%';
|
|
||||||
progressFill.style.width = pct + '%';
|
|
||||||
} catch(err) { console.error('replay_progress parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('done', function() {
|
|
||||||
setStatus('done');
|
|
||||||
es.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
es.onerror = function() {
|
|
||||||
setStatus('disconnected');
|
|
||||||
};
|
|
||||||
|
|
||||||
es.onopen = function() {
|
|
||||||
setStatus('connected');
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
"##;
|
|
||||||
|
|
|
||||||
746
crates/runtime-dashboard/src/distribution.html
Normal file
746
crates/runtime-dashboard/src/distribution.html
Normal file
|
|
@ -0,0 +1,746 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Swactor Runtime – Distribution</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
||||||
|
}
|
||||||
|
.header-left { display: flex; align-items: center; }
|
||||||
|
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
||||||
|
.status-dot {
|
||||||
|
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
||||||
|
display: inline-block; margin-left: 8px; vertical-align: middle;
|
||||||
|
}
|
||||||
|
.status-dot.disconnected { background: #f44336; }
|
||||||
|
.status-dot.done { background: #ff9800; }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
||||||
|
.nav-link {
|
||||||
|
color: #888; text-decoration: none; font-size: 12px;
|
||||||
|
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: #e0e0e0; }
|
||||||
|
.nav-link.active { color: #fff; background: #2a2d3e; }
|
||||||
|
|
||||||
|
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
height: calc(100vh - 48px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-panel {
|
||||||
|
grid-row: 1 / 3; border-right: 1px solid #2a2d3e; position: relative;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.graph-panel canvas { width: 100%; height: 100%; display: block; }
|
||||||
|
|
||||||
|
.side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
|
||||||
|
|
||||||
|
.stats-panel {
|
||||||
|
flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3e; background: #161822;
|
||||||
|
}
|
||||||
|
.stats-panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.stats-cards {
|
||||||
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
||||||
|
}
|
||||||
|
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
||||||
|
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
||||||
|
|
||||||
|
.table-panel {
|
||||||
|
flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
|
||||||
|
}
|
||||||
|
.table-panel h2 {
|
||||||
|
font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px;
|
||||||
|
padding: 10px 16px 6px; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.table-scroll {
|
||||||
|
flex: 1; overflow-y: auto; padding: 0 16px 8px;
|
||||||
|
}
|
||||||
|
.table-scroll table { width: 100%; border-collapse: collapse; }
|
||||||
|
.table-scroll th, .table-scroll td {
|
||||||
|
padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.table-scroll th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
||||||
|
|
||||||
|
.state-alive { color: #4caf50; }
|
||||||
|
.state-suspect { color: #ff9800; }
|
||||||
|
.state-dead { color: #f44336; }
|
||||||
|
|
||||||
|
.bottom-panel {
|
||||||
|
grid-column: 1 / -1; border-top: 1px solid #2a2d3e; background: #161822;
|
||||||
|
display: flex; gap: 12px; padding: 12px 16px; height: 200px;
|
||||||
|
}
|
||||||
|
.bottom-section { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||||
|
.bottom-section h2 {
|
||||||
|
font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.bottom-section canvas { flex: 1; width: 100%; }
|
||||||
|
.bottom-section .scroll-wrap {
|
||||||
|
flex: 1; overflow-y: auto; font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ego-hint {
|
||||||
|
position: absolute; bottom: 12px; left: 12px; font-size: 10px;
|
||||||
|
color: #555; pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-id-label {
|
||||||
|
position: absolute; top: 12px; left: 12px; font-size: 11px;
|
||||||
|
color: #888; max-width: 50%; overflow: hidden; text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: #0f1117; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h1>
|
||||||
|
Swactor Runtime Dashboard
|
||||||
|
<span id="statusDot" class="status-dot disconnected"></span>
|
||||||
|
</h1>
|
||||||
|
<nav class="nav-links">
|
||||||
|
<a href="/" class="nav-link">Overview</a>
|
||||||
|
<a href="/actors" class="nav-link">Actors</a>
|
||||||
|
<a href="/distribution" class="nav-link active">Distribution</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span id="nodeLabel" style="color:#888;font-size:12px;">Waiting for data...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<!-- Left: Graph -->
|
||||||
|
<div class="graph-panel">
|
||||||
|
<canvas id="graphCanvas"></canvas>
|
||||||
|
<div class="ego-hint" id="egoHint">Click a node for ego-centric view. Double-click to reset.</div>
|
||||||
|
<div class="node-id-label" id="selfLabel"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Stats + Tables -->
|
||||||
|
<div class="side-panel">
|
||||||
|
<div class="stats-panel">
|
||||||
|
<h2>Distribution Stats</h2>
|
||||||
|
<div class="stats-cards">
|
||||||
|
<div class="stat-card"><div class="value" id="statMembers">0</div><div class="label">Members</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statAlive">0</div><div class="label">Alive</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statSuspect">0</div><div class="label">Suspect</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statDead">0</div><div class="label">Dead</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statCache">0</div><div class="label">Cache</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statRT">0</div><div class="label">RT Size</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statDir">0</div><div class="label">Directory</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statRepair">0</div><div class="label">Repair Q</div></div>
|
||||||
|
<div class="stat-card"><div class="value" id="statProbes">0</div><div class="label">Probes</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-panel">
|
||||||
|
<h2>Members <span id="memberCount" style="color:#555;font-weight:400;"></span></h2>
|
||||||
|
<div class="table-scroll">
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>State</th><th>Node ID</th><th>Address</th><th>Inc</th></tr></thead>
|
||||||
|
<tbody id="membersBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom: Cache, Gossip Pairs, Routing Histogram -->
|
||||||
|
<div class="bottom-panel">
|
||||||
|
<div class="bottom-section">
|
||||||
|
<h2>LRU Cache <span id="cacheCount" style="color:#555;font-weight:400;"></span></h2>
|
||||||
|
<div class="scroll-wrap">
|
||||||
|
<table style="width:100%;border-collapse:collapse;">
|
||||||
|
<thead><tr><th style="color:#888;font-weight:500;font-size:11px;">Actor</th><th style="color:#888;font-weight:500;font-size:11px;">Node</th></tr></thead>
|
||||||
|
<tbody id="cacheBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-section">
|
||||||
|
<h2>Recent Probes</h2>
|
||||||
|
<div class="scroll-wrap" id="probesWrap"></div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-section">
|
||||||
|
<h2>Routing Buckets</h2>
|
||||||
|
<canvas id="bucketChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
||||||
|
var dot = document.getElementById('statusDot');
|
||||||
|
|
||||||
|
// ── State ───────────────────────────────────────────────────────
|
||||||
|
var data = null; // latest DistributionNodeSnapshot
|
||||||
|
var selfNodeId = ''; // this node's hex id
|
||||||
|
var focusIdx = -1; // ego-centric focus (-1 = none, 0 = self)
|
||||||
|
|
||||||
|
// Graph state
|
||||||
|
var N = 0;
|
||||||
|
var posX = new Float64Array(0);
|
||||||
|
var posY = new Float64Array(0);
|
||||||
|
var nodeIds = []; // hex strings
|
||||||
|
var nodeStates = []; // 'alive' | 'suspect' | 'dead' | 'self'
|
||||||
|
var nodeAddrs = [];
|
||||||
|
var layoutDone = false;
|
||||||
|
var layoutIter = 0;
|
||||||
|
|
||||||
|
// View transform
|
||||||
|
var vx = 0, vy = 0, vs = 1;
|
||||||
|
var isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
|
||||||
|
var clickStartX = 0, clickStartY = 0;
|
||||||
|
|
||||||
|
// Routing neighbor set (for ego highlight)
|
||||||
|
var routingSet = {};
|
||||||
|
|
||||||
|
// ── Quadtree (Barnes-Hut) ──────────────────────────────────────
|
||||||
|
var QF = 11;
|
||||||
|
var qt = new Float64Array(256 * QF);
|
||||||
|
var qtN = 0;
|
||||||
|
var _fx = 0, _fy = 0;
|
||||||
|
|
||||||
|
function qtAlloc(ox, oy, sz) {
|
||||||
|
if (qtN * QF >= qt.length) {
|
||||||
|
var nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
|
||||||
|
nq.set(qt); qt = nq;
|
||||||
|
}
|
||||||
|
var i = qtN++, o = i * QF;
|
||||||
|
qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
|
||||||
|
qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
|
||||||
|
qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
|
||||||
|
qt[o+10]=-1;
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
|
||||||
|
function qtBuild() {
|
||||||
|
var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
|
||||||
|
if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
|
||||||
|
}
|
||||||
|
var sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
|
||||||
|
qtN = 0;
|
||||||
|
qtAlloc(x0 - 1, y0 - 1, sz);
|
||||||
|
for (var i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function qtIns(ni, bi, bx, by) {
|
||||||
|
var o = ni * QF;
|
||||||
|
if (qt[o+5] === 0) { qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi; return; }
|
||||||
|
if (qt[o+10] >= 0) {
|
||||||
|
if (qt[o+2] < 0.001) { qt[o+5]++; return; }
|
||||||
|
var eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
|
||||||
|
qt[o+10] = -1;
|
||||||
|
qtInsChild(ni, eb, ex, ey);
|
||||||
|
}
|
||||||
|
var m = qt[o+5];
|
||||||
|
qt[o+3] = (qt[o+3]*m + bx) / (m+1);
|
||||||
|
qt[o+4] = (qt[o+4]*m + by) / (m+1);
|
||||||
|
qt[o+5] = m + 1;
|
||||||
|
qtInsChild(ni, bi, bx, by);
|
||||||
|
}
|
||||||
|
|
||||||
|
function qtInsChild(ni, bi, bx, by) {
|
||||||
|
var o = ni * QF, hs = qt[o+2] / 2;
|
||||||
|
var mx = qt[o] + hs, my = qt[o+1] + hs;
|
||||||
|
var qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
|
||||||
|
var ci = o + 6 + qy * 2 + qx;
|
||||||
|
if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
|
||||||
|
qtIns(qt[ci], bi, bx, by);
|
||||||
|
}
|
||||||
|
|
||||||
|
function qtCalc(ni, px, py, k2, th2) {
|
||||||
|
if (ni < 0) return;
|
||||||
|
var o = ni * QF;
|
||||||
|
if (qt[o+5] === 0) return;
|
||||||
|
var dx = qt[o+3] - px, dy = qt[o+4] - py;
|
||||||
|
var d2 = dx*dx + dy*dy;
|
||||||
|
if (d2 < 0.0001) d2 = 0.0001;
|
||||||
|
if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
|
||||||
|
var d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
|
||||||
|
_fx += (dx/d)*f; _fy += (dy/d)*f;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (var c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Canvas setup ───────────────────────────────────────────────
|
||||||
|
var canvas = document.getElementById('graphCanvas');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
var r = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = r.width * devicePixelRatio;
|
||||||
|
canvas.height = r.height * devicePixelRatio;
|
||||||
|
canvas.style.width = r.width + 'px';
|
||||||
|
canvas.style.height = r.height + 'px';
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', function() { resizeCanvas(); drawGraph(); });
|
||||||
|
|
||||||
|
// ── Zoom & pan ─────────────────────────────────────────────────
|
||||||
|
canvas.addEventListener('wheel', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var r = canvas.getBoundingClientRect();
|
||||||
|
var mx = e.clientX - r.left, my = e.clientY - r.top;
|
||||||
|
var f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
|
||||||
|
var ns = Math.max(0.05, Math.min(5, vs * f));
|
||||||
|
var ratio = ns / vs;
|
||||||
|
vx = mx - (mx - vx) * ratio;
|
||||||
|
vy = my - (my - vy) * ratio;
|
||||||
|
vs = ns;
|
||||||
|
drawGraph();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
canvas.addEventListener('mousedown', function(e) {
|
||||||
|
if (e.button !== 0) return;
|
||||||
|
isDragging = true;
|
||||||
|
dragX = e.clientX; dragY = e.clientY;
|
||||||
|
clickStartX = e.clientX; clickStartY = e.clientY;
|
||||||
|
dragVx = vx; dragVy = vy;
|
||||||
|
canvas.style.cursor = 'grabbing';
|
||||||
|
});
|
||||||
|
window.addEventListener('mousemove', function(e) {
|
||||||
|
if (!isDragging) return;
|
||||||
|
vx = dragVx + (e.clientX - dragX);
|
||||||
|
vy = dragVy + (e.clientY - dragY);
|
||||||
|
drawGraph();
|
||||||
|
});
|
||||||
|
window.addEventListener('mouseup', function(e) {
|
||||||
|
if (isDragging) {
|
||||||
|
var wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
|
||||||
|
isDragging = false; canvas.style.cursor = '';
|
||||||
|
if (!wasDrag) handleClick(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
canvas.addEventListener('dblclick', function() { focusIdx = -1; resetView(); drawGraph(); });
|
||||||
|
|
||||||
|
function resetView() {
|
||||||
|
if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
|
||||||
|
var r = canvas.parentElement.getBoundingClientRect();
|
||||||
|
var w = r.width, h = r.height;
|
||||||
|
var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
|
||||||
|
if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
|
||||||
|
}
|
||||||
|
if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
|
||||||
|
var pad = 40;
|
||||||
|
vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
|
||||||
|
vx = (w - (x0 + x1) * vs) / 2;
|
||||||
|
vy = (h - (y0 + y1) * vs) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Click handler (ego-centric selection) ──────────────────────
|
||||||
|
function handleClick(e) {
|
||||||
|
var r = canvas.getBoundingClientRect();
|
||||||
|
var mx = e.clientX - r.left, my = e.clientY - r.top;
|
||||||
|
var wx = (mx - vx) / vs, wy = (my - vy) / vs;
|
||||||
|
var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
|
||||||
|
var hitR = baseR * 2;
|
||||||
|
var best = -1, bestD = hitR * hitR;
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
var dx = posX[i] - wx, dy = posY[i] - wy;
|
||||||
|
var d2 = dx*dx + dy*dy;
|
||||||
|
if (d2 < bestD) { bestD = d2; best = i; }
|
||||||
|
}
|
||||||
|
if (best < 0) { focusIdx = -1; }
|
||||||
|
else { focusIdx = best; }
|
||||||
|
drawGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Force layout ───────────────────────────────────────────────
|
||||||
|
function initPositions(w, h) {
|
||||||
|
var cx = w / 2, cy = h / 2;
|
||||||
|
var rad = Math.min(cx, cy) * 0.6;
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
var a = (2 * Math.PI * i) / N - Math.PI / 2;
|
||||||
|
posX[i] = cx + rad * Math.cos(a);
|
||||||
|
posY[i] = cy + rad * Math.sin(a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function runLayout() {
|
||||||
|
var r = canvas.parentElement.getBoundingClientRect();
|
||||||
|
var w = r.width, h = r.height;
|
||||||
|
if (w === 0 || h === 0) return;
|
||||||
|
var cx = w/2, cy = h/2;
|
||||||
|
var k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
|
||||||
|
var totalIters = Math.min(200, Math.max(30, Math.floor(20000 / Math.max(N, 1))));
|
||||||
|
var useBH = N > 60, th2 = 0.64;
|
||||||
|
var dx = new Float64Array(N), dy = new Float64Array(N);
|
||||||
|
|
||||||
|
// Edges: self→each member (star topology from this node's perspective)
|
||||||
|
var selfIdx = 0; // node 0 is always 'self'
|
||||||
|
var edges = [];
|
||||||
|
for (var i = 1; i < N; i++) edges.push([selfIdx, i]);
|
||||||
|
|
||||||
|
for (var iter = 0; iter < totalIters; iter++) {
|
||||||
|
dx.fill(0); dy.fill(0);
|
||||||
|
|
||||||
|
if (useBH) {
|
||||||
|
qtBuild();
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
_fx = 0; _fy = 0;
|
||||||
|
qtCalc(0, posX[i], posY[i], k2, th2);
|
||||||
|
dx[i] += _fx; dy[i] += _fy;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < N; i++) for (var j = i+1; j < N; j++) {
|
||||||
|
var ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
|
||||||
|
var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
|
||||||
|
var f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
|
||||||
|
dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var e = 0; e < edges.length; e++) {
|
||||||
|
var si = edges[e][0], di = edges[e][1];
|
||||||
|
var ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
|
||||||
|
var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
|
||||||
|
var f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
|
||||||
|
dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
|
||||||
|
}
|
||||||
|
|
||||||
|
var temp = Math.max(0.1, 1 - iter/totalIters);
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
var dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
|
||||||
|
var cap = Math.min(dist, 10*temp);
|
||||||
|
posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
|
||||||
|
posX[i] = Math.max(40, Math.min(w-40, posX[i]));
|
||||||
|
posY[i] = Math.max(40, Math.min(h-40, posY[i]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
layoutDone = true;
|
||||||
|
resetView();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Draw graph ─────────────────────────────────────────────────
|
||||||
|
var stateColors = { 'alive': '#4caf50', 'suspect': '#ff9800', 'dead': '#f44336', 'self': '#6366f1' };
|
||||||
|
|
||||||
|
function drawGraph() {
|
||||||
|
var dpr = devicePixelRatio || 1;
|
||||||
|
var r = canvas.parentElement.getBoundingClientRect();
|
||||||
|
if (canvas.width !== Math.round(r.width * dpr)) resizeCanvas();
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, r.width, r.height);
|
||||||
|
|
||||||
|
if (N === 0) {
|
||||||
|
ctx.fillStyle = '#555';
|
||||||
|
ctx.font = '13px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText('No distribution data yet', r.width / 2, r.height / 2);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(vx, vy);
|
||||||
|
ctx.scale(vs, vs);
|
||||||
|
|
||||||
|
var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
|
||||||
|
|
||||||
|
// Determine highlighted set for ego mode
|
||||||
|
var highlighted = null;
|
||||||
|
if (focusIdx >= 0) {
|
||||||
|
highlighted = {};
|
||||||
|
highlighted[focusIdx] = true;
|
||||||
|
// If focus is self (0), highlight all connected members
|
||||||
|
// If focus is a member, highlight self and that member
|
||||||
|
if (focusIdx === 0) {
|
||||||
|
for (var i = 1; i < N; i++) highlighted[i] = true;
|
||||||
|
} else {
|
||||||
|
highlighted[0] = true; // always show self
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw edges (self → each member)
|
||||||
|
for (var i = 1; i < N; i++) {
|
||||||
|
var alpha = 1;
|
||||||
|
var dash = false;
|
||||||
|
if (highlighted) {
|
||||||
|
if (!highlighted[i]) { alpha = 0.08; }
|
||||||
|
else {
|
||||||
|
// Check if this node is a routing neighbor
|
||||||
|
var nid = nodeIds[i];
|
||||||
|
if (routingSet[nid]) { dash = true; alpha = 0.7; }
|
||||||
|
else { alpha = 0.5; }
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alpha = 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(posX[0], posY[0]);
|
||||||
|
ctx.lineTo(posX[i], posY[i]);
|
||||||
|
ctx.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
|
||||||
|
ctx.lineWidth = 1 / vs;
|
||||||
|
if (dash) { ctx.setLineDash([4/vs, 4/vs]); }
|
||||||
|
else { ctx.setLineDash([]); }
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
|
||||||
|
// Draw nodes
|
||||||
|
for (var i = 0; i < N; i++) {
|
||||||
|
var opacity = 1;
|
||||||
|
if (highlighted && !highlighted[i]) opacity = 0.15;
|
||||||
|
|
||||||
|
var col = stateColors[nodeStates[i]] || '#888';
|
||||||
|
var isSelf = (nodeStates[i] === 'self');
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
var nr = isSelf ? baseR * 1.5 : baseR;
|
||||||
|
ctx.arc(posX[i], posY[i], nr, 0, Math.PI * 2);
|
||||||
|
ctx.globalAlpha = opacity * 0.85;
|
||||||
|
ctx.fillStyle = col;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
if (isSelf) {
|
||||||
|
ctx.lineWidth = 2 / vs;
|
||||||
|
ctx.strokeStyle = '#fff';
|
||||||
|
ctx.globalAlpha = opacity * 0.6;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (focusIdx === i) {
|
||||||
|
ctx.lineWidth = 2 / vs;
|
||||||
|
ctx.strokeStyle = '#fff';
|
||||||
|
ctx.globalAlpha = opacity;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
// Label (short ID)
|
||||||
|
if (vs > 0.5) {
|
||||||
|
ctx.fillStyle = '#ccc';
|
||||||
|
ctx.globalAlpha = opacity;
|
||||||
|
ctx.font = Math.round(9 / vs) + 'px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
var label = nodeIds[i] ? nodeIds[i].substring(0, 8) : '';
|
||||||
|
ctx.fillText(label, posX[i], posY[i] - nr - 3/vs);
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Update from snapshot ───────────────────────────────────────
|
||||||
|
function updateFromSnapshot(d) {
|
||||||
|
data = d;
|
||||||
|
|
||||||
|
// Build node arrays: index 0 = self, then members
|
||||||
|
var oldN = N;
|
||||||
|
var newIds = [d.node_id];
|
||||||
|
var newStates = ['self'];
|
||||||
|
var newAddrs = [d.listen_addr];
|
||||||
|
for (var i = 0; i < d.members.length; i++) {
|
||||||
|
newIds.push(d.members[i].node_id);
|
||||||
|
newStates.push(d.members[i].state);
|
||||||
|
newAddrs.push(d.members[i].addr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build routing neighbor set
|
||||||
|
routingSet = {};
|
||||||
|
for (var i = 0; i < d.routing_neighbors.length; i++) {
|
||||||
|
routingSet[d.routing_neighbors[i].node_id] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
selfNodeId = d.node_id;
|
||||||
|
|
||||||
|
// Check if topology changed
|
||||||
|
var changed = newIds.length !== N;
|
||||||
|
if (!changed) {
|
||||||
|
for (var i = 0; i < newIds.length; i++) {
|
||||||
|
if (newIds[i] !== nodeIds[i]) { changed = true; break; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeIds = newIds;
|
||||||
|
nodeStates = newStates;
|
||||||
|
nodeAddrs = newAddrs;
|
||||||
|
N = nodeIds.length;
|
||||||
|
|
||||||
|
if (changed || !layoutDone) {
|
||||||
|
posX = new Float64Array(N);
|
||||||
|
posY = new Float64Array(N);
|
||||||
|
resizeCanvas();
|
||||||
|
initPositions(canvas.parentElement.getBoundingClientRect().width,
|
||||||
|
canvas.parentElement.getBoundingClientRect().height);
|
||||||
|
runLayout();
|
||||||
|
} else {
|
||||||
|
// Just update states, redraw
|
||||||
|
drawGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUI(d);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUI(d) {
|
||||||
|
// Self label
|
||||||
|
document.getElementById('selfLabel').textContent = 'Node: ' + d.node_id.substring(0, 16) + '\u2026';
|
||||||
|
document.getElementById('nodeLabel').textContent = d.listen_addr;
|
||||||
|
|
||||||
|
// Stats cards
|
||||||
|
document.getElementById('statMembers').textContent = d.members.length;
|
||||||
|
document.getElementById('statAlive').textContent = d.alive_count;
|
||||||
|
document.getElementById('statSuspect').textContent = d.suspect_count;
|
||||||
|
document.getElementById('statDead').textContent = d.dead_count;
|
||||||
|
document.getElementById('statCache').textContent = d.cache_size;
|
||||||
|
document.getElementById('statRT').textContent = d.routing_table_size;
|
||||||
|
document.getElementById('statDir').textContent = d.directory_entry_count;
|
||||||
|
document.getElementById('statRepair').textContent = d.repair_queue_size;
|
||||||
|
document.getElementById('statProbes').textContent = d.recent_probe_targets.length;
|
||||||
|
|
||||||
|
// Color alive/suspect/dead
|
||||||
|
document.getElementById('statAlive').style.color = '#4caf50';
|
||||||
|
document.getElementById('statSuspect').style.color = d.suspect_count > 0 ? '#ff9800' : '#fff';
|
||||||
|
document.getElementById('statDead').style.color = d.dead_count > 0 ? '#f44336' : '#fff';
|
||||||
|
|
||||||
|
// Members table
|
||||||
|
var body = document.getElementById('membersBody');
|
||||||
|
body.innerHTML = '';
|
||||||
|
document.getElementById('memberCount').textContent = '(' + d.members.length + ')';
|
||||||
|
for (var i = 0; i < d.members.length; i++) {
|
||||||
|
var m = d.members[i];
|
||||||
|
var cls = 'state-' + m.state;
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
tr.innerHTML =
|
||||||
|
'<td class="' + cls + '">' + m.state + '</td>' +
|
||||||
|
'<td style="color:#aaa;font-size:10px;">' + m.node_id.substring(0, 16) + '\u2026</td>' +
|
||||||
|
'<td>' + m.addr + '</td>' +
|
||||||
|
'<td>' + m.incarnation + '</td>';
|
||||||
|
body.appendChild(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache table
|
||||||
|
var cacheBody = document.getElementById('cacheBody');
|
||||||
|
cacheBody.innerHTML = '';
|
||||||
|
document.getElementById('cacheCount').textContent = '(' + d.cache_entries.length + ')';
|
||||||
|
var cacheMax = Math.min(d.cache_entries.length, 200);
|
||||||
|
for (var i = 0; i < cacheMax; i++) {
|
||||||
|
var e = d.cache_entries[i];
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
tr.innerHTML =
|
||||||
|
'<td style="color:#aaa;font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;">' + e.actor_addr + '</td>' +
|
||||||
|
'<td style="color:#aaa;font-size:10px;">' + e.node_id.substring(0, 12) + '\u2026</td>';
|
||||||
|
cacheBody.appendChild(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recent probes
|
||||||
|
var probesWrap = document.getElementById('probesWrap');
|
||||||
|
probesWrap.innerHTML = '';
|
||||||
|
for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
|
||||||
|
var div = document.createElement('div');
|
||||||
|
div.style.cssText = 'padding:2px 0;color:#aaa;font-size:11px;border-bottom:1px solid #1c1f2e;';
|
||||||
|
div.textContent = d.recent_probe_targets[i].substring(0, 16) + '\u2026';
|
||||||
|
probesWrap.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Routing bucket histogram
|
||||||
|
drawBucketChart(d.routing_buckets);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Bucket histogram ───────────────────────────────────────────
|
||||||
|
function drawBucketChart(buckets) {
|
||||||
|
var cv = document.getElementById('bucketChart');
|
||||||
|
var bctx = cv.getContext('2d');
|
||||||
|
var dpr = devicePixelRatio || 1;
|
||||||
|
var rect = cv.parentElement.getBoundingClientRect();
|
||||||
|
var rw = rect.width, rh = cv.parentElement.clientHeight - 20;
|
||||||
|
cv.width = rw * dpr;
|
||||||
|
cv.height = rh * dpr;
|
||||||
|
cv.style.width = rw + 'px';
|
||||||
|
cv.style.height = rh + 'px';
|
||||||
|
bctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
bctx.clearRect(0, 0, rw, rh);
|
||||||
|
|
||||||
|
if (!buckets || buckets.length === 0) {
|
||||||
|
bctx.fillStyle = '#555';
|
||||||
|
bctx.font = '11px monospace';
|
||||||
|
bctx.textAlign = 'center';
|
||||||
|
bctx.fillText('No buckets', rw / 2, rh / 2);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var maxCount = 1;
|
||||||
|
for (var i = 0; i < buckets.length; i++) {
|
||||||
|
if (buckets[i][1] > maxCount) maxCount = buckets[i][1];
|
||||||
|
}
|
||||||
|
|
||||||
|
var barW = Math.max(4, Math.floor((rw - 20) / buckets.length) - 2);
|
||||||
|
var chartH = rh - 20;
|
||||||
|
|
||||||
|
for (var i = 0; i < buckets.length; i++) {
|
||||||
|
var x = 10 + i * (barW + 2);
|
||||||
|
var h = (buckets[i][1] / maxCount) * (chartH - 4);
|
||||||
|
bctx.fillStyle = '#6366f1';
|
||||||
|
bctx.globalAlpha = 0.8;
|
||||||
|
bctx.fillRect(x, chartH - h, barW, h);
|
||||||
|
|
||||||
|
if (buckets.length <= 30) {
|
||||||
|
bctx.globalAlpha = 1;
|
||||||
|
bctx.fillStyle = '#888';
|
||||||
|
bctx.font = '8px monospace';
|
||||||
|
bctx.textAlign = 'center';
|
||||||
|
bctx.fillText(buckets[i][0], x + barW / 2, rh - 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
bctx.globalAlpha = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── SSE connection ─────────────────────────────────────────────
|
||||||
|
var es = new EventSource('/events');
|
||||||
|
|
||||||
|
es.addEventListener('distribution', function(e) {
|
||||||
|
try {
|
||||||
|
var d = JSON.parse(e.data);
|
||||||
|
updateFromSnapshot(d);
|
||||||
|
} catch(err) { console.error('distribution parse error', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
es.addEventListener('done', function() {
|
||||||
|
dot.className = 'status-dot done';
|
||||||
|
es.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
es.onerror = function() {
|
||||||
|
dot.className = 'status-dot disconnected';
|
||||||
|
};
|
||||||
|
|
||||||
|
es.onopen = function() {
|
||||||
|
dot.className = 'status-dot';
|
||||||
|
};
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
drawGraph();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,747 +1 @@
|
||||||
pub const DISTRIBUTION_HTML: &str = r##"<!DOCTYPE html>
|
pub const DISTRIBUTION_HTML: &str = include_str!("distribution.html");
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Swactor Runtime – Distribution</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; background: #0f1117; color: #e0e0e0; font-size: 13px; }
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
padding: 12px 20px; background: #161822; border-bottom: 1px solid #2a2d3e;
|
|
||||||
}
|
|
||||||
.header-left { display: flex; align-items: center; }
|
|
||||||
.header h1 { font-size: 16px; font-weight: 600; color: #fff; }
|
|
||||||
.status-dot {
|
|
||||||
width: 10px; height: 10px; border-radius: 50%; background: #4caf50;
|
|
||||||
display: inline-block; margin-left: 8px; vertical-align: middle;
|
|
||||||
}
|
|
||||||
.status-dot.disconnected { background: #f44336; }
|
|
||||||
.status-dot.done { background: #ff9800; }
|
|
||||||
|
|
||||||
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
|
|
||||||
.nav-link {
|
|
||||||
color: #888; text-decoration: none; font-size: 12px;
|
|
||||||
padding: 4px 10px; border-radius: 3px; transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.nav-link:hover { color: #e0e0e0; }
|
|
||||||
.nav-link.active { color: #fff; background: #2a2d3e; }
|
|
||||||
|
|
||||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
|
||||||
|
|
||||||
.main {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: auto 1fr auto;
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.graph-panel {
|
|
||||||
grid-row: 1 / 3; border-right: 1px solid #2a2d3e; position: relative;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
.graph-panel canvas { width: 100%; height: 100%; display: block; }
|
|
||||||
|
|
||||||
.side-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
|
|
||||||
|
|
||||||
.stats-panel {
|
|
||||||
flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #2a2d3e; background: #161822;
|
|
||||||
}
|
|
||||||
.stats-panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
|
|
||||||
|
|
||||||
.stats-cards {
|
|
||||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: #1c1f2e; border-radius: 4px; padding: 10px; text-align: center;
|
|
||||||
}
|
|
||||||
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
|
|
||||||
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
|
|
||||||
|
|
||||||
.table-panel {
|
|
||||||
flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
|
|
||||||
}
|
|
||||||
.table-panel h2 {
|
|
||||||
font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px;
|
|
||||||
padding: 10px 16px 6px; flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.table-scroll {
|
|
||||||
flex: 1; overflow-y: auto; padding: 0 16px 8px;
|
|
||||||
}
|
|
||||||
.table-scroll table { width: 100%; border-collapse: collapse; }
|
|
||||||
.table-scroll th, .table-scroll td {
|
|
||||||
padding: 3px 8px; text-align: left; border-bottom: 1px solid #1c1f2e; font-size: 11px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.table-scroll th { color: #888; font-weight: 500; position: sticky; top: 0; background: #161822; }
|
|
||||||
|
|
||||||
.state-alive { color: #4caf50; }
|
|
||||||
.state-suspect { color: #ff9800; }
|
|
||||||
.state-dead { color: #f44336; }
|
|
||||||
|
|
||||||
.bottom-panel {
|
|
||||||
grid-column: 1 / -1; border-top: 1px solid #2a2d3e; background: #161822;
|
|
||||||
display: flex; gap: 12px; padding: 12px 16px; height: 200px;
|
|
||||||
}
|
|
||||||
.bottom-section { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
||||||
.bottom-section h2 {
|
|
||||||
font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.bottom-section canvas { flex: 1; width: 100%; }
|
|
||||||
.bottom-section .scroll-wrap {
|
|
||||||
flex: 1; overflow-y: auto; font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ego-hint {
|
|
||||||
position: absolute; bottom: 12px; left: 12px; font-size: 10px;
|
|
||||||
color: #555; pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-id-label {
|
|
||||||
position: absolute; top: 12px; left: 12px; font-size: 11px;
|
|
||||||
color: #888; max-width: 50%; overflow: hidden; text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: #0f1117; }
|
|
||||||
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h1>
|
|
||||||
Swactor Runtime Dashboard
|
|
||||||
<span id="statusDot" class="status-dot disconnected"></span>
|
|
||||||
</h1>
|
|
||||||
<nav class="nav-links">
|
|
||||||
<a href="/" class="nav-link">Overview</a>
|
|
||||||
<a href="/actors" class="nav-link">Actors</a>
|
|
||||||
<a href="/distribution" class="nav-link active">Distribution</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<span id="nodeLabel" style="color:#888;font-size:12px;">Waiting for data...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main">
|
|
||||||
<!-- Left: Graph -->
|
|
||||||
<div class="graph-panel">
|
|
||||||
<canvas id="graphCanvas"></canvas>
|
|
||||||
<div class="ego-hint" id="egoHint">Click a node for ego-centric view. Double-click to reset.</div>
|
|
||||||
<div class="node-id-label" id="selfLabel"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right: Stats + Tables -->
|
|
||||||
<div class="side-panel">
|
|
||||||
<div class="stats-panel">
|
|
||||||
<h2>Distribution Stats</h2>
|
|
||||||
<div class="stats-cards">
|
|
||||||
<div class="stat-card"><div class="value" id="statMembers">0</div><div class="label">Members</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statAlive">0</div><div class="label">Alive</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statSuspect">0</div><div class="label">Suspect</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statDead">0</div><div class="label">Dead</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statCache">0</div><div class="label">Cache</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statRT">0</div><div class="label">RT Size</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statDir">0</div><div class="label">Directory</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statRepair">0</div><div class="label">Repair Q</div></div>
|
|
||||||
<div class="stat-card"><div class="value" id="statProbes">0</div><div class="label">Probes</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-panel">
|
|
||||||
<h2>Members <span id="memberCount" style="color:#555;font-weight:400;"></span></h2>
|
|
||||||
<div class="table-scroll">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>State</th><th>Node ID</th><th>Address</th><th>Inc</th></tr></thead>
|
|
||||||
<tbody id="membersBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bottom: Cache, Gossip Pairs, Routing Histogram -->
|
|
||||||
<div class="bottom-panel">
|
|
||||||
<div class="bottom-section">
|
|
||||||
<h2>LRU Cache <span id="cacheCount" style="color:#555;font-weight:400;"></span></h2>
|
|
||||||
<div class="scroll-wrap">
|
|
||||||
<table style="width:100%;border-collapse:collapse;">
|
|
||||||
<thead><tr><th style="color:#888;font-weight:500;font-size:11px;">Actor</th><th style="color:#888;font-weight:500;font-size:11px;">Node</th></tr></thead>
|
|
||||||
<tbody id="cacheBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-section">
|
|
||||||
<h2>Recent Probes</h2>
|
|
||||||
<div class="scroll-wrap" id="probesWrap"></div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-section">
|
|
||||||
<h2>Routing Buckets</h2>
|
|
||||||
<canvas id="bucketChart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
var DASHBOARD_MODE = '__DASHBOARD_MODE__';
|
|
||||||
var dot = document.getElementById('statusDot');
|
|
||||||
|
|
||||||
// ── State ───────────────────────────────────────────────────────
|
|
||||||
var data = null; // latest DistributionNodeSnapshot
|
|
||||||
var selfNodeId = ''; // this node's hex id
|
|
||||||
var focusIdx = -1; // ego-centric focus (-1 = none, 0 = self)
|
|
||||||
|
|
||||||
// Graph state
|
|
||||||
var N = 0;
|
|
||||||
var posX = new Float64Array(0);
|
|
||||||
var posY = new Float64Array(0);
|
|
||||||
var nodeIds = []; // hex strings
|
|
||||||
var nodeStates = []; // 'alive' | 'suspect' | 'dead' | 'self'
|
|
||||||
var nodeAddrs = [];
|
|
||||||
var layoutDone = false;
|
|
||||||
var layoutIter = 0;
|
|
||||||
|
|
||||||
// View transform
|
|
||||||
var vx = 0, vy = 0, vs = 1;
|
|
||||||
var isDragging = false, dragX = 0, dragY = 0, dragVx = 0, dragVy = 0;
|
|
||||||
var clickStartX = 0, clickStartY = 0;
|
|
||||||
|
|
||||||
// Routing neighbor set (for ego highlight)
|
|
||||||
var routingSet = {};
|
|
||||||
|
|
||||||
// ── Quadtree (Barnes-Hut) ──────────────────────────────────────
|
|
||||||
var QF = 11;
|
|
||||||
var qt = new Float64Array(256 * QF);
|
|
||||||
var qtN = 0;
|
|
||||||
var _fx = 0, _fy = 0;
|
|
||||||
|
|
||||||
function qtAlloc(ox, oy, sz) {
|
|
||||||
if (qtN * QF >= qt.length) {
|
|
||||||
var nq = new Float64Array(Math.max(qt.length * 2, 256 * QF));
|
|
||||||
nq.set(qt); qt = nq;
|
|
||||||
}
|
|
||||||
var i = qtN++, o = i * QF;
|
|
||||||
qt[o]=ox; qt[o+1]=oy; qt[o+2]=sz;
|
|
||||||
qt[o+3]=0; qt[o+4]=0; qt[o+5]=0;
|
|
||||||
qt[o+6]=-1; qt[o+7]=-1; qt[o+8]=-1; qt[o+9]=-1;
|
|
||||||
qt[o+10]=-1;
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
|
|
||||||
function qtBuild() {
|
|
||||||
var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
|
|
||||||
if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
|
|
||||||
}
|
|
||||||
var sz = Math.max(x1 - x0, y1 - y0, 1) + 2;
|
|
||||||
qtN = 0;
|
|
||||||
qtAlloc(x0 - 1, y0 - 1, sz);
|
|
||||||
for (var i = 0; i < N; i++) qtIns(0, i, posX[i], posY[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function qtIns(ni, bi, bx, by) {
|
|
||||||
var o = ni * QF;
|
|
||||||
if (qt[o+5] === 0) { qt[o+3] = bx; qt[o+4] = by; qt[o+5] = 1; qt[o+10] = bi; return; }
|
|
||||||
if (qt[o+10] >= 0) {
|
|
||||||
if (qt[o+2] < 0.001) { qt[o+5]++; return; }
|
|
||||||
var eb = qt[o+10], ex = qt[o+3], ey = qt[o+4];
|
|
||||||
qt[o+10] = -1;
|
|
||||||
qtInsChild(ni, eb, ex, ey);
|
|
||||||
}
|
|
||||||
var m = qt[o+5];
|
|
||||||
qt[o+3] = (qt[o+3]*m + bx) / (m+1);
|
|
||||||
qt[o+4] = (qt[o+4]*m + by) / (m+1);
|
|
||||||
qt[o+5] = m + 1;
|
|
||||||
qtInsChild(ni, bi, bx, by);
|
|
||||||
}
|
|
||||||
|
|
||||||
function qtInsChild(ni, bi, bx, by) {
|
|
||||||
var o = ni * QF, hs = qt[o+2] / 2;
|
|
||||||
var mx = qt[o] + hs, my = qt[o+1] + hs;
|
|
||||||
var qx = bx < mx ? 0 : 1, qy = by < my ? 0 : 1;
|
|
||||||
var ci = o + 6 + qy * 2 + qx;
|
|
||||||
if (qt[ci] < 0) qt[ci] = qtAlloc(qx ? mx : qt[o], qy ? my : qt[o+1], hs);
|
|
||||||
qtIns(qt[ci], bi, bx, by);
|
|
||||||
}
|
|
||||||
|
|
||||||
function qtCalc(ni, px, py, k2, th2) {
|
|
||||||
if (ni < 0) return;
|
|
||||||
var o = ni * QF;
|
|
||||||
if (qt[o+5] === 0) return;
|
|
||||||
var dx = qt[o+3] - px, dy = qt[o+4] - py;
|
|
||||||
var d2 = dx*dx + dy*dy;
|
|
||||||
if (d2 < 0.0001) d2 = 0.0001;
|
|
||||||
if (qt[o+10] >= 0 || qt[o+2]*qt[o+2]/d2 < th2) {
|
|
||||||
var d = Math.sqrt(d2), f = -(k2 * qt[o+5]) / d2;
|
|
||||||
_fx += (dx/d)*f; _fy += (dy/d)*f;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (var c = 6; c < 10; c++) if (qt[o+c] >= 0) qtCalc(qt[o+c], px, py, k2, th2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Canvas setup ───────────────────────────────────────────────
|
|
||||||
var canvas = document.getElementById('graphCanvas');
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
function resizeCanvas() {
|
|
||||||
var r = canvas.parentElement.getBoundingClientRect();
|
|
||||||
canvas.width = r.width * devicePixelRatio;
|
|
||||||
canvas.height = r.height * devicePixelRatio;
|
|
||||||
canvas.style.width = r.width + 'px';
|
|
||||||
canvas.style.height = r.height + 'px';
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', function() { resizeCanvas(); drawGraph(); });
|
|
||||||
|
|
||||||
// ── Zoom & pan ─────────────────────────────────────────────────
|
|
||||||
canvas.addEventListener('wheel', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var r = canvas.getBoundingClientRect();
|
|
||||||
var mx = e.clientX - r.left, my = e.clientY - r.top;
|
|
||||||
var f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
|
|
||||||
var ns = Math.max(0.05, Math.min(5, vs * f));
|
|
||||||
var ratio = ns / vs;
|
|
||||||
vx = mx - (mx - vx) * ratio;
|
|
||||||
vy = my - (my - vy) * ratio;
|
|
||||||
vs = ns;
|
|
||||||
drawGraph();
|
|
||||||
}, { passive: false });
|
|
||||||
|
|
||||||
canvas.addEventListener('mousedown', function(e) {
|
|
||||||
if (e.button !== 0) return;
|
|
||||||
isDragging = true;
|
|
||||||
dragX = e.clientX; dragY = e.clientY;
|
|
||||||
clickStartX = e.clientX; clickStartY = e.clientY;
|
|
||||||
dragVx = vx; dragVy = vy;
|
|
||||||
canvas.style.cursor = 'grabbing';
|
|
||||||
});
|
|
||||||
window.addEventListener('mousemove', function(e) {
|
|
||||||
if (!isDragging) return;
|
|
||||||
vx = dragVx + (e.clientX - dragX);
|
|
||||||
vy = dragVy + (e.clientY - dragY);
|
|
||||||
drawGraph();
|
|
||||||
});
|
|
||||||
window.addEventListener('mouseup', function(e) {
|
|
||||||
if (isDragging) {
|
|
||||||
var wasDrag = Math.abs(e.clientX - clickStartX) > 3 || Math.abs(e.clientY - clickStartY) > 3;
|
|
||||||
isDragging = false; canvas.style.cursor = '';
|
|
||||||
if (!wasDrag) handleClick(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
canvas.addEventListener('dblclick', function() { focusIdx = -1; resetView(); drawGraph(); });
|
|
||||||
|
|
||||||
function resetView() {
|
|
||||||
if (N === 0) { vx = 0; vy = 0; vs = 1; return; }
|
|
||||||
var r = canvas.parentElement.getBoundingClientRect();
|
|
||||||
var w = r.width, h = r.height;
|
|
||||||
var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
if (posX[i] < x0) x0 = posX[i]; if (posY[i] < y0) y0 = posY[i];
|
|
||||||
if (posX[i] > x1) x1 = posX[i]; if (posY[i] > y1) y1 = posY[i];
|
|
||||||
}
|
|
||||||
if (!isFinite(x0)) { vx = 0; vy = 0; vs = 1; return; }
|
|
||||||
var pad = 40;
|
|
||||||
vs = Math.min(w / (x1 - x0 + pad * 2), h / (y1 - y0 + pad * 2), 2);
|
|
||||||
vx = (w - (x0 + x1) * vs) / 2;
|
|
||||||
vy = (h - (y0 + y1) * vs) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Click handler (ego-centric selection) ──────────────────────
|
|
||||||
function handleClick(e) {
|
|
||||||
var r = canvas.getBoundingClientRect();
|
|
||||||
var mx = e.clientX - r.left, my = e.clientY - r.top;
|
|
||||||
var wx = (mx - vx) / vs, wy = (my - vy) / vs;
|
|
||||||
var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
|
|
||||||
var hitR = baseR * 2;
|
|
||||||
var best = -1, bestD = hitR * hitR;
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
var dx = posX[i] - wx, dy = posY[i] - wy;
|
|
||||||
var d2 = dx*dx + dy*dy;
|
|
||||||
if (d2 < bestD) { bestD = d2; best = i; }
|
|
||||||
}
|
|
||||||
if (best < 0) { focusIdx = -1; }
|
|
||||||
else { focusIdx = best; }
|
|
||||||
drawGraph();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Force layout ───────────────────────────────────────────────
|
|
||||||
function initPositions(w, h) {
|
|
||||||
var cx = w / 2, cy = h / 2;
|
|
||||||
var rad = Math.min(cx, cy) * 0.6;
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
var a = (2 * Math.PI * i) / N - Math.PI / 2;
|
|
||||||
posX[i] = cx + rad * Math.cos(a);
|
|
||||||
posY[i] = cy + rad * Math.sin(a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function runLayout() {
|
|
||||||
var r = canvas.parentElement.getBoundingClientRect();
|
|
||||||
var w = r.width, h = r.height;
|
|
||||||
if (w === 0 || h === 0) return;
|
|
||||||
var cx = w/2, cy = h/2;
|
|
||||||
var k = Math.sqrt(w*h / Math.max(N, 1)), k2 = k*k;
|
|
||||||
var totalIters = Math.min(200, Math.max(30, Math.floor(20000 / Math.max(N, 1))));
|
|
||||||
var useBH = N > 60, th2 = 0.64;
|
|
||||||
var dx = new Float64Array(N), dy = new Float64Array(N);
|
|
||||||
|
|
||||||
// Edges: self→each member (star topology from this node's perspective)
|
|
||||||
var selfIdx = 0; // node 0 is always 'self'
|
|
||||||
var edges = [];
|
|
||||||
for (var i = 1; i < N; i++) edges.push([selfIdx, i]);
|
|
||||||
|
|
||||||
for (var iter = 0; iter < totalIters; iter++) {
|
|
||||||
dx.fill(0); dy.fill(0);
|
|
||||||
|
|
||||||
if (useBH) {
|
|
||||||
qtBuild();
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
_fx = 0; _fy = 0;
|
|
||||||
qtCalc(0, posX[i], posY[i], k2, th2);
|
|
||||||
dx[i] += _fx; dy[i] += _fy;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (var i = 0; i < N; i++) for (var j = i+1; j < N; j++) {
|
|
||||||
var ddx = posX[i]-posX[j], ddy = posY[i]-posY[j];
|
|
||||||
var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
|
|
||||||
var f = k2/dist, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
|
|
||||||
dx[i] += fx; dy[i] += fy; dx[j] -= fx; dy[j] -= fy;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var e = 0; e < edges.length; e++) {
|
|
||||||
var si = edges[e][0], di = edges[e][1];
|
|
||||||
var ddx = posX[si]-posX[di], ddy = posY[si]-posY[di];
|
|
||||||
var dist = Math.sqrt(ddx*ddx + ddy*ddy) || 0.01;
|
|
||||||
var f = (dist*dist)/k, fx = (ddx/dist)*f, fy = (ddy/dist)*f;
|
|
||||||
dx[si] -= fx; dy[si] -= fy; dx[di] += fx; dy[di] += fy;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
dx[i] -= (posX[i]-cx)*0.01; dy[i] -= (posY[i]-cy)*0.01;
|
|
||||||
}
|
|
||||||
|
|
||||||
var temp = Math.max(0.1, 1 - iter/totalIters);
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
var dist = Math.sqrt(dx[i]*dx[i] + dy[i]*dy[i]) || 0.01;
|
|
||||||
var cap = Math.min(dist, 10*temp);
|
|
||||||
posX[i] += (dx[i]/dist)*cap; posY[i] += (dy[i]/dist)*cap;
|
|
||||||
posX[i] = Math.max(40, Math.min(w-40, posX[i]));
|
|
||||||
posY[i] = Math.max(40, Math.min(h-40, posY[i]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
layoutDone = true;
|
|
||||||
resetView();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Draw graph ─────────────────────────────────────────────────
|
|
||||||
var stateColors = { 'alive': '#4caf50', 'suspect': '#ff9800', 'dead': '#f44336', 'self': '#6366f1' };
|
|
||||||
|
|
||||||
function drawGraph() {
|
|
||||||
var dpr = devicePixelRatio || 1;
|
|
||||||
var r = canvas.parentElement.getBoundingClientRect();
|
|
||||||
if (canvas.width !== Math.round(r.width * dpr)) resizeCanvas();
|
|
||||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
||||||
ctx.clearRect(0, 0, r.width, r.height);
|
|
||||||
|
|
||||||
if (N === 0) {
|
|
||||||
ctx.fillStyle = '#555';
|
|
||||||
ctx.font = '13px monospace';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText('No distribution data yet', r.width / 2, r.height / 2);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.save();
|
|
||||||
ctx.translate(vx, vy);
|
|
||||||
ctx.scale(vs, vs);
|
|
||||||
|
|
||||||
var baseR = Math.max(4, Math.min(12, 400 / Math.sqrt(Math.max(N, 1))));
|
|
||||||
|
|
||||||
// Determine highlighted set for ego mode
|
|
||||||
var highlighted = null;
|
|
||||||
if (focusIdx >= 0) {
|
|
||||||
highlighted = {};
|
|
||||||
highlighted[focusIdx] = true;
|
|
||||||
// If focus is self (0), highlight all connected members
|
|
||||||
// If focus is a member, highlight self and that member
|
|
||||||
if (focusIdx === 0) {
|
|
||||||
for (var i = 1; i < N; i++) highlighted[i] = true;
|
|
||||||
} else {
|
|
||||||
highlighted[0] = true; // always show self
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw edges (self → each member)
|
|
||||||
for (var i = 1; i < N; i++) {
|
|
||||||
var alpha = 1;
|
|
||||||
var dash = false;
|
|
||||||
if (highlighted) {
|
|
||||||
if (!highlighted[i]) { alpha = 0.08; }
|
|
||||||
else {
|
|
||||||
// Check if this node is a routing neighbor
|
|
||||||
var nid = nodeIds[i];
|
|
||||||
if (routingSet[nid]) { dash = true; alpha = 0.7; }
|
|
||||||
else { alpha = 0.5; }
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
alpha = 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(posX[0], posY[0]);
|
|
||||||
ctx.lineTo(posX[i], posY[i]);
|
|
||||||
ctx.strokeStyle = 'rgba(99,102,241,' + alpha + ')';
|
|
||||||
ctx.lineWidth = 1 / vs;
|
|
||||||
if (dash) { ctx.setLineDash([4/vs, 4/vs]); }
|
|
||||||
else { ctx.setLineDash([]); }
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
ctx.setLineDash([]);
|
|
||||||
|
|
||||||
// Draw nodes
|
|
||||||
for (var i = 0; i < N; i++) {
|
|
||||||
var opacity = 1;
|
|
||||||
if (highlighted && !highlighted[i]) opacity = 0.15;
|
|
||||||
|
|
||||||
var col = stateColors[nodeStates[i]] || '#888';
|
|
||||||
var isSelf = (nodeStates[i] === 'self');
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
var nr = isSelf ? baseR * 1.5 : baseR;
|
|
||||||
ctx.arc(posX[i], posY[i], nr, 0, Math.PI * 2);
|
|
||||||
ctx.globalAlpha = opacity * 0.85;
|
|
||||||
ctx.fillStyle = col;
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
if (isSelf) {
|
|
||||||
ctx.lineWidth = 2 / vs;
|
|
||||||
ctx.strokeStyle = '#fff';
|
|
||||||
ctx.globalAlpha = opacity * 0.6;
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (focusIdx === i) {
|
|
||||||
ctx.lineWidth = 2 / vs;
|
|
||||||
ctx.strokeStyle = '#fff';
|
|
||||||
ctx.globalAlpha = opacity;
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
|
|
||||||
// Label (short ID)
|
|
||||||
if (vs > 0.5) {
|
|
||||||
ctx.fillStyle = '#ccc';
|
|
||||||
ctx.globalAlpha = opacity;
|
|
||||||
ctx.font = Math.round(9 / vs) + 'px monospace';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
var label = nodeIds[i] ? nodeIds[i].substring(0, 8) : '';
|
|
||||||
ctx.fillText(label, posX[i], posY[i] - nr - 3/vs);
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.restore();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Update from snapshot ───────────────────────────────────────
|
|
||||||
function updateFromSnapshot(d) {
|
|
||||||
data = d;
|
|
||||||
|
|
||||||
// Build node arrays: index 0 = self, then members
|
|
||||||
var oldN = N;
|
|
||||||
var newIds = [d.node_id];
|
|
||||||
var newStates = ['self'];
|
|
||||||
var newAddrs = [d.listen_addr];
|
|
||||||
for (var i = 0; i < d.members.length; i++) {
|
|
||||||
newIds.push(d.members[i].node_id);
|
|
||||||
newStates.push(d.members[i].state);
|
|
||||||
newAddrs.push(d.members[i].addr);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build routing neighbor set
|
|
||||||
routingSet = {};
|
|
||||||
for (var i = 0; i < d.routing_neighbors.length; i++) {
|
|
||||||
routingSet[d.routing_neighbors[i].node_id] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
selfNodeId = d.node_id;
|
|
||||||
|
|
||||||
// Check if topology changed
|
|
||||||
var changed = newIds.length !== N;
|
|
||||||
if (!changed) {
|
|
||||||
for (var i = 0; i < newIds.length; i++) {
|
|
||||||
if (newIds[i] !== nodeIds[i]) { changed = true; break; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nodeIds = newIds;
|
|
||||||
nodeStates = newStates;
|
|
||||||
nodeAddrs = newAddrs;
|
|
||||||
N = nodeIds.length;
|
|
||||||
|
|
||||||
if (changed || !layoutDone) {
|
|
||||||
posX = new Float64Array(N);
|
|
||||||
posY = new Float64Array(N);
|
|
||||||
resizeCanvas();
|
|
||||||
initPositions(canvas.parentElement.getBoundingClientRect().width,
|
|
||||||
canvas.parentElement.getBoundingClientRect().height);
|
|
||||||
runLayout();
|
|
||||||
} else {
|
|
||||||
// Just update states, redraw
|
|
||||||
drawGraph();
|
|
||||||
}
|
|
||||||
|
|
||||||
updateUI(d);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUI(d) {
|
|
||||||
// Self label
|
|
||||||
document.getElementById('selfLabel').textContent = 'Node: ' + d.node_id.substring(0, 16) + '\u2026';
|
|
||||||
document.getElementById('nodeLabel').textContent = d.listen_addr;
|
|
||||||
|
|
||||||
// Stats cards
|
|
||||||
document.getElementById('statMembers').textContent = d.members.length;
|
|
||||||
document.getElementById('statAlive').textContent = d.alive_count;
|
|
||||||
document.getElementById('statSuspect').textContent = d.suspect_count;
|
|
||||||
document.getElementById('statDead').textContent = d.dead_count;
|
|
||||||
document.getElementById('statCache').textContent = d.cache_size;
|
|
||||||
document.getElementById('statRT').textContent = d.routing_table_size;
|
|
||||||
document.getElementById('statDir').textContent = d.directory_entry_count;
|
|
||||||
document.getElementById('statRepair').textContent = d.repair_queue_size;
|
|
||||||
document.getElementById('statProbes').textContent = d.recent_probe_targets.length;
|
|
||||||
|
|
||||||
// Color alive/suspect/dead
|
|
||||||
document.getElementById('statAlive').style.color = '#4caf50';
|
|
||||||
document.getElementById('statSuspect').style.color = d.suspect_count > 0 ? '#ff9800' : '#fff';
|
|
||||||
document.getElementById('statDead').style.color = d.dead_count > 0 ? '#f44336' : '#fff';
|
|
||||||
|
|
||||||
// Members table
|
|
||||||
var body = document.getElementById('membersBody');
|
|
||||||
body.innerHTML = '';
|
|
||||||
document.getElementById('memberCount').textContent = '(' + d.members.length + ')';
|
|
||||||
for (var i = 0; i < d.members.length; i++) {
|
|
||||||
var m = d.members[i];
|
|
||||||
var cls = 'state-' + m.state;
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tr.innerHTML =
|
|
||||||
'<td class="' + cls + '">' + m.state + '</td>' +
|
|
||||||
'<td style="color:#aaa;font-size:10px;">' + m.node_id.substring(0, 16) + '\u2026</td>' +
|
|
||||||
'<td>' + m.addr + '</td>' +
|
|
||||||
'<td>' + m.incarnation + '</td>';
|
|
||||||
body.appendChild(tr);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cache table
|
|
||||||
var cacheBody = document.getElementById('cacheBody');
|
|
||||||
cacheBody.innerHTML = '';
|
|
||||||
document.getElementById('cacheCount').textContent = '(' + d.cache_entries.length + ')';
|
|
||||||
var cacheMax = Math.min(d.cache_entries.length, 200);
|
|
||||||
for (var i = 0; i < cacheMax; i++) {
|
|
||||||
var e = d.cache_entries[i];
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tr.innerHTML =
|
|
||||||
'<td style="color:#aaa;font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;">' + e.actor_addr + '</td>' +
|
|
||||||
'<td style="color:#aaa;font-size:10px;">' + e.node_id.substring(0, 12) + '\u2026</td>';
|
|
||||||
cacheBody.appendChild(tr);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Recent probes
|
|
||||||
var probesWrap = document.getElementById('probesWrap');
|
|
||||||
probesWrap.innerHTML = '';
|
|
||||||
for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
|
|
||||||
var div = document.createElement('div');
|
|
||||||
div.style.cssText = 'padding:2px 0;color:#aaa;font-size:11px;border-bottom:1px solid #1c1f2e;';
|
|
||||||
div.textContent = d.recent_probe_targets[i].substring(0, 16) + '\u2026';
|
|
||||||
probesWrap.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Routing bucket histogram
|
|
||||||
drawBucketChart(d.routing_buckets);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Bucket histogram ───────────────────────────────────────────
|
|
||||||
function drawBucketChart(buckets) {
|
|
||||||
var cv = document.getElementById('bucketChart');
|
|
||||||
var bctx = cv.getContext('2d');
|
|
||||||
var dpr = devicePixelRatio || 1;
|
|
||||||
var rect = cv.parentElement.getBoundingClientRect();
|
|
||||||
var rw = rect.width, rh = cv.parentElement.clientHeight - 20;
|
|
||||||
cv.width = rw * dpr;
|
|
||||||
cv.height = rh * dpr;
|
|
||||||
cv.style.width = rw + 'px';
|
|
||||||
cv.style.height = rh + 'px';
|
|
||||||
bctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
||||||
bctx.clearRect(0, 0, rw, rh);
|
|
||||||
|
|
||||||
if (!buckets || buckets.length === 0) {
|
|
||||||
bctx.fillStyle = '#555';
|
|
||||||
bctx.font = '11px monospace';
|
|
||||||
bctx.textAlign = 'center';
|
|
||||||
bctx.fillText('No buckets', rw / 2, rh / 2);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var maxCount = 1;
|
|
||||||
for (var i = 0; i < buckets.length; i++) {
|
|
||||||
if (buckets[i][1] > maxCount) maxCount = buckets[i][1];
|
|
||||||
}
|
|
||||||
|
|
||||||
var barW = Math.max(4, Math.floor((rw - 20) / buckets.length) - 2);
|
|
||||||
var chartH = rh - 20;
|
|
||||||
|
|
||||||
for (var i = 0; i < buckets.length; i++) {
|
|
||||||
var x = 10 + i * (barW + 2);
|
|
||||||
var h = (buckets[i][1] / maxCount) * (chartH - 4);
|
|
||||||
bctx.fillStyle = '#6366f1';
|
|
||||||
bctx.globalAlpha = 0.8;
|
|
||||||
bctx.fillRect(x, chartH - h, barW, h);
|
|
||||||
|
|
||||||
if (buckets.length <= 30) {
|
|
||||||
bctx.globalAlpha = 1;
|
|
||||||
bctx.fillStyle = '#888';
|
|
||||||
bctx.font = '8px monospace';
|
|
||||||
bctx.textAlign = 'center';
|
|
||||||
bctx.fillText(buckets[i][0], x + barW / 2, rh - 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
bctx.globalAlpha = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── SSE connection ─────────────────────────────────────────────
|
|
||||||
var es = new EventSource('/events');
|
|
||||||
|
|
||||||
es.addEventListener('distribution', function(e) {
|
|
||||||
try {
|
|
||||||
var d = JSON.parse(e.data);
|
|
||||||
updateFromSnapshot(d);
|
|
||||||
} catch(err) { console.error('distribution parse error', err); }
|
|
||||||
});
|
|
||||||
|
|
||||||
es.addEventListener('done', function() {
|
|
||||||
dot.className = 'status-dot done';
|
|
||||||
es.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
es.onerror = function() {
|
|
||||||
dot.className = 'status-dot disconnected';
|
|
||||||
};
|
|
||||||
|
|
||||||
es.onopen = function() {
|
|
||||||
dot.className = 'status-dot';
|
|
||||||
};
|
|
||||||
|
|
||||||
resizeCanvas();
|
|
||||||
drawGraph();
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
"##;
|
|
||||||
|
|
|
||||||
1715
crates/simulation-dashboard/src/dashboard.html
Normal file
1715
crates/simulation-dashboard/src/dashboard.html
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue