Feat v0.6.4 health metrics (#39)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #39.
This commit is contained in:
@@ -1,100 +0,0 @@
|
||||
.cluster-dashboard {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.cluster-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cluster-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary, #111);
|
||||
}
|
||||
|
||||
.cluster-status {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary, #666);
|
||||
background: var(--bg-secondary, #f3f4f6);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.cluster-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cluster-card {
|
||||
background: var(--bg-primary, #fff);
|
||||
border: 1px solid var(--border, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.node-id {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--text-primary, #111);
|
||||
}
|
||||
|
||||
.heartbeat-badge {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary, #666);
|
||||
background: var(--bg-secondary, #f3f4f6);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.node-endpoint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary, #666);
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
.card-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-secondary, #999);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--text-primary, #111);
|
||||
}
|
||||
|
||||
.cluster-empty {
|
||||
color: var(--text-secondary, #666);
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
/**
|
||||
* Cluster Dashboard — admin surface showing registered cluster nodes.
|
||||
*
|
||||
* Polls GET /api/v1/admin/cluster every 10s. Renders one card per node
|
||||
* with runtime stats from the JSONB stats column. New keys added to
|
||||
* stats are rendered automatically — no code change required.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var mount = document.getElementById('extension-mount');
|
||||
if (!mount) return;
|
||||
|
||||
var REFRESH_MS = 10000;
|
||||
var timer = null;
|
||||
|
||||
mount.innerHTML =
|
||||
'<div class="cluster-dashboard">' +
|
||||
'<div class="cluster-header">' +
|
||||
'<h1>Cluster</h1>' +
|
||||
'<span class="cluster-status" id="clusterStatus">loading...</span>' +
|
||||
'</div>' +
|
||||
'<div class="cluster-grid" id="clusterGrid"></div>' +
|
||||
'</div>';
|
||||
|
||||
load();
|
||||
timer = setInterval(load, REFRESH_MS);
|
||||
|
||||
// Cleanup on navigation (SPA)
|
||||
window.addEventListener('beforeunload', function () {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
|
||||
function load() {
|
||||
var api = (window.sw && window.sw.api) || (typeof API !== 'undefined' && API);
|
||||
if (!api) return;
|
||||
var get = api._get || api.get;
|
||||
if (!get) return;
|
||||
get.call(api, '/api/v1/admin/cluster').then(render).catch(function () {
|
||||
// 404 = SQLite (no cluster route registered), or other fetch error
|
||||
render({ data: [] });
|
||||
});
|
||||
}
|
||||
|
||||
function render(resp) {
|
||||
var nodes = (resp && resp.data) || [];
|
||||
var status = document.getElementById('clusterStatus');
|
||||
var grid = document.getElementById('clusterGrid');
|
||||
|
||||
status.textContent = nodes.length + ' node' + (nodes.length !== 1 ? 's' : '') + ' registered';
|
||||
|
||||
if (nodes.length === 0) {
|
||||
grid.innerHTML = '<p class="cluster-empty">No nodes registered. The cluster registry requires PostgreSQL — SQLite runs single-node only.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = nodes.map(nodeCard).join('');
|
||||
}
|
||||
|
||||
function nodeCard(node) {
|
||||
var stats = {};
|
||||
try { stats = typeof node.stats === 'string' ? JSON.parse(node.stats) : (node.stats || {}); } catch (e) { /* ignore */ }
|
||||
|
||||
var uptimeSec = stats.uptime_sec || 0;
|
||||
var uptime = formatDuration(uptimeSec);
|
||||
var heap = formatBytes(stats.heap_alloc || 0);
|
||||
var gcPause = ((stats.gc_pause_ns || 0) / 1e6).toFixed(1) + ' ms';
|
||||
var wsClients = stats.ws_clients != null ? stats.ws_clients : '-';
|
||||
var goroutines = stats.goroutines != null ? stats.goroutines : '-';
|
||||
var gcCycles = stats.gc_cycles != null ? stats.gc_cycles : '-';
|
||||
var heartbeatAge = timeSince(node.heartbeat);
|
||||
|
||||
return (
|
||||
'<div class="cluster-card">' +
|
||||
'<div class="card-header">' +
|
||||
'<span class="node-id">' + esc(node.node_id) + '</span>' +
|
||||
'<span class="heartbeat-badge" title="Last heartbeat">' + heartbeatAge + '</span>' +
|
||||
'</div>' +
|
||||
(node.endpoint ? '<div class="node-endpoint">' + esc(node.endpoint) + '</div>' : '') +
|
||||
'<div class="card-stats">' +
|
||||
stat('Uptime', uptime) +
|
||||
stat('WS Clients', wsClients) +
|
||||
stat('Goroutines', goroutines) +
|
||||
stat('Heap', heap) +
|
||||
stat('GC Pause', gcPause) +
|
||||
stat('GC Cycles', gcCycles) +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
function stat(label, value) {
|
||||
return '<div class="stat"><span class="stat-label">' + label + '</span><span class="stat-value">' + value + '</span></div>';
|
||||
}
|
||||
|
||||
function formatBytes(b) {
|
||||
if (b < 1024) return b + ' B';
|
||||
if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
|
||||
return (b / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
function formatDuration(sec) {
|
||||
if (sec < 60) return Math.floor(sec) + 's';
|
||||
if (sec < 3600) return Math.floor(sec / 60) + 'm ' + Math.floor(sec % 60) + 's';
|
||||
var h = Math.floor(sec / 3600);
|
||||
var m = Math.floor((sec % 3600) / 60);
|
||||
return h + 'h ' + m + 'm';
|
||||
}
|
||||
|
||||
function timeSince(iso) {
|
||||
if (!iso) return '-';
|
||||
var ms = Date.now() - new Date(iso).getTime();
|
||||
if (ms < 0) ms = 0;
|
||||
var sec = Math.floor(ms / 1000);
|
||||
if (sec < 60) return sec + 's ago';
|
||||
return Math.floor(sec / 60) + 'm ago';
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
var d = document.createElement('div');
|
||||
d.appendChild(document.createTextNode(s || ''));
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"id": "cluster-dashboard",
|
||||
"icon": "🔗",
|
||||
"type": "surface",
|
||||
"title": "Cluster",
|
||||
"route": "/s/cluster-dashboard",
|
||||
"auth": "admin",
|
||||
"layout": "single",
|
||||
"components": [],
|
||||
"hooks": ["surface"],
|
||||
"version": "0.6.0",
|
||||
"description": "Cluster node registry — health, runtime stats, and peer visibility."
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"tier": "browser",
|
||||
"author": "switchboard",
|
||||
"description": "Renders ```csv code blocks as sortable, interactive HTML tables",
|
||||
"requires": ["chat"],
|
||||
"requires": [],
|
||||
"permissions": [],
|
||||
"tools": [],
|
||||
"surfaces": [],
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"tier": "browser",
|
||||
"author": "switchboard",
|
||||
"description": "Renders ```diff code blocks with syntax-highlighted additions, deletions, and context lines",
|
||||
"requires": ["chat"],
|
||||
"requires": [],
|
||||
"permissions": [],
|
||||
"tools": [],
|
||||
"surfaces": [],
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"tier": "browser",
|
||||
"author": "switchboard",
|
||||
"description": "Renders LaTeX math expressions: ```latex blocks and inline $...$ / $$...$$ syntax",
|
||||
"requires": ["chat"],
|
||||
"requires": [],
|
||||
"permissions": [],
|
||||
"tools": [],
|
||||
"surfaces": [],
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"tier": "browser",
|
||||
"author": "switchboard",
|
||||
"description": "Renders ```mermaid code blocks as interactive SVG diagrams with zoom/pan, SVG/PNG export, and source copy",
|
||||
"requires": ["chat"],
|
||||
"requires": [],
|
||||
"permissions": [],
|
||||
"tools": [],
|
||||
"surfaces": [],
|
||||
|
||||
Reference in New Issue
Block a user