[split-required] Split 58 monoliths across Python, Go, TypeScript (Phases 1-3)
Phase 1 — Python (klausur-service): 5 monoliths → 36 files - dsfa_corpus_ingestion.py (1,828 LOC → 5 files) - cv_ocr_engines.py (2,102 LOC → 7 files) - cv_layout.py (3,653 LOC → 10 files) - vocab_worksheet_api.py (2,783 LOC → 8 files) - grid_build_core.py (1,958 LOC → 6 files) Phase 2 — Go (edu-search-service, school-service): 8 monoliths → 19 files - staff_crawler.go (1,402 → 4), policy/store.go (1,168 → 3) - policy_handlers.go (700 → 2), repository.go (684 → 2) - search.go (592 → 2), ai_extraction_handlers.go (554 → 2) - seed_data.go (591 → 2), grade_service.go (646 → 2) Phase 3 — TypeScript (admin-lehrer): 45 monoliths → 220+ files - sdk/types.ts (2,108 → 16 domain files) - ai/rag/page.tsx (2,686 → 14 files) - 22 page.tsx files split into _components/ + _hooks/ - 11 component files split into sub-components - 10 SDK data catalogs added to loc-exceptions - Deleted dead backup index_original.ts (4,899 LOC) All original public APIs preserved via re-export facades. Zero new errors: Python imports verified, Go builds clean, TypeScript tsc --noEmit shows only pre-existing errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,244 @@
|
||||
'use client'
|
||||
|
||||
interface DocumentationSectionProps {
|
||||
showFullDocs: boolean
|
||||
setShowFullDocs: (show: boolean) => void
|
||||
}
|
||||
|
||||
export function DocumentationSection({ showFullDocs, setShowFullDocs }: DocumentationSectionProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Security Dokumentation
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowFullDocs(!showFullDocs)}
|
||||
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
<svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
{showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Short Description */}
|
||||
<div className="prose prose-slate max-w-none">
|
||||
<p className="text-slate-600">
|
||||
Das Security Dashboard bietet einen zentralen Ueberblick ueber alle DevSecOps-Aktivitaeten.
|
||||
Es integriert 6 Security-Tools fuer umfassende Code- und Infrastruktur-Sicherheit:
|
||||
Secrets Detection, Static Analysis (SAST), Dependency Scanning und SBOM-Generierung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tool Quick Reference */}
|
||||
<ToolQuickReference />
|
||||
|
||||
{/* Full Documentation (Expandable) */}
|
||||
{showFullDocs && <FullDocumentation />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ToolQuickReference() {
|
||||
const tools = [
|
||||
{ bg: 'bg-red-50', icon: '🔑', name: 'Gitleaks', cat: 'Secrets', textName: 'text-red-800', textCat: 'text-red-600' },
|
||||
{ bg: 'bg-blue-50', icon: '🔍', name: 'Semgrep', cat: 'SAST', textName: 'text-blue-800', textCat: 'text-blue-600' },
|
||||
{ bg: 'bg-yellow-50', icon: '🐍', name: 'Bandit', cat: 'Python', textName: 'text-yellow-800', textCat: 'text-yellow-600' },
|
||||
{ bg: 'bg-purple-50', icon: '🔒', name: 'Trivy', cat: 'Container', textName: 'text-purple-800', textCat: 'text-purple-600' },
|
||||
{ bg: 'bg-green-50', icon: '🐛', name: 'Grype', cat: 'Dependencies', textName: 'text-green-800', textCat: 'text-green-600' },
|
||||
{ bg: 'bg-orange-50', icon: '📦', name: 'Syft', cat: 'SBOM', textName: 'text-orange-800', textCat: 'text-orange-600' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
|
||||
{tools.map(t => (
|
||||
<div key={t.name} className={`${t.bg} p-3 rounded-lg text-center`}>
|
||||
<span className="text-lg">{t.icon}</span>
|
||||
<p className={`text-xs font-medium ${t.textName} mt-1`}>{t.name}</p>
|
||||
<p className={`text-xs ${t.textCat}`}>{t.cat}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FullDocumentation() {
|
||||
return (
|
||||
<div className="mt-6 bg-slate-50 rounded-lg p-6 border border-slate-200">
|
||||
<div className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-600 prose-li:text-slate-600">
|
||||
|
||||
<h3>1. Security Tools Uebersicht</h3>
|
||||
|
||||
<h4>🔑 Gitleaks - Secrets Detection</h4>
|
||||
<p>Durchsucht die gesamte Git-Historie nach versehentlich eingecheckten Secrets wie API-Keys, Passwoertern und Tokens.</p>
|
||||
<ul>
|
||||
<li><strong>Scan-Bereich:</strong> Git-Historie, Commits, Branches</li>
|
||||
<li><strong>Erkannte Secrets:</strong> AWS Keys, GitHub Tokens, Private Keys, Passwoerter</li>
|
||||
<li><strong>Ausgabe:</strong> JSON-Report mit Fundstelle, Commit-Hash, Autor</li>
|
||||
</ul>
|
||||
|
||||
<h4>🔍 Semgrep - Static Application Security Testing</h4>
|
||||
<p>Fuehrt regelbasierte statische Code-Analyse durch, um Sicherheitsluecken und Anti-Patterns zu finden.</p>
|
||||
<ul>
|
||||
<li><strong>Unterstuetzte Sprachen:</strong> Python, JavaScript, TypeScript, Go, Java</li>
|
||||
<li><strong>Regelsets:</strong> OWASP Top 10, CWE, Security Best Practices</li>
|
||||
<li><strong>Findings:</strong> SQL Injection, XSS, Path Traversal, Insecure Deserialization</li>
|
||||
</ul>
|
||||
|
||||
<h4>🐍 Bandit - Python Security Linter</h4>
|
||||
<p>Spezialisierter Security-Linter fuer Python-Code mit Fokus auf haeufige Sicherheitsprobleme.</p>
|
||||
<ul>
|
||||
<li><strong>Checks:</strong> Hardcoded Passwords, SQL Injection, Shell Injection</li>
|
||||
<li><strong>Severity Levels:</strong> LOW, MEDIUM, HIGH</li>
|
||||
<li><strong>Confidence:</strong> LOW, MEDIUM, HIGH</li>
|
||||
</ul>
|
||||
|
||||
<h4>🔒 Trivy - Container & Filesystem Scanner</h4>
|
||||
<p>Scannt Container-Images und Dateisysteme auf bekannte Schwachstellen (CVEs).</p>
|
||||
<ul>
|
||||
<li><strong>Scan-Typen:</strong> Container Images, Filesystems, Git Repositories</li>
|
||||
<li><strong>Datenbanken:</strong> NVD, GitHub Advisory, Alpine SecDB, RedHat OVAL</li>
|
||||
<li><strong>Ausgabe:</strong> CVE-ID, Severity, Fixed Version, Description</li>
|
||||
</ul>
|
||||
|
||||
<h4>🐛 Grype - Dependency Vulnerability Scanner</h4>
|
||||
<p>Analysiert Software-Abhaengigkeiten auf bekannte Sicherheitsluecken.</p>
|
||||
<ul>
|
||||
<li><strong>Package Manager:</strong> npm, pip, go mod, Maven, Gradle</li>
|
||||
<li><strong>Input:</strong> SBOM (CycloneDX/SPDX), Lockfiles, Container Images</li>
|
||||
<li><strong>Matching:</strong> CPE-basiert, Package URL (purl)</li>
|
||||
</ul>
|
||||
|
||||
<h4>📦 Syft - SBOM Generator</h4>
|
||||
<p>Erstellt Software Bill of Materials (SBOM) fuer Compliance und Supply-Chain-Security.</p>
|
||||
<ul>
|
||||
<li><strong>Formate:</strong> CycloneDX (JSON/XML), SPDX, Syft JSON</li>
|
||||
<li><strong>Erfassung:</strong> Packages, Lizenzen, Versionen, Checksums</li>
|
||||
<li><strong>Compliance:</strong> NIS2, ISO 27001, DSGVO Art. 32</li>
|
||||
</ul>
|
||||
|
||||
<h3>2. Severity-Klassifizierung</h3>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2">Severity</th>
|
||||
<th className="text-left py-2">CVSS Score</th>
|
||||
<th className="text-left py-2">Reaktionszeit</th>
|
||||
<th className="text-left py-2">Beispiele</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs font-semibold">CRITICAL</span></td><td>9.0 - 10.0</td><td>Sofort (24h)</td><td>RCE, Auth Bypass, Exposed Secrets</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs font-semibold">HIGH</span></td><td>7.0 - 8.9</td><td>1-3 Tage</td><td>SQL Injection, XSS, Path Traversal</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded text-xs font-semibold">MEDIUM</span></td><td>4.0 - 6.9</td><td>1-2 Wochen</td><td>Information Disclosure, CSRF</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs font-semibold">LOW</span></td><td>0.1 - 3.9</td><td>Naechster Sprint</td><td>Minor Info Leak, Best Practice</td></tr>
|
||||
<tr><td className="py-2"><span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs font-semibold">INFO</span></td><td>0.0</td><td>Optional</td><td>Empfehlungen, Hinweise</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>3. Scan-Workflow</h3>
|
||||
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
||||
{`┌─────────────────────────────────────────────────────────────┐
|
||||
│ Security Scan Pipeline │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. Secrets Detection (Gitleaks) │
|
||||
│ └── Scannt Git-Historie nach API-Keys & Credentials │
|
||||
│ ↓ │
|
||||
│ 2. Static Analysis (Semgrep + Bandit) │
|
||||
│ └── Code-Analyse auf Sicherheitsluecken │
|
||||
│ ↓ │
|
||||
│ 3. Dependency Scan (Trivy + Grype) │
|
||||
│ └── CVE-Check aller Abhaengigkeiten │
|
||||
│ ↓ │
|
||||
│ 4. SBOM Generation (Syft) │
|
||||
│ └── Software Bill of Materials erstellen │
|
||||
│ ↓ │
|
||||
│ 5. Report & Dashboard │
|
||||
│ └── Ergebnisse aggregieren und visualisieren │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘`}
|
||||
</pre>
|
||||
|
||||
<h3>4. Remediation-Strategien</h3>
|
||||
|
||||
<h4>Bei Secrets-Findings:</h4>
|
||||
<ol>
|
||||
<li>Secret sofort rotieren (neue API-Keys, Passwoerter)</li>
|
||||
<li>Git-Historie bereinigen (BFG Repo-Cleaner oder git filter-branch)</li>
|
||||
<li>Betroffene Systeme auf unauthorisierte Zugriffe pruefen</li>
|
||||
<li>Secret-Scanning in Pre-Commit-Hooks aktivieren</li>
|
||||
</ol>
|
||||
|
||||
<h4>Bei SAST-Findings:</h4>
|
||||
<ol>
|
||||
<li>Finding-Details und betroffene Code-Stelle analysieren</li>
|
||||
<li>Empfohlene Fix-Strategie aus Semgrep-Dokumentation anwenden</li>
|
||||
<li>Unit-Tests fuer den Fix schreiben</li>
|
||||
<li>Code-Review durch Security-erfahrenen Entwickler</li>
|
||||
</ol>
|
||||
|
||||
<h4>Bei Dependency-Vulnerabilities:</h4>
|
||||
<ol>
|
||||
<li>Pruefen ob ein Patch/Update verfuegbar ist</li>
|
||||
<li>Abhaengigkeit auf gepatchte Version aktualisieren</li>
|
||||
<li>Falls kein Patch: Workaround oder Alternative evaluieren</li>
|
||||
<li>Temporaer: WAF-Regel als Mitigation</li>
|
||||
</ol>
|
||||
|
||||
<h3>5. CI/CD Integration</h3>
|
||||
<p>Security-Scans sind in die Gitea Actions Pipeline integriert:</p>
|
||||
<ul>
|
||||
<li><strong>Pre-Commit:</strong> Gitleaks (lokale Secrets-Pruefung)</li>
|
||||
<li><strong>Pull Request:</strong> Semgrep, Bandit, Trivy (Blocking bei Critical)</li>
|
||||
<li><strong>Main Branch:</strong> Full Scan + SBOM-Update</li>
|
||||
<li><strong>Nightly:</strong> Dependency-Update-Check</li>
|
||||
</ul>
|
||||
|
||||
<h3>6. Compliance-Mapping</h3>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2">Regulation</th>
|
||||
<th className="text-left py-2">Artikel</th>
|
||||
<th className="text-left py-2">Erfuellt durch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b"><td className="py-2">DSGVO</td><td>Art. 32</td><td>Alle Security-Scans, Vulnerability Management</td></tr>
|
||||
<tr className="border-b"><td className="py-2">NIS2</td><td>Art. 21</td><td>SBOM, Supply-Chain-Security, Incident Response</td></tr>
|
||||
<tr className="border-b"><td className="py-2">ISO 27001</td><td>A.12.6</td><td>Vulnerability Management, Patch Management</td></tr>
|
||||
<tr><td className="py-2">OWASP</td><td>Top 10</td><td>SAST (Semgrep), Secrets Detection</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>7. API-Endpunkte</h3>
|
||||
<table className="min-w-full text-sm font-mono">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2">Methode</th>
|
||||
<th className="text-left py-2">Endpoint</th>
|
||||
<th className="text-left py-2 font-sans">Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/tools</td><td className="font-sans">Tool-Status abrufen</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/findings</td><td className="font-sans">Alle Findings abrufen</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/summary</td><td className="font-sans">Severity-Zusammenfassung</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/history</td><td className="font-sans">Scan-Historie</td></tr>
|
||||
<tr className="border-b"><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/all</td><td className="font-sans">Full Scan starten</td></tr>
|
||||
<tr><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/[tool]</td><td className="font-sans">Einzelnes Tool scannen</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
'use client'
|
||||
|
||||
import type { Finding } from '../types'
|
||||
import { getSeverityBadge } from '../useSecurityDashboard'
|
||||
|
||||
interface FindingsTabProps {
|
||||
filteredFindings: Finding[]
|
||||
severityFilter: string | null
|
||||
setSeverityFilter: (filter: string | null) => void
|
||||
toolFilter: string | null
|
||||
setToolFilter: (filter: string | null) => void
|
||||
}
|
||||
|
||||
const SEVERITY_OPTIONS = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO']
|
||||
const TOOL_OPTIONS = ['gitleaks', 'semgrep', 'bandit', 'trivy', 'grype']
|
||||
|
||||
export function FindingsTab({
|
||||
filteredFindings,
|
||||
severityFilter,
|
||||
setSeverityFilter,
|
||||
toolFilter,
|
||||
setToolFilter,
|
||||
}: FindingsTabProps) {
|
||||
return (
|
||||
<div>
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2 mb-4 flex-wrap">
|
||||
<button
|
||||
onClick={() => setSeverityFilter(null)}
|
||||
className={`px-3 py-1 rounded-full text-sm ${!severityFilter ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
{SEVERITY_OPTIONS.map(sev => (
|
||||
<button
|
||||
key={sev}
|
||||
onClick={() => setSeverityFilter(sev)}
|
||||
className={`px-3 py-1 rounded-full text-sm ${severityFilter === sev ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
>
|
||||
{sev}
|
||||
</button>
|
||||
))}
|
||||
<span className="mx-2 border-l border-slate-300" />
|
||||
{TOOL_OPTIONS.map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setToolFilter(toolFilter === t ? null : t)}
|
||||
className={`px-3 py-1 rounded-full text-sm capitalize ${toolFilter === t ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredFindings.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
Keine Findings mit diesem Filter gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200">
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Zeile</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredFindings.map((finding, idx) => (
|
||||
<tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
|
||||
<td className="py-3 px-4">
|
||||
<span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="text-sm text-slate-900">{finding.title}</div>
|
||||
{finding.message && (
|
||||
<div className="text-xs text-slate-500 mt-1">{finding.message}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-500 font-mono max-w-xs truncate">
|
||||
{finding.file || '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-500">{finding.line || '-'}</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-500">
|
||||
{finding.found_at ? new Date(finding.found_at).toLocaleDateString('de-DE') : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import type { HistoryItem } from '../types'
|
||||
import { getHistoryStatusColor } from '../useSecurityDashboard'
|
||||
|
||||
interface HistoryTabProps {
|
||||
history: HistoryItem[]
|
||||
}
|
||||
|
||||
export function HistoryTab({ history }: HistoryTabProps) {
|
||||
if (history.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
Keine Scan-Historie vorhanden.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200" />
|
||||
{history.map((item, idx) => (
|
||||
<div key={idx} className="relative pl-10 pb-6">
|
||||
<div className={`absolute left-2.5 w-3 h-3 rounded-full ${getHistoryStatusColor(item.status)}`} />
|
||||
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<span className="font-semibold text-slate-900">{item.title}</span>
|
||||
<span className="text-xs text-slate-500">
|
||||
{new Date(item.timestamp).toLocaleString('de-DE')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
'use client'
|
||||
|
||||
import type { MonitoringMetric, ActiveAlert } from '../types'
|
||||
|
||||
interface MonitoringTabProps {
|
||||
monitoringMetrics: MonitoringMetric[]
|
||||
activeAlerts: ActiveAlert[]
|
||||
}
|
||||
|
||||
export function MonitoringTab({ monitoringMetrics, activeAlerts }: MonitoringTabProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Real-time Metrics */}
|
||||
<MetricsGrid metrics={monitoringMetrics} />
|
||||
|
||||
{/* Active Alerts */}
|
||||
<AlertsList alerts={activeAlerts} />
|
||||
|
||||
{/* Security Overview Cards */}
|
||||
<SecurityOverviewCards />
|
||||
|
||||
{/* Link to CI/CD */}
|
||||
<PipelineSecurityLink />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MetricsGrid({ metrics }: { metrics: MonitoringMetric[] }) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Security Metriken
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{metrics.map((metric, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`rounded-lg p-4 border ${
|
||||
metric.status === 'critical' ? 'bg-red-50 border-red-200' :
|
||||
metric.status === 'warning' ? 'bg-yellow-50 border-yellow-200' :
|
||||
'bg-green-50 border-green-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className="text-xs text-slate-600">{metric.name}</span>
|
||||
<span className={`text-xs ${
|
||||
metric.trend === 'up' ? 'text-red-600' :
|
||||
metric.trend === 'down' ? 'text-green-600' :
|
||||
'text-slate-500'
|
||||
}`}>
|
||||
{metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`text-2xl font-bold ${
|
||||
metric.status === 'critical' ? 'text-red-700' :
|
||||
metric.status === 'warning' ? 'text-yellow-700' :
|
||||
'text-green-700'
|
||||
}`}>
|
||||
{metric.value}
|
||||
<span className="text-sm font-normal ml-1">{metric.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertsList({ alerts }: { alerts: ActiveAlert[] }) {
|
||||
const unacknowledgedCount = alerts.filter(a => !a.acknowledged).length
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
Aktive Alerts
|
||||
{unacknowledgedCount > 0 && (
|
||||
<span className="ml-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
|
||||
{unacknowledgedCount}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
{alerts.length === 0 ? (
|
||||
<div className="text-center py-8 bg-green-50 rounded-lg border border-green-200">
|
||||
<span className="text-4xl block mb-2">✓</span>
|
||||
<span className="text-green-700">Keine aktiven Security-Alerts</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{alerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`flex items-center justify-between p-4 rounded-lg border ${
|
||||
alert.severity === 'critical' ? 'bg-red-50 border-red-200' :
|
||||
alert.severity === 'high' ? 'bg-orange-50 border-orange-200' :
|
||||
alert.severity === 'medium' ? 'bg-yellow-50 border-yellow-200' :
|
||||
'bg-blue-50 border-blue-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded uppercase ${
|
||||
alert.severity === 'critical' ? 'bg-red-100 text-red-800' :
|
||||
alert.severity === 'high' ? 'bg-orange-100 text-orange-800' :
|
||||
alert.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-blue-100 text-blue-800'
|
||||
}`}>
|
||||
{alert.severity}
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-medium text-slate-900">{alert.title}</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
{alert.source} • {new Date(alert.timestamp).toLocaleString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!alert.acknowledged && (
|
||||
<button className="px-3 py-1 text-xs bg-white border border-slate-300 rounded hover:bg-slate-50">
|
||||
Bestaetigen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SecurityOverviewCards() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
Authentifizierung
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between"><span className="text-slate-600">Aktive Sessions</span><span className="font-medium">24</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">Fehlgeschlagene Logins (24h)</span><span className="font-medium text-green-600">0</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">2FA-Quote</span><span className="font-medium text-green-600">100%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
SSL/TLS
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between"><span className="text-slate-600">Zertifikate</span><span className="font-medium">5 aktiv</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">Naechster Ablauf</span><span className="font-medium text-green-600">45 Tage</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">TLS Version</span><span className="font-medium">1.3</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Firewall
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between"><span className="text-slate-600">Blockierte IPs (24h)</span><span className="font-medium">12</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">Rate Limit Hits</span><span className="font-medium text-yellow-600">7</span></div>
|
||||
<div className="flex justify-between"><span className="text-slate-600">WAF Status</span><span className="font-medium text-green-600">Aktiv</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PipelineSecurityLink() {
|
||||
return (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<div>
|
||||
<div className="font-medium text-blue-900">Pipeline Security</div>
|
||||
<div className="text-sm text-blue-700">Security-Scans in CI/CD Pipelines und Container-Status</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="/infrastructure/ci-cd"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
CI/CD Dashboard →
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
'use client'
|
||||
|
||||
import type { ToolStatus, Finding, ScanType, TabId } from '../types'
|
||||
import { TOOL_DESCRIPTIONS, TOOL_TO_SCAN_TYPE } from '../types'
|
||||
import { getSeverityBadge, getStatusBadge } from '../useSecurityDashboard'
|
||||
|
||||
interface OverviewTabProps {
|
||||
tools: ToolStatus[]
|
||||
findings: Finding[]
|
||||
scanning: string | null
|
||||
onRunScan: (scanType: ScanType) => void
|
||||
onSwitchTab: (tab: TabId) => void
|
||||
}
|
||||
|
||||
export function OverviewTab({ tools, findings, scanning, onRunScan, onSwitchTab }: OverviewTabProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Tools Grid */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">DevSecOps Tools</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{tools.map(tool => {
|
||||
const info = TOOL_DESCRIPTIONS[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
|
||||
const scanType = TOOL_TO_SCAN_TYPE[tool.name.toLowerCase()] || 'all'
|
||||
return (
|
||||
<div key={tool.name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl">{info.icon}</span>
|
||||
<span className="font-semibold text-slate-900">{tool.name}</span>
|
||||
</div>
|
||||
<span className={getStatusBadge(tool.installed)}>
|
||||
{tool.installed ? 'Installiert' : 'Nicht installiert'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 mb-3">{info.desc}</p>
|
||||
<div className="flex justify-between items-center text-xs text-slate-500">
|
||||
<span>{tool.version || '-'}</span>
|
||||
<span>Letzter Scan: {tool.last_run || 'Nie'}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onRunScan(scanType)}
|
||||
disabled={scanning !== null || !tool.installed}
|
||||
className={`mt-3 w-full px-3 py-1.5 text-sm border rounded transition-colors flex items-center justify-center gap-2 ${
|
||||
scanning === scanType
|
||||
? 'bg-orange-100 border-orange-300 text-orange-700'
|
||||
: 'bg-white border-slate-300 hover:bg-slate-50 disabled:opacity-50'
|
||||
}`}
|
||||
>
|
||||
{scanning === scanType ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600" />
|
||||
<span>Scan laeuft...</span>
|
||||
</>
|
||||
) : (
|
||||
'Scan starten'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Findings */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Aktuelle Findings</h3>
|
||||
{findings.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
<span className="text-4xl block mb-2">🎉</span>
|
||||
Keine Findings gefunden. Das ist gut!
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200">
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{findings.slice(0, 10).map((finding, idx) => (
|
||||
<tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
|
||||
<td className="py-3 px-4">
|
||||
<span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-900">{finding.title}</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-500 font-mono">{finding.file || '-'}</td>
|
||||
<td className="py-3 px-4 text-sm text-slate-500">
|
||||
{finding.found_at ? new Date(finding.found_at).toLocaleString('de-DE', {
|
||||
day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
|
||||
}) : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{findings.length > 10 && (
|
||||
<button
|
||||
onClick={() => onSwitchTab('findings')}
|
||||
className="mt-4 text-sm text-orange-600 hover:text-orange-700"
|
||||
>
|
||||
Alle {findings.length} Findings anzeigen →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import type { SeveritySummary, ScanType } from '../types'
|
||||
|
||||
interface SecurityHeaderProps {
|
||||
overallStatus: { label: string; color: string }
|
||||
summary: SeveritySummary
|
||||
scanning: string | null
|
||||
onRunScan: (scanType: ScanType) => void
|
||||
}
|
||||
|
||||
export function SecurityHeader({ overallStatus, summary, scanning, onRunScan }: SecurityHeaderProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<h2 className="text-xl font-semibold text-slate-900">Security Status</h2>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-semibold ${overallStatus.color}`}>
|
||||
{overallStatus.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-2 text-sm text-slate-500">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
Auto-Refresh aktiv
|
||||
</span>
|
||||
<button
|
||||
onClick={() => onRunScan('all')}
|
||||
disabled={scanning !== null}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
|
||||
scanning === 'all'
|
||||
? 'bg-orange-200 text-orange-800'
|
||||
: 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
|
||||
}`}
|
||||
>
|
||||
{scanning === 'all' ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
|
||||
<span>Full Scan laeuft...</span>
|
||||
</>
|
||||
) : (
|
||||
'Full Scan starten'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Severity Summary */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{([
|
||||
{ key: 'critical', border: 'border-red-500', text: 'text-red-600', label: 'Critical' },
|
||||
{ key: 'high', border: 'border-orange-500', text: 'text-orange-600', label: 'High' },
|
||||
{ key: 'medium', border: 'border-yellow-500', text: 'text-yellow-600', label: 'Medium' },
|
||||
{ key: 'low', border: 'border-green-500', text: 'text-green-600', label: 'Low' },
|
||||
{ key: 'info', border: 'border-blue-500', text: 'text-blue-600', label: 'Info' },
|
||||
{ key: 'total', border: 'border-slate-400', text: 'text-slate-700', label: 'Total' },
|
||||
] as const).map(({ key, border, text, label }) => (
|
||||
<div key={key} className={`border-l-4 ${border} bg-slate-50 rounded-r-lg p-4`}>
|
||||
<div className={`text-3xl font-bold ${text}`}>{summary[key]}</div>
|
||||
<div className="text-sm text-slate-600">{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
import type { ToolStatus, ScanType } from '../types'
|
||||
import { TOOL_DESCRIPTIONS, TOOL_TO_SCAN_TYPE } from '../types'
|
||||
import { getStatusBadge } from '../useSecurityDashboard'
|
||||
|
||||
interface ToolsTabProps {
|
||||
tools: ToolStatus[]
|
||||
scanning: string | null
|
||||
onRunScan: (scanType: ScanType) => void
|
||||
}
|
||||
|
||||
export function ToolsTab({ tools, scanning, onRunScan }: ToolsTabProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{tools.map(tool => {
|
||||
const info = TOOL_DESCRIPTIONS[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
|
||||
const scanType = TOOL_TO_SCAN_TYPE[tool.name.toLowerCase()] || 'all'
|
||||
return (
|
||||
<div key={tool.name} className="bg-white border border-slate-200 rounded-lg p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<span className="text-2xl">{info.icon}</span>
|
||||
<h3 className="text-lg font-semibold text-slate-900">{tool.name}</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">{info.desc}</p>
|
||||
</div>
|
||||
<span className={getStatusBadge(tool.installed)}>
|
||||
{tool.installed ? 'Installiert' : 'Nicht installiert'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">Version:</span>
|
||||
<span className="font-mono">{tool.version || '-'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">Letzter Scan:</span>
|
||||
<span>{tool.last_run || 'Nie'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">Findings:</span>
|
||||
<span className="font-semibold">{tool.last_findings}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
onClick={() => onRunScan(scanType)}
|
||||
disabled={scanning !== null || !tool.installed}
|
||||
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
|
||||
scanning === scanType
|
||||
? 'bg-orange-200 text-orange-800'
|
||||
: 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
|
||||
}`}
|
||||
>
|
||||
{scanning === scanType ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
|
||||
<span>Scan laeuft...</span>
|
||||
</>
|
||||
) : (
|
||||
'Scan starten'
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.open(`/api/v1/security/reports/${tool.name.toLowerCase()}`, '_blank')}
|
||||
className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user