Interface utilisateur¶
Le SPA utilise une disposition unifiée de tableau de bord : barre supérieure pour les actions globales, SubNav unifié et contenu principal par onglets. Les captures ci-dessous montrent l'UI web en français (LTR). Les autres locales partagent la même disposition avec libellés traduits — voir le chapitre 03-user-interface correspondant.
Changer la langue dans la barre supérieure met à jour les libellés de menu, titres d'onglets, noms internes des sources et la direction du texte CVE si la traduction est activée.
Zones de disposition¶
La barre supérieure affiche le nombre d'outils de la pile, le sélecteur de langue, le thème (clair / sombre / système), la veille live, les alertes, l'actualisation auto et le scan complet. Le menu Exporter (CSV, JSON, impression) est accessible au clavier, se ferme avec Échap ou un clic extérieur ; le CSV inclut EPSS, score de risque, type, versions, description tronquée et alias, avec un commentaire d'en-tête pour la date de scan et la pile ; le JSON enveloppe les résultats avec exported_at, pile, sources et totaux. L'impression masque la navigation via une feuille de style dédiée. Sur écrans étroits, un bouton menu ouvre le SubNav en tiroir.
Le SubNav inclut le titre produit, le badge veille live, la navigation principale, les outils de la pile avec compteurs CVE, filtres rapides de sévérité (onglet Vulnérabilités), sources avec dernière mise à jour et résumé de scan par sévérité. Réduire limite la barre latérale aux icônes.
| Onglet | Rôle |
|---|---|
| Tableau de bord | Métriques, graphiques, liste critique, cartes outil cliquables |
| Vulnérabilités | Recherche, filtres, cartes CVE extensibles |
| Infrastructure | Éditeur de pile, sous-navigation paramètres (sources, notifications, apparence) |
Onglet alertes supprimé
L'onglet d'historique des alertes a été retiré ; les nouvelles découvertes apparaissent toujours via bannière et toast.
Tableau de bord¶
Après un scan complet, le tableau de bord montre le résumé de sévérité, graphiques de distribution, outils touchés et CVE critiques. Les métriques KEV / exploité et correctif disponible résument exploitation et remédiation. Un panneau état des sources liste chaque flux du dernier scan (sources_checked / sources_failed). Les cartes outil affichent les compteurs KEV et correctif par service. Un clic sur une carte outil ouvre Vulnérabilités avec le filtre outil appliqué.
Figure 1 — Tableau de bord après scan (français, thème clair)
Onglet Vulnérabilités¶
Recherche textuelle, filtres sévérité / type / outil / source, case KEV uniquement, tri (dont EPSS et score de risque) et cartes extensibles. Les cartes CVE affichent des badges distincts EPSS et score de risque lorsque les données d'enrichissement sont présentes. Cliquer les badges sévérité, type, source ou KEV sur une carte applique le filtre correspondant dans cet onglet.
Figure 2 — Onglet vulnérabilités avec filtres et cartes
Onglet Infrastructure¶
L'onglet Infrastructure regroupe la configuration durable : pile, comportement de scan, sources, visibilité des notifications et affichage. Une sous-navigation paramètres horizontale bascule entre quatre sections sans quitter l'onglet. Les valeurs persistent dans localStorage sous le préfixe cve-radar:*.
Figure 3 — Sous-nav Infrastructure : pile et veille rapide (français)
| Section | Contenu |
|---|---|
| Infrastructure | Outils de pile, presets, intervalle watch, scan complet périodique |
| Sources | Flux CVE intégrés et RSS personnalisé |
| Notifications | État des canaux serveur (lecture seule), alertes toast/bannière navigateur |
| Apparence | Langue UI, échelle de police, thème, traduction CVE auto |
Sources¶
La section Sources liste chaque flux intégré : NVD, OSV, GitHub Advisories, GitLab Advisory Database, CISA KEV, The Hacker News, TuxCare, Alpine secdb, Ubuntu USN, Red Hat Security, Debian Security Tracker et Amazon Linux ALAS. Chaque ligne affiche une icône et une case — les flux désactivés sont ignorés au prochain scan complet ou cycle watch.
Les RSS personnalisés se trouvent sous la liste intégrée. Ajouter un flux crée une carte avec activé, nom et URL (LTR). Supprimez avec la corbeille. L'id interne est custom:{uuid} ; seules les URL non vides participent au scan.
Les choix sont stockés dans cve-radar:source-config et repris à l'étape 3 du wizard. Le SubNav affiche chaque source activée avec sa dernière mise à jour depuis le meta du dernier scan.
Figure 3a — Sources : bascules intégrées et RSS personnalisé
Notifications¶
La section Notifications distingue canaux serveur et alertes navigateur.
L'envoi côté serveur (Slack, Discord, Telegram, e-mail, webhook) se configure uniquement sur l'hôte API via variables d'environnement — voir Notifications self-hosted. Le panneau appelle GET /api/health?detailed=true et affiche chaque canal Configuré ou Non configuré, plus le seuil de sévérité API. Actualisez après modification des secrets serveur.
Les alertes navigateur sont côté client : activer Toast / bannière (aussi via la cloche de la barre supérieure) affiche toasts et bannière de nouvelles CVE lors du watch ou scan. Le panneau montre la permission Notification API et propose Demander la permission si l'état est default.
Figure 3b — Notifications : canaux serveur et alertes navigateur
Apparence¶
Apparence regroupe l'affichage sans impacter la logique de scan :
- Langue — anglais, persan, arabe, russe, chinois ou français ; labels, noms de sources SubNav et direction CVE (RTL pour fa/ar).
- Échelle de police — 85 % à 140 % via +/− (
cve-radar:font-scale). - Thème — clair, sombre ou système (
cve-radar:theme) ; le mode sombre utilise des accents teal sur fond navy. - Traduction CVE auto — le serveur enrichit titres et descriptions selon la locale UI pendant le scan.
La barre supérieure expose aussi langue et thème ; les changements restent synchronisés.
Figure 3c — Apparence : langue, police, thème, traduction
Écran de scan¶
Démarrer un scan complet ouvre un overlay plein écran avec progression par source (NVD, OSV, GitHub, KEV, RSS, fusion). À la fin, l'app revient automatiquement au tableau de bord.
Figure 4 — Overlay pendant un scan complet
Assistant de configuration initial¶
Après l’avertissement, les nouveaux utilisateurs voient un assistant plein écran en quatre étapes :
- Pile — ajouter des outils ou appliquer des presets d’infrastructure.
- Paramètres — alertes, veille live, intervalle, traduction optionnelle.
- Sources — activer ou désactiver les flux intégrés et RSS personnalisés.
- Fin — premier scan complet optionnel ; définit
cve-radar:setup-complete.
Figure 5 — Assistant de configuration initial, étape pile (français, thème clair)
Les utilisateurs de retour ignorent l’assistant lorsque setupComplete est déjà défini.
Résultats de scan en cache¶
Lorsque l’app charge un scan précédent depuis localStorage (même clé pile), le tableau de bord affiche une bannière de résultats en cache avec la date de scan enregistrée. Lancez Scan complet depuis la barre supérieure pour actualiser les données live depuis l’API.
Navigation centrée outil¶
Cliquer une carte outil sur le tableau de bord (ou un nom d'outil dans le SubNav) bascule vers Vulnérabilités, applique le filtre outil, efface les autres filtres et affiche la liste complète sans pagination.
Échelle de police et thèmes¶
Voir Apparence dans l'onglet Infrastructure pour l'échelle (85 %–140 %), les thèmes (clair / sombre / système) et la traduction CVE auto. Le mode sombre utilise des accents teal (#20c5ba) sur fond navy profond.
Mobile¶
Sous le breakpoint md, la barre latérale est masquée ; utilisez le menu d'en-tête pour ouvrir l'overlay SubNav complet.
Suite : Scan et veille