Files
nis2-agile/docs/kb/V2_UI_NAVIGAZIONE.md
T
DevEnv nis2-agileandClaude Opus 4.8 36967f9452 [UI] V2 completezza Bootstrap Italia: 11 pagine app -bi mancanti + companies + help.js + KB doc
Completa la copertura V2 al 100% delle pagine app autenticate (pre-swap).
Additivo: nessun file live HTML promosso ancora (lo swap e separato).

- 9 pagine app -bi: isms, acn-gap, normative, whistleblowing, kb, cross-analysis,
  service-continuity (doc standalone), guida, companies
- admin/{index,organizations,users}-bi.html (path corretti, common-bi.js)
- help.js: +89 righe help contestuale pagine V2 (vincolo fonti certe)
- docs/kb/V2_UI_NAVIGAZIONE.md: doc UI/navigazione V2 per la KB AI (ARIA)
- Verifica: tutte servite 200, 0 CDN/FontAwesome, sprite validi, parita ID

Prodotto via Workflow a trittici (run wf_c4962fbe-93f) + fix manuale companies/sprite.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-12 14:46:37 +02:00

13 KiB

FONTE: Documentazione interfaccia prodotto NIS2 Agile (interfaccia V2 "Bootstrap Italia"). AUTORITA: Team prodotto NIS2 Agile — descrizione UI/navigazione (NON contenuto normativo). SCOPO: guida operativa per l'assistente AI ARIA, così da poter indirizzare l'utente nella nuova interfaccia V2 (pagine "-bi"). Questo documento descrive SOLO la struttura e la navigazione dell'app; non contiene affermazioni normative.

NIS2 Agile — Interfaccia V2 (Bootstrap Italia): struttura e navigazione

Cos'è la V2 "Bootstrap Italia"

La V2 è la nuova interfaccia di NIS2 Agile costruita con il design system Bootstrap Italia. Tecnicamente è una variante delle pagine esistenti: ogni pagina convertita ha un file con suffisso -bi.html (es. dashboard-bi.html, risks-bi.html). La chrome (sidebar e barra utente) è generata da public/js/common-bi.js, che ridefinisce solo il rendering della sidebar riusando tutti gli helper e l'albero di navigazione della V1: gli ID DOM, le voci di menu e i collegamenti restano identici alla V1, cambia solo la resa grafica (markup e stile Bootstrap Italia, accessibilità con <nav aria-label>, link attivo con aria-current).

Architettura: l'app è multi-pagina (non SPA). Ogni modulo è una pagina HTML a sé. La sidebar a sinistra è il punto di navigazione principale ed è presente in tutte le pagine applicative (quelle con il riquadro <aside class="sidebar" id="sidebar">). Le pagine pubbliche (login, registrazione, onboarding, landing, recupero password) NON hanno la sidebar.

Pagine già convertite a Bootstrap Italia (mappa BI_PAGES)

Per queste pagine, quando si naviga in contesto V2, i link puntano automaticamente alla variante -bi:

  • login.html → login-bi.html
  • dashboard.html → dashboard-bi.html
  • assessment.html → assessment-bi.html
  • risks.html → risks-bi.html
  • incidents.html → incidents-bi.html
  • policies.html → policies-bi.html
  • supply-chain.html → supply-chain-bi.html
  • training.html → training-bi.html
  • assets.html → assets-bi.html
  • reports.html → reports-bi.html
  • settings.html → settings-bi.html

Le pagine NON ancora convertite (es. acn-gap, isms, whistleblowing, normative, cross-analysis, kb, guida, service-continuity) restano servite dalla versione originale: i link funzionano ugualmente (parità funzionale, nessun link rotto), ma la grafica può essere ancora quella V1 finché la conversione -bi non è completata. L'evidenziazione della voce attiva nella sidebar funziona sia per x.html sia per x-bi.html (il suffisso -bi viene normalizzato).


Struttura della sidebar (menu di navigazione)

La sidebar è organizzata in 4 sezioni con etichette. In alto c'è il brand "NIS2 Agile — Compliance Platform"; subito sotto, per gli utenti consulente, può comparire un selettore di organizzazione (org-switcher). In basso ci sono: toggle lingua IT / EN, il box utente (avatar, nome, ruolo), il pulsante Esci (logout) e la versione dell'applicazione.

Sezione 1 — Principale

  • Dashboard (dashboard.html) — pagina iniziale dopo il login: panoramica generale dello stato di conformità.
  • Compliance Journey (workflow.html) — percorso guidato/flusso di lavoro per la conformità.
  • Gap Analysis (assessment.html) — questionario di valutazione e analisi degli scostamenti.
  • Gap Analysis ACN (acn-gap.html) — valutazione di secondo livello sulle misure/requisiti ACN.
  • Modello SGSI (ISO 27001) (isms.html) — modulo Sistema di Gestione della Sicurezza delle Informazioni.

Sezione 2 — Gestione

  • Rischi (risks.html) — registro dei rischi e relativa gestione.
  • Incidenti (incidents.html) — gestione degli incidenti.
  • Policy (policies.html) — gestione delle policy/documenti.
  • Supply Chain (supply-chain.html) — gestione fornitori e catena di fornitura.
  • Segnalazioni (whistleblowing.html) — segnalazioni/whistleblowing.
  • Normative (normative.html) — aggiornamenti normativi.
  • AI Cross-Analysis (cross-analysis.html) — analisi incrociata assistita da AI.
  • Knowledge Base (kb.html) — base di conoscenza documentale.

Sezione 3 — Operativo

  • Formazione (training.html) — corsi e formazione.
  • Asset (assets.html) — inventario degli asset.
  • Audit & Report (reports.html) — audit e reportistica.

Sezione 4 — Sistema

  • Guida all'uso (guida.html) — manuale/guida d'uso.
  • Impostazioni (settings.html) — impostazioni organizzazione/profilo/membri.
  • Architettura (architecture.html) — pagina informativa sull'architettura del sistema.
  • Simulazione Demo (simulate.html) — ambiente dimostrativo.
  • Integrazioni Esterne (integrazioniext.html) — integrazioni con sistemi esterni.

Nota: la pagina Continuità di Servizio (service-continuity.html) è disponibile nell'app ma NON è una voce della sidebar principale: si raggiunge tramite link/contesto da altre pagine, non dal menu laterale.


Descrizione e scopo di ogni pagina/modulo richiesto

Pagina URL (V1 → V2) Titolo pagina Scopo
Dashboard dashboard.html → dashboard-bi.html "Dashboard" Panoramica iniziale post-login: stato complessivo della conformità, sintesi e accesso rapido ai moduli. È la home dell'app.
Gap Analysis (Assessment) assessment.html → assessment-bi.html "Gap Analysis" Questionario di valutazione della conformità e analisi degli scostamenti (gap) rispetto ai requisiti.
Gap Analysis ACN acn-gap.html (non ancora -bi) "Gap Analysis ACN" Valutazione di secondo livello dedicata alle misure/requisiti ACN.
Rischi risks.html → risks-bi.html "Gestione Rischi" Registro dei rischi, valutazione e trattamento dei rischi.
Incidenti incidents.html → incidents-bi.html "Gestione Incidenti" Registrazione e gestione del ciclo di vita degli incidenti.
Policy policies.html → policies-bi.html "Policy" Gestione, redazione e approvazione delle policy/documenti.
Supply Chain supply-chain.html → supply-chain-bi.html "Supply Chain" Gestione fornitori, valutazioni e panoramica del rischio della catena di fornitura.
Training (Formazione) training.html → training-bi.html "Formazione" Corsi, assegnazioni e stato della formazione.
Asset assets.html → assets-bi.html "Inventario Asset" Inventario degli asset e relative informazioni.
Reports (Audit & Report) reports.html → reports-bi.html "Audit e Report" Controlli di audit, evidenze e reportistica di conformità.
Settings (Impostazioni) settings.html → settings-bi.html "Impostazioni" Impostazioni dell'organizzazione, del profilo utente e gestione dei membri.
ISMS / Modello SGSI isms.html (non ancora -bi) "Modello Organizzativo SGSI (ISO 27001)" Modulo Sistema di Gestione della Sicurezza delle Informazioni (ISO 27001).
Normative normative.html (non ancora -bi) "Aggiornamenti Normativi" Feed/elenco degli aggiornamenti normativi.
Whistleblowing (Segnalazioni) whistleblowing.html (non ancora -bi) "Segnalazioni" Gestione delle segnalazioni/whistleblowing.
Knowledge Base kb.html (non ancora -bi) "Knowledge Base" Base di conoscenza documentale: caricamento e consultazione documenti.
Cross-Analysis cross-analysis.html (non ancora -bi) "AI Cross-Analysis" Analisi incrociata dei dati di conformità assistita da AI.
Service Continuity service-continuity.html (non ancora -bi, fuori sidebar) "Standard Continuità di Servizio" Pagina dedicata alla continuità di servizio; raggiungibile via link contestuale, non dal menu.

Come navigare nella V2

  1. Accesso: dopo il login (login-bi.html) l'utente arriva alla Dashboard (dashboard-bi.html), che è il punto di partenza.
  2. Menu laterale (sidebar): tutte le funzioni si raggiungono dalla sidebar a sinistra, organizzata nelle 4 sezioni Principale / Gestione / Operativo / Sistema. La voce della pagina corrente è evidenziata (stato "active", aria-current="page").
  3. Cambio lingua: in fondo alla sidebar, i pulsanti IT / EN cambiano la lingua dell'interfaccia.
  4. Box utente e Logout: in fondo alla sidebar sono mostrati avatar, nome e ruolo dell'utente; il pulsante con l'icona di uscita esegue il logout.
  5. Selettore organizzazione (consulenti): per gli utenti che gestiscono più organizzazioni, sopra il menu può comparire un selettore per cambiare l'organizzazione attiva.
  6. Versione app: in fondo alla sidebar è indicata la versione dell'applicazione.
  7. Mobile: su schermi piccoli la sidebar diventa un drawer apribile (toggle), coerente con la conversione mobile.

Dove trovare le funzioni principali (mappa rapida per ARIA)

  • "Vedere lo stato di conformità / panoramica" → Dashboard (sezione Principale).
  • "Fare la valutazione / questionario / gap" → Gap Analysis (assessment); per la parte ACN → Gap Analysis ACN.
  • "Gestire i rischi" → Rischi (sezione Gestione).
  • "Segnalare o gestire un incidente" → Incidenti (sezione Gestione).
  • "Documenti e policy" → Policy (sezione Gestione).
  • "Fornitori / catena di fornitura" → Supply Chain (sezione Gestione).
  • "Fare una segnalazione (whistleblowing)" → Segnalazioni (sezione Gestione).
  • "Aggiornamenti normativi" → Normative (sezione Gestione).
  • "Analisi AI incrociata" → AI Cross-Analysis (sezione Gestione).
  • "Cercare/caricare documenti di conoscenza" → Knowledge Base (sezione Gestione).
  • "Corsi e formazione" → Formazione (sezione Operativo).
  • "Inventario asset" → Asset (sezione Operativo).
  • "Report, audit, evidenze, export" → Audit & Report (sezione Operativo).
  • "Modello SGSI / ISO 27001" → Modello SGSI (ISO 27001) (sezione Principale).
  • "Impostazioni, profilo, membri, organizzazione" → Impostazioni (sezione Sistema).
  • "Aiuto / manuale" → Guida all'uso (sezione Sistema).
  • "Continuità di servizio" → pagina Service Continuity (link contestuale, non in sidebar).

Note tecniche utili (per coerenza, non normative)

  • La sidebar V2 è generata da public/js/common-bi.js, che deve essere caricato dopo common.js e ne ridefinisce solo loadSidebar().
  • L'albero di navigazione (nomi voci, sezioni, link) è lo stesso della V1 (common.js): cambiando l'una va aggiornata anche l'altra per mantenere parità.
  • Le pagine non ancora -bi sono comunque navigabili senza link rotti.

Come ingestare questo documento nella KB (collection nis2_kb, scope SYSTEM)

Questo documento è pronto per essere indicizzato nella Knowledge Base RAG così che ARIA possa citarlo. L'ingest richiede accesso a Qdrant (nis2_kb) + Voyage, disponibile solo dall'host Hetzner / dal container nis2-app (NON dal devenv, che non raggiunge l'infrastruttura).

Opzione A — endpoint API (super_admin, scope SYSTEM)

POST /api/knowledgebase/ingest richiede un JWT di un utente super_admin (lo scope SYSTEM è consentito solo ai super_admin). Limite testo 50.000 char (questo doc è ben sotto).

# 1) login come super_admin -> ottieni $TOKEN
TOKEN=$(curl -s -X POST https://nis2.agile.software/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"<SUPER_ADMIN_EMAIL>","password":"<PWD>"}' | python3 -c 'import sys,json;print(json.load(sys.stdin)["access_token"])')

# 2) ingest del markdown come testo (scope SYSTEM)
curl -s -X POST https://nis2.agile.software/api/knowledgebase/ingest \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  --data @<(python3 - <<'PY'
import json
txt=open("/var/www/nis2-agile/docs/kb/V2_UI_NAVIGAZIONE.md").read()
print(json.dumps({
  "title":"Interfaccia V2 (Bootstrap Italia) — struttura e navigazione UI",
  "text":txt,
  "entity_type":"ui_doc",
  "source":"Documentazione prodotto NIS2 Agile — UI V2 (Bootstrap Italia)",
  "scope":"SYSTEM"
}))
PY
)

Opzione B — dal container nis2-app con uno script di ingest testo

Lo script di riferimento scripts/ingest-nis2-sources.php indicizza i PDF normativi del registry nis2_sources.php (non file markdown arbitrari). Per ingestare questo .md come testo SYSTEM, il modo coerente è chiamare l'endpoint ingest (Opzione A) oppure usare direttamente EmbedService + VectorService (ensureCollection → upsertBatch) con payload scope=SYSTEM, source="Documentazione prodotto NIS2 Agile — UI V2", come fa lo script di riferimento per i punti SYSTEM. Esecuzione tipica dal container:

docker exec -i nis2-app php /var/www/nis2-agile/scripts/ingest-nis2-sources.php   # (riferimento: pipeline embed+upsert SYSTEM)

Stato ingest da questo ambiente (devenv)

L'ingest NON è stato eseguito da qui: il container/infra non è raggiungibile dal devenv.

  • docker CLI: assente nel devenv.
  • Qdrant 172.21.0.5:6333 e nis2-qdrant:6333: irraggiungibili (HTTP 000).
  • POST /api/knowledgebase/ingest su produzione: risponde 401 senza JWT super_admin (nessuna credenziale disponibile in questo ambiente).

Azione richiesta: eseguire l'Opzione A (o B) dall'host Hetzner / container nis2-app con credenziali super_admin. Idempotenza: per re-ingest, cancellare prima i chunk SYSTEM con lo stesso source (filtro scope=SYSTEM + source=...) come fa lo script di riferimento, poi ri-upsert.