37 lines
2.4 KiB
PHP
37 lines
2.4 KiB
PHP
<div class="space-y-5">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-semibold tracking-tight text-ink">{{ __('admin.nav.hosts') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('admin.hosts_sub') }}</p>
|
|
</div>
|
|
|
|
@php $hd = ['[animation-delay:60ms]', '[animation-delay:120ms]', '[animation-delay:180ms]', '[animation-delay:240ms]']; @endphp
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
@foreach ($rows as $i => $h)
|
|
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise {{ $hd[$i] ?? '' }}">
|
|
<div class="flex items-center gap-3">
|
|
<span class="grid size-10 shrink-0 place-items-center rounded-lg bg-surface-2 text-accent-text"><x-ui.icon name="server" class="size-5" /></span>
|
|
<div class="min-w-0">
|
|
<p class="font-mono font-semibold text-ink">{{ $h['name'] }}</p>
|
|
<p class="font-mono text-xs text-muted">{{ $h['ip'] }} · {{ $h['instances'] }} {{ __('admin.instances_label') }}</p>
|
|
</div>
|
|
<x-ui.badge :status="$h['status'] === 'warning' ? 'warning' : 'active'" class="ml-auto">{{ __('admin.status.'.($h['status'] === 'warning' ? 'warning' : 'active')) }}</x-ui.badge>
|
|
</div>
|
|
<div class="mt-4 space-y-3">
|
|
<div>
|
|
<div class="flex justify-between text-xs"><span class="text-muted">{{ __('admin.storage_used') }}</span><span class="font-mono text-body">{{ $h['used'] }}%</span></div>
|
|
<div class="mt-1 h-1.5 overflow-hidden rounded-pill bg-surface-2">
|
|
<div class="h-full rounded-pill {{ $h['used'] >= 80 ? 'bg-danger' : 'bg-accent' }}" style="width: {{ $h['used'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-xs"><span class="text-muted">CPU</span><span class="font-mono text-body">{{ $h['cpu'] }}%</span></div>
|
|
<div class="mt-1 h-1.5 overflow-hidden rounded-pill bg-surface-2">
|
|
<div class="h-full rounded-pill {{ $h['cpu'] >= 80 ? 'bg-danger' : 'bg-accent' }}" style="width: {{ $h['cpu'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|