hobokenchicken
0526304398
This commit adds a proper flexbox layout to the '.card-actions' CSS class. Previously, action buttons (like Export and Refresh on the Analytics page) were bunching up because they lacked a flex container with appropriate gap and wrapping rules. It also updates the '.card-header' to wrap gracefully on smaller screens.
552 lines
23 KiB
JavaScript
552 lines
23 KiB
JavaScript
// Main Dashboard Controller
|
|
|
|
class Dashboard {
|
|
constructor() {
|
|
this.currentPage = 'overview';
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
if (!window.authManager || !window.authManager.isAuthenticated) {
|
|
return;
|
|
}
|
|
|
|
this.setupNavigation();
|
|
this.setupSidebar();
|
|
this.setupRefresh();
|
|
this.updateTime();
|
|
this.applyRoleGating();
|
|
|
|
// Load initial page from hash or default to overview
|
|
const initialPage = window.location.hash.substring(1) || 'overview';
|
|
this.loadPage(initialPage);
|
|
|
|
setInterval(() => this.updateTime(), 1000);
|
|
}
|
|
|
|
/** Hide admin-only menu items and mutation controls for non-admin users */
|
|
applyRoleGating() {
|
|
const user = window.authManager && window.authManager.user;
|
|
const isAdmin = user && user.role === 'admin';
|
|
|
|
// Toggle visibility of admin-only sidebar items
|
|
document.querySelectorAll('.menu-item.admin-only').forEach(item => {
|
|
item.style.display = isAdmin ? '' : 'none';
|
|
});
|
|
|
|
// Store role for use by page scripts
|
|
window._userRole = isAdmin ? 'admin' : 'viewer';
|
|
}
|
|
|
|
setupNavigation() {
|
|
const menuItems = document.querySelectorAll('.menu-item');
|
|
menuItems.forEach(item => {
|
|
item.onclick = (e) => {
|
|
e.preventDefault();
|
|
const page = item.getAttribute('data-page') || item.getAttribute('href').substring(1);
|
|
this.loadPage(page);
|
|
};
|
|
});
|
|
|
|
window.onhashchange = () => {
|
|
const page = window.location.hash.substring(1) || 'overview';
|
|
if (page !== this.currentPage) {
|
|
this.loadPage(page);
|
|
}
|
|
};
|
|
}
|
|
|
|
setupSidebar() {
|
|
const toggleBtn = document.getElementById('sidebar-toggle');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const logoutBtn = document.getElementById('logout-btn');
|
|
|
|
if (toggleBtn && sidebar) {
|
|
toggleBtn.onclick = () => {
|
|
sidebar.classList.toggle('collapsed');
|
|
localStorage.setItem('sidebar_collapsed', sidebar.classList.contains('collapsed'));
|
|
};
|
|
|
|
if (localStorage.getItem('sidebar_collapsed') === 'true') {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
}
|
|
|
|
if (logoutBtn) {
|
|
logoutBtn.onclick = () => {
|
|
window.authManager.logout();
|
|
};
|
|
}
|
|
}
|
|
|
|
setupRefresh() {
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
if (refreshBtn) {
|
|
refreshBtn.onclick = () => this.refreshCurrentPage();
|
|
}
|
|
}
|
|
|
|
updateTime() {
|
|
const timeElement = document.getElementById('current-time');
|
|
if (timeElement) {
|
|
timeElement.textContent = luxon.DateTime.now().toFormat('HH:mm:ss');
|
|
}
|
|
}
|
|
|
|
async loadPage(page) {
|
|
const cm = window.chartManager;
|
|
if (cm) {
|
|
cm.destroyAllCharts();
|
|
}
|
|
|
|
this.currentPage = page;
|
|
window.location.hash = page;
|
|
window.scrollTo(0, 0);
|
|
|
|
// Update menu active state
|
|
document.querySelectorAll('.menu-item').forEach(item => {
|
|
item.classList.toggle('active', (item.dataset.page || item.getAttribute('href').substring(1)) === page);
|
|
});
|
|
|
|
const titleElement = document.getElementById('page-title');
|
|
const titles = {
|
|
'overview': 'Overview',
|
|
'analytics': 'Analytics',
|
|
'costs': 'Costs',
|
|
'clients': 'Clients',
|
|
'providers': 'Providers',
|
|
'monitoring': 'Monitoring',
|
|
'settings': 'Settings',
|
|
'logs': 'Logs',
|
|
'models': 'Models',
|
|
'users': 'User Management'
|
|
};
|
|
if (titleElement) titleElement.textContent = titles[page] || 'Dashboard';
|
|
|
|
this.showLoading();
|
|
|
|
try {
|
|
const content = document.getElementById('page-content');
|
|
if (content) {
|
|
content.innerHTML = await this.getPageTemplate(page);
|
|
await this.initializePageScript(page);
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error loading page ${page}:`, error);
|
|
this.showError(`Failed to load ${page}`);
|
|
} finally {
|
|
this.hideLoading();
|
|
}
|
|
}
|
|
|
|
showLoading() {
|
|
const content = document.getElementById('page-content');
|
|
if (content) content.classList.add('loading');
|
|
}
|
|
|
|
hideLoading() {
|
|
const content = document.getElementById('page-content');
|
|
if (content) content.classList.remove('loading');
|
|
}
|
|
|
|
async getPageTemplate(page) {
|
|
// Return templates directly based on the page name
|
|
switch (page) {
|
|
case 'overview': return this.getOverviewTemplate();
|
|
case 'clients': return this.getClientsTemplate();
|
|
case 'providers': return this.getProvidersTemplate();
|
|
case 'models': return this.getModelsTemplate();
|
|
case 'logs': return this.getLogsTemplate();
|
|
case 'monitoring': return this.getMonitoringTemplate();
|
|
case 'settings': return '<div class="loading-placeholder">Loading settings...</div>';
|
|
case 'analytics': return this.getAnalyticsTemplate();
|
|
case 'costs': return this.getCostsTemplate();
|
|
case 'users': return this.getUsersTemplate();
|
|
default: return '<div class="empty-state"><h3>Page not found</h3></div>';
|
|
}
|
|
}
|
|
|
|
async initializePageScript(page) {
|
|
const initFn = `init${page.charAt(0).toUpperCase() + page.slice(1)}`;
|
|
if (typeof window[initFn] === 'function') {
|
|
await window[initFn]();
|
|
}
|
|
}
|
|
|
|
refreshCurrentPage() {
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
if (refreshBtn) {
|
|
refreshBtn.classList.add('fa-spin');
|
|
setTimeout(() => refreshBtn.classList.remove('fa-spin'), 1000);
|
|
}
|
|
this.loadPage(this.currentPage);
|
|
}
|
|
|
|
showError(message) {
|
|
const content = document.getElementById('page-content');
|
|
if (content) {
|
|
content.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Error</h3>
|
|
<p>${message}</p>
|
|
<button class="btn btn-primary" onclick="window.dashboard.loadPage('overview')">Return to Overview</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Templates
|
|
getOverviewTemplate() {
|
|
return `
|
|
<div class="stats-grid" id="overview-stats"></div>
|
|
<div class="grid-2">
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Request Volume (Last 24h)</h3>
|
|
<canvas id="requests-chart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Provider Share</h3>
|
|
<canvas id="providers-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">System Health</h3>
|
|
</div>
|
|
<div class="card-body" id="system-health"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Recent Activity</h3>
|
|
<button class="card-action-btn" onclick="window.overviewPage.loadRecentRequests()"><i class="fas fa-redo"></i></button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="recent-requests">
|
|
<thead>
|
|
<tr><th>Time</th><th>Client</th><th>Provider</th><th>Model</th><th>Tokens</th><th>Status</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getClientsTemplate() {
|
|
const isAdmin = window._userRole === 'admin';
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">API Clients</h3>
|
|
<p class="card-subtitle">Manage tokens and access</p>
|
|
</div>
|
|
${isAdmin ? `<button class="btn btn-primary" id="add-client">
|
|
<i class="fas fa-plus"></i> Create Client
|
|
</button>` : ''}
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="clients-table">
|
|
<thead>
|
|
<tr><th>ID</th><th>Name</th><th>Token</th><th>Created</th><th>Last Used</th><th>Requests</th><th>Status</th><th>Actions</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Usage by Client</h3>
|
|
<canvas id="client-usage-chart"></canvas>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getProvidersTemplate() {
|
|
return `
|
|
<div class="stats-grid" id="provider-stats"></div>
|
|
<div id="providers-list"></div>
|
|
<div class="form-actions" style="margin-top: 2rem;">
|
|
<button class="btn btn-secondary" id="test-all-providers">
|
|
<i class="fas fa-vial"></i> Test All Connections
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getModelsTemplate() {
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Model Registry</h3>
|
|
<p class="card-subtitle">Manage model availability and custom pricing</p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<select id="model-provider-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
|
|
<option value="">All Providers</option>
|
|
<option value="openai">OpenAI</option>
|
|
<option value="anthropic">Anthropic / Gemini</option>
|
|
<option value="google">Google</option>
|
|
<option value="deepseek">DeepSeek</option>
|
|
<option value="xai">xAI</option>
|
|
<option value="meta">Meta</option>
|
|
<option value="cohere">Cohere</option>
|
|
<option value="mistral">Mistral</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
<select id="model-modality-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
|
|
<option value="">All Modalities</option>
|
|
<option value="text">Text</option>
|
|
<option value="image">Vision/Image</option>
|
|
<option value="audio">Audio</option>
|
|
</select>
|
|
<select id="model-capability-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
|
|
<option value="">All Capabilities</option>
|
|
<option value="tool_call">Tool Calling</option>
|
|
<option value="reasoning">Reasoning</option>
|
|
</select>
|
|
<input type="text" id="model-search" placeholder="Search models..." class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: 200px;">
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="models-table">
|
|
<thead>
|
|
<tr><th>ID</th><th>Display Name</th><th>Provider</th><th>Pricing (In/Out)</th><th>Context</th><th>Status</th><th>Actions</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getLogsTemplate() {
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Detailed Request Logs</h3>
|
|
<div class="card-actions">
|
|
<select id="log-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px;">
|
|
<option value="all">All Status</option>
|
|
<option value="success">Success</option>
|
|
<option value="error">Errors</option>
|
|
</select>
|
|
<input type="text" id="log-search" placeholder="Search logs..." class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: 200px;">
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="logs-table">
|
|
<thead>
|
|
<tr><th>Timestamp</th><th>Status</th><th>Context</th><th>Request Details</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getAnalyticsTemplate() {
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Usage Analytics</h3>
|
|
<p class="card-subtitle">Request volume and token distribution</p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<div class="period-selector" id="analytics-period">
|
|
<button class="btn btn-secondary btn-sm active" data-period="24h">24h</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="7d">7 Days</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="30d">30 Days</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="all">All</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="custom">
|
|
<i class="fas fa-calendar"></i> Custom
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-secondary" id="export-data">
|
|
<i class="fas fa-download"></i> Export CSV
|
|
</button>
|
|
<button class="btn btn-primary" id="refresh-analytics">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="analytics-custom-range" style="display:none; padding: 0 1.5rem 1rem; gap: 0.5rem; align-items: center;">
|
|
<label style="font-size:0.85rem; color:var(--fg4);">From</label>
|
|
<input type="date" id="analytics-from" class="input-sm">
|
|
<label style="font-size:0.85rem; color:var(--fg4);">To</label>
|
|
<input type="date" id="analytics-to" class="input-sm">
|
|
<button class="btn btn-primary btn-sm" id="analytics-apply-custom">Apply</button>
|
|
</div>
|
|
<div class="chart-container" style="height: 400px;">
|
|
<canvas id="analytics-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Volume by Client</h3>
|
|
<canvas id="clients-chart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Model Distribution</h3>
|
|
<canvas id="models-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Historical Usage Log</h3>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="usage-table">
|
|
<thead>
|
|
<tr><th>Date</th><th>Client</th><th>Provider</th><th>Model</th><th>Requests</th><th>Tokens</th><th>Cache Read</th><th>Cache Write</th><th>Cost</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getCostsTemplate() {
|
|
return `
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Cost Overview</h3>
|
|
<p class="card-subtitle">Spending and pricing across providers</p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<div class="period-selector" id="costs-period">
|
|
<button class="btn btn-secondary btn-sm" data-period="today">Today</button>
|
|
<button class="btn btn-secondary btn-sm active" data-period="7d">7 Days</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="30d">30 Days</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="all">All Time</button>
|
|
<button class="btn btn-secondary btn-sm" data-period="custom">
|
|
<i class="fas fa-calendar"></i> Custom
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="costs-custom-range" style="display:none; padding: 0 1.5rem 1rem; gap: 0.5rem; align-items: center;">
|
|
<label style="font-size:0.85rem; color:var(--fg4);">From</label>
|
|
<input type="date" id="costs-from" class="input-sm">
|
|
<label style="font-size:0.85rem; color:var(--fg4);">To</label>
|
|
<input type="date" id="costs-to" class="input-sm">
|
|
<button class="btn btn-primary btn-sm" id="costs-apply-custom">Apply</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid" id="cost-stats"></div>
|
|
|
|
<div class="grid-2">
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Provider Spending</h3>
|
|
<canvas id="costs-chart"></canvas>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Budget Tracking</h3>
|
|
</div>
|
|
<div class="card-body" id="budget-progress">
|
|
<!-- Budget progress bars -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Model Pricing (Used Models)</h3>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="pricing-table">
|
|
<thead>
|
|
<tr><th>Provider</th><th>Model</th><th>Input Cost</th><th>Output Cost</th><th>Cache Read</th><th>Cache Write</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getMonitoringTemplate() {
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Real-time Stream</h3>
|
|
<p class="card-subtitle">Live request activity and system metrics</p>
|
|
</div>
|
|
<button class="btn btn-secondary" id="pause-monitoring">
|
|
<i class="fas fa-pause"></i> Pause Stream
|
|
</button>
|
|
</div>
|
|
<div class="monitoring-layout">
|
|
<div>
|
|
<h4>Incoming Requests</h4>
|
|
<div id="request-stream" class="monitoring-stream"></div>
|
|
</div>
|
|
<div>
|
|
<h4>System Performance</h4>
|
|
<div id="system-metrics"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid-3 monitoring-charts">
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Latency (ms)</h3>
|
|
<canvas id="response-time-chart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Error Rate (%)</h3>
|
|
<canvas id="error-rate-chart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3 class="card-title">Rate Limiting</h3>
|
|
<canvas id="rate-limit-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getUsersTemplate() {
|
|
return `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Dashboard Users</h3>
|
|
<p class="card-subtitle">Manage accounts and roles</p>
|
|
</div>
|
|
<button class="btn btn-primary" id="add-user">
|
|
<i class="fas fa-user-plus"></i> Create User
|
|
</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table" id="users-table">
|
|
<thead>
|
|
<tr><th>Username</th><th>Display Name</th><th>Role</th><th>Created</th><th>Status</th><th>Actions</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.initDashboard = () => {
|
|
window.dashboard = new Dashboard();
|
|
};
|
|
if (window.authManager && window.authManager.isAuthenticated) {
|
|
window.initDashboard();
|
|
}
|
|
});
|