Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: add wire:ignore to network traffic container and Chart.js retry logic

Browse Source 
Root cause: wire:poll.2s on layout div caused Livewire to morph/overwrite
the JavaScript-rendered network traffic interface cards every 2 seconds,
replacing them with the server-rendered placeholder HTML.

- Add wire:ignore to #network-traffic-container to prevent Livewire DOM
  morphing from destroying dynamically rendered content
- Add retry logic (10x at 300ms) to createChart() for when Chart.js CDN
  hasn't finished loading (e.g. during wire:navigate)
This commit is contained in:
Joseph.Rawlings
2026-03-01 05:08:51 -05:00
parent f688779e44
commit 990c24fafe
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -820,7 +820,7 @@
</div>
<!-- Network Traffic Sections -->
<div id="network-traffic-container" data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
<div id="network-traffic-container" wire:ignore data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
<!-- Initial placeholder; replaced on first successful poll -->
<div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
<p class="text-sm text-base/60">Loading live network statistics…</p>
@@ -1643,9 +1643,21 @@
if (!canvas || charts[interfaceId]) return;
if (typeof Chart === 'undefined') {
console.error('Chart.js is not loaded');
// Chart.js may still be loading (async CDN via wire:navigate)
// Retry up to 10 times at 300ms intervals
if (!createChart._retries) createChart._retries = {};
const retryCount = createChart._retries[interfaceId] || 0;
if (retryCount < 10) {
createChart._retries[interfaceId] = retryCount + 1;
setTimeout(() => createChart(interfaceId, interfaceData), 300);
} else {
console.error('Chart.js failed to load after 10 retries');
delete createChart._retries[interfaceId];
}
return;
}
// Reset retry counter on success
if (createChart._retries) delete createChart._retries[interfaceId];
if (!interfaceData || !interfaceData.history) {
console.error('No history data available for chart');