102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { ArrowLeft, Server, Users } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { getClusterWithCustomers } from '@/lib/actions/clusters';
|
|
|
|
interface ClusterDetailPageProps {
|
|
params: Promise<{
|
|
id: string;
|
|
}>;
|
|
}
|
|
|
|
export default async function ClusterDetailPage({ params }: ClusterDetailPageProps) {
|
|
const { id } = await params;
|
|
const cluster = await getClusterWithCustomers(parseInt(id));
|
|
|
|
if (!cluster) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/clusters">
|
|
<Button variant="outline" size="icon">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900">{cluster.name}</h1>
|
|
<p className="text-slate-600">Cluster Details</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<Card className="lg:col-span-2">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Server className="w-5 h-5" />
|
|
Cluster Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{cluster.kubeconfigPath && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-500">Kubeconfig Path</label>
|
|
<p className="text-slate-900">{cluster.kubeconfigPath}</p>
|
|
</div>
|
|
)}
|
|
{cluster.description && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-500">Description</label>
|
|
<p className="text-slate-900">{cluster.description}</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-500">Created</label>
|
|
<p className="text-slate-900">{cluster.createdAt ? new Date(cluster.createdAt).toLocaleString() : 'N/A'}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="w-5 h-5" />
|
|
Customers ({cluster.customers.length})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{cluster.customers.length === 0 ? (
|
|
<p className="text-slate-500 text-sm">No customers in this cluster yet.</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{cluster.customers.map((customer) => (
|
|
<li key={customer.id}>
|
|
<Link
|
|
href={`/customers/${customer.id}`}
|
|
className="block p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
|
|
>
|
|
<p className="font-medium text-slate-900">{customer.name}</p>
|
|
<p className="text-sm text-slate-500">{customer.namespace}</p>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div className="mt-4 pt-4 border-t">
|
|
<Link href="/customers/new">
|
|
<Button variant="outline" size="sm" className="w-full">
|
|
Add Customer
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|