@@ -324,229 +362,3 @@ export default function Status() {
);
}
-
-// API Monitoring Component
-interface APIEndpointStatus {
- name: string;
- endpoint: string;
- status: 'healthy' | 'warning' | 'critical' | 'checking';
- responseTime: number | null;
- statusCode: number | null;
- lastChecked: Date | null;
- error: string | null;
-}
-
-function APIMonitoringCard() {
- const initialEndpoints: APIEndpointStatus[] = [
- { name: 'Health Check', endpoint: '/api/ping/', status: 'checking', responseTime: null, statusCode: null, lastChecked: null, error: null },
- { name: 'System Status', endpoint: '/v1/system/status/', status: 'checking', responseTime: null, statusCode: null, lastChecked: null, error: null },
- { name: 'Auth Endpoint', endpoint: '/v1/auth/me/', status: 'checking', responseTime: null, statusCode: null, lastChecked: null, error: null },
- { name: 'Planner API', endpoint: '/v1/planner/keywords/?page=1&page_size=1', status: 'checking', responseTime: null, statusCode: null, lastChecked: null, error: null },
- { name: 'Writer API', endpoint: '/v1/writer/tasks/?page=1&page_size=1', status: 'checking', responseTime: null, statusCode: null, lastChecked: null, error: null },
- ];
-
- const [endpoints, setEndpoints] = useState
(initialEndpoints);
- const endpointsRef = useRef(initialEndpoints);
-
- // Keep ref in sync with state
- useEffect(() => {
- endpointsRef.current = endpoints;
- }, [endpoints]);
-
- const checkEndpoint = async (endpoint: APIEndpointStatus) => {
- const startTime = performance.now();
- try {
- const controller = new AbortController();
- const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
-
- const response = await fetch(`${API_BASE_URL}${endpoint.endpoint}`, {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- },
- credentials: 'include',
- signal: controller.signal,
- });
-
- clearTimeout(timeoutId);
- const endTime = performance.now();
- const responseTime = Math.round(endTime - startTime);
-
- // Determine status based on response time and status code
- let status: 'healthy' | 'warning' | 'critical' = 'healthy';
- if (response.status >= 500) {
- status = 'critical';
- } else if (response.status >= 400 || responseTime > 2000) {
- status = 'warning';
- } else if (responseTime > 1000) {
- status = 'warning';
- }
-
- return {
- ...endpoint,
- status,
- responseTime,
- statusCode: response.status,
- lastChecked: new Date(),
- error: null,
- };
- } catch (err: any) {
- const endTime = performance.now();
- const responseTime = Math.round(endTime - startTime);
-
- return {
- ...endpoint,
- status: 'critical' as const,
- responseTime,
- statusCode: null,
- lastChecked: new Date(),
- error: err.name === 'AbortError' ? 'Timeout' : err.message || 'Network Error',
- };
- }
- };
-
- useEffect(() => {
- const checkAllEndpoints = async () => {
- // Check all endpoints in parallel using ref to get latest state
- const results = await Promise.all(
- endpointsRef.current.map(endpoint => checkEndpoint(endpoint))
- );
- setEndpoints(results);
- };
-
- // Initial check
- checkAllEndpoints();
-
- // Check every 5 seconds for real-time monitoring
- const interval = setInterval(checkAllEndpoints, 5000);
-
- return () => clearInterval(interval);
- }, []);
-
- const getStatusIcon = (status: string) => {
- switch (status) {
- case 'healthy':
- return (
-
- );
- case 'warning':
- return (
-
- );
- case 'critical':
- return (
-
- );
- default:
- return (
-
- );
- }
- };
-
- const getResponseTimeColor = (responseTime: number | null) => {
- if (responseTime === null) return 'text-gray-500 dark:text-gray-400';
- if (responseTime < 500) return 'text-green-600 dark:text-green-400';
- if (responseTime < 1000) return 'text-yellow-600 dark:text-yellow-400';
- if (responseTime < 2000) return 'text-orange-600 dark:text-orange-400';
- return 'text-red-600 dark:text-red-400';
- };
-
- const overallStatus = endpoints.every(e => e.status === 'healthy')
- ? 'healthy'
- : endpoints.some(e => e.status === 'critical')
- ? 'critical'
- : 'warning';
-
- return (
-
-
- {/* Overall Status */}
-
-
-
Overall API Status
-
- {endpoints.filter(e => e.status === 'healthy').length} of {endpoints.length} endpoints healthy
-
-
-
- {overallStatus === 'healthy' ? '✓ All Systems Operational' :
- overallStatus === 'warning' ? '⚠ Some Issues Detected' :
- '✗ Critical Issues'}
-
-
-
- {/* Endpoints List */}
-
- {endpoints.map((endpoint, index) => (
-
-
-
-
- {endpoint.name}
-
- {getStatusIcon(endpoint.status)}
-
-
- {endpoint.endpoint}
- {endpoint.responseTime !== null && (
-
- {endpoint.responseTime}ms
-
- )}
- {endpoint.statusCode && (
- = 200 && endpoint.statusCode < 300
- ? 'text-green-600 dark:text-green-400'
- : endpoint.statusCode >= 400 && endpoint.statusCode < 500
- ? 'text-yellow-600 dark:text-yellow-400'
- : 'text-red-600 dark:text-red-400'
- }`}>
- {endpoint.statusCode}
-
- )}
-
- {endpoint.error && (
-
- {endpoint.error}
-
- )}
- {endpoint.lastChecked && (
-
- Last checked: {endpoint.lastChecked.toLocaleTimeString()}
-
- )}
-
-
- ))}
-
-
- {/* Refresh Indicator */}
-
-
-
- Auto-refreshing every 5 seconds
-
-
-