adminmpmcz/patchcenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source 
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
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/templates/qualys_search.html
View File

@ -49,10 +49,19 @@
{% endif %} {% endif %}
<!-- Panel détail --> <!-- 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> <div id="qualys-detail" class="card mb-4 p-5" style="display:none"></div>
<!-- Panel vulnérabilités --> <!-- 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> <div id="vuln-detail" class="card mb-4" style="display:none"></div>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
<!-- Résultats --> <!-- Résultats -->
{% if assets %} {% if assets %}
@ -179,7 +188,8 @@ function updateBulkTag() {
{% set vc = vuln_map.get(ip|string, {}) if vuln_map else {} %} {% set vc = vuln_map.get(ip|string, {}) if vuln_map else {} %}
{% if vc and vc.total > 0 %} {% if vc and vc.total > 0 %}
<button class="hover:opacity-80" hx-get="/qualys/vulns/{{ ip }}" hx-target="#vuln-detail" hx-swap="innerHTML" <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 }}"> 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.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 %} {% if vc.severity4 > 0 %}<span class="badge badge-yellow">{{ vc.severity4 }} high</span> {% endif %}
@ -193,7 +203,8 @@ function updateBulkTag() {
{% if qid %} {% if qid %}
<button class="btn-sm bg-cyber-border text-cyber-accent" <button class="btn-sm bg-cyber-border text-cyber-accent"
hx-get="/qualys/asset/{{ qid }}" hx-target="#qualys-detail" hx-swap="innerHTML" 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 %} {% endif %}
</td> </td>
</tr> </tr>
@ -202,4 +213,14 @@ function updateBulkTag() {
</table> </table>
</div> </div>
{% endif %} {% 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 %} {% endblock %}