Add initial Portal version
This commit is contained in:
193
src/components/admin/AdminTenantsClient.tsx
Normal file
193
src/components/admin/AdminTenantsClient.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { PhaseBadge } from "@/components/dashboard/InstanceStatus";
|
||||
|
||||
interface TenantRow {
|
||||
name: string;
|
||||
displayName?: string;
|
||||
phase: string;
|
||||
packages: string[];
|
||||
agentName?: string;
|
||||
created: string;
|
||||
orgId?: string;
|
||||
}
|
||||
|
||||
type SortKey = "name" | "phase" | "packages" | "created";
|
||||
type SortDir = "asc" | "desc";
|
||||
|
||||
export default function AdminTenantsClient() {
|
||||
const t = useTranslations("admin");
|
||||
const router = useRouter();
|
||||
const [tenants, setTenants] = useState<TenantRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sortKey, setSortKey] = useState<SortKey>("name");
|
||||
const [sortDir, setSortDir] = useState<SortDir>("asc");
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/tenants")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
const items = data.items || data || [];
|
||||
setTenants(
|
||||
items.map((t: any) => ({
|
||||
name: t.metadata.name,
|
||||
displayName: t.spec?.displayName,
|
||||
phase: t.status?.phase || "Pending",
|
||||
packages: t.spec?.packages || [],
|
||||
agentName: t.spec?.agentName,
|
||||
created: t.metadata.creationTimestamp,
|
||||
orgId: t.metadata?.labels?.["zitadel-org-id"],
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
function toggleSort(key: SortKey) {
|
||||
if (sortKey === key) {
|
||||
setSortDir((d) => (d === "asc" ? "desc" : "asc"));
|
||||
} else {
|
||||
setSortKey(key);
|
||||
setSortDir("asc");
|
||||
}
|
||||
}
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
return [...tenants].sort((a, b) => {
|
||||
let cmp = 0;
|
||||
switch (sortKey) {
|
||||
case "name":
|
||||
cmp = (a.displayName || a.name).localeCompare(
|
||||
b.displayName || b.name
|
||||
);
|
||||
break;
|
||||
case "phase":
|
||||
cmp = a.phase.localeCompare(b.phase);
|
||||
break;
|
||||
case "packages":
|
||||
cmp = a.packages.length - b.packages.length;
|
||||
break;
|
||||
case "created":
|
||||
cmp =
|
||||
new Date(a.created).getTime() - new Date(b.created).getTime();
|
||||
break;
|
||||
}
|
||||
return sortDir === "asc" ? cmp : -cmp;
|
||||
});
|
||||
}, [tenants, sortKey, sortDir]);
|
||||
|
||||
const SortHeader = ({
|
||||
label,
|
||||
field,
|
||||
}: {
|
||||
label: string;
|
||||
field: SortKey;
|
||||
}) => (
|
||||
<th
|
||||
onClick={() => toggleSort(field)}
|
||||
className="cursor-pointer select-none px-3 py-2 text-left text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
{label}
|
||||
{sortKey === field && (
|
||||
<span className="ml-1 text-teal-400">
|
||||
{sortDir === "asc" ? "↑" : "↓"}
|
||||
</span>
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 w-40 bg-zinc-800 rounded mb-4" />
|
||||
<div className="h-64 bg-zinc-900/50 border border-zinc-800 rounded-lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold text-zinc-100">
|
||||
{t("tenants")}
|
||||
</h1>
|
||||
<span className="text-xs text-zinc-500">
|
||||
{tenants.length} {t("total")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b border-zinc-800">
|
||||
<tr>
|
||||
<SortHeader label={t("name")} field="name" />
|
||||
<SortHeader label={t("phase")} field="phase" />
|
||||
<SortHeader label={t("packages")} field="packages" />
|
||||
<SortHeader label={t("created")} field="created" />
|
||||
<th className="px-3 py-2" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-800/50">
|
||||
{sorted.map((row) => (
|
||||
<tr
|
||||
key={row.name}
|
||||
className="hover:bg-zinc-800/30 transition-colors"
|
||||
>
|
||||
<td className="px-3 py-2.5">
|
||||
<div className="text-zinc-200">
|
||||
{row.displayName || row.name}
|
||||
</div>
|
||||
{row.agentName && (
|
||||
<div className="text-[10px] text-zinc-600">
|
||||
{row.agentName}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<PhaseBadge phase={row.phase} />
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.packages.length === 0 ? (
|
||||
<span className="text-xs text-zinc-600">—</span>
|
||||
) : (
|
||||
row.packages.map((p) => (
|
||||
<span
|
||||
key={p}
|
||||
className="rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-400"
|
||||
>
|
||||
{p}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-xs text-zinc-500">
|
||||
{new Date(row.created).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right">
|
||||
<button
|
||||
onClick={() => router.push(`/tenants/${row.name}`)}
|
||||
className="text-xs text-teal-400 hover:text-teal-300"
|
||||
>
|
||||
{t("manage")}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{sorted.length === 0 && (
|
||||
<div className="py-12 text-center text-sm text-zinc-600">
|
||||
{t("noTenants")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user