Localize shared modals/overlays, logs, users and cluster-pool pages.
Add a components dictionary (delete/deleting overlays, confirm-modal defaults, build-progress phases, deployment bar, resource-upgrade modal) and move the logs, admin users, and admin cluster-pools pages onto the dictionaries — filters, tables, forms, statuses, toasts and confirm dialogs — with locale-aware dates and RTL-aware layout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
@@ -4,11 +4,19 @@ 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';
|
||||
|
||||
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);
|
||||
@@ -36,11 +44,11 @@ export default function AdminPoolsPage() {
|
||||
mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool created!');
|
||||
toast.success(p.poolCreated);
|
||||
resetForm();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast.error(err?.response?.data?.message || 'Failed to create pool');
|
||||
toast.error(err?.response?.data?.message || p.createFailed);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -49,11 +57,11 @@ export default function AdminPoolsPage() {
|
||||
api.patch(`/clusters/pools/${id}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool updated!');
|
||||
toast.success(p.poolUpdated);
|
||||
resetForm();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast.error(err?.response?.data?.message || 'Failed to update pool');
|
||||
toast.error(err?.response?.data?.message || p.updateFailed);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -61,7 +69,7 @@ export default function AdminPoolsPage() {
|
||||
mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool deleted');
|
||||
toast.success(p.poolDeleted);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -101,20 +109,25 @@ export default function AdminPoolsPage() {
|
||||
}));
|
||||
};
|
||||
|
||||
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">Cluster Pools</h1>
|
||||
<p className="page-subtitle">
|
||||
Load-balanced groups of clusters for automatic app distribution
|
||||
</p>
|
||||
<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" /> Cancel</> : '+ Create Pool'}
|
||||
{showForm ? <><X className="w-4 h-4 inline" /> {t.common.cancel}</> : `+ ${p.createPool}`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -122,12 +135,12 @@ export default function AdminPoolsPage() {
|
||||
{showForm && (
|
||||
<div className="card space-y-4 animate-slide-up">
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
{editingPool ? `Edit "${editingPool.name}"` : 'Create New Cluster Pool'}
|
||||
{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">Pool Name</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">{p.poolName}</label>
|
||||
<input
|
||||
className="input-field"
|
||||
placeholder="production-pool"
|
||||
@@ -136,22 +149,22 @@ export default function AdminPoolsPage() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">{p.strategy}</label>
|
||||
<select
|
||||
className="input-field"
|
||||
value={form.strategy}
|
||||
onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
|
||||
>
|
||||
<option value="weighted-resource">Weighted Resource — prefer healthy capacity and higher weights</option>
|
||||
<option value="least-loaded">Least Loaded — prefer lowest CPU, memory, and pod pressure</option>
|
||||
<option value="weighted-round-robin">Weighted Round Robin — rotate proportionally by weight</option>
|
||||
<option value="region-based">Region Based — prefer matching region, then weight and load</option>
|
||||
<option value="least-apps">Least Apps — deploy to cluster with fewest apps</option>
|
||||
<option value="round-robin">Round Robin — rotate across clusters evenly</option>
|
||||
<option value="weighted-resource">{strategyOption('weighted-resource')}</option>
|
||||
<option value="least-loaded">{strategyOption('least-loaded')}</option>
|
||||
<option value="weighted-round-robin">{strategyOption('weighted-round-robin')}</option>
|
||||
<option value="region-based">{strategyOption('region-based')}</option>
|
||||
<option value="least-apps">{strategyOption('least-apps')}</option>
|
||||
<option value="round-robin">{strategyOption('round-robin')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Priority</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">{p.priority}</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
@@ -163,10 +176,10 @@ export default function AdminPoolsPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">{p.description}</label>
|
||||
<input
|
||||
className="input-field"
|
||||
placeholder="Load-balanced pool for production workloads"
|
||||
placeholder={p.descriptionPlaceholder}
|
||||
value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
/>
|
||||
@@ -178,17 +191,17 @@ export default function AdminPoolsPage() {
|
||||
checked={form.isDefault}
|
||||
onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
|
||||
/>
|
||||
Use as default allocator pool
|
||||
{p.useAsDefault}
|
||||
</label>
|
||||
|
||||
{/* Cluster selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Select Clusters ({form.clusterIds.length} selected)
|
||||
{p.selectClusters.replace('{n}', String(form.clusterIds.length))}
|
||||
</label>
|
||||
{clusters.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 py-4 text-center">
|
||||
No clusters registered. Add clusters first.
|
||||
{p.noClustersRegistered}
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
@@ -199,14 +212,14 @@ export default function AdminPoolsPage() {
|
||||
key={cluster.id}
|
||||
type="button"
|
||||
onClick={() => toggleCluster(cluster.id)}
|
||||
className={`p-3 rounded-xl border-2 text-left transition-all ${
|
||||
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">
|
||||
<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'
|
||||
}`}>
|
||||
@@ -216,13 +229,13 @@ export default function AdminPoolsPage() {
|
||||
<p className="font-semibold text-sm text-gray-900">
|
||||
{cluster.name}
|
||||
{cluster.isDefault && (
|
||||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
|
||||
Default
|
||||
<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 || 'Unknown'} · {cluster.region || 'N/A'} · weight {cluster.weight || 1}
|
||||
{cluster.provider || p.na} · {cluster.region || p.na} · {p.weight} {cluster.weight || 1}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,7 +244,7 @@ export default function AdminPoolsPage() {
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{cluster.status}
|
||||
{clusterStatusLabel(cluster.status)}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
cluster.healthStatus === 'healthy'
|
||||
@@ -242,7 +255,7 @@ export default function AdminPoolsPage() {
|
||||
? 'bg-red-100 text-red-700'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{cluster.healthStatus || 'unknown'}
|
||||
{clusterHealthLabel(cluster.healthStatus)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -252,7 +265,7 @@ export default function AdminPoolsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<div className="flex space-x-3 rtl:space-x-reverse">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={
|
||||
@@ -264,13 +277,13 @@ export default function AdminPoolsPage() {
|
||||
className="btn-primary disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending || updateMutation.isPending
|
||||
? <><Clock className="w-4 h-4 inline animate-spin" /> Saving...</>
|
||||
? <><Clock className="w-4 h-4 inline animate-spin" /> {p.saving}</>
|
||||
: editingPool
|
||||
? 'Update Pool'
|
||||
: 'Create Pool'}
|
||||
? p.updatePool
|
||||
: p.createPool}
|
||||
</button>
|
||||
<button onClick={resetForm} className="btn-secondary">
|
||||
Cancel
|
||||
{t.common.cancel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -296,10 +309,8 @@ export default function AdminPoolsPage() {
|
||||
) : 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">No cluster pools created yet</p>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Create a pool to enable load-balanced deployment across multiple clusters
|
||||
</p>
|
||||
<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">
|
||||
@@ -313,23 +324,13 @@ export default function AdminPoolsPage() {
|
||||
<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 ? 'Active' : 'Inactive'}
|
||||
{pool.isActive ? p.active : p.inactive}
|
||||
</span>
|
||||
<span className="badge badge-purple flex items-center gap-1">
|
||||
{pool.strategy === 'weighted-resource'
|
||||
? <><BarChart3 className="w-3 h-3" /> Weighted Resource</>
|
||||
: pool.strategy === 'least-loaded'
|
||||
? <><BarChart3 className="w-3 h-3" /> Least Loaded</>
|
||||
: pool.strategy === 'weighted-round-robin'
|
||||
? <><RotateCw className="w-3 h-3" /> Weighted RR</>
|
||||
: pool.strategy === 'region-based'
|
||||
? <><BarChart3 className="w-3 h-3" /> Region Based</>
|
||||
: pool.strategy === 'least-apps'
|
||||
? <><BarChart3 className="w-3 h-3" /> Least Apps</>
|
||||
: <><RotateCw className="w-3 h-3" /> Round Robin</>}
|
||||
{strategyIcon(pool.strategy)} {strategyShort(pool.strategy)}
|
||||
</span>
|
||||
{pool.isDefault && <span className="badge badge-blue">Default Pool</span>}
|
||||
<span className="badge badge-gray">Priority {pool.priority || 100}</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>
|
||||
@@ -349,16 +350,19 @@ export default function AdminPoolsPage() {
|
||||
<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 || 'N/A'} · {cluster.region || 'N/A'} · weight {cluster.weight || 1} · {cluster.healthStatus || 'unknown'})
|
||||
({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">No clusters in this pool (they may have been deleted)</p>
|
||||
<p className="text-xs text-gray-400">{p.noClustersInPool}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
{activeClusters.length}/{poolClusters.length} clusters active · Created {new Date(pool.createdAt).toLocaleDateString()}
|
||||
{p.clustersActive
|
||||
.replace('{active}', String(activeClusters.length))
|
||||
.replace('{total}', String(poolClusters.length))
|
||||
.replace('{date}', new Date(pool.createdAt).toLocaleDateString(locale))}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -367,21 +371,21 @@ export default function AdminPoolsPage() {
|
||||
onClick={() => startEdit(pool)}
|
||||
className="btn-ghost text-sm"
|
||||
>
|
||||
<Pencil className="w-3 h-3 inline" /> Edit
|
||||
<Pencil className="w-3 h-3 inline" /> {p.edit}
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const ok = await confirm({
|
||||
title: `Delete Pool "${pool.name}"`,
|
||||
message: 'Apps already assigned to this pool will keep their current cluster.',
|
||||
confirmText: 'Delete',
|
||||
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"
|
||||
>
|
||||
Remove
|
||||
{p.remove}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user