'use client'; import React, { useState, useEffect } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap } from 'lucide-react'; interface ConnectionDetail { ID: number; USER: string; HOST: string; DB: string; COMMAND: string; TIME: number; STATE: string; INFO?: string; } interface ConnectionData { connectionCount: number; connections: ConnectionDetail[]; } export default function EmergencyCleanupPage() { const [connectionData, setConnectionData] = useState(null); const [loading, setLoading] = useState(false); const [message, setMessage] = useState(''); const [error, setError] = useState(''); // 獲取連線詳情 const fetchConnectionDetails = async () => { try { setLoading(true); const response = await fetch('/api/emergency-cleanup?action=details'); const data = await response.json(); if (data.success) { setConnectionData(data.data); setMessage('連線詳情更新成功'); setError(''); } else { setError(data.error || '獲取連線詳情失敗'); } } catch (err) { setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤')); } finally { setLoading(false); } }; // 執行緊急清理 const executeEmergencyCleanup = async () => { if (!confirm('確定要執行緊急清理嗎?這會關閉所有資料庫連線!')) { return; } try { setLoading(true); const response = await fetch('/api/emergency-cleanup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: 'cleanup' }), }); const data = await response.json(); if (data.success) { setMessage('緊急清理完成'); setError(''); await fetchConnectionDetails(); // 重新獲取詳情 } else { setError(data.error || '緊急清理失敗'); } } catch (err) { setError('緊急清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤')); } finally { setLoading(false); } }; // 強制殺死所有連線 const forceKillAllConnections = async () => { if (!confirm('確定要強制殺死所有連線嗎?這會立即終止所有資料庫連線!')) { return; } try { setLoading(true); const response = await fetch('/api/emergency-cleanup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: 'kill-all' }), }); const data = await response.json(); if (data.success) { setMessage('強制殺死連線完成'); setError(''); await fetchConnectionDetails(); // 重新獲取詳情 } else { setError(data.error || '強制殺死連線失敗'); } } catch (err) { setError('強制殺死連線錯誤: ' + (err instanceof Error ? err.message : '未知錯誤')); } finally { setLoading(false); } }; // 組件載入時獲取連線詳情 useEffect(() => { fetchConnectionDetails(); }, []); return (

緊急連線清理

緊急清理和強制關閉資料庫連線

{/* 警告提示 */} 警告: 這些操作會立即關閉所有資料庫連線,可能影響正在運行的應用程式。請謹慎使用! {/* 連線統計 */} {connectionData && ( 當前連線狀態 資料庫連線的詳細信息
總連線數: {connectionData.connectionCount} 10 ? "destructive" : "default"} className="text-lg px-3 py-1" > 狀態: {connectionData.connectionCount > 10 ? "異常" : "正常"}
)} {/* 緊急操作 */} 緊急操作 立即清理和關閉資料庫連線
{/* 連線詳情列表 */} {connectionData && connectionData.connections.length > 0 && ( 連線詳情列表 當前所有資料庫連線的詳細信息
{connectionData.connections.map((conn, index) => (
#{conn.ID}

用戶: {conn.USER} | 主機: {conn.HOST}

資料庫: {conn.DB} | 命令: {conn.COMMAND}

時間: {conn.TIME}s | 狀態: {conn.STATE}

{conn.INFO && (

查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}

)}
))}
)} {/* 訊息顯示 */} {message && ( {message} )} {error && ( {error} )} {/* 使用說明 */} 使用說明

緊急清理連線: 停止監控並關閉所有連線池,這是較溫和的方式

強制殺死所有連線: 直接殺死資料庫中的所有連線,這是更激進的方式

重新整理: 獲取最新的連線狀態和詳情

• 建議先嘗試「緊急清理連線」,如果無效再使用「強制殺死所有連線」

); }