Joseph.Rawlings
af62a16354
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals. - Updated various modal button styles for consistency and improved accessibility. - Adjusted transition durations for modal animations to enhance user experience. - Added aria-labels to close buttons for better screen reader support.
93 lines
3.1 KiB
PHP
93 lines
3.1 KiB
PHP
{{--
|
|
Resource Gauge Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
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';
|
|
}
|
|
}
|
|
|
|
$barColorClasses = [
|
|
'primary' => 'bg-primary',
|
|
'success' => 'bg-success',
|
|
'warning' => 'bg-warning',
|
|
'danger' => 'bg-error',
|
|
'info' => 'bg-info',
|
|
];
|
|
|
|
$barColorClass = $barColorClasses[$color] ?? $barColorClasses['primary'];
|
|
|
|
$badgeLabel = match(true) {
|
|
$percent >= 100 => 'Over entitlement',
|
|
$percent >= 85 => 'Watchlist',
|
|
default => 'Healthy',
|
|
};
|
|
|
|
$badgeClasses = match(true) {
|
|
$percent >= 100 => 'bg-error/10 text-error',
|
|
$percent >= 85 => 'bg-warning/15 text-yellow-700 dark:text-yellow-400',
|
|
default => 'bg-success/10 text-success',
|
|
};
|
|
@endphp
|
|
|
|
<div {{ $attributes->class(['flex flex-col gap-4 bg-background dark:bg-background-secondary border border-neutral rounded-lg p-5 shadow-sm']) }}>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-medium text-secondary dark:text-base/50 mb-1">{{ $label }}</p>
|
|
<p class="text-xl font-bold text-primary dark:text-base/90 leading-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-secondary dark:text-base/50 mt-1">{{ $sublabel }}</p>
|
|
@endif
|
|
</div>
|
|
<span class="shrink-0 px-2.5 py-1 text-xs font-medium rounded-full {{ $badgeClasses }}">
|
|
{{ $badgeLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary dark:text-base/50">Usage</span>
|
|
<span class="font-semibold text-primary dark:text-base/90">{{ number_format($percent, 1) }}%</span>
|
|
</div>
|
|
<div class="h-2 bg-neutral/30 rounded-full overflow-hidden">
|
|
<div
|
|
class="{{ $barColorClass }} h-full rounded-full transition-all duration-500"
|
|
@if($gradient)
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
@else
|
|
style="width: {{ min($percent, 130) }}%;"
|
|
@endif
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|