Private
Public Access
1
0

feat: optimize Proxmox statistics loading by preloading data on mount and reducing cache TTL for faster updates

This commit is contained in:
2025-12-01 12:14:10 -05:00
parent bbe6231328
commit 0c4a8f764d
2 changed files with 24 additions and 7 deletions

View File

@@ -139,6 +139,10 @@ class Statistics extends Component
$this->networkAnalysis['topPorts'] = []; $this->networkAnalysis['topPorts'] = [];
$this->networkAnalysis['security'] = []; $this->networkAnalysis['security'] = [];
} }
// Preload graph data on mount to speed up initial display
// This runs in the background while the page is rendering
$this->dispatch('proxmox:stats');
} }
#[On('proxmox:stats')] #[On('proxmox:stats')]
@@ -501,7 +505,8 @@ class Statistics extends Component
$cacheKey = 'proxmox-stats-' . $this->server->id . '-' . $graphType . '-' . $timeRange . '-' . $aggregation; $cacheKey = 'proxmox-stats-' . $this->server->id . '-' . $graphType . '-' . $timeRange . '-' . $aggregation;
try { try {
$data = Cache::remember($cacheKey, 60, function () use ($timeRange, $aggregation) { // Reduced cache TTL from 60 to 30 seconds for fresher data and faster updates
$data = Cache::remember($cacheKey, 30, function () use ($timeRange, $aggregation) {
$proxmox = new Proxmox; $proxmox = new Proxmox;
$stats = $proxmox->request('/nodes/' . $this->server->node->name . '/qemu/' . $this->server->vm_id . '/rrddata', data: [ $stats = $proxmox->request('/nodes/' . $this->server->node->name . '/qemu/' . $this->server->vm_id . '/rrddata', data: [
'timeframe' => $timeRange, 'timeframe' => $timeRange,

View File

@@ -4341,7 +4341,8 @@
console.warn('Failed to dispatch Proxmox stats event:', e); console.warn('Failed to dispatch Proxmox stats event:', e);
} }
// After a short delay, check if expected charts have received any data. // After a shorter delay, check if expected charts have received any data.
// Reduced from 3000ms to 800ms for faster loading
setTimeout(function () { setTimeout(function () {
var allExpectedChartsHaveData = var allExpectedChartsHaveData =
(!cpuChartExpected || cpuChartHasData) && (!cpuChartExpected || cpuChartHasData) &&
@@ -4362,10 +4363,10 @@
} else { } else {
console.warn('Max stats retry attempts reached; some charts may not have data.'); console.warn('Max stats retry attempts reached; some charts may not have data.');
} }
}, 3000); }, 800);
} }
// Start the retry loop // Start the retry loop immediately
statsRetryAttempts = 0; statsRetryAttempts = 0;
requestStatsOnce(); requestStatsOnce();
} }
@@ -4440,12 +4441,23 @@
diskChart.render(); diskChart.render();
} }
// After charts are initialized, request stats with a short // Request stats immediately - don't wait for charts to fully render
// retry loop to ensure data is received even if the first // This speeds up initial data loading
// request or event is missed.
dispatchStatsWithRetry(); dispatchStatsWithRetry();
}); });
} }
// Trigger initial stats request as soon as possible, before charts are ready
// This allows backend to start fetching data in parallel with chart initialization
if (typeof Livewire !== 'undefined') {
setTimeout(function() {
try {
Livewire.dispatch('proxmox:stats');
} catch (e) {
console.warn('Early stats dispatch failed:', e);
}
}, 100);
}
// Set up event listeners - these persist across Livewire navigation // Set up event listeners - these persist across Livewire navigation
function setupEventListeners() { function setupEventListeners() {