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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user