Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
102 lines
3.2 KiB
PHP
102 lines
3.2 KiB
PHP
{{--
|
|
Resource Gauge Component - shadcn-style
|
|
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(['rounded-xl border bg-card p-4 shadow-sm flex flex-col gap-4']) }}>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-0.5">
|
|
<p class="text-xs font-medium text-muted-foreground">{{ $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-muted-foreground">{{ $sublabel }}</p>
|
|
@endif
|
|
</div>
|
|
<span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClass }}">
|
|
{{ $badgeLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-muted-foreground">Usage</span>
|
|
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
|
|
</div>
|
|
<div class="h-2 rounded-full bg-primary/20 overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-300"
|
|
@if($gradient)
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
@else
|
|
style="width: {{ min($percent, 130) }}%;"
|
|
class="{{ $bgColor }}"
|
|
@endif
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|