feat(swdash): Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
This commit is contained in:
@@ -144,15 +144,9 @@ export class DashboardGenerator {
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the complete HTML dashboard page as a SPA with tab navigation
|
||||
* Generates a minimal HTML shell that loads the Lit-based dashboard bundle
|
||||
*/
|
||||
public generateDashboardHtml(): string {
|
||||
const metrics = getMetricsCollector();
|
||||
const data = metrics.getMetrics();
|
||||
const hitRate = metrics.getCacheHitRate();
|
||||
const successRate = metrics.getNetworkSuccessRate();
|
||||
const resourceCount = metrics.getResourceCount();
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -163,754 +157,17 @@ export class DashboardGenerator {
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #00ff00;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.terminal {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #00ff00;
|
||||
background: #0d0d0d;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #00ff00;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
}
|
||||
.title { color: #00ff00; font-weight: bold; font-size: 16px; }
|
||||
.uptime { color: #888; }
|
||||
|
||||
/* Navigation tabs */
|
||||
.nav {
|
||||
display: flex;
|
||||
background: #111;
|
||||
border-bottom: 1px solid #333;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.nav-tab:hover { color: #00ff00; }
|
||||
.nav-tab.active {
|
||||
color: #00ff00;
|
||||
border-bottom-color: #00ff00;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.nav-tab .count {
|
||||
background: #333;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.content { padding: 15px; min-height: 400px; }
|
||||
.view { display: none; }
|
||||
.view.active { display: block; }
|
||||
|
||||
/* Grid layout for overview */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
.panel {
|
||||
border: 1px solid #333;
|
||||
padding: 12px;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.panel-title {
|
||||
color: #00ffff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dashed #333;
|
||||
}
|
||||
.row { display: flex; justify-content: space-between; padding: 3px 0; }
|
||||
.label { color: #888; }
|
||||
.value { color: #00ff00; }
|
||||
.value.warning { color: #ffff00; }
|
||||
.value.error { color: #ff4444; }
|
||||
.value.success { color: #00ff00; }
|
||||
|
||||
/* Gauge */
|
||||
.gauge { margin: 8px 0; }
|
||||
.gauge-bar {
|
||||
height: 16px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gauge-fill { height: 100%; transition: width 0.3s ease; }
|
||||
.gauge-fill.good { background: #00aa00; }
|
||||
.gauge-fill.warning { background: #aaaa00; }
|
||||
.gauge-fill.bad { background: #aa0000; }
|
||||
.gauge-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #000;
|
||||
}
|
||||
|
||||
/* Sortable table */
|
||||
.table-container { overflow-x: auto; }
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
.data-table th, .data-table td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.data-table th {
|
||||
background: #1a1a1a;
|
||||
color: #00ffff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.data-table th:hover { background: #252525; }
|
||||
.data-table th .sort-icon { margin-left: 5px; opacity: 0.5; }
|
||||
.data-table th.sorted .sort-icon { opacity: 1; color: #00ff00; }
|
||||
.data-table tr:hover { background: #151515; }
|
||||
.data-table td { color: #ccc; }
|
||||
.data-table td.url {
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.data-table td.num { text-align: right; color: #00ff00; }
|
||||
|
||||
/* Search/filter */
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
.search-input {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
color: #00ff00;
|
||||
padding: 6px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
}
|
||||
.search-input:focus { outline: none; border-color: #00ff00; }
|
||||
.table-info { color: #888; font-size: 12px; }
|
||||
|
||||
/* Speed bars */
|
||||
.speed-bar {
|
||||
height: 8px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.speed-fill { height: 100%; background: #00aa00; transition: width 0.5s ease; }
|
||||
|
||||
/* Online indicator */
|
||||
.online-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px dashed #333; }
|
||||
.online-dot { width: 12px; height: 12px; border-radius: 50%; transition: background-color 0.3s ease; }
|
||||
.online-dot.online { background: #00ff00; box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
|
||||
.online-dot.offline { background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:hover { background: #00ff00; color: #000; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-row { display: flex; justify-content: flex-end; margin-top: 10px; }
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
border-top: 1px solid #00ff00;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
font-size: 12px;
|
||||
}
|
||||
.refresh-info { color: #888; }
|
||||
.status { display: flex; align-items: center; gap: 8px; }
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #00ff00;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.prompt { color: #00ff00; }
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
background: #00ff00;
|
||||
animation: blink 1s step-end infinite;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* Hit rate bar in tables */
|
||||
.hit-rate-bar {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.hit-rate-fill { height: 100%; }
|
||||
.hit-rate-fill.good { background: #00aa00; }
|
||||
.hit-rate-fill.warning { background: #aaaa00; }
|
||||
.hit-rate-fill.bad { background: #aa0000; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="terminal">
|
||||
<div class="header">
|
||||
<span class="title">[SW-DASH] Service Worker Dashboard</span>
|
||||
<span class="uptime" id="uptime">Uptime: ${this.formatDuration(data.uptime)}</span>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<button class="nav-tab active" data-view="overview">Overview</button>
|
||||
<button class="nav-tab" data-view="urls">URLs <span class="count" id="url-count">${resourceCount}</span></button>
|
||||
<button class="nav-tab" data-view="domains">Domains</button>
|
||||
<button class="nav-tab" data-view="types">Types</button>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<!-- Overview View -->
|
||||
<div id="view-overview" class="view active">
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CACHE ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${this.getGaugeClass(hitRate)}" id="cache-gauge" style="width: ${hitRate}%"></div>
|
||||
<span class="gauge-text" id="cache-gauge-text">${hitRate}% hit rate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Hits:</span><span class="value success" id="cache-hits">${this.formatNumber(data.cache.hits)}</span></div>
|
||||
<div class="row"><span class="label">Misses:</span><span class="value warning" id="cache-misses">${this.formatNumber(data.cache.misses)}</span></div>
|
||||
<div class="row"><span class="label">Errors:</span><span class="value ${data.cache.errors > 0 ? 'error' : ''}" id="cache-errors">${this.formatNumber(data.cache.errors)}</span></div>
|
||||
<div class="row"><span class="label">From Cache:</span><span class="value" id="cache-bytes">${this.formatBytes(data.cache.bytesServedFromCache)}</span></div>
|
||||
<div class="row"><span class="label">Fetched:</span><span class="value" id="cache-fetched">${this.formatBytes(data.cache.bytesFetched)}</span></div>
|
||||
<div class="row"><span class="label">Resources:</span><span class="value" id="cache-resources">${resourceCount}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ NETWORK ]</div>
|
||||
<div class="gauge">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${this.getGaugeClass(successRate)}" id="net-gauge" style="width: ${successRate}%"></div>
|
||||
<span class="gauge-text" id="net-gauge-text">${successRate}% success</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Total Requests:</span><span class="value" id="net-total">${this.formatNumber(data.network.totalRequests)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="net-success">${this.formatNumber(data.network.successfulRequests)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.network.failedRequests > 0 ? 'error' : ''}" id="net-failed">${this.formatNumber(data.network.failedRequests)}</span></div>
|
||||
<div class="row"><span class="label">Timeouts:</span><span class="value ${data.network.timeouts > 0 ? 'warning' : ''}" id="net-timeouts">${this.formatNumber(data.network.timeouts)}</span></div>
|
||||
<div class="row"><span class="label">Avg Latency:</span><span class="value" id="net-latency">${data.network.averageLatency}ms</span></div>
|
||||
<div class="row"><span class="label">Transferred:</span><span class="value" id="net-bytes">${this.formatBytes(data.network.totalBytesTransferred)}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ UPDATES ]</div>
|
||||
<div class="row"><span class="label">Total Checks:</span><span class="value" id="upd-checks">${this.formatNumber(data.update.totalChecks)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="upd-success">${this.formatNumber(data.update.successfulChecks)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.update.failedChecks > 0 ? 'error' : ''}" id="upd-failed">${this.formatNumber(data.update.failedChecks)}</span></div>
|
||||
<div class="row"><span class="label">Updates Found:</span><span class="value" id="upd-found">${this.formatNumber(data.update.updatesFound)}</span></div>
|
||||
<div class="row"><span class="label">Updates Applied:</span><span class="value success" id="upd-applied">${this.formatNumber(data.update.updatesApplied)}</span></div>
|
||||
<div class="row"><span class="label">Last Check:</span><span class="value" id="upd-last-check">${this.formatTimestamp(data.update.lastCheckTimestamp)}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ CONNECTIONS ]</div>
|
||||
<div class="row"><span class="label">Active Clients:</span><span class="value success" id="conn-clients">${this.formatNumber(data.connection.connectedClients)}</span></div>
|
||||
<div class="row"><span class="label">Total Attempts:</span><span class="value" id="conn-attempts">${this.formatNumber(data.connection.totalConnectionAttempts)}</span></div>
|
||||
<div class="row"><span class="label">Successful:</span><span class="value success" id="conn-success">${this.formatNumber(data.connection.successfulConnections)}</span></div>
|
||||
<div class="row"><span class="label">Failed:</span><span class="value ${data.connection.failedConnections > 0 ? 'error' : ''}" id="conn-failed">${this.formatNumber(data.connection.failedConnections)}</span></div>
|
||||
<div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed #333;">
|
||||
<span class="label">Started:</span><span class="value" id="start-time">${this.formatTimestamp(data.startTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">[ SPEEDTEST ]</div>
|
||||
<div class="online-indicator">
|
||||
<span class="online-dot ${data.speedtest.isOnline ? 'online' : 'offline'}" id="online-dot"></span>
|
||||
<span class="value ${data.speedtest.isOnline ? 'success' : 'error'}" id="online-status">${data.speedtest.isOnline ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
<div class="row"><span class="label">Download:</span><span class="value" id="speed-download">${data.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" id="speed-download-bar" style="width: ${Math.min(data.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Upload:</span><span class="value" id="speed-upload">${data.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
|
||||
<div class="speed-bar"><div class="speed-fill" id="speed-upload-bar" style="width: ${Math.min(data.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
|
||||
<div class="row"><span class="label">Latency:</span><span class="value" id="speed-latency">${data.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
|
||||
<div class="btn-row"><button class="btn" id="run-speedtest">Run Test</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URLs View -->
|
||||
<div id="view-urls" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="url-search" placeholder="Filter URLs...">
|
||||
<span class="table-info" id="url-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="url-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="url">URL <span class="sort-icon">^</span></th>
|
||||
<th data-sort="contentType">Type <span class="sort-icon">^</span></th>
|
||||
<th data-sort="size">Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitCount">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="missCount">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
<th data-sort="lastAccessed">Last Access <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="url-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Domains View -->
|
||||
<div id="view-domains" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="domain-search" placeholder="Filter domains...">
|
||||
<span class="table-info" id="domain-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="domain-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="domain">Domain <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="domain-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Types View -->
|
||||
<div id="view-types" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" class="search-input" id="type-search" placeholder="Filter types...">
|
||||
<span class="table-info" id="type-info">Loading...</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="type-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="contentType">Content Type <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
|
||||
<th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
|
||||
<th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="type-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="refresh-info">
|
||||
<span class="prompt">$</span> Last refresh: <span id="last-refresh">${new Date().toLocaleTimeString()}</span><span class="cursor"></span>
|
||||
</span>
|
||||
<div class="status">
|
||||
<span class="status-dot"></span>
|
||||
<span>Auto-refresh: 2s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// State
|
||||
let resourceData = { resources: [], domains: [], contentTypes: [] };
|
||||
let sortState = {
|
||||
urls: { column: 'lastAccessed', direction: 'desc' },
|
||||
domains: { column: 'totalHits', direction: 'desc' },
|
||||
types: { column: 'totalHits', direction: 'desc' }
|
||||
};
|
||||
|
||||
// Utilities
|
||||
const formatNumber = n => n.toLocaleString();
|
||||
const formatBytes = bytes => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024, sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
const formatDuration = ms => {
|
||||
const s = Math.floor(ms / 1000), m = Math.floor(s / 60), h = Math.floor(m / 60), d = Math.floor(h / 24);
|
||||
if (d > 0) return d + 'd ' + (h % 24) + 'h';
|
||||
if (h > 0) return h + 'h ' + (m % 60) + 'm';
|
||||
if (m > 0) return m + 'm ' + (s % 60) + 's';
|
||||
return s + 's';
|
||||
};
|
||||
const formatTimestamp = ts => {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
|
||||
if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
|
||||
if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
|
||||
return new Date(ts).toLocaleDateString();
|
||||
};
|
||||
const getGaugeClass = rate => rate >= 80 ? 'good' : rate >= 50 ? 'warning' : 'bad';
|
||||
|
||||
// Navigation
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById('view-' + tab.dataset.view).classList.add('active');
|
||||
if (tab.dataset.view !== 'overview') loadResourceData();
|
||||
});
|
||||
});
|
||||
|
||||
// Sort function
|
||||
function sortData(data, column, direction) {
|
||||
return [...data].sort((a, b) => {
|
||||
let valA = a[column], valB = b[column];
|
||||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||||
if (valA < valB) return direction === 'asc' ? -1 : 1;
|
||||
if (valA > valB) return direction === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
// Hit rate bar HTML
|
||||
function hitRateBar(rate) {
|
||||
const cls = getGaugeClass(rate);
|
||||
return '<span class="hit-rate-bar"><span class="hit-rate-fill ' + cls + '" style="width:' + rate + '%"></span></span>' + rate + '%';
|
||||
}
|
||||
|
||||
// Render URL table
|
||||
function renderUrlTable(filter = '') {
|
||||
const tbody = document.getElementById('url-tbody');
|
||||
let data = resourceData.resources;
|
||||
if (filter) data = data.filter(r => r.url.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.urls.column, sortState.urls.direction);
|
||||
|
||||
// Add computed hitRate
|
||||
data.forEach(r => {
|
||||
const total = r.hitCount + r.missCount;
|
||||
r.hitRate = total > 0 ? Math.round((r.hitCount / total) * 100) : 0;
|
||||
});
|
||||
|
||||
tbody.innerHTML = data.map(r =>
|
||||
'<tr>' +
|
||||
'<td class="url" title="' + r.url + '">' + r.url + '</td>' +
|
||||
'<td>' + (r.contentType || 'unknown') + '</td>' +
|
||||
'<td class="num">' + formatBytes(r.size) + '</td>' +
|
||||
'<td class="num">' + formatNumber(r.hitCount) + '</td>' +
|
||||
'<td class="num">' + formatNumber(r.missCount) + '</td>' +
|
||||
'<td>' + hitRateBar(r.hitRate) + '</td>' +
|
||||
'<td>' + formatTimestamp(r.lastAccessed) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('url-info').textContent = data.length + ' of ' + resourceData.resources.length + ' resources';
|
||||
}
|
||||
|
||||
// Render domain table
|
||||
function renderDomainTable(filter = '') {
|
||||
const tbody = document.getElementById('domain-tbody');
|
||||
let data = resourceData.domains;
|
||||
if (filter) data = data.filter(d => d.domain.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.domains.column, sortState.domains.direction);
|
||||
|
||||
tbody.innerHTML = data.map(d =>
|
||||
'<tr>' +
|
||||
'<td>' + d.domain + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalResources) + '</td>' +
|
||||
'<td class="num">' + formatBytes(d.totalSize) + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalHits) + '</td>' +
|
||||
'<td class="num">' + formatNumber(d.totalMisses) + '</td>' +
|
||||
'<td>' + hitRateBar(d.hitRate) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('domain-info').textContent = data.length + ' domains';
|
||||
}
|
||||
|
||||
// Render type table
|
||||
function renderTypeTable(filter = '') {
|
||||
const tbody = document.getElementById('type-tbody');
|
||||
let data = resourceData.contentTypes;
|
||||
if (filter) data = data.filter(t => t.contentType.toLowerCase().includes(filter.toLowerCase()));
|
||||
data = sortData(data, sortState.types.column, sortState.types.direction);
|
||||
|
||||
tbody.innerHTML = data.map(t =>
|
||||
'<tr>' +
|
||||
'<td>' + t.contentType + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalResources) + '</td>' +
|
||||
'<td class="num">' + formatBytes(t.totalSize) + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalHits) + '</td>' +
|
||||
'<td class="num">' + formatNumber(t.totalMisses) + '</td>' +
|
||||
'<td>' + hitRateBar(t.hitRate) + '</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
|
||||
document.getElementById('type-info').textContent = data.length + ' content types';
|
||||
}
|
||||
|
||||
// Sort handlers
|
||||
function setupSortHandlers(tableId, stateKey, renderFn) {
|
||||
document.querySelectorAll('#' + tableId + ' th[data-sort]').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
const col = th.dataset.sort;
|
||||
if (sortState[stateKey].column === col) {
|
||||
sortState[stateKey].direction = sortState[stateKey].direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortState[stateKey].column = col;
|
||||
sortState[stateKey].direction = 'desc';
|
||||
}
|
||||
// Update sort icons
|
||||
document.querySelectorAll('#' + tableId + ' th').forEach(h => h.classList.remove('sorted'));
|
||||
th.classList.add('sorted');
|
||||
th.querySelector('.sort-icon').textContent = sortState[stateKey].direction === 'asc' ? '^' : 'v';
|
||||
renderFn();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setupSortHandlers('url-table', 'urls', () => renderUrlTable(document.getElementById('url-search').value));
|
||||
setupSortHandlers('domain-table', 'domains', () => renderDomainTable(document.getElementById('domain-search').value));
|
||||
setupSortHandlers('type-table', 'types', () => renderTypeTable(document.getElementById('type-search').value));
|
||||
|
||||
// Search handlers
|
||||
document.getElementById('url-search').addEventListener('input', e => renderUrlTable(e.target.value));
|
||||
document.getElementById('domain-search').addEventListener('input', e => renderDomainTable(e.target.value));
|
||||
document.getElementById('type-search').addEventListener('input', e => renderTypeTable(e.target.value));
|
||||
|
||||
// Load resource data
|
||||
async function loadResourceData() {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/resources');
|
||||
resourceData = await response.json();
|
||||
document.getElementById('url-count').textContent = resourceData.resourceCount;
|
||||
renderUrlTable(document.getElementById('url-search').value);
|
||||
renderDomainTable(document.getElementById('domain-search').value);
|
||||
renderTypeTable(document.getElementById('type-search').value);
|
||||
} catch (err) {
|
||||
console.error('Failed to load resource data:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Update overview
|
||||
function updateOverview(data) {
|
||||
document.getElementById('uptime').textContent = 'Uptime: ' + formatDuration(data.uptime);
|
||||
document.getElementById('cache-hits').textContent = formatNumber(data.cache.hits);
|
||||
document.getElementById('cache-misses').textContent = formatNumber(data.cache.misses);
|
||||
document.getElementById('cache-errors').textContent = formatNumber(data.cache.errors);
|
||||
document.getElementById('cache-bytes').textContent = formatBytes(data.cache.bytesServedFromCache);
|
||||
document.getElementById('cache-fetched').textContent = formatBytes(data.cache.bytesFetched);
|
||||
document.getElementById('cache-resources').textContent = data.resourceCount || 0;
|
||||
|
||||
const cacheGauge = document.getElementById('cache-gauge');
|
||||
cacheGauge.style.width = data.cacheHitRate + '%';
|
||||
cacheGauge.className = 'gauge-fill ' + getGaugeClass(data.cacheHitRate);
|
||||
document.getElementById('cache-gauge-text').textContent = data.cacheHitRate + '% hit rate';
|
||||
|
||||
document.getElementById('net-total').textContent = formatNumber(data.network.totalRequests);
|
||||
document.getElementById('net-success').textContent = formatNumber(data.network.successfulRequests);
|
||||
document.getElementById('net-failed').textContent = formatNumber(data.network.failedRequests);
|
||||
document.getElementById('net-timeouts').textContent = formatNumber(data.network.timeouts);
|
||||
document.getElementById('net-latency').textContent = data.network.averageLatency + 'ms';
|
||||
document.getElementById('net-bytes').textContent = formatBytes(data.network.totalBytesTransferred);
|
||||
|
||||
const netGauge = document.getElementById('net-gauge');
|
||||
netGauge.style.width = data.networkSuccessRate + '%';
|
||||
netGauge.className = 'gauge-fill ' + getGaugeClass(data.networkSuccessRate);
|
||||
document.getElementById('net-gauge-text').textContent = data.networkSuccessRate + '% success';
|
||||
|
||||
document.getElementById('upd-checks').textContent = formatNumber(data.update.totalChecks);
|
||||
document.getElementById('upd-success').textContent = formatNumber(data.update.successfulChecks);
|
||||
document.getElementById('upd-failed').textContent = formatNumber(data.update.failedChecks);
|
||||
document.getElementById('upd-found').textContent = formatNumber(data.update.updatesFound);
|
||||
document.getElementById('upd-applied').textContent = formatNumber(data.update.updatesApplied);
|
||||
document.getElementById('upd-last-check').textContent = formatTimestamp(data.update.lastCheckTimestamp);
|
||||
|
||||
document.getElementById('conn-clients').textContent = formatNumber(data.connection.connectedClients);
|
||||
document.getElementById('conn-attempts').textContent = formatNumber(data.connection.totalConnectionAttempts);
|
||||
document.getElementById('conn-success').textContent = formatNumber(data.connection.successfulConnections);
|
||||
document.getElementById('conn-failed').textContent = formatNumber(data.connection.failedConnections);
|
||||
document.getElementById('start-time').textContent = formatTimestamp(data.startTime);
|
||||
|
||||
if (data.speedtest) {
|
||||
document.getElementById('online-dot').className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
|
||||
document.getElementById('online-status').textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
|
||||
document.getElementById('online-status').className = 'value ' + (data.speedtest.isOnline ? 'success' : 'error');
|
||||
document.getElementById('speed-download').textContent = data.speedtest.lastDownloadSpeedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-upload').textContent = data.speedtest.lastUploadSpeedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-latency').textContent = data.speedtest.lastLatencyMs.toFixed(0) + ' ms';
|
||||
document.getElementById('speed-download-bar').style.width = Math.min(data.speedtest.lastDownloadSpeedMbps, 100) + '%';
|
||||
document.getElementById('speed-upload-bar').style.width = Math.min(data.speedtest.lastUploadSpeedMbps, 100) + '%';
|
||||
}
|
||||
|
||||
document.getElementById('url-count').textContent = data.resourceCount || 0;
|
||||
document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
|
||||
}
|
||||
|
||||
// Speedtest
|
||||
let speedtestRunning = false;
|
||||
document.getElementById('run-speedtest').addEventListener('click', async () => {
|
||||
if (speedtestRunning) return;
|
||||
speedtestRunning = true;
|
||||
const btn = document.getElementById('run-speedtest');
|
||||
btn.textContent = 'Testing...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-dash/speedtest');
|
||||
const result = await response.json();
|
||||
document.getElementById('online-dot').className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
|
||||
document.getElementById('online-status').textContent = result.isOnline ? 'Online' : 'Offline';
|
||||
document.getElementById('online-status').className = 'value ' + (result.isOnline ? 'success' : 'error');
|
||||
if (result.download) {
|
||||
document.getElementById('speed-download').textContent = result.download.speedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-download-bar').style.width = Math.min(result.download.speedMbps, 100) + '%';
|
||||
}
|
||||
if (result.upload) {
|
||||
document.getElementById('speed-upload').textContent = result.upload.speedMbps.toFixed(2) + ' Mbps';
|
||||
document.getElementById('speed-upload-bar').style.width = Math.min(result.upload.speedMbps, 100) + '%';
|
||||
}
|
||||
if (result.latency) {
|
||||
document.getElementById('speed-latency').textContent = result.latency.durationMs.toFixed(0) + ' ms';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Speedtest failed:', err);
|
||||
document.getElementById('online-dot').className = 'online-dot offline';
|
||||
document.getElementById('online-status').textContent = 'Offline';
|
||||
document.getElementById('online-status').className = 'value error';
|
||||
} finally {
|
||||
speedtestRunning = false;
|
||||
btn.textContent = 'Run Test';
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-refresh
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/metrics');
|
||||
const data = await response.json();
|
||||
updateOverview(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch metrics:', err);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Initial load
|
||||
loadResourceData();
|
||||
</script>
|
||||
<sw-dash-app></sw-dash-app>
|
||||
<script type="module" src="/sw-dash/bundle.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string
|
||||
*/
|
||||
private formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format duration to human-readable string
|
||||
*/
|
||||
private formatDuration(ms: number): string {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days}d ${hours % 24}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format timestamp to relative time string
|
||||
*/
|
||||
private formatTimestamp(ts: number): string {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return `${Math.floor(ago / 1000)}s ago`;
|
||||
if (ago < 3600000) return `${Math.floor(ago / 60000)}m ago`;
|
||||
if (ago < 86400000) return `${Math.floor(ago / 3600000)}h ago`;
|
||||
return new Date(ts).toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format number with thousands separator
|
||||
*/
|
||||
private formatNumber(num: number): string {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get gauge class based on percentage
|
||||
*/
|
||||
private getGaugeClass(rate: number): string {
|
||||
if (rate >= 80) return 'good';
|
||||
if (rate >= 50) return 'warning';
|
||||
return 'bad';
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter
|
||||
|
||||
Reference in New Issue
Block a user