feat(proxy): add proxy pool and per-connection binding + strictProxy support
- Centralize proxy management with reusable proxy pools - Per-connection proxy binding with legacy fallback - Add strictProxy option: fail hard instead of silently falling back to direct - Resolve alicode-intl conflict: keep alicode-intl support + proxy support Made-with: Cursor
This commit is contained in:
decolua committed
1 parent
4c469291a1
commit
880f4eca91
22 files changed
+1811
-146
No files matched your search
@@ -0,0 +1,489 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Badge, Button, Card, CardSkeleton, Input, Modal, Toggle } from "@/shared/components";
|
||||
import { useNotificationStore } from "@/store/notificationStore";
|
||||
|
||||
function getStatusVariant(status) {
|
||||
if (status === "active") return "success";
|
||||
if (status === "error") return "error";
|
||||
return "default";
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
if (!value) return "Never";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "Never";
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function normalizeFormData(data = {}) {
|
||||
return {
|
||||
name: data.name || "",
|
||||
proxyUrl: data.proxyUrl || "",
|
||||
noProxy: data.noProxy || "",
|
||||
isActive: data.isActive !== false,
|
||||
strictProxy: data.strictProxy === true,
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProxyPoolsPage() {
|
||||
const [proxyPools, setProxyPools] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showFormModal, setShowFormModal] = useState(false);
|
||||
const [showBatchImportModal, setShowBatchImportModal] = useState(false);
|
||||
const [editingProxyPool, setEditingProxyPool] = useState(null);
|
||||
const [formData, setFormData] = useState(normalizeFormData());
|
||||
const [batchImportText, setBatchImportText] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [testingId, setTestingId] = useState(null);
|
||||
const notify = useNotificationStore();
|
||||
|
||||
const fetchProxyPools = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/proxy-pools?includeUsage=true", { cache: "no-store" });
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setProxyPools(data.proxyPools || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error fetching proxy pools:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProxyPools();
|
||||
}, [fetchProxyPools]);
|
||||
|
||||
const resetForm = () => {
|
||||
setEditingProxyPool(null);
|
||||
setFormData(normalizeFormData());
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
resetForm();
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
const openEditModal = (proxyPool) => {
|
||||
setEditingProxyPool(proxyPool);
|
||||
setFormData(normalizeFormData(proxyPool));
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
const closeFormModal = () => {
|
||||
setShowFormModal(false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const payload = {
|
||||
name: formData.name.trim(),
|
||||
proxyUrl: formData.proxyUrl.trim(),
|
||||
noProxy: formData.noProxy.trim(),
|
||||
isActive: formData.isActive === true,
|
||||
strictProxy: formData.strictProxy === true,
|
||||
};
|
||||
|
||||
if (!payload.name || !payload.proxyUrl) return;
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const isEdit = !!editingProxyPool;
|
||||
const res = await fetch(isEdit ? `/api/proxy-pools/${editingProxyPool.id}` : "/api/proxy-pools", {
|
||||
method: isEdit ? "PUT" : "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
await fetchProxyPools();
|
||||
closeFormModal();
|
||||
notify.success(editingProxyPool ? "Proxy pool updated" : "Proxy pool created");
|
||||
} else {
|
||||
const data = await res.json();
|
||||
notify.error(data.error || "Failed to save proxy pool");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error saving proxy pool:", error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (proxyPool) => {
|
||||
const deleting = confirm(`Delete proxy pool \"${proxyPool.name}\"?`);
|
||||
if (!deleting) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/proxy-pools/${proxyPool.id}`, { method: "DELETE" });
|
||||
if (res.ok) {
|
||||
setProxyPools((prev) => prev.filter((item) => item.id !== proxyPool.id));
|
||||
notify.success("Proxy pool deleted");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
if (res.status === 409) {
|
||||
notify.warning(`Cannot delete: ${data.boundConnectionCount || 0} connection(s) are still using this pool.`);
|
||||
} else {
|
||||
notify.error(data.error || "Failed to delete proxy pool");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error deleting proxy pool:", error);
|
||||
notify.error("Failed to delete proxy pool");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async (proxyPoolId) => {
|
||||
setTestingId(proxyPoolId);
|
||||
try {
|
||||
const res = await fetch(`/api/proxy-pools/${proxyPoolId}/test`, { method: "POST" });
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
notify.error(data.error || "Failed to test proxy");
|
||||
return;
|
||||
}
|
||||
|
||||
await fetchProxyPools();
|
||||
notify.success(data.ok ? "Proxy test passed" : "Proxy test failed");
|
||||
} catch (error) {
|
||||
console.log("Error testing proxy pool:", error);
|
||||
notify.error("Failed to test proxy");
|
||||
} finally {
|
||||
setTestingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const openBatchImportModal = () => {
|
||||
setBatchImportText("");
|
||||
setShowBatchImportModal(true);
|
||||
};
|
||||
|
||||
const closeBatchImportModal = () => {
|
||||
if (importing) return;
|
||||
setShowBatchImportModal(false);
|
||||
};
|
||||
|
||||
const parseProxyLine = (line) => {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) return null;
|
||||
|
||||
if (trimmed.includes("://")) {
|
||||
const parsed = new URL(trimmed);
|
||||
const hostLabel = parsed.port ? `${parsed.hostname}:${parsed.port}` : parsed.hostname;
|
||||
return {
|
||||
proxyUrl: parsed.toString(),
|
||||
name: `Imported ${hostLabel}`,
|
||||
};
|
||||
}
|
||||
|
||||
const parts = trimmed.split(":");
|
||||
if (parts.length === 4) {
|
||||
const [host, port, username, password] = parts;
|
||||
if (!host || !port || !username || !password) {
|
||||
throw new Error("Invalid host:port:user:pass format");
|
||||
}
|
||||
|
||||
const proxyUrl = `http://${encodeURIComponent(username)}:${encodeURIComponent(password)}@${host}:${port}`;
|
||||
const parsed = new URL(proxyUrl);
|
||||
return {
|
||||
proxyUrl: parsed.toString(),
|
||||
name: `Imported ${host}:${port}`,
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error("Unsupported format");
|
||||
};
|
||||
|
||||
const handleBatchImport = async () => {
|
||||
const lines = batchImportText
|
||||
.split(/\r?\n/)
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
if (lines.length === 0) {
|
||||
notify.warning("Please paste at least one proxy line.");
|
||||
return;
|
||||
}
|
||||
|
||||
const parsedEntries = [];
|
||||
const invalidLines = [];
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
try {
|
||||
const parsed = parseProxyLine(line);
|
||||
if (parsed) {
|
||||
parsedEntries.push({
|
||||
...parsed,
|
||||
lineNumber: index + 1,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
invalidLines.push(`Line ${index + 1}: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
if (invalidLines.length > 0) {
|
||||
notify.error(`Invalid proxy format:\n${invalidLines.join("\n")}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setImporting(true);
|
||||
try {
|
||||
const existingKeys = new Set(
|
||||
proxyPools.map((pool) => `${(pool.proxyUrl || "").trim()}|||${(pool.noProxy || "").trim()}`)
|
||||
);
|
||||
|
||||
let created = 0;
|
||||
let skipped = 0;
|
||||
let failed = 0;
|
||||
|
||||
for (const entry of parsedEntries) {
|
||||
const dedupeKey = `${entry.proxyUrl}|||`;
|
||||
if (existingKeys.has(dedupeKey)) {
|
||||
skipped += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const res = await fetch("/api/proxy-pools", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: entry.name,
|
||||
proxyUrl: entry.proxyUrl,
|
||||
noProxy: "",
|
||||
isActive: true,
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
created += 1;
|
||||
existingKeys.add(dedupeKey);
|
||||
} else {
|
||||
failed += 1;
|
||||
}
|
||||
}
|
||||
|
||||
await fetchProxyPools();
|
||||
setShowBatchImportModal(false);
|
||||
notify.success(`Batch import completed: Created ${created}, Skipped ${skipped}, Failed ${failed}`);
|
||||
} catch (error) {
|
||||
console.log("Error batch importing proxies:", error);
|
||||
notify.error("Batch import failed");
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCount = useMemo(
|
||||
() => proxyPools.filter((pool) => pool.isActive === true).length,
|
||||
[proxyPools]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Proxy Pools</h1>
|
||||
<p className="text-sm text-text-muted mt-1">
|
||||
Manage reusable per-connection proxies and bind them to provider connections.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="secondary" icon="upload" onClick={openBatchImportModal}>
|
||||
Batch Import Proxies
|
||||
</Button>
|
||||
<Button icon="add" onClick={openCreateModal}>Add Proxy Pool</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="default">Total: {proxyPools.length}</Badge>
|
||||
<Badge variant="success">Active: {activeCount}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{proxyPools.length === 0 ? (
|
||||
<div className="text-center py-10">
|
||||
<p className="text-text-main font-medium mb-1">No proxy pool entries yet</p>
|
||||
<p className="text-sm text-text-muted mb-4">
|
||||
Create a proxy pool entry, then assign it to connections.
|
||||
</p>
|
||||
<Button icon="add" onClick={openCreateModal}>Add Proxy Pool</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col divide-y divide-black/[0.04] dark:divide-white/[0.05]">
|
||||
{proxyPools.map((pool) => (
|
||||
<div key={pool.id} className="py-3 flex items-center justify-between gap-3 group">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="text-sm font-medium truncate">{pool.name}</p>
|
||||
<Badge variant={getStatusVariant(pool.testStatus)} size="sm" dot>
|
||||
{pool.testStatus || "unknown"}
|
||||
</Badge>
|
||||
<Badge variant={pool.isActive ? "success" : "default"} size="sm">
|
||||
{pool.isActive ? "active" : "inactive"}
|
||||
</Badge>
|
||||
<Badge variant="default" size="sm">
|
||||
{pool.boundConnectionCount || 0} bound
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-text-muted truncate mt-1">{pool.proxyUrl}</p>
|
||||
{pool.noProxy ? (
|
||||
<p className="text-xs text-text-muted truncate">No proxy: {pool.noProxy}</p>
|
||||
) : null}
|
||||
<p className="text-[11px] text-text-muted mt-1">
|
||||
Last tested: {formatDateTime(pool.lastTestedAt)}
|
||||
{pool.lastError ? ` · ${pool.lastError}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleTest(pool.id)}
|
||||
className="p-2 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary"
|
||||
title="Test proxy"
|
||||
disabled={testingId === pool.id}
|
||||
>
|
||||
<span
|
||||
className="material-symbols-outlined text-[18px]"
|
||||
style={testingId === pool.id ? { animation: "spin 1s linear infinite" } : undefined}
|
||||
>
|
||||
{testingId === pool.id ? "progress_activity" : "science"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openEditModal(pool)}
|
||||
className="p-2 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary"
|
||||
title="Edit"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(pool)}
|
||||
className="p-2 rounded hover:bg-red-500/10 text-red-500"
|
||||
title="Delete"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
isOpen={showBatchImportModal}
|
||||
title="Batch Import Proxies"
|
||||
onClose={closeBatchImportModal}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-text-main mb-1 block">Paste Proxy List (One per line)</label>
|
||||
<textarea
|
||||
value={batchImportText}
|
||||
onChange={(e) => setBatchImportText(e.target.value)}
|
||||
placeholder={"http://user:pass@127.0.0.1:7897\n127.0.0.1:7897:user:pass"}
|
||||
className="w-full min-h-[180px] py-2 px-3 text-sm text-text-main bg-white dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-md focus:ring-1 focus:ring-primary/30 focus:border-primary/50 focus:outline-none transition-all"
|
||||
/>
|
||||
<p className="text-xs text-text-muted mt-1">
|
||||
Supported formats: protocol://user:pass@host:port, host:port:user:pass
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button fullWidth onClick={handleBatchImport} disabled={!batchImportText.trim() || importing}>
|
||||
{importing ? "Importing..." : "Import"}
|
||||
</Button>
|
||||
<Button fullWidth variant="ghost" onClick={closeBatchImportModal} disabled={importing}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
isOpen={showFormModal}
|
||||
title={editingProxyPool ? "Edit Proxy Pool" : "Add Proxy Pool"}
|
||||
onClose={closeFormModal}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="Office Proxy"
|
||||
/>
|
||||
<Input
|
||||
label="Proxy URL"
|
||||
value={formData.proxyUrl}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||
placeholder="http://127.0.0.1:7897"
|
||||
/>
|
||||
<Input
|
||||
label="No Proxy"
|
||||
value={formData.noProxy}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, noProxy: e.target.value }))}
|
||||
placeholder="localhost,127.0.0.1,.internal"
|
||||
hint="Comma-separated hosts/domains to bypass proxy"
|
||||
/>
|
||||
|
||||
<div className="rounded-lg border border-border/50 p-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-sm">Active</p>
|
||||
<p className="text-xs text-text-muted">Inactive pools are ignored by runtime resolution.</p>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={formData.isActive === true}
|
||||
onChange={() => setFormData((prev) => ({ ...prev, isActive: !prev.isActive }))}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border/50 p-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-sm">Strict Proxy</p>
|
||||
<p className="text-xs text-text-muted">Fail request if proxy is unreachable instead of falling back to direct.</p>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={formData.strictProxy === true}
|
||||
onChange={() => setFormData((prev) => ({ ...prev, strictProxy: !prev.strictProxy }))}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={handleSave}
|
||||
disabled={!formData.name.trim() || !formData.proxyUrl.trim() || saving}
|
||||
>
|
||||
{saving ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
<Button fullWidth variant="ghost" onClick={closeFormModal} disabled={saving}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user