Benjamin Admin
1866bb11ae
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>
237 lines
8.8 KiB
TypeScript
237 lines
8.8 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { ControlListView } from '../control-library/components/ControlListView'
|
|
import { useControlLibraryState } from '../control-library/components/useControlLibraryState'
|
|
|
|
/**
|
|
* Master Controls page — reuses the Control Library UI exactly,
|
|
* but shows Master Controls (13.5K grouped controls) instead of
|
|
* individual atomic controls (272K).
|
|
*
|
|
* The MC API route (/api/sdk/v1/master-controls) returns data in
|
|
* the same format as the canonical controls endpoint.
|
|
*/
|
|
export default function MasterControlsPage() {
|
|
// Reuse the exact same state hook — it fetches from BACKEND_URL
|
|
// We override BACKEND_URL via a wrapper, but for now we reuse as-is
|
|
// since both endpoints speak the same format.
|
|
const state = useControlLibraryState('/api/sdk/v1/master-controls')
|
|
|
|
if (state.loading && state.controls.length === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center h-96">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-2 border-purple-600 border-t-transparent" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (state.error) {
|
|
return (
|
|
<div className="flex items-center justify-center h-96">
|
|
<p className="text-red-600">{state.error}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// DETAIL mode — show MC members
|
|
if (state.mode === 'detail' && state.selectedControl) {
|
|
return (
|
|
<MCDetail
|
|
mc={state.selectedControl}
|
|
onBack={() => { state.setMode('list'); state.setSelectedControl(null) }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// LIST mode — exact same UI as Control Library
|
|
return (
|
|
<ControlListView
|
|
frameworks={state.frameworks}
|
|
controls={state.controls}
|
|
totalCount={state.totalCount}
|
|
meta={state.meta}
|
|
loading={state.loading}
|
|
reviewCount={0}
|
|
bulkProcessing={false}
|
|
showStats={state.showStats}
|
|
processedStats={state.processedStats}
|
|
showGenerator={false}
|
|
currentPage={state.currentPage}
|
|
totalPages={state.totalPages}
|
|
sortBy={state.sortBy}
|
|
searchQuery={state.searchQuery}
|
|
severityFilter={state.severityFilter}
|
|
domainFilter={state.domainFilter}
|
|
stateFilter={state.stateFilter}
|
|
verificationFilter={state.verificationFilter}
|
|
categoryFilter={state.categoryFilter}
|
|
evidenceTypeFilter={state.evidenceTypeFilter}
|
|
audienceFilter={state.audienceFilter}
|
|
sourceFilter={state.sourceFilter}
|
|
typeFilter={state.typeFilter}
|
|
hideDuplicates={state.hideDuplicates}
|
|
setSearchQuery={state.setSearchQuery}
|
|
setSeverityFilter={state.setSeverityFilter}
|
|
setDomainFilter={state.setDomainFilter}
|
|
setStateFilter={state.setStateFilter}
|
|
setVerificationFilter={state.setVerificationFilter}
|
|
setCategoryFilter={state.setCategoryFilter}
|
|
setEvidenceTypeFilter={state.setEvidenceTypeFilter}
|
|
setAudienceFilter={state.setAudienceFilter}
|
|
setSourceFilter={state.setSourceFilter}
|
|
setTypeFilter={state.setTypeFilter}
|
|
setHideDuplicates={state.setHideDuplicates}
|
|
setSortBy={state.setSortBy}
|
|
setShowStats={state.setShowStats}
|
|
setShowGenerator={() => {}}
|
|
setCurrentPage={state.setCurrentPage}
|
|
onSelectControl={(ctrl) => { state.setSelectedControl(ctrl); state.setMode('detail') }}
|
|
onCreateMode={() => {}}
|
|
onEnterReview={() => {}}
|
|
onBulkReject={async () => {}}
|
|
onRefresh={() => { state.loadControls(); state.loadMeta() }}
|
|
onLoadStats={state.loadProcessedStats}
|
|
onFullReload={state.fullReload}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// ── 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>
|
|
)
|
|
}
|