nis2-agile/docs/nis2/incidente_r01/incident-dashboard.html
DevEnv nis2-agile 5c545ea3d0 [FEAT] Integrazione analisi docs/nis2 v1.7.0 — scoring asset, tassonomia incidenti, PIR, NIST CSF, fonti certe
Fase 1 - Asset Relevance Scoring NIS2 (GV.OC-04): metodologia 0-100 a 6 criteri,
  AssetScoringService + endpoint scoringGrid/score/relevantSystems + UI assets.html + registro stampabile.
Fase 2 - Tassonomia incidenti Determina ACN 164179/2025: IS-1..4 + regime essenziale/importante (Allegati 3/4).
Fase 3 - Post-Incident Review (5-Whys) + metriche TTD/TTC/TTR + timestamp di fase.
Fase 4 - Mapping NIST CSF 2.0 (43 controlli) reference-only.
Fonti certe: registry config/nis2_sources.php + grounding AI (vieta riferimenti inventati) +
  citazioni help.js + ingest PDF normativi nella KB RAG (scripts/ingest-nis2-sources.php).
Migrazioni 020/021/022 (additive idempotenti). Fix VectorService IP Qdrant (drift .5->.3).
Analisi concorrenza Evix (docs/EVIX_ANALISI_CONCORRENZA.html, gap-driven).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-29 17:15:13 +02:00

1403 lines
53 KiB
HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Gestione Incidenti - NIS2</title>
<style>
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #1c2128;
--border-color: #30363d;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--accent-primary: #58a6ff;
--accent-secondary: #1f6feb;
--success: #3fb950;
--warning: #d29922;
--danger: #f85149;
--essential-bg: #fef3c7;
--essential-text: #92400e;
--essential-border: #f59e0b;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-y: auto;
overflow-x: hidden;
}
.container {
max-width: 1800px;
margin: 0 auto;
padding: 20px;
}
/* Header */
.header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 24px 0;
margin-bottom: 32px;
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1800px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.header-left {
flex: 1;
}
.header h1 {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.breadcrumb {
font-size: 13px;
color: var(--text-secondary);
}
.breadcrumb a {
color: var(--accent-primary);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.header-right {
display: flex;
gap: 12px;
align-items: center;
}
.subject-badge {
display: inline-block;
padding: 8px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.subject-badge.important {
background-color: rgba(88, 166, 255, 0.2);
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
}
.subject-badge.essential {
background-color: var(--essential-bg);
color: var(--essential-text);
border: 1px solid var(--essential-border);
}
.btn {
padding: 8px 16px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.btn:hover {
background-color: var(--bg-tertiary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.btn-primary {
background-color: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.btn-primary:hover {
background-color: var(--accent-secondary);
border-color: var(--accent-secondary);
color: white;
}
.btn-danger {
background-color: rgba(248, 81, 73, 0.1);
border-color: var(--danger);
color: var(--danger);
}
.btn-danger:hover {
background-color: var(--danger);
color: white;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.stat-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 20px;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent-primary);
}
.stat-card.critical::before {
background: var(--danger);
}
.stat-card.high::before {
background: var(--warning);
}
.stat-card.success::before {
background: var(--success);
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.stat-sublabel {
font-size: 12px;
color: var(--text-secondary);
}
/* Alert Box */
.alert-box {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-left: 4px solid var(--warning);
border-radius: 6px;
padding: 20px;
margin-bottom: 24px;
}
.alert-box.danger {
border-left-color: var(--danger);
}
.alert-box.success {
border-left-color: var(--success);
}
.alert-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.alert-content {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
/* Tabs */
.tabs {
display: flex;
gap: 8px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0;
flex-wrap: wrap;
}
.tab {
padding: 12px 16px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.tab:hover {
color: var(--text-primary);
background-color: var(--bg-tertiary);
}
.tab.active {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
}
/* Section */
.section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 24px;
margin-bottom: 24px;
display: none;
}
.section.active {
display: block;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap;
gap: 16px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
/* Help Icon */
.help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background-color: rgba(167, 139, 250, 0.2);
border: 2px solid #a78bfa;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
color: #a78bfa;
cursor: help;
position: relative;
margin-left: 6px;
}
.help-icon:hover {
background-color: rgba(167, 139, 250, 0.3);
color: #c4b5fd;
border-color: #c4b5fd;
transform: scale(1.1);
}
.tooltip {
visibility: hidden;
position: absolute;
z-index: 1000;
background-color: var(--bg-tertiary);
color: var(--text-primary);
padding: 12px;
border-radius: 6px;
border: 1px solid var(--border-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
width: 320px;
top: 28px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.5;
opacity: 0;
transition: opacity 0.2s;
white-space: normal;
}
.tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--border-color);
}
.tooltip-title {
color: var(--accent-primary);
font-weight: 600;
margin-bottom: 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.help-icon:hover .tooltip {
visibility: visible;
opacity: 1;
}
/* Filter Bar */
.filter-bar {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
align-items: center;
}
.filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.filter-label {
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
}
select, input[type="text"], input[type="search"], input[type="date"] {
padding: 8px 12px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
}
select:focus, input:focus {
outline: none;
border-color: var(--accent-primary);
}
/* Table */
.table-container {
overflow-x: auto;
margin-top: 16px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
th {
background-color: var(--bg-tertiary);
color: var(--text-secondary);
font-weight: 600;
text-align: left;
padding: 12px;
border: 1px solid var(--border-color);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
}
td {
padding: 12px;
border: 1px solid var(--border-color);
color: var(--text-primary);
}
tr:hover {
background-color: var(--bg-tertiary);
}
/* Status Badge */
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.status-rilevato {
background-color: rgba(88, 166, 255, 0.2);
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
}
.status-triage {
background-color: rgba(210, 153, 34, 0.2);
color: var(--warning);
border: 1px solid var(--warning);
}
.status-contenuto {
background-color: rgba(210, 153, 34, 0.2);
color: var(--warning);
border: 1px solid var(--warning);
}
.status-eradicazione {
background-color: rgba(210, 153, 34, 0.2);
color: var(--warning);
border: 1px solid var(--warning);
}
.status-ripristino {
background-color: rgba(88, 166, 255, 0.2);
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
}
.status-chiuso {
background-color: rgba(63, 185, 80, 0.2);
color: var(--success);
border: 1px solid var(--success);
}
.sev-1 {
color: var(--danger);
font-weight: 700;
}
.sev-2 {
color: var(--warning);
font-weight: 700;
}
.sev-3 {
color: var(--accent-primary);
font-weight: 600;
}
.sev-4 {
color: var(--text-secondary);
}
/* Essential Badge */
.essential-badge {
display: inline-block;
background-color: var(--essential-bg);
color: var(--essential-text);
padding: 4px 8px;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid var(--essential-border);
margin-left: 8px;
transform: rotate(-1deg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Quick Actions */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.quick-action-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 20px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: block;
}
.quick-action-card:hover {
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2);
}
.quick-action-icon {
font-size: 32px;
margin-bottom: 12px;
}
.quick-action-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.quick-action-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* Timeline */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.timeline-item {
position: relative;
margin-bottom: 24px;
padding-left: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -24px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-primary);
border: 2px solid var(--bg-secondary);
}
.timeline-time {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.timeline-content {
font-size: 13px;
color: var(--text-primary);
}
/* Responsive */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
align-items: flex-start;
}
.stats-grid {
grid-template-columns: 1fr;
}
.tabs {
overflow-x: auto;
flex-wrap: nowrap;
}
.filter-bar {
flex-direction: column;
align-items: stretch;
}
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-left">
<h1>Gestione Incidenti, Ripristino e Comunicazioni</h1>
<div class="breadcrumb">
<a href="dashboard.html">Dashboard NIS2</a> / Org.10 - Gestione Incidenti
</div>
</div>
<div class="header-right">
<span class="subject-badge" id="subjectBadge">Soggetto Importante</span>
<button class="btn" onclick="window.location.href='incident-gate.html'">Cambia Tipo</button>
<button class="btn btn-primary" onclick="window.location.href='incident-new.html'">🚨 Nuovo Incidente</button>
</div>
</div>
</div>
<div class="container">
<!-- Alert per incidenti attivi -->
<div class="alert-box danger" id="activeIncidentsAlert" style="display: none;">
<div class="alert-title">
<span>⚠️</span>
<span id="activeIncidentsCount">2</span> Incidenti Critici Attivi
</div>
<div class="alert-content">
Sono presenti incidenti SEV-1 o SEV-2 in gestione che richiedono attenzione immediata. Verifica lo stato e le azioni richieste.
</div>
</div>
<!-- Statistics -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Incidenti Totali</div>
<div class="stat-value">47</div>
<div class="stat-sublabel">Ultimi 12 mesi</div>
</div>
<div class="stat-card critical">
<div class="stat-label">Incidenti Attivi</div>
<div class="stat-value">3</div>
<div class="stat-sublabel">In gestione ora</div>
</div>
<div class="stat-card high">
<div class="stat-label">Notifiche CSIRT</div>
<div class="stat-value">12</div>
<div class="stat-sublabel">Incidenti significativi</div>
</div>
<div class="stat-card success">
<div class="stat-label">TTD Medio</div>
<div class="stat-value">2.4h</div>
<div class="stat-sublabel">Time to Detect</div>
</div>
<div class="stat-card success">
<div class="stat-label">TTC Medio</div>
<div class="stat-value">3.8h</div>
<div class="stat-sublabel">Time to Contain</div>
</div>
<div class="stat-card">
<div class="stat-label">Conformità Notifiche</div>
<div class="stat-value">100%</div>
<div class="stat-sublabel">Entro 24h (preallarme)</div>
</div>
</div>
<!-- Quick Actions -->
<div class="quick-actions">
<a href="incident-new.html" class="quick-action-card">
<div class="quick-action-icon">🚨</div>
<div class="quick-action-title">Segnala Incidente</div>
<div class="quick-action-desc">Apri un nuovo ticket di incidente di sicurezza</div>
</a>
<a href="incident-notification.html" class="quick-action-card">
<div class="quick-action-icon">📡</div>
<div class="quick-action-title">Notifiche CSIRT</div>
<div class="quick-action-desc">Gestisci comunicazioni al CSIRT Italia</div>
</a>
<a href="incident-recovery.html" class="quick-action-card">
<div class="quick-action-icon">🔄</div>
<div class="quick-action-title">Ripristino Servizi</div>
<div class="quick-action-desc">Processi di recovery e validazione</div>
</a>
<a href="incident-pir.html" class="quick-action-card">
<div class="quick-action-icon">📊</div>
<div class="quick-action-title">Post-Incident Review</div>
<div class="quick-action-desc">Lesson learned e miglioramento continuo</div>
</a>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab active" onclick="showTab('active')">Incidenti Attivi (3)</button>
<button class="tab" onclick="showTab('all')">Tutti gli Incidenti</button>
<button class="tab" onclick="showTab('notified')">Notificati CSIRT (12)</button>
<button class="tab" onclick="showTab('timeline')">Timeline Recenti</button>
<button class="tab" onclick="showTab('kpi')">KPI e Metriche</button>
</div>
<!-- Active Incidents Section -->
<div class="section active" id="section-active">
<div class="section-header">
<div class="section-title">
Incidenti Attivi
<span class="help-icon">?
<div class="tooltip">
<div class="tooltip-title">HELP DELLA SEZIONE</div>
Incidenti attualmente in gestione (stato: Rilevato, In triage, Contenuto, In eradicazione, In ripristino). Richiede monitoraggio e azioni attive dal team incident response.
</div>
</span>
</div>
<div>
<button class="btn" onclick="refreshData()">Aggiorna</button>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Codice</th>
<th>Data/Ora</th>
<th>Descrizione</th>
<th>Severità</th>
<th>Classificazione</th>
<th>Stato</th>
<th>Responsabile</th>
<th>Notifica CSIRT</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>INC-2024-047</strong></td>
<td>2024-03-06 08:15</td>
<td>Tentativo ransomware bloccato su server ERP</td>
<td><span class="sev-1">SEV-1</span></td>
<td>IS-2</td>
<td><span class="status-badge status-contenuto">Contenuto</span></td>
<td>CISO</td>
<td>✅ Preallarme inviato</td>
<td>
<button class="btn" onclick="viewIncident('INC-2024-047')">Dettagli</button>
</td>
</tr>
<tr>
<td><strong>INC-2024-046</strong></td>
<td>2024-03-05 14:32</td>
<td>Accesso non autorizzato account privilegiato</td>
<td><span class="sev-2">SEV-2</span></td>
<td>IS-2</td>
<td><span class="status-badge status-eradicazione">In eradicazione</span></td>
<td>SOC Lead</td>
<td>✅ Notifica completa</td>
<td>
<button class="btn" onclick="viewIncident('INC-2024-046')">Dettagli</button>
</td>
</tr>
<tr>
<td><strong>INC-2024-045</strong></td>
<td>2024-03-04 10:20</td>
<td>DDoS su servizio web pubblico</td>
<td><span class="sev-2">SEV-2</span></td>
<td>IS-1</td>
<td><span class="status-badge status-ripristino">In ripristino</span></td>
<td>Network Manager</td>
<td>✅ Notifica completa</td>
<td>
<button class="btn" onclick="viewIncident('INC-2024-045')">Dettagli</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- All Incidents Section -->
<div class="section" id="section-all">
<div class="section-header">
<div class="section-title">
Tutti gli Incidenti
<span class="help-icon">?
<div class="tooltip">
<div class="tooltip-title">HELP DELLA SEZIONE</div>
Registro completo di tutti gli incidenti di sicurezza rilevati, inclusi quelli chiusi e in post-analisi. Filtrabili per periodo, severità, classificazione e stato.
</div>
</span>
</div>
</div>
<div class="filter-bar">
<div class="filter-group">
<span class="filter-label">Periodo:</span>
<input type="date" value="2024-01-01">
<span>-</span>
<input type="date" value="2024-03-06">
</div>
<div class="filter-group">
<span class="filter-label">Severità:</span>
<select>
<option>Tutte</option>
<option>SEV-1 Critico</option>
<option>SEV-2 Alto</option>
<option>SEV-3 Medio</option>
<option>SEV-4 Basso</option>
</select>
</div>
<div class="filter-group">
<span class="filter-label">Classificazione:</span>
<select>
<option>Tutte</option>
<option>IS-1 Impatto servizi</option>
<option>IS-2 Impatto dati</option>
<option>IS-3 Impatto supply chain</option>
<option id="is4Option">IS-4 Ricorrenti</option>
</select>
</div>
<div class="filter-group">
<span class="filter-label">Stato:</span>
<select>
<option>Tutti</option>
<option>Attivi</option>
<option>Chiusi</option>
<option>Post-analisi</option>
</select>
</div>
<div class="filter-group">
<span class="filter-label">Cerca:</span>
<input type="search" placeholder="Codice, descrizione...">
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Codice</th>
<th>Data/Ora</th>
<th>Descrizione</th>
<th>Severità</th>
<th>Classificazione</th>
<th>Stato</th>
<th>TTD</th>
<th>TTC</th>
<th>TTR</th>
<th>Notifica CSIRT</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>INC-2024-047</strong></td>
<td>2024-03-06 08:15</td>
<td>Tentativo ransomware bloccato su server ERP</td>
<td><span class="sev-1">SEV-1</span></td>
<td>IS-2</td>
<td><span class="status-badge status-contenuto">Contenuto</span></td>
<td>0.5h</td>
<td>2.2h</td>
<td>-</td>
<td>✅ Preallarme</td>
<td><button class="btn" onclick="viewIncident('INC-2024-047')">Dettagli</button></td>
</tr>
<tr>
<td><strong>INC-2024-046</strong></td>
<td>2024-03-05 14:32</td>
<td>Accesso non autorizzato account privilegiato</td>
<td><span class="sev-2">SEV-2</span></td>
<td>IS-2</td>
<td><span class="status-badge status-eradicazione">In eradicazione</span></td>
<td>1.2h</td>
<td>3.5h</td>
<td>-</td>
<td>✅ Completa</td>
<td><button class="btn" onclick="viewIncident('INC-2024-046')">Dettagli</button></td>
</tr>
<tr>
<td><strong>INC-2024-045</strong></td>
<td>2024-03-04 10:20</td>
<td>DDoS su servizio web pubblico</td>
<td><span class="sev-2">SEV-2</span></td>
<td>IS-1</td>
<td><span class="status-badge status-ripristino">In ripristino</span></td>
<td>0.3h</td>
<td>4.1h</td>
<td>-</td>
<td>✅ Completa</td>
<td><button class="btn" onclick="viewIncident('INC-2024-045')">Dettagli</button></td>
</tr>
<tr>
<td><strong>INC-2024-044</strong></td>
<td>2024-02-28 16:45</td>
<td>Phishing mirato a utenti amministrativi</td>
<td><span class="sev-3">SEV-3</span></td>
<td>Non significativo</td>
<td><span class="status-badge status-chiuso">Chiuso</span></td>
<td>2.1h</td>
<td>5.3h</td>
<td>8.2h</td>
<td>❌ Non richiesta</td>
<td><button class="btn" onclick="viewIncident('INC-2024-044')">Dettagli</button></td>
</tr>
<tr>
<td><strong>INC-2024-043</strong></td>
<td>2024-02-25 09:12</td>
<td>Malware rilevato su endpoint utente</td>
<td><span class="sev-4">SEV-4</span></td>
<td>Non significativo</td>
<td><span class="status-badge status-chiuso">Chiuso</span></td>
<td>0.1h</td>
<td>0.5h</td>
<td>1.2h</td>
<td>❌ Non richiesta</td>
<td><button class="btn" onclick="viewIncident('INC-2024-043')">Dettagli</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Notified to CSIRT Section -->
<div class="section" id="section-notified">
<div class="section-header">
<div class="section-title">
Incidenti Notificati al CSIRT Italia
<span class="help-icon">?
<div class="tooltip">
<div class="tooltip-title">HELP DELLA SEZIONE</div>
Incidenti significativi per i quali è stata effettuata notifica obbligatoria al CSIRT Italia secondo D.Lgs. 138/2024. Include tracking di preallarme (24h), notifica completa (72h) e relazione finale (1 mese).
</div>
</span>
</div>
<div>
<button class="btn" onclick="window.location.href='incident-notification.html'">Nuova Notifica</button>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Codice Incidente</th>
<th>Data Incidente</th>
<th>Classificazione</th>
<th>Preallarme (24h)</th>
<th>Notifica Completa (72h)</th>
<th>Relazione Finale (1 mese)</th>
<th>Stato Conformità</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>INC-2024-047</strong></td>
<td>2024-03-06 08:15</td>
<td>IS-2</td>
<td>✅ 2024-03-06 14:30<br><span style="color: var(--success); font-size: 11px;">Entro termine</span></td>
<td>⏳ Scadenza: 2024-03-09 08:15</td>
<td>⏳ Scadenza: 2024-04-09</td>
<td><span class="status-badge status-rilevato">In corso</span></td>
<td>
<button class="btn" onclick="viewNotification('INC-2024-047')">Gestisci</button>
</td>
</tr>
<tr>
<td><strong>INC-2024-046</strong></td>
<td>2024-03-05 14:32</td>
<td>IS-2</td>
<td>✅ 2024-03-06 09:15<br><span style="color: var(--success); font-size: 11px;">Entro termine</span></td>
<td>✅ 2024-03-07 16:20<br><span style="color: var(--success); font-size: 11px;">Entro termine</span></td>
<td>⏳ Scadenza: 2024-04-07</td>
<td><span class="status-badge status-rilevato">In corso</span></td>
<td>
<button class="btn" onclick="viewNotification('INC-2024-046')">Gestisci</button>
</td>
</tr>
<tr>
<td><strong>INC-2024-045</strong></td>
<td>2024-03-04 10:20</td>
<td>IS-1</td>
<td>✅ 2024-03-04 18:45<br><span style="color: var(--success); font-size: 11px;">Entro termine</span></td>
<td>✅ 2024-03-06 11:30<br><span style="color: var(--success); font-size: 11px;">Entro termine</span></td>
<td>⏳ Scadenza: 2024-04-06</td>
<td><span class="status-badge status-rilevato">In corso</span></td>
<td>
<button class="btn" onclick="viewNotification('INC-2024-045')">Gestisci</button>
</td>
</tr>
<tr>
<td><strong>INC-2024-038</strong></td>
<td>2024-02-15 11:30</td>
<td>IS-1</td>
<td>✅ 2024-02-15 20:15</td>
<td>✅ 2024-02-17 09:45</td>
<td>✅ 2024-03-18 14:00<br><span style="color: var(--success); font-size: 11px;">Completata</span></td>
<td><span class="status-badge status-chiuso">Completato</span></td>
<td>
<button class="btn" onclick="viewNotification('INC-2024-038')">Visualizza</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Timeline Section -->
<div class="section" id="section-timeline">
<div class="section-header">
<div class="section-title">
Timeline Attività Recenti
<span class="help-icon">?
<div class="tooltip">
<div class="tooltip-title">HELP DELLA SEZIONE</div>
Cronologia delle attività più recenti relative alla gestione incidenti: nuovi incidenti, escalation, notifiche, chiusure, PIR completate.
</div>
</span>
</div>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-time">2024-03-06 14:30</div>
<div class="timeline-content">
<strong>Preallarme CSIRT inviato</strong> per incidente INC-2024-047 (Ransomware)<br>
<span style="color: var(--text-secondary); font-size: 12px;">Notifica inviata entro 24h come richiesto</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-06 10:45</div>
<div class="timeline-content">
<strong>Incidente contenuto</strong> - INC-2024-047<br>
<span style="color: var(--text-secondary); font-size: 12px;">Server isolato, malware bloccato, nessuna crittografia dati</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-06 08:15</div>
<div class="timeline-content">
<strong>Nuovo incidente SEV-1</strong> - INC-2024-047<br>
<span style="color: var(--text-secondary); font-size: 12px;">Tentativo ransomware rilevato da EDR su server ERP</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-06 09:15</div>
<div class="timeline-content">
<strong>Preallarme CSIRT inviato</strong> per incidente INC-2024-046<br>
<span style="color: var(--text-secondary); font-size: 12px;">Accesso non autorizzato account privilegiato</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-05 14:32</div>
<div class="timeline-content">
<strong>Nuovo incidente SEV-2</strong> - INC-2024-046<br>
<span style="color: var(--text-secondary); font-size: 12px;">Rilevato accesso anomalo su account amministratore di dominio</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-04 18:45</div>
<div class="timeline-content">
<strong>Preallarme CSIRT inviato</strong> per incidente INC-2024-045<br>
<span style="color: var(--text-secondary); font-size: 12px;">DDoS su servizio web pubblico</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-03 15:20</div>
<div class="timeline-content">
<strong>Post-Incident Review completata</strong> - INC-2024-042<br>
<span style="color: var(--text-secondary); font-size: 12px;">Identificate 5 azioni correttive, tutte assegnate</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-03-01 11:00</div>
<div class="timeline-content">
<strong>Incidente chiuso</strong> - INC-2024-041<br>
<span style="color: var(--text-secondary); font-size: 12px;">Ripristino completato, servizi operativi, PIR pianificata</span>
</div>
</div>
</div>
</div>
<!-- KPI Section -->
<div class="section" id="section-kpi">
<div class="section-header">
<div class="section-title">
KPI e Metriche Org.10
<span class="help-icon">?
<div class="tooltip">
<div class="tooltip-title">HELP DELLA SEZIONE</div>
Key Performance Indicators per la gestione incidenti secondo procedura Org.10. Monitoraggio trimestrale con target definiti.
</div>
</span>
</div>
<div>
<button class="btn" onclick="exportKPI()">Esporta Report</button>
</div>
</div>
<div class="stats-grid">
<div class="stat-card success">
<div class="stat-label">TTD Medio (Time to Detect)</div>
<div class="stat-value">2.4h</div>
<div class="stat-sublabel">Trend: ↓ -15% vs trimestre precedente</div>
</div>
<div class="stat-card success">
<div class="stat-label">TTC Medio SEV-1 (Time to Contain)</div>
<div class="stat-value">0.8h</div>
<div class="stat-sublabel">Target: <1h Raggiunto
</div>
<div class="stat-card success">
<div class="stat-label">TTC Medio SEV-2 (Time to Contain)</div>
<div class="stat-value">3.2h</div>
<div class="stat-sublabel">Target: <4h Raggiunto</div>
</div>
<div class="stat-card success">
<div class="stat-label">TTR Medio (Time to Recover)</div>
<div class="stat-value">6.5h</div>
<div class="stat-sublabel">Conforme a RTO dichiarati</div>
</div>
<div class="stat-card success">
<div class="stat-label">Preallarme CSIRT entro 24h</div>
<div class="stat-value">100%</div>
<div class="stat-sublabel">12/12 incidenti significativi</div>
</div>
<div class="stat-card success">
<div class="stat-label">Notifica Completa entro 72h</div>
<div class="stat-value">100%</div>
<div class="stat-sublabel">Target: 100% ✅</div>
</div>
<div class="stat-card success">
<div class="stat-label">Relazione Finale entro 1 mese</div>
<div class="stat-value">100%</div>
<div class="stat-sublabel">9/9 completate nei tempi</div>
</div>
<div class="stat-card success">
<div class="stat-label">Post-Incident Review completate</div>
<div class="stat-value">100%</div>
<div class="stat-sublabel">Entro 2 settimane (SEV-1/2)</div>
</div>
<div class="stat-card success">
<div class="stat-label">Azioni Correttive chiuse</div>
<div class="stat-value">94%</div>
<div class="stat-sublabel">Target: ≥90% ✅</div>
</div>
<div class="stat-card success">
<div class="stat-label">Incidenti Ricorrenti</div>
<div class="stat-value">0</div>
<div class="stat-sublabel">Stessa root cause - Target: 0 ✅</div>
</div>
<div class="stat-card success">
<div class="stat-label">Esercitazioni Annuali</div>
<div class="stat-value">2</div>
<div class="stat-sublabel">Target: ≥1 ✅ Superato</div>
</div>
<div class="stat-card">
<div class="stat-label">Costo Medio Incidente</div>
<div class="stat-value">€8.5K</div>
<div class="stat-sublabel">Diretto + indiretto stimato</div>
</div>
</div>
<div style="margin-top: 32px;">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Distribuzione Incidenti per Severità (Ultimi 12 mesi)</h3>
<div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
<div class="stat-card critical">
<div class="stat-label">SEV-1 Critico</div>
<div class="stat-value">4</div>
<div class="stat-sublabel">8.5% del totale</div>
</div>
<div class="stat-card high">
<div class="stat-label">SEV-2 Alto</div>
<div class="stat-value">8</div>
<div class="stat-sublabel">17.0% del totale</div>
</div>
<div class="stat-card">
<div class="stat-label">SEV-3 Medio</div>
<div class="stat-value">18</div>
<div class="stat-sublabel">38.3% del totale</div>
</div>
<div class="stat-card">
<div class="stat-label">SEV-4 Basso</div>
<div class="stat-value">17</div>
<div class="stat-sublabel">36.2% del totale</div>
</div>
</div>
</div>
<div style="margin-top: 32px;">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Distribuzione per Classificazione NIS2</h3>
<div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
<div class="stat-card">
<div class="stat-label">IS-1 Impatto Servizi</div>
<div class="stat-value">5</div>
<div class="stat-sublabel">Notificati al CSIRT</div>
</div>
<div class="stat-card">
<div class="stat-label">IS-2 Impatto Dati</div>
<div class="stat-value">6</div>
<div class="stat-sublabel">Notificati al CSIRT</div>
</div>
<div class="stat-card">
<div class="stat-label">IS-3 Impatto Supply Chain</div>
<div class="stat-value">1</div>
<div class="stat-sublabel">Notificati al CSIRT</div>
</div>
<div class="stat-card" id="is4Card" style="display: none;">
<div class="stat-label">IS-4 Ricorrenti <span class="essential-badge">ESSENZIALI</span></div>
<div class="stat-value">0</div>
<div class="stat-sublabel">Notificati al CSIRT</div>
</div>
<div class="stat-card">
<div class="stat-label">Non Significativi</div>
<div class="stat-value">35</div>
<div class="stat-sublabel">Gestione interna</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Verifica tipo soggetto e adatta interfaccia
function checkSubjectType() {
const subjectType = sessionStorage.getItem('nis2_subject_type');
if (!subjectType) {
window.location.href = 'incident-gate.html';
return;
}
const badge = document.getElementById('subjectBadge');
const is4Option = document.getElementById('is4Option');
const is4Card = document.getElementById('is4Card');
const activeIncidentsAlert = document.getElementById('activeIncidentsAlert');
if (subjectType === 'essential') {
badge.textContent = 'Soggetto Essenziale';
badge.classList.remove('important');
badge.classList.add('essential');
// Mostra opzioni IS-4 solo per essenziali
if (is4Option) is4Option.style.display = 'block';
if (is4Card) is4Card.style.display = 'block';
} else {
badge.textContent = 'Soggetto Importante';
badge.classList.remove('essential');
badge.classList.add('important');
// Nascondi opzioni IS-4 per importanti
if (is4Option) is4Option.style.display = 'none';
if (is4Card) is4Card.style.display = 'none';
}
// Mostra alert se ci sono incidenti attivi
const activeCount = 3; // Simulato
if (activeCount > 0) {
activeIncidentsAlert.style.display = 'block';
document.getElementById('activeIncidentsCount').textContent = activeCount;
}
}
function showTab(tabName) {
// Nascondi tutte le sezioni
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});
// Rimuovi active da tutti i tab
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// Mostra la sezione selezionata
document.getElementById('section-' + tabName).classList.add('active');
// Attiva il tab selezionato
event.target.classList.add('active');
}
function viewIncident(incidentCode) {
window.location.href = 'incident-detail.html?id=' + incidentCode;
}
function viewNotification(incidentCode) {
window.location.href = 'incident-notification.html?id=' + incidentCode;
}
function refreshData() {
alert('Dati aggiornati con successo');
location.reload();
}
function exportKPI() {
// Simula export
const tooltip = document.createElement('div');
tooltip.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 10000;
max-width: 400px;
`;
tooltip.innerHTML = `
<h3 style="margin-bottom: 16px; color: var(--text-primary);">📊 Export Report KPI</h3>
<p style="color: var(--text-secondary); margin-bottom: 16px; font-size: 13px;">
Report trimestrale KPI Org.10 - Gestione Incidenti<br>
Periodo: Q1 2024 (Gen-Mar 2024)
</p>
<div style="background: var(--bg-tertiary); padding: 12px; border-radius: 4px; margin-bottom: 16px; font-family: monospace; font-size: 12px;">
📄 KPI_Report_Q1_2024.xlsx<br>
📄 KPI_Report_Q1_2024.pdf<br>
📄 Incident_Log_Q1_2024.csv
</div>
<button onclick="this.parentElement.remove()" style="width: 100%; padding: 10px; background: var(--accent-primary); border: none; border-radius: 6px; color: white; font-weight: 600; cursor: pointer;">
Chiudi
</button>
`;
document.body.appendChild(tooltip);
}
// Inizializza al caricamento
window.addEventListener('DOMContentLoaded', checkSubjectType);
</script>
</body>
</html>