Fix null status handling in overview page

- Add try-catch around loadVmStatus calls in Overview.php
- Add null checks in checkStatus method
- Wrap entire overview content in @if(\) / @else block
- Show friendly error state with retry button when status unavailable
This commit is contained in:
2025-12-16 08:02:16 -05:00
parent 0125349eb1
commit bf346cecca
2 changed files with 43 additions and 4 deletions

View File

@@ -43,7 +43,11 @@ class Overview extends Component
parent::mount($server);
if (is_null($this->status)) {
$this->loadVmStatus();
try {
$this->loadVmStatus();
} catch (\Throwable $e) {
\Log::error('Overview: Failed to load VM status', ['error' => $e->getMessage()]);
}
}
$this->hostname = $server->hostname ?? ($this->status->name ?? '');
@@ -60,9 +64,24 @@ class Overview extends Component
public function checkStatus()
{
$currentStatus = $this->status->status;
$this->loadVmStatus();
if ($this->status->status != $currentStatus) {
if (!$this->status) {
try {
$this->loadVmStatus();
} catch (\Throwable $e) {
\Log::error('Overview: checkStatus failed', ['error' => $e->getMessage()]);
}
return;
}
$currentStatus = $this->status->status ?? null;
try {
$this->loadVmStatus();
} catch (\Throwable $e) {
\Log::error('Overview: checkStatus loadVmStatus failed', ['error' => $e->getMessage()]);
return;
}
if ($this->status && ($this->status->status ?? null) != $currentStatus) {
$this->fastPolling = false;
}
}

View File

@@ -5,6 +5,25 @@
:status-polling="true"
:status-polling-interval="'2s'"
>
@if(!$status)
{{-- Error state when status cannot be loaded --}}
<div class="bg-danger/10 border border-danger/30 rounded-xl p-6 mt-8">
<div class="flex items-center gap-3 mb-4">
<x-ri-error-warning-fill class="size-6 text-danger" />
<h3 class="text-lg font-semibold text-danger">Unable to Load Server Status</h3>
</div>
<p class="text-base/70 mb-4">We couldn't retrieve the current status from the hypervisor. This may be due to:</p>
<ul class="list-disc list-inside text-base/70 mb-4 space-y-1">
<li>Temporary connectivity issues with the Proxmox cluster</li>
<li>The VM may be in an intermediate state</li>
<li>Network timeout while fetching data</li>
</ul>
<button wire:click="loadVmStatus" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">
<x-ri-refresh-line class="size-4 inline mr-2" />
Retry
</button>
</div>
@else
<script>
function copyToClipboard(text, buttonEl) {
navigator.clipboard.writeText(text).then(() => {
@@ -2392,5 +2411,6 @@
window.networkTrafficData = null;
</script>
@endonce
@endif
</x-proxmox::layout>