Fix jwt-token
This commit is contained in:
@@ -1,7 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
|
||||
import { Alert, AlertDescription } from '../components/ui/alert';
|
||||
import { Badge } from '../components/ui/badge';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
const SecurityLogs = () => {
|
||||
@@ -59,11 +56,11 @@ const SecurityLogs = () => {
|
||||
|
||||
const getLogLevelBadge = (level) => {
|
||||
const styles = {
|
||||
'critical': 'bg-red-500 text-white',
|
||||
'high': 'bg-orange-500 text-white',
|
||||
'medium': 'bg-yellow-500 text-black',
|
||||
'low': 'bg-blue-500 text-white',
|
||||
'info': 'bg-gray-500 text-white'
|
||||
'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;
|
||||
};
|
||||
@@ -97,31 +94,29 @@ const SecurityLogs = () => {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold mb-2">Security Logs</h1>
|
||||
<h1 className="text-3xl font-bold mb-2 text-gray-900">Security Logs</h1>
|
||||
<p className="text-gray-600">Monitor security events across all tenants</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert className="mb-6 border-red-200 bg-red-50">
|
||||
<AlertDescription className="text-red-800">
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
|
||||
<div className="text-red-800">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Filters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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 mb-2">Security Level</label>
|
||||
<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 rounded-md"
|
||||
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>
|
||||
@@ -132,11 +127,11 @@ const SecurityLogs = () => {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Event Type</label>
|
||||
<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 rounded-md"
|
||||
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>
|
||||
@@ -148,11 +143,11 @@ const SecurityLogs = () => {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Time Range</label>
|
||||
<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 rounded-md"
|
||||
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>
|
||||
@@ -162,30 +157,30 @@ const SecurityLogs = () => {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Search</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="IP, username, tenant..."
|
||||
value={filters.search}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
|
||||
className="w-full p-2 border rounded-md"
|
||||
className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Security Logs Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex justify-between items-center">
|
||||
Security Events
|
||||
<span className="text-sm font-normal text-gray-500">
|
||||
<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>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="text-gray-500">Loading security logs...</div>
|
||||
@@ -198,40 +193,40 @@ const SecurityLogs = () => {
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left p-2">Time</th>
|
||||
<th className="text-left p-2">Level</th>
|
||||
<th className="text-left p-2">Event</th>
|
||||
<th className="text-left p-2">Message</th>
|
||||
<th className="text-left p-2">Details</th>
|
||||
<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 hover:bg-gray-50">
|
||||
<td className="p-2 text-sm">
|
||||
<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-2">
|
||||
<Badge className={getLogLevelBadge(log.level)}>
|
||||
<td className="p-3">
|
||||
<span className={getLogLevelBadge(log.level)}>
|
||||
{log.level.toUpperCase()}
|
||||
</Badge>
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<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-2 text-sm max-w-md">
|
||||
<td className="p-3 text-sm max-w-md">
|
||||
<div className="truncate" title={log.message}>
|
||||
{log.message}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 text-xs text-gray-600 max-w-md">
|
||||
<td className="p-3 text-xs text-gray-600 max-w-md">
|
||||
<div className="truncate" title={formatMetadata(log.metadata)}>
|
||||
{formatMetadata(log.metadata)}
|
||||
</div>
|
||||
@@ -253,22 +248,22 @@ const SecurityLogs = () => {
|
||||
<button
|
||||
onClick={() => setPagination(prev => ({ ...prev, page: Math.max(1, prev.page - 1) }))}
|
||||
disabled={pagination.page === 1}
|
||||
className="px-3 py-1 text-sm border rounded disabled:opacity-50"
|
||||
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 rounded disabled:opacity-50"
|
||||
className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user