Increase status polling interval to 5 seconds across Proxmox views; update layout styles and add new CSS for improved UI elements and animations.

This commit is contained in:
2026-03-01 03:47:26 -05:00
parent e6b29a4871
commit 8c6df92fe7
22 changed files with 712 additions and 1313 deletions

View File

@@ -3,7 +3,7 @@
view="overview"
:status="$status"
:status-polling="true"
:status-polling-interval="'2s'"
:status-polling-interval="'5s'"
>
<script data-navigate-track>
// Define copyToClipboard only if not already defined (prevent duplicates on navigation)
@@ -64,7 +64,7 @@
</div>
</div>
<div class="flex items-center" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
<div class="flex items-center" wire:poll.{{ $fastPolling ? '5s' : '30s' }}.visible="checkStatus"
wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 min-w-0">
@@ -128,57 +128,7 @@
</div>
</div>
</div>
<style>
progress {
border-radius: var(--radius-lg);
background-color: hsl(var(--color-background));
border: 1px solid hsl(var(--color-neutral));
width: 100%;
overflow: hidden;
}
progress[value]::-webkit-progress-bar {
background-color: hsl(var(--color-background));
}
progress[value]#memory::-webkit-progress-value {
background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
border: 1px solid hsl(var(--color-success));
border-radius: var(--radius-lg);
}
progress[value]#memory::-moz-progress-bar {
background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
border: 1px solid hsl(var(--color-success));
border-radius: var(--radius-lg);
}
progress[value]#cpu::-webkit-progress-value {
background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
border: 1px solid hsl(var(--color-info));
border-radius: var(--radius-lg);
}
progress[value]#cpu::-moz-progress-bar {
background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
border: 1px solid hsl(var(--color-info));
border-radius: var(--radius-lg);
}
.formRight select {
background-color: hsl(var(--color-background));
border: 1px solid hsl(var(--color-neutral));
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
}
.formRight select:focus {
outline: none;
box-shadow: 0 0 0 2px hsl(var(--color-secondary));
}
</style>
<!-- Styles moved to /css/proxmox.css -->
</div>
@@ -1237,65 +1187,9 @@
@once
<style>
/* Network Traffic Bars */
.network-flow-bar {
position: relative;
height: 8px;
background: rgba(128, 128, 128, 0.1);
border-radius: 9999px;
overflow: hidden;
}
.network-flow-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 9999px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.network-flow-fill.download {
background: linear-gradient(90deg,
rgba(34, 197, 94, 0.3),
rgba(34, 197, 94, 0.8),
rgba(34, 197, 94, 0.3)
);
}
.network-flow-fill.upload {
background: linear-gradient(90deg,
rgba(59, 130, 246, 0.3),
rgba(59, 130, 246, 0.8),
rgba(59, 130, 246, 0.3)
);
}
/* Sparkline chart styles */
.sparkline-chart {
width: 100%;
height: 40px;
}
.chart-dropdown {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.chart-dropdown.open {
max-height: 400px;
transition: max-height 0.5s ease-in;
}
/* Ensure network traffic container is visible */
#network-traffic-container {
min-height: 100px;
}
</style>
<!-- Styles moved to /css/proxmox.css -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" data-navigate-track></script>
<script defer src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" data-navigate-track></script>
<script data-navigate-track>
// Use a namespace to prevent duplicate initialization on Livewire navigation
window.__networkTrafficInitialized = window.__networkTrafficInitialized || false;