'use client'; // ===================================================== // 資料庫監控組件 // ===================================================== import React, { useState, useEffect } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { RefreshCw, Database, Server, AlertTriangle, CheckCircle } from 'lucide-react'; interface DatabaseStatus { isEnabled: boolean; currentDatabase: 'master' | 'slave'; masterHealthy: boolean; slaveHealthy: boolean; lastHealthCheck: string; consecutiveFailures: number; uptime: number; timestamp: string; } interface DatabaseMonitorProps { className?: string; } export function DatabaseMonitor({ className }: DatabaseMonitorProps) { const [status, setStatus] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [switching, setSwitching] = useState(false); // 獲取資料庫狀態 const fetchStatus = async () => { try { setLoading(true); setError(null); const response = await fetch('/api/admin/database-status'); const data = await response.json(); if (data.success) { setStatus(data.data); } else { setError(data.message); } } catch (err) { setError('無法連接到監控服務'); console.error('獲取資料庫狀態失敗:', err); } finally { setLoading(false); } }; // 切換資料庫 const switchDatabase = async (database: 'master' | 'slave') => { try { setSwitching(true); const response = await fetch('/api/admin/database-status', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: 'switch', database: database }) }); const data = await response.json(); if (data.success) { // 重新獲取狀態 await fetchStatus(); } else { setError(data.message); } } catch (err) { setError('切換資料庫失敗'); console.error('切換資料庫失敗:', err); } finally { setSwitching(false); } }; // 格式化時間 const formatTime = (timestamp: string) => { return new Date(timestamp).toLocaleString('zh-TW'); }; // 格式化運行時間 const formatUptime = (seconds: number) => { const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const secs = Math.floor(seconds % 60); return `${hours}時${minutes}分${secs}秒`; }; // 組件掛載時獲取狀態 useEffect(() => { fetchStatus(); // 每30秒自動刷新 const interval = setInterval(fetchStatus, 30000); return () => clearInterval(interval); }, []); if (loading) { return ( 資料庫監控
載入中...
); } if (error) { return ( 資料庫監控 {error} ); } if (!status) { return ( 資料庫監控

無法獲取資料庫狀態

); } return (
資料庫監控
監控主機和備機資料庫的連接狀態
{/* 整體狀態 */}
備援狀態 {status.isEnabled ? "啟用" : "停用"}
{/* 當前資料庫 */}
當前資料庫 {status.currentDatabase === 'master' ? "主機" : "備機"}
{/* 主機狀態 */}
主機資料庫
{status.masterHealthy ? ( ) : ( )} {status.masterHealthy ? "正常" : "異常"}
{status.masterHealthy && ( )}
{/* 備機狀態 */}
備機資料庫
{status.slaveHealthy ? ( ) : ( )} {status.slaveHealthy ? "正常" : "異常"}
{status.slaveHealthy && ( )}
{/* 統計信息 */}
連續失敗次數 {status.consecutiveFailures}
最後檢查時間 {formatTime(status.lastHealthCheck)}
系統運行時間 {formatUptime(status.uptime)}
{/* 警告信息 */} {status.consecutiveFailures > 0 && ( 資料庫已連續失敗 {status.consecutiveFailures} 次,請檢查連接狀態 )}
); }