231 lines
8.5 KiB
TypeScript
231 lines
8.5 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Shield,
|
|
ShieldCheck,
|
|
AlertTriangle,
|
|
XCircle,
|
|
RefreshCw,
|
|
CheckCircle,
|
|
Clock,
|
|
Activity,
|
|
Eye,
|
|
Info
|
|
} from 'lucide-react';
|
|
import { SecurityStatusCardProps } from '@/types/security';
|
|
|
|
const SecurityStatusCard: React.FC<SecurityStatusCardProps> = ({
|
|
status,
|
|
onRefresh,
|
|
loading = false,
|
|
}) => {
|
|
const getStatusIcon = () => {
|
|
switch (status.overall) {
|
|
case 'healthy':
|
|
return <ShieldCheck className="w-6 h-6 text-green-600" />;
|
|
case 'warning':
|
|
return <AlertTriangle className="w-6 h-6 text-yellow-600" />;
|
|
case 'critical':
|
|
return <XCircle className="w-6 h-6 text-red-600" />;
|
|
default:
|
|
return <Shield className="w-6 h-6 text-gray-400" />;
|
|
}
|
|
};
|
|
|
|
const getStatusColor = () => {
|
|
switch (status.overall) {
|
|
case 'healthy':
|
|
return 'bg-green-50 border-green-200 text-green-900';
|
|
case 'warning':
|
|
return 'bg-yellow-50 border-yellow-200 text-yellow-900';
|
|
case 'critical':
|
|
return 'bg-red-50 border-red-200 text-red-900';
|
|
default:
|
|
return 'bg-gray-50 border-gray-200 text-gray-900';
|
|
}
|
|
};
|
|
|
|
const getStatusText = () => {
|
|
switch (status.overall) {
|
|
case 'healthy':
|
|
return 'All security features are operating normally';
|
|
case 'warning':
|
|
return 'Some security features require attention';
|
|
case 'critical':
|
|
return 'Critical security issues detected';
|
|
default:
|
|
return 'Security status unknown';
|
|
}
|
|
};
|
|
|
|
const formatLastUpdate = (timestamp: string) => {
|
|
const date = new Date(timestamp);
|
|
const now = new Date();
|
|
const diff = now.getTime() - date.getTime();
|
|
const minutes = Math.floor(diff / 60000);
|
|
|
|
if (minutes < 1) return 'Just now';
|
|
if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
|
|
if (minutes < 1440) return `${Math.floor(minutes / 60)} hour${Math.floor(minutes / 60) !== 1 ? 's' : ''} ago`;
|
|
return date.toLocaleDateString();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Main Status Card */}
|
|
<div className="bg-white border border-gray-200 rounded-lg p-6">
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className={`p-3 rounded-lg border ${getStatusColor()}`}>
|
|
{getStatusIcon()}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">Security Overview</h2>
|
|
<p className="text-gray-600 mt-1">{getStatusText()}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onRefresh}
|
|
disabled={loading}
|
|
className={`
|
|
flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors
|
|
${loading
|
|
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}
|
|
`}
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
{loading ? 'Updating...' : 'Refresh'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Feature Status Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{status.features.map((feature) => (
|
|
<div
|
|
key={feature.name}
|
|
className="p-4 bg-gray-50 border border-gray-200 rounded-lg"
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{feature.name}
|
|
</span>
|
|
{feature.enabled ? (
|
|
<div className="flex items-center gap-1">
|
|
<CheckCircle className="w-4 h-4 text-green-500" />
|
|
<span className="text-xs text-green-600 font-medium">
|
|
{feature.status === 'healthy' ? 'Active' : feature.status}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1">
|
|
<XCircle className="w-4 h-4 text-gray-400" />
|
|
<span className="text-xs text-gray-500">Disabled</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{feature.details && (
|
|
<p className="text-xs text-gray-500">{feature.details}</p>
|
|
)}
|
|
<p className="text-xs text-gray-400 mt-1 flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
{formatLastUpdate(feature.last_check)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Events Summary */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">Recent Events</p>
|
|
<p className="text-2xl font-bold text-gray-900 mt-1">{status.recent_events}</p>
|
|
<p className="text-sm text-gray-600">Last 24 hours</p>
|
|
</div>
|
|
<Activity className="w-8 h-8 text-blue-600 opacity-20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">Enabled Features</p>
|
|
<p className="text-2xl font-bold text-green-600 mt-1">
|
|
{status.features.filter(f => f.enabled).length}/{status.features.length}
|
|
</p>
|
|
<p className="text-sm text-gray-600">Active</p>
|
|
</div>
|
|
<Shield className="w-8 h-8 text-green-600 opacity-20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">Last Updated</p>
|
|
<p className="text-sm font-medium text-gray-700 mt-2">
|
|
{formatLastUpdate(status.last_updated)}
|
|
</p>
|
|
</div>
|
|
<Clock className="w-8 h-8 text-gray-600 opacity-20" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Alert Section */}
|
|
{status.overall !== 'healthy' && (
|
|
<div className={`border rounded-lg p-4 ${getStatusColor()}`}>
|
|
<div className="flex items-start gap-3">
|
|
{status.overall === 'warning' ? (
|
|
<AlertTriangle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
|
|
) : (
|
|
<XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
|
)}
|
|
<div>
|
|
<h3 className="font-medium mb-1">
|
|
{status.overall === 'warning' ? 'Security Warnings' : 'Security Alert'}
|
|
</h3>
|
|
<ul className="text-sm space-y-1">
|
|
{status.features
|
|
.filter(f => f.status !== 'healthy' && f.enabled)
|
|
.map((feature, index) => (
|
|
<li key={index} className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-current opacity-60"></span>
|
|
{feature.name}: {feature.details || feature.status}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<p className="text-sm font-medium text-gray-900 mb-3 flex items-center gap-2">
|
|
<Info className="w-4 h-4" />
|
|
Quick Actions
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-lg hover:border-gray-400 flex items-center gap-2">
|
|
<Eye className="w-3 h-3" />
|
|
View Security Logs
|
|
</button>
|
|
<button className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-lg hover:border-gray-400 flex items-center gap-2">
|
|
<Shield className="w-3 h-3" />
|
|
Run Security Check
|
|
</button>
|
|
<button className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-lg hover:border-gray-400 flex items-center gap-2">
|
|
<Activity className="w-3 h-3" />
|
|
Monitor Events
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SecurityStatusCard; |