feat(mc-browser): MC Detail with member controls + phase filter
Replace ControlDetail (empty for MCs) with MCDetail panel showing: - MC name, ID, total controls count - Phase badges as clickable filters - Member controls list with severity, phase, action, regulation source - Filter by lifecycle phase (definition, implementation, testing, etc.) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -1,9 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import { ControlDetail } from '../control-library/components/ControlDetail'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { ControlListView } from '../control-library/components/ControlListView'
|
||||
import { useControlLibraryState } from '../control-library/components/useControlLibraryState'
|
||||
import { BACKEND_URL } from '../control-library/components/helpers'
|
||||
|
||||
/**
|
||||
* Master Controls page — reuses the Control Library UI exactly,
|
||||
@@ -35,46 +34,12 @@ export default function MasterControlsPage() {
|
||||
)
|
||||
}
|
||||
|
||||
// DETAIL mode — add fallback fields that ControlDetail expects
|
||||
// DETAIL mode — show MC members
|
||||
if (state.mode === 'detail' && state.selectedControl) {
|
||||
const c = state.selectedControl
|
||||
const safeCtrl = {
|
||||
...c,
|
||||
scope: c.scope || { platforms: [], components: [], data_classes: [] },
|
||||
target_audience: c.target_audience || [],
|
||||
requirements: c.requirements || [],
|
||||
test_procedure: c.test_procedure || [],
|
||||
evidence: c.evidence || [],
|
||||
open_anchors: c.open_anchors || [],
|
||||
tags: c.tags || [],
|
||||
risk_score: c.risk_score ?? null,
|
||||
implementation_effort: c.implementation_effort ?? null,
|
||||
generation_metadata: c.generation_metadata || null,
|
||||
source_citation: c.source_citation || null,
|
||||
source_original_text: c.source_original_text || '',
|
||||
verification_method: c.verification_method || null,
|
||||
evidence_type: c.evidence_type || null,
|
||||
release_state: c.release_state || 'active',
|
||||
category: c.category || 'master_control',
|
||||
severity: c.severity || 'medium',
|
||||
parent_control_uuid: c.parent_control_uuid || null,
|
||||
similar_controls: c.similar_controls || [],
|
||||
}
|
||||
return (
|
||||
<ControlDetail
|
||||
ctrl={safeCtrl}
|
||||
<MCDetail
|
||||
mc={state.selectedControl}
|
||||
onBack={() => { state.setMode('list'); state.setSelectedControl(null) }}
|
||||
onEdit={() => {}}
|
||||
onDelete={async () => {}}
|
||||
onReview={async () => {}}
|
||||
onRefresh={state.fullReload}
|
||||
onCompare={() => {}}
|
||||
onNavigateToControl={async (controlId: string) => {
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}?endpoint=control&id=${controlId}`)
|
||||
if (res.ok) { state.setSelectedControl(await res.json()); state.setMode('detail') }
|
||||
} catch { /* ignore */ }
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -131,3 +96,141 @@ export default function MasterControlsPage() {
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// ── MC Detail Panel ─────────────────────────────────────────────
|
||||
|
||||
interface Member {
|
||||
control_id: string
|
||||
title: string
|
||||
severity: string
|
||||
phase: string
|
||||
action: string
|
||||
regulation_source?: string
|
||||
regulation_article?: string
|
||||
}
|
||||
|
||||
const SEV = {
|
||||
critical: 'bg-red-100 text-red-800',
|
||||
high: 'bg-orange-100 text-orange-800',
|
||||
medium: 'bg-yellow-100 text-yellow-800',
|
||||
low: 'bg-blue-100 text-blue-800',
|
||||
} as Record<string, string>
|
||||
|
||||
function MCDetail({ mc, onBack }: { mc: Record<string, unknown>; onBack: () => void }) {
|
||||
const [members, setMembers] = useState<Member[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [phaseFilter, setPhaseFilter] = useState('')
|
||||
|
||||
const mcId = (mc.control_id || mc.master_control_id || '') as string
|
||||
const mcName = (mc.title || mc.canonical_name || '') as string
|
||||
const totalControls = (mc.total_controls || 0) as number
|
||||
const phases = (mc.phases_covered || []) as string[]
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
fetch(`/api/sdk/v1/master-controls?endpoint=control&id=${mcId}`)
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => {
|
||||
if (data?.members) setMembers(data.members)
|
||||
else if (data?.requirements) {
|
||||
// Fallback: parse requirements strings
|
||||
setMembers((data.requirements as string[]).map((req: string) => {
|
||||
const match = req.match(/^\[(\w+)\]\s+(\S+):\s+(.+)$/)
|
||||
return match
|
||||
? { control_id: match[2], title: match[3], phase: match[1], action: '', severity: '' }
|
||||
: { control_id: '', title: req, phase: '', action: '', severity: '' }
|
||||
}))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [mcId])
|
||||
|
||||
const filtered = phaseFilter ? members.filter(m => m.phase === phaseFilter) : members
|
||||
const uniquePhases = [...new Set(members.map(m => m.phase).filter(Boolean))]
|
||||
const phaseGroups = uniquePhases.reduce((acc, p) => {
|
||||
acc[p] = members.filter(m => m.phase === p).length
|
||||
return acc
|
||||
}, {} as Record<string, number>)
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Header */}
|
||||
<button onClick={onBack} className="mb-4 text-purple-600 hover:text-purple-800 text-sm flex items-center gap-1">
|
||||
← Zurueck zur Liste
|
||||
</button>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{mcName}</h1>
|
||||
<p className="text-gray-500 mt-1">{mcId} — {totalControls} Atomic Controls</p>
|
||||
|
||||
{/* Phase badges */}
|
||||
<div className="flex flex-wrap gap-2 mt-4">
|
||||
{uniquePhases.map(p => (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => setPhaseFilter(phaseFilter === p ? '' : p)}
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
|
||||
phaseFilter === p
|
||||
? 'bg-purple-100 border-purple-400 text-purple-800'
|
||||
: 'border-gray-200 text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{p} ({phaseGroups[p]})
|
||||
</button>
|
||||
))}
|
||||
{phaseFilter && (
|
||||
<button onClick={() => setPhaseFilter('')} className="text-xs text-gray-400 hover:text-gray-600 ml-2">
|
||||
Filter aufheben
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Members */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="px-4 py-3 bg-gray-50 border-b text-sm text-gray-500">
|
||||
{filtered.length} von {members.length} Controls{phaseFilter ? ` (Phase: ${phaseFilter})` : ''}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-600 border-t-transparent mx-auto" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-50">
|
||||
{filtered.map((m, i) => (
|
||||
<div key={i} className="px-4 py-3 hover:bg-gray-50">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono text-gray-400">{m.control_id}</span>
|
||||
{m.severity && (
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${SEV[m.severity] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{m.severity}
|
||||
</span>
|
||||
)}
|
||||
{m.phase && (
|
||||
<span className="text-[10px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">
|
||||
{m.phase}
|
||||
</span>
|
||||
)}
|
||||
{m.action && (
|
||||
<span className="text-[10px] text-gray-400">{m.action}</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-900">{m.title}</p>
|
||||
{m.regulation_source && (
|
||||
<p className="text-xs text-blue-600 mt-1">
|
||||
{m.regulation_source} {m.regulation_article}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{filtered.length === 0 && !loading && (
|
||||
<div className="p-8 text-center text-gray-400">Keine Controls gefunden</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user