19855efacc
Some checks failed
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
ci/woodpecker/manual/build-ci-image Pipeline was successful
ci/woodpecker/manual/main Pipeline failed
All services: admin-v2, studio-v2, website, ai-compliance-sdk, consent-service, klausur-service, voice-service, and infrastructure. Large PDFs and compiled binaries excluded via .gitignore.
403 lines
17 KiB
TypeScript
403 lines
17 KiB
TypeScript
'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>
|
|
)
|
|
}
|