Add i18n foundation (fa-IR/en-US) and localize landing + auth.
Introduce path-prefixed locale routing under app/[lang] with a middleware that detects locale from cookie/Accept-Language (default fa-IR) and redirects. Add fa-IR (source of truth) and en-US dictionaries, a server getDictionary, a client I18nProvider/useT, locale-aware Link + router helpers, and a language switcher. The root [lang] layout sets html lang/dir and the per-locale font (Peyda for fa, Inter for en). Landing sections and the login/register/auth shell now read all copy from the dictionaries; dashboard localization follows in a later commit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
@@ -0,0 +1,709 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import api from '@/lib/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { Application, AppLifecycleStatus, ApplicationMigrationEvent, ApplicationMigrationJob, BillingCycle, Cluster } from '@/types';
|
||||
import { Search, X, Package, Hexagon, User, Database, Box, AlertTriangle, Clock, ArrowRightLeft, RefreshCw } from 'lucide-react';
|
||||
import { useConfirm } from '@/components/confirm-modal';
|
||||
import { DeleteButtonLabel } from '@/components/delete-button-label';
|
||||
import {
|
||||
DeletingCardOverlay,
|
||||
DeletingTableRowOverlay,
|
||||
deletingResourceMessage,
|
||||
deletingRowContentClass,
|
||||
} from '@/components/deleting-overlay';
|
||||
import { TruncatedText } from '@/components/truncated-text';
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
import { useApplicationDelete } from '@/lib/use-application-delete';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
running: 'badge-green',
|
||||
pending: 'badge-yellow',
|
||||
building: 'badge-blue',
|
||||
deploying: 'badge-blue',
|
||||
failed: 'badge-red',
|
||||
build_failed: 'badge-red',
|
||||
cancelled: 'badge-gray',
|
||||
stopped: 'badge-gray',
|
||||
};
|
||||
|
||||
const lifecycleColors: Record<string, string> = {
|
||||
active: 'text-green-600 bg-green-50',
|
||||
suspended: 'text-amber-700 bg-amber-50',
|
||||
pending_deletion: 'text-red-700 bg-red-50',
|
||||
deleted: 'text-gray-500 bg-gray-100',
|
||||
};
|
||||
|
||||
const lifecycleLabels: Record<string, string> = {
|
||||
active: 'Active',
|
||||
suspended: 'Suspended — Unpaid',
|
||||
pending_deletion: 'Pending Deletion',
|
||||
deleted: 'Deleted',
|
||||
};
|
||||
|
||||
const cycleLabels: Record<string, string> = {
|
||||
hourly: 'Hourly',
|
||||
monthly: 'Monthly',
|
||||
yearly: 'Yearly',
|
||||
};
|
||||
|
||||
function formatExpiry(expiresAt?: string): { text: string; urgent: boolean } {
|
||||
if (!expiresAt) return { text: '—', urgent: false };
|
||||
const now = new Date();
|
||||
const exp = new Date(expiresAt);
|
||||
const diff = exp.getTime() - now.getTime();
|
||||
if (diff <= 0) return { text: 'Expired', urgent: true };
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days > 0) return { text: `${days}d ${hours % 24}h`, urgent: days < 3 };
|
||||
if (hours > 0) return { text: `${hours}h`, urgent: hours < 6 };
|
||||
const mins = Math.floor(diff / 60000);
|
||||
return { text: `${mins}m`, urgent: true };
|
||||
}
|
||||
|
||||
function formatDeletionDate(date?: string): string {
|
||||
if (!date) return '';
|
||||
return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function migrationStatusBadgeClass(status: ApplicationMigrationJob['status']): string {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'badge-green';
|
||||
case 'failed':
|
||||
case 'rolled_back':
|
||||
return 'badge-red';
|
||||
case 'running':
|
||||
case 'rolling_back':
|
||||
return 'badge-blue';
|
||||
default:
|
||||
return 'badge-gray';
|
||||
}
|
||||
}
|
||||
|
||||
function formatMigrationStatus(status: ApplicationMigrationJob['status']): string {
|
||||
return status.replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
export default function AdminAppsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const confirm = useConfirm();
|
||||
const [search, setSearch] = useState('');
|
||||
const debouncedSearch = useDebounce(search, 400);
|
||||
const [migrateApp, setMigrateApp] = useState<Application | null>(null);
|
||||
const [targetClusterId, setTargetClusterId] = useState('');
|
||||
|
||||
const { data: apps = [], isLoading } = useQuery<Application[]>({
|
||||
queryKey: ['admin-applications', debouncedSearch],
|
||||
queryFn: () =>
|
||||
api
|
||||
.get('/applications/all', { params: debouncedSearch ? { search: debouncedSearch } : {} })
|
||||
.then((r) => r.data),
|
||||
});
|
||||
|
||||
const { deleteApplication, isDeleting, isAnyDeleting } = useApplicationDelete({
|
||||
invalidateKeys: [['admin-applications']],
|
||||
successMessage: 'Application deleted',
|
||||
});
|
||||
|
||||
const { data: clusters = [] } = useQuery<Cluster[]>({
|
||||
queryKey: ['admin-clusters'],
|
||||
queryFn: () => api.get('/clusters').then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data: migrations = [] } = useQuery<ApplicationMigrationJob[]>({
|
||||
queryKey: ['application-migrations'],
|
||||
queryFn: () => api.get('/application-migrations').then((r) => r.data),
|
||||
refetchInterval: 5000,
|
||||
});
|
||||
|
||||
const selectedMigration = migrateApp
|
||||
? migrations.find((migration) => migration.applicationId === migrateApp.id)
|
||||
: undefined;
|
||||
const clusterById = new Map(clusters.map((cluster) => [cluster.id, cluster]));
|
||||
const currentCluster = migrateApp?.clusterId ? clusterById.get(migrateApp.clusterId) : undefined;
|
||||
const targetClusters = migrateApp
|
||||
? clusters.filter((cluster) => cluster.id !== migrateApp.clusterId)
|
||||
: [];
|
||||
|
||||
const { data: selectedMigrationEvents = [] } = useQuery<ApplicationMigrationEvent[]>({
|
||||
queryKey: ['application-migration-events', selectedMigration?.id],
|
||||
queryFn: () => api.get(`/application-migrations/${selectedMigration!.id}/events`).then((r) => r.data),
|
||||
enabled: !!selectedMigration?.id,
|
||||
refetchInterval: selectedMigration && ['queued', 'running', 'rolling_back'].includes(selectedMigration.status) ? 3000 : false,
|
||||
});
|
||||
|
||||
const migrateMutation = useMutation({
|
||||
mutationFn: ({ appId, clusterId }: { appId: string; clusterId: string }) =>
|
||||
api.post(`/application-migrations/applications/${appId}`, {
|
||||
targetClusterId: clusterId,
|
||||
migrateStorage: true,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
|
||||
toast.success('Migration job queued');
|
||||
},
|
||||
onError: (err: any) => toast.error(err?.response?.data?.message || 'Failed to queue migration'),
|
||||
});
|
||||
|
||||
const retryMigration = useMutation({
|
||||
mutationFn: (id: string) => api.post(`/application-migrations/${id}/retry`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
|
||||
toast.success('Migration retry queued');
|
||||
},
|
||||
onError: (err: any) => toast.error(err?.response?.data?.message || 'Failed to retry migration'),
|
||||
});
|
||||
|
||||
// Compute status counts from apps
|
||||
const statusCounts = apps.reduce(
|
||||
(acc, app) => {
|
||||
const status = app.deployments?.[0]?.status || 'pending';
|
||||
if (status === 'running') acc.running++;
|
||||
else if (status === 'stopped') acc.stopped++;
|
||||
else if (status === 'failed' || status === 'build_failed') acc.failed++;
|
||||
else if (status === 'building' || status === 'deploying') acc.deploying++;
|
||||
else acc.pending++;
|
||||
// Lifecycle counts
|
||||
const lc = app.lifecycleStatus || 'active';
|
||||
if (lc === 'suspended') acc.suspended++;
|
||||
if (lc === 'pending_deletion') acc.pendingDeletion++;
|
||||
return acc;
|
||||
},
|
||||
{ running: 0, stopped: 0, failed: 0, deploying: 0, pending: 0, suspended: 0, pendingDeletion: 0 },
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="page-header">
|
||||
<div className="skeleton h-8 w-56" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className="card py-4">
|
||||
<div className="skeleton h-8 w-12 mx-auto mb-2" />
|
||||
<div className="skeleton h-3 w-16 mx-auto" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="skeleton h-10 w-full rounded-xl" />
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="card flex items-center gap-4">
|
||||
<div className="skeleton w-11 h-11 rounded-xl" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="skeleton h-4 w-36" />
|
||||
<div className="skeleton h-3 w-56" />
|
||||
</div>
|
||||
<div className="skeleton h-6 w-20 rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<h1 className="page-title">All Applications</h1>
|
||||
<p className="page-subtitle">
|
||||
{apps.length} application{apps.length !== 1 ? 's' : ''}
|
||||
{debouncedSearch && ` matching "${debouncedSearch}"`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Summary Cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
|
||||
<div className="card py-4 text-center border-l-4 border-l-green-500">
|
||||
<p className="text-2xl font-bold text-green-600">{statusCounts.running}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Running</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-blue-500">
|
||||
<p className="text-2xl font-bold text-blue-600">{statusCounts.deploying}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Deploying</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-yellow-500">
|
||||
<p className="text-2xl font-bold text-yellow-600">{statusCounts.pending}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Pending</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-gray-400">
|
||||
<p className="text-2xl font-bold text-gray-500">{statusCounts.stopped}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Stopped</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-red-500">
|
||||
<p className="text-2xl font-bold text-red-600">{statusCounts.failed}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Failed</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-amber-500">
|
||||
<p className="text-2xl font-bold text-amber-600">{statusCounts.suspended}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Suspended</p>
|
||||
</div>
|
||||
<div className="card py-4 text-center border-l-4 border-l-red-700">
|
||||
<p className="text-2xl font-bold text-red-700">{statusCounts.pendingDeletion}</p>
|
||||
<p className="text-xs text-gray-500 font-medium mt-1">Pending Del.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by app name, user name, email, or user ID…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="input pl-10 w-full"
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => setSearch('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{apps.length === 0 ? (
|
||||
<div className="card text-center py-16">
|
||||
<Package className="w-12 h-12 mx-auto mb-4 text-gray-300" />
|
||||
{debouncedSearch ? (
|
||||
<>
|
||||
<p className="text-gray-600 text-lg font-medium">No applications found</p>
|
||||
<p className="text-gray-400 mt-1 text-sm">
|
||||
No results for "{debouncedSearch}". Try a different search.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-gray-600 text-lg font-medium">No applications yet</p>
|
||||
<p className="text-gray-400 mt-1 text-sm">No applications have been created by any user.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Desktop Table */}
|
||||
<div className="hidden lg:block table-wrapper overflow-x-auto">
|
||||
<table className="min-w-[1180px] w-full table-fixed divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50/80">
|
||||
<tr>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-[300px] min-w-[300px]">Application</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Owner</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 text-xs font-semibold text-gray-500 uppercase tracking-wider">Service</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Cluster</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Migration</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Plan / Expiry</th>
|
||||
<th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider min-w-[200px]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{apps.map((app) => {
|
||||
const latestStatus = app.deployments?.[0]?.status || 'pending';
|
||||
const lifecycle = app.lifecycleStatus || 'active';
|
||||
const expiry = formatExpiry(app.planExpiresAt);
|
||||
const latestMigration = migrations.find((migration) => migration.applicationId === app.id);
|
||||
const assignedCluster = app.clusterId ? clusterById.get(app.clusterId) : undefined;
|
||||
const rowDeleting = isDeleting(app.id);
|
||||
return (
|
||||
<tr
|
||||
key={app.id}
|
||||
className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'relative bg-gray-50/80' : ''}`}
|
||||
>
|
||||
<td className={`px-6 py-4 min-w-[300px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
<Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-[300px] group">
|
||||
<div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
|
||||
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<TruncatedText className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
|
||||
{app.name}
|
||||
</TruncatedText>
|
||||
<TruncatedText className="text-xs text-gray-400 capitalize">{app.runtime}</TruncatedText>
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
{app.user ? (
|
||||
<div className="min-w-0">
|
||||
<TruncatedText className="text-sm font-medium text-gray-900">
|
||||
{`${app.user.firstName} ${app.user.lastName}`}
|
||||
</TruncatedText>
|
||||
<TruncatedText className="text-xs text-gray-400">{app.user.email}</TruncatedText>
|
||||
<TruncatedText className="text-xs text-gray-300 font-mono">{app.userId}</TruncatedText>
|
||||
</div>
|
||||
) : (
|
||||
<TruncatedText className="text-xs text-gray-400 font-mono">{app.userId}</TruncatedText>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[120px] text-sm text-gray-600 capitalize ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
<span className={`badge max-w-full truncate ${statusColors[latestStatus] || 'badge-gray'}`} title={latestStatus}>
|
||||
{latestStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[180px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
<span
|
||||
className={`inline-flex max-w-full items-center gap-1 truncate px-2 py-1 rounded-full text-xs font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}
|
||||
title={lifecycleLabels[lifecycle] || lifecycle}
|
||||
>
|
||||
{lifecycle === 'suspended' && <AlertTriangle className="w-3 h-3 shrink-0" />}
|
||||
<span className="truncate">{lifecycleLabels[lifecycle] || lifecycle}</span>
|
||||
</span>
|
||||
{lifecycle === 'pending_deletion' && app.scheduledDeletionAt && (
|
||||
<TruncatedText className="text-xs text-red-500 mt-1">
|
||||
{`Delete: ${formatDeletionDate(app.scheduledDeletionAt)}`}
|
||||
</TruncatedText>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
{assignedCluster ? (
|
||||
<div className="min-w-0">
|
||||
<TruncatedText className="text-sm font-medium text-gray-900">{assignedCluster.name}</TruncatedText>
|
||||
<TruncatedText className="text-xs text-gray-400">
|
||||
{`${assignedCluster.region || 'N/A'} · ${assignedCluster.status}/${assignedCluster.healthStatus || 'unknown'}`}
|
||||
</TruncatedText>
|
||||
</div>
|
||||
) : app.clusterId ? (
|
||||
<div className="min-w-0">
|
||||
<TruncatedText className="text-sm font-medium text-gray-700">Unknown cluster</TruncatedText>
|
||||
<TruncatedText className="text-xs text-gray-400 font-mono">{app.clusterId}</TruncatedText>
|
||||
</div>
|
||||
) : (
|
||||
<TruncatedText className="text-xs text-gray-400">Not assigned</TruncatedText>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
{latestMigration ? (
|
||||
<span
|
||||
className={`badge text-xs capitalize max-w-full truncate ${migrationStatusBadgeClass(latestMigration.status)}`}
|
||||
title={formatMigrationStatus(latestMigration.status)}
|
||||
>
|
||||
{formatMigrationStatus(latestMigration.status)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
{app.billingCycle && (
|
||||
<span
|
||||
className="badge badge-purple text-xs max-w-full truncate"
|
||||
title={cycleLabels[app.billingCycle] || app.billingCycle}
|
||||
>
|
||||
{cycleLabels[app.billingCycle] || app.billingCycle}
|
||||
</span>
|
||||
)}
|
||||
{app.planExpiresAt ? (
|
||||
<TruncatedText className={`text-xs mt-1 ${expiry.urgent ? 'text-red-600 font-semibold' : 'text-gray-500'}`}>
|
||||
{expiry.text}
|
||||
</TruncatedText>
|
||||
) : (
|
||||
<TruncatedText className="text-xs text-gray-400">No plan</TruncatedText>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-6 py-4 text-right ${rowDeleting ? deletingRowContentClass : ''}`}>
|
||||
<div className="flex flex-wrap items-center justify-end gap-1.5">
|
||||
<Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
|
||||
View
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMigrateApp(app);
|
||||
setTargetClusterId('');
|
||||
}}
|
||||
disabled={!app.clusterId}
|
||||
className="btn-secondary text-xs px-3 py-1.5 inline-flex items-center gap-1 disabled:opacity-50"
|
||||
title={!app.clusterId ? 'Application is not assigned to a cluster' : undefined}
|
||||
>
|
||||
<ArrowRightLeft className="w-3 h-3" /> Migrate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isAnyDeleting}
|
||||
onClick={async () => {
|
||||
const ok = await confirm({ title: 'Delete Application', message: `Are you sure you want to delete "${app.name}"?`, confirmText: 'Delete', variant: 'danger' });
|
||||
if (ok) deleteApplication(app.id);
|
||||
}}
|
||||
className="text-xs px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors font-medium disabled:opacity-50 disabled:pointer-events-none"
|
||||
>
|
||||
<DeleteButtonLabel loading={isDeleting(app.id)} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
{rowDeleting && (
|
||||
<DeletingTableRowOverlay
|
||||
colSpan={8}
|
||||
message={deletingResourceMessage('application', app.name)}
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile / tablet cards */}
|
||||
<div className="lg:hidden grid gap-3">
|
||||
{apps.map((app) => {
|
||||
const latestStatus = app.deployments?.[0]?.status || 'pending';
|
||||
const lifecycle = app.lifecycleStatus || 'active';
|
||||
const expiry = formatExpiry(app.planExpiresAt);
|
||||
const latestMigration = migrations.find((migration) => migration.applicationId === app.id);
|
||||
const assignedCluster = app.clusterId ? clusterById.get(app.clusterId) : undefined;
|
||||
const cardDeleting = isDeleting(app.id);
|
||||
return (
|
||||
<div
|
||||
key={app.id}
|
||||
className={`relative card space-y-3 ${lifecycle === 'suspended' ? 'border-amber-200/80' : lifecycle === 'pending_deletion' ? 'border-red-200/80' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
|
||||
>
|
||||
{cardDeleting && (
|
||||
<DeletingCardOverlay message={deletingResourceMessage('application', app.name)} />
|
||||
)}
|
||||
<div className={cardDeleting ? deletingRowContentClass : undefined}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center shrink-0">
|
||||
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<TruncatedText className="font-semibold text-gray-900">{app.name}</TruncatedText>
|
||||
<p className="text-xs text-gray-500 capitalize">{app.runtime}</p>
|
||||
</div>
|
||||
</Link>
|
||||
<span className={`badge shrink-0 ${statusColors[latestStatus] || 'badge-gray'}`}>
|
||||
{latestStatus}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{app.user && (
|
||||
<div className="text-xs text-gray-500 space-y-0.5">
|
||||
<p className="flex items-center gap-1 font-medium text-gray-700">
|
||||
<User className="w-3 h-3 shrink-0" />
|
||||
{app.user.firstName} {app.user.lastName}
|
||||
</p>
|
||||
<TruncatedText>{app.user.email}</TruncatedText>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}>
|
||||
{lifecycle === 'suspended' && <AlertTriangle className="w-3 h-3" />}
|
||||
{lifecycleLabels[lifecycle] || lifecycle}
|
||||
</span>
|
||||
{app.billingCycle && (
|
||||
<span className="badge badge-purple">{cycleLabels[app.billingCycle] || app.billingCycle}</span>
|
||||
)}
|
||||
{latestMigration && (
|
||||
<span className={`badge capitalize ${migrationStatusBadgeClass(latestMigration.status)}`}>
|
||||
{formatMigrationStatus(latestMigration.status)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{lifecycle === 'pending_deletion' && app.scheduledDeletionAt && (
|
||||
<p className="text-xs text-red-600">Delete: {formatDeletionDate(app.scheduledDeletionAt)}</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs text-gray-500">
|
||||
<div>
|
||||
<span className="text-gray-400 block">Cluster</span>
|
||||
<TruncatedText className="font-medium text-gray-800">
|
||||
{assignedCluster?.name || (app.clusterId ? 'Unknown' : 'Not assigned')}
|
||||
</TruncatedText>
|
||||
{assignedCluster && (
|
||||
<TruncatedText className="text-gray-400 mt-0.5">
|
||||
{`${assignedCluster.region || 'N/A'} · ${assignedCluster.status}`}
|
||||
</TruncatedText>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400 block">Plan</span>
|
||||
{app.planExpiresAt ? (
|
||||
<span className={expiry.urgent ? 'text-red-600 font-semibold' : 'text-gray-700'}>{expiry.text}</span>
|
||||
) : (
|
||||
<span className="text-gray-400">No plan</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 sm:col-span-2">
|
||||
<span className="flex items-center gap-1"><Database className="w-3 h-3" /> {app.databaseType}</span>
|
||||
<span className="flex items-center gap-1"><Box className="w-3 h-3" /> {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 pt-3 border-t border-gray-100">
|
||||
<Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
|
||||
View
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMigrateApp(app);
|
||||
setTargetClusterId('');
|
||||
}}
|
||||
disabled={!app.clusterId}
|
||||
className="btn-secondary text-xs px-3 py-1.5 inline-flex items-center gap-1 disabled:opacity-50"
|
||||
title={!app.clusterId ? 'Application is not assigned to a cluster' : undefined}
|
||||
>
|
||||
<ArrowRightLeft className="w-3 h-3" /> Migrate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isAnyDeleting}
|
||||
onClick={async () => {
|
||||
const ok = await confirm({
|
||||
title: 'Delete Application',
|
||||
message: `Are you sure you want to delete "${app.name}"?`,
|
||||
confirmText: 'Delete',
|
||||
variant: 'danger',
|
||||
});
|
||||
if (ok) deleteApplication(app.id);
|
||||
}}
|
||||
className="text-xs px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 font-medium disabled:opacity-50 disabled:pointer-events-none"
|
||||
>
|
||||
<DeleteButtonLabel loading={isDeleting(app.id)} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{migrateApp && (
|
||||
<div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full p-6 space-y-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<ArrowRightLeft className="w-5 h-5" /> Migrate Application
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Move <span className="font-medium">{migrateApp.name}</span> to a healthy target cluster with logs, retry, and rollback.
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => setMigrateApp(null)} className="p-1 text-gray-400 hover:text-gray-600">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Target Cluster</label>
|
||||
<div className="mb-3 rounded-xl bg-gray-50 border border-gray-100 p-3">
|
||||
<p className="text-xs font-medium text-gray-500">Current cluster</p>
|
||||
<p className="text-sm font-semibold text-gray-900 mt-1">
|
||||
{currentCluster?.name || (migrateApp.clusterId ? `Unknown cluster (${migrateApp.clusterId.slice(0, 8)})` : 'Not assigned')}
|
||||
</p>
|
||||
{currentCluster && (
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
{currentCluster.region || 'N/A'} · {currentCluster.status}/{currentCluster.healthStatus || 'unknown'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<select
|
||||
className="input-field"
|
||||
value={targetClusterId}
|
||||
onChange={(e) => setTargetClusterId(e.target.value)}
|
||||
>
|
||||
<option value="">Select healthy cluster</option>
|
||||
{targetClusters
|
||||
.map((cluster) => (
|
||||
<option
|
||||
key={cluster.id}
|
||||
value={cluster.id}
|
||||
disabled={cluster.status !== 'active' || cluster.healthStatus !== 'healthy'}
|
||||
>
|
||||
{cluster.name} · {cluster.region || 'N/A'} · {cluster.status}/{cluster.healthStatus || 'unknown'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
The current cluster is excluded. Migration is blocked for unhealthy, inactive, or maintenance clusters.
|
||||
</p>
|
||||
{targetClusters.length === 0 && (
|
||||
<p className="text-xs text-amber-600 mt-2">
|
||||
No other cluster is available as a migration target.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedMigration && (
|
||||
<div className="rounded-xl border border-gray-200 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-800">Latest migration</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{selectedMigration.currentStep || 'queued'} · attempts {selectedMigration.attempts}/{selectedMigration.maxAttempts}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`badge ${
|
||||
selectedMigration.status === 'completed'
|
||||
? 'badge-green'
|
||||
: selectedMigration.status === 'failed' || selectedMigration.status === 'rolled_back'
|
||||
? 'badge-red'
|
||||
: 'badge-blue'
|
||||
}`}>
|
||||
{selectedMigration.status}
|
||||
</span>
|
||||
</div>
|
||||
{selectedMigration.errorMessage && (
|
||||
<p className="text-sm text-red-600">{selectedMigration.errorMessage}</p>
|
||||
)}
|
||||
<div className="max-h-40 overflow-auto rounded-lg bg-gray-50 p-3 space-y-2">
|
||||
{selectedMigrationEvents.length === 0 ? (
|
||||
<p className="text-xs text-gray-400">No events yet.</p>
|
||||
) : selectedMigrationEvents.map((event) => (
|
||||
<div key={event.id} className="text-xs">
|
||||
<span className="font-mono text-gray-400">{new Date(event.createdAt).toLocaleTimeString()}</span>
|
||||
<span className={`ml-2 font-medium ${
|
||||
event.level === 'error' ? 'text-red-600' : event.level === 'warn' ? 'text-amber-600' : 'text-gray-700'
|
||||
}`}>
|
||||
{event.step}
|
||||
</span>
|
||||
<span className="ml-2 text-gray-600">{event.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{['failed', 'rolled_back'].includes(selectedMigration.status) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => retryMigration.mutate(selectedMigration.id)}
|
||||
disabled={retryMigration.isPending}
|
||||
className="btn-secondary text-sm inline-flex items-center gap-1"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${retryMigration.isPending ? 'animate-spin' : ''}`} />
|
||||
Retry migration
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setMigrateApp(null)} className="btn-secondary">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => migrateMutation.mutate({ appId: migrateApp.id, clusterId: targetClusterId })}
|
||||
disabled={!targetClusterId || migrateMutation.isPending}
|
||||
className="btn-primary disabled:opacity-50"
|
||||
>
|
||||
{migrateMutation.isPending ? 'Queueing...' : 'Start Migration'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user