5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1636 lines
89 KiB
TypeScript
1636 lines
89 KiB
TypeScript
'use client'
|
||
|
||
/**
|
||
* CI/CD Dashboard
|
||
*
|
||
* Zentrale Uebersicht fuer:
|
||
* - Gitea Actions Pipelines
|
||
* - Runner Status
|
||
* - Container Deployments
|
||
* - Pipeline Konfiguration
|
||
*/
|
||
|
||
import { useState, useEffect, useCallback } from 'react'
|
||
import { PagePurpose } from '@/components/common/PagePurpose'
|
||
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
|
||
|
||
// ============================================================================
|
||
// Types
|
||
// ============================================================================
|
||
|
||
interface PipelineStatus {
|
||
gitea_connected: boolean
|
||
gitea_url: string
|
||
last_sbom_update: string | null
|
||
total_runs: number
|
||
successful_runs: number
|
||
failed_runs: number
|
||
}
|
||
|
||
interface PipelineRun {
|
||
id: string
|
||
workflow: string
|
||
branch: string
|
||
commit_sha: string
|
||
status: 'success' | 'failed' | 'running' | 'pending'
|
||
started_at: string
|
||
finished_at: string | null
|
||
duration_seconds: number | null
|
||
}
|
||
|
||
interface ContainerInfo {
|
||
id: string
|
||
name: string
|
||
image: string
|
||
status: string
|
||
state: string
|
||
created: string
|
||
ports: string[]
|
||
cpu_percent: number
|
||
memory_usage: string
|
||
memory_limit: string
|
||
memory_percent: number
|
||
network_rx: string
|
||
network_tx: string
|
||
}
|
||
|
||
interface SystemStats {
|
||
hostname: string
|
||
platform: string
|
||
arch: string
|
||
uptime: number
|
||
cpu: {
|
||
model: string
|
||
cores: number
|
||
usage_percent: number
|
||
}
|
||
memory: {
|
||
total: string
|
||
used: string
|
||
free: string
|
||
usage_percent: number
|
||
}
|
||
disk: {
|
||
total: string
|
||
used: string
|
||
free: string
|
||
usage_percent: number
|
||
}
|
||
}
|
||
|
||
interface DockerStats {
|
||
containers: ContainerInfo[]
|
||
total_containers: number
|
||
running_containers: number
|
||
stopped_containers: number
|
||
}
|
||
|
||
type TabType = 'overview' | 'woodpecker' | 'pipelines' | 'deployments' | 'setup' | 'scheduler'
|
||
|
||
// Woodpecker Types
|
||
interface WoodpeckerStep {
|
||
name: string
|
||
state: 'pending' | 'running' | 'success' | 'failure' | 'skipped'
|
||
exit_code: number
|
||
error?: string
|
||
}
|
||
|
||
interface WoodpeckerPipeline {
|
||
id: number
|
||
number: number
|
||
status: 'pending' | 'running' | 'success' | 'failure' | 'error'
|
||
event: string
|
||
branch: string
|
||
commit: string
|
||
message: string
|
||
author: string
|
||
created: number
|
||
started: number
|
||
finished: number
|
||
steps: WoodpeckerStep[]
|
||
errors?: string[]
|
||
}
|
||
|
||
interface WoodpeckerStatus {
|
||
status: 'online' | 'offline'
|
||
pipelines: WoodpeckerPipeline[]
|
||
lastUpdate: string
|
||
error?: string
|
||
}
|
||
|
||
// ============================================================================
|
||
// Helper Components
|
||
// ============================================================================
|
||
|
||
function ProgressBar({ percent, color = 'blue' }: { percent: number; color?: string }) {
|
||
const getColor = () => {
|
||
if (percent > 90) return 'bg-red-500'
|
||
if (percent > 70) return 'bg-yellow-500'
|
||
if (color === 'green') return 'bg-green-500'
|
||
if (color === 'purple') return 'bg-purple-500'
|
||
return 'bg-blue-500'
|
||
}
|
||
|
||
return (
|
||
<div className="w-full bg-slate-200 rounded-full h-2">
|
||
<div
|
||
className={`h-2 rounded-full transition-all duration-300 ${getColor()}`}
|
||
style={{ width: `${Math.min(percent, 100)}%` }}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function formatUptime(seconds: number): string {
|
||
const days = Math.floor(seconds / 86400)
|
||
const hours = Math.floor((seconds % 86400) / 3600)
|
||
const minutes = Math.floor((seconds % 3600) / 60)
|
||
if (days > 0) return `${days}d ${hours}h ${minutes}m`
|
||
if (hours > 0) return `${hours}h ${minutes}m`
|
||
return `${minutes}m`
|
||
}
|
||
|
||
// ============================================================================
|
||
// Main Component
|
||
// ============================================================================
|
||
|
||
export default function CICDPage() {
|
||
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
||
|
||
// Pipeline State
|
||
const [pipelineStatus, setPipelineStatus] = useState<PipelineStatus | null>(null)
|
||
const [pipelineHistory, setPipelineHistory] = useState<PipelineRun[]>([])
|
||
const [triggeringPipeline, setTriggeringPipeline] = useState(false)
|
||
|
||
// Container State
|
||
const [systemStats, setSystemStats] = useState<SystemStats | null>(null)
|
||
const [dockerStats, setDockerStats] = useState<DockerStats | null>(null)
|
||
const [containerFilter, setContainerFilter] = useState<'all' | 'running' | 'stopped'>('all')
|
||
const [actionLoading, setActionLoading] = useState<string | null>(null)
|
||
|
||
// Woodpecker State
|
||
const [woodpeckerStatus, setWoodpeckerStatus] = useState<WoodpeckerStatus | null>(null)
|
||
const [triggeringWoodpecker, setTriggeringWoodpecker] = useState(false)
|
||
|
||
// General State
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [message, setMessage] = useState<string | null>(null)
|
||
|
||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || ''
|
||
|
||
// ============================================================================
|
||
// Data Loading
|
||
// ============================================================================
|
||
|
||
const loadPipelineData = useCallback(async () => {
|
||
try {
|
||
const [statusRes, historyRes] = await Promise.all([
|
||
fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/status`),
|
||
fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/history`),
|
||
])
|
||
|
||
if (statusRes.ok) {
|
||
setPipelineStatus(await statusRes.json())
|
||
}
|
||
if (historyRes.ok) {
|
||
setPipelineHistory(await historyRes.json())
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to load pipeline data:', err)
|
||
}
|
||
}, [BACKEND_URL])
|
||
|
||
const loadContainerData = useCallback(async () => {
|
||
try {
|
||
const response = await fetch('/api/admin/infrastructure/mac-mini')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setSystemStats(data.system)
|
||
setDockerStats(data.docker)
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to load container data:', err)
|
||
}
|
||
}, [])
|
||
|
||
const loadWoodpeckerData = useCallback(async () => {
|
||
try {
|
||
const response = await fetch('/api/admin/infrastructure/woodpecker?limit=10')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setWoodpeckerStatus(data)
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to load Woodpecker data:', err)
|
||
setWoodpeckerStatus({
|
||
status: 'offline',
|
||
pipelines: [],
|
||
lastUpdate: new Date().toISOString(),
|
||
error: 'Verbindung fehlgeschlagen'
|
||
})
|
||
}
|
||
}, [])
|
||
|
||
const triggerWoodpeckerPipeline = async () => {
|
||
setTriggeringWoodpecker(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/admin/infrastructure/woodpecker', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ branch: 'main' })
|
||
})
|
||
if (response.ok) {
|
||
const result = await response.json()
|
||
setMessage(`Woodpecker Pipeline #${result.pipeline?.number || '?'} gestartet!`)
|
||
setTimeout(loadWoodpeckerData, 2000)
|
||
setTimeout(loadWoodpeckerData, 5000)
|
||
} else {
|
||
setError('Pipeline-Start fehlgeschlagen')
|
||
}
|
||
} catch (err) {
|
||
setError('Pipeline konnte nicht gestartet werden')
|
||
} finally {
|
||
setTriggeringWoodpecker(false)
|
||
}
|
||
}
|
||
|
||
const loadAllData = useCallback(async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
await Promise.all([loadPipelineData(), loadContainerData(), loadWoodpeckerData()])
|
||
setLoading(false)
|
||
}, [loadPipelineData, loadContainerData, loadWoodpeckerData])
|
||
|
||
useEffect(() => {
|
||
loadAllData()
|
||
}, [loadAllData])
|
||
|
||
// Auto-refresh every 30 seconds
|
||
useEffect(() => {
|
||
const interval = setInterval(loadAllData, 30000)
|
||
return () => clearInterval(interval)
|
||
}, [loadAllData])
|
||
|
||
// ============================================================================
|
||
// Actions
|
||
// ============================================================================
|
||
|
||
const triggerPipeline = async () => {
|
||
setTriggeringPipeline(true)
|
||
try {
|
||
const response = await fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/trigger`, {
|
||
method: 'POST',
|
||
})
|
||
if (response.ok) {
|
||
setMessage('Pipeline gestartet!')
|
||
setTimeout(loadPipelineData, 2000)
|
||
setTimeout(loadPipelineData, 5000)
|
||
}
|
||
} catch (err) {
|
||
setError('Pipeline-Trigger fehlgeschlagen')
|
||
} finally {
|
||
setTriggeringPipeline(false)
|
||
}
|
||
}
|
||
|
||
const containerAction = async (containerId: string, action: 'start' | 'stop' | 'restart') => {
|
||
setActionLoading(`${containerId}-${action}`)
|
||
setMessage(null)
|
||
|
||
try {
|
||
const response = await fetch('/api/admin/infrastructure/mac-mini', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ container_id: containerId, action }),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Aktion fehlgeschlagen')
|
||
}
|
||
|
||
setMessage(`Container ${action} erfolgreich`)
|
||
setTimeout(loadContainerData, 1000)
|
||
setTimeout(loadContainerData, 3000)
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : 'Fehler')
|
||
} finally {
|
||
setActionLoading(null)
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// Helpers
|
||
// ============================================================================
|
||
|
||
const getStateColor = (state: string) => {
|
||
switch (state) {
|
||
case 'running': return 'bg-green-100 text-green-800'
|
||
case 'exited':
|
||
case 'dead': return 'bg-red-100 text-red-800'
|
||
case 'paused': return 'bg-yellow-100 text-yellow-800'
|
||
case 'restarting': return 'bg-blue-100 text-blue-800'
|
||
default: return 'bg-slate-100 text-slate-600'
|
||
}
|
||
}
|
||
|
||
const filteredContainers = dockerStats?.containers.filter(c => {
|
||
if (containerFilter === 'all') return true
|
||
if (containerFilter === 'running') return c.state === 'running'
|
||
if (containerFilter === 'stopped') return c.state !== 'running'
|
||
return true
|
||
}) || []
|
||
|
||
// ============================================================================
|
||
// Render
|
||
// ============================================================================
|
||
|
||
return (
|
||
<div>
|
||
<PagePurpose
|
||
title="CI/CD Dashboard"
|
||
purpose="Zentrale Uebersicht fuer Gitea Actions Pipelines, Runner-Status und Container-Deployments. Starten Sie Pipelines manuell und verwalten Sie Docker-Container."
|
||
audience={['DevOps', 'Entwickler']}
|
||
architecture={{
|
||
services: ['Gitea Actions', 'act_runner', 'Docker'],
|
||
databases: [],
|
||
}}
|
||
relatedPages={[
|
||
{ name: 'SBOM', href: '/infrastructure/sbom', description: 'Software Bill of Materials' },
|
||
{ name: 'Security', href: '/infrastructure/security', description: 'DevSecOps Dashboard' },
|
||
{ name: 'Test Quality', href: '/ai/test-quality', description: 'BQAS Test Dashboard' },
|
||
]}
|
||
collapsible={true}
|
||
defaultCollapsed={true}
|
||
/>
|
||
|
||
{/* DevOps Pipeline Sidebar */}
|
||
<DevOpsPipelineSidebarResponsive currentTool="ci-cd" />
|
||
|
||
{/* Messages */}
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
|
||
<div className="flex items-center gap-2 text-red-800">
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span className="font-medium">{error}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{message && (
|
||
<div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
|
||
<div className="flex items-center gap-2 text-green-800">
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className="font-medium">{message}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Main Content */}
|
||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
{/* Tabs */}
|
||
<div className="flex border-b border-slate-200">
|
||
<nav className="flex">
|
||
{[
|
||
{ id: 'overview', name: 'Uebersicht', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
</svg>
|
||
)},
|
||
{ id: 'woodpecker', name: 'Woodpecker CI', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
)},
|
||
{ id: 'pipelines', name: 'Gitea Pipelines', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||
</svg>
|
||
)},
|
||
{ id: 'deployments', name: 'Deployments', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
|
||
</svg>
|
||
)},
|
||
{ id: 'setup', name: 'Konfiguration', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
)},
|
||
{ id: 'scheduler', name: 'BQAS Scheduler', icon: (
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
)},
|
||
].map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id as TabType)}
|
||
className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
||
activeTab === tab.id
|
||
? 'border-orange-500 text-orange-600'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
{tab.icon}
|
||
{tab.name}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="p-6">
|
||
{loading ? (
|
||
<div className="flex justify-center py-12">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* ================================================================ */}
|
||
{/* Overview Tab */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'overview' && (
|
||
<div className="space-y-6">
|
||
{/* Woodpecker CI Status - Prominent */}
|
||
<div className={`p-4 rounded-xl border-2 ${
|
||
woodpeckerStatus?.status === 'online'
|
||
? woodpeckerStatus.pipelines?.[0]?.status === 'success'
|
||
? 'border-green-300 bg-green-50'
|
||
: woodpeckerStatus.pipelines?.[0]?.status === 'failure' || woodpeckerStatus.pipelines?.[0]?.status === 'error'
|
||
? 'border-red-300 bg-red-50'
|
||
: woodpeckerStatus.pipelines?.[0]?.status === 'running'
|
||
? 'border-blue-300 bg-blue-50'
|
||
: 'border-slate-300 bg-slate-50'
|
||
: 'border-red-300 bg-red-50'
|
||
}`}>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className={`p-3 rounded-lg ${
|
||
woodpeckerStatus?.status === 'online'
|
||
? woodpeckerStatus.pipelines?.[0]?.status === 'success'
|
||
? 'bg-green-100'
|
||
: woodpeckerStatus.pipelines?.[0]?.status === 'failure' || woodpeckerStatus.pipelines?.[0]?.status === 'error'
|
||
? 'bg-red-100'
|
||
: 'bg-blue-100'
|
||
: 'bg-red-100'
|
||
}`}>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="font-semibold text-slate-900">Woodpecker CI</h3>
|
||
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||
woodpeckerStatus?.status === 'online' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
||
}`}>
|
||
{woodpeckerStatus?.status === 'online' ? 'Online' : 'Offline'}
|
||
</span>
|
||
</div>
|
||
{woodpeckerStatus?.pipelines?.[0] && (
|
||
<p className="text-sm text-slate-600 mt-1">
|
||
Pipeline #{woodpeckerStatus.pipelines[0].number}: {' '}
|
||
<span className={`font-medium ${
|
||
woodpeckerStatus.pipelines[0].status === 'success' ? 'text-green-600' :
|
||
woodpeckerStatus.pipelines[0].status === 'failure' || woodpeckerStatus.pipelines[0].status === 'error' ? 'text-red-600' :
|
||
woodpeckerStatus.pipelines[0].status === 'running' ? 'text-blue-600' : 'text-slate-600'
|
||
}`}>
|
||
{woodpeckerStatus.pipelines[0].status}
|
||
</span>
|
||
{' '}auf {woodpeckerStatus.pipelines[0].branch}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setActiveTab('woodpecker')}
|
||
className="px-3 py-1.5 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-white"
|
||
>
|
||
Details
|
||
</button>
|
||
<button
|
||
onClick={triggerWoodpeckerPipeline}
|
||
disabled={triggeringWoodpecker}
|
||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
|
||
>
|
||
{triggeringWoodpecker ? (
|
||
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white" />
|
||
) : (
|
||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||
</svg>
|
||
)}
|
||
Starten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/* Failed steps preview */}
|
||
{woodpeckerStatus?.pipelines?.[0]?.steps?.some(s => s.state === 'failure') && (
|
||
<div className="mt-3 pt-3 border-t border-red-200">
|
||
<p className="text-xs font-medium text-red-700 mb-2">Fehlgeschlagene Steps:</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{woodpeckerStatus.pipelines[0].steps.filter(s => s.state === 'failure').map((step, i) => (
|
||
<span key={i} className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">
|
||
{step.name}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Status Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className={`p-4 rounded-lg ${pipelineStatus?.gitea_connected ? 'bg-green-50' : 'bg-yellow-50'}`}>
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className={`w-3 h-3 rounded-full ${pipelineStatus?.gitea_connected ? 'bg-green-500' : 'bg-yellow-500'}`}></span>
|
||
<span className="text-sm font-medium">Gitea Status</span>
|
||
</div>
|
||
<p className={`text-lg font-bold ${pipelineStatus?.gitea_connected ? 'text-green-700' : 'text-yellow-700'}`}>
|
||
{pipelineStatus?.gitea_connected ? 'Verbunden' : 'Nicht verbunden'}
|
||
</p>
|
||
<p className="text-xs text-slate-500">http://macmini:3003</p>
|
||
</div>
|
||
|
||
<div className="bg-blue-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 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>
|
||
<span className="text-sm font-medium">Pipeline Runs</span>
|
||
</div>
|
||
<p className="text-lg font-bold text-blue-700">{pipelineStatus?.total_runs || 0}</p>
|
||
<p className="text-xs text-slate-500">{pipelineStatus?.successful_runs || 0} erfolgreich</p>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
|
||
</svg>
|
||
<span className="text-sm font-medium">Container</span>
|
||
</div>
|
||
<p className="text-lg font-bold text-purple-700">{dockerStats?.running_containers || 0}</p>
|
||
<p className="text-xs text-slate-500">von {dockerStats?.total_containers || 0} laufend</p>
|
||
</div>
|
||
|
||
<div className="bg-slate-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span className="text-sm font-medium">Letztes Update</span>
|
||
</div>
|
||
<p className="text-lg font-bold text-slate-700">
|
||
{pipelineStatus?.last_sbom_update ? new Date(pipelineStatus.last_sbom_update).toLocaleDateString('de-DE') : 'Nie'}
|
||
</p>
|
||
<p className="text-xs text-slate-500">
|
||
{pipelineStatus?.last_sbom_update ? new Date(pipelineStatus.last_sbom_update).toLocaleTimeString('de-DE') : '-'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* System Resources */}
|
||
{systemStats && (
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h3 className="font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||
<svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||
</svg>
|
||
Server Ressourcen ({systemStats.hostname})
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-white rounded-lg p-3">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-600">CPU</span>
|
||
<span className={`font-bold ${systemStats.cpu.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
|
||
{systemStats.cpu.usage_percent.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
<ProgressBar percent={systemStats.cpu.usage_percent} />
|
||
</div>
|
||
<div className="bg-white rounded-lg p-3">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-600">RAM</span>
|
||
<span className={`font-bold ${systemStats.memory.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
|
||
{systemStats.memory.usage_percent.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
<ProgressBar percent={systemStats.memory.usage_percent} color="purple" />
|
||
</div>
|
||
<div className="bg-white rounded-lg p-3">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-600">Disk</span>
|
||
<span className={`font-bold ${systemStats.disk.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
|
||
{systemStats.disk.usage_percent.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
<ProgressBar percent={systemStats.disk.usage_percent} color="green" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Recent Pipeline Runs */}
|
||
{pipelineHistory.length > 0 && (
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h3 className="font-medium text-slate-800 mb-3">Letzte Pipeline Runs</h3>
|
||
<div className="space-y-2">
|
||
{pipelineHistory.slice(0, 5).map((run) => (
|
||
<div key={run.id} className="flex items-center justify-between bg-white p-3 rounded-lg">
|
||
<div className="flex items-center gap-3">
|
||
<span className={`w-2 h-2 rounded-full ${
|
||
run.status === 'success' ? 'bg-green-500' :
|
||
run.status === 'failed' ? 'bg-red-500' :
|
||
run.status === 'running' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-400'
|
||
}`}></span>
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">{run.workflow || 'SBOM Pipeline'}</p>
|
||
<p className="text-xs text-slate-500">{run.branch} - {run.commit_sha.substring(0, 8)}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className={`text-sm font-medium ${
|
||
run.status === 'success' ? 'text-green-600' :
|
||
run.status === 'failed' ? 'text-red-600' :
|
||
run.status === 'running' ? 'text-yellow-600' : 'text-slate-600'
|
||
}`}>
|
||
{run.status === 'success' ? 'Erfolgreich' :
|
||
run.status === 'failed' ? 'Fehlgeschlagen' :
|
||
run.status === 'running' ? 'Laeuft...' : run.status}
|
||
</p>
|
||
<p className="text-xs text-slate-500">
|
||
{new Date(run.started_at).toLocaleString('de-DE')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================ */}
|
||
{/* Woodpecker Tab */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'woodpecker' && (
|
||
<div className="space-y-6">
|
||
{/* Woodpecker Status Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<h3 className="text-lg font-semibold text-slate-800">Woodpecker CI Pipeline</h3>
|
||
<span className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${
|
||
woodpeckerStatus?.status === 'online'
|
||
? 'bg-green-100 text-green-800'
|
||
: 'bg-red-100 text-red-800'
|
||
}`}>
|
||
<span className={`w-2 h-2 rounded-full ${
|
||
woodpeckerStatus?.status === 'online' ? 'bg-green-500' : 'bg-red-500'
|
||
}`} />
|
||
{woodpeckerStatus?.status === 'online' ? 'Online' : 'Offline'}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<a
|
||
href="http://macmini:8090"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="px-3 py-2 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 flex items-center gap-2"
|
||
>
|
||
<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>
|
||
Woodpecker UI
|
||
</a>
|
||
<button
|
||
onClick={triggerWoodpeckerPipeline}
|
||
disabled={triggeringWoodpecker}
|
||
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors flex items-center gap-2"
|
||
>
|
||
{triggeringWoodpecker ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
|
||
Startet...
|
||
</>
|
||
) : (
|
||
<>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Pipeline starten
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pipeline Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className="bg-blue-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 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>
|
||
<span className="text-sm font-medium">Gesamt</span>
|
||
</div>
|
||
<p className="text-2xl font-bold text-blue-700">{woodpeckerStatus?.pipelines?.length || 0}</p>
|
||
</div>
|
||
<div className="bg-green-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className="text-sm font-medium">Erfolgreich</span>
|
||
</div>
|
||
<p className="text-2xl font-bold text-green-700">
|
||
{woodpeckerStatus?.pipelines?.filter(p => p.status === 'success').length || 0}
|
||
</p>
|
||
</div>
|
||
<div className="bg-red-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
<span className="text-sm font-medium">Fehlgeschlagen</span>
|
||
</div>
|
||
<p className="text-2xl font-bold text-red-700">
|
||
{woodpeckerStatus?.pipelines?.filter(p => p.status === 'failure' || p.status === 'error').length || 0}
|
||
</p>
|
||
</div>
|
||
<div className="bg-yellow-50 p-4 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span className="text-sm font-medium">Laufend</span>
|
||
</div>
|
||
<p className="text-2xl font-bold text-yellow-700">
|
||
{woodpeckerStatus?.pipelines?.filter(p => p.status === 'running' || p.status === 'pending').length || 0}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pipeline List */}
|
||
{woodpeckerStatus?.pipelines && woodpeckerStatus.pipelines.length > 0 ? (
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h4 className="font-medium text-slate-800 mb-4">Pipeline Historie</h4>
|
||
<div className="space-y-3">
|
||
{woodpeckerStatus.pipelines.map((pipeline) => (
|
||
<div
|
||
key={pipeline.id}
|
||
className={`border rounded-xl p-4 transition-colors ${
|
||
pipeline.status === 'success'
|
||
? 'border-green-200 bg-green-50/30'
|
||
: pipeline.status === 'failure' || pipeline.status === 'error'
|
||
? 'border-red-200 bg-red-50/30'
|
||
: pipeline.status === 'running'
|
||
? 'border-blue-200 bg-blue-50/30'
|
||
: 'border-slate-200 bg-white'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className={`w-3 h-3 rounded-full ${
|
||
pipeline.status === 'success' ? 'bg-green-500' :
|
||
pipeline.status === 'failure' || pipeline.status === 'error' ? 'bg-red-500' :
|
||
pipeline.status === 'running' ? 'bg-blue-500 animate-pulse' : 'bg-slate-400'
|
||
}`} />
|
||
<span className="font-semibold text-slate-900">Pipeline #{pipeline.number}</span>
|
||
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${
|
||
pipeline.status === 'success' ? 'bg-green-100 text-green-800' :
|
||
pipeline.status === 'failure' || pipeline.status === 'error' ? 'bg-red-100 text-red-800' :
|
||
pipeline.status === 'running' ? 'bg-blue-100 text-blue-800' :
|
||
'bg-slate-100 text-slate-600'
|
||
}`}>
|
||
{pipeline.status}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm text-slate-600 mb-2">
|
||
<span className="font-mono">{pipeline.branch}</span>
|
||
<span className="mx-2 text-slate-400">•</span>
|
||
<span className="font-mono text-slate-500">{pipeline.commit}</span>
|
||
<span className="mx-2 text-slate-400">•</span>
|
||
<span>{pipeline.event}</span>
|
||
</div>
|
||
{pipeline.message && (
|
||
<p className="text-sm text-slate-500 mb-2 truncate max-w-xl">{pipeline.message}</p>
|
||
)}
|
||
|
||
{/* Steps Progress */}
|
||
{pipeline.steps && pipeline.steps.length > 0 && (
|
||
<div className="mt-3">
|
||
<div className="flex gap-1 mb-2">
|
||
{pipeline.steps.map((step, i) => (
|
||
<div
|
||
key={i}
|
||
className={`h-2 flex-1 rounded-full ${
|
||
step.state === 'success' ? 'bg-green-500' :
|
||
step.state === 'failure' ? 'bg-red-500' :
|
||
step.state === 'running' ? 'bg-blue-500 animate-pulse' :
|
||
step.state === 'skipped' ? 'bg-slate-200' : 'bg-slate-300'
|
||
}`}
|
||
title={`${step.name}: ${step.state}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 text-xs">
|
||
{pipeline.steps.map((step, i) => (
|
||
<span
|
||
key={i}
|
||
className={`px-2 py-1 rounded ${
|
||
step.state === 'success' ? 'bg-green-100 text-green-700' :
|
||
step.state === 'failure' ? 'bg-red-100 text-red-700' :
|
||
step.state === 'running' ? 'bg-blue-100 text-blue-700' :
|
||
'bg-slate-100 text-slate-600'
|
||
}`}
|
||
>
|
||
{step.name}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Errors */}
|
||
{pipeline.errors && pipeline.errors.length > 0 && (
|
||
<div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
|
||
<h5 className="text-sm font-medium text-red-800 mb-1">Fehler:</h5>
|
||
<ul className="text-xs text-red-700 space-y-1">
|
||
{pipeline.errors.map((err, i) => (
|
||
<li key={i} className="font-mono">{err}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-right text-sm text-slate-500">
|
||
<p>{new Date(pipeline.created * 1000).toLocaleDateString('de-DE')}</p>
|
||
<p className="text-xs">{new Date(pipeline.created * 1000).toLocaleTimeString('de-DE')}</p>
|
||
{pipeline.started && pipeline.finished && (
|
||
<p className="text-xs mt-1">
|
||
Dauer: {Math.round((pipeline.finished - pipeline.started) / 60)}m
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="bg-slate-50 rounded-lg p-8 text-center">
|
||
<svg className="w-12 h-12 text-slate-300 mx-auto mb-3" 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>
|
||
<p className="text-slate-500">Keine Pipelines gefunden</p>
|
||
<p className="text-sm text-slate-400 mt-1">Starte eine neue Pipeline oder pruefe die Woodpecker-Konfiguration</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Pipeline Configuration Info */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h4 className="font-medium text-slate-800 mb-3">Pipeline Konfiguration</h4>
|
||
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
||
{`Woodpecker CI Pipeline (.woodpecker/main.yml)
|
||
│
|
||
├── 1. go-lint → Go Linting (PR only)
|
||
├── 2. python-lint → Python Linting (PR only)
|
||
├── 3. secrets-scan → GitLeaks Secrets Scan
|
||
│
|
||
├── 4. test-go-consent → Go Unit Tests
|
||
├── 5. test-go-billing → Billing Service Tests
|
||
├── 6. test-go-school → School Service Tests
|
||
├── 7. test-python → Python Backend Tests
|
||
│
|
||
├── 8. build-images → Docker Image Build
|
||
├── 9. generate-sbom → SBOM Generation (Syft)
|
||
├── 10. vuln-scan → Vulnerability Scan (Grype)
|
||
├── 11. container-scan → Container Scan (Trivy)
|
||
│
|
||
├── 12. sign-images → Cosign Image Signing
|
||
├── 13. attest-sbom → SBOM Attestation
|
||
├── 14. provenance → SLSA Provenance
|
||
│
|
||
└── 15. deploy-prod → Production Deployment`}
|
||
</pre>
|
||
</div>
|
||
|
||
{/* Workflow Anleitung */}
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
<h4 className="font-medium text-blue-800 mb-3 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Workflow-Anleitung
|
||
</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<h5 className="font-medium text-blue-700 mb-2">🤖 Automatisch (bei jedem Push/PR):</h5>
|
||
<ul className="space-y-1 text-blue-600">
|
||
<li>• <strong>Linting</strong> - Code-Qualitaet pruefen (nur PRs)</li>
|
||
<li>• <strong>Unit Tests</strong> - Go & Python Tests</li>
|
||
<li>• <strong>Test-Dashboard</strong> - Ergebnisse werden gesendet</li>
|
||
<li>• <strong>Backlog</strong> - Fehlgeschlagene Tests werden erfasst</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 className="font-medium text-blue-700 mb-2">👆 Manuell (Button oder Tag):</h5>
|
||
<ul className="space-y-1 text-blue-600">
|
||
<li>• <strong>Docker Builds</strong> - Container erstellen</li>
|
||
<li>• <strong>SBOM/Scans</strong> - Sicherheitsanalyse</li>
|
||
<li>• <strong>Deployment</strong> - In Produktion deployen</li>
|
||
<li>• <strong>Pipeline starten</strong> - Diesen Button verwenden</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-blue-200">
|
||
<h5 className="font-medium text-blue-700 mb-2">⚙️ Setup: API Token konfigurieren</h5>
|
||
<p className="text-blue-600 text-sm">
|
||
Um Pipelines ueber das Dashboard zu starten, muss ein <strong>WOODPECKER_TOKEN</strong> konfiguriert werden:
|
||
</p>
|
||
<ol className="mt-2 space-y-1 text-blue-600 text-sm list-decimal list-inside">
|
||
<li>Woodpecker UI oeffnen: <a href="http://macmini:8090" target="_blank" rel="noopener noreferrer" className="underline hover:text-blue-800">http://macmini:8090</a></li>
|
||
<li>Mit Gitea-Account einloggen</li>
|
||
<li>Klick auf Profil → <strong>User Settings</strong> → <strong>Personal Access Tokens</strong></li>
|
||
<li>Neues Token erstellen und in <code className="bg-blue-100 px-1 rounded">.env</code> eintragen: <code className="bg-blue-100 px-1 rounded">WOODPECKER_TOKEN=...</code></li>
|
||
<li>Container neu starten: <code className="bg-blue-100 px-1 rounded">docker compose up -d admin-v2</code></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================ */}
|
||
{/* Pipelines Tab */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'pipelines' && (
|
||
<div className="space-y-6">
|
||
{/* Pipeline Controls */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-800">Gitea Actions Pipelines</h3>
|
||
<p className="text-sm text-slate-600">Workflows werden bei Push auf main/develop automatisch ausgefuehrt</p>
|
||
</div>
|
||
<button
|
||
onClick={triggerPipeline}
|
||
disabled={triggeringPipeline}
|
||
className="px-4 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 transition-colors flex items-center gap-2"
|
||
>
|
||
{triggeringPipeline ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||
Laeuft...
|
||
</>
|
||
) : (
|
||
<>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Pipeline starten
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Available Pipelines */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
||
<span className="font-medium text-green-800">SBOM Pipeline</span>
|
||
</div>
|
||
<p className="text-sm text-green-700 mb-2">Generiert Software Bill of Materials</p>
|
||
<p className="text-xs text-green-600">5 Jobs: generate, scan, license, upload, summary</p>
|
||
</div>
|
||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 opacity-60">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-2 h-2 rounded-full bg-slate-400"></span>
|
||
<span className="font-medium text-slate-600">Test Pipeline</span>
|
||
</div>
|
||
<p className="text-sm text-slate-500 mb-2">Unit & Integration Tests</p>
|
||
<p className="text-xs text-slate-400">Geplant</p>
|
||
</div>
|
||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 opacity-60">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="w-2 h-2 rounded-full bg-slate-400"></span>
|
||
<span className="font-medium text-slate-600">Security Pipeline</span>
|
||
</div>
|
||
<p className="text-sm text-slate-500 mb-2">SAST, SCA, Secrets Scan</p>
|
||
<p className="text-xs text-slate-400">Geplant</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pipeline History */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h4 className="font-medium text-slate-800 mb-4">Pipeline Historie</h4>
|
||
{pipelineHistory.length === 0 ? (
|
||
<div className="text-center py-8 text-slate-500">
|
||
Keine Pipeline-Runs vorhanden. Starten Sie die erste Pipeline!
|
||
</div>
|
||
) : (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead>
|
||
<tr className="border-b border-slate-200">
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Status</th>
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Workflow</th>
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Branch</th>
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Commit</th>
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Gestartet</th>
|
||
<th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Dauer</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{pipelineHistory.map((run) => (
|
||
<tr key={run.id} className="hover:bg-white">
|
||
<td className="py-2 px-3">
|
||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
|
||
run.status === 'success' ? 'bg-green-100 text-green-800' :
|
||
run.status === 'failed' ? 'bg-red-100 text-red-800' :
|
||
run.status === 'running' ? 'bg-yellow-100 text-yellow-800' : 'bg-slate-100 text-slate-600'
|
||
}`}>
|
||
<span className={`w-1.5 h-1.5 rounded-full ${
|
||
run.status === 'success' ? 'bg-green-500' :
|
||
run.status === 'failed' ? 'bg-red-500' :
|
||
run.status === 'running' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-400'
|
||
}`}></span>
|
||
{run.status}
|
||
</span>
|
||
</td>
|
||
<td className="py-2 px-3 text-sm text-slate-900">{run.workflow || 'SBOM Pipeline'}</td>
|
||
<td className="py-2 px-3 text-sm text-slate-600">{run.branch}</td>
|
||
<td className="py-2 px-3 text-sm font-mono text-slate-500">{run.commit_sha.substring(0, 8)}</td>
|
||
<td className="py-2 px-3 text-sm text-slate-500">{new Date(run.started_at).toLocaleString('de-DE')}</td>
|
||
<td className="py-2 px-3 text-sm text-slate-500">
|
||
{run.duration_seconds ? `${run.duration_seconds}s` : '-'}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Pipeline Architecture */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h4 className="font-medium text-slate-800 mb-3">SBOM Pipeline Architektur</h4>
|
||
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
||
{`Gitea Actions Pipeline (.gitea/workflows/sbom.yaml)
|
||
│
|
||
├── 1. generate-sbom → Syft generiert CycloneDX SBOM
|
||
│
|
||
├── 2. vulnerability-scan → Grype scannt auf CVEs
|
||
│
|
||
├── 3. license-check → Prueft GPL/AGPL Lizenzen
|
||
│
|
||
├── 4. upload-dashboard → POST /api/v1/security/sbom/upload
|
||
│
|
||
└── 5. summary → Job Summary generieren`}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================ */}
|
||
{/* Deployments Tab */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'deployments' && (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-800">Docker Container</h3>
|
||
{dockerStats && (
|
||
<p className="text-sm text-slate-600">
|
||
{dockerStats.running_containers} laufend, {dockerStats.stopped_containers} gestoppt, {dockerStats.total_containers} gesamt
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<select
|
||
value={containerFilter}
|
||
onChange={(e) => setContainerFilter(e.target.value as typeof containerFilter)}
|
||
className="px-3 py-1.5 text-sm border border-slate-300 rounded-lg bg-white"
|
||
>
|
||
<option value="all">Alle</option>
|
||
<option value="running">Laufend</option>
|
||
<option value="stopped">Gestoppt</option>
|
||
</select>
|
||
<button
|
||
onClick={loadContainerData}
|
||
className="px-3 py-1.5 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50"
|
||
>
|
||
Aktualisieren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Container List */}
|
||
{filteredContainers.length === 0 ? (
|
||
<div className="text-center py-8 text-slate-500">Keine Container gefunden</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{filteredContainers.map((container) => (
|
||
<div
|
||
key={container.id}
|
||
className={`border rounded-xl p-4 transition-colors ${
|
||
container.state === 'running'
|
||
? 'border-green-200 bg-green-50/30'
|
||
: 'border-slate-200 bg-slate-50/50'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className="font-semibold text-slate-900 truncate">{container.name}</span>
|
||
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${getStateColor(container.state)}`}>
|
||
{container.state}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm text-slate-500 mb-2">
|
||
<span className="font-mono">{container.image}</span>
|
||
{container.ports.length > 0 && (
|
||
<span className="ml-2 text-slate-400">
|
||
| {container.ports.slice(0, 2).join(', ')}
|
||
{container.ports.length > 2 && ` +${container.ports.length - 2}`}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{container.state === 'running' && (
|
||
<div className="flex flex-wrap gap-4 text-sm">
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-slate-500">CPU:</span>
|
||
<span className={`font-medium ${container.cpu_percent > 80 ? 'text-red-600' : 'text-slate-700'}`}>
|
||
{container.cpu_percent.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-slate-500">RAM:</span>
|
||
<span className={`font-medium ${container.memory_percent > 80 ? 'text-red-600' : 'text-slate-700'}`}>
|
||
{container.memory_usage}
|
||
</span>
|
||
<span className="text-slate-400">({container.memory_percent.toFixed(1)}%)</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-slate-500">Net:</span>
|
||
<span className="text-slate-700">{container.network_rx} / {container.network_tx}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 flex-shrink-0">
|
||
{container.state === 'running' ? (
|
||
<>
|
||
<button
|
||
onClick={() => containerAction(container.id, 'restart')}
|
||
disabled={actionLoading !== null}
|
||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
{actionLoading === `${container.id}-restart` ? '...' : 'Restart'}
|
||
</button>
|
||
<button
|
||
onClick={() => containerAction(container.id, 'stop')}
|
||
disabled={actionLoading !== null}
|
||
className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
{actionLoading === `${container.id}-stop` ? '...' : 'Stop'}
|
||
</button>
|
||
</>
|
||
) : (
|
||
<button
|
||
onClick={() => containerAction(container.id, 'start')}
|
||
disabled={actionLoading !== null}
|
||
className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
{actionLoading === `${container.id}-start` ? '...' : 'Start'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================ */}
|
||
{/* Setup Tab */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'setup' && (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-800 mb-2">Erstkonfiguration - Gitea CI/CD</h3>
|
||
<p className="text-slate-600">
|
||
Anleitung zur Einrichtung der CI/CD Pipeline mit Gitea Actions auf dem Mac Mini Server.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Gitea Server Info */}
|
||
<div className="bg-blue-50 p-4 rounded-lg">
|
||
<h4 className="font-medium text-blue-800 mb-3 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
|
||
</svg>
|
||
Gitea Server
|
||
</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<p className="text-sm text-slate-500">Web-URL</p>
|
||
<p className="font-mono text-blue-700">http://macmini:3003</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<p className="text-sm text-slate-500">SSH</p>
|
||
<p className="font-mono text-blue-700">macmini:2222</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<p className="text-sm text-slate-500">Status</p>
|
||
<p className={`font-medium ${pipelineStatus?.gitea_connected ? 'text-green-600' : 'text-yellow-600'}`}>
|
||
{pipelineStatus?.gitea_connected ? 'Verbunden' : 'Konfiguration erforderlich'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Implementierte Komponenten */}
|
||
<div className="bg-slate-50 p-4 rounded-lg">
|
||
<h4 className="font-medium text-slate-800 mb-3">Implementierte Komponenten</h4>
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-200">
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Komponente</th>
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Pfad</th>
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Beschreibung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
<tr>
|
||
<td className="py-2 px-3 font-medium">Gitea Service</td>
|
||
<td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">docker-compose.yml</code></td>
|
||
<td className="py-2 px-3 text-slate-600">Gitea 1.22 mit Actions enabled</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-2 px-3 font-medium">Gitea Runner</td>
|
||
<td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">docker-compose.yml</code></td>
|
||
<td className="py-2 px-3 text-slate-600">act_runner fuer Job-Ausfuehrung</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-2 px-3 font-medium">SBOM Workflow</td>
|
||
<td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">.gitea/workflows/sbom.yaml</code></td>
|
||
<td className="py-2 px-3 text-slate-600">5 Jobs: generate, scan, license, upload, summary</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-2 px-3 font-medium">Backend API</td>
|
||
<td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">backend/security_api.py</code></td>
|
||
<td className="py-2 px-3 text-slate-600">SBOM Upload, Pipeline Status, History</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-2 px-3 font-medium">Runner Config</td>
|
||
<td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">gitea/runner-config.yaml</code></td>
|
||
<td className="py-2 px-3 text-slate-600">Labels: ubuntu-latest, self-hosted</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Setup Steps */}
|
||
<div className="bg-orange-50 p-4 rounded-lg">
|
||
<h4 className="font-medium text-orange-800 mb-3 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 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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||
</svg>
|
||
Setup-Schritte
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">1. Gitea oeffnen</h5>
|
||
<code className="text-sm bg-slate-100 px-2 py-1 rounded">http://macmini:3003</code>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">2. Admin-Account erstellen</h5>
|
||
<p className="text-sm text-slate-600">Username: admin, Email: admin@breakpilot.de</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">3. Repository erstellen</h5>
|
||
<p className="text-sm text-slate-600">Name: breakpilot-pwa, Visibility: Private</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">4. Actions aktivieren</h5>
|
||
<p className="text-sm text-slate-600">Repository Settings → Actions → Enable Repository Actions</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">5. Runner Token erstellen & starten</h5>
|
||
<pre className="text-xs bg-slate-100 p-2 rounded mt-1 overflow-x-auto">
|
||
{`export GITEA_RUNNER_TOKEN=<token>
|
||
docker compose up -d gitea-runner`}
|
||
</pre>
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<h5 className="font-medium text-slate-800 mb-1">6. Repository pushen</h5>
|
||
<pre className="text-xs bg-slate-100 p-2 rounded mt-1 overflow-x-auto">
|
||
{`git remote add gitea http://macmini:3003/admin/breakpilot-pwa.git
|
||
git push gitea main`}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div className="bg-purple-50 p-4 rounded-lg">
|
||
<h4 className="font-medium text-purple-800 mb-3">Quick Links</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<a
|
||
href="http://macmini:3003"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center justify-between bg-white p-3 rounded-lg hover:bg-purple-100 transition-colors"
|
||
>
|
||
<div>
|
||
<p className="font-medium text-purple-800">Gitea</p>
|
||
<p className="text-xs text-slate-500">Git Server & CI/CD</p>
|
||
</div>
|
||
<svg className="w-5 h-5 text-purple-600" 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>
|
||
</a>
|
||
<a
|
||
href="http://macmini:3003/admin/breakpilot-pwa/actions"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center justify-between bg-white p-3 rounded-lg hover:bg-purple-100 transition-colors"
|
||
>
|
||
<div>
|
||
<p className="font-medium text-purple-800">Pipeline Actions</p>
|
||
<p className="text-xs text-slate-500">Workflow Runs</p>
|
||
</div>
|
||
<svg className="w-5 h-5 text-purple-600" 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>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ================================================================ */}
|
||
{/* Scheduler Tab (BQAS) */}
|
||
{/* ================================================================ */}
|
||
{activeTab === 'scheduler' && (
|
||
<div className="space-y-6">
|
||
{/* Status Overview */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex-shrink-0">
|
||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h4 className="font-semibold">launchd Job</h4>
|
||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||
</div>
|
||
<p className="text-sm mt-1 opacity-80">Taeglich um 07:00 Uhr automatisch</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex-shrink-0">
|
||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h4 className="font-semibold">Git Hook</h4>
|
||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||
</div>
|
||
<p className="text-sm mt-1 opacity-80">Quick Tests bei voice-service Aenderungen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex-shrink-0">
|
||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||
</svg>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h4 className="font-semibold">Benachrichtigungen</h4>
|
||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||
</div>
|
||
<p className="text-sm mt-1 opacity-80">Desktop-Alerts bei Fehlern aktiviert</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Actions */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h3 className="font-medium text-slate-800 mb-4">Quick Actions (BQAS)</h3>
|
||
<div className="flex flex-wrap gap-3">
|
||
<a
|
||
href="/ai/test-quality"
|
||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Test Dashboard oeffnen
|
||
</a>
|
||
<span className="text-sm text-slate-500 self-center">
|
||
Starte Tests direkt im BQAS Dashboard
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* GitHub Actions vs Local - Comparison */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h3 className="font-medium text-slate-800 mb-4">GitHub Actions Alternative</h3>
|
||
<p className="text-slate-600 mb-4">
|
||
Der lokale BQAS Scheduler ersetzt GitHub Actions und bietet DSGVO-konforme, vollstaendig lokale Test-Ausfuehrung.
|
||
</p>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-200 bg-white">
|
||
<th className="text-left py-3 px-4 font-medium text-slate-700">Feature</th>
|
||
<th className="text-center py-3 px-4 font-medium text-slate-700">GitHub Actions</th>
|
||
<th className="text-center py-3 px-4 font-medium text-slate-700">Lokaler Scheduler</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-3 px-4 text-slate-600">Taegliche Tests (07:00)</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="text-slate-600">schedule: cron</span>
|
||
</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">macOS launchd</span>
|
||
</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-3 px-4 text-slate-600">Push-basierte Tests</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="text-slate-600">on: push</span>
|
||
</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">Git post-commit Hook</span>
|
||
</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-3 px-4 text-slate-600">PR-basierte Tests</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">on: pull_request</span>
|
||
</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-medium">Nicht moeglich</span>
|
||
</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-3 px-4 text-slate-600">DSGVO-Konformitaet</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-medium">Daten bei GitHub (US)</span>
|
||
</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">100% lokal</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-3 px-4 text-slate-600">Offline-Faehig</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">Nein</span>
|
||
</td>
|
||
<td className="py-3 px-4 text-center">
|
||
<span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">Ja</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Configuration Details */}
|
||
<div className="bg-slate-50 rounded-lg p-4">
|
||
<h3 className="font-medium text-slate-800 mb-4">Konfiguration</h3>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* launchd Configuration */}
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-3">launchd Job</h4>
|
||
<div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-slate-100 overflow-x-auto">
|
||
<pre>{`# ~/Library/LaunchAgents/com.breakpilot.bqas.plist
|
||
Label: com.breakpilot.bqas
|
||
Schedule: 07:00 taeglich
|
||
Script: /voice-service/scripts/run_bqas.sh
|
||
Logs: /var/log/bqas/`}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Environment Variables */}
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-3">Umgebungsvariablen</h4>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between p-2 bg-white rounded">
|
||
<span className="font-mono text-slate-600">BQAS_SERVICE_URL</span>
|
||
<span className="text-slate-900">http://localhost:8091</span>
|
||
</div>
|
||
<div className="flex justify-between p-2 bg-white rounded">
|
||
<span className="font-mono text-slate-600">BQAS_REGRESSION_THRESHOLD</span>
|
||
<span className="text-slate-900">0.1</span>
|
||
</div>
|
||
<div className="flex justify-between p-2 bg-white rounded">
|
||
<span className="font-mono text-slate-600">BQAS_NOTIFY_DESKTOP</span>
|
||
<span className="text-emerald-600 font-medium">true</span>
|
||
</div>
|
||
<div className="flex justify-between p-2 bg-white rounded">
|
||
<span className="font-mono text-slate-600">BQAS_NOTIFY_SLACK</span>
|
||
<span className="text-slate-400">false</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Detailed Explanation */}
|
||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
||
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Detaillierte Erklaerung
|
||
</h3>
|
||
|
||
<div className="prose prose-sm max-w-none text-slate-700">
|
||
<h4 className="text-base font-semibold mt-4 mb-2">Warum ein lokaler Scheduler?</h4>
|
||
<p className="mb-4">
|
||
Der lokale BQAS Scheduler wurde entwickelt, um die gleiche Funktionalitaet wie GitHub Actions zu bieten,
|
||
aber mit dem entscheidenden Vorteil, dass <strong>alle Daten zu 100% auf dem lokalen Mac Mini verbleiben</strong>.
|
||
Dies ist besonders wichtig fuer DSGVO-Konformitaet, da keine Schuelerdaten oder Testergebnisse an externe Server uebertragen werden.
|
||
</p>
|
||
|
||
<h4 className="text-base font-semibold mt-4 mb-2">Komponenten</h4>
|
||
<ul className="list-disc list-inside space-y-2 mb-4">
|
||
<li>
|
||
<strong>run_bqas.sh</strong> - Hauptscript das pytest ausfuehrt, Regression-Checks macht und Benachrichtigungen versendet
|
||
</li>
|
||
<li>
|
||
<strong>launchd Job</strong> - macOS-nativer Scheduler der das Script taeglich um 07:00 Uhr startet
|
||
</li>
|
||
<li>
|
||
<strong>Git Hook</strong> - post-commit Hook der bei Aenderungen im voice-service automatisch Quick-Tests startet
|
||
</li>
|
||
<li>
|
||
<strong>Notifier</strong> - Python-Modul das Desktop-, Slack- und E-Mail-Benachrichtigungen versendet
|
||
</li>
|
||
</ul>
|
||
|
||
<h4 className="text-base font-semibold mt-4 mb-2">Installation</h4>
|
||
<div className="bg-slate-900 rounded-lg p-3 font-mono text-sm text-slate-100 mb-4">
|
||
<code>./voice-service/scripts/install_bqas_scheduler.sh install</code>
|
||
</div>
|
||
|
||
<h4 className="text-base font-semibold mt-4 mb-2">Vorteile gegenueber GitHub Actions</h4>
|
||
<ul className="list-disc list-inside space-y-1">
|
||
<li>100% DSGVO-konform - alle Daten bleiben lokal</li>
|
||
<li>Keine Internet-Abhaengigkeit - funktioniert auch offline</li>
|
||
<li>Keine GitHub-Kosten fuer private Repositories</li>
|
||
<li>Schnellere Ausfuehrung ohne Cloud-Overhead</li>
|
||
<li>Volle Kontrolle ueber Scheduling und Benachrichtigungen</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|