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:
@@ -4,11 +4,19 @@ import { useState } from 'react';
|
|||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import api from '@/lib/api';
|
import api from '@/lib/api';
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
|
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||||
import type { Cluster, ClusterPool } from '@/types';
|
import type { Cluster, ClusterPool } from '@/types';
|
||||||
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
|
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
|
||||||
import { useConfirm } from '@/components/confirm-modal';
|
import { useConfirm } from '@/components/confirm-modal';
|
||||||
|
|
||||||
export default function AdminPoolsPage() {
|
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 queryClient = useQueryClient();
|
||||||
const confirm = useConfirm();
|
const confirm = useConfirm();
|
||||||
const [showForm, setShowForm] = useState(false);
|
const [showForm, setShowForm] = useState(false);
|
||||||
@@ -36,11 +44,11 @@ export default function AdminPoolsPage() {
|
|||||||
mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
|
mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||||
toast.success('Cluster pool created!');
|
toast.success(p.poolCreated);
|
||||||
resetForm();
|
resetForm();
|
||||||
},
|
},
|
||||||
onError: (err: any) => {
|
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),
|
api.patch(`/clusters/pools/${id}`, data),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||||
toast.success('Cluster pool updated!');
|
toast.success(p.poolUpdated);
|
||||||
resetForm();
|
resetForm();
|
||||||
},
|
},
|
||||||
onError: (err: any) => {
|
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}`),
|
mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
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 (
|
return (
|
||||||
<div className="space-y-6 animate-fade-in">
|
<div className="space-y-6 animate-fade-in">
|
||||||
<div className="page-header">
|
<div className="page-header">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="page-title">Cluster Pools</h1>
|
<h1 className="page-title">{p.title}</h1>
|
||||||
<p className="page-subtitle">
|
<p className="page-subtitle">{p.subtitle}</p>
|
||||||
Load-balanced groups of clusters for automatic app distribution
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
|
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
|
||||||
className={showForm ? 'btn-ghost' : 'btn-primary'}
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -122,12 +135,12 @@ export default function AdminPoolsPage() {
|
|||||||
{showForm && (
|
{showForm && (
|
||||||
<div className="card space-y-4 animate-slide-up">
|
<div className="card space-y-4 animate-slide-up">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
<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>
|
</h2>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<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
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="production-pool"
|
placeholder="production-pool"
|
||||||
@@ -136,22 +149,22 @@ export default function AdminPoolsPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<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
|
<select
|
||||||
className="input-field"
|
className="input-field"
|
||||||
value={form.strategy}
|
value={form.strategy}
|
||||||
onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
|
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="weighted-resource">{strategyOption('weighted-resource')}</option>
|
||||||
<option value="least-loaded">Least Loaded — prefer lowest CPU, memory, and pod pressure</option>
|
<option value="least-loaded">{strategyOption('least-loaded')}</option>
|
||||||
<option value="weighted-round-robin">Weighted Round Robin — rotate proportionally by weight</option>
|
<option value="weighted-round-robin">{strategyOption('weighted-round-robin')}</option>
|
||||||
<option value="region-based">Region Based — prefer matching region, then weight and load</option>
|
<option value="region-based">{strategyOption('region-based')}</option>
|
||||||
<option value="least-apps">Least Apps — deploy to cluster with fewest apps</option>
|
<option value="least-apps">{strategyOption('least-apps')}</option>
|
||||||
<option value="round-robin">Round Robin — rotate across clusters evenly</option>
|
<option value="round-robin">{strategyOption('round-robin')}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<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
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min={1}
|
min={1}
|
||||||
@@ -163,10 +176,10 @@ export default function AdminPoolsPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Load-balanced pool for production workloads"
|
placeholder={p.descriptionPlaceholder}
|
||||||
value={form.description}
|
value={form.description}
|
||||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||||
/>
|
/>
|
||||||
@@ -178,17 +191,17 @@ export default function AdminPoolsPage() {
|
|||||||
checked={form.isDefault}
|
checked={form.isDefault}
|
||||||
onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
|
onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
|
||||||
/>
|
/>
|
||||||
Use as default allocator pool
|
{p.useAsDefault}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
{/* Cluster selection */}
|
{/* Cluster selection */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<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>
|
</label>
|
||||||
{clusters.length === 0 ? (
|
{clusters.length === 0 ? (
|
||||||
<p className="text-sm text-gray-400 py-4 text-center">
|
<p className="text-sm text-gray-400 py-4 text-center">
|
||||||
No clusters registered. Add clusters first.
|
{p.noClustersRegistered}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
@@ -199,14 +212,14 @@ export default function AdminPoolsPage() {
|
|||||||
key={cluster.id}
|
key={cluster.id}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => toggleCluster(cluster.id)}
|
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
|
isSelected
|
||||||
? 'border-primary-500 bg-primary-50 shadow-sm'
|
? 'border-primary-500 bg-primary-50 shadow-sm'
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<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 ${
|
<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 ? '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">
|
<p className="font-semibold text-sm text-gray-900">
|
||||||
{cluster.name}
|
{cluster.name}
|
||||||
{cluster.isDefault && (
|
{cluster.isDefault && (
|
||||||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
|
<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">
|
||||||
Default
|
{p.defaultBadge}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-500">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -231,7 +244,7 @@ export default function AdminPoolsPage() {
|
|||||||
? 'bg-green-100 text-green-700'
|
? 'bg-green-100 text-green-700'
|
||||||
: 'bg-red-100 text-red-700'
|
: 'bg-red-100 text-red-700'
|
||||||
}`}>
|
}`}>
|
||||||
{cluster.status}
|
{clusterStatusLabel(cluster.status)}
|
||||||
</span>
|
</span>
|
||||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||||
cluster.healthStatus === 'healthy'
|
cluster.healthStatus === 'healthy'
|
||||||
@@ -242,7 +255,7 @@ export default function AdminPoolsPage() {
|
|||||||
? 'bg-red-100 text-red-700'
|
? 'bg-red-100 text-red-700'
|
||||||
: 'bg-gray-100 text-gray-600'
|
: 'bg-gray-100 text-gray-600'
|
||||||
}`}>
|
}`}>
|
||||||
{cluster.healthStatus || 'unknown'}
|
{clusterHealthLabel(cluster.healthStatus)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
@@ -252,7 +265,7 @@ export default function AdminPoolsPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3 rtl:space-x-reverse">
|
||||||
<button
|
<button
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
disabled={
|
disabled={
|
||||||
@@ -264,13 +277,13 @@ export default function AdminPoolsPage() {
|
|||||||
className="btn-primary disabled:opacity-50"
|
className="btn-primary disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{createMutation.isPending || updateMutation.isPending
|
{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
|
: editingPool
|
||||||
? 'Update Pool'
|
? p.updatePool
|
||||||
: 'Create Pool'}
|
: p.createPool}
|
||||||
</button>
|
</button>
|
||||||
<button onClick={resetForm} className="btn-secondary">
|
<button onClick={resetForm} className="btn-secondary">
|
||||||
Cancel
|
{t.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -296,10 +309,8 @@ export default function AdminPoolsPage() {
|
|||||||
) : pools.length === 0 ? (
|
) : pools.length === 0 ? (
|
||||||
<div className="card text-center py-16">
|
<div className="card text-center py-16">
|
||||||
<Scale className="w-12 h-12 mx-auto text-gray-300 mb-4" />
|
<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-gray-600 font-medium">{p.noPools}</p>
|
||||||
<p className="text-sm text-gray-400 mt-1">
|
<p className="text-sm text-gray-400 mt-1">{p.noPoolsHint}</p>
|
||||||
Create a pool to enable load-balanced deployment across multiple clusters
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid gap-4">
|
<div className="grid gap-4">
|
||||||
@@ -313,23 +324,13 @@ export default function AdminPoolsPage() {
|
|||||||
<div className="flex items-center gap-2 flex-wrap mb-2">
|
<div className="flex items-center gap-2 flex-wrap mb-2">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
|
<h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
|
||||||
<span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
|
<span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
|
||||||
{pool.isActive ? 'Active' : 'Inactive'}
|
{pool.isActive ? p.active : p.inactive}
|
||||||
</span>
|
</span>
|
||||||
<span className="badge badge-purple flex items-center gap-1">
|
<span className="badge badge-purple flex items-center gap-1">
|
||||||
{pool.strategy === 'weighted-resource'
|
{strategyIcon(pool.strategy)} {strategyShort(pool.strategy)}
|
||||||
? <><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</>}
|
|
||||||
</span>
|
</span>
|
||||||
{pool.isDefault && <span className="badge badge-blue">Default Pool</span>}
|
{pool.isDefault && <span className="badge badge-blue">{p.defaultPool}</span>}
|
||||||
<span className="badge badge-gray">Priority {pool.priority || 100}</span>
|
<span className="badge badge-gray">{p.priorityBadge.replace('{n}', String(pool.priority || 100))}</span>
|
||||||
</div>
|
</div>
|
||||||
{pool.description && (
|
{pool.description && (
|
||||||
<p className="text-sm text-gray-500 mb-3">{pool.description}</p>
|
<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.status === 'active' ? <CheckCircle className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}</span>
|
||||||
<span>{cluster.name}</span>
|
<span>{cluster.name}</span>
|
||||||
<span className="text-gray-400">
|
<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>
|
</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<p className="text-xs text-gray-400 mt-2">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -367,21 +371,21 @@ export default function AdminPoolsPage() {
|
|||||||
onClick={() => startEdit(pool)}
|
onClick={() => startEdit(pool)}
|
||||||
className="btn-ghost text-sm"
|
className="btn-ghost text-sm"
|
||||||
>
|
>
|
||||||
<Pencil className="w-3 h-3 inline" /> Edit
|
<Pencil className="w-3 h-3 inline" /> {p.edit}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
const ok = await confirm({
|
const ok = await confirm({
|
||||||
title: `Delete Pool "${pool.name}"`,
|
title: p.deletePoolTitle.replace('{name}', pool.name),
|
||||||
message: 'Apps already assigned to this pool will keep their current cluster.',
|
message: p.deletePoolMessage,
|
||||||
confirmText: 'Delete',
|
confirmText: t.common.delete,
|
||||||
variant: 'danger',
|
variant: 'danger',
|
||||||
});
|
});
|
||||||
if (ok) deleteMutation.mutate(pool.id);
|
if (ok) deleteMutation.mutate(pool.id);
|
||||||
}}
|
}}
|
||||||
className="text-sm text-red-600 hover:text-red-800"
|
className="text-sm text-red-600 hover:text-red-800"
|
||||||
>
|
>
|
||||||
Remove
|
{p.remove}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,11 +4,16 @@ import { useState } from 'react';
|
|||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import api from '@/lib/api';
|
import api from '@/lib/api';
|
||||||
import { useAuthStore } from '@/lib/store';
|
import { useAuthStore } from '@/lib/store';
|
||||||
|
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import type { AdminUser } from '@/types';
|
import type { AdminUser } from '@/types';
|
||||||
import { Users, Search, X, Clock, KeyRound } from 'lucide-react';
|
import { Users, Search, X, Clock, KeyRound } from 'lucide-react';
|
||||||
|
|
||||||
export default function AdminUsersPage() {
|
export default function AdminUsersPage() {
|
||||||
|
const t = useT();
|
||||||
|
const u = t.dashboard.users;
|
||||||
|
const locale = useLocale();
|
||||||
|
const roleLabel = (role: string) => (u.roles as Record<string, string>)[role] ?? role;
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const currentUser = useAuthStore((s) => s.user);
|
const currentUser = useAuthStore((s) => s.user);
|
||||||
const isAdmin = currentUser?.role === 'admin';
|
const isAdmin = currentUser?.role === 'admin';
|
||||||
@@ -42,12 +47,12 @@ export default function AdminUsersPage() {
|
|||||||
mutationFn: (data: typeof form) => api.post('/users', data),
|
mutationFn: (data: typeof form) => api.post('/users', data),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||||||
toast.success('User created successfully');
|
toast.success(u.createdSuccess);
|
||||||
setShowForm(false);
|
setShowForm(false);
|
||||||
setForm({ email: '', password: '', firstName: '', lastName: '', role: 'user' });
|
setForm({ email: '', password: '', firstName: '', lastName: '', role: 'user' });
|
||||||
},
|
},
|
||||||
onError: (err: any) => {
|
onError: (err: any) => {
|
||||||
toast.error(err?.response?.data?.message || 'Failed to create user');
|
toast.error(err?.response?.data?.message || u.createFailed);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -56,7 +61,7 @@ export default function AdminUsersPage() {
|
|||||||
api.patch(`/users/${id}/${isActive ? 'deactivate' : 'activate'}`),
|
api.patch(`/users/${id}/${isActive ? 'deactivate' : 'activate'}`),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||||||
toast.success('User updated');
|
toast.success(u.userUpdated);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -65,7 +70,7 @@ export default function AdminUsersPage() {
|
|||||||
api.patch(`/users/${id}/role`, { role }),
|
api.patch(`/users/${id}/role`, { role }),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||||||
toast.success('Role updated');
|
toast.success(u.roleUpdated);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -74,7 +79,7 @@ export default function AdminUsersPage() {
|
|||||||
api.patch(`/users/${id}/password`, { password }),
|
api.patch(`/users/${id}/password`, { password }),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
|
||||||
toast.success('Password updated');
|
toast.success(u.passwordUpdated);
|
||||||
setPwdModalUser(null);
|
setPwdModalUser(null);
|
||||||
setPwdModalPassword('');
|
setPwdModalPassword('');
|
||||||
},
|
},
|
||||||
@@ -83,7 +88,7 @@ export default function AdminUsersPage() {
|
|||||||
err && typeof err === 'object' && 'response' in err
|
err && typeof err === 'object' && 'response' in err
|
||||||
? (err as { response?: { data?: { message?: string } } }).response?.data?.message
|
? (err as { response?: { data?: { message?: string } } }).response?.data?.message
|
||||||
: undefined;
|
: undefined;
|
||||||
toast.error(typeof msg === 'string' ? msg : 'Failed to update password');
|
toast.error(typeof msg === 'string' ? msg : u.passwordFailed);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -107,69 +112,69 @@ export default function AdminUsersPage() {
|
|||||||
<div className="space-y-6 animate-fade-in">
|
<div className="space-y-6 animate-fade-in">
|
||||||
<div className="page-header">
|
<div className="page-header">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="page-title">User Management</h1>
|
<h1 className="page-title">{u.title}</h1>
|
||||||
<p className="page-subtitle">{users.length} user{users.length !== 1 ? 's' : ''} registered</p>
|
<p className="page-subtitle">{u.count.replace('{n}', String(users.length))}</p>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={() => setShowForm(!showForm)} className={showForm ? 'btn-ghost' : 'btn-primary'}>
|
<button onClick={() => setShowForm(!showForm)} className={showForm ? 'btn-ghost' : 'btn-primary'}>
|
||||||
{showForm ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ Add User'}
|
{showForm ? <><X className="w-4 h-4 inline" /> {t.common.cancel}</> : `+ ${u.addUser}`}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Create user form */}
|
{/* Create user form */}
|
||||||
{showForm && (
|
{showForm && (
|
||||||
<div className="card space-y-4 animate-slide-up">
|
<div className="card space-y-4 animate-slide-up">
|
||||||
<h2 className="text-lg font-semibold text-gray-900">Create New User</h2>
|
<h2 className="text-lg font-semibold text-gray-900">{u.createNewUser}</h2>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">First Name</label>
|
<label className="block text-sm font-medium text-gray-700 mb-1">{u.firstName}</label>
|
||||||
<input
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="John"
|
placeholder={u.firstNamePlaceholder}
|
||||||
value={form.firstName}
|
value={form.firstName}
|
||||||
onChange={(e) => setForm({ ...form, firstName: e.target.value })}
|
onChange={(e) => setForm({ ...form, firstName: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
|
<label className="block text-sm font-medium text-gray-700 mb-1">{u.lastName}</label>
|
||||||
<input
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Doe"
|
placeholder={u.lastNamePlaceholder}
|
||||||
value={form.lastName}
|
value={form.lastName}
|
||||||
onChange={(e) => setForm({ ...form, lastName: e.target.value })}
|
onChange={(e) => setForm({ ...form, lastName: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
<label className="block text-sm font-medium text-gray-700 mb-1">{u.email}</label>
|
||||||
<input
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="john@example.com"
|
placeholder={u.emailPlaceholder}
|
||||||
value={form.email}
|
value={form.email}
|
||||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
<label className="block text-sm font-medium text-gray-700 mb-1">{u.password}</label>
|
||||||
<input
|
<input
|
||||||
className="input-field"
|
className="input-field"
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="Min 8 characters"
|
placeholder={u.passwordMin}
|
||||||
value={form.password}
|
value={form.password}
|
||||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Role</label>
|
<label className="block text-sm font-medium text-gray-700 mb-1">{u.role}</label>
|
||||||
<select
|
<select
|
||||||
className="input-field w-full sm:w-48"
|
className="input-field w-full sm:w-48"
|
||||||
value={form.role}
|
value={form.role}
|
||||||
onChange={(e) => setForm({ ...form, role: e.target.value as typeof form.role })}
|
onChange={(e) => setForm({ ...form, role: e.target.value as typeof form.role })}
|
||||||
>
|
>
|
||||||
<option value="user">User</option>
|
<option value="user">{u.roles.user}</option>
|
||||||
<option value="admin">Admin</option>
|
<option value="admin">{u.roles.admin}</option>
|
||||||
<option value="technical">Technical</option>
|
<option value="technical">{u.roles.technical}</option>
|
||||||
<option value="sales">Sales</option>
|
<option value="sales">{u.roles.sales}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@@ -177,7 +182,7 @@ export default function AdminUsersPage() {
|
|||||||
disabled={!form.email || !form.password || !form.firstName || !form.lastName || createUser.isPending}
|
disabled={!form.email || !form.password || !form.firstName || !form.lastName || createUser.isPending}
|
||||||
className="btn-primary disabled:opacity-50"
|
className="btn-primary disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{createUser.isPending ? <><Clock className="w-4 h-4 inline animate-spin" /> Creating...</> : 'Create User'}
|
{createUser.isPending ? <><Clock className="w-4 h-4 inline animate-spin" /> {u.creating}</> : u.createUser}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -185,12 +190,12 @@ export default function AdminUsersPage() {
|
|||||||
{/* Search bar */}
|
{/* Search bar */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<input
|
<input
|
||||||
className="input-field pl-10 w-full"
|
className="input-field pl-10 rtl:pl-3 rtl:pr-10 w-full"
|
||||||
placeholder="Search by name or email..."
|
placeholder={u.searchPlaceholder}
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
<Search className="absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
@@ -209,7 +214,7 @@ export default function AdminUsersPage() {
|
|||||||
) : users.length === 0 ? (
|
) : users.length === 0 ? (
|
||||||
<div className="card text-center py-16">
|
<div className="card text-center py-16">
|
||||||
<Users className="w-12 h-12 mx-auto text-gray-300 mb-4" />
|
<Users className="w-12 h-12 mx-auto text-gray-300 mb-4" />
|
||||||
<p className="text-gray-600 font-medium">{search ? 'No users found matching your search.' : 'No users yet.'}</p>
|
<p className="text-gray-600 font-medium">{search ? u.noUsersSearch : u.noUsers}</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -218,13 +223,13 @@ export default function AdminUsersPage() {
|
|||||||
<table className="min-w-full divide-y divide-gray-200">
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
<thead className="bg-gray-50/80">
|
<thead className="bg-gray-50/80">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">User</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colUser}</th>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colEmail}</th>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Role</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colRole}</th>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colStatus}</th>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Apps</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colApps}</th>
|
||||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
|
<th className="px-6 py-3.5 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colCreated}</th>
|
||||||
<th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
|
<th className="px-6 py-3.5 text-right rtl:text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{u.colActions}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-100">
|
<tbody className="divide-y divide-gray-100">
|
||||||
@@ -241,10 +246,10 @@ export default function AdminUsersPage() {
|
|||||||
value={user.role}
|
value={user.role}
|
||||||
onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
|
onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
|
||||||
>
|
>
|
||||||
<option value="user">User</option>
|
<option value="user">{u.roles.user}</option>
|
||||||
<option value="admin">Admin</option>
|
<option value="admin">{u.roles.admin}</option>
|
||||||
<option value="technical">Technical</option>
|
<option value="technical">{u.roles.technical}</option>
|
||||||
<option value="sales">Sales</option>
|
<option value="sales">{u.roles.sales}</option>
|
||||||
</select>
|
</select>
|
||||||
) : (
|
) : (
|
||||||
<span className={`badge ${
|
<span className={`badge ${
|
||||||
@@ -252,21 +257,21 @@ export default function AdminUsersPage() {
|
|||||||
user.role === 'technical' ? 'bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
user.role === 'technical' ? 'bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
||||||
user.role === 'sales' ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
user.role === 'sales' ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
||||||
'badge-gray'
|
'badge-gray'
|
||||||
}`}>{user.role}</span>
|
}`}>{roleLabel(user.role)}</span>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
<span className={`badge ${user.isActive ? 'badge-green' : 'badge-red'}`}>
|
<span className={`badge ${user.isActive ? 'badge-green' : 'badge-red'}`}>
|
||||||
{user.isActive ? 'Active' : 'Inactive'}
|
{user.isActive ? u.active : u.inactive}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
<span className="badge badge-blue">{user.appCount ?? 0}</span>
|
<span className="badge badge-blue">{user.appCount ?? 0}</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 text-sm text-gray-500">
|
<td className="px-6 py-4 text-sm text-gray-500">
|
||||||
{new Date(user.createdAt).toLocaleDateString()}
|
{new Date(user.createdAt).toLocaleDateString(locale)}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 text-right">
|
<td className="px-6 py-4 text-right rtl:text-left">
|
||||||
<div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1">
|
<div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1">
|
||||||
{canResetPasswordFor(user) && (
|
{canResetPasswordFor(user) && (
|
||||||
<button
|
<button
|
||||||
@@ -274,7 +279,7 @@ export default function AdminUsersPage() {
|
|||||||
onClick={() => openPwdModal(user)}
|
onClick={() => openPwdModal(user)}
|
||||||
className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-800"
|
className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-800"
|
||||||
>
|
>
|
||||||
<KeyRound className="w-3.5 h-3.5" /> Password
|
<KeyRound className="w-3.5 h-3.5" /> {u.passwordBtn}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
@@ -282,7 +287,7 @@ export default function AdminUsersPage() {
|
|||||||
onClick={() => toggleActive.mutate({ id: user.id, isActive: user.isActive })}
|
onClick={() => toggleActive.mutate({ id: user.id, isActive: user.isActive })}
|
||||||
className={`text-sm font-medium ${user.isActive ? 'text-red-600 hover:text-red-800' : 'text-green-600 hover:text-green-800'}`}
|
className={`text-sm font-medium ${user.isActive ? 'text-red-600 hover:text-red-800' : 'text-green-600 hover:text-green-800'}`}
|
||||||
>
|
>
|
||||||
{user.isActive ? 'Deactivate' : 'Activate'}
|
{user.isActive ? u.deactivate : u.activate}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@@ -302,18 +307,18 @@ export default function AdminUsersPage() {
|
|||||||
<p className="text-sm text-gray-500">{user.email}</p>
|
<p className="text-sm text-gray-500">{user.email}</p>
|
||||||
</div>
|
</div>
|
||||||
<span className={`badge ${user.isActive ? 'badge-green' : 'badge-red'}`}>
|
<span className={`badge ${user.isActive ? 'badge-green' : 'badge-red'}`}>
|
||||||
{user.isActive ? 'Active' : 'Inactive'}
|
{user.isActive ? u.active : u.inactive}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 text-xs text-gray-500">
|
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||||
<span className="badge badge-blue">{user.appCount ?? 0} apps</span>
|
<span className="badge badge-blue">{u.appsCount.replace('{n}', String(user.appCount ?? 0))}</span>
|
||||||
<span className={`badge ${
|
<span className={`badge ${
|
||||||
user.role === 'admin' ? 'badge-purple' :
|
user.role === 'admin' ? 'badge-purple' :
|
||||||
user.role === 'technical' ? 'bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
user.role === 'technical' ? 'bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
||||||
user.role === 'sales' ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
user.role === 'sales' ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium' :
|
||||||
'badge-gray'
|
'badge-gray'
|
||||||
}`}>{user.role}</span>
|
}`}>{roleLabel(user.role)}</span>
|
||||||
<span>{new Date(user.createdAt).toLocaleDateString()}</span>
|
<span>{new Date(user.createdAt).toLocaleDateString(locale)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-2 pt-2 border-t border-gray-100">
|
<div className="flex flex-wrap items-center gap-2 pt-2 border-t border-gray-100">
|
||||||
{isAdmin ? (
|
{isAdmin ? (
|
||||||
@@ -322,13 +327,13 @@ export default function AdminUsersPage() {
|
|||||||
value={user.role}
|
value={user.role}
|
||||||
onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
|
onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
|
||||||
>
|
>
|
||||||
<option value="user">User</option>
|
<option value="user">{u.roles.user}</option>
|
||||||
<option value="admin">Admin</option>
|
<option value="admin">{u.roles.admin}</option>
|
||||||
<option value="technical">Technical</option>
|
<option value="technical">{u.roles.technical}</option>
|
||||||
<option value="sales">Sales</option>
|
<option value="sales">{u.roles.sales}</option>
|
||||||
</select>
|
</select>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-sm text-gray-500 capitalize">{user.role}</span>
|
<span className="text-sm text-gray-500">{roleLabel(user.role)}</span>
|
||||||
)}
|
)}
|
||||||
{canResetPasswordFor(user) && (
|
{canResetPasswordFor(user) && (
|
||||||
<button
|
<button
|
||||||
@@ -336,7 +341,7 @@ export default function AdminUsersPage() {
|
|||||||
onClick={() => openPwdModal(user)}
|
onClick={() => openPwdModal(user)}
|
||||||
className="btn-secondary text-xs inline-flex items-center gap-1"
|
className="btn-secondary text-xs inline-flex items-center gap-1"
|
||||||
>
|
>
|
||||||
<KeyRound className="w-3.5 h-3.5" /> Password
|
<KeyRound className="w-3.5 h-3.5" /> {u.passwordBtn}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
@@ -344,7 +349,7 @@ export default function AdminUsersPage() {
|
|||||||
onClick={() => toggleActive.mutate({ id: user.id, isActive: user.isActive })}
|
onClick={() => toggleActive.mutate({ id: user.id, isActive: user.isActive })}
|
||||||
className={`text-sm font-medium ${user.isActive ? 'text-red-600' : 'text-green-600'}`}
|
className={`text-sm font-medium ${user.isActive ? 'text-red-600' : 'text-green-600'}`}
|
||||||
>
|
>
|
||||||
{user.isActive ? 'Deactivate' : 'Activate'}
|
{user.isActive ? u.deactivate : u.activate}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -360,9 +365,9 @@ export default function AdminUsersPage() {
|
|||||||
onClick={(e) => e.target === e.currentTarget && closePwdModal()}
|
onClick={(e) => e.target === e.currentTarget && closePwdModal()}
|
||||||
>
|
>
|
||||||
<div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6 space-y-4">
|
<div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6 space-y-4">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">Set password</h3>
|
<h3 className="text-lg font-semibold text-gray-900">{u.setPassword}</h3>
|
||||||
<p className="text-sm text-gray-600">
|
<p className="text-sm text-gray-600">
|
||||||
New password for{' '}
|
{u.newPasswordFor}{' '}
|
||||||
<strong>
|
<strong>
|
||||||
{pwdModalUser.firstName} {pwdModalUser.lastName}
|
{pwdModalUser.firstName} {pwdModalUser.lastName}
|
||||||
</strong>{' '}
|
</strong>{' '}
|
||||||
@@ -371,14 +376,14 @@ export default function AdminUsersPage() {
|
|||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
className="input-field w-full"
|
className="input-field w-full"
|
||||||
placeholder="Min 8 characters"
|
placeholder={u.passwordMin}
|
||||||
value={pwdModalPassword}
|
value={pwdModalPassword}
|
||||||
onChange={(e) => setPwdModalPassword(e.target.value)}
|
onChange={(e) => setPwdModalPassword(e.target.value)}
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-end gap-2 pt-2">
|
<div className="flex justify-end gap-2 pt-2">
|
||||||
<button type="button" className="btn-ghost" onClick={closePwdModal}>
|
<button type="button" className="btn-ghost" onClick={closePwdModal}>
|
||||||
Cancel
|
{t.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -386,7 +391,7 @@ export default function AdminUsersPage() {
|
|||||||
disabled={pwdModalPassword.length < 8 || resetPassword.isPending}
|
disabled={pwdModalPassword.length < 8 || resetPassword.isPending}
|
||||||
onClick={submitPwdModal}
|
onClick={submitPwdModal}
|
||||||
>
|
>
|
||||||
{resetPassword.isPending ? 'Saving...' : 'Save password'}
|
{resetPassword.isPending ? u.saving : u.savePassword}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState, useEffect, useMemo, Suspense } from 'react';
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
import api from '@/lib/api';
|
import api from '@/lib/api';
|
||||||
|
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||||
import type { Application, LogEntry, LogSearchResult, LogStatsResult } from '@/types';
|
import type { Application, LogEntry, LogSearchResult, LogStatsResult } from '@/types';
|
||||||
import {
|
import {
|
||||||
Loader2,
|
Loader2,
|
||||||
@@ -14,29 +15,6 @@ import {
|
|||||||
ChevronRight,
|
ChevronRight,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
const LOG_LEVELS = [
|
|
||||||
{ value: '', label: 'All levels' },
|
|
||||||
{ value: 'error', label: 'Error' },
|
|
||||||
{ value: 'warn', label: 'Warning' },
|
|
||||||
{ value: 'info', label: 'Info' },
|
|
||||||
{ value: 'debug', label: 'Debug' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const WORKLOADS = [
|
|
||||||
{ value: '', label: 'All sources' },
|
|
||||||
{ value: 'app', label: 'Application' },
|
|
||||||
{ value: 'redis', label: 'Redis' },
|
|
||||||
{ value: 'rabbitmq', label: 'RabbitMQ' },
|
|
||||||
{ value: 'database', label: 'Database' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const TIME_RANGES = [
|
|
||||||
{ value: '1h', label: 'Last hour' },
|
|
||||||
{ value: '6h', label: 'Last 6 hours' },
|
|
||||||
{ value: '24h', label: 'Last 24 hours' },
|
|
||||||
{ value: '7d', label: 'Last 7 days' },
|
|
||||||
];
|
|
||||||
|
|
||||||
function levelBadgeClass(level: string) {
|
function levelBadgeClass(level: string) {
|
||||||
switch (level?.toLowerCase()) {
|
switch (level?.toLowerCase()) {
|
||||||
case 'error':
|
case 'error':
|
||||||
@@ -52,9 +30,26 @@ function levelBadgeClass(level: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function LogsPageContent() {
|
function LogsPageContent() {
|
||||||
|
const t = useT();
|
||||||
|
const lg = t.dashboard.logs;
|
||||||
|
const locale = useLocale();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const initialAppId = searchParams.get('appId') || '';
|
const initialAppId = searchParams.get('appId') || '';
|
||||||
|
|
||||||
|
const LOG_LEVELS = [
|
||||||
|
{ value: '', label: lg.levels.all },
|
||||||
|
{ value: 'error', label: lg.levels.error },
|
||||||
|
{ value: 'warn', label: lg.levels.warn },
|
||||||
|
{ value: 'info', label: lg.levels.info },
|
||||||
|
{ value: 'debug', label: lg.levels.debug },
|
||||||
|
];
|
||||||
|
const TIME_RANGES = [
|
||||||
|
{ value: '1h', label: lg.ranges['1h'] },
|
||||||
|
{ value: '6h', label: lg.ranges['6h'] },
|
||||||
|
{ value: '24h', label: lg.ranges['24h'] },
|
||||||
|
{ value: '7d', label: lg.ranges['7d'] },
|
||||||
|
];
|
||||||
|
|
||||||
const [appId, setAppId] = useState(initialAppId);
|
const [appId, setAppId] = useState(initialAppId);
|
||||||
const [workload, setWorkload] = useState('');
|
const [workload, setWorkload] = useState('');
|
||||||
const [level, setLevel] = useState('');
|
const [level, setLevel] = useState('');
|
||||||
@@ -104,19 +99,26 @@ function LogsPageContent() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const workloadOptions = useMemo(() => {
|
const workloadOptions = useMemo(() => {
|
||||||
|
const all = { value: '', label: lg.sources.all };
|
||||||
if (!appId || !selectedManaged) {
|
if (!appId || !selectedManaged) {
|
||||||
return WORKLOADS;
|
return [
|
||||||
|
all,
|
||||||
|
{ value: 'app', label: lg.sources.app },
|
||||||
|
{ value: 'redis', label: lg.sources.redis },
|
||||||
|
{ value: 'rabbitmq', label: lg.sources.rabbitmq },
|
||||||
|
{ value: 'database', label: lg.sources.database },
|
||||||
|
];
|
||||||
}
|
}
|
||||||
const opts: { value: string; label: string }[] = [{ value: '', label: 'All sources' }];
|
const opts: { value: string; label: string }[] = [all];
|
||||||
if (selectedManaged.productType === 'managed_database') {
|
if (selectedManaged.productType === 'managed_database') {
|
||||||
opts.push({ value: 'database', label: 'Database' });
|
opts.push({ value: 'database', label: lg.sources.database });
|
||||||
} else if (selectedManaged.productType === 'managed_redis') {
|
} else if (selectedManaged.productType === 'managed_redis') {
|
||||||
opts.push({ value: 'redis', label: 'Redis' });
|
opts.push({ value: 'redis', label: lg.sources.redis });
|
||||||
} else if (selectedManaged.productType === 'managed_rabbitmq') {
|
} else if (selectedManaged.productType === 'managed_rabbitmq') {
|
||||||
opts.push({ value: 'rabbitmq', label: 'RabbitMQ' });
|
opts.push({ value: 'rabbitmq', label: lg.sources.rabbitmq });
|
||||||
}
|
}
|
||||||
return opts;
|
return opts;
|
||||||
}, [appId, selectedManaged]);
|
}, [appId, selectedManaged, lg]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!selectedManaged) return;
|
if (!selectedManaged) return;
|
||||||
@@ -194,15 +196,14 @@ function LogsPageContent() {
|
|||||||
<AlertCircle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
|
<AlertCircle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
|
||||||
)}
|
)}
|
||||||
<h1 className="text-xl font-bold text-gray-900 mb-2">
|
<h1 className="text-xl font-bold text-gray-900 mb-2">
|
||||||
{isRecovering ? 'Reconnecting to logging…' : 'Logging not available'}
|
{isRecovering ? lg.reconnecting : lg.notAvailable}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-gray-600 text-sm whitespace-pre-wrap">
|
<p className="text-gray-600 text-sm whitespace-pre-wrap">
|
||||||
{loggingStatus.message ||
|
{loggingStatus.message || lg.notAvailableMessage}
|
||||||
'Central Elasticsearch is not deployed on the cluster. Enable the logging addon when deploying an app, and ask an administrator to deploy the logging stack.'}
|
|
||||||
</p>
|
</p>
|
||||||
{isRecovering && (
|
{isRecovering && (
|
||||||
<p className="text-xs text-gray-400 mt-3">
|
<p className="text-xs text-gray-400 mt-3">
|
||||||
{statusFetching ? 'Checking connection…' : 'Retrying automatically every few seconds.'}
|
{statusFetching ? lg.checkingConnection : lg.retryingAuto}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -213,17 +214,15 @@ function LogsPageContent() {
|
|||||||
<div className="space-y-6 animate-fade-in">
|
<div className="space-y-6 animate-fade-in">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
||||||
<FileText className="w-6 h-6" /> Logs
|
<FileText className="w-6 h-6" /> {lg.title}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-gray-500 mt-1">
|
<p className="text-sm text-gray-500 mt-1">{lg.subtitle}</p>
|
||||||
Application, Redis, RabbitMQ, and database logs in one place
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card p-4">
|
<div className="card p-4">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-medium text-gray-600 block mb-1">Resource</label>
|
<label className="text-xs font-medium text-gray-600 block mb-1">{lg.resource}</label>
|
||||||
<select
|
<select
|
||||||
value={appId}
|
value={appId}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@@ -232,9 +231,9 @@ function LogsPageContent() {
|
|||||||
}}
|
}}
|
||||||
className="input w-full text-sm"
|
className="input w-full text-sm"
|
||||||
>
|
>
|
||||||
<option value="">All resources</option>
|
<option value="">{lg.allResources}</option>
|
||||||
{applications.length > 0 && (
|
{applications.length > 0 && (
|
||||||
<optgroup label="Applications">
|
<optgroup label={lg.applicationsGroup}>
|
||||||
{applications.map((app) => (
|
{applications.map((app) => (
|
||||||
<option key={app.id} value={app.id}>
|
<option key={app.id} value={app.id}>
|
||||||
{app.name}
|
{app.name}
|
||||||
@@ -243,7 +242,7 @@ function LogsPageContent() {
|
|||||||
</optgroup>
|
</optgroup>
|
||||||
)}
|
)}
|
||||||
{managedServices.length > 0 && (
|
{managedServices.length > 0 && (
|
||||||
<optgroup label="Databases & services">
|
<optgroup label={lg.servicesGroup}>
|
||||||
{managedServices.map((svc) => (
|
{managedServices.map((svc) => (
|
||||||
<option key={svc.id} value={svc.id}>
|
<option key={svc.id} value={svc.id}>
|
||||||
{svc.name}
|
{svc.name}
|
||||||
@@ -254,7 +253,7 @@ function LogsPageContent() {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-medium text-gray-600 block mb-1">Source</label>
|
<label className="text-xs font-medium text-gray-600 block mb-1">{lg.source}</label>
|
||||||
<select
|
<select
|
||||||
value={workload}
|
value={workload}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@@ -271,7 +270,7 @@ function LogsPageContent() {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-medium text-gray-600 block mb-1">Level</label>
|
<label className="text-xs font-medium text-gray-600 block mb-1">{lg.level}</label>
|
||||||
<select
|
<select
|
||||||
value={level}
|
value={level}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@@ -288,7 +287,7 @@ function LogsPageContent() {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-medium text-gray-600 block mb-1">Time range</label>
|
<label className="text-xs font-medium text-gray-600 block mb-1">{lg.timeRange}</label>
|
||||||
<select
|
<select
|
||||||
value={timeRange}
|
value={timeRange}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@@ -297,15 +296,15 @@ function LogsPageContent() {
|
|||||||
}}
|
}}
|
||||||
className="input w-full text-sm"
|
className="input w-full text-sm"
|
||||||
>
|
>
|
||||||
{TIME_RANGES.map((t) => (
|
{TIME_RANGES.map((tr) => (
|
||||||
<option key={t.value} value={t.value}>
|
<option key={tr.value} value={tr.value}>
|
||||||
{t.label}
|
{tr.label}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-medium text-gray-600 block mb-1">Search</label>
|
<label className="text-xs font-medium text-gray-600 block mb-1">{lg.search}</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={search}
|
value={search}
|
||||||
@@ -313,7 +312,7 @@ function LogsPageContent() {
|
|||||||
setSearch(e.target.value);
|
setSearch(e.target.value);
|
||||||
setPage(1);
|
setPage(1);
|
||||||
}}
|
}}
|
||||||
placeholder="Search message..."
|
placeholder={lg.searchPlaceholder}
|
||||||
className="input w-full text-sm"
|
className="input w-full text-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -322,11 +321,11 @@ function LogsPageContent() {
|
|||||||
<button type="button" onClick={() => refetch()} disabled={isFetching} className="btn-primary text-sm">
|
<button type="button" onClick={() => refetch()} disabled={isFetching} className="btn-primary text-sm">
|
||||||
{isFetching ? (
|
{isFetching ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="w-4 h-4 inline animate-spin mr-1" /> Loading
|
<Loader2 className="w-4 h-4 inline animate-spin mr-1 rtl:mr-0 rtl:ml-1" /> {lg.loading}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<RefreshCw className="w-4 h-4 inline mr-1" /> Refresh
|
<RefreshCw className="w-4 h-4 inline mr-1 rtl:mr-0 rtl:ml-1" /> {lg.refresh}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
@@ -337,7 +336,7 @@ function LogsPageContent() {
|
|||||||
onChange={(e) => setAutoRefresh(e.target.checked)}
|
onChange={(e) => setAutoRefresh(e.target.checked)}
|
||||||
className="rounded"
|
className="rounded"
|
||||||
/>
|
/>
|
||||||
Auto-refresh (5s)
|
{lg.autoRefresh}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -345,19 +344,19 @@ function LogsPageContent() {
|
|||||||
{stats && (
|
{stats && (
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
<div className="card p-4">
|
<div className="card p-4">
|
||||||
<p className="text-xs text-gray-500">Total ({stats.period})</p>
|
<p className="text-xs text-gray-500">{lg.totalPeriod.replace('{period}', stats.period)}</p>
|
||||||
<p className="text-2xl font-bold text-gray-900">{stats.total}</p>
|
<p className="text-2xl font-bold text-gray-900">{stats.total}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card p-4 border-red-100">
|
<div className="card p-4 border-red-100">
|
||||||
<p className="text-xs text-red-600">Errors</p>
|
<p className="text-xs text-red-600">{lg.errors}</p>
|
||||||
<p className="text-2xl font-bold text-red-700">{stats.errors}</p>
|
<p className="text-2xl font-bold text-red-700">{stats.errors}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card p-4 border-amber-100">
|
<div className="card p-4 border-amber-100">
|
||||||
<p className="text-xs text-amber-600">Warnings</p>
|
<p className="text-xs text-amber-600">{lg.warnings}</p>
|
||||||
<p className="text-2xl font-bold text-amber-700">{stats.warnings}</p>
|
<p className="text-2xl font-bold text-amber-700">{stats.warnings}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card p-4">
|
<div className="card p-4">
|
||||||
<p className="text-xs text-gray-500">Sources</p>
|
<p className="text-xs text-gray-500">{lg.sourcesStat}</p>
|
||||||
<p className="text-sm font-mono text-gray-800 mt-1">
|
<p className="text-sm font-mono text-gray-800 mt-1">
|
||||||
{Object.entries(stats.byWorkload || {})
|
{Object.entries(stats.byWorkload || {})
|
||||||
.map(([k, v]) => `${k}: ${v}`)
|
.map(([k, v]) => `${k}: ${v}`)
|
||||||
@@ -369,16 +368,19 @@ function LogsPageContent() {
|
|||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="card p-4 border-red-200 bg-red-50 text-red-800 text-sm">
|
<div className="card p-4 border-red-200 bg-red-50 text-red-800 text-sm">
|
||||||
Failed to load logs. Ensure logging is enabled on your application and Elasticsearch is running.
|
{lg.loadFailed}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="card overflow-hidden">
|
<div className="card overflow-hidden">
|
||||||
<div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
<div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
||||||
<h2 className="font-semibold text-gray-900">Log entries</h2>
|
<h2 className="font-semibold text-gray-900">{lg.logEntries}</h2>
|
||||||
{logsResult && (
|
{logsResult && (
|
||||||
<span className="text-xs text-gray-500">
|
<span className="text-xs text-gray-500">
|
||||||
{logsResult.total} total · page {page}/{totalPages}
|
{lg.totalPage
|
||||||
|
.replace('{total}', String(logsResult.total))
|
||||||
|
.replace('{page}', String(page))
|
||||||
|
.replace('{pages}', String(totalPages))}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -386,30 +388,30 @@ function LogsPageContent() {
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="p-12 text-center text-gray-500">
|
<div className="p-12 text-center text-gray-500">
|
||||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-2" />
|
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-2" />
|
||||||
Loading logs...
|
{lg.loadingLogs}
|
||||||
</div>
|
</div>
|
||||||
) : !logsResult?.hits?.length ? (
|
) : !logsResult?.hits?.length ? (
|
||||||
<div className="p-12 text-center text-gray-500 text-sm">
|
<div className="p-12 text-center text-gray-500 text-sm">
|
||||||
No logs found for the selected filters.
|
{lg.noLogs}
|
||||||
{!appId && <p className="mt-2">Deploy an app with logging enabled to start collecting logs.</p>}
|
{!appId && <p className="mt-2">{lg.noLogsHint}</p>}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="overflow-x-auto max-h-[600px] overflow-y-auto">
|
<div className="overflow-x-auto max-h-[600px] overflow-y-auto">
|
||||||
<table className="w-full text-sm">
|
<table className="w-full text-sm">
|
||||||
<thead className="bg-gray-50 sticky top-0">
|
<thead className="bg-gray-50 sticky top-0">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Time</th>
|
<th className="px-3 py-2 text-left rtl:text-right text-xs font-medium text-gray-500">{lg.colTime}</th>
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Level</th>
|
<th className="px-3 py-2 text-left rtl:text-right text-xs font-medium text-gray-500">{lg.colLevel}</th>
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 min-w-[300px]">App</th>
|
<th className="px-3 py-2 text-left rtl:text-right text-xs font-medium text-gray-500 min-w-[300px]">{lg.colApp}</th>
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Source</th>
|
<th className="px-3 py-2 text-left rtl:text-right text-xs font-medium text-gray-500">{lg.colSource}</th>
|
||||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Message</th>
|
<th className="px-3 py-2 text-left rtl:text-right text-xs font-medium text-gray-500">{lg.colMessage}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-100">
|
<tbody className="divide-y divide-gray-100">
|
||||||
{logsResult.hits.map((entry: LogEntry) => (
|
{logsResult.hits.map((entry: LogEntry) => (
|
||||||
<tr key={entry.id} className="hover:bg-gray-50 align-top">
|
<tr key={entry.id} className="hover:bg-gray-50 align-top">
|
||||||
<td className="px-3 py-2 font-mono text-xs text-gray-600 whitespace-nowrap">
|
<td className="px-3 py-2 font-mono text-xs text-gray-600 whitespace-nowrap">
|
||||||
{new Date(entry.timestamp).toLocaleString()}
|
{new Date(entry.timestamp).toLocaleString(locale)}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-3 py-2">
|
<td className="px-3 py-2">
|
||||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${levelBadgeClass(entry.level)}`}>
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${levelBadgeClass(entry.level)}`}>
|
||||||
@@ -436,7 +438,7 @@ function LogsPageContent() {
|
|||||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||||
className="btn-secondary text-sm disabled:opacity-40"
|
className="btn-secondary text-sm disabled:opacity-40"
|
||||||
>
|
>
|
||||||
<ChevronLeft className="w-4 h-4 inline" /> Previous
|
<ChevronLeft className="w-4 h-4 inline rtl:hidden" /><ChevronRight className="w-4 h-4 inline ltr:hidden" /> {lg.prev}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -444,7 +446,7 @@ function LogsPageContent() {
|
|||||||
onClick={() => setPage((p) => p + 1)}
|
onClick={() => setPage((p) => p + 1)}
|
||||||
className="btn-secondary text-sm disabled:opacity-40"
|
className="btn-secondary text-sm disabled:opacity-40"
|
||||||
>
|
>
|
||||||
Next <ChevronRight className="w-4 h-4 inline" />
|
{lg.next} <ChevronRight className="w-4 h-4 inline rtl:hidden" /><ChevronLeft className="w-4 h-4 inline ltr:hidden" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -454,8 +456,9 @@ function LogsPageContent() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function LogsPage() {
|
export default function LogsPage() {
|
||||||
|
const t = useT();
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<div className="p-8 text-center text-gray-500">Loading...</div>}>
|
<Suspense fallback={<div className="p-8 text-center text-gray-500">{t.common.loading}</div>}>
|
||||||
<LogsPageContent />
|
<LogsPageContent />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -441,6 +441,146 @@ const en: Dictionary = {
|
|||||||
statusUpdateFailed: 'Failed to update invoice status',
|
statusUpdateFailed: 'Failed to update invoice status',
|
||||||
reasonRequired: 'Reason is required for manual status changes',
|
reasonRequired: 'Reason is required for manual status changes',
|
||||||
},
|
},
|
||||||
|
logs: {
|
||||||
|
title: 'Logs',
|
||||||
|
subtitle: 'Application, Redis, RabbitMQ, and database logs in one place',
|
||||||
|
levels: { all: 'All levels', error: 'Error', warn: 'Warning', info: 'Info', debug: 'Debug' },
|
||||||
|
sources: { all: 'All sources', app: 'Application', redis: 'Redis', rabbitmq: 'RabbitMQ', database: 'Database' },
|
||||||
|
ranges: { '1h': 'Last hour', '6h': 'Last 6 hours', '24h': 'Last 24 hours', '7d': 'Last 7 days' },
|
||||||
|
resource: 'Resource',
|
||||||
|
allResources: 'All resources',
|
||||||
|
applicationsGroup: 'Applications',
|
||||||
|
servicesGroup: 'Databases & services',
|
||||||
|
source: 'Source',
|
||||||
|
level: 'Level',
|
||||||
|
timeRange: 'Time range',
|
||||||
|
search: 'Search',
|
||||||
|
searchPlaceholder: 'Search message...',
|
||||||
|
loading: 'Loading',
|
||||||
|
refresh: 'Refresh',
|
||||||
|
autoRefresh: 'Auto-refresh (5s)',
|
||||||
|
totalPeriod: 'Total ({period})',
|
||||||
|
errors: 'Errors',
|
||||||
|
warnings: 'Warnings',
|
||||||
|
sourcesStat: 'Sources',
|
||||||
|
loadFailed: 'Failed to load logs. Ensure logging is enabled on your application and Elasticsearch is running.',
|
||||||
|
logEntries: 'Log entries',
|
||||||
|
totalPage: '{total} total · page {page}/{pages}',
|
||||||
|
loadingLogs: 'Loading logs...',
|
||||||
|
noLogs: 'No logs found for the selected filters.',
|
||||||
|
noLogsHint: 'Deploy an app with logging enabled to start collecting logs.',
|
||||||
|
colTime: 'Time',
|
||||||
|
colLevel: 'Level',
|
||||||
|
colApp: 'App',
|
||||||
|
colSource: 'Source',
|
||||||
|
colMessage: 'Message',
|
||||||
|
prev: 'Previous',
|
||||||
|
next: 'Next',
|
||||||
|
reconnecting: 'Reconnecting to logging…',
|
||||||
|
notAvailable: 'Logging not available',
|
||||||
|
notAvailableMessage: 'Central Elasticsearch is not deployed on the cluster. Enable the logging addon when deploying an app, and ask an administrator to deploy the logging stack.',
|
||||||
|
checkingConnection: 'Checking connection…',
|
||||||
|
retryingAuto: 'Retrying automatically every few seconds.',
|
||||||
|
},
|
||||||
|
users: {
|
||||||
|
title: 'User Management',
|
||||||
|
count: '{n} user(s) registered',
|
||||||
|
addUser: 'Add User',
|
||||||
|
createNewUser: 'Create New User',
|
||||||
|
firstName: 'First Name',
|
||||||
|
lastName: 'Last Name',
|
||||||
|
email: 'Email',
|
||||||
|
password: 'Password',
|
||||||
|
firstNamePlaceholder: 'John',
|
||||||
|
lastNamePlaceholder: 'Doe',
|
||||||
|
emailPlaceholder: 'john@example.com',
|
||||||
|
passwordMin: 'Min 8 characters',
|
||||||
|
role: 'Role',
|
||||||
|
roles: { user: 'User', admin: 'Admin', technical: 'Technical', sales: 'Sales' },
|
||||||
|
creating: 'Creating...',
|
||||||
|
createUser: 'Create User',
|
||||||
|
searchPlaceholder: 'Search by name or email...',
|
||||||
|
noUsersSearch: 'No users found matching your search.',
|
||||||
|
noUsers: 'No users yet.',
|
||||||
|
colUser: 'User',
|
||||||
|
colEmail: 'Email',
|
||||||
|
colRole: 'Role',
|
||||||
|
colStatus: 'Status',
|
||||||
|
colApps: 'Apps',
|
||||||
|
colCreated: 'Created',
|
||||||
|
colActions: 'Actions',
|
||||||
|
active: 'Active',
|
||||||
|
inactive: 'Inactive',
|
||||||
|
appsCount: '{n} apps',
|
||||||
|
passwordBtn: 'Password',
|
||||||
|
deactivate: 'Deactivate',
|
||||||
|
activate: 'Activate',
|
||||||
|
setPassword: 'Set password',
|
||||||
|
newPasswordFor: 'New password for',
|
||||||
|
savePassword: 'Save password',
|
||||||
|
saving: 'Saving...',
|
||||||
|
createdSuccess: 'User created successfully',
|
||||||
|
createFailed: 'Failed to create user',
|
||||||
|
userUpdated: 'User updated',
|
||||||
|
roleUpdated: 'Role updated',
|
||||||
|
passwordUpdated: 'Password updated',
|
||||||
|
passwordFailed: 'Failed to update password',
|
||||||
|
},
|
||||||
|
pools: {
|
||||||
|
title: 'Cluster Pools',
|
||||||
|
subtitle: 'Load-balanced groups of clusters for automatic app distribution',
|
||||||
|
createPool: 'Create Pool',
|
||||||
|
editTitle: 'Edit “{name}”',
|
||||||
|
createNewPool: 'Create New Cluster Pool',
|
||||||
|
poolName: 'Pool Name',
|
||||||
|
strategy: 'Strategy',
|
||||||
|
strategyOptions: {
|
||||||
|
'weighted-resource': 'Weighted Resource — prefer healthy capacity and higher weights',
|
||||||
|
'least-loaded': 'Least Loaded — prefer lowest CPU, memory, and pod pressure',
|
||||||
|
'weighted-round-robin': 'Weighted Round Robin — rotate proportionally by weight',
|
||||||
|
'region-based': 'Region Based — prefer matching region, then weight and load',
|
||||||
|
'least-apps': 'Least Apps — deploy to cluster with fewest apps',
|
||||||
|
'round-robin': 'Round Robin — rotate across clusters evenly',
|
||||||
|
},
|
||||||
|
strategyShort: {
|
||||||
|
'weighted-resource': 'Weighted Resource',
|
||||||
|
'least-loaded': 'Least Loaded',
|
||||||
|
'weighted-round-robin': 'Weighted RR',
|
||||||
|
'region-based': 'Region Based',
|
||||||
|
'least-apps': 'Least Apps',
|
||||||
|
'round-robin': 'Round Robin',
|
||||||
|
},
|
||||||
|
priority: 'Priority',
|
||||||
|
description: 'Description',
|
||||||
|
descriptionPlaceholder: 'Load-balanced pool for production workloads',
|
||||||
|
useAsDefault: 'Use as default allocator pool',
|
||||||
|
selectClusters: 'Select Clusters ({n} selected)',
|
||||||
|
noClustersRegistered: 'No clusters registered. Add clusters first.',
|
||||||
|
defaultBadge: 'Default',
|
||||||
|
na: 'N/A',
|
||||||
|
weight: 'weight',
|
||||||
|
saving: 'Saving...',
|
||||||
|
updatePool: 'Update Pool',
|
||||||
|
poolCreated: 'Cluster pool created!',
|
||||||
|
createFailed: 'Failed to create pool',
|
||||||
|
poolUpdated: 'Cluster pool updated!',
|
||||||
|
updateFailed: 'Failed to update pool',
|
||||||
|
poolDeleted: 'Cluster pool deleted',
|
||||||
|
noPools: 'No cluster pools created yet',
|
||||||
|
noPoolsHint: 'Create a pool to enable load-balanced deployment across multiple clusters',
|
||||||
|
active: 'Active',
|
||||||
|
inactive: 'Inactive',
|
||||||
|
defaultPool: 'Default Pool',
|
||||||
|
priorityBadge: 'Priority {n}',
|
||||||
|
noClustersInPool: 'No clusters in this pool (they may have been deleted)',
|
||||||
|
clustersActive: '{active}/{total} clusters active · Created {date}',
|
||||||
|
edit: 'Edit',
|
||||||
|
remove: 'Remove',
|
||||||
|
deletePoolTitle: 'Delete Pool “{name}”',
|
||||||
|
deletePoolMessage: 'Apps already assigned to this pool will keep their current cluster.',
|
||||||
|
clusterStatus: { active: 'active', inactive: 'inactive', error: 'error' },
|
||||||
|
clusterHealth: { healthy: 'healthy', degraded: 'degraded', unhealthy: 'unhealthy', unknown: 'unknown' },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -440,6 +440,146 @@ const fa = {
|
|||||||
statusUpdateFailed: 'بهروزرسانی وضعیت فاکتور ناموفق بود',
|
statusUpdateFailed: 'بهروزرسانی وضعیت فاکتور ناموفق بود',
|
||||||
reasonRequired: 'برای تغییر دستی وضعیت، ذکر دلیل الزامی است',
|
reasonRequired: 'برای تغییر دستی وضعیت، ذکر دلیل الزامی است',
|
||||||
},
|
},
|
||||||
|
logs: {
|
||||||
|
title: 'لاگها',
|
||||||
|
subtitle: 'لاگ اپلیکیشن، Redis، RabbitMQ و دیتابیس در یکجا',
|
||||||
|
levels: { all: 'همهٔ سطوح', error: 'خطا', warn: 'هشدار', info: 'اطلاع', debug: 'دیباگ' },
|
||||||
|
sources: { all: 'همهٔ منابع', app: 'اپلیکیشن', redis: 'Redis', rabbitmq: 'RabbitMQ', database: 'دیتابیس' },
|
||||||
|
ranges: { '1h': 'یک ساعت اخیر', '6h': '۶ ساعت اخیر', '24h': '۲۴ ساعت اخیر', '7d': '۷ روز اخیر' },
|
||||||
|
resource: 'منبع',
|
||||||
|
allResources: 'همهٔ منابع',
|
||||||
|
applicationsGroup: 'اپلیکیشنها',
|
||||||
|
servicesGroup: 'دیتابیسها و سرویسها',
|
||||||
|
source: 'منبع',
|
||||||
|
level: 'سطح',
|
||||||
|
timeRange: 'بازهٔ زمانی',
|
||||||
|
search: 'جستجو',
|
||||||
|
searchPlaceholder: 'جستجوی پیام…',
|
||||||
|
loading: 'در حال بارگذاری',
|
||||||
|
refresh: 'تازهسازی',
|
||||||
|
autoRefresh: 'تازهسازی خودکار (۵ث)',
|
||||||
|
totalPeriod: 'مجموع ({period})',
|
||||||
|
errors: 'خطاها',
|
||||||
|
warnings: 'هشدارها',
|
||||||
|
sourcesStat: 'منابع',
|
||||||
|
loadFailed: 'بارگذاری لاگها ناموفق بود. مطمئن شو لاگینگ روی اپت فعال است و Elasticsearch در حال اجراست.',
|
||||||
|
logEntries: 'ورودیهای لاگ',
|
||||||
|
totalPage: '{total} مورد · صفحهٔ {page}/{pages}',
|
||||||
|
loadingLogs: 'در حال بارگذاری لاگها…',
|
||||||
|
noLogs: 'برای فیلترهای انتخابشده لاگی پیدا نشد.',
|
||||||
|
noLogsHint: 'برای شروع جمعآوری لاگ، اپی با لاگینگ فعال منتشر کن.',
|
||||||
|
colTime: 'زمان',
|
||||||
|
colLevel: 'سطح',
|
||||||
|
colApp: 'اپ',
|
||||||
|
colSource: 'منبع',
|
||||||
|
colMessage: 'پیام',
|
||||||
|
prev: 'قبلی',
|
||||||
|
next: 'بعدی',
|
||||||
|
reconnecting: 'در حال اتصال مجدد به لاگینگ…',
|
||||||
|
notAvailable: 'لاگینگ در دسترس نیست',
|
||||||
|
notAvailableMessage: 'Elasticsearch مرکزی روی کلاستر مستقر نشده است. هنگام انتشار اپ، افزونهٔ لاگینگ را فعال کن و از مدیر بخواه استک لاگینگ را مستقر کند.',
|
||||||
|
checkingConnection: 'در حال بررسی اتصال…',
|
||||||
|
retryingAuto: 'هر چند ثانیه بهصورت خودکار تلاش میشود.',
|
||||||
|
},
|
||||||
|
users: {
|
||||||
|
title: 'مدیریت کاربران',
|
||||||
|
count: '{n} کاربر ثبتشده',
|
||||||
|
addUser: 'افزودن کاربر',
|
||||||
|
createNewUser: 'ساخت کاربر جدید',
|
||||||
|
firstName: 'نام',
|
||||||
|
lastName: 'نام خانوادگی',
|
||||||
|
email: 'ایمیل',
|
||||||
|
password: 'رمز عبور',
|
||||||
|
firstNamePlaceholder: 'مثلاً علی',
|
||||||
|
lastNamePlaceholder: 'مثلاً رضایی',
|
||||||
|
emailPlaceholder: 'name@example.com',
|
||||||
|
passwordMin: 'حداقل ۸ کاراکتر',
|
||||||
|
role: 'نقش',
|
||||||
|
roles: { user: 'کاربر', admin: 'مدیر', technical: 'فنی', sales: 'فروش' },
|
||||||
|
creating: 'در حال ساخت…',
|
||||||
|
createUser: 'ساخت کاربر',
|
||||||
|
searchPlaceholder: 'جستجو بر اساس نام یا ایمیل…',
|
||||||
|
noUsersSearch: 'کاربری مطابق جستجو پیدا نشد.',
|
||||||
|
noUsers: 'هنوز کاربری نیست.',
|
||||||
|
colUser: 'کاربر',
|
||||||
|
colEmail: 'ایمیل',
|
||||||
|
colRole: 'نقش',
|
||||||
|
colStatus: 'وضعیت',
|
||||||
|
colApps: 'اپها',
|
||||||
|
colCreated: 'تاریخ ایجاد',
|
||||||
|
colActions: 'عملیات',
|
||||||
|
active: 'فعال',
|
||||||
|
inactive: 'غیرفعال',
|
||||||
|
appsCount: '{n} اپ',
|
||||||
|
passwordBtn: 'رمز عبور',
|
||||||
|
deactivate: 'غیرفعالسازی',
|
||||||
|
activate: 'فعالسازی',
|
||||||
|
setPassword: 'تنظیم رمز عبور',
|
||||||
|
newPasswordFor: 'رمز عبور جدید برای',
|
||||||
|
savePassword: 'ذخیرهٔ رمز',
|
||||||
|
saving: 'در حال ذخیره…',
|
||||||
|
createdSuccess: 'کاربر با موفقیت ساخته شد',
|
||||||
|
createFailed: 'ساخت کاربر ناموفق بود',
|
||||||
|
userUpdated: 'کاربر بهروزرسانی شد',
|
||||||
|
roleUpdated: 'نقش بهروزرسانی شد',
|
||||||
|
passwordUpdated: 'رمز عبور بهروزرسانی شد',
|
||||||
|
passwordFailed: 'بهروزرسانی رمز ناموفق بود',
|
||||||
|
},
|
||||||
|
pools: {
|
||||||
|
title: 'پولهای کلاستر',
|
||||||
|
subtitle: 'گروههای متوازنشدهٔ کلاستر برای توزیع خودکار اپها',
|
||||||
|
createPool: 'ساخت پول',
|
||||||
|
editTitle: 'ویرایش «{name}»',
|
||||||
|
createNewPool: 'ساخت پول کلاستر جدید',
|
||||||
|
poolName: 'نام پول',
|
||||||
|
strategy: 'استراتژی',
|
||||||
|
strategyOptions: {
|
||||||
|
'weighted-resource': 'منابع وزندار — اولویت با ظرفیت سالم و وزن بالاتر',
|
||||||
|
'least-loaded': 'کمبارترین — اولویت با کمترین CPU، حافظه و فشار پاد',
|
||||||
|
'weighted-round-robin': 'چرخشی وزندار — چرخش متناسب با وزن',
|
||||||
|
'region-based': 'بر اساس منطقه — اولویت با منطقهٔ منطبق، سپس وزن و بار',
|
||||||
|
'least-apps': 'کمترین اپ — انتشار روی کلاستر با کمترین اپ',
|
||||||
|
'round-robin': 'چرخشی — چرخش یکنواخت بین کلاسترها',
|
||||||
|
},
|
||||||
|
strategyShort: {
|
||||||
|
'weighted-resource': 'منابع وزندار',
|
||||||
|
'least-loaded': 'کمبارترین',
|
||||||
|
'weighted-round-robin': 'چرخشی وزندار',
|
||||||
|
'region-based': 'بر اساس منطقه',
|
||||||
|
'least-apps': 'کمترین اپ',
|
||||||
|
'round-robin': 'چرخشی',
|
||||||
|
},
|
||||||
|
priority: 'اولویت',
|
||||||
|
description: 'توضیحات',
|
||||||
|
descriptionPlaceholder: 'پول متوازنشده برای بارهای کاری پروداکشن',
|
||||||
|
useAsDefault: 'استفاده بهعنوان پول تخصیص پیشفرض',
|
||||||
|
selectClusters: 'انتخاب کلاسترها ({n} انتخابشده)',
|
||||||
|
noClustersRegistered: 'هیچ کلاستری ثبت نشده. اول کلاستر اضافه کن.',
|
||||||
|
defaultBadge: 'پیشفرض',
|
||||||
|
na: 'نامشخص',
|
||||||
|
weight: 'وزن',
|
||||||
|
saving: 'در حال ذخیره…',
|
||||||
|
updatePool: 'بهروزرسانی پول',
|
||||||
|
poolCreated: 'پول کلاستر ساخته شد!',
|
||||||
|
createFailed: 'ساخت پول ناموفق بود',
|
||||||
|
poolUpdated: 'پول کلاستر بهروزرسانی شد!',
|
||||||
|
updateFailed: 'بهروزرسانی پول ناموفق بود',
|
||||||
|
poolDeleted: 'پول کلاستر حذف شد',
|
||||||
|
noPools: 'هنوز پول کلاستری ساخته نشده',
|
||||||
|
noPoolsHint: 'برای فعالسازی انتشار متوازن روی چند کلاستر، یک پول بساز',
|
||||||
|
active: 'فعال',
|
||||||
|
inactive: 'غیرفعال',
|
||||||
|
defaultPool: 'پول پیشفرض',
|
||||||
|
priorityBadge: 'اولویت {n}',
|
||||||
|
noClustersInPool: 'کلاستری در این پول نیست (شاید حذف شدهاند)',
|
||||||
|
clustersActive: '{active}/{total} کلاستر فعال · ایجاد {date}',
|
||||||
|
edit: 'ویرایش',
|
||||||
|
remove: 'حذف',
|
||||||
|
deletePoolTitle: 'حذف پول «{name}»',
|
||||||
|
deletePoolMessage: 'اپهایی که از قبل به این پول اختصاص یافتهاند، کلاستر فعلیشان را حفظ میکنند.',
|
||||||
|
clusterStatus: { active: 'فعال', inactive: 'غیرفعال', error: 'خطا' },
|
||||||
|
clusterHealth: { healthy: 'سالم', degraded: 'نزولیافته', unhealthy: 'ناسالم', unknown: 'نامشخص' },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user