443 lines
14 KiB
TypeScript
443 lines
14 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, AlertTriangle, Trash2, Eye, Zap, Globe } from 'lucide-react';
|
||
|
||
interface ConnectionDetail {
|
||
ID: number;
|
||
USER: string;
|
||
HOST: string;
|
||
DB: string;
|
||
COMMAND: string;
|
||
TIME: number;
|
||
STATE: string;
|
||
INFO?: string;
|
||
}
|
||
|
||
interface ConnectionStatus {
|
||
ip: string;
|
||
connectionCount: number;
|
||
connections: ConnectionDetail[];
|
||
}
|
||
|
||
interface LocalStats {
|
||
clientIP: string;
|
||
trackedConnections: number;
|
||
connections: Array<{
|
||
connectionId: string;
|
||
createdAt: string;
|
||
lastUsed: string;
|
||
userAgent?: string;
|
||
}>;
|
||
}
|
||
|
||
export default function IPCleanupPage() {
|
||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
|
||
const [localStats, setLocalStats] = useState<LocalStats | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [message, setMessage] = useState<string>('');
|
||
const [error, setError] = useState<string>('');
|
||
const [targetIP, setTargetIP] = useState<string>('');
|
||
|
||
// 獲取當前 IP 的連線狀態
|
||
const fetchCurrentIPStatus = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/ip-cleanup?action=status');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setConnectionStatus(data.data);
|
||
setMessage('當前 IP 連線狀態更新成功');
|
||
setError('');
|
||
} else {
|
||
setError(data.error || '獲取當前 IP 連線狀態失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 獲取指定 IP 的連線狀態
|
||
const fetchSpecificIPStatus = async () => {
|
||
if (!targetIP.trim()) {
|
||
setError('請輸入目標 IP 地址');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch(`/api/ip-cleanup?action=status-specific&ip=${encodeURIComponent(targetIP)}`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setConnectionStatus(data.data);
|
||
setMessage(`指定 IP ${targetIP} 的連線狀態更新成功`);
|
||
setError('');
|
||
} else {
|
||
setError(data.error || '獲取指定 IP 連線狀態失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 獲取本地連線統計
|
||
const fetchLocalStats = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/ip-cleanup?action=local-stats');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setLocalStats(data.data);
|
||
setMessage('本地連線統計更新成功');
|
||
setError('');
|
||
} else {
|
||
setError(data.error || '獲取本地連線統計失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 清理當前 IP 的連線
|
||
const cleanupCurrentIP = async () => {
|
||
if (!confirm('確定要清理當前 IP 的所有連線嗎？')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/ip-cleanup', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ action: 'cleanup-current' }),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage(data.message || '當前 IP 連線清理完成');
|
||
setError('');
|
||
await fetchCurrentIPStatus(); // 重新獲取狀態
|
||
} else {
|
||
setError(data.error || '當前 IP 連線清理失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('當前 IP 連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 清理指定 IP 的連線
|
||
const cleanupSpecificIP = async () => {
|
||
if (!targetIP.trim()) {
|
||
setError('請輸入目標 IP 地址');
|
||
return;
|
||
}
|
||
|
||
if (!confirm(`確定要清理 IP ${targetIP} 的所有連線嗎？`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/ip-cleanup', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'cleanup-specific',
|
||
targetIP: targetIP.trim()
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage(data.message || `IP ${targetIP} 連線清理完成`);
|
||
setError('');
|
||
await fetchSpecificIPStatus(); // 重新獲取狀態
|
||
} else {
|
||
setError(data.error || `IP ${targetIP} 連線清理失敗`);
|
||
}
|
||
} catch (err) {
|
||
setError(`IP ${targetIP} 連線清理錯誤: ` + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 清理本地追蹤的連線
|
||
const cleanupLocalConnections = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/ip-cleanup', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ action: 'cleanup-local' }),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setMessage(data.message || '本地連線清理完成');
|
||
setError('');
|
||
await fetchLocalStats(); // 重新獲取統計
|
||
} else {
|
||
setError(data.error || '本地連線清理失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('本地連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 組件載入時獲取狀態
|
||
useEffect(() => {
|
||
fetchCurrentIPStatus();
|
||
fetchLocalStats();
|
||
}, []);
|
||
|
||
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">IP 連線管理</h1>
|
||
<p className="text-muted-foreground">
|
||
基於 IP 地址的智能連線清理和管理
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={fetchCurrentIPStatus}
|
||
disabled={loading}
|
||
variant="outline"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
|
||
當前 IP
|
||
</Button>
|
||
<Button
|
||
onClick={fetchLocalStats}
|
||
disabled={loading}
|
||
variant="outline"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||
本地統計
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 當前 IP 連線狀態 */}
|
||
{connectionStatus && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Globe className="h-5 w-5" />
|
||
IP 連線狀態
|
||
</CardTitle>
|
||
<CardDescription>
|
||
IP: {connectionStatus.ip} | 連線數: {connectionStatus.connectionCount}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center gap-4">
|
||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||
連線數: {connectionStatus.connectionCount}
|
||
</Badge>
|
||
<Badge
|
||
variant={connectionStatus.connectionCount > 5 ? "destructive" : "default"}
|
||
className="text-lg px-3 py-1"
|
||
>
|
||
狀態: {connectionStatus.connectionCount > 5 ? "異常" : "正常"}
|
||
</Badge>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 本地連線統計 */}
|
||
{localStats && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Database className="h-5 w-5" />
|
||
本地連線統計
|
||
</CardTitle>
|
||
<CardDescription>
|
||
客戶端 IP: {localStats.clientIP} | 追蹤連線數: {localStats.trackedConnections}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2">
|
||
{localStats.connections.map((conn, index) => (
|
||
<div key={index} className="flex items-center justify-between p-2 border rounded">
|
||
<div>
|
||
<p className="text-sm font-medium">連線 ID: {conn.connectionId}</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
創建: {new Date(conn.createdAt).toLocaleString()} |
|
||
最後使用: {new Date(conn.lastUsed).toLocaleString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 操作按鈕 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Trash2 className="h-5 w-5" />
|
||
IP 連線清理
|
||
</CardTitle>
|
||
<CardDescription>
|
||
清理指定 IP 地址的資料庫連線
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<Button
|
||
onClick={cleanupCurrentIP}
|
||
disabled={loading}
|
||
variant="destructive"
|
||
className="w-full"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||
清理當前 IP 連線
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={cleanupLocalConnections}
|
||
disabled={loading}
|
||
variant="outline"
|
||
className="w-full"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
|
||
清理本地追蹤連線
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 指定 IP 清理 */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="targetIP">指定 IP 地址</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
id="targetIP"
|
||
value={targetIP}
|
||
onChange={(e) => setTargetIP(e.target.value)}
|
||
placeholder="例如: 192.168.1.100"
|
||
className="flex-1"
|
||
/>
|
||
<Button
|
||
onClick={fetchSpecificIPStatus}
|
||
disabled={loading || !targetIP.trim()}
|
||
variant="outline"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
onClick={cleanupSpecificIP}
|
||
disabled={loading || !targetIP.trim()}
|
||
variant="destructive"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 連線詳情列表 */}
|
||
{connectionStatus && connectionStatus.connections.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>連線詳情列表</CardTitle>
|
||
<CardDescription>
|
||
IP {connectionStatus.ip} 的所有資料庫連線
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||
{connectionStatus.connections.map((conn, index) => (
|
||
<div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
|
||
<div className="flex items-center gap-4">
|
||
<Badge variant="outline">#{conn.ID}</Badge>
|
||
<div>
|
||
<p className="text-sm font-medium">
|
||
用戶: {conn.USER} | 主機: {conn.HOST}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
資料庫: {conn.DB} | 命令: {conn.COMMAND}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
時間: {conn.TIME}s | 狀態: {conn.STATE}
|
||
</p>
|
||
{conn.INFO && (
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 訊息顯示 */}
|
||
{message && (
|
||
<Alert>
|
||
<Database className="h-4 w-4" />
|
||
<AlertDescription>{message}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{error && (
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 使用說明 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>IP 連線管理說明</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||
<p>• <strong>當前 IP 連線:</strong> 顯示和清理當前訪問者的所有資料庫連線</p>
|
||
<p>• <strong>指定 IP 連線:</strong> 輸入特定 IP 地址來查看和清理該 IP 的連線</p>
|
||
<p>• <strong>本地追蹤連線:</strong> 清理應用程式內部追蹤的連線記錄</p>
|
||
<p>• <strong>智能清理:</strong> 只清理指定 IP 的連線，不影響其他用戶</p>
|
||
<p>• <strong>關閉網站時:</strong> 系統會自動清理當前 IP 的所有連線</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|