From 801898e295a2e187cb9c1055eeca6f01990a8bc4 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 19:29:46 -0500
Subject: [PATCH] refactor: streamline data loading process in Statistics and
 overview views for improved performance

---
 .../Servers/Proxmox/Livewire/Statistics.php   |  34 ++--
 .../Servers/Proxmox/views/overview.blade.php  |  14 +-
 .../Proxmox/views/statistics.blade.php        | 171 +++++++-----------
 3 files changed, 93 insertions(+), 126 deletions(-)

diff --git a/extensions/Servers/Proxmox/Livewire/Statistics.php b/extensions/Servers/Proxmox/Livewire/Statistics.php
index 9de9d690a..7842e2e52 100644
--- a/extensions/Servers/Proxmox/Livewire/Statistics.php
+++ b/extensions/Servers/Proxmox/Livewire/Statistics.php
@@ -152,23 +152,25 @@ class Statistics extends Component
     {
         parent::mount($server);
         $this->server->loadMissing('ipAddresses');
-        // Network Analysis is loaded lazily via JavaScript to improve page load speed
-        // Initialize error state if not configured to prevent infinite loading
-        if (!$this->coreRouterEnabled()) {
-            $this->networkAnalysis['error'] = 'Core Router API is not configured.';
-            $this->networkAnalysis['connections'] = [];
-            $this->networkAnalysis['topConnections'] = [];
-            $this->networkAnalysis['topPorts'] = [];
-            $this->networkAnalysis['security'] = [];
-        }
         
-        // Preload graph data on mount to speed up initial display
-        // Dispatch individual chart events for more reliable parallel loading
-        // Each chart loads independently so a failure in one doesn't block others
-        $this->dispatch('proxmox:stats:cpu');
-        $this->dispatch('proxmox:stats:memory');
-        $this->dispatch('proxmox:stats:network');
-        $this->dispatch('proxmox:stats:disk');
+        // Data loading is deferred to loadInitialData() which is triggered via wire:init
+        // This ensures JavaScript charts are fully initialized before data events are dispatched
+    }
+    
+    /**
+     * Load all initial data for the statistics page.
+     * Called via wire:init to ensure JavaScript is ready to receive the data.
+     */
+    public function loadInitialData(): void
+    {
+        // Fetch graph data - each dispatch includes the actual data for JavaScript charts
+        $this->fetchGraphData('cpu', $this->cpuTimeRange, $this->cpuAggregation);
+        $this->fetchGraphData('memory', $this->memoryTimeRange, $this->memoryAggregation);
+        $this->fetchGraphData('network', $this->networkTimeRange, $this->networkAggregation);
+        $this->fetchGraphData('disk', $this->diskTimeRange, $this->diskAggregation);
+        
+        // Load Network Analysis
+        $this->loadNetworkAnalysis();
     }
 
     #[On('proxmox:stats')]
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 93cc48a74..1731a8a00 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -86,7 +86,7 @@
             </div>
         </div>
 
-        <div class="flex flex-col gap-1.5" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
+        <div class="flex flex-col gap-1.5" wire:init="checkStatus" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
             wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
             <div class="flex items-center gap-2.5 min-w-0 group">
                 <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white break-words tracking-tight">Server Overview</h1>
@@ -342,7 +342,7 @@
     @endphp
 
         <!-- Resource Stats Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-5">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-5" wire:loading.class="opacity-50" wire:target="checkStatus">
             @foreach($resourceAllocations as $resource)
             <div class="group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 p-4 lg:p-5">
                 <div class="flex items-start justify-between mb-4">
@@ -464,7 +464,7 @@
                                 <div class="lte-card-body">
                                     <div style="margin-bottom: 1rem;">
                                         <label style="font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.5rem;">Hostname</label>
-                                        <input type="text" wire:model.defer="hostname" class="lte-form-control" placeholder="Enter hostname" />
+                                        <input type="text" wire:model.live.debounce.300ms="hostname" class="lte-form-control" placeholder="Enter hostname" />
                                     </div>
                                     @if($hostnameError)
                                         <div class="lte-alert lte-alert-danger" style="font-size: 0.875rem;">{{ $hostnameError }}</div>
@@ -635,11 +635,11 @@
                                 <div class="lte-card-body">
                                     <div style="margin-bottom: 1rem;">
                                         <label style="font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.5rem;">New Password</label>
-                                        <input type="password" wire:model.defer="password" class="lte-form-control" placeholder="Enter new password" />
+                                        <input type="password" wire:model.live.debounce.300ms="password" class="lte-form-control" placeholder="Enter new password" />
                                     </div>
                                     <div style="margin-bottom: 1rem;">
                                         <label style="font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.5rem;">Confirm Password</label>
-                                        <input type="password" wire:model.defer="password_confirmation" class="lte-form-control" placeholder="Confirm password" />
+                                        <input type="password" wire:model.live.debounce.300ms="password_confirmation" class="lte-form-control" placeholder="Confirm password" />
                                     </div>
                                     @if($passwordError)
                                         <div class="lte-alert lte-alert-danger" style="font-size: 0.875rem; margin-bottom: 1rem;">{{ $passwordError }}</div>
@@ -727,7 +727,7 @@
                         </p>
                         <div class="bg-info/10 border border-info/25 rounded-lg p-4 mb-4">
                             <p class="text-xs text-info font-semibold mb-2 opacity-90">
-                                <x-ri-info-line class="inline size-3.5 mr-1" />
+                                <x-ri-information-line class="inline size-3.5 mr-1" />
                                 Important Note
                             </p>
                             <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">
@@ -1026,7 +1026,7 @@
             <div class="flex flex-col gap-3 flex-1">
                 @if($isEditingNotes)
                     <div class="space-y-3 flex-1 flex flex-col">
-                        <textarea wire:model="notes" 
+                        <textarea wire:model.live.debounce.500ms="notes" 
                             class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-sm w-full resize-y flex-1 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors font-mono"
                             placeholder="Enter notes with Markdown support..."></textarea>
                         @if($notesError)
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 88a5d7d21..70fe8fe48 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -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);