keyhan
97cd5e989a
Replace every native <select> across the dashboard, admin pages, and shared components with the custom Select used by the optional-service version pickers, for consistent styling and mobile-safe anchoring. Add a disabled prop to Select to cover the former read-only native cases. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
403 lines
17 KiB
TypeScript
403 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import api from '@/lib/api';
|
|
import { toast } from 'react-toastify';
|
|
import { useT, useLocale } from '@/i18n/I18nProvider';
|
|
import type { Cluster, ClusterPool } from '@/types';
|
|
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
|
|
import { useConfirm } from '@/components/confirm-modal';
|
|
import { Select } from '@/components/ui/select';
|
|
|
|
export default function AdminPoolsPage() {
|
|
const t = useT();
|
|
const p = t.dashboard.pools;
|
|
const locale = useLocale();
|
|
const strategyOption = (s: string) => (p.strategyOptions as Record<string, string>)[s] ?? s;
|
|
const strategyShort = (s: string) => (p.strategyShort as Record<string, string>)[s] ?? s;
|
|
const clusterStatusLabel = (s?: string) => (s && (p.clusterStatus as Record<string, string>)[s]) || s || '';
|
|
const clusterHealthLabel = (h?: string) => (h && (p.clusterHealth as Record<string, string>)[h]) || h || p.clusterHealth.unknown;
|
|
const queryClient = useQueryClient();
|
|
const confirm = useConfirm();
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingPool, setEditingPool] = useState<ClusterPool | null>(null);
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
description: '',
|
|
strategy: 'weighted-resource' as 'least-apps' | 'round-robin' | 'weighted-round-robin' | 'least-loaded' | 'weighted-resource' | 'region-based',
|
|
clusterIds: [] as string[],
|
|
isDefault: false,
|
|
priority: 100,
|
|
});
|
|
|
|
const { data: pools = [], isLoading } = useQuery<ClusterPool[]>({
|
|
queryKey: ['admin-pools'],
|
|
queryFn: () => api.get('/clusters/pools').then((r) => r.data),
|
|
});
|
|
|
|
const { data: clusters = [] } = useQuery<Cluster[]>({
|
|
queryKey: ['admin-clusters'],
|
|
queryFn: () => api.get('/clusters').then((r) => r.data),
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
|
toast.success(p.poolCreated);
|
|
resetForm();
|
|
},
|
|
onError: (err: any) => {
|
|
toast.error(err?.response?.data?.message || p.createFailed);
|
|
},
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: typeof form }) =>
|
|
api.patch(`/clusters/pools/${id}`, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
|
toast.success(p.poolUpdated);
|
|
resetForm();
|
|
},
|
|
onError: (err: any) => {
|
|
toast.error(err?.response?.data?.message || p.updateFailed);
|
|
},
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
|
toast.success(p.poolDeleted);
|
|
},
|
|
});
|
|
|
|
const resetForm = () => {
|
|
setShowForm(false);
|
|
setEditingPool(null);
|
|
setForm({ name: '', description: '', strategy: 'weighted-resource', clusterIds: [], isDefault: false, priority: 100 });
|
|
};
|
|
|
|
const startEdit = (pool: ClusterPool) => {
|
|
setEditingPool(pool);
|
|
setForm({
|
|
name: pool.name,
|
|
description: pool.description || '',
|
|
strategy: pool.strategy,
|
|
clusterIds: pool.clusterIds,
|
|
isDefault: pool.isDefault || false,
|
|
priority: pool.priority || 100,
|
|
});
|
|
setShowForm(true);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (editingPool) {
|
|
updateMutation.mutate({ id: editingPool.id, data: form });
|
|
} else {
|
|
createMutation.mutate(form);
|
|
}
|
|
};
|
|
|
|
const toggleCluster = (clusterId: string) => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
clusterIds: prev.clusterIds.includes(clusterId)
|
|
? prev.clusterIds.filter((id) => id !== clusterId)
|
|
: [...prev.clusterIds, clusterId],
|
|
}));
|
|
};
|
|
|
|
const strategyIcon = (strategy: string) =>
|
|
strategy === 'weighted-round-robin' || strategy === 'round-robin' ? (
|
|
<RotateCw className="w-3 h-3" />
|
|
) : (
|
|
<BarChart3 className="w-3 h-3" />
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in">
|
|
<div className="page-header">
|
|
<div>
|
|
<h1 className="page-title">{p.title}</h1>
|
|
<p className="page-subtitle">{p.subtitle}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
|
|
className={showForm ? 'btn-ghost' : 'btn-primary'}
|
|
>
|
|
{showForm ? <><X className="w-4 h-4 inline" /> {t.common.cancel}</> : `+ ${p.createPool}`}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Create/Edit Form */}
|
|
{showForm && (
|
|
<div className="card space-y-4 animate-slide-up">
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
{editingPool ? p.editTitle.replace('{name}', editingPool.name) : p.createNewPool}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{p.poolName}</label>
|
|
<input
|
|
className="input-field"
|
|
placeholder="production-pool"
|
|
value={form.name}
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{p.strategy}</label>
|
|
<Select
|
|
size="md"
|
|
ariaLabel={p.strategy}
|
|
value={form.strategy}
|
|
onChange={(v) => setForm({ ...form, strategy: v as any })}
|
|
options={[
|
|
{ value: 'weighted-resource', label: strategyOption('weighted-resource') },
|
|
{ value: 'least-loaded', label: strategyOption('least-loaded') },
|
|
{ value: 'weighted-round-robin', label: strategyOption('weighted-round-robin') },
|
|
{ value: 'region-based', label: strategyOption('region-based') },
|
|
{ value: 'least-apps', label: strategyOption('least-apps') },
|
|
{ value: 'round-robin', label: strategyOption('round-robin') },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{p.priority}</label>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
className="input-field"
|
|
value={form.priority}
|
|
onChange={(e) => setForm({ ...form, priority: Number(e.target.value) || 100 })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{p.description}</label>
|
|
<input
|
|
className="input-field"
|
|
placeholder={p.descriptionPlaceholder}
|
|
value={form.description}
|
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 text-sm text-gray-700">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.isDefault}
|
|
onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
|
|
/>
|
|
{p.useAsDefault}
|
|
</label>
|
|
|
|
{/* Cluster selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{p.selectClusters.replace('{n}', String(form.clusterIds.length))}
|
|
</label>
|
|
{clusters.length === 0 ? (
|
|
<p className="text-sm text-gray-400 py-4 text-center">
|
|
{p.noClustersRegistered}
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{clusters.map((cluster) => {
|
|
const isSelected = form.clusterIds.includes(cluster.id);
|
|
return (
|
|
<button
|
|
key={cluster.id}
|
|
type="button"
|
|
onClick={() => toggleCluster(cluster.id)}
|
|
className={`p-3 rounded-xl border-2 text-left rtl:text-right transition-all ${
|
|
isSelected
|
|
? 'border-primary-500 bg-primary-50 shadow-sm'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
|
|
isSelected ? 'border-primary-500 bg-primary-500' : 'border-gray-300'
|
|
}`}>
|
|
{isSelected && <span className="text-white text-xs">✓</span>}
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-sm text-gray-900">
|
|
{cluster.name}
|
|
{cluster.isDefault && (
|
|
<span className="ml-2 rtl:ml-0 rtl:mr-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
|
|
{p.defaultBadge}
|
|
</span>
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{cluster.provider || p.na} · {cluster.region || p.na} · {p.weight} {cluster.weight || 1}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
cluster.status === 'active'
|
|
? 'bg-green-100 text-green-700'
|
|
: 'bg-red-100 text-red-700'
|
|
}`}>
|
|
{clusterStatusLabel(cluster.status)}
|
|
</span>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
cluster.healthStatus === 'healthy'
|
|
? 'bg-green-100 text-green-700'
|
|
: cluster.healthStatus === 'degraded'
|
|
? 'bg-yellow-100 text-yellow-700'
|
|
: cluster.healthStatus === 'unhealthy'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{clusterHealthLabel(cluster.healthStatus)}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex space-x-3 rtl:space-x-reverse">
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={
|
|
!form.name ||
|
|
form.clusterIds.length === 0 ||
|
|
createMutation.isPending ||
|
|
updateMutation.isPending
|
|
}
|
|
className="btn-primary disabled:opacity-50"
|
|
>
|
|
{createMutation.isPending || updateMutation.isPending
|
|
? <><Clock className="w-4 h-4 inline animate-spin" /> {p.saving}</>
|
|
: editingPool
|
|
? p.updatePool
|
|
: p.createPool}
|
|
</button>
|
|
<button onClick={resetForm} className="btn-secondary">
|
|
{t.common.cancel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pool List */}
|
|
{isLoading ? (
|
|
<div className="space-y-3">
|
|
{[1,2].map(i => (
|
|
<div key={i} className="card space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="skeleton h-5 w-32" />
|
|
<div className="skeleton h-5 w-16 rounded-full" />
|
|
</div>
|
|
<div className="skeleton h-3 w-64" />
|
|
<div className="flex gap-2">
|
|
<div className="skeleton h-8 w-28 rounded-lg" />
|
|
<div className="skeleton h-8 w-28 rounded-lg" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : pools.length === 0 ? (
|
|
<div className="card text-center py-16">
|
|
<Scale className="w-12 h-12 mx-auto text-gray-300 mb-4" />
|
|
<p className="text-gray-600 font-medium">{p.noPools}</p>
|
|
<p className="text-sm text-gray-400 mt-1">{p.noPoolsHint}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4">
|
|
{pools.map((pool) => {
|
|
const poolClusters = clusters.filter((c) => pool.clusterIds.includes(c.id));
|
|
const activeClusters = poolClusters.filter((c) => c.status === 'active');
|
|
return (
|
|
<div key={pool.id} className="card">
|
|
<div className="flex flex-col sm:flex-row sm:items-start gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap mb-2">
|
|
<h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
|
|
<span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
|
|
{pool.isActive ? p.active : p.inactive}
|
|
</span>
|
|
<span className="badge badge-purple flex items-center gap-1">
|
|
{strategyIcon(pool.strategy)} {strategyShort(pool.strategy)}
|
|
</span>
|
|
{pool.isDefault && <span className="badge badge-blue">{p.defaultPool}</span>}
|
|
<span className="badge badge-gray">{p.priorityBadge.replace('{n}', String(pool.priority || 100))}</span>
|
|
</div>
|
|
{pool.description && (
|
|
<p className="text-sm text-gray-500 mb-3">{pool.description}</p>
|
|
)}
|
|
|
|
{/* Cluster chips */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{poolClusters.length > 0 ? poolClusters.map((cluster) => (
|
|
<div
|
|
key={cluster.id}
|
|
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium ${
|
|
cluster.status === 'active'
|
|
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
|
|
: 'bg-red-50 text-red-700 border border-red-200'
|
|
}`}
|
|
>
|
|
<span>{cluster.status === 'active' ? <CheckCircle className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}</span>
|
|
<span>{cluster.name}</span>
|
|
<span className="text-gray-400">
|
|
({cluster.provider || p.na} · {cluster.region || p.na} · {p.weight} {cluster.weight || 1} · {clusterHealthLabel(cluster.healthStatus)})
|
|
</span>
|
|
</div>
|
|
)) : (
|
|
<p className="text-xs text-gray-400">{p.noClustersInPool}</p>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-400 mt-2">
|
|
{p.clustersActive
|
|
.replace('{active}', String(activeClusters.length))
|
|
.replace('{total}', String(poolClusters.length))
|
|
.replace('{date}', new Date(pool.createdAt).toLocaleDateString(locale))}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<button
|
|
onClick={() => startEdit(pool)}
|
|
className="btn-ghost text-sm"
|
|
>
|
|
<Pencil className="w-3 h-3 inline" /> {p.edit}
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
const ok = await confirm({
|
|
title: p.deletePoolTitle.replace('{name}', pool.name),
|
|
message: p.deletePoolMessage,
|
|
confirmText: t.common.delete,
|
|
variant: 'danger',
|
|
});
|
|
if (ok) deleteMutation.mutate(pool.id);
|
|
}}
|
|
className="text-sm text-red-600 hover:text-red-800"
|
|
>
|
|
{p.remove}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|