242 lines
14 KiB
PHP
242 lines
14 KiB
PHP
@php
|
|
// Threshold tone for gauges/bars: >=90 offline, >=75 warning, else online.
|
|
$tone = fn (int $v): string => $v >= 90 ? 'offline' : ($v >= 75 ? 'warning' : 'online');
|
|
$barColor = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline'];
|
|
$statusLabel = ['online' => 'Online', 'warning' => 'Warnung', 'offline' => 'Offline'][$server->status] ?? ucfirst($server->status);
|
|
|
|
$specs = $server->specs ?? [];
|
|
$cores = $specs['cores'] ?? null;
|
|
$ramGb = $specs['ram_gb'] ?? null;
|
|
$diskGb = $specs['disk_gb'] ?? null;
|
|
$ramUsed = $ramGb !== null ? round((float) $ramGb * $server->mem / 100, 1) : null;
|
|
$diskUsed = $diskGb !== null ? (int) round((float) $diskGb * $server->disk / 100) : null;
|
|
|
|
$specRows = [
|
|
['Architektur', $specs['arch'] ?? '—'],
|
|
['Kernel', $specs['kernel'] ?? '—'],
|
|
['Virtualisierung', $specs['virt'] ?? '—'],
|
|
['Kerne', $cores ?? '—'],
|
|
['RAM', $ramGb !== null ? $ramGb.' GB' : '—'],
|
|
['Disk', $diskGb !== null ? $diskGb.' GB' : '—'],
|
|
];
|
|
|
|
$vitals = [
|
|
['label' => 'CPU', 'icon' => 'cpu', 'val' => (int) $server->cpu, 'sub' => ($loadAvg > 0 ? 'Last '.number_format($loadAvg, 2).' · ' : '').($cores ? $cores.' Kerne' : '—')],
|
|
['label' => 'RAM', 'icon' => 'activity', 'val' => (int) $server->mem, 'sub' => $ramUsed !== null ? $ramUsed.' / '.$ramGb.' GB' : '—'],
|
|
['label' => 'Disk', 'icon' => 'server', 'val' => (int) $server->disk, 'sub' => $diskUsed !== null ? $diskUsed.' / '.$diskGb.' GB' : '—'],
|
|
];
|
|
@endphp
|
|
|
|
<div class="space-y-5" wire:poll.10s="pollMetrics" wire:init="load">
|
|
<a href="{{ route('servers.index') }}"
|
|
class="inline-flex min-h-11 items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.2em] text-ink-3 hover:text-ink-2">
|
|
<x-icon name="switcher" class="h-3.5 w-3.5 rotate-90" />
|
|
Zurück zur Flotte
|
|
</a>
|
|
|
|
{{-- Hero header --}}
|
|
<div class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-line bg-surface p-5 shadow-panel">
|
|
<div class="flex min-w-0 items-center gap-4">
|
|
<span @class([
|
|
'grid h-12 w-12 shrink-0 place-items-center rounded-lg border',
|
|
'border-online/30 bg-online/10 text-online' => $server->status === 'online',
|
|
'border-warning/30 bg-warning/10 text-warning' => $server->status === 'warning',
|
|
'border-offline/30 bg-offline/10 text-offline' => $server->status === 'offline',
|
|
])>
|
|
<x-icon name="server" class="h-6 w-6" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2.5">
|
|
<h2 class="truncate font-display text-2xl font-semibold text-ink">{{ $server->name }}</h2>
|
|
<x-status-pill :status="$server->status">{{ $statusLabel }}</x-status-pill>
|
|
</div>
|
|
<p class="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-[11px] text-ink-3">
|
|
<span class="text-ink-2">{{ $server->hostname }}</span>
|
|
<span class="text-ink-4">·</span>
|
|
<span>{{ $server->ip }}</span>
|
|
<span class="text-ink-4">·</span>
|
|
<span>{{ $server->os }}</span>
|
|
<span class="text-ink-4">·</span>
|
|
<span>Uptime {{ $server->uptime ?: '—' }}</span>
|
|
<span class="text-ink-4">·</span>
|
|
<span>zuletzt {{ optional($server->last_seen_at)->diffForHumans() ?? '—' }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<x-btn variant="secondary" wire:click="$dispatch('openModal', { component: 'modals.edit-credential', arguments: { serverId: {{ $server->id }} } })">
|
|
<x-icon name="shield" class="h-3.5 w-3.5" /> Zugang
|
|
</x-btn>
|
|
<x-btn variant="secondary" wire:click="openFiles">
|
|
<x-icon name="folder" class="h-3.5 w-3.5" /> Dateien
|
|
</x-btn>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($ready && ! $connected)
|
|
<div class="flex items-center gap-2.5 rounded-lg border border-warning/25 bg-warning/10 px-4 py-3">
|
|
<x-icon name="alert" class="h-4 w-4 shrink-0 text-warning" />
|
|
<p class="text-sm text-ink-2">Keine Live-Verbindung — gezeigt werden die zuletzt gespeicherten Werte. Zugang/Erreichbarkeit prüfen.</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Vitals: live gauges, full width, dense --}}
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
|
@foreach ($vitals as $v)
|
|
<div class="flex items-center gap-4 rounded-xl border border-line bg-surface p-4 shadow-panel">
|
|
<x-ring :value="$v['val']" size="lg" :tone="$tone($v['val'])" />
|
|
<div class="min-w-0">
|
|
<p class="flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.2em] text-accent-text">
|
|
<x-icon :name="$v['icon']" class="h-3.5 w-3.5" />{{ $v['label'] }}
|
|
</p>
|
|
<p class="mt-2 font-mono text-[11px] leading-relaxed text-ink-4">{{ $v['sub'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
@if ($ready)
|
|
{{-- Spezifikationen + Sicherheit --}}
|
|
<div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
|
<x-panel title="Spezifikationen" subtitle="Hardware-Profil" :padded="false">
|
|
<dl class="divide-y divide-line">
|
|
@foreach ($specRows as [$key, $val])
|
|
<div class="flex items-center justify-between gap-3 px-4 py-2.5 sm:px-5">
|
|
<dt class="text-sm text-ink-2">{{ $key }}</dt>
|
|
<dd class="truncate font-mono text-sm text-ink">{{ $val }}</dd>
|
|
</div>
|
|
@endforeach
|
|
</dl>
|
|
</x-panel>
|
|
|
|
<x-panel title="Sicherheit" subtitle="Hardening-Checkliste" :padded="false">
|
|
<div class="divide-y divide-line">
|
|
@foreach ($hardening as $check)
|
|
<div @class([
|
|
'flex items-center gap-3 border-l-2 px-4 py-3 sm:px-5',
|
|
'border-online' => $check['status'] === 'online',
|
|
'border-warning' => $check['status'] === 'warning',
|
|
'border-offline' => $check['status'] === 'offline',
|
|
])>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-sm text-ink">{{ $check['label'] }}</p>
|
|
<p class="truncate font-mono text-[11px] text-ink-3">{{ $check['detail'] }}</p>
|
|
</div>
|
|
<x-status-pill :status="$check['status']" class="shrink-0">
|
|
{{ $check['status'] === 'online' ? 'OK' : 'Fehlt' }}
|
|
</x-status-pill>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
</div>
|
|
|
|
{{-- Volumes + Netzwerk-Interfaces --}}
|
|
<div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
|
<x-panel title="Volumes" :subtitle="count($volumes) . ' Mountpoints'" :padded="false">
|
|
<div class="divide-y divide-line">
|
|
@forelse ($volumes as $vol)
|
|
@php $vt = $tone((int) $vol['used']); @endphp
|
|
<div class="px-4 py-3 sm:px-5">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<p class="truncate font-mono text-sm text-ink">{{ $vol['mount'] }}</p>
|
|
<p class="shrink-0 font-mono text-[11px] text-ink-3">
|
|
<span class="text-ink-2">{{ $vol['fs'] }}</span> · {{ $vol['size'] }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-center gap-3">
|
|
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-inset">
|
|
<div class="h-full rounded-full {{ $barColor[$vt] }}" style="width: {{ $vol['used'] }}%"></div>
|
|
</div>
|
|
<span class="tabular w-10 shrink-0 text-right font-mono text-[11px] text-ink-2">{{ $vol['used'] }}%</span>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="px-5 py-8 text-center font-mono text-[11px] text-ink-3">Keine Volumes gelesen.</p>
|
|
@endforelse
|
|
</div>
|
|
</x-panel>
|
|
|
|
<x-panel title="Netzwerk-Interfaces" :subtitle="count($interfaces) . ' Schnittstellen'" :padded="false">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full min-w-[34rem] text-left">
|
|
<thead>
|
|
<tr class="border-b border-line font-mono text-[10px] uppercase tracking-wider text-ink-4">
|
|
<th class="px-4 py-2 font-medium sm:px-5">Name</th>
|
|
<th class="px-4 py-2 font-medium">IP</th>
|
|
<th class="px-4 py-2 font-medium">MAC</th>
|
|
<th class="px-4 py-2 text-right font-medium">RX</th>
|
|
<th class="px-4 py-2 pr-4 text-right font-medium sm:pr-5">TX</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-line">
|
|
@foreach ($interfaces as $if)
|
|
<tr class="font-mono text-[11px] text-ink-2">
|
|
<td class="px-4 py-2.5 text-ink sm:px-5">{{ $if['name'] }}</td>
|
|
<td class="px-4 py-2.5">{{ $if['ip'] }}</td>
|
|
<td class="px-4 py-2.5">{{ $if['mac'] }}</td>
|
|
<td class="tabular px-4 py-2.5 text-right">{{ $if['rx'] }}</td>
|
|
<td class="tabular px-4 py-2.5 pr-4 text-right sm:pr-5">{{ $if['tx'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</x-panel>
|
|
</div>
|
|
|
|
{{-- SSH-Schlüssel --}}
|
|
<x-panel title="SSH-Schlüssel" :subtitle="count($sshKeys) . ' autorisiert'" :padded="false">
|
|
<x-slot:actions>
|
|
<x-btn variant="accent" wire:click="$dispatch('openModal', { component: 'modals.add-ssh-key', arguments: { serverId: {{ $server->id }} } })">
|
|
<x-icon name="plus" class="h-3.5 w-3.5" /> Schlüssel hinzufügen
|
|
</x-btn>
|
|
</x-slot:actions>
|
|
<div class="divide-y divide-line">
|
|
@forelse ($sshKeys as $key)
|
|
<div class="flex items-center gap-3 px-4 py-3 sm:px-5">
|
|
<span class="grid h-7 w-7 shrink-0 place-items-center rounded-sm bg-raised text-ink-3">
|
|
<x-icon name="shield" class="h-3.5 w-3.5" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<p class="truncate font-mono text-sm text-ink">{{ $key['comment'] }}</p>
|
|
<x-badge tone="neutral" class="shrink-0">{{ $key['type'] }}</x-badge>
|
|
</div>
|
|
<p class="truncate font-mono text-[11px] text-ink-3">{{ $key['fingerprint'] }}</p>
|
|
</div>
|
|
<x-btn variant="ghost-danger" icon wire:click="confirmKeyRemoval(@js($key['fingerprint']), @js($key['comment']))" title="Schlüssel entfernen">
|
|
<x-icon name="trash" class="h-3.5 w-3.5" />
|
|
</x-btn>
|
|
</div>
|
|
@empty
|
|
<p class="px-5 py-8 text-center font-mono text-[11px] text-ink-3">Keine autorisierten Schlüssel.</p>
|
|
@endforelse
|
|
</div>
|
|
</x-panel>
|
|
@else
|
|
{{-- skeletons for the SSH-loaded sections --}}
|
|
<div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
|
@foreach (['Spezifikationen', 'Sicherheit'] as $t)
|
|
<x-panel :title="$t" subtitle="lädt…" :padded="false">
|
|
<div class="space-y-3 p-4 sm:p-5">
|
|
<x-skeleton class="h-3 w-full" /><x-skeleton class="h-3 w-2/3" /><x-skeleton class="h-3 w-5/6" /><x-skeleton class="h-3 w-1/2" />
|
|
</div>
|
|
</x-panel>
|
|
@endforeach
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
|
@foreach (['Volumes', 'Netzwerk-Interfaces'] as $t)
|
|
<x-panel :title="$t" subtitle="lädt…" :padded="false">
|
|
<div class="space-y-3 p-4 sm:p-5">
|
|
<x-skeleton class="h-3 w-full" /><x-skeleton class="h-3 w-3/4" /><x-skeleton class="h-3 w-5/6" />
|
|
</div>
|
|
</x-panel>
|
|
@endforeach
|
|
</div>
|
|
<x-panel title="SSH-Schlüssel" subtitle="lädt…" :padded="false">
|
|
<div class="space-y-3 p-4 sm:p-5"><x-skeleton class="h-3 w-2/3" /><x-skeleton class="h-3 w-1/2" /></div>
|
|
</x-panel>
|
|
@endif
|
|
</div>
|