294 lines
9.0 KiB
TypeScript
294 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { useTranslations, useFormatter } from "next-intl";
|
|
import { Card } from "@/components/ui/card";
|
|
import { StatusBadge } from "@/components/ui/status-badge";
|
|
import { formatDateTime, formatRelative } from "@/lib/format";
|
|
|
|
interface RequestSummary {
|
|
id: string;
|
|
instanceName?: string | null;
|
|
agentName: string;
|
|
packages: string[];
|
|
status: string;
|
|
adminNotes?: string;
|
|
tenantName?: string;
|
|
createdAt?: string;
|
|
updatedAt?: string;
|
|
}
|
|
|
|
interface TenantSummary {
|
|
name: string;
|
|
displayName: string;
|
|
phase: string;
|
|
conditions: Array<{
|
|
type: string;
|
|
status: string;
|
|
reason?: string;
|
|
message?: string;
|
|
lastTransitionTime?: string;
|
|
}>;
|
|
}
|
|
|
|
interface SingleRequestState {
|
|
request: RequestSummary;
|
|
tenant: TenantSummary | null;
|
|
}
|
|
|
|
/**
|
|
* ProvisioningStatus
|
|
*
|
|
* Polls /api/onboarding?id=<requestId> every 5s until the request reaches
|
|
* a terminal state. Slice 3: takes a `requestId` prop so multiple of these
|
|
* can render on the same dashboard for different in-flight requests.
|
|
*
|
|
* The pre-Slice-3 version polled /api/onboarding with no params and
|
|
* assumed one-request-per-org — that endpoint shape is gone now.
|
|
*/
|
|
export function ProvisioningStatus({ requestId }: { requestId: string }) {
|
|
const t = useTranslations("onboarding");
|
|
const f = useFormatter();
|
|
const [data, setData] = useState<SingleRequestState | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
const poll = useCallback(async () => {
|
|
try {
|
|
const res = await fetch(
|
|
`/api/onboarding?id=${encodeURIComponent(requestId)}`
|
|
);
|
|
if (!res.ok) throw new Error("Failed to fetch status");
|
|
const json = await res.json();
|
|
setData(json);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
}, [requestId]);
|
|
|
|
useEffect(() => {
|
|
poll();
|
|
|
|
const status = data?.request?.status;
|
|
const phase = data?.tenant?.phase;
|
|
const terminal =
|
|
status === "rejected" ||
|
|
status === "active" ||
|
|
phase === "Ready" ||
|
|
phase === "Running";
|
|
|
|
if (terminal) return;
|
|
|
|
const interval = setInterval(poll, 5000);
|
|
return () => clearInterval(interval);
|
|
}, [poll, data?.request?.status, data?.tenant?.phase]);
|
|
|
|
if (error) {
|
|
return (
|
|
<Card>
|
|
<div className="text-xs text-red-400">{error}</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<Card>
|
|
<div className="flex items-center gap-2 text-sm text-text-muted">
|
|
<div className="h-4 w-4 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
|
{t("loading")}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const status = data.request.status;
|
|
const label =
|
|
data.request.instanceName ||
|
|
data.request.tenantName ||
|
|
data.request.agentName;
|
|
|
|
// Pending admin approval
|
|
if (status === "pending") {
|
|
return (
|
|
<Card className="animate-in">
|
|
<div className="text-center py-6">
|
|
<div className="h-14 w-14 rounded-xl bg-amber-500/15 flex items-center justify-center mx-auto mb-4">
|
|
<svg
|
|
className="h-7 w-7 text-amber-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="font-display text-lg font-semibold text-text-primary mb-2">
|
|
{t("pendingTitle")}
|
|
</h2>
|
|
{label && (
|
|
<p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
|
|
)}
|
|
<p className="text-sm text-text-secondary max-w-sm mx-auto">
|
|
{t("pendingDescription")}
|
|
</p>
|
|
{data.request.createdAt && (
|
|
<p
|
|
className="text-xs text-text-muted mt-4"
|
|
title={formatDateTime(data.request.createdAt, f)}
|
|
>
|
|
{t("submittedAt")}{" "}
|
|
<span className="text-text-secondary">
|
|
{formatRelative(data.request.createdAt, f)}
|
|
</span>{" "}
|
|
<span className="text-text-muted/60">
|
|
({formatDateTime(data.request.createdAt, f)})
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Rejected
|
|
if (status === "rejected") {
|
|
return (
|
|
<Card className="animate-in">
|
|
<div className="text-center py-6">
|
|
<div className="h-14 w-14 rounded-xl bg-red-500/15 flex items-center justify-center mx-auto mb-4">
|
|
<svg
|
|
className="h-7 w-7 text-red-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="font-display text-lg font-semibold text-text-primary mb-2">
|
|
{t("rejectedTitle")}
|
|
</h2>
|
|
{label && (
|
|
<p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
|
|
)}
|
|
<p className="text-sm text-text-secondary max-w-sm mx-auto">
|
|
{t("rejectedDescription")}
|
|
</p>
|
|
{data.request.adminNotes && (
|
|
<p className="text-xs text-text-muted mt-3 bg-surface-2 border border-border rounded-lg p-3 max-w-sm mx-auto">
|
|
{data.request.adminNotes}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Provisioning in progress (status approved/provisioning, optionally with tenant phase < Ready)
|
|
if (
|
|
status === "approved" ||
|
|
status === "provisioning" ||
|
|
(status === "active" && data.tenant && data.tenant.phase !== "Ready")
|
|
) {
|
|
const phase = data.tenant?.phase ?? "Pending";
|
|
const conditions = data.tenant?.conditions ?? [];
|
|
|
|
return (
|
|
<Card className="animate-in">
|
|
<div className="text-center py-4 mb-4">
|
|
<div className="h-14 w-14 rounded-xl bg-accent/15 flex items-center justify-center mx-auto mb-4">
|
|
<div className="h-6 w-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
<h2 className="font-display text-lg font-semibold text-text-primary mb-2">
|
|
{t("provisioningTitle")}
|
|
</h2>
|
|
{label && (
|
|
<p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
|
|
)}
|
|
<p className="text-sm text-text-secondary">
|
|
{t("provisioningDescription")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between bg-surface-2 border border-border rounded-lg px-4 py-2">
|
|
<span className="text-xs text-text-muted">{t("phase")}</span>
|
|
<StatusBadge phase={phase} />
|
|
</div>
|
|
{conditions.map((c, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center justify-between bg-surface-2 border border-border rounded-lg px-4 py-2"
|
|
>
|
|
<span className="text-xs text-text-muted">{c.type}</span>
|
|
<span
|
|
className={`text-xs font-mono ${
|
|
c.status === "True"
|
|
? "text-emerald-400"
|
|
: c.status === "False"
|
|
? "text-red-400"
|
|
: "text-text-muted"
|
|
}`}
|
|
>
|
|
{c.reason || c.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Active / Ready
|
|
if (status === "active") {
|
|
return (
|
|
<Card className="animate-in">
|
|
<div className="text-center py-6">
|
|
<div className="h-14 w-14 rounded-xl bg-emerald-500/15 flex items-center justify-center mx-auto mb-4">
|
|
<svg
|
|
className="h-7 w-7 text-emerald-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="font-display text-lg font-semibold text-text-primary mb-2">
|
|
{t("readyTitle")}
|
|
</h2>
|
|
{label && (
|
|
<p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
|
|
)}
|
|
<p className="text-sm text-text-secondary max-w-sm mx-auto mb-4">
|
|
{t("readyDescription")}
|
|
</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
|
|
>
|
|
{t("goToDashboard")}
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|