Add Server stats (CPU, RAM, Disk, System) to admin Infra page

First row shows host-level stats from /proc: CPU model, cores, load
average with charge %, RAM total/used/available with usage %, disk
total/used/free with usage %, hostname, OS and uptime. All color-coded
green <70%, yellow <90%, red >=90%.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-26 10:41:41 +01:00
parent d7cecfe9ef
commit 08433321d0
2 changed files with 135 additions and 0 deletions

View File

@@ -5,6 +5,61 @@
{% block body %}
<h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page mb-8">Infrastructure</h1>
{# Server #}
<h2 class="text-xl font-black uppercase tracking-tighter italic heading-page mb-4">Serveur</h2>
<div class="flex flex-wrap gap-6 mb-8">
{# CPU #}
<div class="flex-1 min-w-[280px]">
<div class="admin-card">
<h2 class="text-sm font-black uppercase tracking-widest mb-4">CPU</h2>
<div class="flex flex-col gap-0">
{{ _self.row('Modele', server.cpu_model) }}
{{ _self.row('Coeurs', server.cpu_cores) }}
{{ _self.row('Load 1m / 5m / 15m', server.load_1m ~ ' / ' ~ server.load_5m ~ ' / ' ~ server.load_15m) }}
{{ _self.row_color('Charge CPU', server.load_percent != '?' ? server.load_percent ~ '%' : '?', server.load_percent != '?' and server.load_percent < 70 ? 'green' : (server.load_percent == '?' ? 'gray' : (server.load_percent < 90 ? 'yellow' : 'red'))) }}
</div>
</div>
</div>
{# RAM #}
<div class="flex-1 min-w-[280px]">
<div class="admin-card">
<h2 class="text-sm font-black uppercase tracking-widest mb-4">RAM</h2>
<div class="flex flex-col gap-0">
{{ _self.row('Total', server.ram_total) }}
{{ _self.row('Utilisee', server.ram_used) }}
{{ _self.row('Disponible', server.ram_free) }}
{{ _self.row_color('Utilisation', server.ram_usage_percent != '?' ? server.ram_usage_percent ~ '%' : '?', server.ram_usage_percent != '?' and server.ram_usage_percent < 70 ? 'green' : (server.ram_usage_percent == '?' ? 'gray' : (server.ram_usage_percent < 90 ? 'yellow' : 'red'))) }}
</div>
</div>
</div>
{# Disk #}
<div class="flex-1 min-w-[280px]">
<div class="admin-card">
<h2 class="text-sm font-black uppercase tracking-widest mb-4">Disque</h2>
<div class="flex flex-col gap-0">
{{ _self.row('Total', server.disk_total) }}
{{ _self.row('Utilise', server.disk_used) }}
{{ _self.row('Libre', server.disk_free) }}
{{ _self.row_color('Utilisation', server.disk_usage_percent != '?' ? server.disk_usage_percent ~ '%' : '?', server.disk_usage_percent != '?' and server.disk_usage_percent < 70 ? 'green' : (server.disk_usage_percent == '?' ? 'gray' : (server.disk_usage_percent < 90 ? 'yellow' : 'red'))) }}
</div>
</div>
</div>
{# System #}
<div class="flex-1 min-w-[280px]">
<div class="admin-card">
<h2 class="text-sm font-black uppercase tracking-widest mb-4">Systeme</h2>
<div class="flex flex-col gap-0">
{{ _self.row('Hostname', server.hostname) }}
{{ _self.row('OS', server.os) }}
{{ _self.row('Uptime', server.uptime) }}
</div>
</div>
</div>
</div>
{# PHP Containers #}
<h2 class="text-xl font-black uppercase tracking-tighter italic heading-page mb-4">PHP</h2>
<div class="flex flex-wrap gap-6 mb-8">