From e8666ee5ec7db0d61bf15c7755efacbf5026e7d2 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Mon, 29 Sep 2025 17:21:53 +0700 Subject: [PATCH] chore: fix failed build --- docs/src/components/OpenAIStatusChecker.tsx | 244 +++++++++++--------- 1 file changed, 133 insertions(+), 111 deletions(-) diff --git a/docs/src/components/OpenAIStatusChecker.tsx b/docs/src/components/OpenAIStatusChecker.tsx index e2ed745e7..09c794c2e 100644 --- a/docs/src/components/OpenAIStatusChecker.tsx +++ b/docs/src/components/OpenAIStatusChecker.tsx @@ -1,186 +1,193 @@ -import React, { useState, useEffect } from 'react'; -import { AlertCircle, CheckCircle, Clock, RefreshCw } from 'lucide-react'; +import React, { useState, useEffect, useCallback } from 'react' +import { AlertCircle, CheckCircle, Clock, RefreshCw } from 'lucide-react' interface StatusData { - status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'under_maintenance' | 'unknown'; - lastUpdated: string; + status: + | 'operational' + | 'degraded' + | 'partial_outage' + | 'major_outage' + | 'under_maintenance' + | 'unknown' + lastUpdated: string incidents: Array<{ - name: string; - status: string; - impact: string; - }>; + name: string + status: string + impact: string + }> } const StatusIcon = ({ status }: { status: string }) => { switch (status) { case 'operational': - return ; + return case 'degraded': case 'partial_outage': - return ; + return case 'major_outage': - return ; + return case 'under_maintenance': - return ; + return default: - return ; + return } -}; +} const getStatusColor = (status: string) => { switch (status) { case 'operational': - return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800'; + return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800' case 'degraded': case 'partial_outage': - return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800'; + return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800' case 'major_outage': - return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800'; + return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800' case 'under_maintenance': - return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800'; + return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800' default: - return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/20 dark:text-gray-300 dark:border-gray-800'; + return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/20 dark:text-gray-300 dark:border-gray-800' } -}; +} const getStatusText = (status: string) => { switch (status) { case 'operational': - return 'All Systems Operational'; + return 'All Systems Operational' case 'degraded': - return 'Degraded Performance'; + return 'Degraded Performance' case 'partial_outage': - return 'Partial Service Outage'; + return 'Partial Service Outage' case 'major_outage': - return 'Major Service Outage'; + return 'Major Service Outage' case 'under_maintenance': - return 'Under Maintenance'; + return 'Under Maintenance' default: - return 'Status Unknown'; + return 'Status Unknown' } -}; +} export const OpenAIStatusChecker: React.FC = () => { - const [statusData, setStatusData] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [lastRefresh, setLastRefresh] = useState(new Date()); + const [statusData, setStatusData] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [lastRefresh, setLastRefresh] = useState(new Date()) + + const fetchStatus = useCallback(async () => { + setLoading(true) + setError(null) - const fetchStatus = async () => { - setLoading(true); - setError(null); - try { - console.log('Fetching real OpenAI status...'); - + console.log('Fetching real OpenAI status...') + // Use CORS proxy to fetch real OpenAI status - const proxyUrl = 'https://api.allorigins.win/get?url='; - const targetUrl = 'https://status.openai.com/api/v2/status.json'; - - const response = await fetch(proxyUrl + encodeURIComponent(targetUrl)); - + const proxyUrl = 'https://api.allorigins.win/get?url=' + const targetUrl = 'https://status.openai.com/api/v2/status.json' + + const response = await fetch(proxyUrl + encodeURIComponent(targetUrl)) + if (!response.ok) { - throw new Error(`Proxy returned ${response.status}`); + throw new Error(`Proxy returned ${response.status}`) } - - const proxyData = await response.json(); - const openaiData = JSON.parse(proxyData.contents); - - console.log('Real OpenAI data received:', openaiData); - + + const proxyData = await response.json() + const openaiData = JSON.parse(proxyData.contents) + + console.log('Real OpenAI data received:', openaiData) + // Transform real OpenAI data to our format - const transformedData = { - status: mapOpenAIStatusClient(openaiData.status?.indicator || 'operational'), + const transformedData: StatusData = { + status: mapOpenAIStatusClient( + openaiData.status?.indicator || 'operational' + ), lastUpdated: openaiData.page?.updated_at || new Date().toISOString(), incidents: (openaiData.incidents || []).slice(0, 3), - components: (openaiData.components || []).filter(component => - ['ChatGPT', 'API', 'Playground'].some(name => - (component.name || '').toLowerCase().includes(name.toLowerCase()) - ) - ) - }; - - setStatusData(transformedData); - setLastRefresh(new Date()); - console.log('✅ Real OpenAI status loaded successfully!'); - + } + + setStatusData(transformedData) + setLastRefresh(new Date()) + console.log('✅ Real OpenAI status loaded successfully!') } catch (err) { - console.error('Failed to fetch real status:', err); - + console.error('Failed to fetch real status:', err) + // Fallback: try alternative proxy try { - console.log('Trying alternative proxy...'); - const altResponse = await fetch(`https://cors-anywhere.herokuapp.com/https://status.openai.com/api/v2/summary.json`); - + console.log('Trying alternative proxy...') + const altResponse = await fetch( + `https://cors-anywhere.herokuapp.com/https://status.openai.com/api/v2/summary.json` + ) + if (altResponse.ok) { - const altData = await altResponse.json(); + const altData = await altResponse.json() setStatusData({ - status: mapOpenAIStatusClient(altData.status?.indicator || 'operational'), + status: mapOpenAIStatusClient( + altData.status?.indicator || 'operational' + ), lastUpdated: new Date().toISOString(), - incidents: [] - }); - setLastRefresh(new Date()); - console.log('✅ Alternative proxy worked!'); - return; + incidents: [], + }) + setLastRefresh(new Date()) + console.log('✅ Alternative proxy worked!') + return } } catch (altErr) { - console.log('Alternative proxy also failed'); + console.log('Alternative proxy also failed') } - + // Final fallback - setError('Unable to fetch real-time status'); + setError('Unable to fetch real-time status') setStatusData({ - status: 'operational', + status: 'operational' as const, lastUpdated: new Date().toISOString(), - incidents: [] - }); - setLastRefresh(new Date()); - console.log('Using fallback status'); - + incidents: [], + }) + setLastRefresh(new Date()) + console.log('Using fallback status') } finally { - setLoading(false); + setLoading(false) } - }; + }, []) // Client-side status mapping function - const mapOpenAIStatusClient = (indicator: string) => { + const mapOpenAIStatusClient = (indicator: string): StatusData['status'] => { switch (indicator.toLowerCase()) { case 'none': case 'operational': - return 'operational'; + return 'operational' case 'minor': - return 'degraded'; + return 'degraded' case 'major': - return 'partial_outage'; + return 'partial_outage' case 'critical': - return 'major_outage'; + return 'major_outage' case 'maintenance': - return 'under_maintenance'; + return 'under_maintenance' default: - return 'operational'; // Default to operational + return 'operational' as const // Default to operational } - }; + } useEffect(() => { - fetchStatus(); + fetchStatus() // Refresh every 2 minutes for more real-time updates - const interval = setInterval(fetchStatus, 2 * 60 * 1000); - return () => clearInterval(interval); - }, []); + const interval = setInterval(fetchStatus, 2 * 60 * 1000) + return () => clearInterval(interval) + }, [fetchStatus]) const handleRefresh = () => { - fetchStatus(); - }; + fetchStatus() + } if (loading && !statusData) { return (
- Checking OpenAI Status... + + Checking OpenAI Status... +
- ); + ) } if (error) { @@ -190,7 +197,9 @@ export const OpenAIStatusChecker: React.FC = () => {
-

Unable to Check Status

+

+ Unable to Check Status +

{error}

@@ -202,7 +211,7 @@ export const OpenAIStatusChecker: React.FC = () => { - ); + ) } return ( @@ -211,7 +220,9 @@ export const OpenAIStatusChecker: React.FC = () => {
-

OpenAI Services

+

+ OpenAI Services +

Last updated: {new Date(lastRefresh).toLocaleTimeString()}

@@ -222,16 +233,22 @@ export const OpenAIStatusChecker: React.FC = () => { disabled={loading} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50" > - +
-
+
{getStatusText(statusData?.status || 'unknown')}
-

Quick Status Check

+

+ Quick Status Check +

ChatGPT @@ -249,13 +266,18 @@ export const OpenAIStatusChecker: React.FC = () => {
- {error ? 'Using fallback status • ' : '🟢 Real-time data from OpenAI • '} + {error + ? 'Using fallback status • ' + : '🟢 Real-time data from OpenAI • '} Updated: {new Date(lastRefresh).toLocaleTimeString()}
- + View detailed status guide
- ); -}; + ) +}