Add Storage, Users, Secrets, Webhooks, Scheduled tasks, Audit log screens
Full management surfaces for the platform-admin tenant, mirroring the existing Tenants pattern (DataTable + row actions + create/edit dialogs + ConfirmDialog for destructive ops, all data-action tagged for the command bus, useRegisterAdminContext publishing for the assistant). - Storage (/storage): backends + credentials. Write-only secret fields, Validate/Activate/Deactivate/Set-default/Mark-degraded/Maintenance. - Users (/users): tabs for Users, Invitations, Roles. Per-user View drawer with profile, role add/remove, API keys (one-time reveal on create), usage + quota. - Secrets (/secrets): /api/v1/admin/secrets — create/rotate/rollback, versions dialog, enable/disable, generate-value helper. - Webhooks (/webhooks): CRUD, pause/resume, regenerate-secret with one-time reveal, send test event, deliveries dialog. - Scheduled tasks (/scheduled-tasks): cron CRUD, run-now trigger, enable/disable, expandable run history. - Audit log (/activity): replaces the empty stub. Filter by severity, resource type, date range; click for full JSON detail. All endpoints are hand-rolled HTTP because most aren't covered by the generated OpenAPI typed paths yet — switch to arcadia.typed.* when the backend wires them into OpenApiSpex. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
@@ -20,6 +20,11 @@ import {
|
||||
HelpCircle,
|
||||
Menu,
|
||||
Play,
|
||||
HardDrive,
|
||||
Users as UsersIcon,
|
||||
KeyRound,
|
||||
Webhook as WebhookIcon,
|
||||
CalendarClock,
|
||||
// CREMA:NAV-ICONS
|
||||
} from "lucide-react"
|
||||
|
||||
@@ -88,6 +93,11 @@ type NavItem = {
|
||||
const navItems: NavItem[] = [
|
||||
{ to: "/", icon: LayoutDashboard, label: "Overview", end: true },
|
||||
{ to: "/tenants", icon: Building2, label: "Tenants" },
|
||||
{ to: "/storage", icon: HardDrive, label: "Storage" },
|
||||
{ to: "/users", icon: UsersIcon, label: "Users" },
|
||||
{ to: "/secrets", icon: KeyRound, label: "Secrets" },
|
||||
{ to: "/webhooks", icon: WebhookIcon, label: "Webhooks" },
|
||||
{ to: "/scheduled-tasks", icon: CalendarClock, label: "Scheduled" },
|
||||
{ to: "/activity", icon: Activity, label: "Audit log" },
|
||||
{ to: "/ai", icon: Bot, label: "AI" },
|
||||
{ to: "/settings", icon: Settings, label: "Settings" },
|
||||
|
||||
679
app/components/users/user-detail-sheet.tsx
Normal file
679
app/components/users/user-detail-sheet.tsx
Normal file
@@ -0,0 +1,679 @@
|
||||
// Per-user drilldown: profile, role assignment, API keys, usage + quota.
|
||||
// Opened from the Users tab via the row's "View" action.
|
||||
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import {
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
KeyRound,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Shield,
|
||||
ShieldCheck,
|
||||
ShieldOff,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import { AlertBanner, ConfirmDialog } from "@crema/feedback-ui"
|
||||
|
||||
import { Badge } from "~/components/ui/badge"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Label } from "~/components/ui/label"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "~/components/ui/sheet"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
|
||||
import {
|
||||
createUserApiKey,
|
||||
listUserApiKeys,
|
||||
revokeUserApiKey,
|
||||
type ApiKey,
|
||||
type ApiKeyCreated,
|
||||
} from "~/lib/arcadia/api-keys"
|
||||
import {
|
||||
getUserQuota,
|
||||
getUserUsage,
|
||||
type UserQuota,
|
||||
type UserUsage,
|
||||
} from "~/lib/arcadia/user-stats"
|
||||
import {
|
||||
assignRole,
|
||||
removeRole,
|
||||
type User,
|
||||
} from "~/lib/arcadia/users"
|
||||
import type { Role } from "~/lib/arcadia/roles"
|
||||
|
||||
interface Props {
|
||||
user: User | null
|
||||
roles: Role[]
|
||||
onClose: () => void
|
||||
/** Called whenever something changes that the parent may want to re-fetch. */
|
||||
onChanged: () => Promise<void>
|
||||
}
|
||||
|
||||
export function UserDetailSheet({ user, roles, onClose, onChanged }: Props) {
|
||||
const open = user !== null
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-xl flex flex-col gap-0 p-0">
|
||||
{user ? (
|
||||
<UserDetailBody user={user} roles={roles} onChanged={onChanged} onClose={onClose} />
|
||||
) : null}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
function UserDetailBody({
|
||||
user,
|
||||
roles,
|
||||
onChanged,
|
||||
onClose,
|
||||
}: {
|
||||
user: User
|
||||
roles: Role[]
|
||||
onChanged: () => Promise<void>
|
||||
onClose: () => void
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<SheetHeader className="border-b px-6 py-4">
|
||||
<SheetTitle className="flex items-center justify-between gap-3">
|
||||
<span className="flex flex-col">
|
||||
<span>{user.full_name || user.email}</span>
|
||||
<span className="text-xs font-normal text-muted-foreground">{user.email}</span>
|
||||
</span>
|
||||
<Badge variant={user.email_verified ? "default" : "secondary"}>
|
||||
{user.email_verified ? "Verified" : "Unverified"}
|
||||
</Badge>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<Tabs defaultValue="overview">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview" data-action={`user-${user.id}-detail-overview`}>
|
||||
Overview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="roles" data-action={`user-${user.id}-detail-roles`}>
|
||||
Roles
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="api-keys" data-action={`user-${user.id}-detail-keys`}>
|
||||
API keys
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview">
|
||||
<OverviewPanel user={user} />
|
||||
</TabsContent>
|
||||
<TabsContent value="roles">
|
||||
<RolesPanel user={user} roles={roles} onChanged={onChanged} />
|
||||
</TabsContent>
|
||||
<TabsContent value="api-keys">
|
||||
<ApiKeysPanel user={user} onChanged={onChanged} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="border-t px-6 py-3 flex justify-end">
|
||||
<Button variant="outline" onClick={onClose} data-action={`user-${user.id}-detail-close`}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Overview tab ------------------------------------------------------
|
||||
|
||||
function OverviewPanel({ user }: { user: User }) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [usage, setUsage] = useState<UserUsage | null>(null)
|
||||
const [quota, setQuota] = useState<UserQuota | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
Promise.all([
|
||||
getUserUsage(arcadia, user.id).catch((err) => {
|
||||
throw err
|
||||
}),
|
||||
getUserQuota(arcadia, user.id),
|
||||
])
|
||||
.then(([u, q]) => {
|
||||
if (!mounted) return
|
||||
setUsage(u)
|
||||
setQuota(q)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (mounted)
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load stats.")
|
||||
})
|
||||
.finally(() => mounted && setLoading(false))
|
||||
return () => {
|
||||
mounted = false
|
||||
}
|
||||
}, [arcadia, user.id])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<dl className="grid grid-cols-2 gap-3 text-sm">
|
||||
<Stat label="Status" value={user.status} />
|
||||
<Stat
|
||||
label="Email verified"
|
||||
value={user.email_verified ? "Yes" : "No"}
|
||||
/>
|
||||
<Stat
|
||||
label="Last sign-in"
|
||||
value={user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleString() : "Never"}
|
||||
/>
|
||||
<Stat label="Created" value={new Date(user.inserted_at).toLocaleString()} />
|
||||
<Stat label="Tenant" value={user.tenant_id} mono />
|
||||
<Stat label="ID" value={user.id} mono />
|
||||
</dl>
|
||||
|
||||
<h3 className="mt-2 text-sm font-semibold">Storage</h3>
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<Stat
|
||||
label="Storage used"
|
||||
value={
|
||||
usage
|
||||
? formatBytes(usage.storage_used_bytes) +
|
||||
(quota?.storage_limit_bytes
|
||||
? ` / ${formatBytes(quota.storage_limit_bytes)}`
|
||||
: "")
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
<Stat
|
||||
label="Object count"
|
||||
value={
|
||||
usage
|
||||
? `${usage.object_count}` +
|
||||
(quota?.object_count_limit ? ` / ${quota.object_count_limit}` : "")
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
{quota ? (
|
||||
<>
|
||||
<Stat
|
||||
label="Storage usage"
|
||||
value={
|
||||
quota.storage_usage_percentage != null
|
||||
? `${Math.round(quota.storage_usage_percentage)}%`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
<Stat
|
||||
label="Quota state"
|
||||
value={quota.quota_exceeded ? "exceeded" : "ok"}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Stat label="Quota" value="No quota set" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Stat({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
mono?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 rounded-md border bg-card/50 px-3 py-2">
|
||||
<dt className="text-xs uppercase tracking-wide text-muted-foreground">{label}</dt>
|
||||
<dd className={mono ? "truncate font-mono text-xs" : "text-sm"}>{value}</dd>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatBytes(n: number | null | undefined): string {
|
||||
if (n == null) return "—"
|
||||
const units = ["B", "KB", "MB", "GB", "TB"]
|
||||
let i = 0
|
||||
let v = n
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024
|
||||
i++
|
||||
}
|
||||
return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`
|
||||
}
|
||||
|
||||
// --- Roles tab ---------------------------------------------------------
|
||||
|
||||
function RolesPanel({
|
||||
user,
|
||||
roles,
|
||||
onChanged,
|
||||
}: {
|
||||
user: User
|
||||
roles: Role[]
|
||||
onChanged: () => Promise<void>
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [busy, setBusy] = useState<string | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const assigned = new Set(user.roles.map((r) => r.id))
|
||||
|
||||
const toggle = useCallback(
|
||||
async (role: Role) => {
|
||||
setError(null)
|
||||
setBusy(role.id)
|
||||
try {
|
||||
if (assigned.has(role.id)) await removeRole(arcadia, user.id, role.id)
|
||||
else await assignRole(arcadia, user.id, role.id)
|
||||
await onChanged()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Role change failed.")
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
},
|
||||
[arcadia, assigned, onChanged, user.id],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 pt-4">
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{roles.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No roles defined yet.</p>
|
||||
) : (
|
||||
<ul className="flex flex-col divide-y rounded-md border">
|
||||
{roles.map((r) => {
|
||||
const has = assigned.has(r.id)
|
||||
return (
|
||||
<li
|
||||
key={r.id}
|
||||
className="flex items-start justify-between gap-3 px-3 py-2"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="flex items-center gap-2 text-sm font-medium">
|
||||
{has ? (
|
||||
<ShieldCheck className="size-4 text-emerald-500" />
|
||||
) : (
|
||||
<Shield className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
{r.name}{" "}
|
||||
<code className="rounded bg-muted px-1 font-mono text-xs">{r.slug}</code>
|
||||
</span>
|
||||
{r.description ? (
|
||||
<span className="text-xs text-muted-foreground">{r.description}</span>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
variant={has ? "outline" : "default"}
|
||||
size="sm"
|
||||
disabled={busy !== null}
|
||||
onClick={() => toggle(r)}
|
||||
data-action={`user-${user.id}-role-${r.slug}-${has ? "remove" : "add"}`}
|
||||
>
|
||||
{busy === r.id ? (
|
||||
<RefreshCw className="size-3.5 animate-spin" />
|
||||
) : has ? (
|
||||
<ShieldOff className="size-3.5" />
|
||||
) : (
|
||||
<Plus className="size-3.5" />
|
||||
)}
|
||||
{has ? "Remove" : "Add"}
|
||||
</Button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- API keys tab ------------------------------------------------------
|
||||
|
||||
function ApiKeysPanel({
|
||||
user,
|
||||
onChanged,
|
||||
}: {
|
||||
user: User
|
||||
onChanged: () => Promise<void>
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [keys, setKeys] = useState<ApiKey[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [revealed, setRevealed] = useState<ApiKeyCreated | null>(null)
|
||||
const [pendingRevoke, setPendingRevoke] = useState<ApiKey | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
setKeys(await listUserApiKeys(arcadia, user.id))
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load keys.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia, user.id])
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
}, [refresh])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 pt-4">
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Keys are shown in full <strong>only once</strong>, on creation. Treat them like
|
||||
passwords.
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setCreateOpen(true)}
|
||||
data-action={`user-${user.id}-api-key-create`}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
New key
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
|
||||
</p>
|
||||
) : keys.length === 0 ? (
|
||||
<p className="rounded-md border bg-muted/30 p-4 text-center text-sm text-muted-foreground">
|
||||
No API keys yet.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col divide-y rounded-md border">
|
||||
{keys.map((k) => (
|
||||
<li key={k.id} className="flex items-start justify-between gap-3 px-3 py-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="flex items-center gap-2 font-mono text-xs">
|
||||
<KeyRound className="size-3.5 text-muted-foreground" />
|
||||
{k.key_prefix}…
|
||||
{!k.is_active ? (
|
||||
<Badge variant="secondary" className="ml-1">
|
||||
revoked
|
||||
</Badge>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{k.description ?? "(no description)"}
|
||||
</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Created {new Date(k.created_at).toLocaleDateString()}
|
||||
{k.last_used_at
|
||||
? ` · last used ${new Date(k.last_used_at).toLocaleDateString()}`
|
||||
: " · never used"}
|
||||
{k.expires_at
|
||||
? ` · expires ${new Date(k.expires_at).toLocaleDateString()}`
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
{k.is_active ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setPendingRevoke(k)}
|
||||
data-action={`user-${user.id}-api-key-${k.id}-revoke`}
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
Revoke
|
||||
</Button>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<CreateApiKeyDialog
|
||||
open={createOpen}
|
||||
userId={user.id}
|
||||
onClose={() => setCreateOpen(false)}
|
||||
onCreated={async (created) => {
|
||||
setCreateOpen(false)
|
||||
setRevealed(created)
|
||||
await refresh()
|
||||
await onChanged()
|
||||
}}
|
||||
/>
|
||||
|
||||
<RevealKeyDialog created={revealed} onClose={() => setRevealed(null)} />
|
||||
|
||||
<ConfirmDialog
|
||||
open={pendingRevoke !== null}
|
||||
onOpenChange={(o) => !o && setPendingRevoke(null)}
|
||||
title="Revoke API key?"
|
||||
description={
|
||||
pendingRevoke
|
||||
? `Key ${pendingRevoke.key_prefix}… will stop working immediately. This cannot be undone.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Revoke"
|
||||
variant="danger"
|
||||
onConfirm={async () => {
|
||||
if (!pendingRevoke) return
|
||||
try {
|
||||
await revokeUserApiKey(arcadia, user.id, pendingRevoke.id)
|
||||
setPendingRevoke(null)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Revoke failed.")
|
||||
setPendingRevoke(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateApiKeyDialog({
|
||||
open,
|
||||
userId,
|
||||
onClose,
|
||||
onCreated,
|
||||
}: {
|
||||
open: boolean
|
||||
userId: string
|
||||
onClose: () => void
|
||||
onCreated: (k: ApiKeyCreated) => Promise<void>
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [description, setDescription] = useState("")
|
||||
const [expiresAt, setExpiresAt] = useState("")
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setDescription("")
|
||||
setExpiresAt("")
|
||||
setError(null)
|
||||
}
|
||||
}, [open])
|
||||
|
||||
const submit = async () => {
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
const created = await createUserApiKey(arcadia, userId, {
|
||||
description: description || undefined,
|
||||
expires_at: expiresAt ? new Date(expiresAt).toISOString() : null,
|
||||
})
|
||||
await onCreated(created)
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof ArcadiaError
|
||||
? err.message
|
||||
: err instanceof Error
|
||||
? err.message
|
||||
: "Create failed.",
|
||||
)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New API key</DialogTitle>
|
||||
<DialogDescription>
|
||||
The full key value will be shown once after creation. Copy it then; we don't store it
|
||||
in cleartext.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="apikey-description">Description</Label>
|
||||
<Input
|
||||
id="apikey-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="e.g. CI deploy key"
|
||||
data-action="api-key-form-description"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="apikey-expires">Expires at (optional)</Label>
|
||||
<Input
|
||||
id="apikey-expires"
|
||||
type="datetime-local"
|
||||
value={expiresAt}
|
||||
onChange={(e) => setExpiresAt(e.target.value)}
|
||||
data-action="api-key-form-expires"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={busy}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={busy} data-action="api-key-form-create">
|
||||
{busy ? <RefreshCw className="size-4 animate-spin" /> : <KeyRound className="size-4" />}
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function RevealKeyDialog({
|
||||
created,
|
||||
onClose,
|
||||
}: {
|
||||
created: ApiKeyCreated | null
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
useEffect(() => {
|
||||
if (!created) setCopied(false)
|
||||
}, [created])
|
||||
|
||||
if (!created) return null
|
||||
|
||||
const copy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(created.api_key)
|
||||
setCopied(true)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<CheckCircle2 className="size-5 text-emerald-500" />
|
||||
API key created
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<strong>This is the only time the key will be shown.</strong> Copy and store it now.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
|
||||
<code className="select-all break-all font-mono text-xs">{created.api_key}</code>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
Prefix: <code className="font-mono">{created.key_prefix}…</code>
|
||||
{created.expires_at
|
||||
? ` · expires ${new Date(created.expires_at).toLocaleString()}`
|
||||
: " · never expires"}
|
||||
</span>
|
||||
<Button size="sm" variant="outline" onClick={copy} data-action="api-key-reveal-copy">
|
||||
{copied ? <CheckCircle2 className="size-3.5" /> : <Copy className="size-3.5" />}
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">{created.warning}</p>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={onClose} data-action="api-key-reveal-close">
|
||||
<X className="size-4" />
|
||||
Done
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
67
app/lib/arcadia/api-keys.ts
Normal file
67
app/lib/arcadia/api-keys.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
// Arcadia per-user API key helpers (v2 multi-key path).
|
||||
//
|
||||
// `POST /api/v1/users/:user_id/api_keys` returns the raw key value exactly
|
||||
// once — list/show endpoints only return the prefix. Callers must surface
|
||||
// the value to the user immediately on create.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export interface ApiKey {
|
||||
id: string
|
||||
key_prefix: string
|
||||
description: string | null
|
||||
created_at: string
|
||||
last_used_at: string | null
|
||||
expires_at: string | null
|
||||
revoked_at: string | null
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
export interface ApiKeyCreateInput {
|
||||
description?: string
|
||||
expires_at?: string | null
|
||||
}
|
||||
|
||||
export interface ApiKeyCreated {
|
||||
api_key: string
|
||||
key_id: string
|
||||
key_prefix: string
|
||||
user_id: string
|
||||
description: string | null
|
||||
created_at: string
|
||||
expires_at: string | null
|
||||
warning: string
|
||||
}
|
||||
|
||||
export async function listUserApiKeys(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
): Promise<ApiKey[]> {
|
||||
const res = await arcadia.GET<{ data: ApiKey[] }>(
|
||||
`/api/v1/users/${userId}/api_keys`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createUserApiKey(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
input: ApiKeyCreateInput,
|
||||
): Promise<ApiKeyCreated> {
|
||||
const res = await arcadia.POST<{ data: ApiKeyCreated }>(
|
||||
`/api/v1/users/${userId}/api_keys`,
|
||||
{ body: input },
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function revokeUserApiKey(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
keyId: string,
|
||||
reason?: string,
|
||||
): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/users/${userId}/api_keys/${keyId}`, {
|
||||
body: reason ? { reason } : undefined,
|
||||
})
|
||||
}
|
||||
76
app/lib/arcadia/audit-logs.ts
Normal file
76
app/lib/arcadia/audit-logs.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
// Audit log + observability helpers.
|
||||
// All endpoints are read-only; the backend writes audit events itself.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type AuditSeverity = "info" | "warning" | "error" | "critical" | string
|
||||
|
||||
export interface AuditUser {
|
||||
id: string
|
||||
email: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface AuditLog {
|
||||
id: string
|
||||
tenant_id: string
|
||||
user_id: string | null
|
||||
user: AuditUser | null
|
||||
action: string
|
||||
resource_type: string
|
||||
resource_id: string | null
|
||||
changes: Record<string, unknown> | null
|
||||
metadata: Record<string, unknown> | null
|
||||
severity: AuditSeverity
|
||||
ip_address: string | null
|
||||
user_agent: string | null
|
||||
inserted_at: string
|
||||
}
|
||||
|
||||
export interface AuditListParams {
|
||||
action?: string
|
||||
resource_type?: string
|
||||
severity?: AuditSeverity
|
||||
user_id?: string
|
||||
from?: string // ISO8601
|
||||
to?: string
|
||||
limit?: number
|
||||
offset?: number
|
||||
}
|
||||
|
||||
export interface AuditStats {
|
||||
total: number
|
||||
by_action: Record<string, number>
|
||||
by_severity: Record<string, number>
|
||||
by_resource_type: Record<string, number>
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export async function listAuditLogs(
|
||||
arcadia: ArcadiaClient,
|
||||
params?: AuditListParams,
|
||||
): Promise<AuditLog[]> {
|
||||
const res = await arcadia.GET<{ data: AuditLog[] }>(
|
||||
"/api/v1/observability/audit_logs",
|
||||
{ params: params as Record<string, string | number | boolean | null | undefined> },
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getAuditLog(arcadia: ArcadiaClient, id: string): Promise<AuditLog> {
|
||||
const res = await arcadia.GET<{ data: AuditLog }>(
|
||||
`/api/v1/observability/audit_logs/${id}`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getAuditStats(
|
||||
arcadia: ArcadiaClient,
|
||||
params?: { from?: string; to?: string },
|
||||
): Promise<AuditStats> {
|
||||
const res = await arcadia.GET<{ data: AuditStats }>(
|
||||
"/api/v1/observability/audit_stats",
|
||||
{ params: params as Record<string, string | undefined> },
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
65
app/lib/arcadia/invitations.ts
Normal file
65
app/lib/arcadia/invitations.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
// Arcadia invitations API helpers.
|
||||
// Backed by /api/v1/invitations.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export interface InvitationRole {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
}
|
||||
|
||||
export interface InvitationInviter {
|
||||
id: string
|
||||
email: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface Invitation {
|
||||
id: string
|
||||
email: string
|
||||
role: InvitationRole
|
||||
invited_by: InvitationInviter | null
|
||||
expires_at: string | null
|
||||
accepted_at: string | null
|
||||
revoked_at: string | null
|
||||
revocation_reason: string | null
|
||||
inserted_at: string
|
||||
}
|
||||
|
||||
export type InvitationStatus = "pending" | "accepted" | "revoked" | "expired"
|
||||
|
||||
export function invitationStatus(inv: Invitation): InvitationStatus {
|
||||
if (inv.accepted_at) return "accepted"
|
||||
if (inv.revoked_at) return "revoked"
|
||||
if (inv.expires_at && new Date(inv.expires_at).getTime() < Date.now()) return "expired"
|
||||
return "pending"
|
||||
}
|
||||
|
||||
export interface InvitationInput {
|
||||
email: string
|
||||
role_id: string
|
||||
}
|
||||
|
||||
export async function listInvitations(arcadia: ArcadiaClient): Promise<Invitation[]> {
|
||||
const res = await arcadia.GET<{ data: Invitation[] }>("/api/v1/invitations")
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createInvitation(
|
||||
arcadia: ArcadiaClient,
|
||||
input: InvitationInput,
|
||||
): Promise<Invitation> {
|
||||
const res = await arcadia.POST<{ data: Invitation }>("/api/v1/invitations", {
|
||||
body: { invitation: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function revokeInvitation(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/invitations/${id}`)
|
||||
}
|
||||
|
||||
export async function resendInvitation(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.POST(`/api/v1/invitations/${id}/resend`)
|
||||
}
|
||||
55
app/lib/arcadia/roles.ts
Normal file
55
app/lib/arcadia/roles.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
// Arcadia roles API helpers.
|
||||
// Backed by /api/v1/roles (resources route, except :new and :edit).
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export interface Role {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
description: string | null
|
||||
permissions: string[]
|
||||
is_system: boolean
|
||||
metadata: Record<string, unknown>
|
||||
tenant_id: string
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface RoleInput {
|
||||
name: string
|
||||
slug: string
|
||||
description?: string | null
|
||||
permissions?: string[]
|
||||
metadata?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export async function listRoles(arcadia: ArcadiaClient): Promise<Role[]> {
|
||||
const res = await arcadia.GET<{ data: Role[] }>("/api/v1/roles")
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getRole(arcadia: ArcadiaClient, id: string): Promise<Role> {
|
||||
const res = await arcadia.GET<{ data: Role }>(`/api/v1/roles/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createRole(arcadia: ArcadiaClient, input: RoleInput): Promise<Role> {
|
||||
const res = await arcadia.POST<{ data: Role }>("/api/v1/roles", { body: { role: input } })
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateRole(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: Partial<RoleInput>,
|
||||
): Promise<Role> {
|
||||
const res = await arcadia.PATCH<{ data: Role }>(`/api/v1/roles/${id}`, {
|
||||
body: { role: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteRole(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/roles/${id}`)
|
||||
}
|
||||
130
app/lib/arcadia/scheduled-tasks.ts
Normal file
130
app/lib/arcadia/scheduled-tasks.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
// Scheduled tasks (cron) helpers.
|
||||
// Backend: /api/v1/admin/scheduled-tasks (CRUD + runs/enable/disable/trigger).
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type ScheduledTaskAction = "webhook" | "event"
|
||||
|
||||
export interface ScheduledTask {
|
||||
id: string
|
||||
tenant_id: string | null
|
||||
name: string
|
||||
description: string | null
|
||||
cron_expression: string
|
||||
timezone: string
|
||||
action_type: ScheduledTaskAction
|
||||
/** Backend-encrypted; rendered as null on read but accepted on writes. */
|
||||
action_config?: Record<string, unknown> | null
|
||||
tags: string[]
|
||||
enabled: boolean
|
||||
last_run_at: string | null
|
||||
next_run_at: string | null
|
||||
max_retries: number
|
||||
timeout_seconds: number
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ScheduledTaskInput {
|
||||
name: string
|
||||
description?: string | null
|
||||
cron_expression: string
|
||||
timezone?: string
|
||||
action_type: ScheduledTaskAction
|
||||
action_config: Record<string, unknown>
|
||||
tags?: string[]
|
||||
enabled?: boolean
|
||||
max_retries?: number
|
||||
timeout_seconds?: number
|
||||
}
|
||||
|
||||
export interface TaskRun {
|
||||
id: string
|
||||
task_id: string
|
||||
status: "pending" | "running" | "succeeded" | "failed" | string
|
||||
attempt: number
|
||||
started_at: string | null
|
||||
finished_at: string | null
|
||||
response_status: number | null
|
||||
response_body: string | null
|
||||
error: string | null
|
||||
inserted_at: string
|
||||
}
|
||||
|
||||
const BASE = "/api/v1/admin/scheduled-tasks"
|
||||
|
||||
export async function listScheduledTasks(arcadia: ArcadiaClient): Promise<ScheduledTask[]> {
|
||||
const res = await arcadia.GET<{ data: ScheduledTask[] }>(BASE)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<ScheduledTask> {
|
||||
const res = await arcadia.GET<{ data: ScheduledTask }>(`${BASE}/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
input: ScheduledTaskInput,
|
||||
): Promise<ScheduledTask> {
|
||||
const res = await arcadia.POST<{ data: ScheduledTask }>(BASE, {
|
||||
body: { scheduled_task: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: Partial<ScheduledTaskInput>,
|
||||
): Promise<ScheduledTask> {
|
||||
const res = await arcadia.PATCH<{ data: ScheduledTask }>(`${BASE}/${id}`, {
|
||||
body: { scheduled_task: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<void> {
|
||||
await arcadia.DELETE(`${BASE}/${id}`)
|
||||
}
|
||||
|
||||
export async function enableScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<ScheduledTask> {
|
||||
const res = await arcadia.POST<{ data: ScheduledTask }>(`${BASE}/${id}/enable`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function disableScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<ScheduledTask> {
|
||||
const res = await arcadia.POST<{ data: ScheduledTask }>(`${BASE}/${id}/disable`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function triggerScheduledTask(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<TaskRun> {
|
||||
const res = await arcadia.POST<{ data: TaskRun }>(`${BASE}/${id}/trigger`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function listTaskRuns(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
params?: { limit?: number; offset?: number },
|
||||
): Promise<TaskRun[]> {
|
||||
const res = await arcadia.GET<{ data: TaskRun[] }>(`${BASE}/${id}/runs`, {
|
||||
params: params as Record<string, number | undefined>,
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
171
app/lib/arcadia/secrets.ts
Normal file
171
app/lib/arcadia/secrets.ts
Normal file
@@ -0,0 +1,171 @@
|
||||
// Arcadia secrets API helpers.
|
||||
//
|
||||
// Backed by /api/v1/admin/secrets — the platform Secrets Manager. Values are
|
||||
// AES-encrypted at rest and never returned by index/show; only metadata is
|
||||
// exposed by these endpoints. Tenant-side resolution (returning the value)
|
||||
// goes through a separate runtime endpoint that's not used by the admin UI.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type SecretCategory =
|
||||
| "api_key"
|
||||
| "smtp"
|
||||
| "oauth_token"
|
||||
| "webhook_secret"
|
||||
| "generic"
|
||||
|
||||
export type SecretEnvironment = "production" | "staging" | "development" | "all"
|
||||
|
||||
export interface Secret {
|
||||
id: string
|
||||
tenant_id: string | null
|
||||
name: string
|
||||
description: string | null
|
||||
category: SecretCategory
|
||||
environment: SecretEnvironment
|
||||
tags: string[]
|
||||
used_by: string[]
|
||||
allowed_ips: string[]
|
||||
read_once: boolean
|
||||
read_once_consumed: boolean
|
||||
expires_at: string | null
|
||||
last_rotated_at: string | null
|
||||
rotation_interval_days: number | null
|
||||
rotation_due: boolean
|
||||
expired: boolean
|
||||
enabled: boolean
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface SecretVersion {
|
||||
id: string
|
||||
secret_id: string
|
||||
version: number
|
||||
note: string | null
|
||||
inserted_by: string | null
|
||||
inserted_at: string
|
||||
}
|
||||
|
||||
export interface SecretCreateInput {
|
||||
name: string
|
||||
value: string
|
||||
category?: SecretCategory
|
||||
description?: string | null
|
||||
environment?: SecretEnvironment
|
||||
tags?: string[]
|
||||
used_by?: string[]
|
||||
allowed_ips?: string[]
|
||||
read_once?: boolean
|
||||
expires_at?: string | null
|
||||
rotation_interval_days?: number | null
|
||||
}
|
||||
|
||||
export type SecretMetaInput = Omit<Partial<SecretCreateInput>, "value" | "name">
|
||||
|
||||
export interface RotateInput {
|
||||
value: string
|
||||
note?: string
|
||||
}
|
||||
|
||||
export async function listSecrets(arcadia: ArcadiaClient): Promise<Secret[]> {
|
||||
const res = await arcadia.GET<{ data: Secret[] }>("/api/v1/admin/secrets")
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getSecret(arcadia: ArcadiaClient, id: string): Promise<Secret> {
|
||||
const res = await arcadia.GET<{ data: Secret }>(`/api/v1/admin/secrets/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createSecret(
|
||||
arcadia: ArcadiaClient,
|
||||
input: SecretCreateInput,
|
||||
): Promise<Secret> {
|
||||
const res = await arcadia.POST<{ data: Secret }>("/api/v1/admin/secrets", {
|
||||
body: { secret: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateSecretMeta(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: SecretMetaInput,
|
||||
): Promise<Secret> {
|
||||
const res = await arcadia.PATCH<{ data: Secret }>(`/api/v1/admin/secrets/${id}`, {
|
||||
body: { secret: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteSecret(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/admin/secrets/${id}`)
|
||||
}
|
||||
|
||||
export async function rotateSecret(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: RotateInput,
|
||||
): Promise<Secret> {
|
||||
const res = await arcadia.POST<{ data: Secret }>(`/api/v1/admin/secrets/${id}/rotate`, {
|
||||
body: { secret: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function rollbackSecret(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
version: number,
|
||||
): Promise<Secret> {
|
||||
const res = await arcadia.POST<{ data: Secret }>(
|
||||
`/api/v1/admin/secrets/${id}/rollback/${version}`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function enableSecret(arcadia: ArcadiaClient, id: string): Promise<Secret> {
|
||||
const res = await arcadia.POST<{ data: Secret }>(`/api/v1/admin/secrets/${id}/enable`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function disableSecret(arcadia: ArcadiaClient, id: string): Promise<Secret> {
|
||||
const res = await arcadia.POST<{ data: Secret }>(`/api/v1/admin/secrets/${id}/disable`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function listSecretVersions(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<SecretVersion[]> {
|
||||
const res = await arcadia.GET<{ data: SecretVersion[] }>(
|
||||
`/api/v1/admin/secrets/${id}/versions`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function generateSecretValue(
|
||||
arcadia: ArcadiaClient,
|
||||
params?: { length?: number; charset?: string },
|
||||
): Promise<string> {
|
||||
const res = await arcadia.GET<{ data: { value: string } }>("/api/v1/admin/secrets/generate", {
|
||||
params: params as Record<string, string | number | boolean | null | undefined>,
|
||||
})
|
||||
return res.data.value
|
||||
}
|
||||
|
||||
export const SECRET_CATEGORIES: { value: SecretCategory; label: string }[] = [
|
||||
{ value: "api_key", label: "API key" },
|
||||
{ value: "oauth_token", label: "OAuth token" },
|
||||
{ value: "smtp", label: "SMTP credentials" },
|
||||
{ value: "webhook_secret", label: "Webhook secret" },
|
||||
{ value: "generic", label: "Generic" },
|
||||
]
|
||||
|
||||
export const SECRET_ENVIRONMENTS: { value: SecretEnvironment; label: string }[] = [
|
||||
{ value: "all", label: "All environments" },
|
||||
{ value: "production", label: "Production" },
|
||||
{ value: "staging", label: "Staging" },
|
||||
{ value: "development", label: "Development" },
|
||||
]
|
||||
167
app/lib/arcadia/storage-configs.ts
Normal file
167
app/lib/arcadia/storage-configs.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
// Arcadia storage configs API helpers.
|
||||
//
|
||||
// `GET /api/v1/storage_configs` and `POST /api/v1/storage_configs` are the
|
||||
// only operations with full OpenAPI coverage today. Update/delete and the
|
||||
// state-transition actions (activate, deactivate, mark-degraded,
|
||||
// mark-maintenance, set-default, validate) are listed in the spec but their
|
||||
// operations are still stubbed as `never`, so we hand-roll types and use the
|
||||
// generic `arcadia.GET<T>` / `arcadia.POST<T>` / etc. — same pattern as
|
||||
// `tenants.ts`. Switch to `arcadia.typed.*` when the spec gains coverage.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type StorageBackend = "s3" | "local" | "gcs"
|
||||
export type StorageStatus = "active" | "inactive" | "degraded" | "maintenance"
|
||||
|
||||
export interface StorageConfig {
|
||||
id: string
|
||||
tenant_id: string
|
||||
name: string
|
||||
backend_type: StorageBackend
|
||||
status: StorageStatus
|
||||
is_default: boolean
|
||||
max_file_size_bytes: number | null
|
||||
allowed_content_types: string[] | null
|
||||
// Backend-specific fields. Secret fields are returned as "***" by the API.
|
||||
config: Record<string, unknown>
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface StorageConfigInput {
|
||||
name: string
|
||||
backend_type: StorageBackend
|
||||
config: Record<string, unknown>
|
||||
is_default?: boolean
|
||||
max_file_size_bytes?: number | null
|
||||
allowed_content_types?: string[]
|
||||
}
|
||||
|
||||
export interface StorageStats {
|
||||
total_objects: number
|
||||
total_size_bytes: number
|
||||
by_backend: Record<string, unknown>
|
||||
by_user: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface StorageProvidersResponse {
|
||||
data: Record<StorageBackend, { required_fields: string[]; optional_fields?: string[] }>
|
||||
}
|
||||
|
||||
export async function listStorageConfigs(arcadia: ArcadiaClient): Promise<StorageConfig[]> {
|
||||
const res = await arcadia.GET<{ data: StorageConfig[] }>("/api/v1/storage_configs")
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getStorageConfig(arcadia: ArcadiaClient, id: string): Promise<StorageConfig> {
|
||||
const res = await arcadia.GET<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createStorageConfig(
|
||||
arcadia: ArcadiaClient,
|
||||
input: StorageConfigInput,
|
||||
): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>("/api/v1/storage_configs", {
|
||||
body: { storage_config: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateStorageConfig(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: Partial<StorageConfigInput>,
|
||||
): Promise<StorageConfig> {
|
||||
const res = await arcadia.PATCH<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}`, {
|
||||
body: { storage_config: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteStorageConfig(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/storage_configs/${id}`)
|
||||
}
|
||||
|
||||
export async function activateStorageConfig(arcadia: ArcadiaClient, id: string): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}/activate`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deactivateStorageConfig(arcadia: ArcadiaClient, id: string): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}/deactivate`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function markStorageConfigDegraded(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}/mark-degraded`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function markStorageConfigMaintenance(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>(
|
||||
`/api/v1/storage_configs/${id}/mark-maintenance`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function setDefaultStorageConfig(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<StorageConfig> {
|
||||
const res = await arcadia.POST<{ data: StorageConfig }>(`/api/v1/storage_configs/${id}/set-default`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export interface ValidateResult {
|
||||
ok: boolean
|
||||
message?: string
|
||||
details?: unknown
|
||||
}
|
||||
|
||||
export async function validateStorageConfig(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<ValidateResult> {
|
||||
return arcadia.POST<ValidateResult>(`/api/v1/storage_configs/${id}/validate`)
|
||||
}
|
||||
|
||||
export async function getStorageStats(arcadia: ArcadiaClient): Promise<StorageStats> {
|
||||
const res = await arcadia.GET<{ data: StorageStats }>("/api/v1/storage_configs/stats")
|
||||
return res.data
|
||||
}
|
||||
|
||||
// Backend-specific config field schemas. Secret fields appear as "***" on
|
||||
// reads — the form treats them as write-only and only sends a value when the
|
||||
// user has typed a fresh one.
|
||||
export const SECRET_FIELDS: Record<StorageBackend, readonly string[]> = {
|
||||
s3: ["secret_access_key"],
|
||||
gcs: ["service_account_json"],
|
||||
local: [],
|
||||
}
|
||||
|
||||
export const REQUIRED_FIELDS: Record<StorageBackend, readonly string[]> = {
|
||||
s3: ["bucket", "region", "access_key_id", "secret_access_key"],
|
||||
gcs: ["bucket", "service_account_json"],
|
||||
local: ["path"],
|
||||
}
|
||||
|
||||
export const OPTIONAL_FIELDS: Record<StorageBackend, readonly string[]> = {
|
||||
s3: ["endpoint", "prefix"],
|
||||
gcs: ["prefix"],
|
||||
local: [],
|
||||
}
|
||||
|
||||
export function isSecretField(backend: StorageBackend, field: string): boolean {
|
||||
return SECRET_FIELDS[backend].includes(field)
|
||||
}
|
||||
|
||||
export function isMaskedSecret(value: unknown): boolean {
|
||||
return typeof value === "string" && value === "***"
|
||||
}
|
||||
56
app/lib/arcadia/user-stats.ts
Normal file
56
app/lib/arcadia/user-stats.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
// Per-user usage + quota helpers.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export interface UserUsage {
|
||||
storage_used_bytes: number
|
||||
object_count: number
|
||||
}
|
||||
|
||||
export interface UserQuota {
|
||||
id: string
|
||||
tenant_id: string
|
||||
user_id: string
|
||||
storage_limit_bytes: number | null
|
||||
storage_used_bytes: number
|
||||
object_count_limit: number | null
|
||||
object_count: number
|
||||
storage_remaining: number | null
|
||||
objects_remaining: number | null
|
||||
storage_usage_percentage: number | null
|
||||
object_count_usage_percentage: number | null
|
||||
storage_exceeded: boolean
|
||||
object_count_exceeded: boolean
|
||||
quota_exceeded: boolean
|
||||
metadata: Record<string, unknown>
|
||||
last_calculated_at: string | null
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export async function getUserUsage(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
): Promise<UserUsage> {
|
||||
const res = await arcadia.GET<{ data: UserUsage }>(
|
||||
`/api/v1/users/${userId}/usage`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getUserQuota(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
): Promise<UserQuota | null> {
|
||||
try {
|
||||
const res = await arcadia.GET<{ data: UserQuota }>(
|
||||
`/api/v1/users/${userId}/quota`,
|
||||
)
|
||||
return res.data
|
||||
} catch (err) {
|
||||
// 404 == no quota set for this user. Treat as null rather than throwing.
|
||||
const msg = err instanceof Error ? err.message : String(err)
|
||||
if (/404|not[_ ]found/i.test(msg)) return null
|
||||
throw err
|
||||
}
|
||||
}
|
||||
111
app/lib/arcadia/users.ts
Normal file
111
app/lib/arcadia/users.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
// Arcadia users API helpers.
|
||||
//
|
||||
// Backed by /api/v1/users (resources route). The OpenAPI spec doesn't yet
|
||||
// describe these operations as typed paths, so we hand-roll types and use
|
||||
// the generic verb methods on the client. Same pattern as tenants.ts.
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type UserStatus = "active" | "inactive" | "suspended"
|
||||
|
||||
export interface UserRoleSummary {
|
||||
id: string
|
||||
slug: string
|
||||
name: string
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string
|
||||
email: string
|
||||
first_name: string | null
|
||||
last_name: string | null
|
||||
full_name: string
|
||||
status: UserStatus
|
||||
email_verified: boolean
|
||||
email_verified_at: string | null
|
||||
last_sign_in_at: string | null
|
||||
tenant_id: string
|
||||
roles: UserRoleSummary[]
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface UserListParams {
|
||||
status?: UserStatus
|
||||
email_verified?: boolean
|
||||
}
|
||||
|
||||
export interface UserInput {
|
||||
email: string
|
||||
first_name?: string | null
|
||||
last_name?: string | null
|
||||
status?: UserStatus
|
||||
password?: string
|
||||
role_ids?: string[]
|
||||
}
|
||||
|
||||
export async function listUsers(
|
||||
arcadia: ArcadiaClient,
|
||||
params?: UserListParams,
|
||||
): Promise<User[]> {
|
||||
const queryParams = params
|
||||
? {
|
||||
status: params.status,
|
||||
email_verified: params.email_verified == null ? undefined : String(params.email_verified),
|
||||
}
|
||||
: undefined
|
||||
const res = await arcadia.GET<{ data: User[] }>("/api/v1/users", { params: queryParams })
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getUser(arcadia: ArcadiaClient, id: string): Promise<User> {
|
||||
const res = await arcadia.GET<{ data: User }>(`/api/v1/users/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createUser(arcadia: ArcadiaClient, input: UserInput): Promise<User> {
|
||||
const res = await arcadia.POST<{ data: User }>("/api/v1/users", { body: { user: input } })
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateUser(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: Partial<UserInput>,
|
||||
): Promise<User> {
|
||||
const res = await arcadia.PATCH<{ data: User }>(`/api/v1/users/${id}`, {
|
||||
body: { user: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteUser(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/users/${id}`)
|
||||
}
|
||||
|
||||
export async function assignRole(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
roleId: string,
|
||||
): Promise<User> {
|
||||
const res = await arcadia.POST<{ data: User }>(`/api/v1/users/${userId}/roles/${roleId}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function removeRole(
|
||||
arcadia: ArcadiaClient,
|
||||
userId: string,
|
||||
roleId: string,
|
||||
): Promise<User> {
|
||||
const res = await arcadia.DELETE<{ data: User }>(`/api/v1/users/${userId}/roles/${roleId}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function setUserStatus(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
status: UserStatus,
|
||||
): Promise<User> {
|
||||
return updateUser(arcadia, id, { status })
|
||||
}
|
||||
161
app/lib/arcadia/webhooks.ts
Normal file
161
app/lib/arcadia/webhooks.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
// Outbound webhook helpers.
|
||||
// Backend: /api/v1/webhooks (CRUD + pause/resume/regenerate-secret/deliveries/stats/test).
|
||||
|
||||
import type { ArcadiaClient } from "@crema/arcadia-client"
|
||||
|
||||
export type WebhookStatus = "active" | "paused" | "disabled"
|
||||
export type WebhookRetryStrategy = "linear" | "exponential"
|
||||
|
||||
export interface Webhook {
|
||||
id: string
|
||||
tenant_id: string
|
||||
url: string
|
||||
description: string | null
|
||||
status: WebhookStatus
|
||||
events: string[]
|
||||
headers: Record<string, string>
|
||||
max_retries: number
|
||||
retry_strategy: WebhookRetryStrategy
|
||||
last_triggered_at: string | null
|
||||
success_count: number
|
||||
failure_count: number
|
||||
/** Only populated on create / regenerate-secret responses. */
|
||||
secret?: string | null
|
||||
inserted_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface WebhookInput {
|
||||
url: string
|
||||
description?: string | null
|
||||
events?: string[]
|
||||
headers?: Record<string, string>
|
||||
max_retries?: number
|
||||
retry_strategy?: WebhookRetryStrategy
|
||||
}
|
||||
|
||||
export interface WebhookDelivery {
|
||||
id: string
|
||||
webhook_endpoint_id: string
|
||||
event_type: string
|
||||
status: "pending" | "delivered" | "failed" | string
|
||||
attempt: number
|
||||
request_url: string
|
||||
request_headers: Record<string, string>
|
||||
response_status: number | null
|
||||
response_time_ms: number | null
|
||||
error_message: string | null
|
||||
sent_at: string | null
|
||||
completed_at: string | null
|
||||
next_retry_at: string | null
|
||||
inserted_at: string
|
||||
}
|
||||
|
||||
export interface WebhookStats {
|
||||
success_rate: number
|
||||
delivery_count: number
|
||||
failure_count: number
|
||||
avg_response_time_ms: number
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export async function listWebhooks(arcadia: ArcadiaClient): Promise<Webhook[]> {
|
||||
const res = await arcadia.GET<{ data: Webhook[] }>("/api/v1/webhooks")
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getWebhook(arcadia: ArcadiaClient, id: string): Promise<Webhook> {
|
||||
const res = await arcadia.GET<{ data: Webhook }>(`/api/v1/webhooks/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function createWebhook(
|
||||
arcadia: ArcadiaClient,
|
||||
input: WebhookInput,
|
||||
): Promise<Webhook> {
|
||||
const res = await arcadia.POST<{ data: Webhook }>("/api/v1/webhooks", {
|
||||
body: { webhook_endpoint: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function updateWebhook(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
input: Partial<WebhookInput>,
|
||||
): Promise<Webhook> {
|
||||
const res = await arcadia.PATCH<{ data: Webhook }>(`/api/v1/webhooks/${id}`, {
|
||||
body: { webhook_endpoint: input },
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function deleteWebhook(arcadia: ArcadiaClient, id: string): Promise<void> {
|
||||
await arcadia.DELETE(`/api/v1/webhooks/${id}`)
|
||||
}
|
||||
|
||||
export async function pauseWebhook(arcadia: ArcadiaClient, id: string): Promise<Webhook> {
|
||||
const res = await arcadia.POST<{ data: Webhook }>(`/api/v1/webhooks/${id}/pause`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function resumeWebhook(arcadia: ArcadiaClient, id: string): Promise<Webhook> {
|
||||
const res = await arcadia.POST<{ data: Webhook }>(`/api/v1/webhooks/${id}/resume`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function regenerateWebhookSecret(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<Webhook> {
|
||||
const res = await arcadia.POST<{ data: Webhook }>(
|
||||
`/api/v1/webhooks/${id}/regenerate-secret`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function listWebhookDeliveries(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
params?: { limit?: number; offset?: number },
|
||||
): Promise<WebhookDelivery[]> {
|
||||
const res = await arcadia.GET<{ data: WebhookDelivery[] }>(
|
||||
`/api/v1/webhooks/${id}/deliveries`,
|
||||
{ params: params as Record<string, number | undefined> },
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function getWebhookStats(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<WebhookStats> {
|
||||
const res = await arcadia.GET<{ data: WebhookStats }>(
|
||||
`/api/v1/webhooks/${id}/stats`,
|
||||
)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function testWebhook(
|
||||
arcadia: ArcadiaClient,
|
||||
id: string,
|
||||
): Promise<{ ok: boolean; message?: string; details?: unknown }> {
|
||||
return arcadia.POST(`/api/v1/webhooks/${id}/test`)
|
||||
}
|
||||
|
||||
// A starter list of platform events. Free-form by design — different deployments
|
||||
// emit different events. Users can type custom values.
|
||||
export const COMMON_WEBHOOK_EVENTS = [
|
||||
"user.created",
|
||||
"user.updated",
|
||||
"user.deleted",
|
||||
"tenant.created",
|
||||
"tenant.updated",
|
||||
"object.uploaded",
|
||||
"object.deleted",
|
||||
"secret.rotated",
|
||||
"invitation.sent",
|
||||
"invitation.accepted",
|
||||
"scheduled_task.completed",
|
||||
"scheduled_task.failed",
|
||||
]
|
||||
@@ -11,5 +11,10 @@ export default [
|
||||
route("profile", "routes/profile.tsx"),
|
||||
route("login", "routes/login.tsx"),
|
||||
route("tenants", "routes/tenants.tsx"),
|
||||
route("storage", "routes/storage.tsx"),
|
||||
route("users", "routes/users.tsx"),
|
||||
route("secrets", "routes/secrets.tsx"),
|
||||
route("webhooks", "routes/webhooks.tsx"),
|
||||
route("scheduled-tasks", "routes/scheduled-tasks.tsx"),
|
||||
// CREMA:ROUTES
|
||||
] satisfies RouteConfig
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
import { Activity } from "lucide-react"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router"
|
||||
import { Activity, Eye, RefreshCw } from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import {
|
||||
ActionsCell,
|
||||
BadgeCell,
|
||||
DataTable,
|
||||
DateCell,
|
||||
Pagination,
|
||||
useTable,
|
||||
type BadgeTone,
|
||||
type Column,
|
||||
} from "@crema/table-ui"
|
||||
import { SearchInput } from "@crema/search-ui"
|
||||
import { AlertBanner, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -8,36 +25,405 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Label } from "~/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select"
|
||||
import {
|
||||
listAuditLogs,
|
||||
type AuditLog,
|
||||
type AuditSeverity,
|
||||
} from "~/lib/arcadia/audit-logs"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import { useSession } from "~/lib/session"
|
||||
import { useRegisterAdminContext } from "~/lib/admin-context"
|
||||
|
||||
export const meta = () => pageTitle("Activity")
|
||||
export const meta = () => pageTitle("Audit log")
|
||||
|
||||
export default function ActivityRoute() {
|
||||
const session = useSession()
|
||||
const arcadia = useArcadiaClient()
|
||||
|
||||
const [logs, setLogs] = useState<AuditLog[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [search, setSearch] = useState("")
|
||||
const [severityFilter, setSeverityFilter] = useState<"all" | AuditSeverity>("all")
|
||||
const [resourceFilter, setResourceFilter] = useState("")
|
||||
const [from, setFrom] = useState("")
|
||||
const [to, setTo] = useState("")
|
||||
const [detail, setDetail] = useState<AuditLog | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
const list = await listAuditLogs(arcadia, {
|
||||
severity: severityFilter === "all" ? undefined : severityFilter,
|
||||
resource_type: resourceFilter || undefined,
|
||||
from: from ? new Date(from).toISOString() : undefined,
|
||||
to: to ? new Date(to).toISOString() : undefined,
|
||||
limit: 200,
|
||||
})
|
||||
setLogs(list)
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load audit logs.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia, severityFilter, resourceFilter, from, to])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) refresh()
|
||||
}, [session, refresh])
|
||||
|
||||
const columns = useMemo<Column<AuditLog>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "time",
|
||||
header: "Time",
|
||||
accessor: "inserted_at",
|
||||
sortable: true,
|
||||
cell: (l) => <DateCell value={l.inserted_at} format="datetime" />,
|
||||
},
|
||||
{
|
||||
id: "user",
|
||||
header: "User",
|
||||
accessor: (l) => l.user?.email ?? "",
|
||||
sortable: true,
|
||||
cell: (l) => (
|
||||
<span className="text-sm">
|
||||
{l.user?.email ?? <span className="text-muted-foreground">system</span>}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
header: "Action",
|
||||
accessor: "action",
|
||||
sortable: true,
|
||||
cell: (l) => (
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{l.action}</code>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "resource",
|
||||
header: "Resource",
|
||||
accessor: "resource_type",
|
||||
sortable: true,
|
||||
cell: (l) => (
|
||||
<span className="text-sm">
|
||||
<span className="font-medium">{l.resource_type}</span>
|
||||
{l.resource_id ? (
|
||||
<span className="ml-1 font-mono text-xs text-muted-foreground">
|
||||
{l.resource_id.slice(0, 8)}…
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "severity",
|
||||
header: "Severity",
|
||||
accessor: "severity",
|
||||
sortable: true,
|
||||
cell: (l) => <BadgeCell label={l.severity} tone={severityTone(l.severity)} />,
|
||||
},
|
||||
{
|
||||
id: "ip",
|
||||
header: "IP",
|
||||
accessor: "ip_address",
|
||||
cell: (l) => (
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{l.ip_address ?? "—"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
align: "right",
|
||||
cell: (l) => (
|
||||
<ActionsCell
|
||||
items={[
|
||||
{
|
||||
id: "view",
|
||||
label: "View details",
|
||||
icon: <Eye className="size-4" />,
|
||||
dataAction: `audit-${l.id}-view`,
|
||||
onSelect: () => setDetail(l),
|
||||
},
|
||||
]}
|
||||
triggerDataAction={`audit-${l.id}-actions`}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[],
|
||||
)
|
||||
|
||||
const summary = useMemo(
|
||||
() => ({
|
||||
total: logs.length,
|
||||
bySeverity: countBy(logs, (l) => l.severity || "info"),
|
||||
byResource: countBy(logs, (l) => l.resource_type),
|
||||
latest: logs.slice(0, 5).map((l) => ({
|
||||
time: l.inserted_at,
|
||||
user: l.user?.email ?? "system",
|
||||
action: l.action,
|
||||
resource: `${l.resource_type}${l.resource_id ? `/${l.resource_id}` : ""}`,
|
||||
})),
|
||||
}),
|
||||
[logs],
|
||||
)
|
||||
useRegisterAdminContext("audit_log", summary)
|
||||
|
||||
const table = useTable<AuditLog>({
|
||||
data: logs,
|
||||
columns,
|
||||
getRowId: (l) => l.id,
|
||||
initialPageSize: 50,
|
||||
initialSearch: search,
|
||||
})
|
||||
useEffect(() => {
|
||||
table.setSearch(search)
|
||||
}, [search, table])
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<AppShell title="Audit log">
|
||||
<div className="p-8">
|
||||
<Card className="max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign in required</CardTitle>
|
||||
<CardDescription>The audit log requires an admin session.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link to="/login?next=/activity">Sign in</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell title="Activity">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Activity</CardTitle>
|
||||
<CardDescription>
|
||||
Event stream, audit log, recent changes.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
|
||||
<div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
|
||||
<Activity className="size-6" />
|
||||
</div>
|
||||
<div className="max-w-md">
|
||||
<p className="font-medium">No activity yet</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Once your app is doing things, this is where audit events,
|
||||
webhook deliveries, and recent changes show up — pair with{" "}
|
||||
<code className="font-mono text-xs">@crema/log-ui</code>.
|
||||
</p>
|
||||
</div>
|
||||
<AppShell title="Audit log">
|
||||
<div className="flex flex-col gap-4 p-6">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Audit log</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Every authenticated action against the platform. Filter by date, severity, or
|
||||
resource type.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
data-action="audit-refresh"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-3 lg:flex-row lg:flex-wrap lg:items-end">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
placeholder="Search by action, resource, or user"
|
||||
data-action="audit-search"
|
||||
className="max-w-sm flex-1"
|
||||
/>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="audit-severity" className="text-xs">
|
||||
Severity
|
||||
</Label>
|
||||
<Select
|
||||
value={severityFilter}
|
||||
onValueChange={(v) => setSeverityFilter(v as typeof severityFilter)}
|
||||
>
|
||||
<SelectTrigger id="audit-severity" className="w-36" data-action="audit-severity-filter">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="info">Info</SelectItem>
|
||||
<SelectItem value="warning">Warning</SelectItem>
|
||||
<SelectItem value="error">Error</SelectItem>
|
||||
<SelectItem value="critical">Critical</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="audit-resource" className="text-xs">
|
||||
Resource type
|
||||
</Label>
|
||||
<Input
|
||||
id="audit-resource"
|
||||
value={resourceFilter}
|
||||
onChange={(e) => setResourceFilter(e.target.value)}
|
||||
placeholder="e.g. user"
|
||||
className="w-40"
|
||||
data-action="audit-resource-filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="audit-from" className="text-xs">
|
||||
From
|
||||
</Label>
|
||||
<Input
|
||||
id="audit-from"
|
||||
type="datetime-local"
|
||||
value={from}
|
||||
onChange={(e) => setFrom(e.target.value)}
|
||||
className="w-44"
|
||||
data-action="audit-from-filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="audit-to" className="text-xs">
|
||||
To
|
||||
</Label>
|
||||
<Input
|
||||
id="audit-to"
|
||||
type="datetime-local"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
className="w-44"
|
||||
data-action="audit-to-filter"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay active={loading && logs.length === 0} label="Loading audit log…" />
|
||||
{table.total === 0 && !loading ? (
|
||||
<EmptyState
|
||||
icon={<Activity className="size-6" />}
|
||||
title="No events match those filters."
|
||||
description="Loosen the filter set or wait for new platform activity."
|
||||
className="py-12"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={table.pageRows}
|
||||
getRowId={(l) => l.id}
|
||||
sort={table.sort}
|
||||
onSortToggle={table.toggleSort}
|
||||
loading={loading && logs.length > 0}
|
||||
stickyHeader
|
||||
/>
|
||||
<Pagination
|
||||
page={table.page}
|
||||
pageSize={table.pageSize}
|
||||
total={table.total}
|
||||
onPageChange={table.setPage}
|
||||
onPageSizeChange={table.setPageSize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Dialog open={detail !== null} onOpenChange={(o) => !o && setDetail(null)}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Audit event</DialogTitle>
|
||||
<DialogDescription>
|
||||
{detail
|
||||
? `${detail.action} on ${detail.resource_type} at ${new Date(
|
||||
detail.inserted_at,
|
||||
).toLocaleString()}`
|
||||
: ""}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{detail ? <AuditDetailBody log={detail} /> : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function AuditDetailBody({ log }: { log: AuditLog }) {
|
||||
const rows: { k: string; v: string }[] = [
|
||||
{ k: "ID", v: log.id },
|
||||
{ k: "Tenant", v: log.tenant_id },
|
||||
{ k: "User", v: log.user?.email ?? log.user_id ?? "—" },
|
||||
{ k: "Action", v: log.action },
|
||||
{ k: "Resource", v: `${log.resource_type}${log.resource_id ? `/${log.resource_id}` : ""}` },
|
||||
{ k: "Severity", v: log.severity },
|
||||
{ k: "IP", v: log.ip_address ?? "—" },
|
||||
{ k: "User agent", v: log.user_agent ?? "—" },
|
||||
{ k: "Time", v: new Date(log.inserted_at).toISOString() },
|
||||
]
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<dl className="grid grid-cols-[8rem_1fr] gap-y-1 text-sm">
|
||||
{rows.map((r) => (
|
||||
<div key={r.k} className="contents">
|
||||
<dt className="text-xs uppercase tracking-wide text-muted-foreground">{r.k}</dt>
|
||||
<dd className="break-all font-mono text-xs">{r.v}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
{log.changes ? (
|
||||
<div>
|
||||
<h3 className="mb-1.5 text-sm font-semibold">Changes</h3>
|
||||
<pre className="overflow-x-auto rounded-md border bg-muted/50 p-3 text-xs">
|
||||
{JSON.stringify(log.changes, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
) : null}
|
||||
{log.metadata && Object.keys(log.metadata).length > 0 ? (
|
||||
<div>
|
||||
<h3 className="mb-1.5 text-sm font-semibold">Metadata</h3>
|
||||
<pre className="overflow-x-auto rounded-md border bg-muted/50 p-3 text-xs">
|
||||
{JSON.stringify(log.metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function severityTone(s: AuditSeverity): BadgeTone {
|
||||
if (s === "critical" || s === "error") return "danger"
|
||||
if (s === "warning") return "warning"
|
||||
return "default"
|
||||
}
|
||||
|
||||
function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
|
||||
return arr.reduce<Record<string, number>>((acc, x) => {
|
||||
const k = key(x)
|
||||
acc[k] = (acc[k] ?? 0) + 1
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
879
app/routes/scheduled-tasks.tsx
Normal file
879
app/routes/scheduled-tasks.tsx
Normal file
@@ -0,0 +1,879 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router"
|
||||
import {
|
||||
CalendarClock,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
History,
|
||||
Pause,
|
||||
Play,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
Zap,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import {
|
||||
ActionsCell,
|
||||
BadgeCell,
|
||||
DataTable,
|
||||
DateCell,
|
||||
Pagination,
|
||||
useTable,
|
||||
type ActionItem,
|
||||
type BadgeTone,
|
||||
type Column,
|
||||
} from "@crema/table-ui"
|
||||
import { SearchInput } from "@crema/search-ui"
|
||||
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Badge } from "~/components/ui/badge"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Label } from "~/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select"
|
||||
import { Switch } from "~/components/ui/switch"
|
||||
import { Textarea } from "~/components/ui/textarea"
|
||||
import {
|
||||
createScheduledTask,
|
||||
deleteScheduledTask,
|
||||
disableScheduledTask,
|
||||
enableScheduledTask,
|
||||
listScheduledTasks,
|
||||
listTaskRuns,
|
||||
triggerScheduledTask,
|
||||
updateScheduledTask,
|
||||
type ScheduledTask,
|
||||
type ScheduledTaskAction,
|
||||
type ScheduledTaskInput,
|
||||
type TaskRun,
|
||||
} from "~/lib/arcadia/scheduled-tasks"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import { useSession } from "~/lib/session"
|
||||
import { useRegisterAdminContext } from "~/lib/admin-context"
|
||||
|
||||
export const meta = () => pageTitle("Scheduled tasks")
|
||||
|
||||
type EditorState =
|
||||
| { mode: "create" }
|
||||
| { mode: "edit"; task: ScheduledTask }
|
||||
| null
|
||||
|
||||
export default function ScheduledTasksRoute() {
|
||||
const session = useSession()
|
||||
const arcadia = useArcadiaClient()
|
||||
|
||||
const [tasks, setTasks] = useState<ScheduledTask[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [search, setSearch] = useState("")
|
||||
const [editor, setEditor] = useState<EditorState>(null)
|
||||
const [pendingDelete, setPendingDelete] = useState<ScheduledTask | null>(null)
|
||||
const [runsFor, setRunsFor] = useState<ScheduledTask | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
setTasks(await listScheduledTasks(arcadia))
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load scheduled tasks.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) refresh()
|
||||
}, [session, refresh])
|
||||
|
||||
const columns = useMemo<Column<ScheduledTask>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "name",
|
||||
header: "Name",
|
||||
accessor: "name",
|
||||
sortable: true,
|
||||
cell: (t) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{t.name}</span>
|
||||
{t.description ? (
|
||||
<span className="text-xs text-muted-foreground">{t.description}</span>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "cron",
|
||||
header: "Schedule",
|
||||
accessor: "cron_expression",
|
||||
sortable: true,
|
||||
cell: (t) => (
|
||||
<div className="flex flex-col">
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
|
||||
{t.cron_expression}
|
||||
</code>
|
||||
<span className="text-[11px] text-muted-foreground">{t.timezone}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
header: "Action",
|
||||
accessor: "action_type",
|
||||
sortable: true,
|
||||
cell: (t) => (
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
{t.action_type}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: "Status",
|
||||
accessor: "enabled",
|
||||
sortable: true,
|
||||
cell: (t) => (
|
||||
<BadgeCell
|
||||
label={t.enabled ? "enabled" : "disabled"}
|
||||
tone={t.enabled ? "success" : "default"}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "last",
|
||||
header: "Last run",
|
||||
accessor: "last_run_at",
|
||||
sortable: true,
|
||||
cell: (t) =>
|
||||
t.last_run_at ? (
|
||||
<DateCell value={t.last_run_at} format="short" />
|
||||
) : (
|
||||
<span className="text-muted-foreground">never</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "next",
|
||||
header: "Next run",
|
||||
accessor: "next_run_at",
|
||||
sortable: true,
|
||||
cell: (t) =>
|
||||
t.enabled && t.next_run_at ? (
|
||||
<DateCell value={t.next_run_at} format="short" />
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
align: "right",
|
||||
cell: (t) => (
|
||||
<ActionsCell
|
||||
items={rowActions(t, {
|
||||
arcadia,
|
||||
refresh,
|
||||
setEditor,
|
||||
setPendingDelete,
|
||||
setRunsFor,
|
||||
setError,
|
||||
setInfo,
|
||||
})}
|
||||
triggerDataAction={`task-${t.id}-actions`}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[arcadia, refresh],
|
||||
)
|
||||
|
||||
const summary = useMemo(
|
||||
() => ({
|
||||
total: tasks.length,
|
||||
enabled: tasks.filter((t) => t.enabled).length,
|
||||
byAction: countBy(tasks, (t) => t.action_type),
|
||||
tasks: tasks.map((t) => ({
|
||||
name: t.name,
|
||||
cron: t.cron_expression,
|
||||
timezone: t.timezone,
|
||||
action_type: t.action_type,
|
||||
enabled: t.enabled,
|
||||
last_run_at: t.last_run_at,
|
||||
next_run_at: t.next_run_at,
|
||||
})),
|
||||
}),
|
||||
[tasks],
|
||||
)
|
||||
useRegisterAdminContext("scheduled_tasks", summary)
|
||||
|
||||
const table = useTable<ScheduledTask>({
|
||||
data: tasks,
|
||||
columns,
|
||||
getRowId: (t) => t.id,
|
||||
initialPageSize: 25,
|
||||
initialSearch: search,
|
||||
})
|
||||
useEffect(() => {
|
||||
table.setSearch(search)
|
||||
}, [search, table])
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<AppShell title="Scheduled tasks">
|
||||
<div className="p-8">
|
||||
<Card className="max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign in required</CardTitle>
|
||||
<CardDescription>
|
||||
Scheduled task administration requires an admin session.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link to="/login?next=/scheduled-tasks">Sign in</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell title="Scheduled tasks">
|
||||
<div className="flex flex-col gap-4 p-6">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Scheduled tasks</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cron-driven jobs run by arcadia. Trigger a task manually to test it without waiting
|
||||
for the next scheduled run.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
data-action="tasks-refresh"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setEditor({ mode: "create" })}
|
||||
data-action="tasks-create"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
New task
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{info ? (
|
||||
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
|
||||
{info}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center gap-3">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
placeholder="Search by name, cron, or action"
|
||||
data-action="tasks-search"
|
||||
className="max-w-sm flex-1"
|
||||
/>
|
||||
<div className="ml-auto text-xs text-muted-foreground">
|
||||
{table.total} of {tasks.length}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay active={loading && tasks.length === 0} label="Loading tasks…" />
|
||||
{table.total === 0 && !loading ? (
|
||||
<EmptyState
|
||||
icon={<CalendarClock className="size-6" />}
|
||||
title={search ? "No tasks match." : "No scheduled tasks yet."}
|
||||
description={
|
||||
search
|
||||
? "Try a different search."
|
||||
: "Schedule a recurring webhook or platform event."
|
||||
}
|
||||
className="py-12"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={table.pageRows}
|
||||
getRowId={(t) => t.id}
|
||||
sort={table.sort}
|
||||
onSortToggle={table.toggleSort}
|
||||
loading={loading && tasks.length > 0}
|
||||
stickyHeader
|
||||
/>
|
||||
<Pagination
|
||||
page={table.page}
|
||||
pageSize={table.pageSize}
|
||||
total={table.total}
|
||||
onPageChange={table.setPage}
|
||||
onPageSizeChange={table.setPageSize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={pendingDelete !== null}
|
||||
onOpenChange={(o) => !o && setPendingDelete(null)}
|
||||
title="Delete scheduled task?"
|
||||
description={
|
||||
pendingDelete
|
||||
? `${pendingDelete.name} will be permanently removed. Run history is retained.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
onConfirm={async () => {
|
||||
if (!pendingDelete) return
|
||||
try {
|
||||
await deleteScheduledTask(arcadia, pendingDelete.id)
|
||||
setPendingDelete(null)
|
||||
setInfo("Task deleted.")
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
|
||||
setPendingDelete(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TaskEditorDialog
|
||||
state={editor}
|
||||
onClose={() => setEditor(null)}
|
||||
onSaved={async () => {
|
||||
setEditor(null)
|
||||
await refresh()
|
||||
}}
|
||||
onError={setError}
|
||||
/>
|
||||
|
||||
<RunsDialog task={runsFor} onClose={() => setRunsFor(null)} onError={setError} />
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function rowActions(
|
||||
t: ScheduledTask,
|
||||
ctx: {
|
||||
arcadia: ReturnType<typeof useArcadiaClient>
|
||||
refresh: () => Promise<void>
|
||||
setEditor: (s: EditorState) => void
|
||||
setPendingDelete: (t: ScheduledTask | null) => void
|
||||
setRunsFor: (t: ScheduledTask | null) => void
|
||||
setError: (m: string | null) => void
|
||||
setInfo: (m: string | null) => void
|
||||
},
|
||||
): ActionItem[] {
|
||||
const { arcadia, refresh, setEditor, setPendingDelete, setRunsFor, setError, setInfo } = ctx
|
||||
const items: ActionItem[] = []
|
||||
|
||||
items.push({
|
||||
id: "trigger",
|
||||
label: "Run now",
|
||||
icon: <Zap className="size-4" />,
|
||||
dataAction: `task-${t.id}-trigger`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await triggerScheduledTask(arcadia, t.id)
|
||||
setInfo(`${t.name} triggered. Check the run log for status.`)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Trigger failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
items.push({
|
||||
id: "edit",
|
||||
label: "Edit",
|
||||
dataAction: `task-${t.id}-edit`,
|
||||
onSelect: () => setEditor({ mode: "edit", task: t }),
|
||||
})
|
||||
items.push({
|
||||
id: "runs",
|
||||
label: "View runs",
|
||||
icon: <History className="size-4" />,
|
||||
dataAction: `task-${t.id}-runs`,
|
||||
onSelect: () => setRunsFor(t),
|
||||
})
|
||||
|
||||
if (t.enabled) {
|
||||
items.push({
|
||||
id: "disable",
|
||||
label: "Disable",
|
||||
icon: <Pause className="size-4" />,
|
||||
dataAction: `task-${t.id}-disable`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await disableScheduledTask(arcadia, t.id)
|
||||
setInfo(`${t.name} disabled.`)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Disable failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
} else {
|
||||
items.push({
|
||||
id: "enable",
|
||||
label: "Enable",
|
||||
icon: <Play className="size-4" />,
|
||||
dataAction: `task-${t.id}-enable`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await enableScheduledTask(arcadia, t.id)
|
||||
setInfo(`${t.name} enabled.`)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Enable failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
items.push({
|
||||
id: "delete",
|
||||
label: "Delete",
|
||||
icon: <Trash2 className="size-4" />,
|
||||
destructive: true,
|
||||
dataAction: `task-${t.id}-delete`,
|
||||
onSelect: () => setPendingDelete(t),
|
||||
})
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
function TaskEditorDialog({
|
||||
state,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
state: EditorState
|
||||
onClose: () => void
|
||||
onSaved: () => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const open = state !== null
|
||||
const isEdit = state?.mode === "edit"
|
||||
const initial = isEdit ? state.task : null
|
||||
|
||||
const [name, setName] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [cron, setCron] = useState("")
|
||||
const [timezone, setTimezone] = useState("UTC")
|
||||
const [actionType, setActionType] = useState<ScheduledTaskAction>("event")
|
||||
const [configText, setConfigText] = useState("{}")
|
||||
const [tagsText, setTagsText] = useState("")
|
||||
const [enabled, setEnabled] = useState(true)
|
||||
const [maxRetries, setMaxRetries] = useState("3")
|
||||
const [timeoutSeconds, setTimeoutSeconds] = useState("30")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
if (initial) {
|
||||
setName(initial.name)
|
||||
setDescription(initial.description ?? "")
|
||||
setCron(initial.cron_expression)
|
||||
setTimezone(initial.timezone)
|
||||
setActionType(initial.action_type)
|
||||
setConfigText(
|
||||
initial.action_config ? JSON.stringify(initial.action_config, null, 2) : "{}",
|
||||
)
|
||||
setTagsText(initial.tags.join(", "))
|
||||
setEnabled(initial.enabled)
|
||||
setMaxRetries(String(initial.max_retries))
|
||||
setTimeoutSeconds(String(initial.timeout_seconds))
|
||||
} else {
|
||||
setName("")
|
||||
setDescription("")
|
||||
setCron("0 * * * *")
|
||||
setTimezone("UTC")
|
||||
setActionType("event")
|
||||
setConfigText('{\n "event": "platform.heartbeat"\n}')
|
||||
setTagsText("")
|
||||
setEnabled(true)
|
||||
setMaxRetries("3")
|
||||
setTimeoutSeconds("30")
|
||||
}
|
||||
}, [open, initial])
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
let parsedConfig: Record<string, unknown>
|
||||
try {
|
||||
parsedConfig = configText.trim() === "" ? {} : JSON.parse(configText)
|
||||
} catch {
|
||||
throw new Error("Action config must be valid JSON.")
|
||||
}
|
||||
|
||||
const tags = tagsText
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
|
||||
const input: ScheduledTaskInput = {
|
||||
name,
|
||||
description: description || null,
|
||||
cron_expression: cron,
|
||||
timezone,
|
||||
action_type: actionType,
|
||||
action_config: parsedConfig,
|
||||
tags,
|
||||
enabled,
|
||||
max_retries: Math.max(0, Number(maxRetries) || 0),
|
||||
timeout_seconds: Math.max(1, Number(timeoutSeconds) || 30),
|
||||
}
|
||||
|
||||
if (isEdit && initial) await updateScheduledTask(arcadia, initial.id, input)
|
||||
else await createScheduledTask(arcadia, input)
|
||||
await onSaved()
|
||||
} catch (err) {
|
||||
onError(
|
||||
err instanceof ArcadiaError
|
||||
? err.message
|
||||
: err instanceof Error
|
||||
? err.message
|
||||
: "Save failed.",
|
||||
)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? "Edit scheduled task" : "New scheduled task"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Cron uses standard 5-field syntax (minute hour dom month dow). Tasks run in the
|
||||
specified timezone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="col-span-2 flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-name">Name</Label>
|
||||
<Input
|
||||
id="task-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Daily cleanup"
|
||||
data-action="task-form-name"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-description">Description</Label>
|
||||
<Input
|
||||
id="task-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
data-action="task-form-description"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-cron">Cron expression</Label>
|
||||
<Input
|
||||
id="task-cron"
|
||||
value={cron}
|
||||
onChange={(e) => setCron(e.target.value)}
|
||||
placeholder="0 2 * * *"
|
||||
data-action="task-form-cron"
|
||||
spellCheck={false}
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-timezone">Timezone</Label>
|
||||
<Input
|
||||
id="task-timezone"
|
||||
value={timezone}
|
||||
onChange={(e) => setTimezone(e.target.value)}
|
||||
placeholder="UTC"
|
||||
data-action="task-form-timezone"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Action type</Label>
|
||||
<Select
|
||||
value={actionType}
|
||||
onValueChange={(v) => setActionType(v as ScheduledTaskAction)}
|
||||
>
|
||||
<SelectTrigger data-action="task-form-action-type">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="event">Emit platform event</SelectItem>
|
||||
<SelectItem value="webhook">Send outbound webhook</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-tags">Tags (comma-separated)</Label>
|
||||
<Input
|
||||
id="task-tags"
|
||||
value={tagsText}
|
||||
onChange={(e) => setTagsText(e.target.value)}
|
||||
placeholder="cleanup, nightly"
|
||||
data-action="task-form-tags"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-config">
|
||||
Action config (JSON){" "}
|
||||
<span className="font-normal text-muted-foreground">
|
||||
{actionType === "webhook"
|
||||
? "{ url, method?, headers?, body? }"
|
||||
: "{ event: 'name', payload?: {…} }"}
|
||||
</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="task-config"
|
||||
rows={8}
|
||||
value={configText}
|
||||
onChange={(e) => setConfigText(e.target.value)}
|
||||
data-action="task-form-config"
|
||||
spellCheck={false}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-retries">Max retries</Label>
|
||||
<Input
|
||||
id="task-retries"
|
||||
type="number"
|
||||
min={0}
|
||||
value={maxRetries}
|
||||
onChange={(e) => setMaxRetries(e.target.value)}
|
||||
data-action="task-form-retries"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="task-timeout">Timeout (seconds)</Label>
|
||||
<Input
|
||||
id="task-timeout"
|
||||
type="number"
|
||||
min={1}
|
||||
value={timeoutSeconds}
|
||||
onChange={(e) => setTimeoutSeconds(e.target.value)}
|
||||
data-action="task-form-timeout"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between rounded-md border px-3 py-2">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Enabled</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Disabled tasks skip their scheduled runs.
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onCheckedChange={setEnabled}
|
||||
data-action="task-form-enabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving} data-action="task-form-cancel">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={submit}
|
||||
disabled={saving || !name || !cron}
|
||||
data-action="task-form-save"
|
||||
>
|
||||
{saving ? <RefreshCw className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />}
|
||||
{isEdit ? "Save" : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function RunsDialog({
|
||||
task,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
task: ScheduledTask | null
|
||||
onClose: () => void
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [runs, setRuns] = useState<TaskRun[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [expanded, setExpanded] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!task) return
|
||||
let mounted = true
|
||||
setLoading(true)
|
||||
listTaskRuns(arcadia, task.id, { limit: 50 })
|
||||
.then((r) => mounted && setRuns(r))
|
||||
.catch((err) =>
|
||||
onError(err instanceof ArcadiaError ? err.message : "Failed to load runs."),
|
||||
)
|
||||
.finally(() => mounted && setLoading(false))
|
||||
return () => {
|
||||
mounted = false
|
||||
}
|
||||
}, [arcadia, task, onError])
|
||||
|
||||
if (!task) return null
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Run history</DialogTitle>
|
||||
<DialogDescription>
|
||||
{task.name} — last 50 runs, newest first.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
|
||||
</p>
|
||||
) : runs.length === 0 ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">No runs yet.</p>
|
||||
) : (
|
||||
<ul className="flex flex-col divide-y rounded-md border">
|
||||
{runs.map((r) => {
|
||||
const open = expanded === r.id
|
||||
return (
|
||||
<li key={r.id} className="flex flex-col gap-1 px-3 py-2 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(open ? null : r.id)}
|
||||
data-action={`task-run-${r.id}-toggle`}
|
||||
className="flex items-start justify-between gap-3 text-left"
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="flex items-center gap-2">
|
||||
<Badge variant={runVariant(r.status)}>{r.status}</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
attempt {r.attempt}
|
||||
</span>
|
||||
{r.response_status ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
HTTP {r.response_status}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<Clock className="mr-1 inline size-3" />
|
||||
{r.started_at
|
||||
? `started ${new Date(r.started_at).toLocaleString()}`
|
||||
: `queued ${new Date(r.inserted_at).toLocaleString()}`}
|
||||
{r.finished_at
|
||||
? ` · finished ${new Date(r.finished_at).toLocaleString()}`
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{open ? (
|
||||
<div className="ml-1 mt-1 flex flex-col gap-2">
|
||||
{r.error ? (
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-destructive">Error</div>
|
||||
<pre className="overflow-x-auto rounded-md border bg-muted/50 p-2 text-xs">
|
||||
{r.error}
|
||||
</pre>
|
||||
</div>
|
||||
) : null}
|
||||
{r.response_body ? (
|
||||
<div>
|
||||
<div className="text-xs font-semibold">Response body</div>
|
||||
<pre className="max-h-48 overflow-auto rounded-md border bg-muted/50 p-2 text-xs">
|
||||
{r.response_body}
|
||||
</pre>
|
||||
</div>
|
||||
) : null}
|
||||
{!r.error && !r.response_body ? (
|
||||
<p className="text-xs text-muted-foreground">No response captured.</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} data-action="task-runs-close">
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function runVariant(status: string): "default" | "secondary" | "destructive" | "outline" {
|
||||
if (status === "succeeded") return "default"
|
||||
if (status === "failed") return "destructive"
|
||||
if (status === "running" || status === "pending") return "secondary"
|
||||
return "outline"
|
||||
}
|
||||
|
||||
function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
|
||||
return arr.reduce<Record<string, number>>((acc, x) => {
|
||||
const k = key(x)
|
||||
acc[k] = (acc[k] ?? 0) + 1
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
1090
app/routes/secrets.tsx
Normal file
1090
app/routes/secrets.tsx
Normal file
File diff suppressed because it is too large
Load Diff
866
app/routes/storage.tsx
Normal file
866
app/routes/storage.tsx
Normal file
@@ -0,0 +1,866 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router"
|
||||
import {
|
||||
CheckCircle2,
|
||||
HardDrive,
|
||||
Pause,
|
||||
Play,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
Star,
|
||||
Trash2,
|
||||
Wrench,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import {
|
||||
ActionsCell,
|
||||
BadgeCell,
|
||||
DataTable,
|
||||
DateCell,
|
||||
Pagination,
|
||||
useTable,
|
||||
type ActionItem,
|
||||
type BadgeTone,
|
||||
type Column,
|
||||
} from "@crema/table-ui"
|
||||
import { SearchInput } from "@crema/search-ui"
|
||||
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Label } from "~/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select"
|
||||
import { Switch } from "~/components/ui/switch"
|
||||
import { Textarea } from "~/components/ui/textarea"
|
||||
import {
|
||||
activateStorageConfig,
|
||||
createStorageConfig,
|
||||
deactivateStorageConfig,
|
||||
deleteStorageConfig,
|
||||
isMaskedSecret,
|
||||
isSecretField,
|
||||
listStorageConfigs,
|
||||
markStorageConfigDegraded,
|
||||
markStorageConfigMaintenance,
|
||||
OPTIONAL_FIELDS,
|
||||
REQUIRED_FIELDS,
|
||||
setDefaultStorageConfig,
|
||||
updateStorageConfig,
|
||||
validateStorageConfig,
|
||||
type StorageBackend,
|
||||
type StorageConfig,
|
||||
type StorageConfigInput,
|
||||
type StorageStatus,
|
||||
} from "~/lib/arcadia/storage-configs"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import { useSession } from "~/lib/session"
|
||||
import { useRegisterAdminContext } from "~/lib/admin-context"
|
||||
|
||||
export const meta = () => pageTitle("Storage")
|
||||
|
||||
type PendingAction =
|
||||
| { kind: "deactivate" | "degraded" | "maintenance" | "delete"; config: StorageConfig }
|
||||
| null
|
||||
|
||||
type EditorState =
|
||||
| { mode: "create" }
|
||||
| { mode: "edit"; config: StorageConfig }
|
||||
| null
|
||||
|
||||
export default function StorageRoute() {
|
||||
const session = useSession()
|
||||
const arcadia = useArcadiaClient()
|
||||
|
||||
const [configs, setConfigs] = useState<StorageConfig[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [pending, setPending] = useState<PendingAction>(null)
|
||||
const [editor, setEditor] = useState<EditorState>(null)
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
const list = await listStorageConfigs(arcadia)
|
||||
setConfigs(list)
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load storage configs.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) refresh()
|
||||
}, [session, refresh])
|
||||
|
||||
const runAction = useCallback(
|
||||
async (action: PendingAction) => {
|
||||
if (!action) return
|
||||
try {
|
||||
if (action.kind === "deactivate") await deactivateStorageConfig(arcadia, action.config.id)
|
||||
else if (action.kind === "degraded")
|
||||
await markStorageConfigDegraded(arcadia, action.config.id)
|
||||
else if (action.kind === "maintenance")
|
||||
await markStorageConfigMaintenance(arcadia, action.config.id)
|
||||
else if (action.kind === "delete") await deleteStorageConfig(arcadia, action.config.id)
|
||||
setPending(null)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Action failed.")
|
||||
setPending(null)
|
||||
}
|
||||
},
|
||||
[arcadia, refresh],
|
||||
)
|
||||
|
||||
const validate = useCallback(
|
||||
async (config: StorageConfig) => {
|
||||
setError(null)
|
||||
setInfo(null)
|
||||
try {
|
||||
const result = await validateStorageConfig(arcadia, config.id)
|
||||
if (result?.ok) {
|
||||
setInfo(`${config.name}: validation passed.`)
|
||||
} else {
|
||||
setError(`${config.name}: ${result?.message ?? "validation failed."}`)
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Validation failed.")
|
||||
}
|
||||
},
|
||||
[arcadia],
|
||||
)
|
||||
|
||||
const columns = useMemo<Column<StorageConfig>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "name",
|
||||
header: "Name",
|
||||
accessor: "name",
|
||||
sortable: true,
|
||||
cell: (c) => (
|
||||
<span className="flex items-center gap-2 font-medium">
|
||||
{c.is_default ? <Star className="size-3.5 fill-amber-400 text-amber-400" /> : null}
|
||||
{c.name}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "backend",
|
||||
header: "Backend",
|
||||
accessor: "backend_type",
|
||||
sortable: true,
|
||||
cell: (c) => (
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs uppercase">
|
||||
{c.backend_type}
|
||||
</code>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: "Status",
|
||||
accessor: "status",
|
||||
sortable: true,
|
||||
cell: (c) => <BadgeCell label={c.status} tone={statusTone(c.status)} />,
|
||||
},
|
||||
{
|
||||
id: "size",
|
||||
header: "Max size",
|
||||
accessor: "max_file_size_bytes",
|
||||
sortable: true,
|
||||
cell: (c) => (
|
||||
<span className="text-muted-foreground">{formatBytes(c.max_file_size_bytes)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "updated",
|
||||
header: "Updated",
|
||||
accessor: "updated_at",
|
||||
sortable: true,
|
||||
cell: (c) => <DateCell value={c.updated_at} format="short" />,
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
align: "right",
|
||||
cell: (c) => (
|
||||
<ActionsCell
|
||||
items={rowActions(c, {
|
||||
arcadia,
|
||||
refresh,
|
||||
setPending,
|
||||
setEditor,
|
||||
setError,
|
||||
validate,
|
||||
})}
|
||||
triggerDataAction={`storage-${slugify(c.name)}-actions`}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[arcadia, refresh, validate],
|
||||
)
|
||||
|
||||
const summary = useMemo(
|
||||
() => ({
|
||||
total: configs.length,
|
||||
byStatus: configs.reduce<Record<string, number>>((acc, c) => {
|
||||
acc[c.status] = (acc[c.status] ?? 0) + 1
|
||||
return acc
|
||||
}, {}),
|
||||
byBackend: configs.reduce<Record<string, number>>((acc, c) => {
|
||||
acc[c.backend_type] = (acc[c.backend_type] ?? 0) + 1
|
||||
return acc
|
||||
}, {}),
|
||||
configs: configs.map((c) => ({
|
||||
id: c.id,
|
||||
name: c.name,
|
||||
backend_type: c.backend_type,
|
||||
status: c.status,
|
||||
is_default: c.is_default,
|
||||
max_file_size_bytes: c.max_file_size_bytes,
|
||||
updated_at: c.updated_at,
|
||||
})),
|
||||
}),
|
||||
[configs],
|
||||
)
|
||||
useRegisterAdminContext("storage", summary)
|
||||
|
||||
const table = useTable<StorageConfig>({
|
||||
data: configs,
|
||||
columns,
|
||||
getRowId: (c) => c.id,
|
||||
initialPageSize: 25,
|
||||
initialSearch: search,
|
||||
})
|
||||
useEffect(() => {
|
||||
table.setSearch(search)
|
||||
}, [search, table])
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<AppShell title="Storage">
|
||||
<div className="p-8">
|
||||
<Card className="max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign in required</CardTitle>
|
||||
<CardDescription>
|
||||
Storage administration requires an admin session.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link to="/login?next=/storage">Sign in</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell title="Storage">
|
||||
<div className="flex flex-col gap-4 p-6">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Storage</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Storage backends and credentials for the platform-admin tenant.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
data-action="storage-refresh"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setEditor({ mode: "create" })}
|
||||
data-action="storage-create"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
New storage config
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{info ? (
|
||||
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
|
||||
{info}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-4">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
placeholder="Search by name, backend, or status"
|
||||
data-action="storage-search"
|
||||
className="max-w-sm flex-1"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{table.total} of {configs.length}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay active={loading && configs.length === 0} label="Loading storage configs…" />
|
||||
{table.total === 0 && !loading ? (
|
||||
<EmptyState
|
||||
title={search ? "No configs match that search." : "No storage configs yet."}
|
||||
description={
|
||||
search
|
||||
? "Try a different name, backend, or status."
|
||||
: "Create your first storage config to start uploading objects."
|
||||
}
|
||||
className="py-12"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={table.pageRows}
|
||||
getRowId={(c) => c.id}
|
||||
sort={table.sort}
|
||||
onSortToggle={table.toggleSort}
|
||||
loading={loading && configs.length > 0}
|
||||
stickyHeader
|
||||
/>
|
||||
<Pagination
|
||||
page={table.page}
|
||||
pageSize={table.pageSize}
|
||||
total={table.total}
|
||||
onPageChange={table.setPage}
|
||||
onPageSizeChange={table.setPageSize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={pending?.kind === "deactivate"}
|
||||
onOpenChange={(o) => !o && setPending(null)}
|
||||
title="Deactivate storage config?"
|
||||
description={
|
||||
pending
|
||||
? `${pending.config.name} will stop accepting new uploads. Existing objects remain accessible.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Deactivate"
|
||||
variant="default"
|
||||
onConfirm={() => runAction(pending)}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={pending?.kind === "degraded"}
|
||||
onOpenChange={(o) => !o && setPending(null)}
|
||||
title="Mark as degraded?"
|
||||
description={
|
||||
pending
|
||||
? `${pending.config.name} will be flagged as degraded. The platform may route new uploads elsewhere.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Mark degraded"
|
||||
variant="default"
|
||||
onConfirm={() => runAction(pending)}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={pending?.kind === "maintenance"}
|
||||
onOpenChange={(o) => !o && setPending(null)}
|
||||
title="Mark as in maintenance?"
|
||||
description={
|
||||
pending
|
||||
? `${pending.config.name} will be put into maintenance mode.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Mark maintenance"
|
||||
variant="default"
|
||||
onConfirm={() => runAction(pending)}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={pending?.kind === "delete"}
|
||||
onOpenChange={(o) => !o && setPending(null)}
|
||||
title="Delete storage config?"
|
||||
description={
|
||||
pending
|
||||
? `${pending.config.name} will be permanently removed. Objects already stored on this backend may become unreachable.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
onConfirm={() => runAction(pending)}
|
||||
/>
|
||||
|
||||
<StorageEditorDialog
|
||||
state={editor}
|
||||
onClose={() => setEditor(null)}
|
||||
onSaved={async () => {
|
||||
setEditor(null)
|
||||
await refresh()
|
||||
}}
|
||||
onError={setError}
|
||||
/>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function statusTone(status: StorageStatus): BadgeTone {
|
||||
if (status === "active") return "success"
|
||||
if (status === "degraded") return "warning"
|
||||
if (status === "maintenance") return "warning"
|
||||
if (status === "inactive") return "default"
|
||||
return "default"
|
||||
}
|
||||
|
||||
function rowActions(
|
||||
c: StorageConfig,
|
||||
ctx: {
|
||||
arcadia: ReturnType<typeof useArcadiaClient>
|
||||
refresh: () => Promise<void>
|
||||
setPending: (p: PendingAction) => void
|
||||
setEditor: (s: EditorState) => void
|
||||
setError: (msg: string | null) => void
|
||||
validate: (c: StorageConfig) => Promise<void>
|
||||
},
|
||||
): ActionItem[] {
|
||||
const { arcadia, refresh, setPending, setEditor, setError, validate } = ctx
|
||||
const slug = slugify(c.name)
|
||||
const items: ActionItem[] = []
|
||||
|
||||
items.push({
|
||||
id: "validate",
|
||||
label: "Validate",
|
||||
icon: <ShieldCheck className="size-4" />,
|
||||
dataAction: `storage-${slug}-validate`,
|
||||
onSelect: () => validate(c),
|
||||
})
|
||||
|
||||
items.push({
|
||||
id: "edit",
|
||||
label: "Edit",
|
||||
dataAction: `storage-${slug}-edit`,
|
||||
onSelect: () => setEditor({ mode: "edit", config: c }),
|
||||
})
|
||||
|
||||
if (c.status === "active") {
|
||||
items.push({
|
||||
id: "deactivate",
|
||||
label: "Deactivate",
|
||||
icon: <Pause className="size-4" />,
|
||||
dataAction: `storage-${slug}-deactivate`,
|
||||
onSelect: () => setPending({ kind: "deactivate", config: c }),
|
||||
})
|
||||
} else {
|
||||
items.push({
|
||||
id: "activate",
|
||||
label: "Activate",
|
||||
icon: <Play className="size-4" />,
|
||||
dataAction: `storage-${slug}-activate`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await activateStorageConfig(arcadia, c.id)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Activate failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (!c.is_default) {
|
||||
items.push({
|
||||
id: "set-default",
|
||||
label: "Set as default",
|
||||
icon: <Star className="size-4" />,
|
||||
dataAction: `storage-${slug}-set-default`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await setDefaultStorageConfig(arcadia, c.id)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Set default failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
items.push({
|
||||
id: "mark-degraded",
|
||||
label: "Mark degraded",
|
||||
icon: <Wrench className="size-4" />,
|
||||
dataAction: `storage-${slug}-mark-degraded`,
|
||||
onSelect: () => setPending({ kind: "degraded", config: c }),
|
||||
})
|
||||
items.push({
|
||||
id: "mark-maintenance",
|
||||
label: "Mark maintenance",
|
||||
icon: <Wrench className="size-4" />,
|
||||
dataAction: `storage-${slug}-mark-maintenance`,
|
||||
onSelect: () => setPending({ kind: "maintenance", config: c }),
|
||||
})
|
||||
|
||||
items.push({
|
||||
id: "delete",
|
||||
label: "Delete",
|
||||
icon: <Trash2 className="size-4" />,
|
||||
destructive: true,
|
||||
dataAction: `storage-${slug}-delete`,
|
||||
onSelect: () => setPending({ kind: "delete", config: c }),
|
||||
})
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
function StorageEditorDialog({
|
||||
state,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
state: EditorState
|
||||
onClose: () => void
|
||||
onSaved: () => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const open = state !== null
|
||||
const isEdit = state?.mode === "edit"
|
||||
const initial = isEdit ? state.config : null
|
||||
|
||||
const [name, setName] = useState("")
|
||||
const [backend, setBackend] = useState<StorageBackend>("s3")
|
||||
const [isDefault, setIsDefault] = useState(false)
|
||||
const [maxSize, setMaxSize] = useState<string>("")
|
||||
const [allowedTypes, setAllowedTypes] = useState<string>("")
|
||||
const [fields, setFields] = useState<Record<string, string>>({})
|
||||
const [secretTouched, setSecretTouched] = useState<Record<string, boolean>>({})
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
// Reset form whenever the dialog opens / target changes.
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
if (initial) {
|
||||
setName(initial.name)
|
||||
setBackend(initial.backend_type)
|
||||
setIsDefault(initial.is_default)
|
||||
setMaxSize(
|
||||
initial.max_file_size_bytes == null ? "" : String(initial.max_file_size_bytes),
|
||||
)
|
||||
setAllowedTypes((initial.allowed_content_types ?? []).join(", "))
|
||||
const initialFields: Record<string, string> = {}
|
||||
const cfg = (initial.config ?? {}) as Record<string, unknown>
|
||||
for (const k of Object.keys(cfg)) {
|
||||
const v = cfg[k]
|
||||
initialFields[k] = isMaskedSecret(v) ? "" : v == null ? "" : String(v)
|
||||
}
|
||||
setFields(initialFields)
|
||||
setSecretTouched({})
|
||||
} else {
|
||||
setName("")
|
||||
setBackend("s3")
|
||||
setIsDefault(false)
|
||||
setMaxSize("")
|
||||
setAllowedTypes("")
|
||||
setFields({})
|
||||
setSecretTouched({})
|
||||
}
|
||||
}, [open, initial])
|
||||
|
||||
const required = REQUIRED_FIELDS[backend]
|
||||
const optional = OPTIONAL_FIELDS[backend]
|
||||
|
||||
const setField = (key: string, value: string) => {
|
||||
setFields((f) => ({ ...f, [key]: value }))
|
||||
if (isSecretField(backend, key)) {
|
||||
setSecretTouched((t) => ({ ...t, [key]: true }))
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
const config: Record<string, unknown> = {}
|
||||
for (const k of [...required, ...optional]) {
|
||||
const v = fields[k]
|
||||
if (isSecretField(backend, k)) {
|
||||
// Only send a secret if the user typed a fresh value.
|
||||
if (secretTouched[k] && v !== "") config[k] = v
|
||||
} else if (v !== undefined && v !== "") {
|
||||
config[k] = v
|
||||
}
|
||||
}
|
||||
|
||||
const allowed = allowedTypes
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
|
||||
const max = maxSize.trim() === "" ? null : Number(maxSize)
|
||||
if (max != null && Number.isNaN(max)) {
|
||||
throw new Error("Max file size must be a number (bytes).")
|
||||
}
|
||||
|
||||
const input: StorageConfigInput = {
|
||||
name,
|
||||
backend_type: backend,
|
||||
config,
|
||||
is_default: isDefault,
|
||||
max_file_size_bytes: max,
|
||||
allowed_content_types: allowed.length ? allowed : undefined,
|
||||
}
|
||||
|
||||
if (isEdit && initial) {
|
||||
await updateStorageConfig(arcadia, initial.id, input)
|
||||
} else {
|
||||
await createStorageConfig(arcadia, input)
|
||||
}
|
||||
await onSaved()
|
||||
} catch (err) {
|
||||
onError(err instanceof ArcadiaError ? err.message : err instanceof Error ? err.message : "Save failed.")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? "Edit storage config" : "New storage config"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEdit
|
||||
? "Secrets are write-only — leave masked fields blank to keep the existing value."
|
||||
: "Connect a backend to start storing objects on this tenant."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="storage-name">Name</Label>
|
||||
<Input
|
||||
id="storage-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Primary S3 storage"
|
||||
data-action="storage-form-name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Backend</Label>
|
||||
<Select
|
||||
value={backend}
|
||||
onValueChange={(v) => setBackend(v as StorageBackend)}
|
||||
disabled={isEdit}
|
||||
>
|
||||
<SelectTrigger data-action="storage-form-backend">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="s3">S3 (or S3-compatible)</SelectItem>
|
||||
<SelectItem value="gcs">Google Cloud Storage</SelectItem>
|
||||
<SelectItem value="local">Local filesystem</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{required.map((k) => (
|
||||
<BackendField
|
||||
key={k}
|
||||
label={fieldLabel(k)}
|
||||
field={k}
|
||||
backend={backend}
|
||||
value={fields[k] ?? ""}
|
||||
originalIsMasked={
|
||||
!!initial && isMaskedSecret((initial.config ?? {})[k as keyof typeof initial.config])
|
||||
}
|
||||
touched={!!secretTouched[k]}
|
||||
onChange={(v) => setField(k, v)}
|
||||
required
|
||||
/>
|
||||
))}
|
||||
{optional.map((k) => (
|
||||
<BackendField
|
||||
key={k}
|
||||
label={fieldLabel(k)}
|
||||
field={k}
|
||||
backend={backend}
|
||||
value={fields[k] ?? ""}
|
||||
originalIsMasked={false}
|
||||
touched={false}
|
||||
onChange={(v) => setField(k, v)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="storage-max-size">Max file size (bytes)</Label>
|
||||
<Input
|
||||
id="storage-max-size"
|
||||
value={maxSize}
|
||||
onChange={(e) => setMaxSize(e.target.value)}
|
||||
placeholder="e.g. 104857600"
|
||||
data-action="storage-form-max-size"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="storage-allowed-types">Allowed content types (comma-separated)</Label>
|
||||
<Textarea
|
||||
id="storage-allowed-types"
|
||||
value={allowedTypes}
|
||||
onChange={(e) => setAllowedTypes(e.target.value)}
|
||||
placeholder="image/jpeg, image/png, application/pdf"
|
||||
data-action="storage-form-allowed-types"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-md border px-3 py-2">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Default backend</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
New uploads go here unless another backend is specified.
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={isDefault}
|
||||
onCheckedChange={setIsDefault}
|
||||
data-action="storage-form-is-default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving} data-action="storage-form-cancel">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={saving || name.trim() === ""} data-action="storage-form-save">
|
||||
{saving ? (
|
||||
<RefreshCw className="size-4 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle2 className="size-4" />
|
||||
)}
|
||||
{isEdit ? "Save changes" : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function BackendField({
|
||||
label,
|
||||
field,
|
||||
backend,
|
||||
value,
|
||||
originalIsMasked,
|
||||
touched,
|
||||
onChange,
|
||||
required,
|
||||
}: {
|
||||
label: string
|
||||
field: string
|
||||
backend: StorageBackend
|
||||
value: string
|
||||
originalIsMasked: boolean
|
||||
touched: boolean
|
||||
onChange: (v: string) => void
|
||||
required?: boolean
|
||||
}) {
|
||||
const secret = isSecretField(backend, field)
|
||||
const isJson = field === "service_account_json"
|
||||
const placeholder = secret && originalIsMasked && !touched ? "•••••• (unchanged)" : ""
|
||||
const inputId = `storage-config-field-${field}`
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor={inputId}>
|
||||
{label}
|
||||
{required ? <span className="ml-1 text-destructive">*</span> : null}
|
||||
</Label>
|
||||
{isJson ? (
|
||||
<Textarea
|
||||
id={inputId}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder || "Paste service account JSON"}
|
||||
rows={4}
|
||||
data-action={`storage-form-config-${field}`}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
id={inputId}
|
||||
type={secret ? "password" : "text"}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
data-action={`storage-form-config-${field}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function fieldLabel(key: string): string {
|
||||
return key
|
||||
.split("_")
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ")
|
||||
}
|
||||
|
||||
function slugify(s: string): string {
|
||||
return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "config"
|
||||
}
|
||||
|
||||
function formatBytes(n: number | null): string {
|
||||
if (n == null) return "—"
|
||||
const units = ["B", "KB", "MB", "GB", "TB"]
|
||||
let i = 0
|
||||
let v = n
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024
|
||||
i++
|
||||
}
|
||||
return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`
|
||||
}
|
||||
1519
app/routes/users.tsx
Normal file
1519
app/routes/users.tsx
Normal file
File diff suppressed because it is too large
Load Diff
921
app/routes/webhooks.tsx
Normal file
921
app/routes/webhooks.tsx
Normal file
@@ -0,0 +1,921 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router"
|
||||
import {
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Copy,
|
||||
History,
|
||||
KeyRound,
|
||||
Pause,
|
||||
Play,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
RotateCw,
|
||||
Send,
|
||||
Trash2,
|
||||
Webhook as WebhookIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import {
|
||||
ActionsCell,
|
||||
BadgeCell,
|
||||
DataTable,
|
||||
DateCell,
|
||||
Pagination,
|
||||
useTable,
|
||||
type ActionItem,
|
||||
type BadgeTone,
|
||||
type Column,
|
||||
} from "@crema/table-ui"
|
||||
import { SearchInput } from "@crema/search-ui"
|
||||
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { Badge } from "~/components/ui/badge"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog"
|
||||
import { Input } from "~/components/ui/input"
|
||||
import { Label } from "~/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select"
|
||||
import { Textarea } from "~/components/ui/textarea"
|
||||
import {
|
||||
COMMON_WEBHOOK_EVENTS,
|
||||
createWebhook,
|
||||
deleteWebhook,
|
||||
listWebhookDeliveries,
|
||||
listWebhooks,
|
||||
pauseWebhook,
|
||||
regenerateWebhookSecret,
|
||||
resumeWebhook,
|
||||
testWebhook,
|
||||
updateWebhook,
|
||||
type Webhook,
|
||||
type WebhookDelivery,
|
||||
type WebhookInput,
|
||||
type WebhookRetryStrategy,
|
||||
type WebhookStatus,
|
||||
} from "~/lib/arcadia/webhooks"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import { useSession } from "~/lib/session"
|
||||
import { useRegisterAdminContext } from "~/lib/admin-context"
|
||||
|
||||
export const meta = () => pageTitle("Webhooks")
|
||||
|
||||
type EditorState =
|
||||
| { mode: "create" }
|
||||
| { mode: "edit"; webhook: Webhook }
|
||||
| null
|
||||
|
||||
export default function WebhooksRoute() {
|
||||
const session = useSession()
|
||||
const arcadia = useArcadiaClient()
|
||||
|
||||
const [webhooks, setWebhooks] = useState<Webhook[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [search, setSearch] = useState("")
|
||||
const [editor, setEditor] = useState<EditorState>(null)
|
||||
const [pendingDelete, setPendingDelete] = useState<Webhook | null>(null)
|
||||
const [deliveriesFor, setDeliveriesFor] = useState<Webhook | null>(null)
|
||||
const [revealedSecret, setRevealedSecret] = useState<{
|
||||
webhookId: string
|
||||
secret: string
|
||||
isNew?: boolean
|
||||
} | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
setWebhooks(await listWebhooks(arcadia))
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load webhooks.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) refresh()
|
||||
}, [session, refresh])
|
||||
|
||||
const columns = useMemo<Column<Webhook>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "url",
|
||||
header: "URL",
|
||||
accessor: "url",
|
||||
sortable: true,
|
||||
cell: (w) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono text-xs">{w.url}</span>
|
||||
{w.description ? (
|
||||
<span className="text-xs text-muted-foreground">{w.description}</span>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: "Status",
|
||||
accessor: "status",
|
||||
sortable: true,
|
||||
cell: (w) => <BadgeCell label={w.status} tone={statusTone(w.status)} />,
|
||||
},
|
||||
{
|
||||
id: "events",
|
||||
header: "Events",
|
||||
cell: (w) =>
|
||||
w.events.length === 0 ? (
|
||||
<span className="text-muted-foreground">all</span>
|
||||
) : (
|
||||
<span className="text-xs">{w.events.length}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "success",
|
||||
header: "Success",
|
||||
accessor: "success_count",
|
||||
sortable: true,
|
||||
cell: (w) => <span className="font-mono text-xs">{w.success_count}</span>,
|
||||
},
|
||||
{
|
||||
id: "failure",
|
||||
header: "Failure",
|
||||
accessor: "failure_count",
|
||||
sortable: true,
|
||||
cell: (w) => (
|
||||
<span
|
||||
className={`font-mono text-xs ${
|
||||
w.failure_count > 0 ? "text-destructive" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{w.failure_count}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "last",
|
||||
header: "Last triggered",
|
||||
accessor: "last_triggered_at",
|
||||
sortable: true,
|
||||
cell: (w) =>
|
||||
w.last_triggered_at ? (
|
||||
<DateCell value={w.last_triggered_at} format="short" />
|
||||
) : (
|
||||
<span className="text-muted-foreground">never</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
align: "right",
|
||||
cell: (w) => (
|
||||
<ActionsCell
|
||||
items={rowActions(w, {
|
||||
arcadia,
|
||||
refresh,
|
||||
setEditor,
|
||||
setPendingDelete,
|
||||
setDeliveriesFor,
|
||||
setRevealedSecret,
|
||||
setError,
|
||||
setInfo,
|
||||
})}
|
||||
triggerDataAction={`webhook-${w.id}-actions`}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[arcadia, refresh],
|
||||
)
|
||||
|
||||
const summary = useMemo(
|
||||
() => ({
|
||||
total: webhooks.length,
|
||||
byStatus: countBy(webhooks, (w) => w.status),
|
||||
total_failures: webhooks.reduce((a, w) => a + w.failure_count, 0),
|
||||
total_successes: webhooks.reduce((a, w) => a + w.success_count, 0),
|
||||
webhooks: webhooks.map((w) => ({
|
||||
url: w.url,
|
||||
status: w.status,
|
||||
events: w.events,
|
||||
success_count: w.success_count,
|
||||
failure_count: w.failure_count,
|
||||
last_triggered_at: w.last_triggered_at,
|
||||
})),
|
||||
}),
|
||||
[webhooks],
|
||||
)
|
||||
useRegisterAdminContext("webhooks", summary)
|
||||
|
||||
const table = useTable<Webhook>({
|
||||
data: webhooks,
|
||||
columns,
|
||||
getRowId: (w) => w.id,
|
||||
initialPageSize: 25,
|
||||
initialSearch: search,
|
||||
})
|
||||
useEffect(() => {
|
||||
table.setSearch(search)
|
||||
}, [search, table])
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<AppShell title="Webhooks">
|
||||
<div className="p-8">
|
||||
<Card className="max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign in required</CardTitle>
|
||||
<CardDescription>Webhook administration requires an admin session.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link to="/login?next=/webhooks">Sign in</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell title="Webhooks">
|
||||
<div className="flex flex-col gap-4 p-6">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Webhooks</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Outbound HTTP callbacks for platform events. Each delivery is signed with the
|
||||
endpoint's secret.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
data-action="webhooks-refresh"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setEditor({ mode: "create" })}
|
||||
data-action="webhooks-create"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
New webhook
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{info ? (
|
||||
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
|
||||
{info}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center gap-3">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
placeholder="Search by URL, description, or status"
|
||||
data-action="webhooks-search"
|
||||
className="max-w-sm flex-1"
|
||||
/>
|
||||
<div className="ml-auto text-xs text-muted-foreground">
|
||||
{table.total} of {webhooks.length}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay active={loading && webhooks.length === 0} label="Loading webhooks…" />
|
||||
{table.total === 0 && !loading ? (
|
||||
<EmptyState
|
||||
icon={<WebhookIcon className="size-6" />}
|
||||
title={search ? "No webhooks match." : "No webhooks yet."}
|
||||
description={
|
||||
search
|
||||
? "Try a different search."
|
||||
: "Add an endpoint to receive event notifications from arcadia."
|
||||
}
|
||||
className="py-12"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={table.pageRows}
|
||||
getRowId={(w) => w.id}
|
||||
sort={table.sort}
|
||||
onSortToggle={table.toggleSort}
|
||||
loading={loading && webhooks.length > 0}
|
||||
stickyHeader
|
||||
/>
|
||||
<Pagination
|
||||
page={table.page}
|
||||
pageSize={table.pageSize}
|
||||
total={table.total}
|
||||
onPageChange={table.setPage}
|
||||
onPageSizeChange={table.setPageSize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={pendingDelete !== null}
|
||||
onOpenChange={(o) => !o && setPendingDelete(null)}
|
||||
title="Delete webhook?"
|
||||
description={
|
||||
pendingDelete
|
||||
? `${pendingDelete.url} will stop receiving events. Pending retries are abandoned.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
onConfirm={async () => {
|
||||
if (!pendingDelete) return
|
||||
try {
|
||||
await deleteWebhook(arcadia, pendingDelete.id)
|
||||
setPendingDelete(null)
|
||||
setInfo("Webhook deleted.")
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
|
||||
setPendingDelete(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<WebhookEditorDialog
|
||||
state={editor}
|
||||
onClose={() => setEditor(null)}
|
||||
onSaved={async (created) => {
|
||||
setEditor(null)
|
||||
if (created?.secret) {
|
||||
setRevealedSecret({ webhookId: created.id, secret: created.secret, isNew: true })
|
||||
}
|
||||
await refresh()
|
||||
}}
|
||||
onError={setError}
|
||||
/>
|
||||
|
||||
<DeliveriesDialog
|
||||
webhook={deliveriesFor}
|
||||
onClose={() => setDeliveriesFor(null)}
|
||||
onError={setError}
|
||||
/>
|
||||
|
||||
<RevealSecretDialog reveal={revealedSecret} onClose={() => setRevealedSecret(null)} />
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function statusTone(s: WebhookStatus): BadgeTone {
|
||||
if (s === "active") return "success"
|
||||
if (s === "paused") return "warning"
|
||||
return "default"
|
||||
}
|
||||
|
||||
function rowActions(
|
||||
w: Webhook,
|
||||
ctx: {
|
||||
arcadia: ReturnType<typeof useArcadiaClient>
|
||||
refresh: () => Promise<void>
|
||||
setEditor: (s: EditorState) => void
|
||||
setPendingDelete: (w: Webhook | null) => void
|
||||
setDeliveriesFor: (w: Webhook | null) => void
|
||||
setRevealedSecret: (
|
||||
r: { webhookId: string; secret: string; isNew?: boolean } | null,
|
||||
) => void
|
||||
setError: (m: string | null) => void
|
||||
setInfo: (m: string | null) => void
|
||||
},
|
||||
): ActionItem[] {
|
||||
const {
|
||||
arcadia,
|
||||
refresh,
|
||||
setEditor,
|
||||
setPendingDelete,
|
||||
setDeliveriesFor,
|
||||
setRevealedSecret,
|
||||
setError,
|
||||
setInfo,
|
||||
} = ctx
|
||||
const items: ActionItem[] = []
|
||||
|
||||
items.push({
|
||||
id: "edit",
|
||||
label: "Edit",
|
||||
dataAction: `webhook-${w.id}-edit`,
|
||||
onSelect: () => setEditor({ mode: "edit", webhook: w }),
|
||||
})
|
||||
items.push({
|
||||
id: "deliveries",
|
||||
label: "View deliveries",
|
||||
icon: <History className="size-4" />,
|
||||
dataAction: `webhook-${w.id}-deliveries`,
|
||||
onSelect: () => setDeliveriesFor(w),
|
||||
})
|
||||
items.push({
|
||||
id: "test",
|
||||
label: "Send test event",
|
||||
icon: <Send className="size-4" />,
|
||||
dataAction: `webhook-${w.id}-test`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
const r = await testWebhook(arcadia, w.id)
|
||||
setInfo(r.ok === false ? r.message ?? "Test failed." : "Test event sent.")
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Test failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
if (w.status === "active") {
|
||||
items.push({
|
||||
id: "pause",
|
||||
label: "Pause",
|
||||
icon: <Pause className="size-4" />,
|
||||
dataAction: `webhook-${w.id}-pause`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await pauseWebhook(arcadia, w.id)
|
||||
setInfo("Webhook paused.")
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Pause failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
} else {
|
||||
items.push({
|
||||
id: "resume",
|
||||
label: "Resume",
|
||||
icon: <Play className="size-4" />,
|
||||
dataAction: `webhook-${w.id}-resume`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
await resumeWebhook(arcadia, w.id)
|
||||
setInfo("Webhook resumed.")
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Resume failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
items.push({
|
||||
id: "regen-secret",
|
||||
label: "Regenerate secret",
|
||||
icon: <RotateCw className="size-4" />,
|
||||
dataAction: `webhook-${w.id}-regen-secret`,
|
||||
onSelect: async () => {
|
||||
try {
|
||||
const updated = await regenerateWebhookSecret(arcadia, w.id)
|
||||
if (updated.secret) {
|
||||
setRevealedSecret({ webhookId: updated.id, secret: updated.secret })
|
||||
}
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Regenerate failed.")
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
items.push({
|
||||
id: "delete",
|
||||
label: "Delete",
|
||||
icon: <Trash2 className="size-4" />,
|
||||
destructive: true,
|
||||
dataAction: `webhook-${w.id}-delete`,
|
||||
onSelect: () => setPendingDelete(w),
|
||||
})
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
function WebhookEditorDialog({
|
||||
state,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
state: EditorState
|
||||
onClose: () => void
|
||||
onSaved: (created?: Webhook) => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const open = state !== null
|
||||
const isEdit = state?.mode === "edit"
|
||||
const initial = isEdit ? state.webhook : null
|
||||
|
||||
const [url, setUrl] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [eventsText, setEventsText] = useState("")
|
||||
const [headersText, setHeadersText] = useState("")
|
||||
const [maxRetries, setMaxRetries] = useState("3")
|
||||
const [retryStrategy, setRetryStrategy] = useState<WebhookRetryStrategy>("exponential")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
if (initial) {
|
||||
setUrl(initial.url)
|
||||
setDescription(initial.description ?? "")
|
||||
setEventsText(initial.events.join("\n"))
|
||||
setHeadersText(
|
||||
Object.entries(initial.headers ?? {})
|
||||
.map(([k, v]) => `${k}: ${v}`)
|
||||
.join("\n"),
|
||||
)
|
||||
setMaxRetries(String(initial.max_retries))
|
||||
setRetryStrategy(initial.retry_strategy)
|
||||
} else {
|
||||
setUrl("")
|
||||
setDescription("")
|
||||
setEventsText("")
|
||||
setHeadersText("")
|
||||
setMaxRetries("3")
|
||||
setRetryStrategy("exponential")
|
||||
}
|
||||
}, [open, initial])
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
const events = eventsText
|
||||
.split(/\r?\n/)
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
const headers: Record<string, string> = {}
|
||||
for (const line of headersText.split(/\r?\n/)) {
|
||||
const idx = line.indexOf(":")
|
||||
if (idx <= 0) continue
|
||||
const k = line.slice(0, idx).trim()
|
||||
const v = line.slice(idx + 1).trim()
|
||||
if (k) headers[k] = v
|
||||
}
|
||||
const input: WebhookInput = {
|
||||
url,
|
||||
description: description || null,
|
||||
events,
|
||||
headers,
|
||||
max_retries: Math.max(0, Number(maxRetries) || 0),
|
||||
retry_strategy: retryStrategy,
|
||||
}
|
||||
if (isEdit && initial) {
|
||||
const updated = await updateWebhook(arcadia, initial.id, input)
|
||||
await onSaved(updated)
|
||||
} else {
|
||||
const created = await createWebhook(arcadia, input)
|
||||
await onSaved(created)
|
||||
}
|
||||
} catch (err) {
|
||||
onError(
|
||||
err instanceof ArcadiaError
|
||||
? err.message
|
||||
: err instanceof Error
|
||||
? err.message
|
||||
: "Save failed.",
|
||||
)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? "Edit webhook" : "New webhook"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEdit
|
||||
? "Update the destination and event filter."
|
||||
: "Arcadia POSTs JSON payloads to this URL when the listed events fire."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="webhook-url">URL</Label>
|
||||
<Input
|
||||
id="webhook-url"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://example.com/webhooks/arcadia"
|
||||
data-action="webhook-form-url"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="webhook-description">Description</Label>
|
||||
<Input
|
||||
id="webhook-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
data-action="webhook-form-description"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="webhook-events">Events (one per line, blank = all events)</Label>
|
||||
<Textarea
|
||||
id="webhook-events"
|
||||
rows={6}
|
||||
value={eventsText}
|
||||
onChange={(e) => setEventsText(e.target.value)}
|
||||
placeholder={COMMON_WEBHOOK_EVENTS.slice(0, 5).join("\n")}
|
||||
data-action="webhook-form-events"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{COMMON_WEBHOOK_EVENTS.map((ev) => {
|
||||
const has = eventsText
|
||||
.split(/\r?\n/)
|
||||
.some((l) => l.trim() === ev)
|
||||
return (
|
||||
<button
|
||||
key={ev}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEventsText((prev) => {
|
||||
const lines = prev.split(/\r?\n/).map((l) => l.trim()).filter(Boolean)
|
||||
if (has) return lines.filter((l) => l !== ev).join("\n")
|
||||
return [...lines, ev].join("\n")
|
||||
})
|
||||
}}
|
||||
data-action={`webhook-form-event-${ev}`}
|
||||
className={`rounded-full border px-2 py-0.5 text-xs font-medium transition-colors ${
|
||||
has
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{ev}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="webhook-headers">Custom headers (key: value, one per line)</Label>
|
||||
<Textarea
|
||||
id="webhook-headers"
|
||||
rows={3}
|
||||
value={headersText}
|
||||
onChange={(e) => setHeadersText(e.target.value)}
|
||||
placeholder="Authorization: Bearer xyz"
|
||||
data-action="webhook-form-headers"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="webhook-retries">Max retries</Label>
|
||||
<Input
|
||||
id="webhook-retries"
|
||||
type="number"
|
||||
min={0}
|
||||
value={maxRetries}
|
||||
onChange={(e) => setMaxRetries(e.target.value)}
|
||||
data-action="webhook-form-retries"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Retry strategy</Label>
|
||||
<Select
|
||||
value={retryStrategy}
|
||||
onValueChange={(v) => setRetryStrategy(v as WebhookRetryStrategy)}
|
||||
>
|
||||
<SelectTrigger data-action="webhook-form-retry-strategy">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="exponential">Exponential</SelectItem>
|
||||
<SelectItem value="linear">Linear</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving} data-action="webhook-form-cancel">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={saving || !url} data-action="webhook-form-save">
|
||||
{saving ? <RefreshCw className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />}
|
||||
{isEdit ? "Save" : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function DeliveriesDialog({
|
||||
webhook,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
webhook: Webhook | null
|
||||
onClose: () => void
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!webhook) return
|
||||
let mounted = true
|
||||
setLoading(true)
|
||||
listWebhookDeliveries(arcadia, webhook.id, { limit: 50 })
|
||||
.then((d) => mounted && setDeliveries(d))
|
||||
.catch((err) =>
|
||||
onError(err instanceof ArcadiaError ? err.message : "Failed to load deliveries."),
|
||||
)
|
||||
.finally(() => mounted && setLoading(false))
|
||||
return () => {
|
||||
mounted = false
|
||||
}
|
||||
}, [arcadia, webhook, onError])
|
||||
|
||||
if (!webhook) return null
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Recent deliveries</DialogTitle>
|
||||
<DialogDescription>
|
||||
<span className="font-mono text-xs">{webhook.url}</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
|
||||
</p>
|
||||
) : deliveries.length === 0 ? (
|
||||
<p className="py-6 text-center text-sm text-muted-foreground">
|
||||
No deliveries recorded yet.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col divide-y rounded-md border">
|
||||
{deliveries.map((d) => (
|
||||
<li key={d.id} className="flex items-start justify-between gap-3 px-3 py-2 text-sm">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={
|
||||
d.status === "delivered"
|
||||
? "default"
|
||||
: d.status === "failed"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
>
|
||||
{d.status}
|
||||
</Badge>
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
|
||||
{d.event_type}
|
||||
</code>
|
||||
{d.response_status ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
HTTP {d.response_status}
|
||||
</span>
|
||||
) : null}
|
||||
{d.response_time_ms != null ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{d.response_time_ms}ms
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<Clock className="mr-1 inline size-3" />
|
||||
attempt {d.attempt} ·{" "}
|
||||
{d.completed_at
|
||||
? new Date(d.completed_at).toLocaleString()
|
||||
: new Date(d.inserted_at).toLocaleString()}
|
||||
</span>
|
||||
{d.error_message ? (
|
||||
<span className="text-xs text-destructive">{d.error_message}</span>
|
||||
) : null}
|
||||
{d.next_retry_at ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
next retry {new Date(d.next_retry_at).toLocaleString()}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} data-action="webhook-deliveries-close">
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function RevealSecretDialog({
|
||||
reveal,
|
||||
onClose,
|
||||
}: {
|
||||
reveal: { webhookId: string; secret: string; isNew?: boolean } | null
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
useEffect(() => {
|
||||
if (!reveal) setCopied(false)
|
||||
}, [reveal])
|
||||
|
||||
if (!reveal) return null
|
||||
|
||||
const copy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(reveal.secret)
|
||||
setCopied(true)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<KeyRound className="size-5 text-amber-500" />
|
||||
{reveal.isNew ? "Webhook secret" : "New webhook secret"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<strong>This is the only time the secret will be shown.</strong> Copy it now — store it
|
||||
with your verifying code so you can validate the X-Signature header on incoming
|
||||
deliveries.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
|
||||
<code className="select-all break-all font-mono text-xs">{reveal.secret}</code>
|
||||
<Button size="sm" variant="outline" onClick={copy} data-action="webhook-secret-copy">
|
||||
{copied ? <CheckCircle2 className="size-3.5" /> : <Copy className="size-3.5" />}
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={onClose} data-action="webhook-secret-close">
|
||||
Done
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
|
||||
return arr.reduce<Record<string, number>>((acc, x) => {
|
||||
const k = key(x)
|
||||
acc[k] = (acc[k] ?? 0) + 1
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
Reference in New Issue
Block a user