`;
}).join('');
}
setupEventListeners() {
// Period buttons for requests chart
const periodButtons = document.querySelectorAll('.chart-control-btn[data-period]');
periodButtons.forEach(button => {
button.addEventListener('click', () => {
// Update active state
periodButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
// Update chart based on period
this.updateRequestsChart(button.dataset.period);
});
});
// Refresh button for recent requests
const refreshBtn = document.querySelector('#recent-requests .card-action-btn');
if (refreshBtn) {
refreshBtn.addEventListener('click', () => {
this.loadRecentRequests();
if (window.authManager) {
window.authManager.showToast('Recent requests refreshed', 'success');
}
});
}
}
setupWebSocketSubscriptions() {
if (!window.wsManager) return;
// Subscribe to request updates
window.wsManager.subscribe('requests', (request) => {
this.handleNewRequest(request);
});
// Subscribe to metric updates
window.wsManager.subscribe('metrics', (metric) => {
this.handleNewMetric(metric);
});
}
handleNewRequest(request) {
// Update total requests counter
if (this.stats) {
this.stats.totalRequests++;
this.stats.todayRequests++;
// Update tokens if available
if (request.tokens) {
this.stats.totalTokens += request.tokens;
}
// Re-render stats
this.renderStats();
}
// Add to recent requests table
this.addToRecentRequests(request);
}
addToRecentRequests(request) {
const tableBody = document.querySelector('#recent-requests tbody');
if (!tableBody) return;
const time = new Date(request.timestamp || Date.now()).toLocaleTimeString();
const statusClass = request.status === 'success' ? 'success' :
request.status === 'error' ? 'danger' : 'warning';
const statusIcon = request.status === 'success' ? 'check-circle' :
request.status === 'error' ? 'exclamation-circle' : 'exclamation-triangle';
const row = document.createElement('tr');
row.innerHTML = `
${time}
${request.client_id || 'Unknown'}
${request.provider || 'Unknown'}
${request.model || 'Unknown'}
${request.tokens || 0}
${request.status || 'unknown'}
`;
// Add to top of table
tableBody.insertBefore(row, tableBody.firstChild);
// Limit to 50 rows
const rows = tableBody.querySelectorAll('tr');
if (rows.length > 50) {
tableBody.removeChild(rows[rows.length - 1]);
}
}
handleNewMetric(metric) {
// Update charts with new metric data
if (metric.type === 'requests' && this.charts.requests) {
this.updateRequestsChartData(metric);
}
// Update system health if needed
if (metric.type === 'system_health') {
this.updateSystemHealth(metric);
}
}
updateRequestsChart(period) {
// In a real app, this would fetch new data based on period
// For now, just update with demo data
let hours = 24;
if (period === '7d') hours = 24 * 7;
if (period === '30d') hours = 24 * 30;
const data = window.chartManager.generateDemoTimeSeries(hours, 1);
data.datasets[0].label = 'Requests';
data.datasets[0].fill = true;
window.chartManager.updateChartData('requests-chart', data);
}
updateRequestsChartData(metric) {
// Add new data point to the chart
if (this.charts.requests && metric.value !== undefined) {
window.chartManager.addDataPoint('requests-chart', metric.value);
}
}
updateSystemHealth(metric) {
// Update system health indicators
const container = document.getElementById('system-health');
if (!container || !metric.data) return;
// This would update specific health indicators based on metric data
// Implementation depends on metric structure
}
showError(message) {
const container = document.getElementById('overview-stats');
if (container) {
container.innerHTML = `
${message}
`;
}
}
refresh() {
this.loadStats();
this.loadRecentRequests();
// Refresh charts
if (this.charts.requests) {
this.charts.requests.update();
}
if (this.charts.providers) {
this.charts.providers.update();
}
}
}
// Initialize overview page when needed
window.initOverview = async () => {
window.overviewPage = new OverviewPage();
};
// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = OverviewPage;
}