fix(dashboard): fix chart crash, field name mismatches, and demo data injection
- overview.js: fix time-series chart crash (data is {series:[...]}, not array; field is 'time' not 'hour')
- monitoring.js: use fallback field names (total_tokens/tokens, duration_ms/duration) for WebSocket vs API compat
- monitoring.js: disable localhost demo data injection that mixed fake data with real
- websocket.js: fix duplicate condition and field name mismatches in dead-code handlers
- logging/mod.rs: add info! logs for successful DB insert and broadcast count for diagnostics
This commit is contained in:
@@ -2,7 +2,7 @@ use chrono::{DateTime, Utc};
|
||||
use serde::Serialize;
|
||||
use sqlx::SqlitePool;
|
||||
use tokio::sync::broadcast;
|
||||
use tracing::warn;
|
||||
use tracing::{info, warn};
|
||||
|
||||
use crate::errors::AppError;
|
||||
|
||||
@@ -42,14 +42,19 @@ impl RequestLogger {
|
||||
// Spawn async task to log without blocking response
|
||||
tokio::spawn(async move {
|
||||
// Broadcast to dashboard
|
||||
let _ = tx.send(serde_json::json!({
|
||||
let broadcast_result = tx.send(serde_json::json!({
|
||||
"type": "request",
|
||||
"channel": "requests",
|
||||
"payload": log
|
||||
}));
|
||||
match broadcast_result {
|
||||
Ok(receivers) => info!("Broadcast request log to {} dashboard listeners", receivers),
|
||||
Err(_) => {} // No active WebSocket clients — expected when dashboard isn't open
|
||||
}
|
||||
|
||||
if let Err(e) = Self::insert_log(&pool, log).await {
|
||||
warn!("Failed to log request to database: {}", e);
|
||||
match Self::insert_log(&pool, log).await {
|
||||
Ok(()) => info!("Request logged to database successfully"),
|
||||
Err(e) => warn!("Failed to log request to database: {}", e),
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -403,7 +403,7 @@ class MonitoringPage {
|
||||
<strong>${request.client_id || 'Unknown'}</strong> →
|
||||
${request.provider || 'Unknown'} (${request.model || 'Unknown'})
|
||||
<div class="stream-entry-details">
|
||||
${request.tokens || 0} tokens • ${request.duration || 0}ms
|
||||
${request.total_tokens || request.tokens || 0} tokens • ${request.duration_ms || request.duration || 0}ms
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -493,28 +493,7 @@ class MonitoringPage {
|
||||
}
|
||||
|
||||
startDemoUpdates() {
|
||||
// Simulate incoming requests for demo purposes
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
setInterval(() => {
|
||||
if (!this.isPaused && Math.random() > 0.3) { // 70% chance
|
||||
this.simulateRequest();
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Simulate logs
|
||||
setInterval(() => {
|
||||
if (!this.isPaused && Math.random() > 0.5) { // 50% chance
|
||||
this.simulateLog();
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Simulate metrics
|
||||
setInterval(() => {
|
||||
if (!this.isPaused) {
|
||||
this.simulateMetric();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
// Demo updates disabled — real data comes via WebSocket subscriptions
|
||||
}
|
||||
|
||||
simulateRequest() {
|
||||
|
||||
@@ -129,13 +129,14 @@ class OverviewPage {
|
||||
async loadRequestsChart() {
|
||||
try {
|
||||
const data = await window.api.get('/usage/time-series');
|
||||
const series = data.series || [];
|
||||
|
||||
const chartData = {
|
||||
labels: data.map(item => item.hour),
|
||||
labels: series.map(item => item.time),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Requests',
|
||||
data: data.map(item => item.requests),
|
||||
data: series.map(item => item.requests),
|
||||
color: '#3b82f6',
|
||||
fill: true
|
||||
}
|
||||
|
||||
@@ -88,8 +88,8 @@ class WebSocketManager {
|
||||
}
|
||||
|
||||
handleMessage(data) {
|
||||
// Handle global events
|
||||
if (data.type === 'request' || data.type === 'request') {
|
||||
// Handle request events
|
||||
if (data.type === 'request') {
|
||||
this.notify('requests', data.payload);
|
||||
}
|
||||
|
||||
@@ -286,9 +286,9 @@ class WebSocketManager {
|
||||
|
||||
// Update token counters
|
||||
const tokenCountElement = document.querySelector('[data-stat="total-tokens"]');
|
||||
if (tokenCountElement && request.tokens) {
|
||||
if (tokenCountElement && (request.total_tokens || request.tokens)) {
|
||||
const currentTokens = parseInt(tokenCountElement.textContent) || 0;
|
||||
tokenCountElement.textContent = currentTokens + request.tokens;
|
||||
tokenCountElement.textContent = currentTokens + (request.total_tokens || request.tokens);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -312,7 +312,7 @@ class WebSocketManager {
|
||||
<td>${request.client_id || 'Unknown'}</td>
|
||||
<td>${request.provider || 'Unknown'}</td>
|
||||
<td>${request.model || 'Unknown'}</td>
|
||||
<td>${request.tokens || 0}</td>
|
||||
<td>${(request.total_tokens || request.tokens || 0)}</td>
|
||||
<td>
|
||||
<span class="status-badge ${statusClass}">
|
||||
<i class="fas fa-${statusIcon}"></i>
|
||||
@@ -362,7 +362,7 @@ class WebSocketManager {
|
||||
<strong>${request.client_id || 'Unknown'}</strong> →
|
||||
${request.provider || 'Unknown'} (${request.model || 'Unknown'})
|
||||
<div class="stream-entry-details">
|
||||
${request.tokens || 0} tokens • ${request.duration || 0}ms
|
||||
${(request.total_tokens || request.tokens || 0)} tokens • ${(request.duration_ms || request.duration || 0)}ms
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user