451365a312
website (17 pages + 3 components): - multiplayer/wizard, middleware/wizard+test-wizard, communication - builds/wizard, staff-search, voice, sbom/wizard - foerderantrag, mail/tasks, tools/communication, sbom - compliance/evidence, uni-crawler, brandbook (already done) - CollectionsTab, IngestionTab, RiskHeatmap backend-lehrer (5 files): - letters_api (641 → 2), certificates_api (636 → 2) - alerts_agent/db/models (636 → 3) - llm_gateway/communication_service (614 → 2) - game/database already done in prior batch klausur-service (2 files): - hybrid_vocab_extractor (664 → 2) - klausur-service/frontend: api.ts (620 → 3), EHUploadWizard (591 → 2) voice-service (3 files): - bqas/rag_judge (618 → 3), runner (529 → 2) - enhanced_task_orchestrator (519 → 2) studio-v2 (6 files): - korrektur/[klausurId] (578 → 4), fairness (569 → 2) - AlertsWizard (552 → 2), OnboardingWizard (513 → 2) - korrektur/api.ts (506 → 3), geo-lernwelt (501 → 2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
93 lines
4.3 KiB
TypeScript
93 lines
4.3 KiB
TypeScript
import type { Component } from './sbom-data'
|
|
import { getCategoryColor, getLicenseColor } from './sbom-data'
|
|
|
|
interface SBOMTableProps {
|
|
components: Component[]
|
|
loading: boolean
|
|
}
|
|
|
|
export function SBOMTable({ components, loading }: SBOMTableProps) {
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
|
<span className="ml-3 text-gray-600">Lade SBOM...</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lizenz</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{components.map((component, idx) => {
|
|
const licenseId = component.license || component.licenses?.[0]?.license?.id
|
|
return (
|
|
<tr key={idx} className="hover:bg-gray-50">
|
|
<td className="px-4 py-4">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">{component.name}</div>
|
|
{component.description && (
|
|
<div className="text-xs text-gray-500 max-w-xs truncate">{component.description}</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<span className="text-sm font-mono text-gray-900">{component.version}</span>
|
|
</td>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getCategoryColor(component.category)}`}>
|
|
{component.category || component.type}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
{component.port ? (
|
|
<span className="text-sm font-mono text-gray-600">{component.port}</span>
|
|
) : (
|
|
<span className="text-sm text-gray-400">-</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
{licenseId ? (
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getLicenseColor(licenseId)}`}>
|
|
{licenseId}
|
|
</span>
|
|
) : (
|
|
<span className="text-sm text-gray-400">-</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
{component.sourceUrl && component.sourceUrl !== '-' ? (
|
|
<a href={component.sourceUrl} target="_blank" rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-800 text-sm flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
) : (
|
|
<span className="text-sm text-gray-400">-</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
{components.length === 0 && (
|
|
<div className="p-8 text-center text-gray-500">Keine Komponenten gefunden.</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|