Add handler queue metrics to status page

- Add GetHandlerStats() method to streamer to expose handler metrics
- Include queue length/capacity, processed/dropped counts, timing stats
- Update API to include handler_stats in response
- Add dynamic handler stats display to status page HTML
- Shows separate status box for each handler with all metrics
This commit is contained in:
2025-07-28 00:32:37 +02:00
parent 6593a7be76
commit 1a0622efaa
3 changed files with 145 additions and 17 deletions

View File

@@ -153,6 +153,10 @@
</div>
</div>
<div id="handler-stats-container" class="status-grid">
<!-- Handler stats will be dynamically added here -->
</div>
<script>
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
@@ -166,6 +170,45 @@
return num.toLocaleString();
}
function updateHandlerStats(handlerStats) {
const container = document.getElementById('handler-stats-container');
container.innerHTML = '';
handlerStats.forEach(handler => {
const card = document.createElement('div');
card.className = 'status-card';
// Extract handler name (remove package prefix)
const handlerName = handler.name.split('.').pop();
card.innerHTML = `
<h2>${handlerName}</h2>
<div class="metric">
<span class="metric-label">Queue</span>
<span class="metric-value">${handler.queue_length}/${handler.queue_capacity}</span>
</div>
<div class="metric">
<span class="metric-label">Processed</span>
<span class="metric-value">${formatNumber(handler.processed_count)}</span>
</div>
<div class="metric">
<span class="metric-label">Dropped</span>
<span class="metric-value ${handler.dropped_count > 0 ? 'disconnected' : ''}">${formatNumber(handler.dropped_count)}</span>
</div>
<div class="metric">
<span class="metric-label">Avg Time</span>
<span class="metric-value">${handler.avg_process_time_ms.toFixed(2)} ms</span>
</div>
<div class="metric">
<span class="metric-label">Min/Max Time</span>
<span class="metric-value">${handler.min_process_time_ms.toFixed(2)} / ${handler.max_process_time_ms.toFixed(2)} ms</span>
</div>
`;
container.appendChild(card);
});
}
function updateStatus() {
fetch('/api/v1/stats')
.then(response => response.json())
@@ -203,6 +246,9 @@
document.getElementById('ipv4_updates_per_sec').textContent = data.ipv4_updates_per_sec.toFixed(1);
document.getElementById('ipv6_updates_per_sec').textContent = data.ipv6_updates_per_sec.toFixed(1);
// Update handler stats
updateHandlerStats(data.handler_stats || []);
// Clear any errors
document.getElementById('error').style.display = 'none';
})