0f821afb23
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 25s
CI / test-go-edu-search (push) Successful in 27s
CI / test-python-klausur (push) Failing after 1m58s
CI / test-python-agent-core (push) Successful in 15s
CI / test-nodejs-website (push) Successful in 16s
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
881 lines
56 KiB
TypeScript
881 lines
56 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* SBOM (Software Bill of Materials) Admin Page
|
|
*
|
|
* Migriert von /admin/sbom (website) nach /infrastructure/sbom (admin-v2)
|
|
*
|
|
* Displays:
|
|
* - All infrastructure components (Docker services)
|
|
* - Python/Go dependencies
|
|
* - Node.js packages
|
|
* - License information
|
|
* - Version tracking
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
|
|
|
|
interface Component {
|
|
type: string
|
|
name: string
|
|
version: string
|
|
purl?: string
|
|
licenses?: { license: { id: string } }[]
|
|
category?: string
|
|
port?: string
|
|
description?: string
|
|
license?: string
|
|
sourceUrl?: string
|
|
}
|
|
|
|
interface SBOMData {
|
|
bomFormat?: string
|
|
specVersion?: string
|
|
version?: number
|
|
metadata?: {
|
|
timestamp?: string
|
|
tools?: { vendor: string; name: string; version: string }[]
|
|
component?: { type: string; name: string; version: string }
|
|
}
|
|
components?: Component[]
|
|
}
|
|
|
|
type CategoryType = 'all' | 'infrastructure' | 'security-tools' | 'python' | 'go' | 'nodejs' | 'unity' | 'csharp'
|
|
type InfoTabType = 'audit' | 'documentation'
|
|
|
|
// Infrastructure components from docker-compose.yml and project analysis
|
|
const INFRASTRUCTURE_COMPONENTS: Component[] = [
|
|
// ===== DATABASES =====
|
|
{ type: 'service', name: 'PostgreSQL', version: '16-alpine', category: 'database', port: '5432', description: 'Hauptdatenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
|
|
{ type: 'service', name: 'Synapse PostgreSQL', version: '16-alpine', category: 'database', port: '-', description: 'Matrix Datenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
|
|
|
|
// ===== CACHE & QUEUE =====
|
|
{ type: 'service', name: 'Valkey', version: '8-alpine', category: 'cache', port: '6379', description: 'In-Memory Cache & Sessions (Redis OSS Fork)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/valkey-io/valkey' },
|
|
|
|
// ===== SEARCH ENGINES =====
|
|
{ type: 'service', name: 'Qdrant', version: '1.7.4', category: 'search', port: '6333', description: 'Vector Database (RAG/Embeddings)', license: 'Apache-2.0', sourceUrl: 'https://github.com/qdrant/qdrant' },
|
|
{ type: 'service', name: 'OpenSearch', version: '2.x', category: 'search', port: '9200', description: 'Volltext-Suche (Elasticsearch Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/OpenSearch' },
|
|
{ type: 'service', name: 'Meilisearch', version: 'latest', category: 'search', port: '7700', description: 'Instant Search Engine', license: 'MIT', sourceUrl: 'https://github.com/meilisearch/meilisearch' },
|
|
|
|
// ===== OBJECT STORAGE =====
|
|
{ type: 'service', name: 'MinIO', version: 'latest', category: 'storage', port: '9000/9001', description: 'S3-kompatibel Object Storage', license: 'AGPL-3.0', sourceUrl: 'https://github.com/minio/minio' },
|
|
|
|
// ===== SECURITY =====
|
|
{ type: 'service', name: 'HashiCorp Vault', version: '1.15', category: 'security', port: '8200', description: 'Secrets Management', license: 'BUSL-1.1', sourceUrl: 'https://github.com/hashicorp/vault' },
|
|
{ type: 'service', name: 'Keycloak', version: '23.0', category: 'security', port: '8180', description: 'Identity Provider (SSO/OIDC)', license: 'Apache-2.0', sourceUrl: 'https://github.com/keycloak/keycloak' },
|
|
{ type: 'service', name: 'NetBird', version: '0.64.5', category: 'security', port: '-', description: 'Zero-Trust Mesh VPN (WireGuard-basiert)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/netbirdio/netbird' },
|
|
|
|
// ===== COMMUNICATION =====
|
|
{ type: 'service', name: 'Matrix Synapse', version: 'latest', category: 'communication', port: '8008', description: 'E2EE Messenger Server', license: 'AGPL-3.0', sourceUrl: 'https://github.com/element-hq/synapse' },
|
|
{ type: 'service', name: 'Jitsi Web', version: 'stable-9823', category: 'communication', port: '8443', description: 'Videokonferenz UI', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-meet' },
|
|
{ type: 'service', name: 'Jitsi Prosody (XMPP)', version: 'stable-9823', category: 'communication', port: '-', description: 'XMPP Server', license: 'MIT', sourceUrl: 'https://github.com/bjc/prosody' },
|
|
{ type: 'service', name: 'Jitsi Jicofo', version: 'stable-9823', category: 'communication', port: '-', description: 'Conference Focus Component', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jicofo' },
|
|
{ type: 'service', name: 'Jitsi JVB', version: 'stable-9823', category: 'communication', port: '10000/udp', description: 'Videobridge (WebRTC SFU)', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-videobridge' },
|
|
{ type: 'service', name: 'Jibri', version: 'stable-9823', category: 'communication', port: '-', description: 'Recording & Streaming Service', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jibri' },
|
|
|
|
// ===== APPLICATION SERVICES (Python) =====
|
|
{ type: 'service', name: 'Python Backend (FastAPI)', version: '3.12', category: 'application', port: '8000', description: 'Lehrer Backend API (Klausuren, E-Mail, Alerts)', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'Klausur Service', version: '1.0', category: 'application', port: '8086', description: 'Abitur-Klausurkorrektur (BYOEH)', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'Transcription Worker', version: '1.0', category: 'application', port: '-', description: 'Whisper + pyannote Transkription', license: 'Proprietary', sourceUrl: '-' },
|
|
|
|
// ===== APPLICATION SERVICES (Go) =====
|
|
{ type: 'service', name: 'Go School Service', version: '1.21', category: 'application', port: '8084', description: 'Klausuren, Noten, Zeugnisse', license: 'Proprietary', sourceUrl: '-' },
|
|
|
|
// ===== APPLICATION SERVICES (Node.js) =====
|
|
{ type: 'service', name: 'Next.js Admin Frontend', version: '15.1', category: 'application', port: '3002', description: 'Admin Lehrer Dashboard (React)', license: 'Proprietary', sourceUrl: '-' },
|
|
|
|
// ===== CI/CD & VERSION CONTROL =====
|
|
{ type: 'service', name: 'Woodpecker CI', version: '2.x', category: 'cicd', port: '8082', description: 'Self-hosted CI/CD Pipeline (Drone Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/woodpecker-ci/woodpecker' },
|
|
{ type: 'service', name: 'Gitea', version: '1.21', category: 'cicd', port: '3003', description: 'Self-hosted Git Service', license: 'MIT', sourceUrl: 'https://github.com/go-gitea/gitea' },
|
|
|
|
// ===== DEVELOPMENT =====
|
|
{ type: 'service', name: 'Mailpit', version: 'latest', category: 'development', port: '8025/1025', description: 'E-Mail Testing (SMTP Catch-All)', license: 'MIT', sourceUrl: 'https://github.com/axllent/mailpit' },
|
|
|
|
// ===== GAME (Breakpilot Drive) =====
|
|
{ type: 'service', name: 'Breakpilot Drive (Unity WebGL)', version: '6000.0', category: 'game', port: '3001', description: 'Lernspiel fuer Schueler (Klasse 2-6)', license: 'Proprietary', sourceUrl: '-' },
|
|
|
|
// ===== VOICE SERVICE =====
|
|
{ type: 'service', name: 'Voice Service (FastAPI)', version: '1.0', category: 'voice', port: '8091', description: 'Voice-First Interface mit PersonaPlex-7B & TaskOrchestrator', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'PersonaPlex-7B (NVIDIA)', version: '7B', category: 'voice', port: '8998', description: 'Full-Duplex Speech-to-Speech (Produktion)', license: 'MIT/NVIDIA Open Model', sourceUrl: 'https://developer.nvidia.com' },
|
|
{ type: 'service', name: 'TaskOrchestrator', version: '1.0', category: 'voice', port: '-', description: 'Agent-Orchestrierung mit Task State Machine', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'Mimi Audio Codec', version: '1.0', category: 'voice', port: '-', description: 'Audio Streaming (24kHz, 80ms Frames)', license: 'MIT', sourceUrl: '-' },
|
|
|
|
// ===== BQAS (Quality Assurance) =====
|
|
{ type: 'service', name: 'BQAS Local Scheduler', version: '1.0', category: 'qa', port: '-', description: 'Lokale GitHub Actions Alternative (launchd)', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'BQAS LLM Judge', version: '1.0', category: 'qa', port: '-', description: 'Qwen2.5-32B basierte Test-Bewertung', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'BQAS RAG Judge', version: '1.0', category: 'qa', port: '-', description: 'RAG/Korrektur Evaluierung', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'BQAS Notifier', version: '1.0', category: 'qa', port: '-', description: 'Desktop/Slack/Email Benachrichtigungen', license: 'Proprietary', sourceUrl: '-' },
|
|
{ type: 'service', name: 'BQAS Regression Tracker', version: '1.0', category: 'qa', port: '-', description: 'Score-Historie und Regression-Erkennung', license: 'Proprietary', sourceUrl: '-' },
|
|
]
|
|
|
|
// Security Tools discovered in project
|
|
const SECURITY_TOOLS: Component[] = [
|
|
{ type: 'tool', name: 'Trivy', version: 'latest', category: 'security-tool', description: 'Container Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/aquasecurity/trivy' },
|
|
{ type: 'tool', name: 'Grype', version: 'latest', category: 'security-tool', description: 'SBOM Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/grype' },
|
|
{ type: 'tool', name: 'Syft', version: 'latest', category: 'security-tool', description: 'SBOM Generator', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/syft' },
|
|
{ type: 'tool', name: 'Gitleaks', version: 'latest', category: 'security-tool', description: 'Secrets Detection in Git', license: 'MIT', sourceUrl: 'https://github.com/gitleaks/gitleaks' },
|
|
{ type: 'tool', name: 'TruffleHog', version: '3.x', category: 'security-tool', description: 'Secrets Scanner (Regex/Entropy)', license: 'AGPL-3.0', sourceUrl: 'https://github.com/trufflesecurity/trufflehog' },
|
|
{ type: 'tool', name: 'Semgrep', version: 'latest', category: 'security-tool', description: 'SAST - Static Analysis', license: 'LGPL-2.1', sourceUrl: 'https://github.com/semgrep/semgrep' },
|
|
{ type: 'tool', name: 'Bandit', version: 'latest', category: 'security-tool', description: 'Python Security Linter', license: 'Apache-2.0', sourceUrl: 'https://github.com/PyCQA/bandit' },
|
|
{ type: 'tool', name: 'Gosec', version: 'latest', category: 'security-tool', description: 'Go Security Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/securego/gosec' },
|
|
{ type: 'tool', name: 'govulncheck', version: 'latest', category: 'security-tool', description: 'Go Vulnerability Check', license: 'BSD-3-Clause', sourceUrl: 'https://pkg.go.dev/golang.org/x/vuln/cmd/govulncheck' },
|
|
{ type: 'tool', name: 'golangci-lint', version: 'latest', category: 'security-tool', description: 'Go Linter (Security Rules)', license: 'GPL-3.0', sourceUrl: 'https://github.com/golangci/golangci-lint' },
|
|
{ type: 'tool', name: 'npm audit', version: 'built-in', category: 'security-tool', description: 'Node.js Vulnerability Check', license: 'Artistic-2.0', sourceUrl: 'https://docs.npmjs.com/cli/commands/npm-audit' },
|
|
{ type: 'tool', name: 'pip-audit', version: 'latest', category: 'security-tool', description: 'Python Dependency Audit', license: 'Apache-2.0', sourceUrl: 'https://github.com/pypa/pip-audit' },
|
|
{ type: 'tool', name: 'safety', version: 'latest', category: 'security-tool', description: 'Python Safety Check', license: 'MIT', sourceUrl: 'https://github.com/pyupio/safety' },
|
|
{ type: 'tool', name: 'CodeQL', version: 'latest', category: 'security-tool', description: 'GitHub Security Analysis', license: 'MIT', sourceUrl: 'https://github.com/github/codeql' },
|
|
]
|
|
|
|
// Key Python packages (from requirements.txt)
|
|
const PYTHON_PACKAGES: Component[] = [
|
|
{ type: 'library', name: 'FastAPI', version: '0.109+', category: 'python', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/tiangolo/fastapi' },
|
|
{ type: 'library', name: 'Uvicorn', version: '0.38+', category: 'python', description: 'ASGI Server', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/uvicorn' },
|
|
{ type: 'library', name: 'Starlette', version: '0.49+', category: 'python', description: 'ASGI Framework (FastAPI Basis)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/starlette' },
|
|
{ type: 'library', name: 'Pydantic', version: '2.x', category: 'python', description: 'Data Validation', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic' },
|
|
{ type: 'library', name: 'SQLAlchemy', version: '2.x', category: 'python', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/sqlalchemy' },
|
|
{ type: 'library', name: 'Alembic', version: '1.14+', category: 'python', description: 'DB Migrations (Classroom, Feedback Tables)', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/alembic' },
|
|
{ type: 'library', name: 'psycopg2-binary', version: '2.9+', category: 'python', description: 'PostgreSQL Driver', license: 'LGPL-3.0', sourceUrl: 'https://github.com/psycopg/psycopg2' },
|
|
{ type: 'library', name: 'httpx', version: 'latest', category: 'python', description: 'Async HTTP Client', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/httpx' },
|
|
{ type: 'library', name: 'PyJWT', version: 'latest', category: 'python', description: 'JWT Handling', license: 'MIT', sourceUrl: 'https://github.com/jpadilla/pyjwt' },
|
|
{ type: 'library', name: 'hvac', version: 'latest', category: 'python', description: 'Vault Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/hvac/hvac' },
|
|
{ type: 'library', name: 'python-multipart', version: 'latest', category: 'python', description: 'File Uploads', license: 'Apache-2.0', sourceUrl: 'https://github.com/andrew-d/python-multipart' },
|
|
{ type: 'library', name: 'aiofiles', version: 'latest', category: 'python', description: 'Async File I/O', license: 'Apache-2.0', sourceUrl: 'https://github.com/Tinche/aiofiles' },
|
|
{ type: 'library', name: 'openai', version: 'latest', category: 'python', description: 'OpenAI SDK', license: 'MIT', sourceUrl: 'https://github.com/openai/openai-python' },
|
|
{ type: 'library', name: 'anthropic', version: 'latest', category: 'python', description: 'Anthropic Claude SDK', license: 'MIT', sourceUrl: 'https://github.com/anthropics/anthropic-sdk-python' },
|
|
{ type: 'library', name: 'langchain', version: 'latest', category: 'python', description: 'LLM Framework', license: 'MIT', sourceUrl: 'https://github.com/langchain-ai/langchain' },
|
|
{ type: 'library', name: 'aioimaplib', version: 'latest', category: 'python', description: 'Async IMAP Client (Unified Inbox)', license: 'MIT', sourceUrl: 'https://github.com/bamthomas/aioimaplib' },
|
|
{ type: 'library', name: 'aiosmtplib', version: 'latest', category: 'python', description: 'Async SMTP Client (Mail Sending)', license: 'MIT', sourceUrl: 'https://github.com/cole/aiosmtplib' },
|
|
{ type: 'library', name: 'email-validator', version: 'latest', category: 'python', description: 'Email Validation', license: 'CC0-1.0', sourceUrl: 'https://github.com/JoshData/python-email-validator' },
|
|
{ type: 'library', name: 'cryptography', version: 'latest', category: 'python', description: 'Encryption (Mail Credentials)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/pyca/cryptography' },
|
|
{ type: 'library', name: 'asyncpg', version: 'latest', category: 'python', description: 'Async PostgreSQL Driver', license: 'Apache-2.0', sourceUrl: 'https://github.com/MagicStack/asyncpg' },
|
|
{ type: 'library', name: 'python-dateutil', version: 'latest', category: 'python', description: 'Date Parsing (Deadline Extraction)', license: 'Apache-2.0', sourceUrl: 'https://github.com/dateutil/dateutil' },
|
|
{ type: 'library', name: 'faster-whisper', version: '1.0+', category: 'python', description: 'CTranslate2 Whisper (GPU-optimiert)', license: 'MIT', sourceUrl: 'https://github.com/SYSTRAN/faster-whisper' },
|
|
{ type: 'library', name: 'pyannote.audio', version: '3.x', category: 'python', description: 'Speaker Diarization', license: 'MIT', sourceUrl: 'https://github.com/pyannote/pyannote-audio' },
|
|
{ type: 'library', name: 'rq', version: '1.x', category: 'python', description: 'Redis Queue (Task Processing)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/rq/rq' },
|
|
{ type: 'library', name: 'ffmpeg-python', version: '0.2+', category: 'python', description: 'FFmpeg Python Bindings', license: 'Apache-2.0', sourceUrl: 'https://github.com/kkroening/ffmpeg-python' },
|
|
{ type: 'library', name: 'webvtt-py', version: '0.4+', category: 'python', description: 'WebVTT Subtitle Export', license: 'MIT', sourceUrl: 'https://github.com/glut23/webvtt-py' },
|
|
{ type: 'library', name: 'minio', version: '7.x', category: 'python', description: 'MinIO S3 Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/minio/minio-py' },
|
|
{ type: 'library', name: 'structlog', version: '24.x', category: 'python', description: 'Structured Logging', license: 'Apache-2.0', sourceUrl: 'https://github.com/hynek/structlog' },
|
|
{ type: 'library', name: 'feedparser', version: '6.x', category: 'python', description: 'RSS/Atom Feed Parser (Alerts Agent)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/kurtmckee/feedparser' },
|
|
{ type: 'library', name: 'APScheduler', version: '3.x', category: 'python', description: 'AsyncIO Job Scheduler (Alerts Agent)', license: 'MIT', sourceUrl: 'https://github.com/agronholm/apscheduler' },
|
|
{ type: 'library', name: 'beautifulsoup4', version: '4.x', category: 'python', description: 'HTML Parser (Email Parsing)', license: 'MIT', sourceUrl: 'https://code.launchpad.net/beautifulsoup' },
|
|
{ type: 'library', name: 'websockets', version: '14.x', category: 'python', description: 'WebSocket Support (Voice Streaming)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/python-websockets/websockets' },
|
|
{ type: 'library', name: 'soundfile', version: '0.13+', category: 'python', description: 'Audio File Processing (Voice Service)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/bastibe/python-soundfile' },
|
|
{ type: 'library', name: 'scipy', version: '1.14+', category: 'python', description: 'Signal Processing (Audio)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/scipy/scipy' },
|
|
{ type: 'library', name: 'redis', version: '5.x', category: 'python', description: 'Valkey/Redis Client (Voice Sessions)', license: 'MIT', sourceUrl: 'https://github.com/redis/redis-py' },
|
|
{ type: 'library', name: 'pydantic-settings', version: '2.x', category: 'python', description: 'Settings Management (Voice Config)', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic-settings' },
|
|
]
|
|
|
|
// Key Go modules (from go.mod files)
|
|
const GO_MODULES: Component[] = [
|
|
{ type: 'library', name: 'gin-gonic/gin', version: '1.9+', category: 'go', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/gin-gonic/gin' },
|
|
{ type: 'library', name: 'gorm.io/gorm', version: '1.25+', category: 'go', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/go-gorm/gorm' },
|
|
{ type: 'library', name: 'golang-jwt/jwt', version: 'v5', category: 'go', description: 'JWT Library', license: 'MIT', sourceUrl: 'https://github.com/golang-jwt/jwt' },
|
|
{ type: 'library', name: 'opensearch-project/opensearch-go', version: '4.x', category: 'go', description: 'OpenSearch Client (edu-search-service)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/opensearch-go' },
|
|
{ type: 'library', name: 'lib/pq', version: '1.10+', category: 'go', description: 'PostgreSQL Driver (school-service)', license: 'MIT', sourceUrl: 'https://github.com/lib/pq' },
|
|
{ type: 'library', name: 'spf13/viper', version: 'latest', category: 'go', description: 'Configuration', license: 'MIT', sourceUrl: 'https://github.com/spf13/viper' },
|
|
{ type: 'library', name: 'uber-go/zap', version: 'latest', category: 'go', description: 'Structured Logging', license: 'MIT', sourceUrl: 'https://github.com/uber-go/zap' },
|
|
{ type: 'library', name: 'swaggo/swag', version: 'latest', category: 'go', description: 'Swagger Docs', license: 'MIT', sourceUrl: 'https://github.com/swaggo/swag' },
|
|
]
|
|
|
|
// Key Node.js packages (from package.json files)
|
|
const NODE_PACKAGES: Component[] = [
|
|
{ type: 'library', name: 'Next.js', version: '15.1', category: 'nodejs', description: 'React Framework', license: 'MIT', sourceUrl: 'https://github.com/vercel/next.js' },
|
|
{ type: 'library', name: 'React', version: '19', category: 'nodejs', description: 'UI Library', license: 'MIT', sourceUrl: 'https://github.com/facebook/react' },
|
|
{ type: 'library', name: 'TypeScript', version: '5.x', category: 'nodejs', description: 'Type System', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/TypeScript' },
|
|
{ type: 'library', name: 'Tailwind CSS', version: '3.4', category: 'nodejs', description: 'Utility CSS', license: 'MIT', sourceUrl: 'https://github.com/tailwindlabs/tailwindcss' },
|
|
{ type: 'library', name: 'Material Design Icons', version: 'latest', category: 'nodejs', description: 'Icon-System (Companion UI, Studio)', license: 'Apache-2.0', sourceUrl: 'https://github.com/google/material-design-icons' },
|
|
{ type: 'library', name: 'Recharts', version: '2.12', category: 'nodejs', description: 'React Charts (Admin Dashboard)', license: 'MIT', sourceUrl: 'https://github.com/recharts/recharts' },
|
|
{ type: 'library', name: 'Playwright', version: '1.50', category: 'nodejs', description: 'E2E Testing Framework (SDK Tests)', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/playwright' },
|
|
{ type: 'library', name: 'Vitest', version: '4.x', category: 'nodejs', description: 'Unit Testing Framework', license: 'MIT', sourceUrl: 'https://github.com/vitest-dev/vitest' },
|
|
{ type: 'library', name: 'jsPDF', version: '4.x', category: 'nodejs', description: 'PDF Generation (SDK Export)', license: 'MIT', sourceUrl: 'https://github.com/parallax/jsPDF' },
|
|
{ type: 'library', name: 'JSZip', version: '3.x', category: 'nodejs', description: 'ZIP File Creation (SDK Export)', license: 'MIT/GPL-3.0', sourceUrl: 'https://github.com/Stuk/jszip' },
|
|
{ type: 'library', name: 'Lucide React', version: '0.468', category: 'nodejs', description: 'Icon Library', license: 'ISC', sourceUrl: 'https://github.com/lucide-icons/lucide' },
|
|
]
|
|
|
|
// Unity packages (Breakpilot Drive game engine)
|
|
const UNITY_PACKAGES: Component[] = [
|
|
{ type: 'library', name: 'Unity Engine', version: '6000.0 (Unity 6)', category: 'unity', description: 'Game Engine', license: 'Unity EULA', sourceUrl: 'https://unity.com' },
|
|
{ type: 'library', name: 'Universal Render Pipeline (URP)', version: '17.x', category: 'unity', description: 'Render Pipeline', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@17.0' },
|
|
{ type: 'library', name: 'TextMeshPro', version: '3.2', category: 'unity', description: 'Advanced Text Rendering', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2' },
|
|
{ type: 'library', name: 'Unity Mathematics', version: '1.3', category: 'unity', description: 'Math Library (SIMD)', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.mathematics@1.3' },
|
|
{ type: 'library', name: 'Newtonsoft.Json (Unity)', version: '3.2', category: 'unity', description: 'JSON Serialization', license: 'MIT', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.nuget.newtonsoft-json@3.2' },
|
|
{ type: 'library', name: 'Unity UI', version: '2.0', category: 'unity', description: 'UI System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.ugui@2.0' },
|
|
{ type: 'library', name: 'Unity Input System', version: '1.8', category: 'unity', description: 'New Input System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.inputsystem@1.8' },
|
|
]
|
|
|
|
// C# dependencies (Breakpilot Drive)
|
|
const CSHARP_PACKAGES: Component[] = [
|
|
{ type: 'library', name: '.NET Standard', version: '2.1', category: 'csharp', description: 'Runtime', license: 'MIT', sourceUrl: 'https://github.com/dotnet/standard' },
|
|
{ type: 'library', name: 'UnityWebRequest', version: 'built-in', category: 'csharp', description: 'HTTP Client', license: 'Unity Companion', sourceUrl: '-' },
|
|
{ type: 'library', name: 'System.Text.Json', version: 'built-in', category: 'csharp', description: 'JSON Parsing', license: 'MIT', sourceUrl: 'https://github.com/dotnet/runtime' },
|
|
]
|
|
|
|
export default function SBOMPage() {
|
|
const [sbomData, setSbomData] = useState<SBOMData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [activeCategory, setActiveCategory] = useState<CategoryType>('all')
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [activeInfoTab, setActiveInfoTab] = useState<InfoTabType>('audit')
|
|
const [showFullDocs, setShowFullDocs] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadSBOM()
|
|
}, [])
|
|
|
|
const loadSBOM = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const res = await fetch('/api/v1/security/sbom')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setSbomData(data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load SBOM:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const getAllComponents = (): Component[] => {
|
|
const infraComponents = INFRASTRUCTURE_COMPONENTS.map(c => ({
|
|
...c,
|
|
category: c.category || 'infrastructure'
|
|
}))
|
|
|
|
const securityToolsComponents = SECURITY_TOOLS.map(c => ({
|
|
...c,
|
|
category: c.category || 'security-tool'
|
|
}))
|
|
|
|
const pythonComponents = PYTHON_PACKAGES.map(c => ({
|
|
...c,
|
|
category: 'python'
|
|
}))
|
|
|
|
const goComponents = GO_MODULES.map(c => ({
|
|
...c,
|
|
category: 'go'
|
|
}))
|
|
|
|
const nodeComponents = NODE_PACKAGES.map(c => ({
|
|
...c,
|
|
category: 'nodejs'
|
|
}))
|
|
|
|
const unityComponents = UNITY_PACKAGES.map(c => ({
|
|
...c,
|
|
category: 'unity'
|
|
}))
|
|
|
|
const csharpComponents = CSHARP_PACKAGES.map(c => ({
|
|
...c,
|
|
category: 'csharp'
|
|
}))
|
|
|
|
// Add dynamic SBOM data from backend if available
|
|
const dynamicPython = (sbomData?.components || []).map(c => ({
|
|
...c,
|
|
category: 'python'
|
|
}))
|
|
|
|
return [...infraComponents, ...securityToolsComponents, ...pythonComponents, ...goComponents, ...nodeComponents, ...unityComponents, ...csharpComponents, ...dynamicPython]
|
|
}
|
|
|
|
const getFilteredComponents = () => {
|
|
let components = getAllComponents()
|
|
|
|
if (activeCategory !== 'all') {
|
|
if (activeCategory === 'infrastructure') {
|
|
components = INFRASTRUCTURE_COMPONENTS
|
|
} else if (activeCategory === 'security-tools') {
|
|
components = SECURITY_TOOLS
|
|
} else if (activeCategory === 'python') {
|
|
components = [...PYTHON_PACKAGES, ...(sbomData?.components || [])]
|
|
} else if (activeCategory === 'go') {
|
|
components = GO_MODULES
|
|
} else if (activeCategory === 'nodejs') {
|
|
components = NODE_PACKAGES
|
|
} else if (activeCategory === 'unity') {
|
|
components = UNITY_PACKAGES
|
|
} else if (activeCategory === 'csharp') {
|
|
components = CSHARP_PACKAGES
|
|
}
|
|
}
|
|
|
|
if (searchTerm) {
|
|
components = components.filter(c =>
|
|
c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
c.version.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(c.description?.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
)
|
|
}
|
|
|
|
return components
|
|
}
|
|
|
|
const getCategoryColor = (category?: string) => {
|
|
switch (category) {
|
|
case 'database': return 'bg-blue-100 text-blue-800'
|
|
case 'security': return 'bg-purple-100 text-purple-800'
|
|
case 'security-tool': return 'bg-red-100 text-red-800'
|
|
case 'application': return 'bg-green-100 text-green-800'
|
|
case 'communication': return 'bg-yellow-100 text-yellow-800'
|
|
case 'storage': return 'bg-orange-100 text-orange-800'
|
|
case 'search': return 'bg-pink-100 text-pink-800'
|
|
case 'cache': return 'bg-cyan-100 text-cyan-800'
|
|
case 'development': return 'bg-gray-100 text-gray-800'
|
|
case 'cicd': return 'bg-orange-100 text-orange-800'
|
|
case 'python': return 'bg-emerald-100 text-emerald-800'
|
|
case 'go': return 'bg-sky-100 text-sky-800'
|
|
case 'nodejs': return 'bg-lime-100 text-lime-800'
|
|
case 'unity': return 'bg-amber-100 text-amber-800'
|
|
case 'csharp': return 'bg-fuchsia-100 text-fuchsia-800'
|
|
case 'game': return 'bg-rose-100 text-rose-800'
|
|
case 'voice': return 'bg-teal-100 text-teal-800'
|
|
case 'qa': return 'bg-blue-100 text-blue-800'
|
|
default: return 'bg-slate-100 text-slate-800'
|
|
}
|
|
}
|
|
|
|
const getLicenseColor = (license?: string) => {
|
|
if (!license) return 'bg-gray-100 text-gray-600'
|
|
if (license.includes('MIT')) return 'bg-green-100 text-green-700'
|
|
if (license.includes('Apache')) return 'bg-blue-100 text-blue-700'
|
|
if (license.includes('BSD')) return 'bg-cyan-100 text-cyan-700'
|
|
if (license.includes('GPL') || license.includes('LGPL')) return 'bg-orange-100 text-orange-700'
|
|
return 'bg-gray-100 text-gray-600'
|
|
}
|
|
|
|
const stats = {
|
|
totalInfra: INFRASTRUCTURE_COMPONENTS.length,
|
|
totalSecurityTools: SECURITY_TOOLS.length,
|
|
totalPython: PYTHON_PACKAGES.length + (sbomData?.components?.length || 0),
|
|
totalGo: GO_MODULES.length,
|
|
totalNode: NODE_PACKAGES.length,
|
|
totalUnity: UNITY_PACKAGES.length,
|
|
totalCsharp: CSHARP_PACKAGES.length,
|
|
totalAll: INFRASTRUCTURE_COMPONENTS.length + SECURITY_TOOLS.length + PYTHON_PACKAGES.length + GO_MODULES.length + NODE_PACKAGES.length + UNITY_PACKAGES.length + CSHARP_PACKAGES.length + (sbomData?.components?.length || 0),
|
|
databases: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'database').length,
|
|
services: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'application').length,
|
|
communication: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'communication').length,
|
|
game: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'game').length,
|
|
}
|
|
|
|
const categories = [
|
|
{ id: 'all', name: 'Alle', count: stats.totalAll },
|
|
{ id: 'infrastructure', name: 'Infrastruktur', count: stats.totalInfra },
|
|
{ id: 'security-tools', name: 'Security Tools', count: stats.totalSecurityTools },
|
|
{ id: 'python', name: 'Python', count: stats.totalPython },
|
|
{ id: 'go', name: 'Go', count: stats.totalGo },
|
|
{ id: 'nodejs', name: 'Node.js', count: stats.totalNode },
|
|
{ id: 'unity', name: 'Unity', count: stats.totalUnity },
|
|
{ id: 'csharp', name: 'C#', count: stats.totalCsharp },
|
|
]
|
|
|
|
const filteredComponents = getFilteredComponents()
|
|
|
|
return (
|
|
<div>
|
|
<PagePurpose
|
|
title="SBOM"
|
|
purpose="Software Bill of Materials - Alle Komponenten & Abhaengigkeiten der Breakpilot Lehrer-Plattform. Wichtig fuer Supply-Chain-Security, Compliance-Audits und Lizenz-Pruefung."
|
|
audience={['DevOps', 'Compliance', 'Security', 'Auditoren']}
|
|
gdprArticles={['Art. 32 (Sicherheit der Verarbeitung)']}
|
|
architecture={{
|
|
services: ['Syft (SBOM Generator)', 'Trivy (CVE Scanner)'],
|
|
databases: ['CycloneDX JSON'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'Security', href: '/infrastructure/security', description: 'DevSecOps Dashboard' },
|
|
{ name: 'Controls', href: '/sdk/controls', description: 'Security Controls' },
|
|
]}
|
|
collapsible={true}
|
|
defaultCollapsed={true}
|
|
/>
|
|
|
|
{/* DevOps Pipeline Sidebar */}
|
|
<DevOpsPipelineSidebarResponsive currentTool="sbom" />
|
|
|
|
{/* Wizard Link */}
|
|
<div className="mb-6 flex justify-end">
|
|
<Link
|
|
href="/infrastructure/sbom/wizard"
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg font-medium bg-purple-100 text-purple-700 border border-purple-200 hover:bg-purple-200 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
Lern-Wizard
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-6">
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-slate-800">{stats.totalAll}</div>
|
|
<div className="text-sm text-slate-500">Komponenten Total</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-purple-600">{stats.totalInfra}</div>
|
|
<div className="text-sm text-slate-500">Docker Services</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-red-600">{stats.totalSecurityTools}</div>
|
|
<div className="text-sm text-slate-500">Security Tools</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-emerald-600">{stats.totalPython}</div>
|
|
<div className="text-sm text-slate-500">Python</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-sky-600">{stats.totalGo}</div>
|
|
<div className="text-sm text-slate-500">Go</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-lime-600">{stats.totalNode}</div>
|
|
<div className="text-sm text-slate-500">Node.js</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-amber-600">{stats.totalUnity}</div>
|
|
<div className="text-sm text-slate-500">Unity</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-fuchsia-600">{stats.totalCsharp}</div>
|
|
<div className="text-sm text-slate-500">C#</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-blue-600">{stats.databases}</div>
|
|
<div className="text-sm text-slate-500">Datenbanken</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-rose-600">{stats.game}</div>
|
|
<div className="text-sm text-slate-500">Game</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
|
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
|
{/* Category Tabs */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{categories.map((cat) => (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => setActiveCategory(cat.id as CategoryType)}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
activeCategory === cat.id
|
|
? 'bg-orange-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{cat.name} ({cat.count})
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative w-full md:w-64">
|
|
<input
|
|
type="text"
|
|
placeholder="Suchen..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
|
/>
|
|
<svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SBOM Metadata */}
|
|
{sbomData?.metadata && (
|
|
<div className="bg-slate-50 rounded-lg p-4 mb-6 text-sm">
|
|
<div className="flex flex-wrap gap-6">
|
|
<div>
|
|
<span className="text-slate-500">Format:</span>
|
|
<span className="ml-2 font-medium">{sbomData.bomFormat} {sbomData.specVersion}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">Generiert:</span>
|
|
<span className="ml-2 font-medium">
|
|
{sbomData.metadata.timestamp ? new Date(sbomData.metadata.timestamp).toLocaleString('de-DE') : '-'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">Anwendung:</span>
|
|
<span className="ml-2 font-medium">
|
|
{sbomData.metadata.component?.name} v{sbomData.metadata.component?.version}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Components Table */}
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
|
|
<span className="ml-3 text-gray-600">Lade SBOM...</span>
|
|
</div>
|
|
) : (
|
|
<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 min-w-[300px]">Verwendungszweck</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">
|
|
{filteredComponents.map((component, idx) => {
|
|
// Get license from either the new license field or the old licenses array
|
|
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 className="text-sm font-medium text-gray-900">{component.name}</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">
|
|
{component.description ? (
|
|
<div className="text-sm text-gray-600 leading-relaxed">{component.description}</div>
|
|
) : (
|
|
<span className="text-sm text-gray-400 italic">Keine Beschreibung</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-orange-600 hover:text-orange-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>
|
|
|
|
{filteredComponents.length === 0 && (
|
|
<div className="p-8 text-center text-gray-500">
|
|
Keine Komponenten gefunden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Export Button */}
|
|
<div className="mt-6 flex justify-end">
|
|
<button
|
|
onClick={() => {
|
|
const data = JSON.stringify({
|
|
...sbomData,
|
|
infrastructure: INFRASTRUCTURE_COMPONENTS
|
|
}, null, 2)
|
|
const blob = new Blob([data], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `breakpilot-lehrer-sbom-${new Date().toISOString().split('T')[0]}.json`
|
|
a.click()
|
|
}}
|
|
className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
SBOM exportieren (JSON)
|
|
</button>
|
|
</div>
|
|
|
|
{/* Info Tabs Section */}
|
|
<div className="mt-8">
|
|
<div className="bg-white rounded-lg shadow">
|
|
{/* Tab Headers */}
|
|
<div className="border-b border-gray-200">
|
|
<nav className="flex -mb-px">
|
|
<button
|
|
onClick={() => setActiveInfoTab('audit')}
|
|
className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
|
|
activeInfoTab === 'audit'
|
|
? 'border-orange-500 text-orange-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Audit
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveInfoTab('documentation')}
|
|
className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
|
|
activeInfoTab === 'documentation'
|
|
? 'border-orange-500 text-orange-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Dokumentation
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="p-6">
|
|
{/* Audit Tab */}
|
|
{activeInfoTab === 'audit' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* SBOM Status */}
|
|
<div className="bg-slate-50 rounded-lg p-4">
|
|
<h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
SBOM Status
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Letzte Generierung</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">CI/CD</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Format</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">CycloneDX 1.5</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Komponenten</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">Alle erfasst</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Transitive Deps</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">Inkludiert</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* License Compliance */}
|
|
<div className="bg-slate-50 rounded-lg p-4">
|
|
<h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
|
</svg>
|
|
License Compliance
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Erlaubte Lizenzen</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">MIT, Apache, BSD</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Copyleft (GPL)</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">0</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Unbekannte Lizenzen</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<span className="text-sm font-medium">0</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-slate-600">Kommerzielle</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-yellow-500"></span>
|
|
<span className="text-sm font-medium">Review erforderlich</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Documentation Tab */}
|
|
{activeInfoTab === 'documentation' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-800">SBOM Dokumentation</h3>
|
|
<button
|
|
onClick={() => setShowFullDocs(!showFullDocs)}
|
|
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
{showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
|
|
</button>
|
|
</div>
|
|
|
|
{!showFullDocs ? (
|
|
<div className="prose prose-slate max-w-none">
|
|
<p className="text-slate-600">
|
|
Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten.
|
|
Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
|
<div className="bg-blue-50 p-4 rounded-lg">
|
|
<h4 className="font-medium text-blue-800 mb-2">Generator</h4>
|
|
<p className="text-sm text-blue-600">Syft (Primary), Trivy (Validation)</p>
|
|
</div>
|
|
<div className="bg-purple-50 p-4 rounded-lg">
|
|
<h4 className="font-medium text-purple-800 mb-2">Format</h4>
|
|
<p className="text-sm text-purple-600">CycloneDX 1.5, SPDX</p>
|
|
</div>
|
|
<div className="bg-green-50 p-4 rounded-lg">
|
|
<h4 className="font-medium text-green-800 mb-2">Retention</h4>
|
|
<p className="text-sm text-green-600">5 Jahre (Compliance)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="prose prose-slate max-w-none bg-slate-50 p-6 rounded-lg overflow-auto max-h-[600px]">
|
|
<h2>Software Bill of Materials (SBOM)</h2>
|
|
|
|
<h3>1. Uebersicht</h3>
|
|
<p>Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten. Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.</p>
|
|
|
|
<h3>2. SBOM-Generierung</h3>
|
|
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
|
{`Source Code
|
|
│
|
|
v
|
|
┌───────────────────────────────────────────────────────────────┐
|
|
│ SBOM Generators │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
|
│ │ Syft │ │ Trivy │ │ Native Tooling │ │
|
|
│ │ (Primary) │ │ (Validation)│ │ (npm, go mod, pip) │ │
|
|
│ └──────┬──────┘ └──────┬──────┘ └──────────┬──────────┘ │
|
|
└─────────┼────────────────┼────────────────────┼───────────────┘
|
|
│ │ │
|
|
└────────────────┴────────────────────┘
|
|
│
|
|
v
|
|
┌────────────────┐
|
|
│ CycloneDX │
|
|
│ Format │
|
|
└────────────────┘`}
|
|
</pre>
|
|
|
|
<h3>3. Erfasste Komponenten</h3>
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-left">Typ</th>
|
|
<th className="text-left">Quelle</th>
|
|
<th className="text-left">Beispiele</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>npm packages</td><td>package-lock.json</td><td>react, next, tailwindcss</td></tr>
|
|
<tr><td>Go modules</td><td>go.sum</td><td>gin, gorm, jwt-go</td></tr>
|
|
<tr><td>Python packages</td><td>requirements.txt</td><td>fastapi, pydantic, httpx</td></tr>
|
|
<tr><td>Container Images</td><td>Dockerfile</td><td>node:20-alpine, postgres:16</td></tr>
|
|
<tr><td>OS Packages</td><td>apk, apt</td><td>openssl, libpq</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>4. License Compliance</h3>
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-left">Kategorie</th>
|
|
<th className="text-left">Lizenzen</th>
|
|
<th className="text-left">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Permissive (erlaubt)</td><td>MIT, Apache 2.0, BSD, ISC</td><td className="text-green-600">OK</td></tr>
|
|
<tr><td>Weak Copyleft</td><td>LGPL, MPL</td><td className="text-yellow-600">Review</td></tr>
|
|
<tr><td>Strong Copyleft</td><td>GPL, AGPL</td><td className="text-red-600">Nicht erlaubt</td></tr>
|
|
<tr><td>Proprietaer</td><td>Commercial</td><td className="text-yellow-600">Genehmigung</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>5. Aufbewahrung & Compliance</h3>
|
|
<ul>
|
|
<li><strong>Retention:</strong> 5 Jahre (Compliance)</li>
|
|
<li><strong>Format:</strong> JSON + PDF Report</li>
|
|
<li><strong>Signierung:</strong> Digital signiert</li>
|
|
<li><strong>Audit:</strong> Jederzeit abrufbar</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|