WIP: Save current state - security subsystems, migrations, logging

aggregator-web/src/components/security/SecurityStatusCard.tsx

@@ -0,0 +1,231 @@
+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;