286 lines
11 KiB
JavaScript
286 lines
11 KiB
JavaScript
import React, { useState, useEffect, useContext } from 'react';
|
|
import { AuthContext } from '../contexts/AuthContext';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
|
|
const SecurityLogs = () => {
|
|
const { user, tenant } = useContext(AuthContext);
|
|
const [logs, setLogs] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [filters, setFilters] = useState({
|
|
level: 'all',
|
|
eventType: 'all',
|
|
timeRange: '24h',
|
|
search: ''
|
|
});
|
|
const [pagination, setPagination] = useState({
|
|
page: 1,
|
|
limit: 50,
|
|
total: 0
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (user && tenant) {
|
|
loadSecurityLogs();
|
|
}
|
|
}, [user, tenant, filters, pagination.page]);
|
|
|
|
const loadSecurityLogs = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({
|
|
page: pagination.page,
|
|
limit: pagination.limit,
|
|
...filters
|
|
});
|
|
|
|
const response = await fetch(`/api/${tenant.slug}/security-logs?${params}`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${user.token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
setLogs(data.logs || []);
|
|
setPagination(prev => ({
|
|
...prev,
|
|
total: data.total || 0
|
|
}));
|
|
} catch (err) {
|
|
console.error('Failed to load security logs:', err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getLogLevelBadge = (level) => {
|
|
const styles = {
|
|
'critical': 'bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold',
|
|
'high': 'bg-orange-500 text-white px-2 py-1 rounded text-xs font-semibold',
|
|
'medium': 'bg-yellow-500 text-black px-2 py-1 rounded text-xs font-semibold',
|
|
'low': 'bg-blue-500 text-white px-2 py-1 rounded text-xs font-semibold',
|
|
'info': 'bg-gray-500 text-white px-2 py-1 rounded text-xs font-semibold'
|
|
};
|
|
return styles[level] || styles.info;
|
|
};
|
|
|
|
const getEventTypeIcon = (eventType) => {
|
|
const icons = {
|
|
'failed_login': '🚫',
|
|
'successful_login': '✅',
|
|
'suspicious_activity': '⚠️',
|
|
'country_alert': '🌍',
|
|
'brute_force': '🔨',
|
|
'account_lockout': '🔒',
|
|
'password_reset': '🔄',
|
|
'admin_action': '👤'
|
|
};
|
|
return icons[eventType] || '📋';
|
|
};
|
|
|
|
const formatMetadata = (metadata) => {
|
|
if (!metadata) return '';
|
|
const items = [];
|
|
if (metadata.ip_address) items.push(`IP: ${metadata.ip_address}`);
|
|
if (metadata.country) items.push(`Country: ${metadata.country}`);
|
|
if (metadata.user_agent) items.push(`Agent: ${metadata.user_agent.substring(0, 50)}...`);
|
|
return items.join(' | ');
|
|
};
|
|
|
|
const totalPages = Math.ceil(pagination.total / pagination.limit);
|
|
|
|
// Don't render if user is not authenticated
|
|
if (!user || !tenant) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="text-center py-8 text-gray-500">
|
|
Please log in to view security logs
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold mb-2 text-gray-900">Security Logs</h1>
|
|
<p className="text-gray-600">Monitor security events for your tenant: {tenant.name}</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
|
|
<div className="text-red-800">{error}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white rounded-lg shadow mb-6">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<h3 className="text-lg font-medium text-gray-900">Filters</h3>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Security Level</label>
|
|
<select
|
|
value={filters.level}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, level: e.target.value }))}
|
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="all">All Levels</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
<option value="info">Info</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Event Type</label>
|
|
<select
|
|
value={filters.eventType}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, eventType: e.target.value }))}
|
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="all">All Events</option>
|
|
<option value="failed_login">Failed Logins</option>
|
|
<option value="successful_login">Successful Logins</option>
|
|
<option value="suspicious_activity">Suspicious Activity</option>
|
|
<option value="country_alert">Country Alerts</option>
|
|
<option value="brute_force">Brute Force</option>
|
|
<option value="account_lockout">Account Lockouts</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Time Range</label>
|
|
<select
|
|
value={filters.timeRange}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, timeRange: e.target.value }))}
|
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="1h">Last Hour</option>
|
|
<option value="24h">Last 24 Hours</option>
|
|
<option value="7d">Last 7 Days</option>
|
|
<option value="30d">Last 30 Days</option>
|
|
<option value="all">All Time</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Search</label>
|
|
<input
|
|
type="text"
|
|
placeholder="IP, username..."
|
|
value={filters.search}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
|
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security Logs Table */}
|
|
<div className="bg-white rounded-lg shadow">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<div className="flex justify-between items-center">
|
|
<h3 className="text-lg font-medium text-gray-900">Security Events</h3>
|
|
<span className="text-sm text-gray-500">
|
|
{pagination.total} total events
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
{loading ? (
|
|
<div className="flex justify-center py-8">
|
|
<div className="text-gray-500">Loading security logs...</div>
|
|
</div>
|
|
) : logs.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-500">
|
|
No security logs found matching your criteria
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Time</th>
|
|
<th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Level</th>
|
|
<th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Event</th>
|
|
<th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Message</th>
|
|
<th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{logs.map((log) => (
|
|
<tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="p-3 text-sm">
|
|
<div>{new Date(log.timestamp).toLocaleString()}</div>
|
|
<div className="text-xs text-gray-500">
|
|
{formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
|
|
</div>
|
|
</td>
|
|
<td className="p-3">
|
|
<span className={getLogLevelBadge(log.level)}>
|
|
{log.level.toUpperCase()}
|
|
</span>
|
|
</td>
|
|
<td className="p-3">
|
|
<div className="flex items-center gap-2">
|
|
<span>{getEventTypeIcon(log.event_type)}</span>
|
|
<span className="text-sm">{log.event_type.replace('_', ' ').toUpperCase()}</span>
|
|
</div>
|
|
</td>
|
|
<td className="p-3 text-sm max-w-md">
|
|
<div className="truncate" title={log.message}>
|
|
{log.message}
|
|
</div>
|
|
</td>
|
|
<td className="p-3 text-xs text-gray-600 max-w-md">
|
|
<div className="truncate" title={formatMetadata(log.metadata)}>
|
|
{formatMetadata(log.metadata)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex justify-between items-center mt-6">
|
|
<div className="text-sm text-gray-500">
|
|
Page {pagination.page} of {totalPages}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setPagination(prev => ({ ...prev, page: Math.max(1, prev.page - 1) }))}
|
|
disabled={pagination.page === 1}
|
|
className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setPagination(prev => ({ ...prev, page: Math.min(totalPages, prev.page + 1) }))}
|
|
disabled={pagination.page === totalPages}
|
|
className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SecurityLogs; |