From 892961d28c97f96f406422cb21c7b82a0c12c229 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 24 Dec 2025 09:54:17 -0500
Subject: [PATCH] feat: enhance VM status loading with retry logic and improved
 error handling

---
 .../Servers/Proxmox/Livewire/Component.php    | 26 ++++++++--
 .../Servers/Proxmox/Livewire/Server.php       | 29 ++++++++++-
 .../Servers/Proxmox/Livewire/Statistics.php   |  9 ++++
 .../Servers/Proxmox/views/server.blade.php    | 33 ++++++++++++
 .../Proxmox/views/statistics.blade.php        | 52 +++++++++++++++----
 5 files changed, 134 insertions(+), 15 deletions(-)

diff --git a/extensions/Servers/Proxmox/Livewire/Component.php b/extensions/Servers/Proxmox/Livewire/Component.php
index 32997a9c1..c4edb564d 100644
--- a/extensions/Servers/Proxmox/Livewire/Component.php
+++ b/extensions/Servers/Proxmox/Livewire/Component.php
@@ -259,12 +259,30 @@ class Component extends BaseComponent
     {
         try {
             $proxmox = new Proxmox;
-            $data = $proxmox->request(
+            $response = $proxmox->request(
                 '/nodes/' . $this->server->node->name . '/qemu/' . $this->server->vm_id . '/status/current'
-            )->json()['data'] ?? null;
-
-            $this->status = $data ? (object) $data : null;
+            );
+            
+            if ($response->successful()) {
+                $data = $response->json()['data'] ?? null;
+                $this->status = $data ? (object) $data : null;
+            } else {
+                \Log::warning('Failed to load VM status for server ' . $this->server->id, [
+                    'server_id' => $this->server->id,
+                    'vm_id' => $this->server->vm_id,
+                    'node' => $this->server->node->name,
+                    'status_code' => $response->status(),
+                    'response' => $response->json(),
+                ]);
+                $this->status = null;
+            }
         } catch (\Throwable $e) {
+            \Log::error('Exception loading VM status for server ' . $this->server->id, [
+                'server_id' => $this->server->id,
+                'vm_id' => $this->server->vm_id,
+                'node' => $this->server->node->name ?? 'unknown',
+                'error' => $e->getMessage(),
+            ]);
             $this->status = null;
         }
     }
diff --git a/extensions/Servers/Proxmox/Livewire/Server.php b/extensions/Servers/Proxmox/Livewire/Server.php
index e62ca7f63..a16107d76 100644
--- a/extensions/Servers/Proxmox/Livewire/Server.php
+++ b/extensions/Servers/Proxmox/Livewire/Server.php
@@ -4,17 +4,30 @@ namespace Paymenter\Extensions\Servers\Proxmox\Livewire;
 
 use Paymenter\Extensions\Servers\Proxmox\Models\Server as ServerModel;
 use Paymenter\Extensions\Servers\Proxmox\Models\ServerStatistics;
+use Paymenter\Extensions\Servers\Proxmox\Proxmox;
 use Carbon\Carbon;
 use Illuminate\Support\Facades\Cache;
 
 class Server extends Component
 {
+    protected int $maxRetries = 3;
+    
     public function mount(ServerModel $server): void
     {
         parent::mount($server);
         
-        // Check and enforce bandwidth throttling if exceeded
-        $this->checkAndEnforceBandwidthLimit();
+        // Retry loading VM status if initial load failed
+        $retries = 0;
+        while ($this->status === null && $retries < $this->maxRetries) {
+            usleep(100000); // 100ms delay between retries
+            $this->loadVmStatus();
+            $retries++;
+        }
+        
+        // Check and enforce bandwidth throttling if exceeded (only if status loaded)
+        if ($this->status !== null) {
+            $this->checkAndEnforceBandwidthLimit();
+        }
     }
 
     public function getMonthlyTrafficProperty()
@@ -162,6 +175,18 @@ class Server extends Component
         }
     }
 
+    public function retryLoadStatus(): void
+    {
+        $retries = 0;
+        while ($this->status === null && $retries < $this->maxRetries) {
+            $this->loadVmStatus();
+            if ($this->status === null) {
+                usleep(200000); // 200ms delay between retries
+            }
+            $retries++;
+        }
+    }
+
     public function render()
     {
         return view('proxmox::server');
diff --git a/extensions/Servers/Proxmox/Livewire/Statistics.php b/extensions/Servers/Proxmox/Livewire/Statistics.php
index 9de9d690a..df66a6baa 100644
--- a/extensions/Servers/Proxmox/Livewire/Statistics.php
+++ b/extensions/Servers/Proxmox/Livewire/Statistics.php
@@ -151,6 +151,15 @@ class Statistics extends Component
     public function mount(Server $server): void
     {
         parent::mount($server);
+        
+        // Retry loading VM status if initial load failed (important for chart rendering)
+        $retries = 0;
+        while ($this->status === null && $retries < 3) {
+            usleep(100000); // 100ms delay between retries
+            $this->loadVmStatus();
+            $retries++;
+        }
+        
         $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
diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index c766394f0..e7484f111 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -1,4 +1,36 @@
 <div class="space-y-4">
+    @if(!$status)
+        {{-- Show loading placeholder if status is not yet loaded --}}
+        <div class="bg-background-secondary border border-neutral p-4 rounded-lg mb-4 flex flex-col">
+            <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center gap-3">
+                    <div class="bg-secondary/10 p-2 rounded-lg flex-shrink-0">
+                        <x-ri-server-line class="size-5 text-secondary" />
+                    </div>
+                    <span class="font-medium">{{ $server->service->product->name ?? 'Server' }}</span>
+                </div>
+                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg flex-shrink-0 text-warning bg-warning/20">
+                    <div class="size-5">
+                        <x-ri-loader-4-line class="animate-spin" />
+                    </div>
+                    <span class="text-sm font-medium">Loading...</span>
+                </div>
+            </div>
+            <div class="flex flex-row flex-wrap gap-4 mt-4">
+                <div class="flex flex-col">
+                    <span class="text-xs text-base/50">IPv4 Address</span>
+                    <span class="text-base">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-xs text-base/50">IPv6 Address</span>
+                    <span class="text-base">{{ $server->primaryIpv6->ip ?? 'None' }}</span>
+                </div>
+            </div>
+            <div class="mt-4 pt-4 border-t border-neutral">
+                <div class="text-sm text-base/50">Unable to fetch server status from Proxmox. <button wire:click="retryLoadStatus" class="text-primary hover:underline">Retry</button></div>
+            </div>
+        </div>
+    @else
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
         <div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
 
@@ -169,4 +201,5 @@
             </div>
         </div>
     </a>
+    @endif
 </div>
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 31088fc20..d60ddcca0 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" data-server-id="{{ $server->id }}">
         <style>
             .formRight select {
                 background-color: hsl(var(--color-background));
@@ -4860,7 +4860,7 @@
             return component;
         };
 
-        var maxMem = {{ $status->maxmem }};
+        var maxMem = {{ $status->maxmem ?? 0 }};
 
         var baseOptions = {
             chart: {
@@ -5211,10 +5211,25 @@
         }
 
         // Set up event listeners - these persist across Livewire navigation
+        // Store cleanup functions for each listener
+        var eventCleanupFunctions = [];
+        
         function setupEventListeners() {
-            // Note: Livewire 3 automatically cleans up listeners on navigation
+            // First, clean up any existing listeners
+            eventCleanupFunctions.forEach(function(cleanup) {
+                if (typeof cleanup === 'function') {
+                    cleanup();
+                }
+            });
+            eventCleanupFunctions = [];
+            
+            // Get the current server ID from the DOM (dynamically)
+            var serverIdElement = document.querySelector('[data-server-id]');
+            var currentServerId = serverIdElement ? serverIdElement.getAttribute('data-server-id') : '{{ $server->id }}';
+            
+            console.log('Setting up event listeners for server:', currentServerId);
 
-            Livewire.on('proxmox:stats:{{ $server->id }}:cpu', function(eventData) {
+            var cpuCleanup = Livewire.on('proxmox:stats:' + currentServerId + ':cpu', function(eventData) {
                 if (!cpuChart) {
                     console.warn('CPU chart not initialized');
                     return;
@@ -5247,8 +5262,9 @@
                     console.error('Error updating CPU chart:', e, eventData);
                 }
         });
+            eventCleanupFunctions.push(cpuCleanup);
 
-            Livewire.on('proxmox:stats:{{ $server->id }}:memory', function(eventData) {
+            var memoryCleanup = Livewire.on('proxmox:stats:' + currentServerId + ':memory', function(eventData) {
                 if (!memoryChart) {
                     console.warn('Memory chart not initialized');
                     return;
@@ -5279,8 +5295,9 @@
                     console.error('Error updating Memory chart:', e, eventData);
                 }
         });
+            eventCleanupFunctions.push(memoryCleanup);
 
-            Livewire.on('proxmox:stats:{{ $server->id }}:network', function(eventData) {
+            var networkCleanup = Livewire.on('proxmox:stats:' + currentServerId + ':network', function(eventData) {
                 if (!networkChart) {
                     console.warn('Network chart not initialized');
                     return;
@@ -5319,8 +5336,9 @@
                     console.error('Error updating Network chart:', e, eventData);
                 }
         });
+            eventCleanupFunctions.push(networkCleanup);
 
-            Livewire.on('proxmox:stats:{{ $server->id }}:disk', function(eventData) {
+            var diskCleanup = Livewire.on('proxmox:stats:' + currentServerId + ':disk', function(eventData) {
                 if (!diskChart) {
                     console.warn('Disk chart not initialized');
                     return;
@@ -5359,6 +5377,7 @@
                     console.error('Error updating Disk chart:', e, eventData);
                 }
             });
+            eventCleanupFunctions.push(diskCleanup);
         }
 
         // Set up event listeners
@@ -5586,8 +5605,23 @@
 
         // Reinitialize on Livewire navigation
         document.addEventListener('livewire:navigated', function() {
-            setupEventListeners();
-            initializeCharts();
+            // Add a small delay to ensure DOM is fully updated after navigation
+            setTimeout(function() {
+                // Reset data tracking flags
+                cpuChartHasData = false;
+                memoryChartHasData = false;
+                networkChartHasData = false;
+                diskChartHasData = false;
+                chartRetryAttempts = { cpu: 0, memory: 0, network: 0, disk: 0 };
+                
+                setupEventListeners();
+                initializeCharts();
+                
+                // Dispatch stats events after charts are initialized
+                setTimeout(function() {
+                    dispatchStatsWithRetry();
+                }, 300);
+            }, 100);
         });
 
         // Refresh stats periodically (every 2 minutes) using individual chart requests