perf(webui): refactor dashboard modules and optimize API performance
This commit is contained in:
Wha1eChai
@@ -10,7 +10,18 @@ window.Components.claudeConfig = () => ({
|
||||
loading: false,
|
||||
|
||||
init() {
|
||||
this.fetchConfig();
|
||||
// Only fetch config if this is the active sub-tab
|
||||
if (this.activeTab === 'claude') {
|
||||
this.fetchConfig();
|
||||
}
|
||||
|
||||
// Watch local activeTab (from parent settings scope, skip initial trigger)
|
||||
this.$watch('activeTab', (tab, oldTab) => {
|
||||
if (tab === 'claude' && oldTab !== undefined) {
|
||||
this.fetchConfig();
|
||||
}
|
||||
});
|
||||
|
||||
this.$watch('$store.data.models', (val) => {
|
||||
this.models = val || [];
|
||||
});
|
||||
|
||||
@@ -1,53 +1,41 @@
|
||||
/**
|
||||
* Dashboard Component
|
||||
* Dashboard Component (Refactored)
|
||||
* Orchestrates stats, charts, and filters modules
|
||||
* Registers itself to window.Components for Alpine.js to consume
|
||||
*/
|
||||
window.Components = window.Components || {};
|
||||
|
||||
// Helper to get CSS variable values (alias to window.utils.getThemeColor)
|
||||
const getThemeColor = (name) => window.utils.getThemeColor(name);
|
||||
|
||||
// Color palette for different families and models
|
||||
const FAMILY_COLORS = {
|
||||
get claude() { return getThemeColor('--color-neon-purple'); },
|
||||
get gemini() { return getThemeColor('--color-neon-green'); },
|
||||
get other() { return getThemeColor('--color-neon-cyan'); }
|
||||
};
|
||||
|
||||
const MODEL_COLORS = Array.from({ length: 16 }, (_, i) => getThemeColor(`--color-chart-${i + 1}`));
|
||||
|
||||
window.Components.dashboard = () => ({
|
||||
// Core state
|
||||
stats: { total: 0, active: 0, limited: 0, overallHealth: 0, hasTrendData: false },
|
||||
charts: { quotaDistribution: null, usageTrend: null },
|
||||
|
||||
// Usage stats
|
||||
usageStats: { total: 0, today: 0, thisHour: 0 },
|
||||
historyData: {},
|
||||
|
||||
// Hierarchical model tree: { claude: ['opus-4-5', 'sonnet-4-5'], gemini: ['3-flash'] }
|
||||
modelTree: {},
|
||||
families: [], // ['claude', 'gemini']
|
||||
families: [],
|
||||
|
||||
// Display mode: 'family' or 'model'
|
||||
displayMode: 'model',
|
||||
// Filter state (from module)
|
||||
...window.DashboardFilters.getInitialState(),
|
||||
|
||||
// Selection state
|
||||
selectedFamilies: [],
|
||||
selectedModels: {}, // { claude: ['opus-4-5'], gemini: ['3-flash'] }
|
||||
|
||||
showModelFilter: false,
|
||||
// Debounced chart update to prevent rapid successive updates
|
||||
_debouncedUpdateTrendChart: null,
|
||||
|
||||
init() {
|
||||
// Load saved preferences from localStorage
|
||||
this.loadPreferences();
|
||||
// Create debounced version of updateTrendChart (300ms delay for stability)
|
||||
this._debouncedUpdateTrendChart = window.utils.debounce(() => {
|
||||
window.DashboardCharts.updateTrendChart(this);
|
||||
}, 300);
|
||||
|
||||
// Update stats when dashboard becomes active
|
||||
this.$watch('$store.global.activeTab', (val) => {
|
||||
if (val === 'dashboard') {
|
||||
// Load saved preferences from localStorage
|
||||
window.DashboardFilters.loadPreferences(this);
|
||||
|
||||
// Update stats when dashboard becomes active (skip initial trigger)
|
||||
this.$watch('$store.global.activeTab', (val, oldVal) => {
|
||||
if (val === 'dashboard' && oldVal !== undefined) {
|
||||
this.$nextTick(() => {
|
||||
this.updateStats();
|
||||
this.updateCharts();
|
||||
this.fetchHistory();
|
||||
this.updateTrendChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -60,65 +48,30 @@ window.Components.dashboard = () => ({
|
||||
}
|
||||
});
|
||||
|
||||
// Watch for history updates from data-store (automatically loaded with account data)
|
||||
this.$watch('$store.data.usageHistory', (newHistory) => {
|
||||
if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) {
|
||||
this.historyData = newHistory;
|
||||
this.processHistory(newHistory);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial update if already on dashboard
|
||||
if (this.$store.global.activeTab === 'dashboard') {
|
||||
this.$nextTick(() => {
|
||||
this.updateStats();
|
||||
this.updateCharts();
|
||||
this.fetchHistory();
|
||||
|
||||
// Load history if already in store
|
||||
const history = Alpine.store('data').usageHistory;
|
||||
if (history && Object.keys(history).length > 0) {
|
||||
this.historyData = history;
|
||||
this.processHistory(history);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh history every 5 minutes
|
||||
setInterval(() => {
|
||||
if (this.$store.global.activeTab === 'dashboard') {
|
||||
this.fetchHistory();
|
||||
}
|
||||
}, 300000);
|
||||
},
|
||||
|
||||
loadPreferences() {
|
||||
try {
|
||||
const saved = localStorage.getItem('dashboard_chart_prefs');
|
||||
if (saved) {
|
||||
const prefs = JSON.parse(saved);
|
||||
this.displayMode = prefs.displayMode || 'model';
|
||||
this.selectedFamilies = prefs.selectedFamilies || [];
|
||||
this.selectedModels = prefs.selectedModels || {};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load dashboard preferences:', e);
|
||||
}
|
||||
},
|
||||
|
||||
savePreferences() {
|
||||
try {
|
||||
localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
|
||||
displayMode: this.displayMode,
|
||||
selectedFamilies: this.selectedFamilies,
|
||||
selectedModels: this.selectedModels
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error('Failed to save dashboard preferences:', e);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchHistory() {
|
||||
try {
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const { response, newPassword } = await window.utils.request('/api/stats/history', {}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (response.ok) {
|
||||
const history = await response.json();
|
||||
this.historyData = history;
|
||||
this.processHistory(history);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch usage history:', error);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
},
|
||||
|
||||
processHistory(history) {
|
||||
@@ -150,7 +103,6 @@ window.Components.dashboard = () => ({
|
||||
}
|
||||
});
|
||||
}
|
||||
// Skip old flat format keys (claude, gemini as numbers)
|
||||
});
|
||||
|
||||
// Calculate totals
|
||||
@@ -180,458 +132,80 @@ window.Components.dashboard = () => ({
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
autoSelectNew() {
|
||||
// If no preferences saved, select all
|
||||
if (this.selectedFamilies.length === 0 && Object.keys(this.selectedModels).length === 0) {
|
||||
this.selectedFamilies = [...this.families];
|
||||
this.families.forEach(family => {
|
||||
this.selectedModels[family] = [...(this.modelTree[family] || [])];
|
||||
});
|
||||
this.savePreferences();
|
||||
return;
|
||||
}
|
||||
|
||||
// Add new families/models that appeared
|
||||
this.families.forEach(family => {
|
||||
if (!this.selectedFamilies.includes(family)) {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
(this.modelTree[family] || []).forEach(model => {
|
||||
if (!this.selectedModels[family].includes(model)) {
|
||||
this.selectedModels[family].push(model);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Delegation methods for stats
|
||||
updateStats() {
|
||||
window.DashboardStats.updateStats(this);
|
||||
},
|
||||
|
||||
autoSelectTopN(n = 5) {
|
||||
// Calculate usage for each model over past 24 hours
|
||||
const usage = {};
|
||||
const now = Date.now();
|
||||
const dayAgo = now - 24 * 60 * 60 * 1000;
|
||||
|
||||
Object.entries(this.historyData).forEach(([iso, hourData]) => {
|
||||
const timestamp = new Date(iso).getTime();
|
||||
if (timestamp < dayAgo) return;
|
||||
|
||||
Object.entries(hourData).forEach(([family, familyData]) => {
|
||||
if (typeof familyData === 'object' && family !== '_total') {
|
||||
Object.entries(familyData).forEach(([model, count]) => {
|
||||
if (model !== '_subtotal') {
|
||||
const key = `${family}:${model}`;
|
||||
usage[key] = (usage[key] || 0) + count;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sort by usage and take top N
|
||||
const sorted = Object.entries(usage)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, n);
|
||||
|
||||
// Clear current selection
|
||||
this.selectedFamilies = [];
|
||||
this.selectedModels = {};
|
||||
|
||||
// Select top N models
|
||||
sorted.forEach(([key]) => {
|
||||
const [family, model] = key.split(':');
|
||||
if (!this.selectedFamilies.includes(family)) {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
this.selectedModels[family].push(model);
|
||||
});
|
||||
|
||||
this.savePreferences();
|
||||
this.refreshChart();
|
||||
},
|
||||
|
||||
// Toggle display mode between family and model level
|
||||
setDisplayMode(mode) {
|
||||
this.displayMode = mode;
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Toggle family selection
|
||||
toggleFamily(family) {
|
||||
const index = this.selectedFamilies.indexOf(family);
|
||||
if (index > -1) {
|
||||
this.selectedFamilies.splice(index, 1);
|
||||
} else {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Toggle model selection within a family
|
||||
toggleModel(family, model) {
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
const index = this.selectedModels[family].indexOf(model);
|
||||
if (index > -1) {
|
||||
this.selectedModels[family].splice(index, 1);
|
||||
} else {
|
||||
this.selectedModels[family].push(model);
|
||||
}
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Check if family is selected
|
||||
isFamilySelected(family) {
|
||||
return this.selectedFamilies.includes(family);
|
||||
},
|
||||
|
||||
// Check if model is selected
|
||||
isModelSelected(family, model) {
|
||||
return this.selectedModels[family]?.includes(model) || false;
|
||||
},
|
||||
|
||||
// Select all families and models
|
||||
selectAll() {
|
||||
this.selectedFamilies = [...this.families];
|
||||
this.families.forEach(family => {
|
||||
this.selectedModels[family] = [...(this.modelTree[family] || [])];
|
||||
});
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Deselect all
|
||||
deselectAll() {
|
||||
this.selectedFamilies = [];
|
||||
this.selectedModels = {};
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Get color for family
|
||||
getFamilyColor(family) {
|
||||
return FAMILY_COLORS[family] || FAMILY_COLORS.other;
|
||||
},
|
||||
|
||||
// Get color for model (with index for variation within family)
|
||||
getModelColor(family, modelIndex) {
|
||||
const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : 8);
|
||||
return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
|
||||
},
|
||||
|
||||
// Get count of selected items for display
|
||||
getSelectedCount() {
|
||||
if (this.displayMode === 'family') {
|
||||
return `${this.selectedFamilies.length}/${this.families.length}`;
|
||||
}
|
||||
let selected = 0, total = 0;
|
||||
this.families.forEach(family => {
|
||||
const models = this.modelTree[family] || [];
|
||||
total += models.length;
|
||||
selected += (this.selectedModels[family] || []).length;
|
||||
});
|
||||
return `${selected}/${total}`;
|
||||
// Delegation methods for charts
|
||||
updateCharts() {
|
||||
window.DashboardCharts.updateCharts(this);
|
||||
},
|
||||
|
||||
updateTrendChart() {
|
||||
const ctx = document.getElementById('usageTrendChart');
|
||||
if (!ctx || typeof Chart === 'undefined') return;
|
||||
|
||||
if (this.charts.usageTrend) {
|
||||
this.charts.usageTrend.destroy();
|
||||
}
|
||||
|
||||
const history = this.historyData;
|
||||
const labels = [];
|
||||
const datasets = [];
|
||||
|
||||
if (this.displayMode === 'family') {
|
||||
// Aggregate by family
|
||||
const dataByFamily = {};
|
||||
this.selectedFamilies.forEach(family => {
|
||||
dataByFamily[family] = [];
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
||||
|
||||
this.selectedFamilies.forEach(family => {
|
||||
const familyData = hourData[family];
|
||||
const count = familyData?._subtotal || 0;
|
||||
dataByFamily[family].push(count);
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for families
|
||||
this.selectedFamilies.forEach(family => {
|
||||
const color = this.getFamilyColor(family);
|
||||
const familyKey = 'family' + family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const label = Alpine.store('global').t(familyKey);
|
||||
datasets.push(this.createDataset(
|
||||
label,
|
||||
dataByFamily[family],
|
||||
color,
|
||||
ctx
|
||||
));
|
||||
});
|
||||
// Use debounced version to prevent rapid successive updates
|
||||
if (this._debouncedUpdateTrendChart) {
|
||||
this._debouncedUpdateTrendChart();
|
||||
} else {
|
||||
// Show individual models
|
||||
const dataByModel = {};
|
||||
|
||||
// Initialize data arrays
|
||||
this.families.forEach(family => {
|
||||
(this.selectedModels[family] || []).forEach(model => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key] = [];
|
||||
});
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
||||
|
||||
this.families.forEach(family => {
|
||||
const familyData = hourData[family] || {};
|
||||
(this.selectedModels[family] || []).forEach(model => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key].push(familyData[model] || 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for models
|
||||
this.families.forEach(family => {
|
||||
(this.selectedModels[family] || []).forEach((model, modelIndex) => {
|
||||
const key = `${family}:${model}`;
|
||||
const color = this.getModelColor(family, modelIndex);
|
||||
datasets.push(this.createDataset(model, dataByModel[key], color, ctx));
|
||||
});
|
||||
});
|
||||
// Fallback if debounced version not initialized
|
||||
window.DashboardCharts.updateTrendChart(this);
|
||||
}
|
||||
|
||||
this.charts.usageTrend = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: { labels, datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: getThemeColor('--color-space-950') || 'rgba(24, 24, 27, 0.9)',
|
||||
titleColor: getThemeColor('--color-text-main'),
|
||||
bodyColor: getThemeColor('--color-text-bright'),
|
||||
borderColor: getThemeColor('--color-space-border'),
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
return context.dataset.label + ': ' + context.parsed.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: { display: false },
|
||||
ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
beginAtZero: true,
|
||||
grid: { display: true, color: getThemeColor('--color-space-border') + '1a' || 'rgba(255,255,255,0.05)' },
|
||||
ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createDataset(label, data, color, ctx) {
|
||||
const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 200);
|
||||
// Reduced opacity from 0.3 to 0.12 for less visual noise
|
||||
gradient.addColorStop(0, this.hexToRgba(color, 0.12));
|
||||
gradient.addColorStop(0.6, this.hexToRgba(color, 0.05));
|
||||
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
||||
|
||||
return {
|
||||
label,
|
||||
data,
|
||||
borderColor: color,
|
||||
backgroundColor: gradient,
|
||||
borderWidth: 2.5, // Slightly thicker line for better visibility
|
||||
tension: 0.35, // Smoother curves
|
||||
fill: true,
|
||||
pointRadius: 2.5,
|
||||
pointHoverRadius: 6,
|
||||
pointBackgroundColor: color,
|
||||
pointBorderColor: 'rgba(9, 9, 11, 0.8)',
|
||||
pointBorderWidth: 1.5
|
||||
};
|
||||
// Delegation methods for filters
|
||||
loadPreferences() {
|
||||
window.DashboardFilters.loadPreferences(this);
|
||||
},
|
||||
|
||||
hexToRgba(hex, alpha) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
|
||||
}
|
||||
return hex;
|
||||
savePreferences() {
|
||||
window.DashboardFilters.savePreferences(this);
|
||||
},
|
||||
|
||||
updateStats() {
|
||||
const accounts = Alpine.store('data').accounts;
|
||||
let active = 0, limited = 0;
|
||||
|
||||
const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
|
||||
|
||||
// Only count enabled accounts in statistics
|
||||
const enabledAccounts = accounts.filter(acc => acc.enabled !== false);
|
||||
|
||||
enabledAccounts.forEach(acc => {
|
||||
if (acc.status === 'ok') {
|
||||
const limits = Object.entries(acc.limits || {});
|
||||
let hasActiveCore = limits.some(([id, l]) => l && l.remainingFraction > 0.05 && isCore(id));
|
||||
|
||||
if (!hasActiveCore) {
|
||||
const hasAnyCore = limits.some(([id]) => isCore(id));
|
||||
if (!hasAnyCore) {
|
||||
hasActiveCore = limits.some(([_, l]) => l && l.remainingFraction > 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
if (hasActiveCore) active++; else limited++;
|
||||
} else {
|
||||
limited++;
|
||||
}
|
||||
});
|
||||
|
||||
// TOTAL shows only enabled accounts
|
||||
// Disabled accounts are excluded from all statistics
|
||||
this.stats.total = enabledAccounts.length;
|
||||
this.stats.active = active;
|
||||
this.stats.limited = limited;
|
||||
setDisplayMode(mode) {
|
||||
window.DashboardFilters.setDisplayMode(this, mode);
|
||||
},
|
||||
|
||||
updateCharts() {
|
||||
const ctx = document.getElementById('quotaChart');
|
||||
if (!ctx || typeof Chart === 'undefined') return;
|
||||
toggleFamily(family) {
|
||||
window.DashboardFilters.toggleFamily(this, family);
|
||||
},
|
||||
|
||||
if (this.charts.quotaDistribution) {
|
||||
this.charts.quotaDistribution.destroy();
|
||||
}
|
||||
toggleModel(family, model) {
|
||||
window.DashboardFilters.toggleModel(this, family, model);
|
||||
},
|
||||
|
||||
// Use UNFILTERED data for global health chart
|
||||
const rows = Alpine.store('data').getUnfilteredQuotaData();
|
||||
isFamilySelected(family) {
|
||||
return window.DashboardFilters.isFamilySelected(this, family);
|
||||
},
|
||||
|
||||
// Dynamic family aggregation (supports any model family)
|
||||
const familyStats = {};
|
||||
rows.forEach(row => {
|
||||
if (!familyStats[row.family]) {
|
||||
familyStats[row.family] = { used: 0, total: 0 };
|
||||
}
|
||||
row.quotaInfo.forEach(info => {
|
||||
familyStats[row.family].used += info.pct;
|
||||
familyStats[row.family].total += 100;
|
||||
});
|
||||
});
|
||||
isModelSelected(family, model) {
|
||||
return window.DashboardFilters.isModelSelected(this, family, model);
|
||||
},
|
||||
|
||||
// Calculate global health
|
||||
const globalTotal = Object.values(familyStats).reduce((sum, f) => sum + f.total, 0);
|
||||
const globalUsed = Object.values(familyStats).reduce((sum, f) => sum + f.used, 0);
|
||||
this.stats.overallHealth = globalTotal > 0 ? Math.round((globalUsed / globalTotal) * 100) : 0;
|
||||
selectAll() {
|
||||
window.DashboardFilters.selectAll(this);
|
||||
},
|
||||
|
||||
// Generate chart data dynamically
|
||||
const familyColors = {
|
||||
'claude': getThemeColor('--color-neon-purple'),
|
||||
'gemini': getThemeColor('--color-neon-green'),
|
||||
'other': getThemeColor('--color-neon-cyan'),
|
||||
'unknown': '#666666'
|
||||
};
|
||||
deselectAll() {
|
||||
window.DashboardFilters.deselectAll(this);
|
||||
},
|
||||
|
||||
const families = Object.keys(familyStats).sort();
|
||||
const segmentSize = families.length > 0 ? 100 / families.length : 100;
|
||||
getFamilyColor(family) {
|
||||
return window.DashboardFilters.getFamilyColor(family);
|
||||
},
|
||||
|
||||
const data = [];
|
||||
const colors = [];
|
||||
const labels = [];
|
||||
getModelColor(family, modelIndex) {
|
||||
return window.DashboardFilters.getModelColor(family, modelIndex);
|
||||
},
|
||||
|
||||
families.forEach(family => {
|
||||
const stats = familyStats[family];
|
||||
const health = stats.total > 0 ? Math.round((stats.used / stats.total) * 100) : 0;
|
||||
const activeVal = (health / 100) * segmentSize;
|
||||
const inactiveVal = segmentSize - activeVal;
|
||||
getSelectedCount() {
|
||||
return window.DashboardFilters.getSelectedCount(this);
|
||||
},
|
||||
|
||||
const familyColor = familyColors[family] || familyColors['unknown'];
|
||||
autoSelectNew() {
|
||||
window.DashboardFilters.autoSelectNew(this);
|
||||
},
|
||||
|
||||
// Get translation keys
|
||||
const store = Alpine.store('global');
|
||||
const familyKey = 'family' + family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const familyName = store.t(familyKey);
|
||||
|
||||
// Labels using translations if possible
|
||||
const activeLabel = family === 'claude' ? store.t('claudeActive') :
|
||||
family === 'gemini' ? store.t('geminiActive') :
|
||||
`${familyName} ${store.t('activeSuffix')}`;
|
||||
|
||||
const depletedLabel = family === 'claude' ? store.t('claudeEmpty') :
|
||||
family === 'gemini' ? store.t('geminiEmpty') :
|
||||
`${familyName} ${store.t('depleted')}`;
|
||||
|
||||
// Active segment
|
||||
data.push(activeVal);
|
||||
colors.push(familyColor);
|
||||
labels.push(activeLabel);
|
||||
|
||||
// Inactive segment
|
||||
data.push(inactiveVal);
|
||||
colors.push(this.hexToRgba(familyColor, 0.1));
|
||||
labels.push(depletedLabel);
|
||||
});
|
||||
|
||||
this.charts.quotaDistribution = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: colors,
|
||||
borderColor: getThemeColor('--color-space-950'),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
borderRadius: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '85%',
|
||||
rotation: -90,
|
||||
circumference: 360,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: false },
|
||||
title: { display: false }
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
}
|
||||
});
|
||||
autoSelectTopN(n = 5) {
|
||||
window.DashboardFilters.autoSelectTopN(this, n);
|
||||
}
|
||||
});
|
||||
|
||||
493
public/js/components/dashboard/charts.js
Normal file
493
public/js/components/dashboard/charts.js
Normal file
@@ -0,0 +1,493 @@
|
||||
/**
|
||||
* Dashboard Charts Module
|
||||
* Handles Chart.js visualizations (quota distribution & usage trend)
|
||||
*/
|
||||
window.DashboardCharts = window.DashboardCharts || {};
|
||||
|
||||
// Helper to get CSS variable values (alias to window.utils.getThemeColor)
|
||||
const getThemeColor = (name) => window.utils.getThemeColor(name);
|
||||
|
||||
// Color palette for different families and models
|
||||
const FAMILY_COLORS = {
|
||||
get claude() {
|
||||
return getThemeColor("--color-neon-purple");
|
||||
},
|
||||
get gemini() {
|
||||
return getThemeColor("--color-neon-green");
|
||||
},
|
||||
get other() {
|
||||
return getThemeColor("--color-neon-cyan");
|
||||
},
|
||||
};
|
||||
|
||||
const MODEL_COLORS = Array.from({ length: 16 }, (_, i) =>
|
||||
getThemeColor(`--color-chart-${i + 1}`)
|
||||
);
|
||||
|
||||
// Export constants for filter module
|
||||
window.DashboardConstants = { FAMILY_COLORS, MODEL_COLORS };
|
||||
|
||||
// Module-level lock to prevent concurrent chart updates (fixes race condition)
|
||||
let _trendChartUpdateLock = false;
|
||||
|
||||
/**
|
||||
* Convert hex color to rgba
|
||||
* @param {string} hex - Hex color string
|
||||
* @param {number} alpha - Alpha value (0-1)
|
||||
* @returns {string} rgba color string
|
||||
*/
|
||||
window.DashboardCharts.hexToRgba = function (hex, alpha) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
return `rgba(${parseInt(result[1], 16)}, ${parseInt(
|
||||
result[2],
|
||||
16
|
||||
)}, ${parseInt(result[3], 16)}, ${alpha})`;
|
||||
}
|
||||
return hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if canvas is ready for Chart creation
|
||||
* @param {HTMLCanvasElement} canvas - Canvas element
|
||||
* @returns {boolean} True if canvas is ready
|
||||
*/
|
||||
function isCanvasReady(canvas) {
|
||||
if (!canvas || !canvas.isConnected) return false;
|
||||
if (canvas.offsetWidth === 0 || canvas.offsetHeight === 0) return false;
|
||||
|
||||
try {
|
||||
const ctx = canvas.getContext("2d");
|
||||
return !!ctx;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a Chart.js dataset with gradient fill
|
||||
* @param {string} label - Dataset label
|
||||
* @param {Array} data - Data points
|
||||
* @param {string} color - Line color
|
||||
* @param {HTMLCanvasElement} canvas - Canvas element
|
||||
* @returns {object} Chart.js dataset configuration
|
||||
*/
|
||||
window.DashboardCharts.createDataset = function (label, data, color, canvas) {
|
||||
let gradient;
|
||||
|
||||
try {
|
||||
// Safely create gradient with fallback
|
||||
if (canvas && canvas.getContext) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx && ctx.createLinearGradient) {
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
gradient.addColorStop(0, window.DashboardCharts.hexToRgba(color, 0.12));
|
||||
gradient.addColorStop(
|
||||
0.6,
|
||||
window.DashboardCharts.hexToRgba(color, 0.05)
|
||||
);
|
||||
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Failed to create gradient, using solid color fallback:", e);
|
||||
gradient = null;
|
||||
}
|
||||
|
||||
// Fallback to solid color if gradient creation failed
|
||||
const backgroundColor =
|
||||
gradient || window.DashboardCharts.hexToRgba(color, 0.08);
|
||||
|
||||
return {
|
||||
label,
|
||||
data,
|
||||
borderColor: color,
|
||||
backgroundColor: backgroundColor,
|
||||
borderWidth: 2.5,
|
||||
tension: 0.35,
|
||||
fill: true,
|
||||
pointRadius: 2.5,
|
||||
pointHoverRadius: 6,
|
||||
pointBackgroundColor: color,
|
||||
pointBorderColor: "rgba(9, 9, 11, 0.8)",
|
||||
pointBorderWidth: 1.5,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Update quota distribution donut chart
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardCharts.updateCharts = function (component) {
|
||||
// Safely destroy existing chart instance FIRST
|
||||
if (component.charts.quotaDistribution) {
|
||||
try {
|
||||
component.charts.quotaDistribution.destroy();
|
||||
} catch (e) {
|
||||
console.error("Failed to destroy quota chart:", e);
|
||||
}
|
||||
component.charts.quotaDistribution = null;
|
||||
}
|
||||
|
||||
const canvas = document.getElementById("quotaChart");
|
||||
|
||||
// Safety checks
|
||||
if (!canvas) {
|
||||
console.warn("quotaChart canvas not found");
|
||||
return;
|
||||
}
|
||||
if (typeof Chart === "undefined") {
|
||||
console.warn("Chart.js not loaded");
|
||||
return;
|
||||
}
|
||||
if (!isCanvasReady(canvas)) {
|
||||
console.warn("quotaChart canvas not ready, skipping update");
|
||||
return;
|
||||
}
|
||||
|
||||
// Use UNFILTERED data for global health chart
|
||||
const rows = Alpine.store("data").getUnfilteredQuotaData();
|
||||
if (!rows || rows.length === 0) return;
|
||||
|
||||
const healthByFamily = {};
|
||||
let totalHealthSum = 0;
|
||||
let totalModelCount = 0;
|
||||
|
||||
rows.forEach((row) => {
|
||||
const family = row.family || "unknown";
|
||||
if (!healthByFamily[family]) {
|
||||
healthByFamily[family] = { total: 0, weighted: 0 };
|
||||
}
|
||||
|
||||
// Calculate average health from quotaInfo (each entry has { pct })
|
||||
// Health = average of all account quotas for this model
|
||||
const quotaInfo = row.quotaInfo || [];
|
||||
if (quotaInfo.length > 0) {
|
||||
const avgHealth = quotaInfo.reduce((sum, q) => sum + (q.pct || 0), 0) / quotaInfo.length;
|
||||
healthByFamily[family].total++;
|
||||
healthByFamily[family].weighted += avgHealth;
|
||||
totalHealthSum += avgHealth;
|
||||
totalModelCount++;
|
||||
}
|
||||
});
|
||||
|
||||
// Update overall health for dashboard display
|
||||
component.stats.overallHealth = totalModelCount > 0
|
||||
? Math.round(totalHealthSum / totalModelCount)
|
||||
: 0;
|
||||
|
||||
const familyColors = {
|
||||
claude: getThemeColor("--color-neon-purple"),
|
||||
gemini: getThemeColor("--color-neon-green"),
|
||||
unknown: getThemeColor("--color-neon-cyan"),
|
||||
};
|
||||
|
||||
const data = [];
|
||||
const colors = [];
|
||||
const labels = [];
|
||||
|
||||
const totalFamilies = Object.keys(healthByFamily).length;
|
||||
const segmentSize = 100 / totalFamilies;
|
||||
|
||||
Object.entries(healthByFamily).forEach(([family, { total, weighted }]) => {
|
||||
const health = weighted / total;
|
||||
const activeVal = (health / 100) * segmentSize;
|
||||
const inactiveVal = segmentSize - activeVal;
|
||||
|
||||
const familyColor = familyColors[family] || familyColors["unknown"];
|
||||
|
||||
// Get translation keys
|
||||
const store = Alpine.store("global");
|
||||
const familyKey =
|
||||
"family" + family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const familyName = store.t(familyKey);
|
||||
|
||||
// Labels using translations if possible
|
||||
const activeLabel =
|
||||
family === "claude"
|
||||
? store.t("claudeActive")
|
||||
: family === "gemini"
|
||||
? store.t("geminiActive")
|
||||
: `${familyName} ${store.t("activeSuffix")}`;
|
||||
|
||||
const depletedLabel =
|
||||
family === "claude"
|
||||
? store.t("claudeEmpty")
|
||||
: family === "gemini"
|
||||
? store.t("geminiEmpty")
|
||||
: `${familyName} ${store.t("depleted")}`;
|
||||
|
||||
// Active segment
|
||||
data.push(activeVal);
|
||||
colors.push(familyColor);
|
||||
labels.push(activeLabel);
|
||||
|
||||
// Inactive segment
|
||||
data.push(inactiveVal);
|
||||
colors.push(window.DashboardCharts.hexToRgba(familyColor, 0.1));
|
||||
labels.push(depletedLabel);
|
||||
});
|
||||
|
||||
try {
|
||||
component.charts.quotaDistribution = new Chart(canvas, {
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
data: data,
|
||||
backgroundColor: colors,
|
||||
borderColor: getThemeColor("--color-space-950"),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
borderRadius: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: "85%",
|
||||
rotation: -90,
|
||||
circumference: 360,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: false },
|
||||
title: { display: false },
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to create quota chart:", e);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update usage trend line chart
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardCharts.updateTrendChart = function (component) {
|
||||
// Prevent concurrent updates (fixes race condition on rapid toggling)
|
||||
if (_trendChartUpdateLock) {
|
||||
console.log("[updateTrendChart] Update already in progress, skipping");
|
||||
return;
|
||||
}
|
||||
_trendChartUpdateLock = true;
|
||||
|
||||
console.log("[updateTrendChart] Starting update...");
|
||||
|
||||
// Safely destroy existing chart instance FIRST
|
||||
if (component.charts.usageTrend) {
|
||||
console.log("[updateTrendChart] Destroying existing chart");
|
||||
try {
|
||||
// Stop all animations before destroying to prevent null context errors
|
||||
component.charts.usageTrend.stop();
|
||||
component.charts.usageTrend.destroy();
|
||||
} catch (e) {
|
||||
console.error("[updateTrendChart] Failed to destroy chart:", e);
|
||||
}
|
||||
component.charts.usageTrend = null;
|
||||
}
|
||||
|
||||
const canvas = document.getElementById("usageTrendChart");
|
||||
|
||||
// Safety checks
|
||||
if (!canvas) {
|
||||
console.error("[updateTrendChart] Canvas not found in DOM!");
|
||||
return;
|
||||
}
|
||||
if (typeof Chart === "undefined") {
|
||||
console.error("[updateTrendChart] Chart.js not loaded");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("[updateTrendChart] Canvas element:", {
|
||||
exists: !!canvas,
|
||||
isConnected: canvas.isConnected,
|
||||
width: canvas.offsetWidth,
|
||||
height: canvas.offsetHeight,
|
||||
parentElement: canvas.parentElement?.tagName,
|
||||
});
|
||||
|
||||
if (!isCanvasReady(canvas)) {
|
||||
console.error("[updateTrendChart] Canvas not ready!", {
|
||||
isConnected: canvas.isConnected,
|
||||
width: canvas.offsetWidth,
|
||||
height: canvas.offsetHeight,
|
||||
});
|
||||
_trendChartUpdateLock = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear canvas to ensure clean state after destroy
|
||||
try {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("[updateTrendChart] Failed to clear canvas:", e);
|
||||
}
|
||||
|
||||
console.log(
|
||||
"[updateTrendChart] Canvas is ready, proceeding with chart creation"
|
||||
);
|
||||
|
||||
const history = component.historyData;
|
||||
if (!history || Object.keys(history).length === 0) {
|
||||
console.warn("No history data available for trend chart");
|
||||
_trendChartUpdateLock = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const labels = [];
|
||||
const datasets = [];
|
||||
|
||||
if (component.displayMode === "family") {
|
||||
// Aggregate by family
|
||||
const dataByFamily = {};
|
||||
component.selectedFamilies.forEach((family) => {
|
||||
dataByFamily[family] = [];
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(
|
||||
date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
||||
);
|
||||
|
||||
component.selectedFamilies.forEach((family) => {
|
||||
const familyData = hourData[family];
|
||||
const count = familyData?._subtotal || 0;
|
||||
dataByFamily[family].push(count);
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for families
|
||||
component.selectedFamilies.forEach((family) => {
|
||||
const color = window.DashboardFilters.getFamilyColor(family);
|
||||
const familyKey =
|
||||
"family" + family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const label = Alpine.store("global").t(familyKey);
|
||||
datasets.push(
|
||||
window.DashboardCharts.createDataset(
|
||||
label,
|
||||
dataByFamily[family],
|
||||
color,
|
||||
canvas
|
||||
)
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Show individual models
|
||||
const dataByModel = {};
|
||||
|
||||
// Initialize data arrays
|
||||
component.families.forEach((family) => {
|
||||
(component.selectedModels[family] || []).forEach((model) => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key] = [];
|
||||
});
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(
|
||||
date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
||||
);
|
||||
|
||||
component.families.forEach((family) => {
|
||||
const familyData = hourData[family] || {};
|
||||
(component.selectedModels[family] || []).forEach((model) => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key].push(familyData[model] || 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for models
|
||||
component.families.forEach((family) => {
|
||||
(component.selectedModels[family] || []).forEach((model, modelIndex) => {
|
||||
const key = `${family}:${model}`;
|
||||
const color = window.DashboardFilters.getModelColor(family, modelIndex);
|
||||
datasets.push(
|
||||
window.DashboardCharts.createDataset(
|
||||
model,
|
||||
dataByModel[key],
|
||||
color,
|
||||
canvas
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
component.charts.usageTrend = new Chart(canvas, {
|
||||
type: "line",
|
||||
data: { labels, datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 300, // Reduced animation for faster updates
|
||||
},
|
||||
interaction: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor:
|
||||
getThemeColor("--color-space-950") || "rgba(24, 24, 27, 0.9)",
|
||||
titleColor: getThemeColor("--color-text-main"),
|
||||
bodyColor: getThemeColor("--color-text-bright"),
|
||||
borderColor: getThemeColor("--color-space-border"),
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
return context.dataset.label + ": " + context.parsed.y;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: getThemeColor("--color-text-muted"),
|
||||
font: { size: 10 },
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color:
|
||||
getThemeColor("--color-space-border") + "1a" ||
|
||||
"rgba(255,255,255,0.05)",
|
||||
},
|
||||
ticks: {
|
||||
color: getThemeColor("--color-text-muted"),
|
||||
font: { size: 10 },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to create trend chart:", e);
|
||||
} finally {
|
||||
// Always release lock
|
||||
_trendChartUpdateLock = false;
|
||||
}
|
||||
};
|
||||
275
public/js/components/dashboard/filters.js
Normal file
275
public/js/components/dashboard/filters.js
Normal file
@@ -0,0 +1,275 @@
|
||||
/**
|
||||
* Dashboard Filters Module
|
||||
* Handles model/family filter selection and persistence
|
||||
*/
|
||||
window.DashboardFilters = window.DashboardFilters || {};
|
||||
|
||||
/**
|
||||
* Get initial filter state
|
||||
* @returns {object} Initial state for filter properties
|
||||
*/
|
||||
window.DashboardFilters.getInitialState = function() {
|
||||
return {
|
||||
displayMode: 'model',
|
||||
selectedFamilies: [],
|
||||
selectedModels: {},
|
||||
showModelFilter: false
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Load filter preferences from localStorage
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardFilters.loadPreferences = function(component) {
|
||||
try {
|
||||
const saved = localStorage.getItem('dashboard_chart_prefs');
|
||||
if (saved) {
|
||||
const prefs = JSON.parse(saved);
|
||||
component.displayMode = prefs.displayMode || 'model';
|
||||
component.selectedFamilies = prefs.selectedFamilies || [];
|
||||
component.selectedModels = prefs.selectedModels || {};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load dashboard preferences:', e);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Save filter preferences to localStorage
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardFilters.savePreferences = function(component) {
|
||||
try {
|
||||
localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
|
||||
displayMode: component.displayMode,
|
||||
selectedFamilies: component.selectedFamilies,
|
||||
selectedModels: component.selectedModels
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error('Failed to save dashboard preferences:', e);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set display mode (family or model)
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {string} mode - 'family' or 'model'
|
||||
*/
|
||||
window.DashboardFilters.setDisplayMode = function(component, mode) {
|
||||
component.displayMode = mode;
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle family selection
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {string} family - Family name (e.g., 'claude', 'gemini')
|
||||
*/
|
||||
window.DashboardFilters.toggleFamily = function(component, family) {
|
||||
const index = component.selectedFamilies.indexOf(family);
|
||||
if (index > -1) {
|
||||
component.selectedFamilies.splice(index, 1);
|
||||
} else {
|
||||
component.selectedFamilies.push(family);
|
||||
}
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle model selection within a family
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {string} family - Family name
|
||||
* @param {string} model - Model name
|
||||
*/
|
||||
window.DashboardFilters.toggleModel = function(component, family, model) {
|
||||
if (!component.selectedModels[family]) {
|
||||
component.selectedModels[family] = [];
|
||||
}
|
||||
const index = component.selectedModels[family].indexOf(model);
|
||||
if (index > -1) {
|
||||
component.selectedModels[family].splice(index, 1);
|
||||
} else {
|
||||
component.selectedModels[family].push(model);
|
||||
}
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if family is selected
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {string} family - Family name
|
||||
* @returns {boolean}
|
||||
*/
|
||||
window.DashboardFilters.isFamilySelected = function(component, family) {
|
||||
return component.selectedFamilies.includes(family);
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if model is selected
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {string} family - Family name
|
||||
* @param {string} model - Model name
|
||||
* @returns {boolean}
|
||||
*/
|
||||
window.DashboardFilters.isModelSelected = function(component, family, model) {
|
||||
return component.selectedModels[family]?.includes(model) || false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Select all families and models
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardFilters.selectAll = function(component) {
|
||||
component.selectedFamilies = [...component.families];
|
||||
component.families.forEach(family => {
|
||||
component.selectedModels[family] = [...(component.modelTree[family] || [])];
|
||||
});
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* Deselect all families and models
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardFilters.deselectAll = function(component) {
|
||||
component.selectedFamilies = [];
|
||||
component.selectedModels = {};
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* Get color for a family
|
||||
* @param {string} family - Family name
|
||||
* @returns {string} Color value
|
||||
*/
|
||||
window.DashboardFilters.getFamilyColor = function(family) {
|
||||
const FAMILY_COLORS = window.DashboardConstants?.FAMILY_COLORS || {};
|
||||
return FAMILY_COLORS[family] || FAMILY_COLORS.other;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get color for a model (with index for variation within family)
|
||||
* @param {string} family - Family name
|
||||
* @param {number} modelIndex - Index of model within family
|
||||
* @returns {string} Color value
|
||||
*/
|
||||
window.DashboardFilters.getModelColor = function(family, modelIndex) {
|
||||
const MODEL_COLORS = window.DashboardConstants?.MODEL_COLORS || [];
|
||||
const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : 8);
|
||||
return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
|
||||
};
|
||||
|
||||
/**
|
||||
* Get count of selected items for display
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @returns {string} Selected count string (e.g., "3/5")
|
||||
*/
|
||||
window.DashboardFilters.getSelectedCount = function(component) {
|
||||
if (component.displayMode === 'family') {
|
||||
return `${component.selectedFamilies.length}/${component.families.length}`;
|
||||
}
|
||||
let selected = 0, total = 0;
|
||||
component.families.forEach(family => {
|
||||
const models = component.modelTree[family] || [];
|
||||
total += models.length;
|
||||
selected += (component.selectedModels[family] || []).length;
|
||||
});
|
||||
return `${selected}/${total}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Auto-select new families/models that haven't been configured
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardFilters.autoSelectNew = function(component) {
|
||||
// If no preferences saved, select all
|
||||
if (component.selectedFamilies.length === 0 && Object.keys(component.selectedModels).length === 0) {
|
||||
component.selectedFamilies = [...component.families];
|
||||
component.families.forEach(family => {
|
||||
component.selectedModels[family] = [...(component.modelTree[family] || [])];
|
||||
});
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
return;
|
||||
}
|
||||
|
||||
// Add new families/models that appeared
|
||||
component.families.forEach(family => {
|
||||
if (!component.selectedFamilies.includes(family)) {
|
||||
component.selectedFamilies.push(family);
|
||||
}
|
||||
if (!component.selectedModels[family]) {
|
||||
component.selectedModels[family] = [];
|
||||
}
|
||||
(component.modelTree[family] || []).forEach(model => {
|
||||
if (!component.selectedModels[family].includes(model)) {
|
||||
component.selectedModels[family].push(model);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Auto-select top N models by usage (past 24 hours)
|
||||
* @param {object} component - Dashboard component instance
|
||||
* @param {number} n - Number of models to select (default: 5)
|
||||
*/
|
||||
window.DashboardFilters.autoSelectTopN = function(component, n = 5) {
|
||||
// Calculate usage for each model over past 24 hours
|
||||
const usage = {};
|
||||
const now = Date.now();
|
||||
const dayAgo = now - 24 * 60 * 60 * 1000;
|
||||
|
||||
Object.entries(component.historyData).forEach(([iso, hourData]) => {
|
||||
const timestamp = new Date(iso).getTime();
|
||||
if (timestamp < dayAgo) return;
|
||||
|
||||
Object.entries(hourData).forEach(([family, familyData]) => {
|
||||
if (typeof familyData === 'object' && family !== '_total') {
|
||||
Object.entries(familyData).forEach(([model, count]) => {
|
||||
if (model !== '_subtotal') {
|
||||
const key = `${family}:${model}`;
|
||||
usage[key] = (usage[key] || 0) + count;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sort by usage and take top N
|
||||
const sorted = Object.entries(usage)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, n);
|
||||
|
||||
// Clear current selection
|
||||
component.selectedFamilies = [];
|
||||
component.selectedModels = {};
|
||||
|
||||
// Select top models and their families
|
||||
sorted.forEach(([key, _]) => {
|
||||
const [family, model] = key.split(':');
|
||||
if (!component.selectedFamilies.includes(family)) {
|
||||
component.selectedFamilies.push(family);
|
||||
}
|
||||
if (!component.selectedModels[family]) {
|
||||
component.selectedModels[family] = [];
|
||||
}
|
||||
if (!component.selectedModels[family].includes(model)) {
|
||||
component.selectedModels[family].push(model);
|
||||
}
|
||||
});
|
||||
|
||||
window.DashboardFilters.savePreferences(component);
|
||||
// updateTrendChart uses debounce internally, call directly
|
||||
component.updateTrendChart();
|
||||
};
|
||||
43
public/js/components/dashboard/stats.js
Normal file
43
public/js/components/dashboard/stats.js
Normal file
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Dashboard Stats Module
|
||||
* Handles account statistics calculation
|
||||
*/
|
||||
window.DashboardStats = window.DashboardStats || {};
|
||||
|
||||
/**
|
||||
* Update account statistics (active, limited, total)
|
||||
* @param {object} component - Dashboard component instance
|
||||
*/
|
||||
window.DashboardStats.updateStats = function(component) {
|
||||
const accounts = Alpine.store('data').accounts;
|
||||
let active = 0, limited = 0;
|
||||
|
||||
const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
|
||||
|
||||
// Only count enabled accounts in statistics
|
||||
const enabledAccounts = accounts.filter(acc => acc.enabled !== false);
|
||||
|
||||
enabledAccounts.forEach(acc => {
|
||||
if (acc.status === 'ok') {
|
||||
const limits = Object.entries(acc.limits || {});
|
||||
let hasActiveCore = limits.some(([id, l]) => l && l.remainingFraction > 0.05 && isCore(id));
|
||||
|
||||
if (!hasActiveCore) {
|
||||
const hasAnyCore = limits.some(([id]) => isCore(id));
|
||||
if (!hasAnyCore) {
|
||||
hasActiveCore = limits.some(([_, l]) => l && l.remainingFraction > 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
if (hasActiveCore) active++; else limited++;
|
||||
} else {
|
||||
limited++;
|
||||
}
|
||||
});
|
||||
|
||||
// TOTAL shows only enabled accounts
|
||||
// Disabled accounts are excluded from all statistics
|
||||
component.stats.total = enabledAccounts.length;
|
||||
component.stats.active = active;
|
||||
component.stats.limited = limited;
|
||||
};
|
||||
@@ -70,7 +70,7 @@ window.Components.logsViewer = () => ({
|
||||
this.logs.push(log);
|
||||
|
||||
// Limit log buffer
|
||||
const limit = Alpine.store('settings')?.logLimit || 2000;
|
||||
const limit = Alpine.store('settings')?.logLimit || window.AppConstants.LIMITS.DEFAULT_LOG_LIMIT;
|
||||
if (this.logs.length > limit) {
|
||||
this.logs = this.logs.slice(-limit);
|
||||
}
|
||||
|
||||
@@ -37,33 +37,11 @@ window.Components.modelManager = () => ({
|
||||
},
|
||||
|
||||
/**
|
||||
* Update model configuration with authentication
|
||||
* Update model configuration (delegates to shared utility)
|
||||
* @param {string} modelId - The model ID to update
|
||||
* @param {object} configUpdates - Configuration updates (pinned, hidden, alias, mapping)
|
||||
*/
|
||||
async updateModelConfig(modelId, configUpdates) {
|
||||
const store = Alpine.store('global');
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ modelId, config: configUpdates })
|
||||
}, store.webuiPassword);
|
||||
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update model config');
|
||||
}
|
||||
|
||||
// Optimistic update
|
||||
Alpine.store('data').modelConfig[modelId] = {
|
||||
...Alpine.store('data').modelConfig[modelId],
|
||||
...configUpdates
|
||||
};
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
} catch (e) {
|
||||
store.showToast('Failed to update model config: ' + e.message, 'error');
|
||||
}
|
||||
return window.ModelConfigUtils.updateModelConfig(modelId, configUpdates);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -7,9 +7,9 @@ window.Components = window.Components || {};
|
||||
|
||||
window.Components.models = () => ({
|
||||
init() {
|
||||
// Ensure data is fetched when this tab becomes active
|
||||
this.$watch('$store.global.activeTab', (val) => {
|
||||
if (val === 'models') {
|
||||
// Ensure data is fetched when this tab becomes active (skip initial trigger)
|
||||
this.$watch('$store.global.activeTab', (val, oldVal) => {
|
||||
if (val === 'models' && oldVal !== undefined) {
|
||||
// Trigger recompute to ensure filters are applied
|
||||
this.$nextTick(() => {
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
@@ -26,33 +26,11 @@ window.Components.models = () => ({
|
||||
},
|
||||
|
||||
/**
|
||||
* Update model configuration (Pin/Hide quick actions)
|
||||
* Update model configuration (delegates to shared utility)
|
||||
* @param {string} modelId - The model ID to update
|
||||
* @param {object} configUpdates - Configuration updates (pinned, hidden)
|
||||
*/
|
||||
async updateModelConfig(modelId, configUpdates) {
|
||||
const store = Alpine.store('global');
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ modelId, config: configUpdates })
|
||||
}, store.webuiPassword);
|
||||
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update model config');
|
||||
}
|
||||
|
||||
// Optimistic update
|
||||
Alpine.store('data').modelConfig[modelId] = {
|
||||
...Alpine.store('data').modelConfig[modelId],
|
||||
...configUpdates
|
||||
};
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
} catch (e) {
|
||||
store.showToast('Failed to update: ' + e.message, 'error');
|
||||
}
|
||||
return window.ModelConfigUtils.updateModelConfig(modelId, configUpdates);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -16,9 +16,9 @@ window.Components.serverConfig = () => ({
|
||||
this.fetchServerConfig();
|
||||
}
|
||||
|
||||
// Watch local activeTab (from parent settings scope)
|
||||
this.$watch('activeTab', (tab) => {
|
||||
if (tab === 'server') {
|
||||
// Watch local activeTab (from parent settings scope, skip initial trigger)
|
||||
this.$watch('activeTab', (tab, oldTab) => {
|
||||
if (tab === 'server' && oldTab !== undefined) {
|
||||
this.fetchServerConfig();
|
||||
}
|
||||
});
|
||||
@@ -164,10 +164,23 @@ window.Components.serverConfig = () => ({
|
||||
}
|
||||
},
|
||||
|
||||
// Generic debounced save method for numeric configs
|
||||
async saveConfigField(fieldName, value, displayName) {
|
||||
// Generic debounced save method for numeric configs with validation
|
||||
async saveConfigField(fieldName, value, displayName, validator = null) {
|
||||
const store = Alpine.store('global');
|
||||
|
||||
// Validate input if validator provided
|
||||
if (validator) {
|
||||
const validation = window.Validators.validate(value, validator, true);
|
||||
if (!validation.isValid) {
|
||||
// Rollback to previous value
|
||||
this.serverConfig[fieldName] = this.serverConfig[fieldName];
|
||||
return;
|
||||
}
|
||||
value = validation.value;
|
||||
} else {
|
||||
value = parseInt(value);
|
||||
}
|
||||
|
||||
// Clear existing timer for this field
|
||||
if (this.debounceTimers[fieldName]) {
|
||||
clearTimeout(this.debounceTimers[fieldName]);
|
||||
@@ -175,13 +188,13 @@ window.Components.serverConfig = () => ({
|
||||
|
||||
// Optimistic update
|
||||
const previousValue = this.serverConfig[fieldName];
|
||||
this.serverConfig[fieldName] = parseInt(value);
|
||||
this.serverConfig[fieldName] = value;
|
||||
|
||||
// Set new timer
|
||||
this.debounceTimers[fieldName] = setTimeout(async () => {
|
||||
try {
|
||||
const payload = {};
|
||||
payload[fieldName] = parseInt(value);
|
||||
payload[fieldName] = value;
|
||||
|
||||
const { response, newPassword } = await window.utils.request('/api/config', {
|
||||
method: 'POST',
|
||||
@@ -203,27 +216,37 @@ window.Components.serverConfig = () => ({
|
||||
this.serverConfig[fieldName] = previousValue;
|
||||
store.showToast(`Failed to update ${displayName}: ` + e.message, 'error');
|
||||
}
|
||||
}, 500); // 500ms debounce
|
||||
}, window.AppConstants.INTERVALS.CONFIG_DEBOUNCE);
|
||||
},
|
||||
|
||||
// Individual toggle methods for each Advanced Tuning field
|
||||
// Individual toggle methods for each Advanced Tuning field with validation
|
||||
toggleMaxRetries(value) {
|
||||
this.saveConfigField('maxRetries', value, 'Max Retries');
|
||||
const { MAX_RETRIES_MIN, MAX_RETRIES_MAX } = window.AppConstants.VALIDATION;
|
||||
this.saveConfigField('maxRetries', value, 'Max Retries',
|
||||
(v) => window.Validators.validateRange(v, MAX_RETRIES_MIN, MAX_RETRIES_MAX, 'Max Retries'));
|
||||
},
|
||||
|
||||
toggleRetryBaseMs(value) {
|
||||
this.saveConfigField('retryBaseMs', value, 'Retry Base Delay');
|
||||
const { RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX } = window.AppConstants.VALIDATION;
|
||||
this.saveConfigField('retryBaseMs', value, 'Retry Base Delay',
|
||||
(v) => window.Validators.validateRange(v, RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX, 'Retry Base Delay'));
|
||||
},
|
||||
|
||||
toggleRetryMaxMs(value) {
|
||||
this.saveConfigField('retryMaxMs', value, 'Retry Max Delay');
|
||||
const { RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX } = window.AppConstants.VALIDATION;
|
||||
this.saveConfigField('retryMaxMs', value, 'Retry Max Delay',
|
||||
(v) => window.Validators.validateRange(v, RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX, 'Retry Max Delay'));
|
||||
},
|
||||
|
||||
toggleDefaultCooldownMs(value) {
|
||||
this.saveConfigField('defaultCooldownMs', value, 'Default Cooldown');
|
||||
const { DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX } = window.AppConstants.VALIDATION;
|
||||
this.saveConfigField('defaultCooldownMs', value, 'Default Cooldown',
|
||||
(v) => window.Validators.validateTimeout(v, DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX));
|
||||
},
|
||||
|
||||
toggleMaxWaitBeforeErrorMs(value) {
|
||||
this.saveConfigField('maxWaitBeforeErrorMs', value, 'Max Wait Threshold');
|
||||
const { MAX_WAIT_MIN, MAX_WAIT_MAX } = window.AppConstants.VALIDATION;
|
||||
this.saveConfigField('maxWaitBeforeErrorMs', value, 'Max Wait Threshold',
|
||||
(v) => window.Validators.validateTimeout(v, MAX_WAIT_MIN, MAX_WAIT_MAX));
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user