Upload enhanced frontend components

AdminDashboard.tsx

@@ -0,0 +1,602 @@
+/**
+ * Admin Dashboard Component
+ * Comprehensive monitoring and management interface for Medical AI Platform
+ * 
+ * Features:
+ * - Real-time system health monitoring
+ * - Pipeline statistics and performance metrics
+ * - Model performance tracking
+ * - Cache management
+ * - Alert management
+ * - Review queue management
+ * - Compliance overview
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Activity, AlertCircle, BarChart3, Database, GitBranch, Shield, Clock, TrendingUp } from 'lucide-react';
+
+interface DashboardData {
+  status: string;
+  timestamp: string;
+  system: {
+    uptime_seconds: number;
+    uptime_human: string;
+    error_rate: number;
+    total_requests: number;
+    error_threshold: number;
+    status: string;
+  };
+  pipeline: {
+    total_jobs_processed: number;
+    completed_jobs: number;
+    failed_jobs: number;
+    processing_jobs: number;
+    success_rate: number;
+  };
+  models: {
+    total_registered: number;
+    performance: Record<string, ModelPerformance>;
+  };
+  synthesis: {
+    total_syntheses: number;
+    avg_confidence: number;
+    requiring_review: number;
+    avg_processing_time_ms: number;
+  };
+  cache: {
+    total_entries: number;
+    hits: number;
+    misses: number;
+    hit_rate: number;
+    evictions: number;
+    memory_usage_mb: number;
+    avg_retrieval_time_ms: number;
+    cache_efficiency: number;
+  };
+  alerts: {
+    active_count: number;
+    critical_count: number;
+    recent: Alert[];
+  };
+  compliance: {
+    hipaa_compliant: boolean;
+    gdpr_compliant: boolean;
+    audit_logging_active: boolean;
+    phi_removal_active: boolean;
+    encryption_enabled: boolean;
+  };
+  components: Record<string, string>;
+}
+
+interface ModelPerformance {
+  version: string;
+  total_inferences: number;
+  avg_latency_ms: number;
+  error_rate: number;
+  last_used: string;
+}
+
+interface Alert {
+  alert_id: string;
+  level: string;
+  message: string;
+  category: string;
+  timestamp: string;
+  resolved: boolean;
+  details: Record<string, any>;
+}
+
+const AdminDashboard: React.FC = () => {
+  const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'overview' | 'models' | 'cache' | 'alerts'>('overview');
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  // Fetch dashboard data
+  const fetchDashboard = async () => {
+    try {
+      const response = await fetch('/health/dashboard');
+      if (!response.ok) {
+        throw new Error('Failed to fetch dashboard data');
+      }
+      const data = await response.json();
+      setDashboardData(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Initial load and auto-refresh
+  useEffect(() => {
+    fetchDashboard();
+    
+    if (autoRefresh) {
+      const interval = setInterval(fetchDashboard, 10000); // Refresh every 10 seconds
+      return () => clearInterval(interval);
+    }
+  }, [autoRefresh]);
+
+  // Status badge component
+  const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
+    const colors = {
+      operational: 'bg-green-100 text-green-800',
+      healthy: 'bg-green-100 text-green-800',
+      degraded: 'bg-yellow-100 text-yellow-800',
+      critical: 'bg-red-100 text-red-800',
+      ready: 'bg-blue-100 text-blue-800',
+      active: 'bg-blue-100 text-blue-800'
+    };
+    
+    const color = colors[status.toLowerCase() as keyof typeof colors] || 'bg-gray-100 text-gray-800';
+    
+    return (
+      <span className={`px-2 py-1 rounded-full text-xs font-medium ${color}`}>
+        {status.toUpperCase()}
+      </span>
+    );
+  };
+
+  // Metric card component
+  const MetricCard: React.FC<{
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    icon: React.ReactNode;
+    status?: 'good' | 'warning' | 'critical';
+  }> = ({ title, value, subtitle, icon, status }) => {
+    const statusColors = {
+      good: 'border-green-200 bg-green-50',
+      warning: 'border-yellow-200 bg-yellow-50',
+      critical: 'border-red-200 bg-red-50'
+    };
+    
+    const borderColor = status ? statusColors[status] : 'border-gray-200 bg-white';
+    
+    return (
+      <div className={`p-4 rounded-lg border-2 ${borderColor}`}>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium text-gray-600">{title}</span>
+          <div className="text-gray-400">{icon}</div>
+        </div>
+        <div className="text-2xl font-bold text-gray-900">{value}</div>
+        {subtitle && <div className="text-xs text-gray-500 mt-1">{subtitle}</div>}
+      </div>
+    );
+  };
+
+  // Resolve alert
+  const resolveAlert = async (alertId: string) => {
+    try {
+      const response = await fetch(`/admin/alerts/${alertId}/resolve`, {
+        method: 'POST'
+      });
+      
+      if (response.ok) {
+        fetchDashboard(); // Refresh data
+      }
+    } catch (err) {
+      console.error('Failed to resolve alert:', err);
+    }
+  };
+
+  // Clear cache
+  const clearCache = async () => {
+    if (!confirm('Are you sure you want to clear all cache entries? This may temporarily impact performance.')) {
+      return;
+    }
+    
+    try {
+      const response = await fetch('/admin/cache/clear', {
+        method: 'POST'
+      });
+      
+      if (response.ok) {
+        alert('Cache cleared successfully');
+        fetchDashboard();
+      }
+    } catch (err) {
+      alert('Failed to clear cache');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
+          <p className="text-gray-600">Error: {error}</p>
+          <button
+            onClick={fetchDashboard}
+            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!dashboardData) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Medical AI Platform - Admin Dashboard</h1>
+              <p className="text-sm text-gray-500 mt-1">
+                Real-time monitoring and system management
+              </p>
+            </div>
+            <div className="flex items-center space-x-4">
+              <StatusBadge status={dashboardData.status} />
+              <label className="flex items-center space-x-2 text-sm text-gray-600">
+                <input
+                  type="checkbox"
+                  checked={autoRefresh}
+                  onChange={(e) => setAutoRefresh(e.target.checked)}
+                  className="rounded"
+                />
+                <span>Auto-refresh</span>
+              </label>
+              <button
+                onClick={fetchDashboard}
+                className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
+              >
+                Refresh Now
+              </button>
+            </div>
+          </div>
+          
+          {/* Tabs */}
+          <div className="mt-4 flex space-x-4 border-b border-gray-200">
+            {['overview', 'models', 'cache', 'alerts'].map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab as any)}
+                className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
+                  activeTab === tab
+                    ? 'border-blue-600 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {tab.charAt(0).toUpperCase() + tab.slice(1)}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            {/* System Status Grid */}
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">System Status</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <MetricCard
+                  title="Uptime"
+                  value={dashboardData.system.uptime_human}
+                  subtitle={`${dashboardData.system.uptime_seconds.toLocaleString()}s`}
+                  icon={<Clock className="h-5 w-5" />}
+                  status="good"
+                />
+                <MetricCard
+                  title="Error Rate"
+                  value={`${(dashboardData.system.error_rate * 100).toFixed(2)}%`}
+                  subtitle={`Threshold: ${(dashboardData.system.error_threshold * 100).toFixed(0)}%`}
+                  icon={<AlertCircle className="h-5 w-5" />}
+                  status={dashboardData.system.error_rate > dashboardData.system.error_threshold ? 'critical' : 'good'}
+                />
+                <MetricCard
+                  title="Total Requests"
+                  value={dashboardData.system.total_requests.toLocaleString()}
+                  icon={<Activity className="h-5 w-5" />}
+                />
+                <MetricCard
+                  title="Active Alerts"
+                  value={dashboardData.alerts.active_count}
+                  subtitle={`${dashboardData.alerts.critical_count} critical`}
+                  icon={<AlertCircle className="h-5 w-5" />}
+                  status={dashboardData.alerts.critical_count > 0 ? 'critical' : dashboardData.alerts.active_count > 0 ? 'warning' : 'good'}
+                />
+              </div>
+            </div>
+
+            {/* Pipeline Statistics */}
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Pipeline Statistics</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <MetricCard
+                  title="Total Jobs"
+                  value={dashboardData.pipeline.total_jobs_processed.toLocaleString()}
+                  icon={<BarChart3 className="h-5 w-5" />}
+                />
+                <MetricCard
+                  title="Completed"
+                  value={dashboardData.pipeline.completed_jobs.toLocaleString()}
+                  icon={<TrendingUp className="h-5 w-5" />}
+                  status="good"
+                />
+                <MetricCard
+                  title="Failed"
+                  value={dashboardData.pipeline.failed_jobs.toLocaleString()}
+                  icon={<AlertCircle className="h-5 w-5" />}
+                  status={dashboardData.pipeline.failed_jobs > 0 ? 'warning' : 'good'}
+                />
+                <MetricCard
+                  title="Success Rate"
+                  value={`${(dashboardData.pipeline.success_rate * 100).toFixed(1)}%`}
+                  icon={<Activity className="h-5 w-5" />}
+                  status={dashboardData.pipeline.success_rate > 0.95 ? 'good' : dashboardData.pipeline.success_rate > 0.85 ? 'warning' : 'critical'}
+                />
+              </div>
+            </div>
+
+            {/* Cache & Synthesis */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {/* Cache Statistics */}
+              <div className="bg-white p-6 rounded-lg border border-gray-200">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-semibold text-gray-900">Cache Performance</h3>
+                  <Database className="h-5 w-5 text-gray-400" />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Hit Rate</span>
+                    <span className="text-sm font-medium">{(dashboardData.cache.hit_rate * 100).toFixed(1)}%</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Entries</span>
+                    <span className="text-sm font-medium">{dashboardData.cache.total_entries.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Memory Usage</span>
+                    <span className="text-sm font-medium">{dashboardData.cache.memory_usage_mb.toFixed(1)} MB</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Avg Retrieval</span>
+                    <span className="text-sm font-medium">{dashboardData.cache.avg_retrieval_time_ms.toFixed(2)} ms</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Synthesis Statistics */}
+              <div className="bg-white p-6 rounded-lg border border-gray-200">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-semibold text-gray-900">Clinical Synthesis</h3>
+                  <GitBranch className="h-5 w-5 text-gray-400" />
+                </div>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Total Syntheses</span>
+                    <span className="text-sm font-medium">{dashboardData.synthesis.total_syntheses.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Avg Confidence</span>
+                    <span className="text-sm font-medium">{(dashboardData.synthesis.avg_confidence * 100).toFixed(1)}%</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Requiring Review</span>
+                    <span className="text-sm font-medium">{dashboardData.synthesis.requiring_review.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-600">Avg Processing</span>
+                    <span className="text-sm font-medium">{dashboardData.synthesis.avg_processing_time_ms.toFixed(0)} ms</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Compliance Status */}
+            <div className="bg-white p-6 rounded-lg border border-gray-200">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold text-gray-900">Compliance Status</h3>
+                <Shield className="h-5 w-5 text-gray-400" />
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                {Object.entries(dashboardData.compliance).map(([key, value]) => (
+                  <div key={key} className="text-center">
+                    <div className={`text-2xl mb-1 ${value ? 'text-green-600' : 'text-red-600'}`}>
+                      {value ? '✓' : '✗'}
+                    </div>
+                    <div className="text-xs text-gray-600">
+                      {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Models Tab */}
+        {activeTab === 'models' && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">Model Performance</h2>
+            <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Model ID</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Version</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Inferences</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Avg Latency</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Error Rate</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Last Used</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {Object.entries(dashboardData.models.performance).map(([modelId, perf]) => (
+                    <tr key={modelId}>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{modelId}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{perf.version}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{perf.total_inferences.toLocaleString()}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{perf.avg_latency_ms.toFixed(1)} ms</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{(perf.error_rate * 100).toFixed(2)}%</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{perf.last_used}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Cache Tab */}
+        {activeTab === 'cache' && (
+          <div>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-gray-900">Cache Management</h2>
+              <button
+                onClick={clearCache}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm"
+              >
+                Clear Cache
+              </button>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+              <MetricCard
+                title="Cache Entries"
+                value={dashboardData.cache.total_entries.toLocaleString()}
+                icon={<Database className="h-5 w-5" />}
+              />
+              <MetricCard
+                title="Hit Rate"
+                value={`${(dashboardData.cache.hit_rate * 100).toFixed(1)}%`}
+                subtitle={`${dashboardData.cache.hits} hits, ${dashboardData.cache.misses} misses`}
+                icon={<Activity className="h-5 w-5" />}
+                status={dashboardData.cache.hit_rate > 0.7 ? 'good' : dashboardData.cache.hit_rate > 0.4 ? 'warning' : 'critical'}
+              />
+              <MetricCard
+                title="Memory Usage"
+                value={`${dashboardData.cache.memory_usage_mb.toFixed(1)} MB`}
+                subtitle={`${dashboardData.cache.evictions} evictions`}
+                icon={<BarChart3 className="h-5 w-5" />}
+              />
+            </div>
+            
+            <div className="bg-white p-6 rounded-lg border border-gray-200">
+              <h3 className="text-md font-semibold text-gray-900 mb-4">Cache Performance Analysis</h3>
+              <div className="space-y-2">
+                {dashboardData.cache.hit_rate < 0.5 && (
+                  <div className="p-3 bg-yellow-50 border border-yellow-200 rounded">
+                    <p className="text-sm text-yellow-800">
+                      ⚠ Low cache hit rate ({(dashboardData.cache.hit_rate * 100).toFixed(1)}%). 
+                      Consider increasing cache size or TTL.
+                    </p>
+                  </div>
+                )}
+                {dashboardData.cache.hit_rate >= 0.8 && (
+                  <div className="p-3 bg-green-50 border border-green-200 rounded">
+                    <p className="text-sm text-green-800">
+                      ✓ Excellent cache hit rate ({(dashboardData.cache.hit_rate * 100).toFixed(1)}%). 
+                      Cache performing optimally.
+                    </p>
+                  </div>
+                )}
+                <div className="p-3 bg-blue-50 border border-blue-200 rounded">
+                  <p className="text-sm text-blue-800">
+                    Cache efficiency: {dashboardData.cache.cache_efficiency.toFixed(1)}%
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Alerts Tab */}
+        {activeTab === 'alerts' && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Active Alerts ({dashboardData.alerts.active_count})
+            </h2>
+            {dashboardData.alerts.recent.length === 0 ? (
+              <div className="bg-white p-12 rounded-lg border border-gray-200 text-center">
+                <AlertCircle className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+                <p className="text-gray-500">No active alerts</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {dashboardData.alerts.recent.map((alert) => (
+                  <div
+                    key={alert.alert_id}
+                    className={`p-4 rounded-lg border-2 ${
+                      alert.level === 'critical'
+                        ? 'border-red-200 bg-red-50'
+                        : alert.level === 'error'
+                        ? 'border-orange-200 bg-orange-50'
+                        : alert.level === 'warning'
+                        ? 'border-yellow-200 bg-yellow-50'
+                        : 'border-blue-200 bg-blue-50'
+                    }`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2 mb-2">
+                          <span className={`px-2 py-1 rounded text-xs font-medium ${
+                            alert.level === 'critical'
+                              ? 'bg-red-200 text-red-800'
+                              : alert.level === 'error'
+                              ? 'bg-orange-200 text-orange-800'
+                              : alert.level === 'warning'
+                              ? 'bg-yellow-200 text-yellow-800'
+                              : 'bg-blue-200 text-blue-800'
+                          }`}>
+                            {alert.level.toUpperCase()}
+                          </span>
+                          <span className="text-xs text-gray-500">{alert.category}</span>
+                          <span className="text-xs text-gray-400">
+                            {new Date(alert.timestamp).toLocaleString()}
+                          </span>
+                        </div>
+                        <p className="text-sm font-medium text-gray-900">{alert.message}</p>
+                        {Object.keys(alert.details).length > 0 && (
+                          <pre className="mt-2 text-xs text-gray-600 bg-white/50 p-2 rounded">
+                            {JSON.stringify(alert.details, null, 2)}
+                          </pre>
+                        )}
+                      </div>
+                      {!alert.resolved && (
+                        <button
+                          onClick={() => resolveAlert(alert.alert_id)}
+                          className="ml-4 px-3 py-1 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm"
+                        >
+                          Resolve
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AdminDashboard;