Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

refactor: streamline data loading process in Statistics and overview views for improved performance

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 19:29:46 -05:00
parent e41c9d7eca
commit 801898e295
3 changed files with 93 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
extensions/Servers/Proxmox/views/statistics.blade.php
View File

@@ -2,7 +2,7 @@
@once
<script src="https://cdn.jsdelivr.net/npm/apexcharts" onload="window.apexChartsLoaded = true"></script>
@endonce
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-6" wire:init="loadInitialData">
<style>
.formRight select {
background-color: hsl(var(--color-background));
@@ -2184,7 +2184,6 @@
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden shadow-theme-sm mt-6"
id="network-analysis-card"
style="width: 100%;"
wire:init="loadNetworkAnalysis"
>
<div>
<div class="p-6 border-b border-neutral flex items-center justify-between gap-3 flex-wrap">
@@ -4980,6 +4979,9 @@
var memoryChartHasData = false;
var networkChartHasData = false;
var diskChartHasData = false;
// Track if 10-second auto-retry has been performed for Live Telemetry
var liveTelemetryRetryPerformed = false;
// Track individual retry attempts per chart for more reliable loading
var chartRetryAttempts = {
@@ -5150,21 +5152,36 @@
});
}
// Trigger initial stats request as soon as possible, before charts are ready
// This allows backend to start fetching data in parallel with chart initialization
// Using individual chart events for more reliable loading
// Data loading is now handled by wire:init="loadInitialData" on the main container
// This ensures charts are initialized before data events are dispatched
// Keep 10-second auto-retry as a backup in case wire:init fails
if (typeof Livewire !== 'undefined') {
// 10-second auto-retry for Live Telemetry if charts don't have data
setTimeout(function() {
try {
// Dispatch all four chart requests in parallel for faster initial load
Livewire.dispatch('proxmox:stats:cpu');
Livewire.dispatch('proxmox:stats:memory');
Livewire.dispatch('proxmox:stats:network');
Livewire.dispatch('proxmox:stats:disk');
} catch (e) {
console.warn('Early stats dispatch failed:', e);
if (liveTelemetryRetryPerformed) return;
var chartsNeedRetry = [];
if (cpuChartExpected && !cpuChartHasData) chartsNeedRetry.push('cpu');
if (memoryChartExpected && !memoryChartHasData) chartsNeedRetry.push('memory');
if (networkChartExpected && !networkChartHasData) chartsNeedRetry.push('network');
if (diskChartExpected && !diskChartHasData) chartsNeedRetry.push('disk');
if (chartsNeedRetry.length > 0) {
console.log('Live Telemetry 10-second auto-retry: Charts missing data:', chartsNeedRetry.join(', '));
liveTelemetryRetryPerformed = true;
chartsNeedRetry.forEach(function(chartType) {
try {
Livewire.dispatch('proxmox:stats:' + chartType);
console.log('Live Telemetry auto-retry dispatched for: ' + chartType);
} catch (e) {
console.warn('Live Telemetry auto-retry failed for ' + chartType + ':', e);
}
});
} else {
console.log('Live Telemetry 10-second check: All charts have data, no retry needed');
}
}, 100);
}, 10000);
}
// Set up event listeners - these persist across Livewire navigation
@@ -5324,66 +5341,29 @@
// Initialize charts
initializeCharts();
// Load Network Analysis after charts are initialized (non-blocking)
function loadNetworkAnalysisData() {
// Start the timeout FIRST before loading, so it's guaranteed to start
console.log('Starting Network Analysis load process - timeout will begin');
// Network Analysis is now loaded via wire:init="loadInitialData"
// This function just starts the 10-second backup retry timer
function startNetworkAnalysisBackupRetry() {
console.log('Starting Network Analysis 10-second backup retry timer');
startNetworkAnalysisTimeout();
setTimeout(function() {
try {
// Use a Livewire event instead of @this directly so that
// the initial load is reliable even on first-ever visits.
Livewire.dispatch('proxmox:network-analysis-load');
console.log('Network Analysis load event dispatched');
} catch (e) {
console.warn('Failed to dispatch Network Analysis load event:', e);
// Even if dispatch fails, timeout is already started
}
}, 500);
}
// Function to start the Network Analysis timeout if not already started
// Function to start the Network Analysis 10-second auto-retry
function startNetworkAnalysisTimeout() {
// Get server ID for unique session tracking
var serverId = {{ $server->id ?? 0 }};
var refreshKey = 'networkAnalysisRefreshed_' + serverId;
// Check if we've already refreshed once in this session for this server
var hasAlreadyRefreshed = sessionStorage.getItem(refreshKey);
if (hasAlreadyRefreshed === 'true') {
console.log('Network Analysis timeout skipped - page has already been refreshed once in this session for server ' + serverId);
return;
}
// Clear any existing timeout
if (window.networkAnalysisTimeoutId) {
clearTimeout(window.networkAnalysisTimeoutId);
}
console.log('Network Analysis timeout started - page will refresh in 30 seconds if data does not load (one-time refresh only)');
console.log('Timeout ID will be stored at: window.networkAnalysisTimeoutId');
console.log('Network Analysis 10-second auto-retry timer started');
// Simple timeout: refresh after 30 seconds unless we can confirm it loaded
// 10-second timeout: retry loading if data hasn't populated
window.networkAnalysisTimeoutId = setTimeout(function() {
console.warn('=== Network Analysis timeout callback FIRED (30 seconds elapsed) ===');
// Get server ID for unique session tracking
var serverId = {{ $server->id ?? 0 }};
var refreshKey = 'networkAnalysisRefreshed_' + serverId;
// Double-check we haven't already refreshed (in case of race conditions)
var hasAlreadyRefreshedCheck = sessionStorage.getItem(refreshKey);
if (hasAlreadyRefreshedCheck === 'true') {
console.log('Network Analysis timeout - page was already refreshed for server ' + serverId + ', skipping');
return;
}
console.log('Network Analysis 10-second auto-retry check triggered');
var networkAnalysisCard = document.getElementById('network-analysis-card');
if (!networkAnalysisCard) {
console.warn('Network Analysis card not found, refreshing page NOW (one-time) for server ' + serverId);
sessionStorage.setItem(refreshKey, 'true');
window.location.reload();
console.warn('Network Analysis card not found, skipping retry');
return;
}
@@ -5397,40 +5377,38 @@
return p && p.textContent && p.textContent.includes('Fetching data from Core Router');
});
console.log('Loading check:', { isLoadingVisible: isLoadingVisible, hasLoadingText: hasLoadingText });
// If loading indicator is visible, definitely refresh (but only once)
if (isLoadingVisible || hasLoadingText) {
console.warn('Network Analysis timeout - loading indicator still visible, refreshing page NOW (one-time refresh) for server ' + serverId);
sessionStorage.setItem(refreshKey, 'true');
window.location.reload();
return;
}
// Check if there's definitive content that shows it loaded
var hasTable = networkAnalysisCard.querySelector('table');
var hasError = networkAnalysisCard.querySelector('[class*="border-warning"]');
var hasEmptyState = networkAnalysisCard.querySelector('.text-center.py-6');
var hasTabs = networkAnalysisCard.querySelector('[x-data*="tab"]');
console.log('Content check:', { hasTable: !!hasTable, hasError: !!hasError, hasEmptyState: !!hasEmptyState, hasTabs: !!hasTabs });
var isLoaded = (hasTabs && (hasTable || hasError || hasEmptyState)) || hasError;
// Only skip refresh if we have clear evidence it loaded (tabs + content)
if ((hasTabs && (hasTable || hasError || hasEmptyState)) || hasError) {
console.log('Network Analysis loaded successfully (found tabs and content), NOT refreshing');
cancelNetworkAnalysisTimeout();
// Clear the refresh flag since we loaded successfully
sessionStorage.removeItem(refreshKey);
return;
console.log('Network Analysis status:', {
isLoadingVisible: isLoadingVisible,
hasLoadingText: hasLoadingText,
isLoaded: isLoaded
});
// If still loading or no content, retry the load
if (isLoadingVisible || hasLoadingText || !isLoaded) {
console.log('Network Analysis 10-second auto-retry: Data not loaded, dispatching retry event');
try {
Livewire.dispatch('proxmox:network-analysis-load');
console.log('Network Analysis auto-retry event dispatched successfully');
} catch (e) {
console.warn('Network Analysis auto-retry dispatch failed:', e);
}
} else {
console.log('Network Analysis 10-second check: Data already loaded, no retry needed');
}
// Default to refreshing if we can't definitively prove it loaded (but only once)
console.warn('Network Analysis timeout - cannot confirm data loaded, refreshing page NOW (one-time refresh) for server ' + serverId);
sessionStorage.setItem(refreshKey, 'true');
window.location.reload();
}, 30000); // 30 seconds
// Clear the timeout ID since it has fired
window.networkAnalysisTimeoutId = null;
}, 10000); // 10 seconds
console.log('Timeout set with ID:', window.networkAnalysisTimeoutId);
console.log('Network Analysis timeout set with ID:', window.networkAnalysisTimeoutId);
}
// Function to cancel the Network Analysis timeout
@@ -5440,17 +5418,14 @@
window.networkAnalysisTimeoutId = null;
console.log('Network Analysis timeout cancelled - data has loaded');
}
// Clear the refresh flag since data loaded successfully (server-specific)
var serverId = {{ $server->id ?? 0 }};
var refreshKey = 'networkAnalysisRefreshed_' + serverId;
sessionStorage.removeItem(refreshKey);
}
// Check if Livewire is already initialized, otherwise wait for it
if (typeof Livewire !== 'undefined' && Livewire.initialized) {
loadNetworkAnalysisData();
// Start the 10-second backup retry timer for Network Analysis
// Data is loaded via wire:init, this is just a backup in case it fails
if (typeof Livewire !== 'undefined') {
startNetworkAnalysisBackupRetry();
} else {
document.addEventListener('livewire:initialized', loadNetworkAnalysisData, { once: true });
document.addEventListener('livewire:initialized', startNetworkAnalysisBackupRetry, { once: true });
}
// Monitor for Network Analysis completion and cancel timeout when loaded
@@ -5487,18 +5462,8 @@
}
}, 2000); // Check every 2 seconds
// Clear the refresh flag on successful page load (if Network Analysis loaded immediately)
// This allows the timeout to work again in future sessions (server-specific)
// Handle cross-reference from firewall logs on page load
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
if (checkNetworkAnalysisLoaded()) {
var serverId = {{ $server->id ?? 0 }};
var refreshKey = 'networkAnalysisRefreshed_' + serverId;
sessionStorage.removeItem(refreshKey);
console.log('Network Analysis loaded successfully on page load, refresh flag cleared for server ' + serverId);
}
}, 2000);
// Handle cross-reference from firewall logs
// If URL has network_search parameter and #network-analysis-card hash, scroll to it
var urlParams = new URLSearchParams(window.location.search);