fix: Performance + Hazard-Tabelle Layout

- Uebersicht: Nur noch 2 leichte API-Calls statt 4 (risk-summary statt alle Hazards/Mitigations laden)
- RiskAssessmentTable: Gefaehrdungs-Spalte min-w-[250px] statt max-w-[200px], kein truncate mehr

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-07 17:26:28 +02:00
parent e50f3dfbee
commit 5be1c171cb
2 changed files with 10 additions and 20 deletions
@@ -198,9 +198,9 @@ export function RiskAssessmentTable({ projectId, hazards, onReassess, decisions,
return ( return (
<tr key={h.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"> <tr key={h.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
{/* Hazard info */} {/* Hazard info */}
<td className="px-3 py-2 max-w-[200px]"> <td className="px-3 py-2 min-w-[250px]">
<div className="font-medium text-gray-900 dark:text-white truncate">{h.name}</div> <div className="font-medium text-gray-900 dark:text-white">{h.name}</div>
{h.component_name && <div className="text-[10px] text-gray-400 truncate">{h.component_name}</div>} {h.component_name && <div className="text-[10px] text-gray-400">{h.component_name}</div>}
</td> </td>
<td className="px-3 py-2 border-r border-gray-200 dark:border-gray-600"> <td className="px-3 py-2 border-r border-gray-200 dark:border-gray-600">
<span className="inline-block px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-[10px] font-medium"> <span className="inline-block px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-[10px] font-medium">
@@ -122,19 +122,19 @@ export default function ProjectOverviewPage() {
async function fetchProject() { async function fetchProject() {
try { try {
// Fetch project detail + live risk summary + mitigations count in parallel // Only fetch project detail + lightweight risk summary (NO heavy lists)
const [projRes, riskRes, mitRes, hazRes] = await Promise.all([ const [projRes, riskRes] = await Promise.all([
fetch(`/api/sdk/v1/iace/projects/${projectId}`), fetch(`/api/sdk/v1/iace/projects/${projectId}`),
fetch(`/api/sdk/v1/iace/projects/${projectId}/risk-summary`), fetch(`/api/sdk/v1/iace/projects/${projectId}/risk-summary`),
fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
]) ])
if (!projRes.ok) return if (!projRes.ok) return
const json = await projRes.json() const json = await projRes.json()
// Live risk summary from dedicated endpoint // Live risk summary from dedicated endpoint (lightweight — just counts)
let rs = json.risk_summary || {} let rs = json.risk_summary || {}
let hazCount = 0
let mitCount = 0
if (riskRes.ok) { if (riskRes.ok) {
const riskJson = await riskRes.json() const riskJson = await riskRes.json()
const live = riskJson.risk_summary || riskJson || {} const live = riskJson.risk_summary || riskJson || {}
@@ -146,18 +146,8 @@ export default function ProjectOverviewPage() {
negligible: live.negligible || 0, negligible: live.negligible || 0,
total: live.total_hazards || live.total || 0, total: live.total_hazards || live.total || 0,
} }
} hazCount = live.total_hazards || live.total || 0
mitCount = live.total_mitigations || 0
// Live counts
let mitCount = 0
if (mitRes.ok) {
const mitJson = await mitRes.json()
mitCount = mitJson.total || (mitJson.mitigations || []).length || 0
}
let hazCount = 0
if (hazRes.ok) {
const hazJson = await hazRes.json()
hazCount = hazJson.total || (hazJson.hazards || []).length || 0
} }
// Calculate dynamic completeness percentage // Calculate dynamic completeness percentage