feat(ui): implement Discovery, Logs, and Live Log

- DeviceDiscovery: auto device detection with type and status - LogsPage: comprehensive logs view with filters and stats - RipTargetModal: target directory selection wizard - ConfirmDialog: generic confirmation dialog component - LiveLogSection: real-time job progress and logs - Update App.tsx to include new pages
2026-07-23 12:38:16 +02:00
parent 3e88c328db
commit e9652a428c
7 changed files with 769 additions and 2 deletions
@@ -0,0 +1,141 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+import { Terminal, Disc, Play, CheckCircle, AlertCircle, Clock, Download } from 'lucide-react'
+import { useDarkMode } from '../context/ThemeContext'
+
+interface LiveLogEntry {
+  id: string
+  timestamp: string
+  level: 'info' | 'warning' | 'error' | 'success'
+  message: string
+  source: string
+}
+
+export default function LiveLogSection() {
+  const [logs, setLogs] = useState<LiveLogEntry[]>([])
+  const [currentJob, setCurrentJob] = useState<any>(null)
+  const { theme } = useDarkMode()
+
+  const API_URL = 'http://localhost:8000'
+
+  useEffect(() => {
+    const fetchJobs = async () => {
+      try {
+        const response = await axios.get(`${API_URL}/jobs`)
+        const jobs = response.data
+        const current = jobs.find((j: any) => j.status === 'processing')
+        setCurrentJob(current || jobs.find((j: any) => j.status === 'pending'))
+      } catch (error) {
+        console.error('Fehler beim Laden der Jobs:', error)
+      }
+    }
+
+    fetchJobs()
+    const jobInterval = setInterval(fetchJobs, 5000)
+
+    // TODO: WebSocket/SSE für Echtzeit-Logs implementieren
+    // const logInterval = setInterval(fetchLogs, 1000)
+
+    return () => {
+      clearInterval(jobInterval)
+      // clearInterval(logInterval)
+    }
+  }, [])
+
+  const getStatusColor = (level: string) => {
+    switch (level) {
+      case 'error': return 'text-rose-500'
+      case 'warning': return 'text-amber-500'
+      case 'success': return 'text-emerald-500'
+      default: return 'text-blue-500'
+    }
+  }
+
+  const getStatusIcon = (level: string) => {
+    switch (level) {
+      case 'error': return <AlertCircle size={16} />
+      case 'warning': return <AlertCircle size={16} />
+      case 'success': return <CheckCircle size={16} />
+      default: return <Terminal size={16} />
+    }
+  }
+
+  return (
+    <div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
+      <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
+        <div>
+          <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Live-Log</h2>
+          <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
+            {currentJob 
+              ? `Aktiver Job: ${currentJob.type.toUpperCase()} (${currentJob.progress}%)`
+              : 'Kein aktiver Job'}
+          </p>
+        </div>
+        {currentJob && (
+          <div className="flex items-center gap-2">
+            <div className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2 ${
+              currentJob.progress === 100 
+                ? theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700'
+                : theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
+            }`}>
+              {currentJob.progress === 100 ? <CheckCircle size={12} /> : <Play size={12} />}
+              {currentJob.progress}%
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={`max-h-[400px] overflow-y-auto p-4 space-y-2 transition-colors duration-300 font-mono text-xs ${
+        theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'
+      }`}>
+        {logs.length === 0 ? (
+          <div className="text-center py-8 text-slate-500">
+            <Terminal size={32} className="mx-auto mb-2 opacity-50" />
+            <p>Warte auf Log-Einträge...</p>
+          </div>
+        ) : (
+          logs.map((log) => (
+            <div key={log.id} className={`flex items-start gap-2 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+              <span className="text-slate-500 whitespace-nowrap">
+                {new Date(log.timestamp).toLocaleTimeString('de-DE', { hour12: false })}
+              </span>
+              <span className={`font-bold ${getStatusColor(log.level)}`}>
+                [{log.source}]
+              </span>
+              <span className="flex-1">{log.message}</span>
+              <span className={getStatusColor(log.level)}>
+                {getStatusIcon(log.level)}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Quick Stats */}
+      <div className={`px-6 py-3 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} grid grid-cols-3 gap-4`}>
+        {currentJob && (
+          <>
+            <div>
+              <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Fortschritt</p>
+              <p className={`text-lg font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+                {currentJob.progress}%
+              </p>
+            </div>
+            <div>
+              <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Gerät</p>
+              <p className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+                {currentJob.device || 'Unbekannt'}
+              </p>
+            </div>
+            <div>
+              <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Typ</p>
+              <p className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+                {currentJob.type?.toUpperCase() || 'Unbekannt'}
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}