Spaces:
Sleeping
Sleeping
| /** | |
| * Error Logs Panel Component | |
| * | |
| * Real-time error monitoring with: | |
| * - Error list with filtering | |
| * - Severity-based sorting | |
| * - Error acknowledgment and resolution | |
| * - Error statistics | |
| */ | |
| import React, { useState, useEffect, useCallback } from 'react'; | |
| import { | |
| AlertTriangle, AlertCircle, AlertOctagon, Info, RefreshCw, | |
| Check, Eye, Filter, Clock, Search, ChevronDown, ChevronUp, | |
| User, Code, XCircle | |
| } from 'lucide-react'; | |
| import { getToken } from '../../services/api'; | |
| const API_BASE = import.meta.env.VITE_API_URL || ''; | |
| // Severity badge component | |
| const SeverityBadge = ({ severity }) => { | |
| const config = { | |
| critical: { icon: AlertOctagon, color: '#ef4444', bg: '#fee2e2' }, | |
| error: { icon: AlertCircle, color: '#f97316', bg: '#ffedd5' }, | |
| warning: { icon: AlertTriangle, color: '#f59e0b', bg: '#fef3c7' }, | |
| info: { icon: Info, color: '#3b82f6', bg: '#dbeafe' } | |
| }; | |
| const { icon: Icon, color, bg } = config[severity] || config.info; | |
| return ( | |
| <span | |
| className="severity-badge" | |
| style={{ backgroundColor: bg, color, borderColor: color }} | |
| > | |
| <Icon size={12} /> | |
| {severity} | |
| </span> | |
| ); | |
| }; | |
| // Status badge component | |
| const StatusBadge = ({ status }) => { | |
| const config = { | |
| new: { color: '#ef4444', bg: '#fee2e2', label: 'New' }, | |
| acknowledged: { color: '#f59e0b', bg: '#fef3c7', label: 'Acknowledged' }, | |
| resolved: { color: '#10b981', bg: '#d1fae5', label: 'Resolved' }, | |
| ignored: { color: '#6b7280', bg: '#f3f4f6', label: 'Ignored' } | |
| }; | |
| const { color, bg, label } = config[status] || config.new; | |
| return ( | |
| <span className="status-badge" style={{ backgroundColor: bg, color }}> | |
| {label} | |
| </span> | |
| ); | |
| }; | |
| // Error detail modal | |
| const ErrorDetailModal = ({ error, onClose, onAcknowledge, onResolve }) => { | |
| if (!error) return null; | |
| return ( | |
| <div className="modal-overlay" onClick={onClose}> | |
| <div className="modal-content error-detail-modal" onClick={e => e.stopPropagation()}> | |
| <div className="modal-header"> | |
| <h3> | |
| <SeverityBadge severity={error.severity} /> | |
| Error Details | |
| </h3> | |
| <button className="close-btn" onClick={onClose}> | |
| <XCircle size={20} /> | |
| </button> | |
| </div> | |
| <div className="modal-body"> | |
| <div className="detail-row"> | |
| <label>Error Type:</label> | |
| <span className="mono">{error.error_type}</span> | |
| </div> | |
| <div className="detail-row"> | |
| <label>Message:</label> | |
| <p>{error.error_message}</p> | |
| </div> | |
| <div className="detail-row"> | |
| <label>Endpoint:</label> | |
| <span className="mono">{error.method} {error.endpoint}</span> | |
| </div> | |
| <div className="detail-row"> | |
| <label>Time:</label> | |
| <span>{new Date(error.created_at).toLocaleString()}</span> | |
| </div> | |
| <div className="detail-row"> | |
| <label>Status:</label> | |
| <StatusBadge status={error.status} /> | |
| </div> | |
| {error.stack_trace && ( | |
| <div className="detail-row stack-trace"> | |
| <label>Stack Trace:</label> | |
| <pre>{error.stack_trace}</pre> | |
| </div> | |
| )} | |
| </div> | |
| <div className="modal-footer"> | |
| {error.status === 'new' && ( | |
| <button | |
| className="btn-secondary" | |
| onClick={() => onAcknowledge(error.id)} | |
| > | |
| <Eye size={16} /> Acknowledge | |
| </button> | |
| )} | |
| {(error.status === 'new' || error.status === 'acknowledged') && ( | |
| <button | |
| className="btn-primary" | |
| onClick={() => onResolve(error.id)} | |
| > | |
| <Check size={16} /> Mark Resolved | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| function ErrorLogsPanel() { | |
| const [errors, setErrors] = useState([]); | |
| const [stats, setStats] = useState(null); | |
| const [loading, setLoading] = useState(true); | |
| const [error, setError] = useState(null); | |
| const [selectedError, setSelectedError] = useState(null); | |
| // Filters | |
| const [severity, setSeverity] = useState(''); | |
| const [status, setStatus] = useState(''); | |
| const [hours, setHours] = useState(24); | |
| const [limit, setLimit] = useState(50); | |
| const [autoRefresh, setAutoRefresh] = useState(true); | |
| // Fetch errors | |
| const fetchErrors = useCallback(async () => { | |
| setLoading(true); | |
| setError(null); | |
| try { | |
| const token = getToken(); | |
| const params = new URLSearchParams({ hours: hours.toString(), limit: limit.toString() }); | |
| if (severity) params.append('severity', severity); | |
| if (status) params.append('status', status); | |
| const response = await fetch(`${API_BASE}/api/admin/errors?${params}`, { | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (!response.ok) throw new Error('Failed to fetch errors'); | |
| const data = await response.json(); | |
| if (data.success) { | |
| setErrors(data.errors); | |
| setStats(data.stats); | |
| } | |
| } catch (err) { | |
| setError(err.message); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }, [severity, status, hours, limit]); | |
| // Acknowledge error | |
| const acknowledgeError = async (errorId) => { | |
| try { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/errors/${errorId}/acknowledge`, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| fetchErrors(); | |
| setSelectedError(null); | |
| } | |
| } catch (err) { | |
| console.error('Error acknowledging:', err); | |
| } | |
| }; | |
| // Resolve error | |
| const resolveError = async (errorId) => { | |
| try { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/errors/${errorId}/resolve`, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| fetchErrors(); | |
| setSelectedError(null); | |
| } | |
| } catch (err) { | |
| console.error('Error resolving:', err); | |
| } | |
| }; | |
| // Initial fetch | |
| useEffect(() => { | |
| fetchErrors(); | |
| }, [fetchErrors]); | |
| // Auto-refresh every 30 seconds | |
| useEffect(() => { | |
| if (!autoRefresh) return; | |
| const interval = setInterval(fetchErrors, 30000); | |
| return () => clearInterval(interval); | |
| }, [autoRefresh, fetchErrors]); | |
| if (loading) { | |
| return ( | |
| <div className="admin-loading"> | |
| <RefreshCw className="spinning" size={40} /> | |
| <p>Loading error logs...</p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="error-logs-panel"> | |
| {/* Header */} | |
| <div className="panel-header"> | |
| <div className="header-left"> | |
| <AlertCircle size={24} /> | |
| <h2>Error Logs</h2> | |
| {stats && ( | |
| <span className="error-count"> | |
| {stats.total} total ({stats.by_status?.new || 0} new) | |
| </span> | |
| )} | |
| </div> | |
| <div className="header-right"> | |
| <label className="auto-refresh-toggle"> | |
| <input | |
| type="checkbox" | |
| checked={autoRefresh} | |
| onChange={(e) => setAutoRefresh(e.target.checked)} | |
| /> | |
| Auto-refresh | |
| </label> | |
| <button className="refresh-btn" onClick={fetchErrors} disabled={loading}> | |
| <RefreshCw size={16} className={loading ? 'spinning' : ''} /> | |
| Refresh | |
| </button> | |
| </div> | |
| </div> | |
| {/* Stats Bar */} | |
| {stats && ( | |
| <div className="error-stats-bar"> | |
| <div className="stat-item critical"> | |
| <AlertOctagon size={16} /> | |
| <span>{stats.by_severity?.critical || 0} Critical</span> | |
| </div> | |
| <div className="stat-item error"> | |
| <AlertCircle size={16} /> | |
| <span>{stats.by_severity?.error || 0} Errors</span> | |
| </div> | |
| <div className="stat-item warning"> | |
| <AlertTriangle size={16} /> | |
| <span>{stats.by_severity?.warning || 0} Warnings</span> | |
| </div> | |
| <div className="stat-item info"> | |
| <Info size={16} /> | |
| <span>{stats.by_severity?.info || 0} Info</span> | |
| </div> | |
| </div> | |
| )} | |
| {/* Filters */} | |
| <div className="filters-bar"> | |
| <select value={severity} onChange={(e) => setSeverity(e.target.value)}> | |
| <option value="">All Severities</option> | |
| <option value="critical">Critical</option> | |
| <option value="error">Error</option> | |
| <option value="warning">Warning</option> | |
| <option value="info">Info</option> | |
| </select> | |
| <select value={status} onChange={(e) => setStatus(e.target.value)}> | |
| <option value="">All Statuses</option> | |
| <option value="new">New</option> | |
| <option value="acknowledged">Acknowledged</option> | |
| <option value="resolved">Resolved</option> | |
| <option value="ignored">Ignored</option> | |
| </select> | |
| <select value={hours} onChange={(e) => setHours(Number(e.target.value))}> | |
| <option value={1}>Last 1 hour</option> | |
| <option value={6}>Last 6 hours</option> | |
| <option value={24}>Last 24 hours</option> | |
| <option value={48}>Last 48 hours</option> | |
| <option value={168}>Last 7 days</option> | |
| </select> | |
| </div> | |
| {/* Error List */} | |
| <div className="error-list"> | |
| {errors.length === 0 ? ( | |
| <div className="empty-state"> | |
| <Check size={48} /> | |
| <p>No errors found for the selected filters</p> | |
| </div> | |
| ) : ( | |
| <table className="admin-table"> | |
| <thead> | |
| <tr> | |
| <th>Severity</th> | |
| <th>Error Type</th> | |
| <th>Message</th> | |
| <th>Endpoint</th> | |
| <th>Time</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {errors.map((err) => ( | |
| <tr key={err.id} className={`severity-${err.severity}`}> | |
| <td><SeverityBadge severity={err.severity} /></td> | |
| <td className="mono">{err.error_type}</td> | |
| <td className="message-cell" title={err.error_message}> | |
| {err.error_message?.substring(0, 50)}... | |
| </td> | |
| <td className="mono endpoint-cell"> | |
| {err.method} {err.endpoint} | |
| </td> | |
| <td className="time-cell"> | |
| {new Date(err.created_at).toLocaleTimeString()} | |
| </td> | |
| <td><StatusBadge status={err.status} /></td> | |
| <td className="actions-cell"> | |
| <button | |
| className="icon-btn" | |
| onClick={() => setSelectedError(err)} | |
| title="View Details" | |
| > | |
| <Eye size={16} /> | |
| </button> | |
| {err.status === 'new' && ( | |
| <button | |
| className="icon-btn" | |
| onClick={() => acknowledgeError(err.id)} | |
| title="Acknowledge" | |
| > | |
| <Check size={16} /> | |
| </button> | |
| )} | |
| </td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| )} | |
| </div> | |
| {/* Error Detail Modal */} | |
| {selectedError && ( | |
| <ErrorDetailModal | |
| error={selectedError} | |
| onClose={() => setSelectedError(null)} | |
| onAcknowledge={acknowledgeError} | |
| onResolve={resolveError} | |
| /> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export default ErrorLogsPanel; | |