feat(mc-browser): reuse Control Library UI for Master Controls
- MC page.tsx imports ControlListView + useControlLibraryState directly - useControlLibraryState accepts optional backendUrl override - MC API route returns data in canonical control format - Same filters, pagination, sorting, click-to-detail as Control Library Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -1,266 +1,110 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
|
||||
interface MC {
|
||||
id: string
|
||||
master_control_id: string
|
||||
canonical_name: string
|
||||
total_controls: number
|
||||
phases_covered: string[]
|
||||
phase_control_count: Record<string, number>
|
||||
}
|
||||
|
||||
interface Member {
|
||||
control_id: string
|
||||
title: string
|
||||
objective: string
|
||||
severity: string
|
||||
phase: string
|
||||
action: string
|
||||
regulation_source: string
|
||||
regulation_article: string
|
||||
}
|
||||
|
||||
const API = '/api/sdk/v1/master-controls'
|
||||
const PAGE_SIZE = 50
|
||||
|
||||
const SEV_COLORS: Record<string, string> = {
|
||||
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',
|
||||
}
|
||||
import { ControlDetail } from '../control-library/components/ControlDetail'
|
||||
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,
|
||||
* 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() {
|
||||
const [mcs, setMcs] = useState<MC[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortBy, setSortBy] = useState('total_controls')
|
||||
const [sortOrder, setSortOrder] = useState('DESC')
|
||||
const [loading, setLoading] = useState(false)
|
||||
// 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')
|
||||
|
||||
// Detail view
|
||||
const [selectedMC, setSelectedMC] = useState<MC | null>(null)
|
||||
const [members, setMembers] = useState<Member[]>([])
|
||||
const [membersLoading, setMembersLoading] = useState(false)
|
||||
|
||||
const loadMCs = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
action: 'list', limit: String(PAGE_SIZE), offset: String(offset),
|
||||
sort: sortBy, order: sortOrder,
|
||||
})
|
||||
if (search) params.set('search', search)
|
||||
const res = await fetch(`${API}?${params}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setMcs(data.master_controls || [])
|
||||
setTotal(data.total || 0)
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
setLoading(false)
|
||||
}, [offset, search, sortBy, sortOrder])
|
||||
|
||||
useEffect(() => { loadMCs() }, [loadMCs])
|
||||
|
||||
const loadMembers = async (mc: MC) => {
|
||||
setSelectedMC(mc)
|
||||
setMembersLoading(true)
|
||||
try {
|
||||
const res = await fetch(`${API}?action=members&mc_id=${mc.master_control_id}&limit=200`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setMembers(data.members || [])
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
setMembersLoading(false)
|
||||
}
|
||||
|
||||
const handleSort = (field: string) => {
|
||||
if (sortBy === field) {
|
||||
setSortOrder(sortOrder === 'DESC' ? 'ASC' : 'DESC')
|
||||
} else {
|
||||
setSortBy(field)
|
||||
setSortOrder('DESC')
|
||||
}
|
||||
setOffset(0)
|
||||
}
|
||||
|
||||
const totalPages = Math.ceil(total / PAGE_SIZE)
|
||||
const currentPage = Math.floor(offset / PAGE_SIZE) + 1
|
||||
|
||||
// L1 token = part before first underscore that has a sub-part
|
||||
const getL1Token = (name: string) => {
|
||||
const parts = name.split('_')
|
||||
// Find the longest known L1 prefix
|
||||
for (let i = Math.min(parts.length, 3); i >= 1; i--) {
|
||||
const candidate = parts.slice(0, i).join('_')
|
||||
if (['access_control', 'audit_logging', 'key_management', 'risk_management',
|
||||
'network_security', 'network_segmentation', 'multi_factor_auth',
|
||||
'transport_encryption', 'data_subject_rights', 'data_breach_notification',
|
||||
'data_processing_agreement', 'data_processing_register',
|
||||
'third_party_management', 'change_management', 'human_resources_security',
|
||||
'physical_security', 'secure_development', 'api_security',
|
||||
'input_validation', 'container_security', 'logging_configuration',
|
||||
'cookie_consent', 'video_surveillance', 'supply_chain_due_diligence',
|
||||
'critical_infrastructure', 'sustainability_reporting',
|
||||
'financial_reporting', 'consumer_protection', 'compliance_audit',
|
||||
'asset_management', 'disaster_recovery', 'patch_management',
|
||||
'password_policy', 'session_management', 'privileged_access',
|
||||
'certificate_management', 'personal_data', 'sensitive_data',
|
||||
'health_data', 'product_safety', 'medical_device', 'payment_services',
|
||||
'supervisory_authority', 'data_retention', 'data_transfer',
|
||||
'data_classification', 'privacy_by_design',
|
||||
].includes(candidate)) return candidate
|
||||
}
|
||||
return parts[0]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Master Controls</h1>
|
||||
<p className="text-gray-600 mt-1">
|
||||
{total.toLocaleString()} Master Controls mit {mcs.reduce((s, m) => s + m.total_controls, 0).toLocaleString()}+ Atomic Controls
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search + Filters */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suche nach MC-Name (z.B. encryption, incident, access_control)..."
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setOffset(0) }}
|
||||
className="flex-1 px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-500 whitespace-nowrap">
|
||||
Seite {currentPage} von {totalPages}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{/* MC List */}
|
||||
<div className={`${selectedMC ? 'w-1/2' : 'w-full'} transition-all`}>
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
|
||||
onClick={() => handleSort('canonical_name')}>
|
||||
Name {sortBy === 'canonical_name' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
|
||||
onClick={() => handleSort('total_controls')}>
|
||||
Controls {sortBy === 'total_controls' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Phasen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{loading ? (
|
||||
<tr><td colSpan={3} className="px-4 py-8 text-center text-gray-400">Laden...</td></tr>
|
||||
) : mcs.map(mc => {
|
||||
const l1 = getL1Token(mc.canonical_name)
|
||||
const l2 = mc.canonical_name.slice(l1.length + 1) || ''
|
||||
return (
|
||||
<tr
|
||||
key={mc.id}
|
||||
onClick={() => loadMembers(mc)}
|
||||
className={`cursor-pointer hover:bg-purple-50 transition-colors ${
|
||||
selectedMC?.id === mc.id ? 'bg-purple-100' : ''
|
||||
}`}
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-xs font-mono bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
|
||||
{l1}
|
||||
</span>
|
||||
{l2 && (
|
||||
<span className="ml-1.5 text-sm text-gray-700">{l2.replace(/_/g, ' ')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm font-medium text-gray-900">
|
||||
{mc.total_controls}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-sm text-gray-500">
|
||||
{(mc.phases_covered || []).length}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t bg-gray-50">
|
||||
<button
|
||||
onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
|
||||
disabled={offset === 0}
|
||||
className="px-3 py-1 text-sm border rounded disabled:opacity-50"
|
||||
>
|
||||
Zurueck
|
||||
</button>
|
||||
<span className="text-xs text-gray-500">
|
||||
{offset + 1}-{Math.min(offset + PAGE_SIZE, total)} von {total}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setOffset(offset + PAGE_SIZE)}
|
||||
disabled={offset + PAGE_SIZE >= total}
|
||||
className="px-3 py-1 text-sm border rounded disabled:opacity-50"
|
||||
>
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Member Detail Panel */}
|
||||
{selectedMC && (
|
||||
<div className="w-1/2">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-4">
|
||||
<div className="px-4 py-3 bg-purple-50 border-b flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="font-semibold text-purple-900">{selectedMC.canonical_name}</h2>
|
||||
<p className="text-xs text-purple-600">{selectedMC.total_controls} Controls, {(selectedMC.phases_covered || []).length} Phasen</p>
|
||||
</div>
|
||||
<button onClick={() => setSelectedMC(null)} className="text-purple-400 hover:text-purple-600 text-lg">×</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[70vh] overflow-y-auto">
|
||||
{membersLoading ? (
|
||||
<div className="p-8 text-center text-gray-400">Laden...</div>
|
||||
) : members.map((m, i) => (
|
||||
<div key={i} className="px-4 py-3 border-b border-gray-50 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_COLORS[m.severity] || ''}`}>
|
||||
{m.severity}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{m.phase}</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>
|
||||
))}
|
||||
{members.length === 0 && !membersLoading && (
|
||||
<div className="p-8 text-center text-gray-400">Keine Members gefunden</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
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>
|
||||
</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
|
||||
if (state.mode === 'detail' && state.selectedControl) {
|
||||
return (
|
||||
<ControlDetail
|
||||
ctrl={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 */ }
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// 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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user