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
696
website/app/admin/middleware/page.tsx
Normal file
696
website/app/admin/middleware/page.tsx
Normal file
@@ -0,0 +1,696 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Middleware Configuration Admin Page
|
||||
*
|
||||
* Manage middleware settings for BreakPilot:
|
||||
* - Enable/disable middlewares
|
||||
* - Configure rate limits
|
||||
* - Manage IP whitelist/blacklist
|
||||
* - View middleware events and statistics
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import AdminLayout from '@/components/admin/AdminLayout'
|
||||
import SystemInfoSection, { SYSTEM_INFO_CONFIGS } from '@/components/admin/SystemInfoSection'
|
||||
|
||||
interface MiddlewareConfig {
|
||||
id: string
|
||||
middleware_name: string
|
||||
enabled: boolean
|
||||
config: Record<string, any>
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
interface RateLimitIP {
|
||||
id: string
|
||||
ip_address: string
|
||||
list_type: 'whitelist' | 'blacklist'
|
||||
reason: string | null
|
||||
expires_at: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface MiddlewareEvent {
|
||||
id: string
|
||||
middleware_name: string
|
||||
event_type: string
|
||||
ip_address: string | null
|
||||
user_id: string | null
|
||||
request_path: string | null
|
||||
request_method: string | null
|
||||
details: Record<string, any> | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface MiddlewareStats {
|
||||
middleware_name: string
|
||||
total_events: number
|
||||
events_last_hour: number
|
||||
events_last_24h: number
|
||||
top_event_types: Array<{ event_type: string; count: number }>
|
||||
top_ips: Array<{ ip_address: string; count: number }>
|
||||
}
|
||||
|
||||
type TabType = 'overview' | 'rate-limiting' | 'security' | 'logging' | 'events'
|
||||
|
||||
const MIDDLEWARE_INFO: Record<string, { name: string; description: string; icon: string }> = {
|
||||
request_id: {
|
||||
name: 'Request-ID',
|
||||
description: 'Generates unique identifiers for request tracing',
|
||||
icon: '🔑',
|
||||
},
|
||||
security_headers: {
|
||||
name: 'Security Headers',
|
||||
description: 'Adds security headers (HSTS, CSP, X-Frame-Options)',
|
||||
icon: '🛡️',
|
||||
},
|
||||
cors: {
|
||||
name: 'CORS',
|
||||
description: 'Cross-Origin Resource Sharing configuration',
|
||||
icon: '🌐',
|
||||
},
|
||||
rate_limiter: {
|
||||
name: 'Rate Limiter',
|
||||
description: 'Protects against abuse with request limits',
|
||||
icon: '⏱️',
|
||||
},
|
||||
pii_redactor: {
|
||||
name: 'PII Redactor',
|
||||
description: 'Redacts sensitive data from logs (DSGVO)',
|
||||
icon: '🔒',
|
||||
},
|
||||
input_gate: {
|
||||
name: 'Input Gate',
|
||||
description: 'Validates request body size and content types',
|
||||
icon: '🚧',
|
||||
},
|
||||
}
|
||||
|
||||
export default function MiddlewarePage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
||||
const [configs, setConfigs] = useState<MiddlewareConfig[]>([])
|
||||
const [ipList, setIpList] = useState<RateLimitIP[]>([])
|
||||
const [events, setEvents] = useState<MiddlewareEvent[]>([])
|
||||
const [stats, setStats] = useState<MiddlewareStats[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [editingConfig, setEditingConfig] = useState<string | null>(null)
|
||||
const [newIP, setNewIP] = useState({ ip_address: '', list_type: 'whitelist', reason: '' })
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [])
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [configsRes, ipListRes, eventsRes, statsRes] = await Promise.all([
|
||||
fetch(`${BACKEND_URL}/api/admin/middleware`),
|
||||
fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list`),
|
||||
fetch(`${BACKEND_URL}/api/admin/middleware/events?limit=50`),
|
||||
fetch(`${BACKEND_URL}/api/admin/middleware/stats`),
|
||||
])
|
||||
|
||||
if (configsRes.ok) setConfigs(await configsRes.json())
|
||||
if (ipListRes.ok) setIpList(await ipListRes.json())
|
||||
if (eventsRes.ok) setEvents(await eventsRes.json())
|
||||
if (statsRes.ok) setStats(await statsRes.json())
|
||||
} catch (error) {
|
||||
console.error('Failed to load middleware data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMiddleware = async (name: string, enabled: boolean) => {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/api/admin/middleware/${name}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled }),
|
||||
})
|
||||
if (res.ok) {
|
||||
setConfigs(configs.map(c => c.middleware_name === name ? { ...c, enabled } : c))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update middleware:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateConfig = async (name: string, config: Record<string, any>) => {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/api/admin/middleware/${name}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ config }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const updated = await res.json()
|
||||
setConfigs(configs.map(c => c.middleware_name === name ? updated : c))
|
||||
setEditingConfig(null)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update config:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const addIP = async () => {
|
||||
if (!newIP.ip_address) return
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newIP),
|
||||
})
|
||||
if (res.ok) {
|
||||
const added = await res.json()
|
||||
setIpList([added, ...ipList])
|
||||
setNewIP({ ip_address: '', list_type: 'whitelist', reason: '' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to add IP:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeIP = async (id: string) => {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (res.ok) {
|
||||
setIpList(ipList.filter(ip => ip.id !== id))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to remove IP:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getConfig = (name: string) => configs.find(c => c.middleware_name === name)
|
||||
const getStats = (name: string) => stats.find(s => s.middleware_name === name)
|
||||
|
||||
const tabs = [
|
||||
{ id: 'overview', label: 'Overview', icon: '📊' },
|
||||
{ id: 'rate-limiting', label: 'Rate Limiting', icon: '⏱️' },
|
||||
{ id: 'security', label: 'Security', icon: '🛡️' },
|
||||
{ id: 'logging', label: 'Logging', icon: '📝' },
|
||||
{ id: 'events', label: 'Events', icon: '📋' },
|
||||
]
|
||||
|
||||
return (
|
||||
<AdminLayout title="Middleware Configuration" description="Manage middleware settings for BreakPilot">
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b border-gray-200 mb-6">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as TabType)}
|
||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === tab.id
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="mr-2">{tab.icon}</span>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Test Wizard Link */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-4 mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">🧪</span>
|
||||
<div>
|
||||
<h3 className="font-medium text-blue-800">UI Test Wizard</h3>
|
||||
<p className="text-sm text-blue-600">
|
||||
Interaktives Testing mit Lernmaterial - Testen Sie alle Middleware-Komponenten Schritt fuer Schritt
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="/admin/middleware/test-wizard"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
|
||||
>
|
||||
Wizard starten →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-500">Loading middleware configuration...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-medium">Middleware Status</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Object.entries(MIDDLEWARE_INFO).map(([key, info]) => {
|
||||
const config = getConfig(key)
|
||||
const mwStats = getStats(key)
|
||||
return (
|
||||
<div key={key} className="bg-white rounded-lg shadow p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-2">{info.icon}</span>
|
||||
<h4 className="font-medium">{info.name}</h4>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => config && toggleMiddleware(key, !config.enabled)}
|
||||
disabled={saving || !config}
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
config?.enabled ? 'bg-green-500' : 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
config?.enabled ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-3">{info.description}</p>
|
||||
{mwStats && (
|
||||
<div className="text-xs text-gray-400">
|
||||
<span className="mr-3">Last hour: {mwStats.events_last_hour} events</span>
|
||||
<span>24h: {mwStats.events_last_24h} events</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-medium mb-4">Activity Summary (24h)</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{stats.map((s) => (
|
||||
<div key={s.middleware_name} className="bg-gray-50 rounded-lg p-4">
|
||||
<p className="text-sm text-gray-500">{MIDDLEWARE_INFO[s.middleware_name]?.name || s.middleware_name}</p>
|
||||
<p className="text-2xl font-bold">{s.events_last_24h}</p>
|
||||
<p className="text-xs text-gray-400">{s.events_last_hour} in last hour</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rate Limiting Tab */}
|
||||
{activeTab === 'rate-limiting' && (
|
||||
<div className="space-y-6">
|
||||
{/* Rate Limit Config */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">Rate Limit Settings</h3>
|
||||
{(() => {
|
||||
const config = getConfig('rate_limiter')
|
||||
if (!config) return <p>Loading...</p>
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">IP Limit (req/min)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={config.config.ip_limit || 100}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, ip_limit: parseInt(e.target.value) }
|
||||
updateConfig('rate_limiter', newConfig)
|
||||
}}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">User Limit (req/min)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={config.config.user_limit || 500}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, user_limit: parseInt(e.target.value) }
|
||||
updateConfig('rate_limiter', newConfig)
|
||||
}}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Auth Limit (req/min)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={config.config.auth_limit || 20}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, auth_limit: parseInt(e.target.value) }
|
||||
updateConfig('rate_limiter', newConfig)
|
||||
}}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* IP Whitelist/Blacklist */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">IP Whitelist / Blacklist</h3>
|
||||
|
||||
{/* Add IP Form */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="IP Address (e.g., 192.168.1.1)"
|
||||
value={newIP.ip_address}
|
||||
onChange={(e) => setNewIP({ ...newIP, ip_address: e.target.value })}
|
||||
className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<select
|
||||
value={newIP.list_type}
|
||||
onChange={(e) => setNewIP({ ...newIP, list_type: e.target.value as 'whitelist' | 'blacklist' })}
|
||||
className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
>
|
||||
<option value="whitelist">Whitelist</option>
|
||||
<option value="blacklist">Blacklist</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Reason (optional)"
|
||||
value={newIP.reason}
|
||||
onChange={(e) => setNewIP({ ...newIP, reason: e.target.value })}
|
||||
className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
onClick={addIP}
|
||||
disabled={saving || !newIP.ip_address}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* IP List Table */}
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
|
||||
<th className="px-4 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{ipList.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-4 text-center text-gray-500">
|
||||
No IPs in whitelist/blacklist
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
ipList.map((ip) => (
|
||||
<tr key={ip.id}>
|
||||
<td className="px-4 py-2 font-mono text-sm">{ip.ip_address}</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
ip.list_type === 'whitelist' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{ip.list_type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{ip.reason || '-'}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{new Date(ip.created_at).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<button
|
||||
onClick={() => removeIP(ip.id)}
|
||||
disabled={saving}
|
||||
className="text-red-600 hover:text-red-800"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Security Tab */}
|
||||
{activeTab === 'security' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">Security Headers Configuration</h3>
|
||||
{(() => {
|
||||
const config = getConfig('security_headers')
|
||||
if (!config) return <p>Loading...</p>
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium">HSTS (Strict-Transport-Security)</p>
|
||||
<p className="text-sm text-gray-500">Force HTTPS connections</p>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.config.hsts_enabled ?? true}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, hsts_enabled: e.target.checked }
|
||||
updateConfig('security_headers', newConfig)
|
||||
}}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium">CSP (Content-Security-Policy)</p>
|
||||
<p className="text-sm text-gray-500">Control resource loading</p>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.config.csp_enabled ?? true}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, csp_enabled: e.target.checked }
|
||||
updateConfig('security_headers', newConfig)
|
||||
}}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">CSP Policy</label>
|
||||
<textarea
|
||||
value={config.config.csp_policy || "default-src 'self'"}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, csp_policy: e.target.value }
|
||||
updateConfig('security_headers', newConfig)
|
||||
}}
|
||||
rows={3}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">Input Gate Configuration</h3>
|
||||
{(() => {
|
||||
const config = getConfig('input_gate')
|
||||
if (!config) return <p>Loading...</p>
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Max Body Size (bytes)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={config.config.max_body_size || 10485760}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, max_body_size: parseInt(e.target.value) }
|
||||
updateConfig('input_gate', newConfig)
|
||||
}}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{((config.config.max_body_size || 10485760) / 1024 / 1024).toFixed(1)} MB
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Max File Size (bytes)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={config.config.max_file_size || 52428800}
|
||||
onChange={(e) => {
|
||||
const newConfig = { ...config.config, max_file_size: parseInt(e.target.value) }
|
||||
updateConfig('input_gate', newConfig)
|
||||
}}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{((config.config.max_file_size || 52428800) / 1024 / 1024).toFixed(1)} MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Logging Tab */}
|
||||
{activeTab === 'logging' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">PII Redaction Settings</h3>
|
||||
{(() => {
|
||||
const config = getConfig('pii_redactor')
|
||||
if (!config) return <p>Loading...</p>
|
||||
const patterns = config.config.patterns || ['email', 'ip_v4', 'ip_v6', 'phone_de']
|
||||
const allPatterns = ['email', 'ip_v4', 'ip_v6', 'phone_de', 'phone_intl', 'iban', 'uuid', 'name_prefix', 'student_id']
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
Select which PII patterns to redact from logs (DSGVO compliance)
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||
{allPatterns.map((pattern) => (
|
||||
<label key={pattern} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={patterns.includes(pattern)}
|
||||
onChange={(e) => {
|
||||
const newPatterns = e.target.checked
|
||||
? [...patterns, pattern]
|
||||
: patterns.filter((p: string) => p !== pattern)
|
||||
updateConfig('pii_redactor', { ...config.config, patterns: newPatterns })
|
||||
}}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<span className="text-sm">{pattern.replace('_', ' ')}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-medium mb-4">Request-ID Configuration</h3>
|
||||
{(() => {
|
||||
const config = getConfig('request_id')
|
||||
if (!config) return <p>Loading...</p>
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Header Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={config.config.header_name || 'X-Request-ID'}
|
||||
onChange={(e) => {
|
||||
updateConfig('request_id', { ...config.config, header_name: e.target.value })
|
||||
}}
|
||||
className="mt-1 block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Events Tab */}
|
||||
{activeTab === 'events' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium">Recent Middleware Events</h3>
|
||||
<button
|
||||
onClick={loadData}
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Middleware</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Event</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{events.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-4 text-center text-gray-500">
|
||||
No events recorded yet
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
events.map((event) => (
|
||||
<tr key={event.id}>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{new Date(event.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className="text-sm font-medium">
|
||||
{MIDDLEWARE_INFO[event.middleware_name]?.name || event.middleware_name}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
event.event_type.includes('blocked') || event.event_type.includes('exceeded')
|
||||
? 'bg-red-100 text-red-800'
|
||||
: event.event_type.includes('add') || event.event_type.includes('changed')
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{event.event_type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 font-mono text-sm text-gray-500">
|
||||
{event.ip_address || '-'}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500 truncate max-w-xs">
|
||||
{event.request_path || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* System Info Section - For Internal/External Audits */}
|
||||
<div className="mt-8 border-t border-slate-200 pt-8">
|
||||
<SystemInfoSection config={SYSTEM_INFO_CONFIGS.middleware} />
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
617
website/app/admin/middleware/test-wizard/page.tsx
Normal file
617
website/app/admin/middleware/test-wizard/page.tsx
Normal file
@@ -0,0 +1,617 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
// ==============================================
|
||||
// Types
|
||||
// ==============================================
|
||||
|
||||
interface TestResult {
|
||||
name: string
|
||||
description: string
|
||||
expected: string
|
||||
actual: string
|
||||
status: 'passed' | 'failed' | 'pending' | 'skipped'
|
||||
duration_ms: number
|
||||
error_message?: string
|
||||
}
|
||||
|
||||
interface TestCategoryResult {
|
||||
category: string
|
||||
display_name: string
|
||||
description: string
|
||||
why_important: string
|
||||
tests: TestResult[]
|
||||
passed: number
|
||||
failed: number
|
||||
total: number
|
||||
duration_ms: number
|
||||
}
|
||||
|
||||
interface FullTestResults {
|
||||
timestamp: string
|
||||
categories: TestCategoryResult[]
|
||||
total_passed: number
|
||||
total_failed: number
|
||||
total_tests: number
|
||||
duration_ms: number
|
||||
}
|
||||
|
||||
type StepStatus = 'pending' | 'active' | 'completed' | 'failed'
|
||||
|
||||
interface WizardStep {
|
||||
id: string
|
||||
name: string
|
||||
icon: string
|
||||
status: StepStatus
|
||||
category?: string
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Constants
|
||||
// ==============================================
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
const STEPS: WizardStep[] = [
|
||||
{ id: 'welcome', name: 'Willkommen', icon: '👋', status: 'pending' },
|
||||
{ id: 'request-id', name: 'Request-ID', icon: '🔑', status: 'pending', category: 'request-id' },
|
||||
{ id: 'security-headers', name: 'Security Headers', icon: '🛡️', status: 'pending', category: 'security-headers' },
|
||||
{ id: 'rate-limiter', name: 'Rate Limiting', icon: '⏱️', status: 'pending', category: 'rate-limiter' },
|
||||
{ id: 'pii-redactor', name: 'PII Redaktion', icon: '🔒', status: 'pending', category: 'pii-redactor' },
|
||||
{ id: 'input-gate', name: 'Input Validierung', icon: '🚧', status: 'pending', category: 'input-gate' },
|
||||
{ id: 'cors', name: 'CORS', icon: '🌐', status: 'pending', category: 'cors' },
|
||||
{ id: 'summary', name: 'Zusammenfassung', icon: '📊', status: 'pending' },
|
||||
]
|
||||
|
||||
const EDUCATION_CONTENT: Record<string, { title: string; content: string[] }> = {
|
||||
'welcome': {
|
||||
title: 'Willkommen zum Middleware-Test-Wizard',
|
||||
content: [
|
||||
'Middleware ist die unsichtbare Schutzschicht Ihrer Anwendung. Sie verarbeitet jede Anfrage bevor sie Ihren Code erreicht - und jede Antwort bevor sie den Benutzer erreicht.',
|
||||
'In diesem Wizard testen wir alle Middleware-Komponenten und Sie lernen dabei:',
|
||||
'• Warum jede Komponente wichtig ist',
|
||||
'• Welche Angriffe sie verhindert',
|
||||
'• Wie Sie Probleme erkennen und beheben',
|
||||
'Klicken Sie auf "Starten" um den Test-Wizard zu beginnen.',
|
||||
],
|
||||
},
|
||||
'request-id': {
|
||||
title: 'Request-ID & Distributed Tracing',
|
||||
content: [
|
||||
'Stellen Sie sich vor, ein Benutzer meldet einen Fehler. Ohne Request-ID muessen Sie Tausende von Log-Eintraegen durchsuchen. Mit Request-ID finden Sie den genauen Pfad der Anfrage durch alle Microservices in Sekunden.',
|
||||
'Request-IDs sind essentiell fuer:',
|
||||
'• Fehlersuche in verteilten Systemen',
|
||||
'• Performance-Analyse',
|
||||
'• Audit-Trails fuer Compliance',
|
||||
],
|
||||
},
|
||||
'security-headers': {
|
||||
title: 'Security Headers - Erste Verteidigungslinie',
|
||||
content: [
|
||||
'Security Headers sind Anweisungen an den Browser, wie er Ihre Seite schuetzen soll:',
|
||||
'• X-Content-Type-Options: nosniff - Verhindert MIME-Sniffing Angriffe',
|
||||
'• X-Frame-Options: DENY - Blockiert Clickjacking-Angriffe',
|
||||
'• Content-Security-Policy - Stoppt XSS durch Whitelist erlaubter Quellen',
|
||||
'• Strict-Transport-Security - Erzwingt HTTPS',
|
||||
'OWASP empfiehlt diese Headers als Mindeststandard.',
|
||||
],
|
||||
},
|
||||
'rate-limiter': {
|
||||
title: 'Rate Limiting - Schutz vor Ueberflutung',
|
||||
content: [
|
||||
'Ohne Rate Limiting kann ein Angreifer:',
|
||||
'• Passwort-Brute-Force durchfuehren (Millionen Versuche/Minute)',
|
||||
'• Ihre Server mit Anfragen ueberfluten (DDoS)',
|
||||
'• Teure API-Aufrufe missbrauchen',
|
||||
'BreakPilot limitiert:',
|
||||
'• 100 Anfragen/Minute pro IP (allgemein)',
|
||||
'• 20 Anfragen/Minute fuer Auth-Endpoints',
|
||||
'• 500 Anfragen/Minute pro authentifiziertem Benutzer',
|
||||
],
|
||||
},
|
||||
'pii-redactor': {
|
||||
title: 'PII Redaktion - DSGVO Pflicht',
|
||||
content: [
|
||||
'Personenbezogene Daten in Logs sind ein DSGVO-Verstoss:',
|
||||
'• Email-Adressen: Bussgelder bis 20 Mio. EUR',
|
||||
'• IP-Adressen: Gelten als personenbezogen (EuGH-Urteil)',
|
||||
'• Telefonnummern: Direkter Personenbezug',
|
||||
'Der PII Redactor erkennt automatisch:',
|
||||
'• Email-Adressen → [EMAIL_REDACTED]',
|
||||
'• IP-Adressen → [IP_REDACTED]',
|
||||
'• Deutsche Telefonnummern → [PHONE_REDACTED]',
|
||||
],
|
||||
},
|
||||
'input-gate': {
|
||||
title: 'Input Gate - Der Tuersteher',
|
||||
content: [
|
||||
'Das Input Gate prueft jede Anfrage bevor sie Ihren Code erreicht:',
|
||||
'• Groessenlimit: Blockiert ueberdimensionierte Payloads (DoS-Schutz)',
|
||||
'• Content-Type: Erlaubt nur erwartete Formate',
|
||||
'• Dateiendungen: Blockiert .exe, .bat, .sh Uploads',
|
||||
'Ein Angreifer, der an Ihrem Code vorbeikommt, wird hier gestoppt.',
|
||||
],
|
||||
},
|
||||
'cors': {
|
||||
title: 'CORS - Kontrollierte Zugriffe',
|
||||
content: [
|
||||
'CORS bestimmt, welche Websites Ihre API aufrufen duerfen:',
|
||||
'• Zu offen (*): Jede Website kann Ihre API missbrauchen',
|
||||
'• Zu streng: Ihre eigene Frontend-App wird blockiert',
|
||||
'BreakPilot erlaubt nur:',
|
||||
'• https://breakpilot.app (Produktion)',
|
||||
'• http://localhost:3000 (Development)',
|
||||
],
|
||||
},
|
||||
'summary': {
|
||||
title: 'Test-Zusammenfassung',
|
||||
content: [
|
||||
'Hier sehen Sie eine Uebersicht aller durchgefuehrten Tests:',
|
||||
'• Anzahl bestandener Tests',
|
||||
'• Fehlgeschlagene Tests mit Details',
|
||||
'• Empfehlungen zur Behebung',
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Components
|
||||
// ==============================================
|
||||
|
||||
function WizardStepper({
|
||||
steps,
|
||||
currentStep,
|
||||
onStepClick
|
||||
}: {
|
||||
steps: WizardStep[]
|
||||
currentStep: number
|
||||
onStepClick: (index: number) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<button
|
||||
onClick={() => onStepClick(index)}
|
||||
className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
|
||||
index === currentStep
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: step.status === 'completed'
|
||||
? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
|
||||
: step.status === 'failed'
|
||||
? 'bg-red-100 text-red-700 cursor-pointer hover:bg-red-200'
|
||||
: 'text-gray-400'
|
||||
}`}
|
||||
disabled={index > currentStep && steps[index - 1]?.status === 'pending'}
|
||||
>
|
||||
<span className="text-2xl mb-1">{step.icon}</span>
|
||||
<span className="text-xs font-medium text-center">{step.name}</span>
|
||||
{step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
|
||||
{step.status === 'failed' && <span className="text-xs text-red-600">✗</span>}
|
||||
</button>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={`h-0.5 w-8 mx-1 ${
|
||||
index < currentStep ? 'bg-green-400' : 'bg-gray-200'
|
||||
}`} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EducationCard({ stepId }: { stepId: string }) {
|
||||
const content = EDUCATION_CONTENT[stepId]
|
||||
if (!content) return null
|
||||
|
||||
return (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
|
||||
<h3 className="text-lg font-semibold text-blue-800 mb-4 flex items-center">
|
||||
<span className="mr-2">💡</span>
|
||||
Warum ist das wichtig?
|
||||
</h3>
|
||||
<h4 className="text-md font-medium text-blue-700 mb-3">{content.title}</h4>
|
||||
<div className="space-y-2 text-blue-900">
|
||||
{content.content.map((line, index) => (
|
||||
<p key={index} className={line.startsWith('•') ? 'ml-4' : ''}>
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TestResultCard({ result }: { result: TestResult }) {
|
||||
const statusColors = {
|
||||
passed: 'bg-green-100 border-green-300 text-green-800',
|
||||
failed: 'bg-red-100 border-red-300 text-red-800',
|
||||
pending: 'bg-yellow-100 border-yellow-300 text-yellow-800',
|
||||
skipped: 'bg-gray-100 border-gray-300 text-gray-600',
|
||||
}
|
||||
|
||||
const statusIcons = {
|
||||
passed: '✓',
|
||||
failed: '✗',
|
||||
pending: '○',
|
||||
skipped: '−',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`border rounded-lg p-4 mb-3 ${statusColors[result.status]}`}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium flex items-center">
|
||||
<span className="mr-2">{statusIcons[result.status]}</span>
|
||||
{result.name}
|
||||
</h4>
|
||||
<p className="text-sm opacity-80 mt-1">{result.description}</p>
|
||||
</div>
|
||||
<span className="text-xs opacity-60">{result.duration_ms.toFixed(0)}ms</span>
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Erwartet:</span>
|
||||
<code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
|
||||
{result.expected}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Erhalten:</span>
|
||||
<code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
|
||||
{result.actual}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
{result.error_message && (
|
||||
<div className="mt-2 text-xs text-red-700 bg-red-50 p-2 rounded">
|
||||
Fehler: {result.error_message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TestSummaryCard({ results }: { results: FullTestResults }) {
|
||||
const passRate = results.total_tests > 0
|
||||
? ((results.total_passed / results.total_tests) * 100).toFixed(1)
|
||||
: '0'
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Test-Ergebnisse</h3>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-gray-700">{results.total_tests}</div>
|
||||
<div className="text-sm text-gray-500">Gesamt</div>
|
||||
</div>
|
||||
<div className="bg-green-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-green-600">{results.total_passed}</div>
|
||||
<div className="text-sm text-green-600">Bestanden</div>
|
||||
</div>
|
||||
<div className="bg-red-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-red-600">{results.total_failed}</div>
|
||||
<div className="text-sm text-red-600">Fehlgeschlagen</div>
|
||||
</div>
|
||||
<div className={`rounded-lg p-4 text-center ${
|
||||
parseFloat(passRate) >= 80 ? 'bg-green-50' : parseFloat(passRate) >= 50 ? 'bg-yellow-50' : 'bg-red-50'
|
||||
}`}>
|
||||
<div className={`text-3xl font-bold ${
|
||||
parseFloat(passRate) >= 80 ? 'text-green-600' : parseFloat(passRate) >= 50 ? 'text-yellow-600' : 'text-red-600'
|
||||
}`}>{passRate}%</div>
|
||||
<div className="text-sm text-gray-500">Erfolgsrate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Results */}
|
||||
<div className="space-y-4">
|
||||
{results.categories.map((category) => (
|
||||
<div key={category.category} className="border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium">{category.display_name}</h4>
|
||||
<span className={`text-sm px-2 py-1 rounded ${
|
||||
category.failed === 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{category.passed}/{category.total} bestanden
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
<div className="mt-6 text-sm text-gray-500 text-right">
|
||||
Gesamtdauer: {(results.duration_ms / 1000).toFixed(2)}s
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Main Component
|
||||
// ==============================================
|
||||
|
||||
export default function TestWizardPage() {
|
||||
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/ui-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 }))
|
||||
|
||||
// Update step status
|
||||
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/ui-tests/run-all`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const results: FullTestResults = await response.json()
|
||||
setFullResults(results)
|
||||
|
||||
// Update all step statuses
|
||||
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
|
||||
})
|
||||
)
|
||||
|
||||
// Store category results
|
||||
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) => {
|
||||
// Allow clicking on completed steps or the next available step
|
||||
if (index <= currentStep || steps[index - 1]?.status !== 'pending') {
|
||||
setCurrentStep(index)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 py-8">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-800">🧪 UI Test Wizard</h1>
|
||||
<p className="text-gray-600 mt-1">
|
||||
Interaktives Middleware-Testing mit Lernmaterial
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="/admin/middleware"
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
← Zurueck zur Middleware-Konfiguration
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stepper */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
<WizardStepper
|
||||
steps={steps}
|
||||
currentStep={currentStep}
|
||||
onStepClick={handleStepClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
{/* Step Header */}
|
||||
<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>
|
||||
|
||||
{/* Education Card */}
|
||||
<EducationCard stepId={currentStepData?.id || ''} />
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
|
||||
<strong>Fehler:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Welcome Step */}
|
||||
{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"
|
||||
>
|
||||
🚀 Starten
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Test Steps */}
|
||||
{isTestStep && currentStepData?.category && (
|
||||
<div>
|
||||
{/* Run Test Button */}
|
||||
{!categoryResults[currentStepData.category] && (
|
||||
<div className="text-center py-6">
|
||||
<button
|
||||
onClick={() => runCategoryTest(currentStepData.category!)}
|
||||
disabled={isLoading}
|
||||
className={`px-6 py-3 rounded-lg font-medium transition-colors ${
|
||||
isLoading
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-green-600 text-white hover:bg-green-700'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? '⏳ Tests laufen...' : '▶️ Tests ausfuehren'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Test Results */}
|
||||
{categoryResults[currentStepData.category] && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-700">Testergebnisse</h3>
|
||||
<button
|
||||
onClick={() => runCategoryTest(currentStepData.category!)}
|
||||
disabled={isLoading}
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
🔄 Erneut ausfuehren
|
||||
</button>
|
||||
</div>
|
||||
{categoryResults[currentStepData.category].tests.map((test, index) => (
|
||||
<TestResultCard key={index} result={test} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary Step */}
|
||||
{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>
|
||||
) : (
|
||||
<TestSummaryCard results={fullResults} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between mt-8 pt-6 border-t">
|
||||
<button
|
||||
onClick={goToPrev}
|
||||
disabled={currentStep === 0}
|
||||
className={`px-6 py-2 rounded-lg transition-colors ${
|
||||
currentStep === 0
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
← Zurueck
|
||||
</button>
|
||||
|
||||
{!isSummary && (
|
||||
<button
|
||||
onClick={goToNext}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Weiter →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="text-center text-gray-500 text-sm mt-6">
|
||||
Diese Tests pruefen die Middleware-Konfiguration Ihrer Anwendung.
|
||||
Bei Fragen wenden Sie sich an den Administrator.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
617
website/app/admin/middleware/wizard/page.tsx
Normal file
617
website/app/admin/middleware/wizard/page.tsx
Normal file
@@ -0,0 +1,617 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
// ==============================================
|
||||
// Types
|
||||
// ==============================================
|
||||
|
||||
interface TestResult {
|
||||
name: string
|
||||
description: string
|
||||
expected: string
|
||||
actual: string
|
||||
status: 'passed' | 'failed' | 'pending' | 'skipped'
|
||||
duration_ms: number
|
||||
error_message?: string
|
||||
}
|
||||
|
||||
interface TestCategoryResult {
|
||||
category: string
|
||||
display_name: string
|
||||
description: string
|
||||
why_important: string
|
||||
tests: TestResult[]
|
||||
passed: number
|
||||
failed: number
|
||||
total: number
|
||||
duration_ms: number
|
||||
}
|
||||
|
||||
interface FullTestResults {
|
||||
timestamp: string
|
||||
categories: TestCategoryResult[]
|
||||
total_passed: number
|
||||
total_failed: number
|
||||
total_tests: number
|
||||
duration_ms: number
|
||||
}
|
||||
|
||||
type StepStatus = 'pending' | 'active' | 'completed' | 'failed'
|
||||
|
||||
interface WizardStep {
|
||||
id: string
|
||||
name: string
|
||||
icon: string
|
||||
status: StepStatus
|
||||
category?: string
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Constants
|
||||
// ==============================================
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
const STEPS: WizardStep[] = [
|
||||
{ id: 'welcome', name: 'Willkommen', icon: '👋', status: 'pending' },
|
||||
{ id: 'request-id', name: 'Request-ID', icon: '🔑', status: 'pending', category: 'request-id' },
|
||||
{ id: 'security-headers', name: 'Security Headers', icon: '🛡️', status: 'pending', category: 'security-headers' },
|
||||
{ id: 'rate-limiter', name: 'Rate Limiting', icon: '⏱️', status: 'pending', category: 'rate-limiter' },
|
||||
{ id: 'pii-redactor', name: 'PII Redaktion', icon: '🔒', status: 'pending', category: 'pii-redactor' },
|
||||
{ id: 'input-gate', name: 'Input Validierung', icon: '🚧', status: 'pending', category: 'input-gate' },
|
||||
{ id: 'cors', name: 'CORS', icon: '🌐', status: 'pending', category: 'cors' },
|
||||
{ id: 'summary', name: 'Zusammenfassung', icon: '📊', status: 'pending' },
|
||||
]
|
||||
|
||||
const EDUCATION_CONTENT: Record<string, { title: string; content: string[] }> = {
|
||||
'welcome': {
|
||||
title: 'Willkommen zum Middleware-Test-Wizard',
|
||||
content: [
|
||||
'Middleware ist die unsichtbare Schutzschicht Ihrer Anwendung. Sie verarbeitet jede Anfrage bevor sie Ihren Code erreicht - und jede Antwort bevor sie den Benutzer erreicht.',
|
||||
'In diesem Wizard testen wir alle Middleware-Komponenten und Sie lernen dabei:',
|
||||
'• Warum jede Komponente wichtig ist',
|
||||
'• Welche Angriffe sie verhindert',
|
||||
'• Wie Sie Probleme erkennen und beheben',
|
||||
'Klicken Sie auf "Starten" um den Test-Wizard zu beginnen.',
|
||||
],
|
||||
},
|
||||
'request-id': {
|
||||
title: 'Request-ID & Distributed Tracing',
|
||||
content: [
|
||||
'Stellen Sie sich vor, ein Benutzer meldet einen Fehler. Ohne Request-ID muessen Sie Tausende von Log-Eintraegen durchsuchen. Mit Request-ID finden Sie den genauen Pfad der Anfrage durch alle Microservices in Sekunden.',
|
||||
'Request-IDs sind essentiell fuer:',
|
||||
'• Fehlersuche in verteilten Systemen',
|
||||
'• Performance-Analyse',
|
||||
'• Audit-Trails fuer Compliance',
|
||||
],
|
||||
},
|
||||
'security-headers': {
|
||||
title: 'Security Headers - Erste Verteidigungslinie',
|
||||
content: [
|
||||
'Security Headers sind Anweisungen an den Browser, wie er Ihre Seite schuetzen soll:',
|
||||
'• X-Content-Type-Options: nosniff - Verhindert MIME-Sniffing Angriffe',
|
||||
'• X-Frame-Options: DENY - Blockiert Clickjacking-Angriffe',
|
||||
'• Content-Security-Policy - Stoppt XSS durch Whitelist erlaubter Quellen',
|
||||
'• Strict-Transport-Security - Erzwingt HTTPS',
|
||||
'OWASP empfiehlt diese Headers als Mindeststandard.',
|
||||
],
|
||||
},
|
||||
'rate-limiter': {
|
||||
title: 'Rate Limiting - Schutz vor Ueberflutung',
|
||||
content: [
|
||||
'Ohne Rate Limiting kann ein Angreifer:',
|
||||
'• Passwort-Brute-Force durchfuehren (Millionen Versuche/Minute)',
|
||||
'• Ihre Server mit Anfragen ueberfluten (DDoS)',
|
||||
'• Teure API-Aufrufe missbrauchen',
|
||||
'BreakPilot limitiert:',
|
||||
'• 100 Anfragen/Minute pro IP (allgemein)',
|
||||
'• 20 Anfragen/Minute fuer Auth-Endpoints',
|
||||
'• 500 Anfragen/Minute pro authentifiziertem Benutzer',
|
||||
],
|
||||
},
|
||||
'pii-redactor': {
|
||||
title: 'PII Redaktion - DSGVO Pflicht',
|
||||
content: [
|
||||
'Personenbezogene Daten in Logs sind ein DSGVO-Verstoss:',
|
||||
'• Email-Adressen: Bussgelder bis 20 Mio. EUR',
|
||||
'• IP-Adressen: Gelten als personenbezogen (EuGH-Urteil)',
|
||||
'• Telefonnummern: Direkter Personenbezug',
|
||||
'Der PII Redactor erkennt automatisch:',
|
||||
'• Email-Adressen → [EMAIL_REDACTED]',
|
||||
'• IP-Adressen → [IP_REDACTED]',
|
||||
'• Deutsche Telefonnummern → [PHONE_REDACTED]',
|
||||
],
|
||||
},
|
||||
'input-gate': {
|
||||
title: 'Input Gate - Der Tuersteher',
|
||||
content: [
|
||||
'Das Input Gate prueft jede Anfrage bevor sie Ihren Code erreicht:',
|
||||
'• Groessenlimit: Blockiert ueberdimensionierte Payloads (DoS-Schutz)',
|
||||
'• Content-Type: Erlaubt nur erwartete Formate',
|
||||
'• Dateiendungen: Blockiert .exe, .bat, .sh Uploads',
|
||||
'Ein Angreifer, der an Ihrem Code vorbeikommt, wird hier gestoppt.',
|
||||
],
|
||||
},
|
||||
'cors': {
|
||||
title: 'CORS - Kontrollierte Zugriffe',
|
||||
content: [
|
||||
'CORS bestimmt, welche Websites Ihre API aufrufen duerfen:',
|
||||
'• Zu offen (*): Jede Website kann Ihre API missbrauchen',
|
||||
'• Zu streng: Ihre eigene Frontend-App wird blockiert',
|
||||
'BreakPilot erlaubt nur:',
|
||||
'• https://breakpilot.app (Produktion)',
|
||||
'• http://localhost:3000 (Development)',
|
||||
],
|
||||
},
|
||||
'summary': {
|
||||
title: 'Test-Zusammenfassung',
|
||||
content: [
|
||||
'Hier sehen Sie eine Uebersicht aller durchgefuehrten Tests:',
|
||||
'• Anzahl bestandener Tests',
|
||||
'• Fehlgeschlagene Tests mit Details',
|
||||
'• Empfehlungen zur Behebung',
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Components
|
||||
// ==============================================
|
||||
|
||||
function WizardStepper({
|
||||
steps,
|
||||
currentStep,
|
||||
onStepClick
|
||||
}: {
|
||||
steps: WizardStep[]
|
||||
currentStep: number
|
||||
onStepClick: (index: number) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<button
|
||||
onClick={() => onStepClick(index)}
|
||||
className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
|
||||
index === currentStep
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: step.status === 'completed'
|
||||
? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
|
||||
: step.status === 'failed'
|
||||
? 'bg-red-100 text-red-700 cursor-pointer hover:bg-red-200'
|
||||
: 'text-gray-400'
|
||||
}`}
|
||||
disabled={index > currentStep && steps[index - 1]?.status === 'pending'}
|
||||
>
|
||||
<span className="text-2xl mb-1">{step.icon}</span>
|
||||
<span className="text-xs font-medium text-center">{step.name}</span>
|
||||
{step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
|
||||
{step.status === 'failed' && <span className="text-xs text-red-600">✗</span>}
|
||||
</button>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={`h-0.5 w-8 mx-1 ${
|
||||
index < currentStep ? 'bg-green-400' : 'bg-gray-200'
|
||||
}`} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EducationCard({ stepId }: { stepId: string }) {
|
||||
const content = EDUCATION_CONTENT[stepId]
|
||||
if (!content) return null
|
||||
|
||||
return (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
|
||||
<h3 className="text-lg font-semibold text-blue-800 mb-4 flex items-center">
|
||||
<span className="mr-2">💡</span>
|
||||
Warum ist das wichtig?
|
||||
</h3>
|
||||
<h4 className="text-md font-medium text-blue-700 mb-3">{content.title}</h4>
|
||||
<div className="space-y-2 text-blue-900">
|
||||
{content.content.map((line, index) => (
|
||||
<p key={index} className={line.startsWith('•') ? 'ml-4' : ''}>
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TestResultCard({ result }: { result: TestResult }) {
|
||||
const statusColors = {
|
||||
passed: 'bg-green-100 border-green-300 text-green-800',
|
||||
failed: 'bg-red-100 border-red-300 text-red-800',
|
||||
pending: 'bg-yellow-100 border-yellow-300 text-yellow-800',
|
||||
skipped: 'bg-gray-100 border-gray-300 text-gray-600',
|
||||
}
|
||||
|
||||
const statusIcons = {
|
||||
passed: '✓',
|
||||
failed: '✗',
|
||||
pending: '○',
|
||||
skipped: '−',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`border rounded-lg p-4 mb-3 ${statusColors[result.status]}`}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium flex items-center">
|
||||
<span className="mr-2">{statusIcons[result.status]}</span>
|
||||
{result.name}
|
||||
</h4>
|
||||
<p className="text-sm opacity-80 mt-1">{result.description}</p>
|
||||
</div>
|
||||
<span className="text-xs opacity-60">{result.duration_ms.toFixed(0)}ms</span>
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Erwartet:</span>
|
||||
<code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
|
||||
{result.expected}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Erhalten:</span>
|
||||
<code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
|
||||
{result.actual}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
{result.error_message && (
|
||||
<div className="mt-2 text-xs text-red-700 bg-red-50 p-2 rounded">
|
||||
Fehler: {result.error_message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TestSummaryCard({ results }: { results: FullTestResults }) {
|
||||
const passRate = results.total_tests > 0
|
||||
? ((results.total_passed / results.total_tests) * 100).toFixed(1)
|
||||
: '0'
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Test-Ergebnisse</h3>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-gray-700">{results.total_tests}</div>
|
||||
<div className="text-sm text-gray-500">Gesamt</div>
|
||||
</div>
|
||||
<div className="bg-green-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-green-600">{results.total_passed}</div>
|
||||
<div className="text-sm text-green-600">Bestanden</div>
|
||||
</div>
|
||||
<div className="bg-red-50 rounded-lg p-4 text-center">
|
||||
<div className="text-3xl font-bold text-red-600">{results.total_failed}</div>
|
||||
<div className="text-sm text-red-600">Fehlgeschlagen</div>
|
||||
</div>
|
||||
<div className={`rounded-lg p-4 text-center ${
|
||||
parseFloat(passRate) >= 80 ? 'bg-green-50' : parseFloat(passRate) >= 50 ? 'bg-yellow-50' : 'bg-red-50'
|
||||
}`}>
|
||||
<div className={`text-3xl font-bold ${
|
||||
parseFloat(passRate) >= 80 ? 'text-green-600' : parseFloat(passRate) >= 50 ? 'text-yellow-600' : 'text-red-600'
|
||||
}`}>{passRate}%</div>
|
||||
<div className="text-sm text-gray-500">Erfolgsrate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Results */}
|
||||
<div className="space-y-4">
|
||||
{results.categories.map((category) => (
|
||||
<div key={category.category} className="border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium">{category.display_name}</h4>
|
||||
<span className={`text-sm px-2 py-1 rounded ${
|
||||
category.failed === 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{category.passed}/{category.total} bestanden
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
<div className="mt-6 text-sm text-gray-500 text-right">
|
||||
Gesamtdauer: {(results.duration_ms / 1000).toFixed(2)}s
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Main Component
|
||||
// ==============================================
|
||||
|
||||
export default function TestWizardPage() {
|
||||
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/ui-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 }))
|
||||
|
||||
// Update step status
|
||||
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/ui-tests/run-all`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const results: FullTestResults = await response.json()
|
||||
setFullResults(results)
|
||||
|
||||
// Update all step statuses
|
||||
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
|
||||
})
|
||||
)
|
||||
|
||||
// Store category results
|
||||
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) => {
|
||||
// Allow clicking on completed steps or the next available step
|
||||
if (index <= currentStep || steps[index - 1]?.status !== 'pending') {
|
||||
setCurrentStep(index)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 py-8">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-800">🧪 UI Test Wizard</h1>
|
||||
<p className="text-gray-600 mt-1">
|
||||
Interaktives Middleware-Testing mit Lernmaterial
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="/admin/middleware"
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
← Zurueck zur Middleware-Konfiguration
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stepper */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
<WizardStepper
|
||||
steps={steps}
|
||||
currentStep={currentStep}
|
||||
onStepClick={handleStepClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
{/* Step Header */}
|
||||
<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>
|
||||
|
||||
{/* Education Card */}
|
||||
<EducationCard stepId={currentStepData?.id || ''} />
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
|
||||
<strong>Fehler:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Welcome Step */}
|
||||
{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"
|
||||
>
|
||||
🚀 Starten
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Test Steps */}
|
||||
{isTestStep && currentStepData?.category && (
|
||||
<div>
|
||||
{/* Run Test Button */}
|
||||
{!categoryResults[currentStepData.category] && (
|
||||
<div className="text-center py-6">
|
||||
<button
|
||||
onClick={() => runCategoryTest(currentStepData.category!)}
|
||||
disabled={isLoading}
|
||||
className={`px-6 py-3 rounded-lg font-medium transition-colors ${
|
||||
isLoading
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-green-600 text-white hover:bg-green-700'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? '⏳ Tests laufen...' : '▶️ Tests ausfuehren'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Test Results */}
|
||||
{categoryResults[currentStepData.category] && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-700">Testergebnisse</h3>
|
||||
<button
|
||||
onClick={() => runCategoryTest(currentStepData.category!)}
|
||||
disabled={isLoading}
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
🔄 Erneut ausfuehren
|
||||
</button>
|
||||
</div>
|
||||
{categoryResults[currentStepData.category].tests.map((test, index) => (
|
||||
<TestResultCard key={index} result={test} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary Step */}
|
||||
{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>
|
||||
) : (
|
||||
<TestSummaryCard results={fullResults} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between mt-8 pt-6 border-t">
|
||||
<button
|
||||
onClick={goToPrev}
|
||||
disabled={currentStep === 0}
|
||||
className={`px-6 py-2 rounded-lg transition-colors ${
|
||||
currentStep === 0
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
← Zurueck
|
||||
</button>
|
||||
|
||||
{!isSummary && (
|
||||
<button
|
||||
onClick={goToNext}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Weiter →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="text-center text-gray-500 text-sm mt-6">
|
||||
Diese Tests pruefen die Middleware-Konfiguration Ihrer Anwendung.
|
||||
Bei Fragen wenden Sie sich an den Administrator.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user