feat(04-01): create AlertBanner and AdminMonitoringDashboard components
- AlertBanner filters to active service_down/service_degraded alerts only - AlertBanner renders red banner with AlertTriangle icon and X Acknowledge button - AdminMonitoringDashboard fetches health+analytics concurrently via Promise.all - Health panel shows 1x4 grid of service status cards with colored dots - Analytics panel shows 1x5 stat cards with range selector and Refresh button - Both components follow existing Tailwind/lucide-react/cn() patterns
This commit is contained in:
admin
178
frontend/src/components/AdminMonitoringDashboard.tsx
Normal file
178
frontend/src/components/AdminMonitoringDashboard.tsx
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { Activity, Clock, RefreshCw } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
adminService,
|
||||||
|
ServiceHealthEntry,
|
||||||
|
AnalyticsSummary,
|
||||||
|
} from '../services/adminService';
|
||||||
|
import { cn } from '../utils/cn';
|
||||||
|
|
||||||
|
const statusStyles: Record<
|
||||||
|
ServiceHealthEntry['status'],
|
||||||
|
{ dot: string; label: string; text: string }
|
||||||
|
> = {
|
||||||
|
healthy: { dot: 'bg-green-500', label: 'Healthy', text: 'text-green-700' },
|
||||||
|
degraded: { dot: 'bg-yellow-500', label: 'Degraded', text: 'text-yellow-700' },
|
||||||
|
down: { dot: 'bg-red-500', label: 'Down', text: 'text-red-700' },
|
||||||
|
unknown: { dot: 'bg-gray-400', label: 'Unknown', text: 'text-gray-600' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const serviceDisplayName: Record<string, string> = {
|
||||||
|
document_ai: 'Document AI',
|
||||||
|
llm_api: 'LLM API',
|
||||||
|
supabase: 'Supabase',
|
||||||
|
firebase_auth: 'Firebase Auth',
|
||||||
|
};
|
||||||
|
|
||||||
|
const AdminMonitoringDashboard: React.FC = () => {
|
||||||
|
const [health, setHealth] = useState<ServiceHealthEntry[]>([]);
|
||||||
|
const [analytics, setAnalytics] = useState<AnalyticsSummary | null>(null);
|
||||||
|
const [range, setRange] = useState('24h');
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const loadData = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const [healthData, analyticsData] = await Promise.all([
|
||||||
|
adminService.getHealth(),
|
||||||
|
adminService.getAnalytics(range),
|
||||||
|
]);
|
||||||
|
setHealth(healthData);
|
||||||
|
setAnalytics(analyticsData);
|
||||||
|
} catch {
|
||||||
|
setError('Failed to load monitoring data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [range]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadData();
|
||||||
|
}, [loadData]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-64">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<p className="text-sm text-red-700">{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={loadData}
|
||||||
|
className="mt-2 text-sm text-red-600 underline hover:no-underline"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Service Health Panel */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 flex items-center space-x-2">
|
||||||
|
<Activity className="h-5 w-5 text-gray-500" />
|
||||||
|
<span>Service Health</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{health.map((entry) => {
|
||||||
|
const styles = statusStyles[entry.status] ?? statusStyles.unknown;
|
||||||
|
const displayName = serviceDisplayName[entry.service] ?? entry.service;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={entry.service}
|
||||||
|
className="bg-white rounded-lg shadow-soft border border-gray-100 p-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className={cn('w-3 h-3 rounded-full flex-shrink-0', styles.dot)} />
|
||||||
|
<span className="text-sm font-medium text-gray-900">{displayName}</span>
|
||||||
|
</div>
|
||||||
|
<p className={cn('text-sm font-semibold', styles.text)}>{styles.label}</p>
|
||||||
|
{entry.latencyMs !== null && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">{entry.latencyMs}ms</p>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center space-x-1 mt-1 text-xs text-gray-400">
|
||||||
|
<Clock className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
{entry.checkedAt
|
||||||
|
? new Date(entry.checkedAt).toLocaleString()
|
||||||
|
: 'Never checked'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Processing Analytics Panel */}
|
||||||
|
{analytics && (
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">Processing Analytics</h2>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<label className="text-sm font-medium text-gray-700">Range:</label>
|
||||||
|
<select
|
||||||
|
value={range}
|
||||||
|
onChange={(e) => setRange(e.target.value)}
|
||||||
|
className="border border-gray-300 rounded-md px-3 py-1 text-sm"
|
||||||
|
>
|
||||||
|
<option value="24h">Last 24h</option>
|
||||||
|
<option value="7d">Last 7d</option>
|
||||||
|
<option value="30d">Last 30d</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
onClick={loadData}
|
||||||
|
className="flex items-center space-x-1 bg-blue-600 text-white px-3 py-1 rounded-md text-sm hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
<span>Refresh</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Total Uploads</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 mt-1">{analytics.totalUploads}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Succeeded</p>
|
||||||
|
<p className="text-2xl font-bold text-green-600 mt-1">{analytics.succeeded}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Failed</p>
|
||||||
|
<p className="text-2xl font-bold text-red-600 mt-1">{analytics.failed}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Success Rate</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 mt-1">
|
||||||
|
{(analytics.successRate * 100).toFixed(1)}%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Avg Processing Time</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 mt-1">
|
||||||
|
{analytics.avgProcessingMs !== null
|
||||||
|
? `${(analytics.avgProcessingMs / 1000).toFixed(1)}s`
|
||||||
|
: 'N/A'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { AdminMonitoringDashboard };
|
||||||
|
export default AdminMonitoringDashboard;
|
||||||
44
frontend/src/components/AlertBanner.tsx
Normal file
44
frontend/src/components/AlertBanner.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { AlertTriangle, X } from 'lucide-react';
|
||||||
|
import { AlertEvent } from '../services/adminService';
|
||||||
|
import { cn } from '../utils/cn';
|
||||||
|
|
||||||
|
interface AlertBannerProps {
|
||||||
|
alerts: AlertEvent[];
|
||||||
|
onAcknowledge: (id: string) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AlertBanner: React.FC<AlertBannerProps> = ({ alerts, onAcknowledge }) => {
|
||||||
|
const criticalAlerts = alerts.filter(
|
||||||
|
(a) =>
|
||||||
|
a.status === 'active' &&
|
||||||
|
(a.alert_type === 'service_down' || a.alert_type === 'service_degraded')
|
||||||
|
);
|
||||||
|
|
||||||
|
if (criticalAlerts.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('bg-red-600 px-4 py-3')}>
|
||||||
|
{criticalAlerts.map((alert) => (
|
||||||
|
<div key={alert.id} className="flex items-center justify-between text-white">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<AlertTriangle className="h-5 w-5 flex-shrink-0" />
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{alert.service_name}: {alert.message ?? alert.alert_type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => onAcknowledge(alert.id)}
|
||||||
|
className="flex items-center space-x-1 text-sm underline hover:no-underline ml-4"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span>Acknowledge</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { AlertBanner };
|
||||||
|
export default AlertBanner;
|
||||||
Reference in New Issue
Block a user