fix: add wire:ignore to network traffic container and Chart.js retry logic
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:
@@ -820,7 +820,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Network Traffic Sections -->
|
<!-- 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 -->
|
<!-- Initial placeholder; replaced on first successful poll -->
|
||||||
<div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
|
<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>
|
<p class="text-sm text-base/60">Loading live network statistics…</p>
|
||||||
@@ -1643,9 +1643,21 @@
|
|||||||
if (!canvas || charts[interfaceId]) return;
|
if (!canvas || charts[interfaceId]) return;
|
||||||
|
|
||||||
if (typeof Chart === 'undefined') {
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
// Reset retry counter on success
|
||||||
|
if (createChart._retries) delete createChart._retries[interfaceId];
|
||||||
|
|
||||||
if (!interfaceData || !interfaceData.history) {
|
if (!interfaceData || !interfaceData.history) {
|
||||||
console.error('No history data available for chart');
|
console.error('No history data available for chart');
|
||||||
|
|||||||
Reference in New Issue
Block a user