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

Remove loading section from live telemetry

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-01-25 19:10:09 -05:00
parent 59c79d0dbc
commit b072ed88f2
1 changed files with 1 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
extensions/Servers/Proxmox/views/statistics.blade.php
View File

@@ -98,82 +98,11 @@
</div>
<!-- Performance Telemetry -->
<style>
@keyframes telemetryGrow {
from { transform: scale(0.98); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.telemetry-grow {
animation: telemetryGrow 0.4s ease-out forwards;
}
/* Ensure loading shows by default before Alpine initializes */
[x-cloak] { display: none !important; }
.telemetry-loader {
color: #008FFB;
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.3s infinite linear;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%, 100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
</style>
<section
wire:poll.120s="stats"
x-data="{ chartsLoaded: false, loadingProgress: 0 }"
@proxmox-all-stats-loaded.window="chartsLoaded = true"
@proxmox-chart-loaded.window="loadingProgress = Math.min(100, loadingProgress + 25)"
class="bg-background-secondary border border-neutral rounded-2xl shadow-sm overflow-hidden"
>
<!-- Loading State - compact bar, visible by default -->
<div
x-show="!chartsLoaded"
class="flex items-center justify-center gap-4 py-4 px-4"
>
<!-- Circular Loading Spinner -->
<div class="telemetry-loader"></div>
<!-- Loading text -->
<span class="text-base/70 text-sm">Loading Telemetry...</span>
</div>
<!-- Content - hidden by default with x-cloak until Alpine shows it -->
<div
x-cloak
x-show="chartsLoaded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
class="p-6 space-y-6"
>
<div class="p-6 space-y-6">
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-lg font-semibold flex items-center gap-2">
@@ -5157,29 +5086,6 @@
}, chartRetryDelay);
}
// Check if all charts have loaded and dispatch event
function checkAllChartsLoaded() {
var allExpectedChartsHaveData =
(!cpuChartExpected || cpuChartHasData) &&
(!memoryChartExpected || memoryChartHasData) &&
(!networkChartExpected || networkChartHasData) &&
(!diskChartExpected || diskChartHasData);
if (allExpectedChartsHaveData) {
console.log('All expected charts have received data.');
try {
window.dispatchEvent(new CustomEvent('proxmox-all-stats-loaded'));
} catch (e) {}
}
}
// Dispatch progress event when individual chart loads
function dispatchChartLoaded(chartType) {
try {
window.dispatchEvent(new CustomEvent('proxmox-chart-loaded', { detail: { chart: chartType } }));
} catch (e) {}
}
function dispatchStatsWithRetry() {
// Reset retry counters
chartRetryAttempts = { cpu: 0, memory: 0, network: 0, disk: 0 };
@@ -5344,10 +5250,7 @@
}),
}]);
// Mark that this chart has successfully received data
cpuChartHasData = true;
dispatchChartLoaded('cpu');
checkAllChartsLoaded();
} catch (e) {
console.error('Error updating CPU chart:', e, eventData);
}
@@ -5378,10 +5281,7 @@
}),
}]);
// Mark that this chart has successfully received data
memoryChartHasData = true;
dispatchChartLoaded('memory');
checkAllChartsLoaded();
} catch (e) {
console.error('Error updating Memory chart:', e, eventData);
}
@@ -5440,10 +5340,7 @@
})
}]);
// Mark that this chart has successfully received data
networkChartHasData = true;
dispatchChartLoaded('network');
checkAllChartsLoaded();
} catch (e) {
console.error('Error updating Network chart:', e, eventData);
}
@@ -5482,10 +5379,7 @@
})
}]);
// Mark that this chart has successfully received data
diskChartHasData = true;
dispatchChartLoaded('disk');
checkAllChartsLoaded();
} catch (e) {
console.error('Error updating Disk chart:', e, eventData);
}