+
+
Filter
+ {hasActiveFilters && (
+
-
-
-
-
-
-
+
+
handleFilterChange('action', value)}
+ options={[
+ { value: '', label: 'Alle Aktionen' },
+ { value: 'CREATE', label: 'Erstellt' },
+ { value: 'UPDATE', label: 'Aktualisiert' },
+ { value: 'DELETE', label: 'Gelöscht' },
+ { value: 'UPLOAD', label: 'Hochgeladen' },
+ { value: 'SIGN', label: 'Signiert' },
+ { value: 'ENABLE', label: 'Aktiviert' },
+ { value: 'DISABLE', label: 'Deaktiviert' }
+ ]}
+ />
+ handleFilterChange('resourceType', value)}
+ options={[
+ { value: '', label: 'Alle Typen' },
+ { value: 'user', label: 'Benutzer' },
+ { value: 'space', label: 'Space' },
+ { value: 'fqdn', label: 'FQDN' },
+ { value: 'csr', label: 'CSR' },
+ { value: 'provider', label: 'Provider' },
+ { value: 'certificate', label: 'Zertifikat' },
+ { value: 'permission_group', label: 'Berechtigungsgruppen' }
+ ]}
+ />
+
+
{
value={filters.userId}
onChange={(e) => handleFilterChange('userId', e.target.value)}
placeholder="Benutzer-ID filtern"
- className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ className="w-full px-4 py-3 bg-slate-700/50 hover:bg-slate-700/70 text-white rounded-lg border border-slate-600/50 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all duration-200 text-sm placeholder-slate-400"
/>
diff --git a/frontend/src/pages/RenewalQueue.jsx b/frontend/src/pages/RenewalQueue.jsx
index dda59e5..e307589 100644
--- a/frontend/src/pages/RenewalQueue.jsx
+++ b/frontend/src/pages/RenewalQueue.jsx
@@ -1,38 +1,166 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
import { useAuth } from '../contexts/AuthContext'
+// Custom Dropdown Component
+const CustomDropdown = ({ label, value, onChange, options, placeholder = "Auswählen" }) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const dropdownRef = useRef(null)
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ const selectedOption = options.find(opt => opt.value === value) || { label: placeholder }
+
+ return (
+
+
+
+ {isOpen && (
+
+
+ {options.map((option) => (
+
+ ))}
+
+
+ )}
+
+ )
+}
+
const RenewalQueue = () => {
const { authFetch } = useAuth()
const [queue, setQueue] = useState([])
const [loading, setLoading] = useState(true)
+ const [statusFilter, setStatusFilter] = useState('all')
+ const [spaceFilter, setSpaceFilter] = useState('all')
+ const [isRefreshing, setIsRefreshing] = useState(false)
+ const [lastUpdate, setLastUpdate] = useState(null)
- const fetchQueue = async () => {
+ const fetchQueue = async (silent = false) => {
try {
+ if (!silent) {
+ setIsRefreshing(true)
+ }
const response = await authFetch('/api/renewal-queue')
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const data = await response.json()
setQueue(data.queue || [])
+ setLastUpdate(new Date())
setLoading(false)
} catch (err) {
console.error('Error fetching renewal queue:', err)
setLoading(false)
+ } finally {
+ if (!silent) {
+ setIsRefreshing(false)
+ }
}
}
useEffect(() => {
fetchQueue()
- const interval = setInterval(fetchQueue, 30000) // Refresh every 30 seconds
+ // Live-Refresh alle 5 Sekunden für Echtzeit-Ansicht
+ const interval = setInterval(() => fetchQueue(true), 5000)
return () => clearInterval(interval)
}, [authFetch])
+ // Extrahiere eindeutige Spaces für Filter
+ const uniqueSpaces = useMemo(() => {
+ const spaces = new Set()
+ queue.forEach(item => {
+ if (item.spaceName) {
+ spaces.add(item.spaceName)
+ }
+ })
+ return Array.from(spaces).sort()
+ }, [queue])
+
+ // Filtere und sortiere Queue-Einträge
+ const filteredAndSortedQueue = useMemo(() => {
+ let filtered = queue
+
+ // Filter nach Status
+ if (statusFilter !== 'all') {
+ filtered = filtered.filter(item => item.status === statusFilter)
+ }
+
+ // Filter nach Space
+ if (spaceFilter !== 'all') {
+ filtered = filtered.filter(item => item.spaceName === spaceFilter)
+ }
+
+ // Sortiere nach scheduled_at (nächste oben)
+ filtered.sort((a, b) => {
+ const dateA = new Date(a.scheduledAt)
+ const dateB = new Date(b.scheduledAt)
+ return dateA - dateB
+ })
+
+ return filtered
+ }, [queue, statusFilter, spaceFilter])
+
+ // Teile in "Ausstehend" und "Erledigt"
+ const pendingQueue = useMemo(() => {
+ return filteredAndSortedQueue.filter(item =>
+ item.status === 'pending' || item.status === 'processing'
+ )
+ }, [filteredAndSortedQueue])
+
+ const completedQueue = useMemo(() => {
+ return filteredAndSortedQueue.filter(item =>
+ item.status === 'completed' || item.status === 'failed'
+ )
+ }, [filteredAndSortedQueue])
+
const getStatusColor = (status) => {
switch (status) {
case 'pending':
return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50'
case 'processing':
return 'bg-blue-500/20 text-blue-400 border-blue-500/50'
+ case 'success':
+ return 'bg-green-500/20 text-green-400 border-green-500/50'
case 'completed':
return 'bg-green-500/20 text-green-400 border-green-500/50'
case 'failed':
@@ -86,13 +214,92 @@ const RenewalQueue = () => {
}
}
+ const renderQueueTable = (items, title) => {
+ if (items.length === 0) {
+ return null
+ }
+
+ return (
+
+
{title}
+
+
+
+
+
+ | FQDN |
+ Space |
+ Geplant für |
+ Status |
+ Verarbeitet |
+ Fehler |
+
+
+
+ {items.map((item) => (
+
+ | {item.fqdn || '-'} |
+ {item.spaceName || '-'} |
+ {formatDate(item.scheduledAt)} |
+
+
+ {item.status}
+
+ |
+ {formatDate(item.processedAt)} |
+ {item.errorMessage || '-'} |
+
+ ))}
+
+
+
+
+
+ )
+ }
+
+
+ const formatLastUpdate = () => {
+ if (!lastUpdate) return ''
+ const now = new Date()
+ const diff = Math.floor((now - lastUpdate) / 1000)
+ if (diff < 5) return 'Gerade eben'
+ if (diff < 60) return `Vor ${diff} Sekunden`
+ const minutes = Math.floor(diff / 60)
+ return `Vor ${minutes} Minute${minutes > 1 ? 'n' : ''}`
+ }
+
return (
-
Renewal Queue
-
- Übersicht über geplante und laufende Zertifikatserneuerungen
-
+
+
+
Renewal Queue
+
+ Übersicht über geplante und laufende Zertifikatserneuerungen
+
+
+
+ {isRefreshing && (
+
+
+
Aktualisiere...
+
+ )}
+
+ {lastUpdate && (
+
+ {formatLastUpdate()}
+
+ )}
+
+
{loading ? (
@@ -100,44 +307,68 @@ const RenewalQueue = () => {
Lade Queue...
) : (
-
- {queue.length === 0 ? (
-
-
Keine Einträge in der Renewal Queue
+ <>
+ {/* Filter */}
+
+
+
Filter
+ {(statusFilter !== 'all' || spaceFilter !== 'all') && (
+
+ )}
- ) : (
-
-
-
-
- | FQDN |
- Space |
- Geplant für |
- Status |
- Verarbeitet |
- Fehler |
-
-
-
- {queue.map((item) => (
-
- | {item.fqdn || '-'} |
- {item.spaceName || '-'} |
- {formatDate(item.scheduledAt)} |
-
-
- {item.status}
-
- |
- {formatDate(item.processedAt)} |
- {item.errorMessage || '-'} |
-
- ))}
-
-
+
+
+ ({ value: space, label: space }))
+ ]}
+ />
+
+
+
+ {/* Ausstehende Tasks */}
+ {renderQueueTable(pendingQueue, `Ausstehend (${pendingQueue.length})`)}
+
+ {/* Erledigte Tasks */}
+ {renderQueueTable(completedQueue, `Erledigt (${completedQueue.length})`)}
+
+ {/* Keine Einträge */}
+ {filteredAndSortedQueue.length === 0 && (
+
+
+ {queue.length === 0
+ ? 'Keine Einträge in der Renewal Queue'
+ : 'Keine Einträge entsprechen den gewählten Filtern'}
+
)}
-
+
)}