fix: Restore all files lost during destructive rebase
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
402
website/app/admin/security/page.tsx
Normal file
402
website/app/admin/security/page.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Security Dashboard Admin Page
|
||||
*
|
||||
* DevSecOps Dashboard with:
|
||||
* - Security scan results (Gitleaks, Semgrep, Bandit, Trivy, Grype)
|
||||
* - Vulnerability findings with severity levels
|
||||
* - Scan history and statistics
|
||||
* - Manual scan triggers
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import AdminLayout from '@/components/admin/AdminLayout'
|
||||
|
||||
interface Finding {
|
||||
id: string
|
||||
tool: string
|
||||
severity: string
|
||||
title: string
|
||||
message?: string
|
||||
file?: string
|
||||
line?: number
|
||||
found_at: string
|
||||
}
|
||||
|
||||
interface SeveritySummary {
|
||||
critical: number
|
||||
high: number
|
||||
medium: number
|
||||
low: number
|
||||
info: number
|
||||
total: number
|
||||
}
|
||||
|
||||
interface ToolStatus {
|
||||
name: string
|
||||
installed: boolean
|
||||
version?: string
|
||||
last_run?: string
|
||||
last_findings: number
|
||||
}
|
||||
|
||||
interface HistoryItem {
|
||||
timestamp: string
|
||||
title: string
|
||||
description: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface Metric {
|
||||
name: string
|
||||
value: number
|
||||
unit: string
|
||||
trend?: string
|
||||
}
|
||||
|
||||
interface Container {
|
||||
name: string
|
||||
status: string
|
||||
health: string
|
||||
cpu_percent: number
|
||||
memory_mb: number
|
||||
uptime: string
|
||||
}
|
||||
|
||||
type TabType = 'overview' | 'findings' | 'scans' | 'monitoring'
|
||||
|
||||
export default function SecurityPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
||||
const [summary, setSummary] = useState<SeveritySummary | null>(null)
|
||||
const [findings, setFindings] = useState<Finding[]>([])
|
||||
const [tools, setTools] = useState<ToolStatus[]>([])
|
||||
const [history, setHistory] = useState<HistoryItem[]>([])
|
||||
const [metrics, setMetrics] = useState<Metric[]>([])
|
||||
const [containers, setContainers] = useState<Container[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [scanLoading, setScanLoading] = useState(false)
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [])
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [summaryRes, findingsRes, toolsRes, historyRes, metricsRes, containersRes] = await Promise.all([
|
||||
fetch(`${BACKEND_URL}/api/v1/security/summary`),
|
||||
fetch(`${BACKEND_URL}/api/v1/security/findings`),
|
||||
fetch(`${BACKEND_URL}/api/v1/security/tools`),
|
||||
fetch(`${BACKEND_URL}/api/v1/security/history`),
|
||||
fetch(`${BACKEND_URL}/api/v1/security/monitoring/metrics`),
|
||||
fetch(`${BACKEND_URL}/api/v1/security/monitoring/containers`),
|
||||
])
|
||||
|
||||
if (summaryRes.ok) setSummary(await summaryRes.json())
|
||||
if (findingsRes.ok) setFindings(await findingsRes.json())
|
||||
if (toolsRes.ok) setTools(await toolsRes.json())
|
||||
if (historyRes.ok) setHistory(await historyRes.json())
|
||||
if (metricsRes.ok) setMetrics(await metricsRes.json())
|
||||
if (containersRes.ok) setContainers(await containersRes.json())
|
||||
} catch (error) {
|
||||
console.error('Failed to load security data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const runScan = async (scanType: string) => {
|
||||
setScanLoading(true)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/api/v1/security/scan/${scanType}`, {
|
||||
method: 'POST',
|
||||
})
|
||||
if (res.ok) {
|
||||
// Reload data after a short delay
|
||||
setTimeout(loadData, 2000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Scan failed:', error)
|
||||
} finally {
|
||||
setScanLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity.toUpperCase()) {
|
||||
case 'CRITICAL': return 'bg-purple-100 text-purple-800 border-purple-200'
|
||||
case 'HIGH': return 'bg-red-100 text-red-800 border-red-200'
|
||||
case 'MEDIUM': return 'bg-yellow-100 text-yellow-800 border-yellow-200'
|
||||
case 'LOW': return 'bg-blue-100 text-blue-800 border-blue-200'
|
||||
default: return 'bg-gray-100 text-gray-800 border-gray-200'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'success': return 'text-green-600'
|
||||
case 'warning': return 'text-yellow-600'
|
||||
case 'error': return 'text-red-600'
|
||||
default: return 'text-gray-600'
|
||||
}
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: 'overview', name: 'Übersicht', icon: '📊' },
|
||||
{ id: 'findings', name: 'Findings', icon: '🔍' },
|
||||
{ id: 'scans', name: 'Scans', icon: '🛡️' },
|
||||
{ id: 'monitoring', name: 'Monitoring', icon: '📈' },
|
||||
]
|
||||
|
||||
return (
|
||||
<AdminLayout title="Security Dashboard" description="DevSecOps & Vulnerability Management">
|
||||
{/* Tab Navigation */}
|
||||
<div className="mb-6 border-b border-gray-200">
|
||||
<nav className="flex gap-4">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as TabType)}
|
||||
className={`py-3 px-4 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="mr-2">{tab.icon}</span>
|
||||
{tab.name}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
||||
<span className="ml-3 text-gray-600">Lade Sicherheitsdaten...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
{/* Severity Summary Cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
|
||||
<div className="text-3xl font-bold text-purple-700">{summary?.critical || 0}</div>
|
||||
<div className="text-sm text-purple-600">Critical</div>
|
||||
</div>
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<div className="text-3xl font-bold text-red-700">{summary?.high || 0}</div>
|
||||
<div className="text-sm text-red-600">High</div>
|
||||
</div>
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<div className="text-3xl font-bold text-yellow-700">{summary?.medium || 0}</div>
|
||||
<div className="text-sm text-yellow-600">Medium</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="text-3xl font-bold text-blue-700">{summary?.low || 0}</div>
|
||||
<div className="text-sm text-blue-600">Low</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<div className="text-3xl font-bold text-gray-700">{summary?.total || 0}</div>
|
||||
<div className="text-sm text-gray-600">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tools Status */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">DevSecOps Tools</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{tools.map((tool) => (
|
||||
<div key={tool.name} className={`p-4 rounded-lg border ${tool.installed ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${tool.installed ? 'bg-green-500' : 'bg-gray-400'}`}></span>
|
||||
<span className="font-medium text-sm">{tool.name}</span>
|
||||
</div>
|
||||
{tool.version && <div className="text-xs text-gray-500 mt-1">{tool.version}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent History */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Letzte Scans</h3>
|
||||
<div className="space-y-3">
|
||||
{history.slice(0, 5).map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
|
||||
<div>
|
||||
<div className={`font-medium ${getStatusColor(item.status)}`}>{item.title}</div>
|
||||
<div className="text-sm text-gray-500">{item.description}</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{new Date(item.timestamp).toLocaleString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Findings Tab */}
|
||||
{activeTab === 'findings' && (
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold">Security Findings ({findings.length})</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-100">
|
||||
{findings.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
Keine Findings vorhanden. Starten Sie einen Scan.
|
||||
</div>
|
||||
) : (
|
||||
findings.map((finding, idx) => (
|
||||
<div key={idx} className="p-4 hover:bg-gray-50">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded border ${getSeverityColor(finding.severity)}`}>
|
||||
{finding.severity}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-900">{finding.title}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{finding.message}</div>
|
||||
<div className="flex gap-4 mt-2 text-xs text-gray-400">
|
||||
<span>Tool: {finding.tool}</span>
|
||||
{finding.file && <span>File: {finding.file}</span>}
|
||||
{finding.line && <span>Line: {finding.line}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scans Tab */}
|
||||
{activeTab === 'scans' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Scan starten</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{[
|
||||
{ type: 'secrets', name: 'Secrets', icon: '🔑', desc: 'Gitleaks' },
|
||||
{ type: 'sast', name: 'SAST', icon: '🔬', desc: 'Semgrep, Bandit' },
|
||||
{ type: 'deps', name: 'Dependencies', icon: '📦', desc: 'Trivy, Grype' },
|
||||
{ type: 'containers', name: 'Container', icon: '🐳', desc: 'Trivy Image' },
|
||||
{ type: 'sbom', name: 'SBOM', icon: '📋', desc: 'Syft' },
|
||||
{ type: 'all', name: 'Full Scan', icon: '🛡️', desc: 'Alle Tools' },
|
||||
].map((scan) => (
|
||||
<button
|
||||
key={scan.type}
|
||||
onClick={() => runScan(scan.type)}
|
||||
disabled={scanLoading}
|
||||
className="p-4 border border-gray-200 rounded-lg hover:border-primary-400 hover:bg-primary-50 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<div className="text-2xl mb-2">{scan.icon}</div>
|
||||
<div className="font-medium text-sm">{scan.name}</div>
|
||||
<div className="text-xs text-gray-500">{scan.desc}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{scanLoading && (
|
||||
<div className="mt-4 text-sm text-gray-600 flex items-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600 mr-2"></div>
|
||||
Scan läuft...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scan History */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Scan Historie</h3>
|
||||
<div className="space-y-3">
|
||||
{history.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`w-2 h-2 rounded-full ${item.status === 'success' ? 'bg-green-500' : item.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'}`}></span>
|
||||
<div>
|
||||
<div className="font-medium">{item.title}</div>
|
||||
<div className="text-sm text-gray-500">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{new Date(item.timestamp).toLocaleString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Monitoring Tab */}
|
||||
{activeTab === 'monitoring' && (
|
||||
<div className="space-y-6">
|
||||
{/* Metrics */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">System Metriken</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
{metrics.map((metric, idx) => (
|
||||
<div key={idx} className="p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
{metric.value}{metric.unit && <span className="text-sm text-gray-500 ml-1">{metric.unit}</span>}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">{metric.name}</div>
|
||||
{metric.trend && (
|
||||
<div className={`text-xs mt-1 ${metric.trend === 'up' ? 'text-green-600' : metric.trend === 'down' ? 'text-red-600' : 'text-gray-500'}`}>
|
||||
{metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'} {metric.trend}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Containers */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Container Status</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{containers.map((container, idx) => (
|
||||
<div key={idx} className={`p-4 rounded-lg border-l-4 ${container.health === 'healthy' ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50'}`}>
|
||||
<div className="font-medium text-gray-900 truncate" title={container.name}>
|
||||
{container.name.replace('breakpilot-pwa-', '')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`w-2 h-2 rounded-full ${container.status === 'running' ? 'bg-green-500' : 'bg-red-500'}`}></span>
|
||||
<span className="text-sm text-gray-600">{container.status}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-3 text-xs text-gray-500">
|
||||
<div>CPU: {container.cpu_percent}%</div>
|
||||
<div>RAM: {container.memory_mb}MB</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{container.uptime}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Refresh Button */}
|
||||
<div className="fixed bottom-6 right-6">
|
||||
<button
|
||||
onClick={loadData}
|
||||
className="bg-primary-600 text-white p-3 rounded-full shadow-lg hover:bg-primary-700 transition-colors"
|
||||
title="Daten aktualisieren"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
407
website/app/admin/security/wizard/page.tsx
Normal file
407
website/app/admin/security/wizard/page.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import AdminLayout from '@/components/admin/AdminLayout'
|
||||
import {
|
||||
WizardStepper,
|
||||
WizardNavigation,
|
||||
EducationCard,
|
||||
ArchitectureContext,
|
||||
TestRunner,
|
||||
TestSummary,
|
||||
type WizardStep,
|
||||
type TestCategoryResult,
|
||||
type FullTestResults,
|
||||
type EducationContent,
|
||||
type ArchitectureContextType,
|
||||
} from '@/components/wizard'
|
||||
|
||||
// ==============================================
|
||||
// Constants
|
||||
// ==============================================
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
const STEPS: WizardStep[] = [
|
||||
{ id: 'welcome', name: 'Willkommen', icon: '👋', status: 'pending' },
|
||||
{ id: 'api-health', name: 'API Status', icon: '💚', status: 'pending', category: 'api-health' },
|
||||
{ id: 'sast', name: 'SAST', icon: '🔍', status: 'pending', category: 'sast' },
|
||||
{ id: 'sca', name: 'SCA', icon: '📦', status: 'pending', category: 'sca' },
|
||||
{ id: 'secrets', name: 'Secrets', icon: '🔑', status: 'pending', category: 'secrets' },
|
||||
{ id: 'sbom', name: 'SBOM', icon: '📋', status: 'pending', category: 'sbom' },
|
||||
{ id: 'summary', name: 'Zusammenfassung', icon: '📊', status: 'pending' },
|
||||
]
|
||||
|
||||
const EDUCATION_CONTENT: Record<string, EducationContent> = {
|
||||
'welcome': {
|
||||
title: 'Willkommen zum Security Wizard',
|
||||
content: [
|
||||
'DevSecOps integriert Sicherheit in den gesamten Entwicklungsprozess.',
|
||||
'',
|
||||
'In diesem Wizard lernen Sie:',
|
||||
'• SAST: Statische Code-Analyse mit Semgrep',
|
||||
'• SCA: Abhaengigkeits-Scans mit Trivy/Grype',
|
||||
'• Secrets: Erkennung von Credentials im Code',
|
||||
'• SBOM: Software Bill of Materials',
|
||||
'',
|
||||
'Shift Left Security: Fehler frueh finden, nicht in Produktion!',
|
||||
],
|
||||
},
|
||||
'api-health': {
|
||||
title: 'Security API - DevSecOps Dashboard',
|
||||
content: [
|
||||
'Die Security API steuert alle Sicherheitsscans.',
|
||||
'',
|
||||
'Endpunkte:',
|
||||
'• /api/security/scan - Scan starten',
|
||||
'• /api/security/findings - Ergebnisse abrufen',
|
||||
'• /api/security/sbom - SBOM generieren',
|
||||
'• /api/security/dashboard - Uebersicht',
|
||||
'',
|
||||
'Verfuegbarkeit kritisch fuer:',
|
||||
'• CI/CD Pipeline Integration',
|
||||
'• Automatisierte Security Gates',
|
||||
'• Compliance Reporting',
|
||||
],
|
||||
},
|
||||
'sast': {
|
||||
title: 'SAST - Static Application Security Testing',
|
||||
content: [
|
||||
'Semgrep analysiert Quellcode OHNE ihn auszufuehren.',
|
||||
'',
|
||||
'Findet:',
|
||||
'• SQL Injection Patterns',
|
||||
'• XSS Vulnerabilities',
|
||||
'• Hardcoded Credentials',
|
||||
'• Insecure Crypto Usage',
|
||||
'• Path Traversal Risks',
|
||||
'',
|
||||
'Vorteile:',
|
||||
'• Schnell (Minuten, nicht Stunden)',
|
||||
'• Findet Fehler VOR dem Deployment',
|
||||
'• Keine laufende Anwendung noetig',
|
||||
],
|
||||
},
|
||||
'sca': {
|
||||
title: 'SCA - Software Composition Analysis',
|
||||
content: [
|
||||
'Prueft Abhaengigkeiten auf bekannte Schwachstellen (CVEs).',
|
||||
'',
|
||||
'Gescannt werden:',
|
||||
'• Python packages (requirements.txt)',
|
||||
'• Node modules (package.json)',
|
||||
'• Go modules (go.mod)',
|
||||
'• Container Images',
|
||||
'',
|
||||
'Bekannte Angriffe:',
|
||||
'• Log4Shell (CVE-2021-44228)',
|
||||
'• NPM Supply Chain Attacks',
|
||||
'• PyPI Typosquatting',
|
||||
],
|
||||
},
|
||||
'secrets': {
|
||||
title: 'Secret Detection mit Gitleaks',
|
||||
content: [
|
||||
'Findet versehentlich eingecheckte Secrets:',
|
||||
'',
|
||||
'• AWS/GCP/Azure Credentials',
|
||||
'• Database Passwords',
|
||||
'• Private SSH Keys',
|
||||
'• OAuth Tokens',
|
||||
'• JWT Secrets',
|
||||
'',
|
||||
'Risiken ohne Detection:',
|
||||
'• Kompromittierte Cloud-Accounts',
|
||||
'• Datenlecks durch DB-Zugriff',
|
||||
'• Git History: Einmal gepusht, schwer zu entfernen!',
|
||||
],
|
||||
},
|
||||
'sbom': {
|
||||
title: 'SBOM - Software Bill of Materials',
|
||||
content: [
|
||||
'Vollstaendige Inventarliste aller Software-Komponenten.',
|
||||
'',
|
||||
'Rechtliche Anforderungen:',
|
||||
'• US Executive Order 14028 (2021)',
|
||||
'• EU Cyber Resilience Act',
|
||||
'• Supply Chain Transparency',
|
||||
'',
|
||||
'Inhalt:',
|
||||
'• Alle Abhaengigkeiten mit Versionen',
|
||||
'• Lizenzen (GPL, MIT, Apache, etc.)',
|
||||
'• Bekannte Vulnerabilities',
|
||||
'',
|
||||
'Bei Zero-Day: Schnell pruefen wer betroffen ist',
|
||||
],
|
||||
},
|
||||
'summary': {
|
||||
title: 'Test-Zusammenfassung',
|
||||
content: [
|
||||
'Hier sehen Sie eine Uebersicht aller durchgefuehrten Tests:',
|
||||
'• Anzahl bestandener Tests',
|
||||
'• Fehlgeschlagene Tests mit Details',
|
||||
'• Empfehlungen zur Behebung',
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const ARCHITECTURE_CONTEXTS: Record<string, ArchitectureContextType> = {
|
||||
'api-health': {
|
||||
layer: 'api',
|
||||
services: ['backend'],
|
||||
dependencies: ['PostgreSQL', 'Scanner Tools'],
|
||||
dataFlow: ['API Request', 'Scanner Dispatch', 'Result Storage'],
|
||||
},
|
||||
'sast': {
|
||||
layer: 'service',
|
||||
services: ['backend'],
|
||||
dependencies: ['semgrep', 'Git Repository'],
|
||||
dataFlow: ['Source Code', 'Semgrep Scanner', 'Findings', 'Dashboard'],
|
||||
},
|
||||
'sca': {
|
||||
layer: 'service',
|
||||
services: ['backend'],
|
||||
dependencies: ['trivy', 'grype', 'CVE Database'],
|
||||
dataFlow: ['Dependencies', 'Scanner', 'CVE Lookup', 'Report'],
|
||||
},
|
||||
'secrets': {
|
||||
layer: 'service',
|
||||
services: ['backend'],
|
||||
dependencies: ['gitleaks', 'Git Repository'],
|
||||
dataFlow: ['Git History', 'Pattern Matching', 'Findings'],
|
||||
},
|
||||
'sbom': {
|
||||
layer: 'service',
|
||||
services: ['backend'],
|
||||
dependencies: ['syft', 'cyclonedx'],
|
||||
dataFlow: ['Container/Code', 'Syft Analysis', 'CycloneDX SBOM'],
|
||||
},
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Main Component
|
||||
// ==============================================
|
||||
|
||||
export default function SecurityWizardPage() {
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
const [steps, setSteps] = useState<WizardStep[]>(STEPS)
|
||||
const [categoryResults, setCategoryResults] = useState<Record<string, TestCategoryResult>>({})
|
||||
const [fullResults, setFullResults] = useState<FullTestResults | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const currentStepData = steps[currentStep]
|
||||
const isTestStep = currentStepData?.category !== undefined
|
||||
const isWelcome = currentStepData?.id === 'welcome'
|
||||
const isSummary = currentStepData?.id === 'summary'
|
||||
|
||||
const runCategoryTest = async (category: string) => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BACKEND_URL}/api/admin/security-tests/${category}`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const result: TestCategoryResult = await response.json()
|
||||
setCategoryResults((prev) => ({ ...prev, [category]: result }))
|
||||
|
||||
setSteps((prev) =>
|
||||
prev.map((step) =>
|
||||
step.category === category
|
||||
? { ...step, status: result.failed === 0 ? 'completed' : 'failed' }
|
||||
: step
|
||||
)
|
||||
)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const runAllTests = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BACKEND_URL}/api/admin/security-tests/run-all`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const results: FullTestResults = await response.json()
|
||||
setFullResults(results)
|
||||
|
||||
setSteps((prev) =>
|
||||
prev.map((step) => {
|
||||
if (step.category) {
|
||||
const catResult = results.categories.find((c) => c.category === step.category)
|
||||
if (catResult) {
|
||||
return { ...step, status: catResult.failed === 0 ? 'completed' : 'failed' }
|
||||
}
|
||||
}
|
||||
return step
|
||||
})
|
||||
)
|
||||
|
||||
const newCategoryResults: Record<string, TestCategoryResult> = {}
|
||||
results.categories.forEach((cat) => {
|
||||
newCategoryResults[cat.category] = cat
|
||||
})
|
||||
setCategoryResults(newCategoryResults)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const goToNext = () => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
setSteps((prev) =>
|
||||
prev.map((step, idx) =>
|
||||
idx === currentStep && step.status === 'pending'
|
||||
? { ...step, status: 'completed' }
|
||||
: step
|
||||
)
|
||||
)
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const goToPrev = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep((prev) => prev - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStepClick = (index: number) => {
|
||||
if (index <= currentStep || steps[index - 1]?.status !== 'pending') {
|
||||
setCurrentStep(index)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
title="Security Wizard"
|
||||
description="Interaktives Lernen und Testen der DevSecOps Pipeline"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="text-3xl mr-3">🛡️</span>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-gray-800">DevSecOps Test Wizard</h2>
|
||||
<p className="text-sm text-gray-600">SAST, SCA, Secrets, SBOM</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/admin/security" className="text-blue-600 hover:text-blue-800 text-sm">
|
||||
← Zurueck zum Security Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Stepper */}
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-6">
|
||||
<WizardStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<span className="text-3xl mr-3">{currentStepData?.icon}</span>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-800">
|
||||
Schritt {currentStep + 1}: {currentStepData?.name}
|
||||
</h2>
|
||||
<p className="text-gray-500 text-sm">
|
||||
{currentStep + 1} von {steps.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EducationCard content={EDUCATION_CONTENT[currentStepData?.id || '']} />
|
||||
|
||||
{isTestStep && currentStepData?.category && ARCHITECTURE_CONTEXTS[currentStepData.category] && (
|
||||
<ArchitectureContext
|
||||
context={ARCHITECTURE_CONTEXTS[currentStepData.category]}
|
||||
currentStep={currentStepData.name}
|
||||
/>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
|
||||
<strong>Fehler:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isWelcome && (
|
||||
<div className="text-center py-8">
|
||||
<button
|
||||
onClick={goToNext}
|
||||
className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Wizard starten
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isTestStep && currentStepData?.category && (
|
||||
<TestRunner
|
||||
category={currentStepData.category}
|
||||
categoryResult={categoryResults[currentStepData.category]}
|
||||
isLoading={isLoading}
|
||||
onRunTests={() => runCategoryTest(currentStepData.category!)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isSummary && (
|
||||
<div>
|
||||
{!fullResults ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-600 mb-4">
|
||||
Fuehren Sie alle Tests aus um eine Zusammenfassung zu sehen.
|
||||
</p>
|
||||
<button
|
||||
onClick={runAllTests}
|
||||
disabled={isLoading}
|
||||
className={`px-6 py-3 rounded-lg font-medium transition-colors ${
|
||||
isLoading
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? 'Alle Tests laufen...' : 'Alle Tests ausfuehren'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<TestSummary results={fullResults} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<WizardNavigation
|
||||
currentStep={currentStep}
|
||||
totalSteps={steps.length}
|
||||
onPrev={goToPrev}
|
||||
onNext={goToNext}
|
||||
showNext={!isSummary}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-gray-500 text-sm mt-6">
|
||||
Diese Tests pruefen die DevSecOps Security-Konfiguration.
|
||||
Bei Fragen wenden Sie sich an das Security-Team.
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user