patchcenter/app/templates/audit.html
Khalid MOUTAOUAKIL a8f7329a48 Loading overlay, fix specifics edit, fix quotes, data-loading
- Overlay plein écran avec spinner pendant les actions longues
- data-loading attribute au lieu de onclick (évite problèmes quotes)
- Auto-attach JS sur tous les boutons data-loading
- Fix panel édition spécifiques (déplacé en haut)
- Fix double display:none sur overlay
- Messages descriptifs par action (resync, bulk, audit, prereqs)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 01:07:12 +02:00

161 lines
9.3 KiB
HTML

{% extends 'base.html' %}
{% block title %}Audit Serveurs{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
<div>
<h2 class="text-xl font-bold text-cyber-accent">Audit Général Linux</h2>
<p class="text-xs text-gray-500 mt-1">
{% if last_audit and last_audit.last_date %}
Dernier audit : {{ last_audit.last_date.strftime('%d/%m/%Y à %H:%M') }} — {{ last_audit.count }} serveurs
{% else %}Aucun audit réalisé{% endif %}
</p>
</div>
<div class="flex gap-2">
<a href="/audit/export/csv{% if filter %}?filter={{ filter }}{% endif %}{% if search %}&search={{ search }}{% endif %}" class="btn-sm bg-cyber-green text-black">Export CSV</a>
</div>
</div>
<!-- Lancer audit global -->
{% set p = perms if perms is defined else request.state.perms %}
{% if p.audit in ('edit', 'admin') %}
<div x-data="{ showGlobal: false }" class="card p-4 mb-4">
<div class="flex justify-between items-center">
<h3 class="text-sm font-bold text-cyber-accent">Lancer un audit général</h3>
<button @click="showGlobal = !showGlobal" class="btn-sm bg-cyber-border text-cyber-accent" x-text="showGlobal ? 'Masquer' : 'Configurer'"></button>
</div>
<div x-show="showGlobal" class="mt-3">
<form method="POST" action="/audit/global" class="space-y-3">
<p class="text-xs text-gray-500">Tous les serveurs Linux en production seront audités (hors exclusions).</p>
<div class="grid grid-cols-3 gap-3">
<div>
<label class="text-xs text-gray-500">Domaines à exclure</label>
<div class="space-y-1 mt-1">
{% for d in domains %}
<label class="flex items-center gap-2 text-xs text-gray-400">
<input type="checkbox" name="exclude_domains" value="{{ d.code }}" {% if d.code == 'EMV' %}checked{% endif %}>
{{ d.name }}
</label>
{% endfor %}
</div>
</div>
<div>
<label class="text-xs text-gray-500">Zones à exclure</label>
<div class="space-y-1 mt-1">
{% for z in zones %}
<label class="flex items-center gap-2 text-xs text-gray-400">
<input type="checkbox" name="exclude_zones" value="{{ z.name }}" {% if z.name == 'EMV' %}checked{% endif %}>
{{ z.name }}
</label>
{% endfor %}
</div>
</div>
<div>
<label class="text-xs text-gray-500">Parallélisme</label>
<select name="parallel" class="w-full text-xs py-1 px-2 mt-1">
<option value="1">Séquentiel (1)</option>
<option value="5" selected>5 en parallèle</option>
<option value="10">10 en parallèle</option>
<option value="20">20 en parallèle</option>
</select>
<p class="text-xs text-gray-600 mt-2">EMV exclu par défaut (zone PCI-DSS)</p>
</div>
</div>
<button type="submit" class="btn-primary px-4 py-2 text-sm" data-loading="Audit global en cours...|Connexion SSH - plusieurs minutes">Lancer l'audit général</button>
</form>
</div>
</div>
{% endif %}
{% set msg = request.query_params.get('msg') %}
{% if msg %}
<div class="mb-3 p-2 rounded text-sm {% if msg == 'no_hosts' or msg == 'no_results' %}bg-red-900/30 text-cyber-red{% else %}bg-green-900/30 text-cyber-green{% endif %}">
{% if msg == 'no_hosts' %}Aucun hostname saisi.{% elif msg == 'no_results' %}Pas de résultats à sauvegarder.{% elif msg.startswith('saved_') %}Base mise à jour : {{ msg.split('_')[1] }} modifié(s), {{ msg.split('_')[2] }} ajouté(s).{% endif %}
</div>
{% endif %}
<!-- KPIs -->
<div class="grid grid-cols-8 gap-2 mb-4">
<a href="/audit" class="card p-2 text-center hover:border-cyber-accent/50 {% if not filter %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-green">{{ stats.ok }}</div>
<div class="text-[10px] text-gray-500">Connectes</div>
</a>
<a href="/audit?filter=failed" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'failed' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-red">{{ stats.failed }}</div>
<div class="text-[10px] text-gray-500">Echoues</div>
</a>
<a href="/audit?filter=disk" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'disk' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-yellow">{{ stats.disk_alerts }}</div>
<div class="text-[10px] text-gray-500">Alerte disque</div>
</a>
<a href="/audit?filter=no_autostart" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'no_autostart' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-yellow">{{ stats.no_autostart }}</div>
<div class="text-[10px] text-gray-500">Sans auto-start</div>
</a>
<a href="/audit?filter=failed_svc" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'failed_svc' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-red">{{ stats.failed_svc }}</div>
<div class="text-[10px] text-gray-500">Svc en echec</div>
</a>
<a href="/audit?filter=no_qualys" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'no_qualys' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-red">{{ stats.ok - stats.qualys_ok }}</div>
<div class="text-[10px] text-gray-500">Qualys KO</div>
</a>
<a href="/audit?filter=no_s1" class="card p-2 text-center hover:border-cyber-accent/50 {% if filter == 'no_s1' %}border-cyber-accent{% endif %}">
<div class="text-lg font-bold text-cyber-red">{{ stats.ok - stats.s1_ok }}</div>
<div class="text-[10px] text-gray-500">S1 KO</div>
</a>
<div class="card p-2 text-center">
<form method="GET" class="flex gap-1">
<input type="text" name="search" value="{{ search or '' }}" placeholder="Hostname" class="text-xs py-1 px-2 w-full">
</form>
</div>
</div>
<!-- Panel détail -->
<div id="audit-detail" class="card mb-4 p-5" style="display:none"></div>
<!-- Table -->
<div class="card overflow-x-auto">
<table class="w-full table-cyber">
<thead><tr>
<th class="text-left p-2">Hostname</th>
<th class="p-2">Statut</th>
<th class="p-2">Connexion</th>
<th class="p-2">Kernel</th>
<th class="p-2">Uptime</th>
<th class="p-2">Disque</th>
<th class="p-2">Qualys</th>
<th class="p-2">S1</th>
<th class="p-2">Sans auto</th>
<th class="p-2">Svc KO</th>
<th class="p-2">Detail</th>
</tr></thead>
<tbody>
{% for e in entries %}
<tr class="{% if e.status != 'OK' %}bg-red-900/10{% elif e.disk_alert %}bg-yellow-900/10{% endif %}">
<td class="p-2 font-mono text-sm text-cyber-accent">{{ e.hostname }}</td>
<td class="p-2 text-center"><span class="badge {% if e.status == 'OK' %}badge-green{% else %}badge-red{% endif %}">{{ e.status[:10] }}</span></td>
<td class="p-2 text-center text-[10px] text-gray-400">{% if e.resolved_fqdn %}{{ e.resolved_fqdn[:25] }}{% else %}-{% endif %}</td>
<td class="p-2 text-center text-[10px] text-gray-400">{{ (e.kernel or '-')[:20] }}</td>
<td class="p-2 text-center text-[10px] text-gray-400">{{ (e.uptime or '-')[:15] }}</td>
<td class="p-2 text-center">
{% if e.disk_alert %}<span class="badge badge-red" title="{{ e.disk_detail[:80] if e.disk_detail else '' }}">ALERTE</span>
{% elif e.status == 'OK' %}<span class="text-cyber-green text-xs">OK</span>
{% else %}-{% endif %}
</td>
<td class="p-2 text-center">{% if e.qualys_active %}<span class="text-cyber-green text-xs">OK</span>{% else %}<span class="text-cyber-red text-xs">KO</span>{% endif %}</td>
<td class="p-2 text-center">{% if e.sentinelone_active %}<span class="text-cyber-green text-xs">OK</span>{% else %}<span class="text-cyber-red text-xs">KO</span>{% endif %}</td>
<td class="p-2 text-center text-[10px]">{% if e.running_not_enabled %}<span class="text-cyber-yellow" title="{{ e.running_not_enabled[:100] }}">{{ e.running_not_enabled.split('\n')|length }}</span>{% else %}-{% endif %}</td>
<td class="p-2 text-center text-[10px]">{% if e.failed_services %}<span class="text-cyber-red">{{ e.failed_services[:20] }}</span>{% else %}-{% endif %}</td>
<td class="p-2 text-center">
<button class="btn-sm bg-cyber-border text-cyber-accent"
hx-get="/audit/{{ e.id }}" hx-target="#audit-detail" hx-swap="innerHTML"
onclick="document.getElementById('audit-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})">Voir</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}