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
00e1fce80d
commit
edea0aac2a
8 changed files with 3920 additions and 3920 deletions
794
crates/runtime-dashboard/src/actors.html
Normal file
794
crates/runtime-dashboard/src/actors.html
Normal file
|
|
@ -0,0 +1,794 @@
|
|||
<!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: visible;
|
||||
}
|
||||
.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: 220px; }
|
||||
|
||||
.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; position: fixed; bottom: 12px; right: 12px;
|
||||
width: 420px; max-height: 320px; overflow-y: auto;
|
||||
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
||||
padding: 14px; z-index: 100; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
|
||||
}
|
||||
.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(2, 1fr); gap: 8px; margin-bottom: 10px;
|
||||
}
|
||||
.detail-item { background: #1c1f2e; border-radius: 4px; padding: 6px 8px; }
|
||||
.detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
|
||||
.detail-item .d-value { font-size: 13px; 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: 50px; }
|
||||
|
||||
::-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, type, or worker..." />
|
||||
<select id="workerFilter" class="search-input" style="width:120px;">
|
||||
<option value="">All Workers</option>
|
||||
</select>
|
||||
<select id="statusFilter" class="search-input" style="width:120px;">
|
||||
<option value="">All Status</option>
|
||||
<option value="healthy">Healthy</option>
|
||||
<option value="poisoned">Poisoned</option>
|
||||
</select>
|
||||
<input type="number" id="minDepth" class="search-input" style="width:100px;" placeholder="Min depth" min="0" />
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Actor detail overlay (fixed position, doesn't affect grid layout) -->
|
||||
<div id="detailPanel" class="detail-panel">
|
||||
<div class="detail-header">
|
||||
<h2 style="font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;">Actor <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
|
||||
<button class="detail-close" id="detailClose">×</button>
|
||||
</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><div class="d-label">Address</div><div class="d-value" id="detailFullAddr" style="font-size:10px;"></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</div><div class="d-value" id="detailMailbox"></div></div>
|
||||
<div class="detail-item"><div class="d-label">Messages</div><div class="d-value" id="detailMsgCount"></div></div>
|
||||
<div class="detail-item"><div class="d-label">Last 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>
|
||||
<div style="font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Mailbox History</div>
|
||||
<canvas id="sparkline" class="sparkline"></canvas>
|
||||
</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 topPad = 20;
|
||||
var chartH = H - 35;
|
||||
|
||||
for (var i = 0; i < buckets.length; i++) {
|
||||
var x = 20 + i * (barW + 8);
|
||||
var h = (counts[i] / maxCount) * (chartH - topPad);
|
||||
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 topPad = 20;
|
||||
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 - topPad);
|
||||
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 workerFilter = document.getElementById('workerFilter').value;
|
||||
var statusFilter = document.getElementById('statusFilter').value;
|
||||
var minDepthVal = document.getElementById('minDepth').value;
|
||||
var minDepth = minDepthVal ? parseInt(minDepthVal, 10) : 0;
|
||||
|
||||
var filtered = currentActors.filter(function(a) {
|
||||
// Text search
|
||||
if (filter) {
|
||||
var hex = addrToHex(a.address).toLowerCase();
|
||||
var msgType = (a.last_msg_type || '').toLowerCase();
|
||||
if (hex.indexOf(filter) < 0 && ('w' + a.worker_id).indexOf(filter) < 0 && msgType.indexOf(filter) < 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// Worker filter
|
||||
if (workerFilter && a.worker_id !== parseInt(workerFilter, 10)) return false;
|
||||
// Status filter
|
||||
if (statusFilter === 'healthy' && a.poisoned) return false;
|
||||
if (statusFilter === 'poisoned' && !a.poisoned) return false;
|
||||
// Min depth
|
||||
if (minDepth > 0 && a.mailbox_depth < minDepth) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
// 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 = 'detail-panel visible';
|
||||
updateDetailPanel();
|
||||
renderActorTable();
|
||||
}
|
||||
|
||||
function clearFocus() {
|
||||
focusedAddrHex = null;
|
||||
document.getElementById('detailPanel').className = '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').innerHTML = '<a href="/actor/' + focusedAddrHex + '" style="color:#aaa;text-decoration:none;">' + escapeHtml(addrToHex(actor.address)) + '</a>';
|
||||
document.getElementById('detailFullAddr').innerHTML = '<a href="/actor/' + focusedAddrHex + '" style="color:#fff;text-decoration:none;">' + escapeHtml(focusedAddrHex) + '</a>';
|
||||
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/filter handlers ─────────────────────────────
|
||||
document.getElementById('actorSearch').addEventListener('keyup', function() {
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(renderActorTable, 150);
|
||||
});
|
||||
document.getElementById('workerFilter').addEventListener('change', renderActorTable);
|
||||
document.getElementById('statusFilter').addEventListener('change', renderActorTable);
|
||||
document.getElementById('minDepth').addEventListener('input', 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];
|
||||
}
|
||||
|
||||
// Update worker filter dropdown
|
||||
var wSelect = document.getElementById('workerFilter');
|
||||
var curVal = wSelect.value;
|
||||
var workerIds = {};
|
||||
for (var i = 0; i < currentActors.length; i++) workerIds[currentActors[i].worker_id] = true;
|
||||
var wids = Object.keys(workerIds).sort(function(a,b) { return +a - +b; });
|
||||
wSelect.innerHTML = '<option value="">All Workers</option>';
|
||||
wids.forEach(function(wid) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = wid;
|
||||
opt.textContent = 'W' + wid;
|
||||
wSelect.appendChild(opt);
|
||||
});
|
||||
wSelect.value = curVal;
|
||||
|
||||
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,795 +1 @@
|
|||
pub const ACTORS_HTML: &str = r##"<!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: visible;
|
||||
}
|
||||
.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: 220px; }
|
||||
|
||||
.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; position: fixed; bottom: 12px; right: 12px;
|
||||
width: 420px; max-height: 320px; overflow-y: auto;
|
||||
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
|
||||
padding: 14px; z-index: 100; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
|
||||
}
|
||||
.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(2, 1fr); gap: 8px; margin-bottom: 10px;
|
||||
}
|
||||
.detail-item { background: #1c1f2e; border-radius: 4px; padding: 6px 8px; }
|
||||
.detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
|
||||
.detail-item .d-value { font-size: 13px; 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: 50px; }
|
||||
|
||||
::-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, type, or worker..." />
|
||||
<select id="workerFilter" class="search-input" style="width:120px;">
|
||||
<option value="">All Workers</option>
|
||||
</select>
|
||||
<select id="statusFilter" class="search-input" style="width:120px;">
|
||||
<option value="">All Status</option>
|
||||
<option value="healthy">Healthy</option>
|
||||
<option value="poisoned">Poisoned</option>
|
||||
</select>
|
||||
<input type="number" id="minDepth" class="search-input" style="width:100px;" placeholder="Min depth" min="0" />
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Actor detail overlay (fixed position, doesn't affect grid layout) -->
|
||||
<div id="detailPanel" class="detail-panel">
|
||||
<div class="detail-header">
|
||||
<h2 style="font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;">Actor <span id="detailAddr" style="color:#aaa;font-weight:400;"></span></h2>
|
||||
<button class="detail-close" id="detailClose">×</button>
|
||||
</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><div class="d-label">Address</div><div class="d-value" id="detailFullAddr" style="font-size:10px;"></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</div><div class="d-value" id="detailMailbox"></div></div>
|
||||
<div class="detail-item"><div class="d-label">Messages</div><div class="d-value" id="detailMsgCount"></div></div>
|
||||
<div class="detail-item"><div class="d-label">Last 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>
|
||||
<div style="font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Mailbox History</div>
|
||||
<canvas id="sparkline" class="sparkline"></canvas>
|
||||
</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 topPad = 20;
|
||||
var chartH = H - 35;
|
||||
|
||||
for (var i = 0; i < buckets.length; i++) {
|
||||
var x = 20 + i * (barW + 8);
|
||||
var h = (counts[i] / maxCount) * (chartH - topPad);
|
||||
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 topPad = 20;
|
||||
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 - topPad);
|
||||
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 workerFilter = document.getElementById('workerFilter').value;
|
||||
var statusFilter = document.getElementById('statusFilter').value;
|
||||
var minDepthVal = document.getElementById('minDepth').value;
|
||||
var minDepth = minDepthVal ? parseInt(minDepthVal, 10) : 0;
|
||||
|
||||
var filtered = currentActors.filter(function(a) {
|
||||
// Text search
|
||||
if (filter) {
|
||||
var hex = addrToHex(a.address).toLowerCase();
|
||||
var msgType = (a.last_msg_type || '').toLowerCase();
|
||||
if (hex.indexOf(filter) < 0 && ('w' + a.worker_id).indexOf(filter) < 0 && msgType.indexOf(filter) < 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// Worker filter
|
||||
if (workerFilter && a.worker_id !== parseInt(workerFilter, 10)) return false;
|
||||
// Status filter
|
||||
if (statusFilter === 'healthy' && a.poisoned) return false;
|
||||
if (statusFilter === 'poisoned' && !a.poisoned) return false;
|
||||
// Min depth
|
||||
if (minDepth > 0 && a.mailbox_depth < minDepth) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
// 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 = 'detail-panel visible';
|
||||
updateDetailPanel();
|
||||
renderActorTable();
|
||||
}
|
||||
|
||||
function clearFocus() {
|
||||
focusedAddrHex = null;
|
||||
document.getElementById('detailPanel').className = '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').innerHTML = '<a href="/actor/' + focusedAddrHex + '" style="color:#aaa;text-decoration:none;">' + escapeHtml(addrToHex(actor.address)) + '</a>';
|
||||
document.getElementById('detailFullAddr').innerHTML = '<a href="/actor/' + focusedAddrHex + '" style="color:#fff;text-decoration:none;">' + escapeHtml(focusedAddrHex) + '</a>';
|
||||
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/filter handlers ─────────────────────────────
|
||||
document.getElementById('actorSearch').addEventListener('keyup', function() {
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(renderActorTable, 150);
|
||||
});
|
||||
document.getElementById('workerFilter').addEventListener('change', renderActorTable);
|
||||
document.getElementById('statusFilter').addEventListener('change', renderActorTable);
|
||||
document.getElementById('minDepth').addEventListener('input', 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];
|
||||
}
|
||||
|
||||
// Update worker filter dropdown
|
||||
var wSelect = document.getElementById('workerFilter');
|
||||
var curVal = wSelect.value;
|
||||
var workerIds = {};
|
||||
for (var i = 0; i < currentActors.length; i++) workerIds[currentActors[i].worker_id] = true;
|
||||
var wids = Object.keys(workerIds).sort(function(a,b) { return +a - +b; });
|
||||
wSelect.innerHTML = '<option value="">All Workers</option>';
|
||||
wids.forEach(function(wid) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = wid;
|
||||
opt.textContent = 'W' + wid;
|
||||
wSelect.appendChild(opt);
|
||||
});
|
||||
wSelect.value = curVal;
|
||||
|
||||
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>
|
||||
"##;
|
||||
pub const ACTORS_HTML: &str = include_str\!("actors.html");
|
||||
|
|
|
|||
640
crates/runtime-dashboard/src/dashboard.html
Normal file
640
crates/runtime-dashboard/src/dashboard.html
Normal file
|
|
@ -0,0 +1,640 @@
|
|||
<!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; }
|
||||
|
||||
.worker-cards { display: flex; flex-direction: column; gap: 6px; }
|
||||
.worker-card {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: #1c1f2e; border-radius: 4px; padding: 6px 10px;
|
||||
}
|
||||
.worker-card .wc-id { font-weight: 700; min-width: 32px; }
|
||||
.worker-card .wc-bar-wrap { flex: 1; height: 14px; background: #0f1117; border-radius: 2px; overflow: hidden; display: flex; }
|
||||
.worker-card .wc-bar-seg { height: 100%; }
|
||||
.worker-card .wc-stats { font-size: 11px; color: #888; min-width: 200px; text-align: right; }
|
||||
.worker-card .wc-spark { display: inline-flex; gap: 4px; margin-left: 6px; }
|
||||
|
||||
.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-header .sparkline-wrap { display: inline-flex; gap: 8px; margin-left: 12px; }
|
||||
.worker-group-header .sparkline-wrap svg { vertical-align: middle; }
|
||||
.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 id="warningBanner" style="display:none;padding:8px 20px;background:#1c1f2e;border-bottom:1px solid #2a2d3e;font-size:12px;"></div>
|
||||
<div class="grid">
|
||||
<div class="panel chart-panel">
|
||||
<h2>Worker Utilization</h2>
|
||||
<div id="workerCards" class="worker-cards"></div>
|
||||
<div style="margin-top:6px;font-size:10px;color:#555;">
|
||||
<span style="color:#4caf50;">\u25A0</span> processing
|
||||
<span style="color:#2196f3;">\u25A0</span> delivery
|
||||
<span style="color:#00bcd4;">\u25A0</span> spawns
|
||||
<span style="color:#f44336;">\u25A0</span> overhead
|
||||
</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 workerHistory = {}; // { id: { message_rates: [], mailbox_depths: [] } }
|
||||
|
||||
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 colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
||||
|
||||
var phaseColors = ['#4caf50', '#2196f3', '#00bcd4', '#f44336'];
|
||||
// Group tick phases: processing=2, delivery=1+4, spawns=0+3, overhead=5
|
||||
|
||||
function computePhases(timings) {
|
||||
if (!timings || timings.length === 0) return [0.25, 0.25, 0.25, 0.25];
|
||||
var sums = [0,0,0,0,0,0];
|
||||
var active = 0;
|
||||
for (var i = 0; i < timings.length; i++) {
|
||||
var t = timings[i];
|
||||
if (t.did_work) active++;
|
||||
for (var p = 0; p < 6 && p < t.phase_us.length; p++) sums[p] += t.phase_us[p];
|
||||
}
|
||||
var total = sums.reduce(function(a,b) { return a+b; }, 0);
|
||||
if (total === 0) return [0.25, 0.25, 0.25, 0.25];
|
||||
var processing = sums[2] / total;
|
||||
var delivery = (sums[1] + sums[4]) / total;
|
||||
var spawns = (sums[0] + sums[3]) / total;
|
||||
var overhead = sums[5] / total;
|
||||
var load = timings.length > 0 ? active / timings.length : 0;
|
||||
return { fracs: [processing, delivery, spawns, overhead], load: load };
|
||||
}
|
||||
|
||||
function renderWorkerCards(data) {
|
||||
var container = document.getElementById('workerCards');
|
||||
if (!data.workers) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
data.workers.forEach(function(w, idx) {
|
||||
var timings = data.tick_timings ? data.tick_timings[idx] : null;
|
||||
var phases = computePhases(timings);
|
||||
var load = phases.load || 0;
|
||||
var fracs = phases.fracs || [0.25, 0.25, 0.25, 0.25];
|
||||
|
||||
var card = document.createElement('div');
|
||||
card.className = 'worker-card';
|
||||
|
||||
// ID
|
||||
var idSpan = document.createElement('span');
|
||||
idSpan.className = 'wc-id';
|
||||
idSpan.style.color = colors[w.id % colors.length];
|
||||
idSpan.textContent = 'W' + w.id;
|
||||
card.appendChild(idSpan);
|
||||
|
||||
// Phase bar
|
||||
var barWrap = document.createElement('span');
|
||||
barWrap.className = 'wc-bar-wrap';
|
||||
var filledPct = Math.round(load * 100);
|
||||
for (var p = 0; p < 4; p++) {
|
||||
var seg = document.createElement('span');
|
||||
seg.className = 'wc-bar-seg';
|
||||
seg.style.width = (fracs[p] * filledPct) + '%';
|
||||
seg.style.background = phaseColors[p];
|
||||
barWrap.appendChild(seg);
|
||||
}
|
||||
card.appendChild(barWrap);
|
||||
|
||||
// Sparklines
|
||||
var sparkWrap = document.createElement('span');
|
||||
sparkWrap.className = 'wc-spark';
|
||||
var wh = workerHistory[w.id];
|
||||
if (wh) {
|
||||
sparkWrap.innerHTML = renderSparklineSvg(wh.message_rates, 60, 14, '#4caf50');
|
||||
}
|
||||
card.appendChild(sparkWrap);
|
||||
|
||||
// Stats
|
||||
var statsSpan = document.createElement('span');
|
||||
statsSpan.className = 'wc-stats';
|
||||
statsSpan.textContent = w.num_actors + ' actors ' +
|
||||
w.messages_processed.toLocaleString() + ' msgs mbox ' + w.mailbox_depth +
|
||||
' ' + Math.round(load * 100) + '%';
|
||||
card.appendChild(statsSpan);
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
renderWorkerCards(data);
|
||||
|
||||
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;"><a href="/actor/' + hex + '" style="color:#aaa;text-decoration:none;">' + hex + '</a></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 renderSparklineSvg(data, w, h, color) {
|
||||
if (!data || data.length < 2) return '';
|
||||
var max = Math.max.apply(null, data);
|
||||
if (max === 0) max = 1;
|
||||
var step = w / (data.length - 1);
|
||||
var points = data.map(function(v, i) {
|
||||
return (i * step).toFixed(1) + ',' + (h - (v / max) * (h - 2) - 1).toFixed(1);
|
||||
}).join(' ');
|
||||
return '<svg width="' + w + '" height="' + h + '" style="vertical-align:middle">' +
|
||||
'<polyline fill="none" stroke="' + color + '" stroke-width="1.5" points="' + points + '"/></svg>';
|
||||
}
|
||||
|
||||
function pushHistorySample(stats) {
|
||||
if (!stats.workers) return;
|
||||
stats.workers.forEach(function(w) {
|
||||
if (!workerHistory[w.id]) {
|
||||
workerHistory[w.id] = { message_rates: [], mailbox_depths: [], prev_msgs: w.messages_processed };
|
||||
}
|
||||
var wh = workerHistory[w.id];
|
||||
var rate = w.messages_processed - wh.prev_msgs;
|
||||
if (rate < 0) rate = 0;
|
||||
wh.prev_msgs = w.messages_processed;
|
||||
wh.message_rates.push(rate);
|
||||
wh.mailbox_depths.push(w.mailbox_depth);
|
||||
if (wh.message_rates.length > 300) { wh.message_rates.shift(); wh.mailbox_depths.shift(); }
|
||||
});
|
||||
}
|
||||
|
||||
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>' : '';
|
||||
var wh = workerHistory[wid];
|
||||
var sparkHtml = '';
|
||||
if (wh) {
|
||||
sparkHtml = '<span class="sparkline-wrap">' +
|
||||
renderSparklineSvg(wh.message_rates, 80, 16, '#4caf50') +
|
||||
renderSparklineSvg(wh.mailbox_depths, 80, 16, '#2196f3') +
|
||||
'</span>';
|
||||
}
|
||||
hdr.innerHTML =
|
||||
'<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
|
||||
sparkHtml +
|
||||
'<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;"><a href="/actor/' + hex + '" style="color:#aaa;text-decoration:none;">' + hex + '</a></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 {
|
||||
var data = JSON.parse(e.data);
|
||||
pushHistorySample(data);
|
||||
updateStats(data);
|
||||
} catch(err) { console.error('stats parse error', err); }
|
||||
});
|
||||
|
||||
es.addEventListener('history', function(e) {
|
||||
try {
|
||||
var data = JSON.parse(e.data);
|
||||
if (data.workers) {
|
||||
data.workers.forEach(function(w) {
|
||||
workerHistory[w.id] = {
|
||||
message_rates: w.message_rates || [],
|
||||
mailbox_depths: w.mailbox_depths || [],
|
||||
prev_msgs: 0
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch(err) { console.error('history parse error', err); }
|
||||
});
|
||||
|
||||
es.addEventListener('warnings', function(e) {
|
||||
try {
|
||||
var warnings = JSON.parse(e.data);
|
||||
var banner = document.getElementById('warningBanner');
|
||||
if (warnings.length === 0) {
|
||||
banner.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
banner.style.display = 'block';
|
||||
var sevColors = {critical:'#f44336',high:'#ff5722',medium:'#ff9800',low:'#888'};
|
||||
var html = warnings.map(function(w) {
|
||||
var c = sevColors[w.severity] || '#888';
|
||||
return '<span style="color:' + c + ';">\u26A0 ' + w.description + '</span>';
|
||||
}).join(' ');
|
||||
banner.innerHTML = '<span style="color:#ff9800;font-weight:700;">WARNINGS (' + warnings.length + ')</span> ' + html;
|
||||
} catch(err) { console.error('warnings 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,641 +1 @@
|
|||
pub const DASHBOARD_HTML: &str = r##"<!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; }
|
||||
|
||||
.worker-cards { display: flex; flex-direction: column; gap: 6px; }
|
||||
.worker-card {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: #1c1f2e; border-radius: 4px; padding: 6px 10px;
|
||||
}
|
||||
.worker-card .wc-id { font-weight: 700; min-width: 32px; }
|
||||
.worker-card .wc-bar-wrap { flex: 1; height: 14px; background: #0f1117; border-radius: 2px; overflow: hidden; display: flex; }
|
||||
.worker-card .wc-bar-seg { height: 100%; }
|
||||
.worker-card .wc-stats { font-size: 11px; color: #888; min-width: 200px; text-align: right; }
|
||||
.worker-card .wc-spark { display: inline-flex; gap: 4px; margin-left: 6px; }
|
||||
|
||||
.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-header .sparkline-wrap { display: inline-flex; gap: 8px; margin-left: 12px; }
|
||||
.worker-group-header .sparkline-wrap svg { vertical-align: middle; }
|
||||
.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 id="warningBanner" style="display:none;padding:8px 20px;background:#1c1f2e;border-bottom:1px solid #2a2d3e;font-size:12px;"></div>
|
||||
<div class="grid">
|
||||
<div class="panel chart-panel">
|
||||
<h2>Worker Utilization</h2>
|
||||
<div id="workerCards" class="worker-cards"></div>
|
||||
<div style="margin-top:6px;font-size:10px;color:#555;">
|
||||
<span style="color:#4caf50;">\u25A0</span> processing
|
||||
<span style="color:#2196f3;">\u25A0</span> delivery
|
||||
<span style="color:#00bcd4;">\u25A0</span> spawns
|
||||
<span style="color:#f44336;">\u25A0</span> overhead
|
||||
</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 workerHistory = {}; // { id: { message_rates: [], mailbox_depths: [] } }
|
||||
|
||||
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 colors = ['#4caf50','#2196f3','#ff9800','#f44336','#9c27b0','#00bcd4','#ffeb3b','#e91e63'];
|
||||
|
||||
var phaseColors = ['#4caf50', '#2196f3', '#00bcd4', '#f44336'];
|
||||
// Group tick phases: processing=2, delivery=1+4, spawns=0+3, overhead=5
|
||||
|
||||
function computePhases(timings) {
|
||||
if (!timings || timings.length === 0) return [0.25, 0.25, 0.25, 0.25];
|
||||
var sums = [0,0,0,0,0,0];
|
||||
var active = 0;
|
||||
for (var i = 0; i < timings.length; i++) {
|
||||
var t = timings[i];
|
||||
if (t.did_work) active++;
|
||||
for (var p = 0; p < 6 && p < t.phase_us.length; p++) sums[p] += t.phase_us[p];
|
||||
}
|
||||
var total = sums.reduce(function(a,b) { return a+b; }, 0);
|
||||
if (total === 0) return [0.25, 0.25, 0.25, 0.25];
|
||||
var processing = sums[2] / total;
|
||||
var delivery = (sums[1] + sums[4]) / total;
|
||||
var spawns = (sums[0] + sums[3]) / total;
|
||||
var overhead = sums[5] / total;
|
||||
var load = timings.length > 0 ? active / timings.length : 0;
|
||||
return { fracs: [processing, delivery, spawns, overhead], load: load };
|
||||
}
|
||||
|
||||
function renderWorkerCards(data) {
|
||||
var container = document.getElementById('workerCards');
|
||||
if (!data.workers) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
data.workers.forEach(function(w, idx) {
|
||||
var timings = data.tick_timings ? data.tick_timings[idx] : null;
|
||||
var phases = computePhases(timings);
|
||||
var load = phases.load || 0;
|
||||
var fracs = phases.fracs || [0.25, 0.25, 0.25, 0.25];
|
||||
|
||||
var card = document.createElement('div');
|
||||
card.className = 'worker-card';
|
||||
|
||||
// ID
|
||||
var idSpan = document.createElement('span');
|
||||
idSpan.className = 'wc-id';
|
||||
idSpan.style.color = colors[w.id % colors.length];
|
||||
idSpan.textContent = 'W' + w.id;
|
||||
card.appendChild(idSpan);
|
||||
|
||||
// Phase bar
|
||||
var barWrap = document.createElement('span');
|
||||
barWrap.className = 'wc-bar-wrap';
|
||||
var filledPct = Math.round(load * 100);
|
||||
for (var p = 0; p < 4; p++) {
|
||||
var seg = document.createElement('span');
|
||||
seg.className = 'wc-bar-seg';
|
||||
seg.style.width = (fracs[p] * filledPct) + '%';
|
||||
seg.style.background = phaseColors[p];
|
||||
barWrap.appendChild(seg);
|
||||
}
|
||||
card.appendChild(barWrap);
|
||||
|
||||
// Sparklines
|
||||
var sparkWrap = document.createElement('span');
|
||||
sparkWrap.className = 'wc-spark';
|
||||
var wh = workerHistory[w.id];
|
||||
if (wh) {
|
||||
sparkWrap.innerHTML = renderSparklineSvg(wh.message_rates, 60, 14, '#4caf50');
|
||||
}
|
||||
card.appendChild(sparkWrap);
|
||||
|
||||
// Stats
|
||||
var statsSpan = document.createElement('span');
|
||||
statsSpan.className = 'wc-stats';
|
||||
statsSpan.textContent = w.num_actors + ' actors ' +
|
||||
w.messages_processed.toLocaleString() + ' msgs mbox ' + w.mailbox_depth +
|
||||
' ' + Math.round(load * 100) + '%';
|
||||
card.appendChild(statsSpan);
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
renderWorkerCards(data);
|
||||
|
||||
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;"><a href="/actor/' + hex + '" style="color:#aaa;text-decoration:none;">' + hex + '</a></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 renderSparklineSvg(data, w, h, color) {
|
||||
if (!data || data.length < 2) return '';
|
||||
var max = Math.max.apply(null, data);
|
||||
if (max === 0) max = 1;
|
||||
var step = w / (data.length - 1);
|
||||
var points = data.map(function(v, i) {
|
||||
return (i * step).toFixed(1) + ',' + (h - (v / max) * (h - 2) - 1).toFixed(1);
|
||||
}).join(' ');
|
||||
return '<svg width="' + w + '" height="' + h + '" style="vertical-align:middle">' +
|
||||
'<polyline fill="none" stroke="' + color + '" stroke-width="1.5" points="' + points + '"/></svg>';
|
||||
}
|
||||
|
||||
function pushHistorySample(stats) {
|
||||
if (!stats.workers) return;
|
||||
stats.workers.forEach(function(w) {
|
||||
if (!workerHistory[w.id]) {
|
||||
workerHistory[w.id] = { message_rates: [], mailbox_depths: [], prev_msgs: w.messages_processed };
|
||||
}
|
||||
var wh = workerHistory[w.id];
|
||||
var rate = w.messages_processed - wh.prev_msgs;
|
||||
if (rate < 0) rate = 0;
|
||||
wh.prev_msgs = w.messages_processed;
|
||||
wh.message_rates.push(rate);
|
||||
wh.mailbox_depths.push(w.mailbox_depth);
|
||||
if (wh.message_rates.length > 300) { wh.message_rates.shift(); wh.mailbox_depths.shift(); }
|
||||
});
|
||||
}
|
||||
|
||||
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>' : '';
|
||||
var wh = workerHistory[wid];
|
||||
var sparkHtml = '';
|
||||
if (wh) {
|
||||
sparkHtml = '<span class="sparkline-wrap">' +
|
||||
renderSparklineSvg(wh.message_rates, 80, 16, '#4caf50') +
|
||||
renderSparklineSvg(wh.mailbox_depths, 80, 16, '#2196f3') +
|
||||
'</span>';
|
||||
}
|
||||
hdr.innerHTML =
|
||||
'<span class="wid" style="color:' + colors[wid % colors.length] + '">W' + wid + '</span>' +
|
||||
sparkHtml +
|
||||
'<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;"><a href="/actor/' + hex + '" style="color:#aaa;text-decoration:none;">' + hex + '</a></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 {
|
||||
var data = JSON.parse(e.data);
|
||||
pushHistorySample(data);
|
||||
updateStats(data);
|
||||
} catch(err) { console.error('stats parse error', err); }
|
||||
});
|
||||
|
||||
es.addEventListener('history', function(e) {
|
||||
try {
|
||||
var data = JSON.parse(e.data);
|
||||
if (data.workers) {
|
||||
data.workers.forEach(function(w) {
|
||||
workerHistory[w.id] = {
|
||||
message_rates: w.message_rates || [],
|
||||
mailbox_depths: w.mailbox_depths || [],
|
||||
prev_msgs: 0
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch(err) { console.error('history parse error', err); }
|
||||
});
|
||||
|
||||
es.addEventListener('warnings', function(e) {
|
||||
try {
|
||||
var warnings = JSON.parse(e.data);
|
||||
var banner = document.getElementById('warningBanner');
|
||||
if (warnings.length === 0) {
|
||||
banner.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
banner.style.display = 'block';
|
||||
var sevColors = {critical:'#f44336',high:'#ff5722',medium:'#ff9800',low:'#888'};
|
||||
var html = warnings.map(function(w) {
|
||||
var c = sevColors[w.severity] || '#888';
|
||||
return '<span style="color:' + c + ';">\u26A0 ' + w.description + '</span>';
|
||||
}).join(' ');
|
||||
banner.innerHTML = '<span style="color:#ff9800;font-weight:700;">WARNINGS (' + warnings.length + ')</span> ' + html;
|
||||
} catch(err) { console.error('warnings 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>
|
||||
"##;
|
||||
pub const DASHBOARD_HTML: &str = include_str\!("dashboard.html");
|
||||
|
|
|
|||
767
crates/runtime-dashboard/src/distribution.html
Normal file
767
crates/runtime-dashboard/src/distribution.html
Normal file
|
|
@ -0,0 +1,767 @@
|
|||
<!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; overflow: hidden;
|
||||
}
|
||||
.graph-panel canvas { position: absolute; top: 0; left: 0; 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 <span id="probeCount" 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;">State</th>
|
||||
<th style="color:#888;font-weight:500;font-size:11px;">Node</th>
|
||||
<th style="color:#888;font-weight:500;font-size:11px;">Address</th>
|
||||
</tr></thead>
|
||||
<tbody id="probesBody"></tbody>
|
||||
</table>
|
||||
</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 — cross-reference with members for state + address
|
||||
var memberMap = {};
|
||||
for (var i = 0; i < d.members.length; i++) {
|
||||
memberMap[d.members[i].node_id] = d.members[i];
|
||||
}
|
||||
var probesBody = document.getElementById('probesBody');
|
||||
probesBody.innerHTML = '';
|
||||
document.getElementById('probeCount').textContent = '(' + d.recent_probe_targets.length + ')';
|
||||
for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
|
||||
var pid = d.recent_probe_targets[i];
|
||||
var mem = memberMap[pid];
|
||||
var state = mem ? mem.state : 'unknown';
|
||||
var addr = mem ? mem.addr : '\u2014';
|
||||
var cls = 'state-' + state;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td class="' + cls + '" style="font-size:10px;">' + state + '</td>' +
|
||||
'<td style="color:#aaa;font-size:10px;">' + pid.substring(0, 12) + '\u2026</td>' +
|
||||
'<td style="font-size:10px;">' + addr + '</td>';
|
||||
probesBody.appendChild(tr);
|
||||
}
|
||||
|
||||
// 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,768 +1 @@
|
|||
pub const DISTRIBUTION_HTML: &str = r##"<!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; overflow: hidden;
|
||||
}
|
||||
.graph-panel canvas { position: absolute; top: 0; left: 0; 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 <span id="probeCount" 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;">State</th>
|
||||
<th style="color:#888;font-weight:500;font-size:11px;">Node</th>
|
||||
<th style="color:#888;font-weight:500;font-size:11px;">Address</th>
|
||||
</tr></thead>
|
||||
<tbody id="probesBody"></tbody>
|
||||
</table>
|
||||
</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 — cross-reference with members for state + address
|
||||
var memberMap = {};
|
||||
for (var i = 0; i < d.members.length; i++) {
|
||||
memberMap[d.members[i].node_id] = d.members[i];
|
||||
}
|
||||
var probesBody = document.getElementById('probesBody');
|
||||
probesBody.innerHTML = '';
|
||||
document.getElementById('probeCount').textContent = '(' + d.recent_probe_targets.length + ')';
|
||||
for (var i = d.recent_probe_targets.length - 1; i >= 0; i--) {
|
||||
var pid = d.recent_probe_targets[i];
|
||||
var mem = memberMap[pid];
|
||||
var state = mem ? mem.state : 'unknown';
|
||||
var addr = mem ? mem.addr : '\u2014';
|
||||
var cls = 'state-' + state;
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td class="' + cls + '" style="font-size:10px;">' + state + '</td>' +
|
||||
'<td style="color:#aaa;font-size:10px;">' + pid.substring(0, 12) + '\u2026</td>' +
|
||||
'<td style="font-size:10px;">' + addr + '</td>';
|
||||
probesBody.appendChild(tr);
|
||||
}
|
||||
|
||||
// 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>
|
||||
"##;
|
||||
pub const DISTRIBUTION_HTML: &str = include_str\!("distribution.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