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 |
| Veille live | Intervalle watch, compte à rebours, nouveaux CVE depuis le scan complet, historique poll |
| Historique scan | Graphique de tendances et scans récents (PostgreSQL, par tenant) |
| Infrastructure | Éditeur de pile, sous-navigation (sources, notifications, Ops, tenants, 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. Quand merge déduplique le même CVE entre sources (par ex. NVD + GitHub), les ID alternatifs (GHSA, PYSEC, etc.) apparaissent en chips monospace dans le corps étendu de la carte avec direction LTR forcée.
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 sections sans quitter l'onglet. Les valeurs persistent dans localStorage sous le préfixe cve-radar:*. Avec PostgreSQL, Ops et Tenants exposent la session serveur et les piles par tenant.
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 |
| Ops | Clé API, session (rôle RBAC, tenant, multi-tenant), santé, metrics, audit |
| Tenants | Slug actif, création tenant, piles sauvegardées (load/edit/delete), prefs |
| 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 (guide par canal) et alertes navigateur.
L'envoi (Slack, Discord, Teams, Telegram, SMTP, webhook) se configure sur l'hôte API — les secrets restent côté serveur. Dépliez une ligne pour le guide : étapes, variables, Copier l'exemple .env. Redémarrez l'API puis Actualiser.
| Canal | Env requis |
|---|---|
| Slack | NOTIFICATION_SLACK_WEBHOOK_URL |
| Discord | NOTIFICATION_DISCORD_WEBHOOK_URL |
| Teams | NOTIFICATION_TEAMS_WEBHOOK_URL |
| Telegram | NOTIFICATION_TELEGRAM_BOT_TOKEN, NOTIFICATION_TELEGRAM_CHAT_ID |
NOTIFICATION_SMTP_HOST, _FROM, _TO |
|
| Webhook | NOTIFICATION_WEBHOOK_URL |
Voir NOTIFICATIONS.md.
Figure 3b — Liste des canaux (non configurés sans env)
Figure 3b2 — Guide Slack déplié avec exemple env
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
Ops¶
La section Ops stocke une clé API optionnelle dans le navigateur (X-Api-Key sur /api/v1/*). GET /api/v1/session affiche multi-tenant, rôle RBAC, tenant actif (X-Tenant-Id) et si l'auth API est activée. Runtime features depuis /api/capabilities ; System health inclut le flag multi-tenant base. Prometheus metrics → /metrics. Audit : lignes scoped tenant avec IP, pile et sources_failed.
Tenants¶
Avec DATABASE_URL, Tenants change le slug (X-Tenant-Id), crée des tenants et gère piles sauvegardées : save, load, edit, delete. Le test notification envoie X-Tenant-Id.
Onglet Historique scan¶
L'onglet Historique scan (SubNav) requiert PostgreSQL. Graphique tendances et scans récents pour le tenant actif ; chaque ligne : mode, sévérités, pile, sources failed. Sans base, message DATABASE_URL.
Onglet Veille live¶
L'onglet Veille live (SubNav, entre Vulnérabilités et Infrastructure) expose le polling rapide OSV/GitHub sans scan complet. Les polls appellent POST /api/v1/watch avec X-Tenant-Id. Quand la veille est active, un compte à rebours indique le prochain poll ; le sélecteur d'intervalle (2 / 5 / 15 min) écrit dans settings.watchIntervalMs. Nouveaux depuis le dernier scan complet liste des lignes CVE compactes découvertes via watch ; le badge sur l'onglet affiche le total. Historique des sondes conserve les 20 derniers résultats avec horodatage et nombre de nouveaux CVE. Activer la veille ici ou dans la barre supérieure reste synchronisé ; un scan complet réussi (POST /api/v1/scan/stream) efface la liste « nouveaux depuis le scan ».
Figure 3d — Veille live : compte à rebours, intervalle, nouveaux CVE, historique
Écran de scan¶
Un scan complet ouvre un overlay plein écran. Au fil des événements SSE, chaque source apparaît en ligne : point pulsant (actif), point vert (terminé), outil de pile courant le cas échéant ; la barre globale suit ScanProgressEvent.percent. Avant le premier événement, libellés d'étapes statiques (NVD → OSV → …). À la fin, retour automatique 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
Filtres avancés (#263) : barre collante, multi-sévérité/sources, EPSS et plage de dates, sync URL, vues enregistrées.