Loading spinner sur vulns et détail asset (HTMX), masqué après réponse

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Khalid MOUTAOUAKIL 2026-04-06 23:13:33 +02:00
parent 1d8502d25b
commit a43dd01b7e

View File

@ -49,10 +49,19 @@
{% endif %}
<!-- Panel détail -->
<div id="detail-loading" class="card mb-4 p-6 flex items-center justify-center gap-3" style="display:none;">
<div style="width:20px;height:20px;border:2px solid #22c55e;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
<span class="text-sm text-gray-400">Chargement détail asset...</span>
</div>
<div id="qualys-detail" class="card mb-4 p-5" style="display:none"></div>
<!-- Panel vulnérabilités -->
<div id="vuln-loading" class="card mb-4 p-6 flex items-center justify-center gap-3" style="display:none;">
<div style="width:20px;height:20px;border:2px solid #ef4444;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
<span class="text-sm text-gray-400">Chargement vulnérabilités (API VMDR + KB)...</span>
</div>
<div id="vuln-detail" class="card mb-4" style="display:none"></div>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
<!-- Résultats -->
{% if assets %}
@ -179,7 +188,8 @@ function updateBulkTag() {
{% set vc = vuln_map.get(ip|string, {}) if vuln_map else {} %}
{% if vc and vc.total > 0 %}
<button class="hover:opacity-80" hx-get="/qualys/vulns/{{ ip }}" hx-target="#vuln-detail" hx-swap="innerHTML"
onclick="document.getElementById('vuln-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})"
hx-indicator="#vuln-loading"
onclick="document.getElementById('vuln-detail').style.display='block'; document.getElementById('vuln-loading').style.display='flex'; window.scrollTo({top:0,behavior:'smooth'})"
title="S3:{{ vc.severity3 }} S4:{{ vc.severity4 }} S5:{{ vc.severity5 }} | Confirmed:{{ vc.confirmed }} Potential:{{ vc.potential }}">
{% if vc.severity5 > 0 %}<span class="badge badge-red">{{ vc.severity5 }} crit</span> {% endif %}
{% if vc.severity4 > 0 %}<span class="badge badge-yellow">{{ vc.severity4 }} high</span> {% endif %}
@ -193,7 +203,8 @@ function updateBulkTag() {
{% if qid %}
<button class="btn-sm bg-cyber-border text-cyber-accent"
hx-get="/qualys/asset/{{ qid }}" hx-target="#qualys-detail" hx-swap="innerHTML"
onclick="document.getElementById('qualys-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})">Détail</button>
hx-indicator="#detail-loading"
onclick="document.getElementById('qualys-detail').style.display='block'; document.getElementById('detail-loading').style.display='flex'; window.scrollTo({top:0,behavior:'smooth'})">Détail</button>
{% endif %}
</td>
</tr>
@ -202,4 +213,14 @@ function updateBulkTag() {
</table>
</div>
{% endif %}
<script>
document.body.addEventListener('htmx:afterSwap', function(e) {
if (e.detail.target.id === 'vuln-detail') {
document.getElementById('vuln-loading').style.display = 'none';
}
if (e.detail.target.id === 'qualys-detail') {
document.getElementById('detail-loading').style.display = 'none';
}
});
</script>
{% endblock %}