fox/resources/views/livewire/widgets/system-stats.blade.php

76 lines
3.1 KiB
PHP

<div class="glass p-4 space-y-3">
<div class="flex items-center justify-between">
<h3 class="text-xs uppercase tracking-widest text-white/50 font-medium">System</h3>
<span class="text-[10px] font-mono text-white/30">{{ now()->format('H:i:s') }}</span>
</div>
{{-- CPU --}}
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-white/60">CPU</span>
<span class="font-mono text-white">{{ $stats['cpu'] }}%</span>
</div>
<div class="h-1 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full transition-all"
style="width: {{ $stats['cpu'] }}%"></div>
</div>
</div>
{{-- RAM --}}
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-white/60">RAM</span>
<span class="font-mono text-white">
{{ $stats['memory']['used_mb'] }}/{{ $stats['memory']['total_mb'] }} MB
</span>
</div>
<div class="h-1 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full transition-all"
style="width: {{ $stats['memory']['percent'] }}%"></div>
</div>
</div>
{{-- Disk --}}
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-white/60">Disk</span>
<span class="font-mono text-white">
{{ $stats['disk']['used_gb'] }}/{{ $stats['disk']['total_gb'] }} GB
</span>
</div>
<div class="h-1 bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full transition-all"
style="width: {{ $stats['disk']['percent'] }}%"></div>
</div>
</div>
{{-- Load --}}
<div class="flex items-center justify-between text-xs">
<span class="text-white/60">Load</span>
<span class="font-mono text-white/80">
{{ number_format($stats['load']['1m'], 2) }}
<span class="text-white/30">·</span>
{{ number_format($stats['load']['5m'], 2) }}
<span class="text-white/30">·</span>
{{ number_format($stats['load']['15m'], 2) }}
</span>
</div>
{{-- Ollama --}}
<div class="flex items-center justify-between text-xs pt-2 border-t border-white/5">
<span class="text-white/60">Ollama</span>
<span class="flex items-center gap-1.5 font-mono">
<span class="w-1.5 h-1.5 rounded-full {{ $stats['ollama']['online'] ? 'bg-emerald-400 shadow-[0_0_6px_rgb(52_211_153)]' : 'bg-red-500' }}"></span>
<span class="text-white/80">
{{ $stats['ollama']['online'] ? $stats['ollama']['models'].' Modelle' : 'offline' }}
</span>
</span>
</div>
{{-- Queue --}}
<div class="flex items-center justify-between text-xs">
<span class="text-white/60">Queue</span>
<span class="font-mono text-white/80">{{ $stats['queue'] }} pending</span>
</div>
</div>