From 65ff014b5ca6d2a6f77f3b25c6e88d3221c69404 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 8 Aug 2025 10:58:33 +0000 Subject: [PATCH] Create Status page for system health monitoring cgen-ed2f9d02a7a9472bb6737f681f7450b3 --- client/pages/Status.tsx | 343 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 343 insertions(+) create mode 100644 client/pages/Status.tsx diff --git a/client/pages/Status.tsx b/client/pages/Status.tsx new file mode 100644 index 00000000..2283b9ba --- /dev/null +++ b/client/pages/Status.tsx @@ -0,0 +1,343 @@ +import { useState, useEffect } from "react"; +import Layout from "@/components/Layout"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + CheckCircle, + XCircle, + AlertTriangle, + RefreshCw, + Server, + Database, + Globe, + Activity, + Clock, + Wifi, + Shield, + Zap, +} from "lucide-react"; + +interface ServiceStatus { + name: string; + status: 'operational' | 'degraded' | 'outage'; + responseTime: number; + uptime: string; + lastCheck: string; + description: string; +} + +interface SystemMetric { + name: string; + value: string; + unit: string; + status: 'good' | 'warning' | 'critical'; + icon: any; +} + +export default function Status() { + const [services, setServices] = useState([ + { + name: "AeThex Core API", + status: 'operational', + responseTime: 145, + uptime: "99.98%", + lastCheck: "30 seconds ago", + description: "Main application API and authentication services" + }, + { + name: "Database Services", + status: 'operational', + responseTime: 89, + uptime: "99.99%", + lastCheck: "1 minute ago", + description: "Supabase database and storage services" + }, + { + name: "CDN & Assets", + status: 'operational', + responseTime: 67, + uptime: "99.95%", + lastCheck: "45 seconds ago", + description: "Content delivery network and static assets" + }, + { + name: "Authentication", + status: 'operational', + responseTime: 123, + uptime: "99.97%", + lastCheck: "2 minutes ago", + description: "OAuth and email authentication systems" + }, + { + name: "Project Management", + status: 'degraded', + responseTime: 245, + uptime: "98.84%", + lastCheck: "3 minutes ago", + description: "Project creation and management features" + } + ]); + + const [metrics, setMetrics] = useState([ + { + name: "Global Uptime", + value: "99.96", + unit: "%", + status: 'good', + icon: Activity + }, + { + name: "Response Time", + value: "142", + unit: "ms", + status: 'good', + icon: Zap + }, + { + name: "Active Users", + value: "1,247", + unit: "", + status: 'good', + icon: Globe + }, + { + name: "Error Rate", + value: "0.04", + unit: "%", + status: 'good', + icon: Shield + } + ]); + + const [lastUpdated, setLastUpdated] = useState(new Date()); + const [isRefreshing, setIsRefreshing] = useState(false); + + const getStatusIcon = (status: string) => { + switch (status) { + case 'operational': + return ; + case 'degraded': + return ; + case 'outage': + return ; + default: + return ; + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'operational': + return 'bg-green-500'; + case 'degraded': + return 'bg-yellow-500'; + case 'outage': + return 'bg-red-500'; + default: + return 'bg-gray-400'; + } + }; + + const getMetricColor = (status: string) => { + switch (status) { + case 'good': + return 'text-green-400'; + case 'warning': + return 'text-yellow-400'; + case 'critical': + return 'text-red-400'; + default: + return 'text-gray-400'; + } + }; + + const getOverallStatus = () => { + const hasOutage = services.some(s => s.status === 'outage'); + const hasDegraded = services.some(s => s.status === 'degraded'); + + if (hasOutage) return { status: 'outage', message: 'Service Disruption' }; + if (hasDegraded) return { status: 'degraded', message: 'Partial Outage' }; + return { status: 'operational', message: 'All Systems Operational' }; + }; + + const refreshStatus = async () => { + setIsRefreshing(true); + // Simulate API call + await new Promise(resolve => setTimeout(resolve, 1000)); + setLastUpdated(new Date()); + setIsRefreshing(false); + }; + + const overall = getOverallStatus(); + + return ( + +
+
+ {/* Header */} +
+
+
+

+ AeThex System Status +

+

+ Real-time status and performance monitoring +

+
+ +
+ + {/* Overall Status */} + + +
+
+ {getStatusIcon(overall.status)} +
+

+ {overall.message} +

+

+ Last updated: {lastUpdated.toLocaleTimeString()} +

+
+
+ + {overall.status.toUpperCase()} + +
+ + +
+ + {/* System Metrics */} +
+ {metrics.map((metric, index) => { + const Icon = metric.icon; + return ( + + +
+
+

{metric.name}

+

+ {metric.value}{metric.unit} +

+
+ +
+ + + ); + })} +
+ + {/* Service Status */} + + + + + Service Status + + + Current operational status of all AeThex services + + + +
+ {services.map((service, index) => ( +
+
+ {getStatusIcon(service.status)} +
+

{service.name}

+

{service.description}

+
+
+
+
+
+

Response Time

+

{service.responseTime}ms

+
+
+

Uptime

+

{service.uptime}

+
+ + {service.status} + +
+

+ Last check: {service.lastCheck} +

+
+
+ ))} +
+ + + + {/* Recent Incidents */} + + + + + Recent Incidents + + + +
+
+ +
+

+ Project Management Performance Restored +

+

+ Response times have returned to normal after brief degradation +

+

+ 2 hours ago • Resolved +

+
+
+ +
+ +
+

+ Scheduled Maintenance Completed +

+

+ Database optimization and security updates applied successfully +

+

+ 1 day ago • Resolved +

+
+
+
+ + +
+
+ + ); +}