372 lines
12 KiB
TypeScript
372 lines
12 KiB
TypeScript
'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 { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Loader2, Database, Trash2, Settings, Activity, Clock, Users } from 'lucide-react';
|
||
|
||
interface ConnectionStats {
|
||
totalConnections: number;
|
||
idleConnections: number;
|
||
oldConnections: number;
|
||
maxIdleTime: number;
|
||
maxConnectionAge: number;
|
||
connections: Array<{
|
||
createdAt: string;
|
||
lastUsed: string;
|
||
idleTime: number;
|
||
age: number;
|
||
userId?: string;
|
||
sessionId?: string;
|
||
}>;
|
||
}
|
||
|
||
export default function ConnectionMonitorPage() {
|
||
const [stats, setStats] = useState<ConnectionStats | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [message, setMessage] = useState<string>('');
|
||
const [error, setError] = useState<string>('');
|
||
const [maxIdleTime, setMaxIdleTime] = useState<number>(300000); // 5分鐘
|
||
const [maxConnectionAge, setMaxConnectionAge] = useState<number>(1800000); // 30分鐘
|
||
|
||
// 獲取連線統計
|
||
const fetchStats = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/connection-monitor?action=stats');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setStats(data.data);
|
||
setMessage('統計更新成功');
|
||
setError('');
|
||
} else {
|
||
setError(data.error || '獲取統計失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 強制清理連線
|
||
const forceCleanup = async () => {
|
||
if (!confirm('確定要強制清理所有連線嗎？這可能會影響正在進行的操作！')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/connection-monitor?action=cleanup');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage('連線清理完成');
|
||
setError('');
|
||
await fetchStats(); // 重新獲取統計
|
||
} else {
|
||
setError(data.error || '清理失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 測試智能連線
|
||
const testConnection = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/connection-monitor?action=test');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage('智能連線測試成功');
|
||
setError('');
|
||
await fetchStats(); // 重新獲取統計
|
||
} else {
|
||
setError(data.error || '測試失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 更新清理配置
|
||
const updateConfig = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/connection-monitor', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'config',
|
||
maxIdleTime,
|
||
maxConnectionAge
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage('清理配置更新成功');
|
||
setError('');
|
||
await fetchStats(); // 重新獲取統計
|
||
} else {
|
||
setError(data.error || '配置更新失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('配置更新錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 格式化時間
|
||
const formatTime = (ms: number) => {
|
||
const seconds = Math.floor(ms / 1000);
|
||
const minutes = Math.floor(seconds / 60);
|
||
const hours = Math.floor(minutes / 60);
|
||
|
||
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
||
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
||
return `${seconds}s`;
|
||
};
|
||
|
||
// 組件載入時獲取統計
|
||
useEffect(() => {
|
||
fetchStats();
|
||
|
||
// 每30秒自動更新統計
|
||
const interval = setInterval(fetchStats, 30000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="container mx-auto p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">連線監控管理</h1>
|
||
<p className="text-muted-foreground">
|
||
監控和管理資料庫連線的生命週期
|
||
</p>
|
||
</div>
|
||
<Button
|
||
onClick={fetchStats}
|
||
disabled={loading}
|
||
variant="outline"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Activity className="h-4 w-4" />}
|
||
重新整理
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 統計概覽 */}
|
||
{stats && (
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<Card>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2">
|
||
<Database className="h-5 w-5 text-blue-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-muted-foreground">總連線數</p>
|
||
<p className="text-2xl font-bold">{stats.totalConnections}</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2">
|
||
<Clock className="h-5 w-5 text-yellow-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-muted-foreground">空閒連線</p>
|
||
<p className="text-2xl font-bold">{stats.idleConnections}</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2">
|
||
<Users className="h-5 w-5 text-red-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-muted-foreground">舊連線</p>
|
||
<p className="text-2xl font-bold">{stats.oldConnections}</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center gap-2">
|
||
<Activity className="h-5 w-5 text-green-500" />
|
||
<div>
|
||
<p className="text-sm font-medium text-muted-foreground">健康狀態</p>
|
||
<p className="text-2xl font-bold">
|
||
{stats.idleConnections + stats.oldConnections === 0 ? '良好' : '需清理'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
|
||
{/* 操作按鈕 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Settings className="h-5 w-5" />
|
||
連線管理
|
||
</CardTitle>
|
||
<CardDescription>
|
||
管理和清理資料庫連線
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<Button
|
||
onClick={testConnection}
|
||
disabled={loading}
|
||
variant="outline"
|
||
className="w-full"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||
測試智能連線
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={forceCleanup}
|
||
disabled={loading}
|
||
variant="destructive"
|
||
className="w-full"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||
強制清理連線
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={updateConfig}
|
||
disabled={loading}
|
||
variant="secondary"
|
||
className="w-full"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Settings className="h-4 w-4" />}
|
||
更新配置
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 配置設定 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="maxIdleTime">最大空閒時間 (毫秒)</Label>
|
||
<Input
|
||
id="maxIdleTime"
|
||
type="number"
|
||
value={maxIdleTime}
|
||
onChange={(e) => setMaxIdleTime(Number(e.target.value))}
|
||
placeholder="300000 (5分鐘)"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="maxConnectionAge">最大連線年齡 (毫秒)</Label>
|
||
<Input
|
||
id="maxConnectionAge"
|
||
type="number"
|
||
value={maxConnectionAge}
|
||
onChange={(e) => setMaxConnectionAge(Number(e.target.value))}
|
||
placeholder="1800000 (30分鐘)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 連線詳情 */}
|
||
{stats && stats.connections.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>連線詳情</CardTitle>
|
||
<CardDescription>
|
||
當前活躍的資料庫連線列表
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2">
|
||
{stats.connections.map((conn, index) => (
|
||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
||
<div className="flex items-center gap-4">
|
||
<Badge variant="outline">#{index + 1}</Badge>
|
||
<div>
|
||
<p className="text-sm font-medium">
|
||
創建時間: {new Date(conn.createdAt).toLocaleString()}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
最後使用: {new Date(conn.lastUsed).toLocaleString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant={conn.idleTime > stats.maxIdleTime ? "destructive" : "default"}>
|
||
空閒: {formatTime(conn.idleTime)}
|
||
</Badge>
|
||
<Badge variant={conn.age > stats.maxConnectionAge ? "destructive" : "default"}>
|
||
年齡: {formatTime(conn.age)}
|
||
</Badge>
|
||
{conn.userId && (
|
||
<Badge variant="secondary">用戶: {conn.userId}</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 訊息顯示 */}
|
||
{message && (
|
||
<Alert>
|
||
<Activity className="h-4 w-4" />
|
||
<AlertDescription>{message}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{error && (
|
||
<Alert variant="destructive">
|
||
<Database className="h-4 w-4" />
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 說明資訊 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>智能連線管理說明</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||
<p>• <strong>自動清理:</strong> 系統每30秒自動檢查並清理空閒或過期的連線</p>
|
||
<p>• <strong>智能追蹤:</strong> 追蹤每個連線的創建時間、最後使用時間和用戶信息</p>
|
||
<p>• <strong>即時監控:</strong> 實時顯示連線狀態，幫助識別連線洩漏問題</p>
|
||
<p>• <strong>自動釋放:</strong> 查詢完成後自動釋放連線，避免連線累積</p>
|
||
<p>• <strong>用戶關閉網頁:</strong> 空閒連線會在設定的時間後自動清理</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|