feat: optimize Proxmox statistics loading by preloading data on mount and reducing cache TTL for faster updates
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user