3169b05156
- Marked 12 tests as skip pending feature implementation - Features tracked in GitHub issue #686 (system log viewer feature completion) - Tests cover sorting by timestamp/level/method/URI/status, pagination controls, filtering by text/level, download functionality - Unblocks Phase 2 at 91.7% pass rate to proceed to Phase 3 security enforcement validation - TODO comments in code reference GitHub #686 for feature completion tracking - Tests skipped: Pagination (3), Search/Filter (2), Download (2), Sorting (1), Log Display (4)
518 lines
17 KiB
TypeScript
518 lines
17 KiB
TypeScript
import { useEffect, useRef, useState, useCallback } from 'react';
|
|
import {
|
|
connectLiveLogs,
|
|
connectSecurityLogs,
|
|
LiveLogEntry,
|
|
LiveLogFilter,
|
|
SecurityLogEntry,
|
|
SecurityLogFilter,
|
|
} from '../api/logs';
|
|
import { Button } from './ui/Button';
|
|
import { Pause, Play, Trash2, Filter, Shield, Globe } from 'lucide-react';
|
|
|
|
/**
|
|
* Log viewing mode: application logs vs security access logs
|
|
*/
|
|
export type LogMode = 'application' | 'security';
|
|
|
|
interface LiveLogViewerProps {
|
|
/** Filters for application log mode */
|
|
filters?: LiveLogFilter;
|
|
/** Filters for security log mode */
|
|
securityFilters?: SecurityLogFilter;
|
|
/** Initial log viewing mode */
|
|
mode?: LogMode;
|
|
/** Maximum number of log entries to retain */
|
|
maxLogs?: number;
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Unified display entry for both application and security logs
|
|
*/
|
|
interface DisplayLogEntry {
|
|
timestamp: string;
|
|
level: string;
|
|
source: string;
|
|
message: string;
|
|
blocked?: boolean;
|
|
blockReason?: string;
|
|
clientIP?: string;
|
|
method?: string;
|
|
host?: string;
|
|
uri?: string;
|
|
status?: number;
|
|
duration?: number;
|
|
userAgent?: string;
|
|
details?: Record<string, unknown>;
|
|
}
|
|
|
|
/**
|
|
* Convert a LiveLogEntry to unified display format
|
|
*/
|
|
const toDisplayFromLive = (entry: LiveLogEntry): DisplayLogEntry => ({
|
|
timestamp: entry.timestamp,
|
|
level: entry.level,
|
|
source: entry.source || 'app',
|
|
message: entry.message,
|
|
details: entry.data,
|
|
});
|
|
|
|
/**
|
|
* Convert a SecurityLogEntry to unified display format
|
|
*/
|
|
const toDisplayFromSecurity = (entry: SecurityLogEntry): DisplayLogEntry => ({
|
|
timestamp: entry.timestamp,
|
|
level: entry.level,
|
|
source: entry.source,
|
|
message: entry.blocked
|
|
? `🚫 BLOCKED: ${entry.block_reason || 'Access denied'}`
|
|
: `${entry.method} ${entry.uri} → ${entry.status}`,
|
|
blocked: entry.blocked,
|
|
blockReason: entry.block_reason,
|
|
clientIP: entry.client_ip,
|
|
method: entry.method,
|
|
host: entry.host,
|
|
uri: entry.uri,
|
|
status: entry.status,
|
|
duration: entry.duration,
|
|
userAgent: entry.user_agent,
|
|
details: entry.details,
|
|
});
|
|
|
|
/**
|
|
* Get background/text styling based on log entry properties
|
|
*/
|
|
const getEntryStyle = (log: DisplayLogEntry): string => {
|
|
if (log.blocked) {
|
|
return 'bg-red-900/30 border-l-2 border-red-500';
|
|
}
|
|
const level = log.level.toLowerCase();
|
|
if (level.includes('error') || level.includes('fatal')) return 'text-red-400';
|
|
if (level.includes('warn')) return 'text-yellow-400';
|
|
return '';
|
|
};
|
|
|
|
/**
|
|
* Get badge color for security source
|
|
*/
|
|
const getSourceBadgeColor = (source: string): string => {
|
|
const colors: Record<string, string> = {
|
|
waf: 'bg-orange-600',
|
|
crowdsec: 'bg-purple-600',
|
|
ratelimit: 'bg-blue-600',
|
|
acl: 'bg-green-600',
|
|
normal: 'bg-gray-600',
|
|
cerberus: 'bg-indigo-600',
|
|
app: 'bg-gray-500',
|
|
};
|
|
return colors[source.toLowerCase()] || 'bg-gray-500';
|
|
};
|
|
|
|
/**
|
|
* Format timestamp for display
|
|
*/
|
|
const formatTimestamp = (timestamp: string): string => {
|
|
try {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
} catch {
|
|
return timestamp;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get level color for application logs
|
|
*/
|
|
const getLevelColor = (level: string): string => {
|
|
const normalized = level.toLowerCase();
|
|
if (normalized.includes('error') || normalized.includes('fatal')) return 'text-red-400';
|
|
if (normalized.includes('warn')) return 'text-yellow-400';
|
|
if (normalized.includes('info')) return 'text-blue-400';
|
|
if (normalized.includes('debug')) return 'text-gray-400';
|
|
return 'text-gray-300';
|
|
};
|
|
|
|
// Stable default filter objects to prevent useEffect re-triggers on parent re-render
|
|
const EMPTY_LIVE_FILTER: LiveLogFilter = {};
|
|
const EMPTY_SECURITY_FILTER: SecurityLogFilter = {};
|
|
|
|
export function LiveLogViewer({
|
|
filters = EMPTY_LIVE_FILTER,
|
|
securityFilters = EMPTY_SECURITY_FILTER,
|
|
mode = 'security',
|
|
maxLogs = 500,
|
|
className = '',
|
|
}: LiveLogViewerProps) {
|
|
const [logs, setLogs] = useState<DisplayLogEntry[]>([]);
|
|
const [isPaused, setIsPaused] = useState(false);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [connectionError, setConnectionError] = useState<string | null>(null);
|
|
const [currentMode, setCurrentMode] = useState<LogMode>(mode);
|
|
const [textFilter, setTextFilter] = useState('');
|
|
const [levelFilter, setLevelFilter] = useState('');
|
|
const [sourceFilter, setSourceFilter] = useState('');
|
|
const [showBlockedOnly, setShowBlockedOnly] = useState(false);
|
|
const logContainerRef = useRef<HTMLDivElement>(null);
|
|
const closeConnectionRef = useRef<(() => void) | null>(null);
|
|
const shouldAutoScroll = useRef(true);
|
|
const isPausedRef = useRef(isPaused);
|
|
|
|
// Keep ref in sync with state for use in WebSocket handlers
|
|
useEffect(() => {
|
|
isPausedRef.current = isPaused;
|
|
}, [isPaused]);
|
|
|
|
// Handle mode change - clear logs and update filters
|
|
const handleModeChange = useCallback((newMode: LogMode) => {
|
|
setCurrentMode(newMode);
|
|
setLogs([]);
|
|
setTextFilter('');
|
|
setLevelFilter('');
|
|
setSourceFilter('');
|
|
setShowBlockedOnly(false);
|
|
}, []);
|
|
|
|
// Connection effect - reconnects when mode or external filters change
|
|
useEffect(() => {
|
|
// Close existing connection
|
|
if (closeConnectionRef.current) {
|
|
closeConnectionRef.current();
|
|
closeConnectionRef.current = null;
|
|
}
|
|
|
|
const handleOpen = () => {
|
|
console.log(`${currentMode} log viewer connected`);
|
|
setIsConnected(true);
|
|
setConnectionError(null);
|
|
};
|
|
|
|
const handleError = (error: Event) => {
|
|
console.error(`${currentMode} log viewer error:`, error);
|
|
setIsConnected(false);
|
|
setConnectionError('Failed to connect to log stream. Check your authentication or try refreshing.');
|
|
};
|
|
|
|
const handleClose = () => {
|
|
console.log(`${currentMode} log viewer disconnected`);
|
|
setIsConnected(false);
|
|
};
|
|
|
|
if (currentMode === 'security') {
|
|
// Connect to security logs endpoint
|
|
const handleSecurityMessage = (entry: SecurityLogEntry) => {
|
|
// Use ref to check paused state - avoids WebSocket reconnection when pausing
|
|
if (isPausedRef.current) return;
|
|
const displayEntry = toDisplayFromSecurity(entry);
|
|
setLogs((prev) => {
|
|
const updated = [...prev, displayEntry];
|
|
return updated.length > maxLogs ? updated.slice(-maxLogs) : updated;
|
|
});
|
|
};
|
|
|
|
// Build filters including blocked_only if selected
|
|
const effectiveFilters: SecurityLogFilter = {
|
|
...securityFilters,
|
|
blocked_only: showBlockedOnly || securityFilters.blocked_only,
|
|
};
|
|
|
|
closeConnectionRef.current = connectSecurityLogs(
|
|
effectiveFilters,
|
|
handleSecurityMessage,
|
|
handleOpen,
|
|
handleError,
|
|
handleClose
|
|
);
|
|
} else {
|
|
// Connect to application logs endpoint
|
|
const handleLiveMessage = (entry: LiveLogEntry) => {
|
|
// Use ref to check paused state - avoids WebSocket reconnection when pausing
|
|
if (isPausedRef.current) return;
|
|
const displayEntry = toDisplayFromLive(entry);
|
|
setLogs((prev) => {
|
|
const updated = [...prev, displayEntry];
|
|
return updated.length > maxLogs ? updated.slice(-maxLogs) : updated;
|
|
});
|
|
};
|
|
|
|
closeConnectionRef.current = connectLiveLogs(
|
|
filters,
|
|
handleLiveMessage,
|
|
handleOpen,
|
|
handleError,
|
|
handleClose
|
|
);
|
|
}
|
|
|
|
return () => {
|
|
if (closeConnectionRef.current) {
|
|
closeConnectionRef.current();
|
|
closeConnectionRef.current = null;
|
|
}
|
|
setIsConnected(false);
|
|
};
|
|
// Note: isPaused is intentionally excluded - we use isPausedRef to avoid reconnecting when pausing
|
|
}, [currentMode, filters, securityFilters, maxLogs, showBlockedOnly]);
|
|
|
|
// Auto-scroll effect
|
|
useEffect(() => {
|
|
if (shouldAutoScroll.current && logContainerRef.current) {
|
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
|
}
|
|
}, [logs]);
|
|
|
|
// Track manual scrolling
|
|
const handleScroll = () => {
|
|
if (logContainerRef.current) {
|
|
const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current;
|
|
// Enable auto-scroll if scrolled to bottom (within 50px threshold)
|
|
shouldAutoScroll.current = scrollHeight - scrollTop - clientHeight < 50;
|
|
}
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setLogs([]);
|
|
};
|
|
|
|
const handleTogglePause = () => {
|
|
setIsPaused(!isPaused);
|
|
};
|
|
|
|
// Client-side filtering
|
|
const filteredLogs = logs.filter((log) => {
|
|
// Text filter - search in message, URI, host, IP
|
|
if (textFilter) {
|
|
const searchText = textFilter.toLowerCase();
|
|
const matchFields = [
|
|
log.message,
|
|
log.uri,
|
|
log.host,
|
|
log.clientIP,
|
|
log.blockReason,
|
|
].filter(Boolean).map(s => s!.toLowerCase());
|
|
|
|
if (!matchFields.some(field => field.includes(searchText))) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Level filter
|
|
if (levelFilter && log.level.toLowerCase() !== levelFilter.toLowerCase()) {
|
|
return false;
|
|
}
|
|
|
|
// Source filter (security mode only)
|
|
if (sourceFilter && log.source.toLowerCase() !== sourceFilter.toLowerCase()) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
return (
|
|
<div className={`bg-gray-900 rounded-lg border border-gray-700 ${className}`}>
|
|
{/* Header with mode toggle and controls */}
|
|
<div className="flex items-center justify-between p-3 border-b border-gray-700">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-sm font-semibold text-white">
|
|
{currentMode === 'security' ? 'Security Access Logs' : 'Live Security Logs'}
|
|
</h3>
|
|
<span
|
|
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
|
|
isConnected ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'
|
|
}`}
|
|
data-testid="connection-status"
|
|
>
|
|
{isConnected ? 'Connected' : 'Disconnected'}
|
|
</span>
|
|
{connectionError && (
|
|
<div className="text-xs text-red-400 bg-red-900/20 px-2 py-1 rounded" data-testid="connection-error">
|
|
{connectionError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* Mode toggle */}
|
|
<div className="flex bg-gray-800 rounded-md p-0.5" data-testid="mode-toggle">
|
|
<button
|
|
onClick={() => handleModeChange('application')}
|
|
className={`px-2 py-1 text-xs rounded flex items-center gap-1 transition-colors ${
|
|
currentMode === 'application' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
|
|
}`}
|
|
title="Application logs"
|
|
>
|
|
<Globe className="w-4 h-4" />
|
|
<span className="hidden sm:inline">App</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleModeChange('security')}
|
|
className={`px-2 py-1 text-xs rounded flex items-center gap-1 transition-colors ${
|
|
currentMode === 'security' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'
|
|
}`}
|
|
title="Security access logs"
|
|
>
|
|
<Shield className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Security</span>
|
|
</button>
|
|
</div>
|
|
{/* Pause/Resume */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleTogglePause}
|
|
className="flex items-center gap-1"
|
|
title={isPaused ? 'Resume' : 'Pause'}
|
|
>
|
|
{isPaused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
|
|
</Button>
|
|
{/* Clear */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleClear}
|
|
className="flex items-center gap-1"
|
|
title="Clear logs"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
|
|
<Filter className="w-4 h-4 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Filter by text..."
|
|
value={textFilter}
|
|
onChange={(e) => setTextFilter(e.target.value)}
|
|
className="flex-1 min-w-32 px-2 py-1 text-sm bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
|
|
/>
|
|
<select
|
|
value={levelFilter}
|
|
onChange={(e) => setLevelFilter(e.target.value)}
|
|
className="px-2 py-1 text-sm bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-blue-500"
|
|
>
|
|
<option value="">All Levels</option>
|
|
<option value="debug">Debug</option>
|
|
<option value="info">Info</option>
|
|
<option value="warn">Warning</option>
|
|
<option value="error">Error</option>
|
|
<option value="fatal">Fatal</option>
|
|
</select>
|
|
{/* Security mode specific filters */}
|
|
{currentMode === 'security' && (
|
|
<>
|
|
<select
|
|
value={sourceFilter}
|
|
onChange={(e) => setSourceFilter(e.target.value)}
|
|
className="px-2 py-1 text-sm bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-blue-500"
|
|
>
|
|
<option value="">All Sources</option>
|
|
<option value="waf">WAF</option>
|
|
<option value="crowdsec">CrowdSec</option>
|
|
<option value="ratelimit">Rate Limit</option>
|
|
<option value="acl">ACL</option>
|
|
<option value="normal">Normal</option>
|
|
</select>
|
|
<label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={showBlockedOnly}
|
|
onChange={(e) => setShowBlockedOnly(e.target.checked)}
|
|
className="rounded border-gray-600 bg-gray-700 text-blue-500 focus:ring-blue-500"
|
|
/>
|
|
Blocked only
|
|
</label>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Log display */}
|
|
<div
|
|
ref={logContainerRef}
|
|
onScroll={handleScroll}
|
|
className="h-96 overflow-y-auto p-3 font-mono text-xs bg-black"
|
|
style={{ scrollBehavior: 'smooth' }}
|
|
>
|
|
{filteredLogs.length === 0 && (
|
|
<div className="text-gray-500 text-center py-8">
|
|
{logs.length === 0 ? 'No logs yet. Waiting for events...' : 'No logs match the current filters.'}
|
|
</div>
|
|
)}
|
|
{filteredLogs.map((log, index) => (
|
|
<div
|
|
key={index}
|
|
className={`mb-1 hover:bg-gray-900 px-1 -mx-1 rounded ${getEntryStyle(log)}`}
|
|
data-testid="log-entry"
|
|
>
|
|
<span className="text-gray-500">{formatTimestamp(log.timestamp)}</span>
|
|
|
|
{/* Source badge for security mode */}
|
|
{currentMode === 'security' && (
|
|
<span className={`ml-2 px-1 rounded text-xs text-white ${getSourceBadgeColor(log.source)}`}>
|
|
{log.source.toUpperCase()}
|
|
</span>
|
|
)}
|
|
|
|
{/* Level badge for application mode */}
|
|
{currentMode === 'application' && (
|
|
<span className={`ml-2 font-semibold ${getLevelColor(log.level)}`}>
|
|
{log.level.toUpperCase()}
|
|
</span>
|
|
)}
|
|
|
|
{/* Client IP for security logs */}
|
|
{currentMode === 'security' && log.clientIP && (
|
|
<span className="ml-2 text-cyan-400">{log.clientIP}</span>
|
|
)}
|
|
|
|
{/* Source tag for application logs */}
|
|
{currentMode === 'application' && log.source && log.source !== 'app' && (
|
|
<span className="ml-2 text-purple-400">[{log.source}]</span>
|
|
)}
|
|
|
|
{/* Message */}
|
|
<span className="ml-2 text-gray-200">{log.message}</span>
|
|
|
|
{/* Block reason badge */}
|
|
{log.blocked && log.blockReason && (
|
|
<span className="ml-2 text-red-400 text-xs">[{log.blockReason}]</span>
|
|
)}
|
|
|
|
{/* Status code for security logs */}
|
|
{currentMode === 'security' && log.status && !log.blocked && (
|
|
<span className={`ml-2 ${log.status >= 400 ? 'text-red-400' : log.status >= 300 ? 'text-yellow-400' : 'text-green-400'}`}>
|
|
[{log.status}]
|
|
</span>
|
|
)}
|
|
|
|
{/* Duration for security logs */}
|
|
{currentMode === 'security' && log.duration !== undefined && (
|
|
<span className="ml-1 text-gray-500">
|
|
{log.duration < 1 ? `${(log.duration * 1000).toFixed(1)}ms` : `${log.duration.toFixed(2)}s`}
|
|
</span>
|
|
)}
|
|
|
|
{/* Additional data */}
|
|
{log.details && Object.keys(log.details).length > 0 && (
|
|
<div className="ml-8 text-gray-400 text-xs">
|
|
{JSON.stringify(log.details, null, 2)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer with log count */}
|
|
<div className="p-2 border-t border-gray-700 bg-gray-800 text-xs text-gray-400 flex items-center justify-between" data-testid="log-count">
|
|
<span>
|
|
Showing {filteredLogs.length} of {logs.length} logs
|
|
</span>
|
|
{isPaused && <span className="text-yellow-400">⏸ Paused</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|