From d1912871d31595bc807963413bd2a2f0ca743760 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 20:04:51 -0500
Subject: [PATCH] refactor: update caching duration for network analysis and
 enhance layout structure in statistics view for improved readability

---
 .../Servers/Proxmox/Livewire/Statistics.php   |   5 +-
 .../Proxmox/views/components/layout.blade.php | 149 ++++++++----------
 .../Proxmox/views/statistics.blade.php        |  75 ++++++---
 3 files changed, 129 insertions(+), 100 deletions(-)

diff --git a/extensions/Servers/Proxmox/Livewire/Statistics.php b/extensions/Servers/Proxmox/Livewire/Statistics.php
index 7842e2e52..6a84219a1 100644
--- a/extensions/Servers/Proxmox/Livewire/Statistics.php
+++ b/extensions/Servers/Proxmox/Livewire/Statistics.php
@@ -419,7 +419,10 @@ class Statistics extends Component
             $this->topPortsCurrentPage = 1;
 
             // Persist the computed analysis for a short period to speed up subsequent loads
-            Cache::put($cacheKey, $analysis, now()->addSeconds(30));
+            // Cache duration is set to 25 seconds (slightly less than the 30s poll interval)
+            // This ensures fresh data is fetched on each poll cycle while still preventing
+            // duplicate requests within the same cycle
+            Cache::put($cacheKey, $analysis, now()->addSeconds(25));
 
             // Reset retry count on successful load
             $this->networkAnalysisRetryCount = 0;
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 6c417356e..5bae5e700 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1229,98 +1229,87 @@
 
                 
                     <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
-                        <button wire:click="do('start')" 
-                            wire:loading.attr="disabled" 
-                            @if($vmStatus !== 'stopped') disabled @endif
-                            class="lte-btn lte-btn-success"
-                            style="border-radius: 0.375rem;">
-                            <span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                            <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
-                            <span wire:loading.remove wire:target="do('start')">Start</span>
-                            <span wire:loading wire:target="do('start')">Starting...</span>
-                        </button>
+                        <x-button.primary wire:click="do('start')" class="disabled:cursor-not-allowed"
+                            wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
+                            :disabled="$vmStatus !== 'stopped'">
+                            <x-loading target="do('start')" />
+                            <x-ri-play-fill class="size-4" />
+                            <div wire:loading.remove wire:target="do('start')">
+                                Start
+                            </div>
+                        </x-button.primary>
                         <div x-show="isAdvancedView" x-transition>
-                            <button wire:click="do('shutdown')" 
-                                wire:loading.attr="disabled" 
-                                @if($vmStatus !== 'running') disabled @endif
-                                class="lte-btn lte-btn-warning"
-                                style="border-radius: 0.375rem;">
-                                <span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
-                                <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
-                                <span wire:loading wire:target="do('shutdown')">Stopping...</span>
-                            </button>
+                            <x-button.secondary wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
+                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
+                                :disabled="$vmStatus !== 'running'">
+                                <x-loading target="do('shutdown')" />
+                                <x-ri-stop-fill class="size-4" />
+                                <div wire:loading.remove wire:target="do('shutdown')">
+                                    Stop (ACPI)
+                                </div>
+                            </x-button.secondary>
                         </div>
                         <div x-show="isAdvancedView" x-transition>
-                            <button wire:click="do('reboot')" 
-                                wire:loading.attr="disabled" 
-                                @if($vmStatus !== 'running') disabled @endif
-                                class="lte-btn lte-btn-info"
-                                style="border-radius: 0.375rem;">
-                                <span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
-                                <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
-                                <span wire:loading wire:target="do('reboot')">Rebooting...</span>
-                            </button>
+                            <x-button.secondary wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
+                                :disabled="$vmStatus !== 'running'">
+                                <x-loading target="do('reboot')" />
+                                <x-ri-loop-left-line class="size-4" />
+                                <div wire:loading.remove wire:target="do('reboot')">
+                                    Reboot (ACPI)
+                                </div>
+                            </x-button.secondary>
                         </div>
-                        <button wire:click="do('stop')" 
-                            wire:loading.attr="disabled" 
-                            @if($vmStatus !== 'running') disabled @endif
-                            class="lte-btn lte-btn-danger"
-                            style="border-radius: 0.375rem;">
-                            <span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                            <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
-                            <span wire:loading.remove wire:target="do('stop')">Power Off</span>
-                            <span wire:loading wire:target="do('stop')">Powering Off...</span>
-                        </button>
+                        <x-button.danger wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
+                            :disabled="$vmStatus !== 'running'">
+                            <x-loading target="do('stop')" />
+                            <x-ri-shut-down-line class="size-4" />
+                            <div wire:loading.remove wire:target="do('stop')">
+                                Power Off
+                            </div>
+                        </x-button.danger>
                     </div>
 
                     <div class="flex lg:hidden w-full flex-col gap-2">
                         <div class="flex flex-col gap-2 w-full">
-                            <button wire:click="do('start')" 
-                                wire:loading.attr="disabled" 
-                                @if($vmStatus !== 'stopped') disabled @endif
-                                class="lte-btn lte-btn-success"
-                                style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
-                                <span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
-                                <span wire:loading.remove wire:target="do('start')">Start</span>
-                                <span wire:loading wire:target="do('start')">Starting...</span>
-                            </button>
+                            <x-button.primary wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
+                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
+                                :disabled="$vmStatus !== 'stopped'">
+                                <x-loading target="do('start')" />
+                                <x-ri-play-fill class="size-4" />
+                                <div wire:loading.remove wire:target="do('start')">
+                                    Start
+                                </div>
+                            </x-button.primary>
                             <div x-show="isAdvancedView" x-transition>
-                                <button wire:click="do('shutdown')" 
-                                    wire:loading.attr="disabled" 
-                                    @if($vmStatus !== 'running') disabled @endif
-                                    class="lte-btn lte-btn-warning"
-                                    style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
-                                    <span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                    <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
-                                    <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
-                                    <span wire:loading wire:target="do('shutdown')">Stopping...</span>
-                                </button>
+                                <x-button.secondary wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
+                                    wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
+                                    :disabled="$vmStatus !== 'running'">
+                                    <x-loading target="do('shutdown')" />
+                                    <x-ri-stop-fill class="size-4" />
+                                    <div wire:loading.remove wire:target="do('shutdown')">
+                                        Stop (ACPI)
+                                    </div>
+                                </x-button.secondary>
                             </div>
                             <div x-show="isAdvancedView" x-transition>
-                                <button wire:click="do('reboot')" 
-                                    wire:loading.attr="disabled" 
-                                    @if($vmStatus !== 'running') disabled @endif
-                                    class="lte-btn lte-btn-info"
-                                    style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
-                                    <span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                    <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
-                                    <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
-                                    <span wire:loading wire:target="do('reboot')">Rebooting...</span>
-                                </button>
+                                <x-button.secondary wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
+                                    :disabled="$vmStatus !== 'running'">
+                                    <x-loading target="do('reboot')" />
+                                    <x-ri-loop-left-line class="size-4" />
+                                    <div wire:loading.remove wire:target="do('reboot')">
+                                        Reboot (ACPI)
+                                    </div>
+                                </x-button.secondary>
                             </div>
-                            <button wire:click="do('stop')" 
-                                wire:loading.attr="disabled" 
-                                @if($vmStatus !== 'running') disabled @endif
-                                class="lte-btn lte-btn-danger"
-                                style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
-                                <span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
-                                <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
-                                <span wire:loading.remove wire:target="do('stop')">Power Off</span>
-                                <span wire:loading wire:target="do('stop')">Powering Off...</span>
-                            </button>
+                            <x-button.danger wire:click="do('stop')"
+                                class="text-nowrap w-full disabled:cursor-not-allowed"
+                                :disabled="$vmStatus !== 'running'">
+                                <x-loading target="do('stop')" />
+                                <x-ri-shut-down-line class="size-4" />
+                                <div wire:loading.remove wire:target="do('stop')">
+                                    Power Off
+                                </div>
+                            </x-button.danger>
                         </div>
                     </div>
             </div>
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 585daf3ba..490feecbf 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -149,13 +149,15 @@
                     </div>
                 </div>
 
-                <div
-                    class="grid grid-cols-1 gap-6 xl:grid-cols-2 transition-[max-height] duration-300 ease-out"
-                    :class="chartsLoaded ? 'max-h-none' : 'max-h-[260px] overflow-hidden'"
+                <!-- Telemetry Grid - 2x2 Layout for all 4 metrics -->
+                <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
+
+                <!-- Processor Utilization Section -->
+                <section
+                    class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
+                    :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
                 >
-                <!-- Processor Utilization Graph -->
-            <div>
-                <div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
+                <div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
                     <div class="flex flex-col gap-2">
                         <div class="flex items-center justify-between">
                             <div>
@@ -245,11 +247,14 @@
                         <div id="cpu-chart" wire:ignore></div>
                     </div>
                 </div>
-            </div>
+                </section>
 
-                <!-- Network Traffic Graph -->
-            <div>
-                <div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
+                <!-- Network Traffic Section -->
+                <section
+                    class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
+                    :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
+                >
+                <div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
                     <div class="flex flex-col gap-2">
                         <div class="flex items-center justify-between">
                             <div>
@@ -339,11 +344,14 @@
                         <div id="network-chart" wire:ignore></div>
                     </div>
                 </div>
-            </div>
+                </section>
 
-                <!-- Memory Utilization Graph -->
-            <div>
-                <div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
+                <!-- Memory Utilization Section -->
+                <section
+                    class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
+                    :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
+                >
+                <div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
                     <div class="flex flex-col gap-2">
                         <div class="flex items-center justify-between">
                             <div>
@@ -433,11 +441,14 @@
                         <div id="memory-chart" wire:ignore></div>
                     </div>
                 </div>
-            </div>
+                </section>
 
-                <!-- Storage I/O Graph -->
-            <div>
-                <div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
+                <!-- Storage I/O Section -->
+                <section
+                    class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
+                    :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
+                >
+                <div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
                     <div class="flex flex-col gap-2">
                         <div class="flex items-center justify-between">
                             <div>
@@ -527,7 +538,9 @@
                         <div id="disk-chart" wire:ignore></div>
                     </div>
                 </div>
-            </div>
+                </section>
+
+                </div> <!-- End Telemetry Grid -->
         </div>
         </section>
 
@@ -2185,6 +2198,7 @@
 
     <!-- Network Analysis Section -->
     <div
+        wire:poll.30s="loadNetworkAnalysis"
         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%;"
@@ -2264,9 +2278,32 @@
                     <p class="text-xs text-base/60">
                         Deep visibility into firewall sessions, security threats, and top consumers of bandwidth powered by the Core Router API.
                     </p>
+                    @if($networkAnalysis['lastUpdated'])
+                    <div class="flex items-center gap-2 mt-1">
+                        <span class="relative flex h-2 w-2">
+                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success-400 opacity-75"></span>
+                            <span class="relative inline-flex rounded-full h-2 w-2 bg-success-500"></span>
+                        </span>
+                        <p class="text-xs text-base/50">
+                            Streaming · Last updated {{ \Carbon\Carbon::parse($networkAnalysis['lastUpdated'])->diffForHumans() }}
+                        </p>
+                    </div>
+                    @endif
                 </div>
             </div>
             <div class="flex items-center gap-2">
+                <button
+                    type="button"
+                    wire:click="loadNetworkAnalysis"
+                    wire:loading.attr="disabled"
+                    wire:loading.class="opacity-50 cursor-not-allowed"
+                    class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
+                    title="Refresh Now"
+                >
+                    <x-ri-refresh-line class="size-4" wire:loading.class="animate-spin" wire:target="loadNetworkAnalysis" />
+                    <span wire:loading.remove wire:target="loadNetworkAnalysis">Refresh</span>
+                    <span wire:loading wire:target="loadNetworkAnalysis">Refreshing...</span>
+                </button>
                 <button
                     type="button"
                     wire:click="exportNetworkAnalysis"