Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
104 lines
3.5 KiB
PHP
104 lines
3.5 KiB
PHP
{{--
|
|
Resource Gauge Component - TailServer Theme
|
|
Shows a circular or linear gauge for resource usage
|
|
|
|
Usage:
|
|
<x-proxmox::ui.resource-gauge :value="75" label="CPU" />
|
|
<x-proxmox::ui.resource-gauge :value="45" label="Memory" :max="100" suffix="%" />
|
|
--}}
|
|
|
|
@props([
|
|
'value' => 0,
|
|
'max' => 100,
|
|
'label',
|
|
'sublabel' => null,
|
|
'suffix' => '%',
|
|
'prefix' => null,
|
|
'icon' => null,
|
|
'gradient' => null,
|
|
'color' => 'auto',
|
|
])
|
|
|
|
@php
|
|
$percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
|
|
|
|
// Auto-color based on usage
|
|
if ($color === 'auto') {
|
|
if ($percent >= 90) {
|
|
$color = 'danger';
|
|
} elseif ($percent >= 70) {
|
|
$color = 'warning';
|
|
} else {
|
|
$color = 'success';
|
|
}
|
|
}
|
|
|
|
$colorClasses = [
|
|
'primary' => 'text-primary',
|
|
'success' => 'text-success',
|
|
'warning' => 'text-warning',
|
|
'danger' => 'text-danger',
|
|
'info' => 'text-info',
|
|
];
|
|
|
|
$bgColorClasses = [
|
|
'primary' => 'bg-primary',
|
|
'success' => 'bg-success',
|
|
'warning' => 'bg-warning',
|
|
'danger' => 'bg-danger',
|
|
'info' => 'bg-info',
|
|
];
|
|
|
|
$textColor = $colorClasses[$color] ?? $colorClasses['primary'];
|
|
$bgColor = $bgColorClasses[$color] ?? $bgColorClasses['primary'];
|
|
|
|
$badgeLabel = match(true) {
|
|
$percent >= 100 => 'Over entitlement',
|
|
$percent >= 85 => 'Watchlist',
|
|
default => 'Healthy',
|
|
};
|
|
|
|
$badgeClass = match(true) {
|
|
$percent >= 100 => 'text-danger bg-danger/15',
|
|
$percent >= 85 => 'text-warning bg-warning/15',
|
|
default => 'text-success bg-success/15',
|
|
};
|
|
@endphp
|
|
|
|
<div {{ $attributes->class(['border border-neutral/15 rounded-2xl p-5 bg-gradient-to-br from-background to-neutral/5 shadow-sm hover:shadow-md transition-shadow duration-300 flex flex-col gap-4']) }}>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p class="text-xs font-semibold tracking-wide uppercase text-base/50">{{ $label }}</p>
|
|
<p class="text-xl font-bold tracking-tight">
|
|
@if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
|
|
</p>
|
|
@if($sublabel)
|
|
<p class="text-xs text-base/50 mt-0.5">{{ $sublabel }}</p>
|
|
@endif
|
|
</div>
|
|
<span class="text-[10px] font-semibold px-2.5 py-1 rounded-full {{ $badgeClass }} shadow-sm">
|
|
{{ $badgeLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between text-xs text-base/50 mb-1.5">
|
|
<span>Usage</span>
|
|
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
|
|
</div>
|
|
<div class="h-2.5 rounded-full bg-neutral/10 overflow-hidden shadow-inner">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-700 ease-out relative overflow-hidden"
|
|
@if($gradient)
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
@else
|
|
style="width: {{ min($percent, 130) }}%;"
|
|
class="{{ $bgColor }}"
|
|
@endif
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|