mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-29 19:35:20 +02:00
feat(web): automations detail page (definition viewer + trigger manager)
Vertical slice at /dashboard/[id]/automations/[automation_id]. Branches in the orchestrator are: perms loading → skeleton, no-access → access denied panel, bad id → not-found, fetch loading → skeleton, fetch error → not-found, loaded → header + definition + triggers. Route: - page.tsx — server boundary; extracts both ids. - automation-detail-content.tsx — client orchestrator. Header: - automation-detail-header.tsx — back link, name, status badge, description, pause/resume + delete actions. Delete navigates back to the list via a new onDeleted hook on DeleteAutomationDialog so the list page (where the row just vanishes) stays unaffected. - automation-not-found.tsx — 404/403/NaN-id panel. We don't distinguish missing vs. forbidden in the UI. Definition (read-only in v1): - automation-definition-section.tsx — wrapper Card; renders goal + tags + execution defaults + inputs schema (if present) + plan. - plan-step-card.tsx — one step (when, output_as, retries, timeout, params JSON). - execution-summary.tsx — timeout / max_retries / backoff / concurrency + on_failure step count. - inputs-schema-preview.tsx — formatted JSON of inputs.schema; only rendered when the definition declares inputs. Triggers: - automation-triggers-section.tsx — wrapper Card, "Add via chat" CTA (creation is intent-driven, same philosophy as automations). - trigger-card.tsx — schedule + timezone + cron, last/next fire hints, static_inputs JSON, enable Switch and remove button. - delete-trigger-dialog.tsx — confirm + mutation atom. Shared: - lib/describe-cron.ts — moved out of automation-triggers-summary.tsx so both list and detail can describe schedules consistently (daily/weekdays/weekly/monthly/hourly, raw cron fallback). Loading: - automation-detail-loading.tsx — same shell as the loaded view so the layout doesn't jump on data arrival. RBAC: each interactive surface is independently gated (canUpdate/canDelete/canCreate) so the orchestrator stays thin and the component tree is self-documenting about what each action requires. Out of scope (later PRs): - Editing definition / trigger params (raw-JSON path) — PR5 - Run history — PR6
This commit is contained in:
CREDO23
parent
bc3c2fd515
commit
c0a9ea368f
15 changed files with 920 additions and 69 deletions
|
|
@ -0,0 +1,86 @@
|
|||
"use client";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
import { useAutomation } from "@/hooks/use-automation";
|
||||
import { useAutomationPermissions } from "../hooks/use-automation-permissions";
|
||||
import { AutomationDefinitionSection } from "./components/automation-definition-section";
|
||||
import { AutomationDetailHeader } from "./components/automation-detail-header";
|
||||
import { AutomationDetailLoading } from "./components/automation-detail-loading";
|
||||
import { AutomationNotFound } from "./components/automation-not-found";
|
||||
import { AutomationTriggersSection } from "./components/automation-triggers-section";
|
||||
|
||||
interface AutomationDetailContentProps {
|
||||
searchSpaceId: number;
|
||||
automationId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client orchestrator for one automation's detail view. Branches:
|
||||
* - permissions loading → skeleton
|
||||
* - no read permission → access denied panel
|
||||
* - bad id (NaN) → not-found panel
|
||||
* - detail fetching → skeleton
|
||||
* - detail error / null → not-found panel (we don't distinguish 404
|
||||
* from 403 in the UI)
|
||||
* - detail loaded → header + definition + triggers
|
||||
*
|
||||
* Each child component is gated independently on the relevant permission
|
||||
* so the orchestrator stays thin.
|
||||
*/
|
||||
export function AutomationDetailContent({
|
||||
searchSpaceId,
|
||||
automationId,
|
||||
}: AutomationDetailContentProps) {
|
||||
const perms = useAutomationPermissions();
|
||||
const validId = Number.isInteger(automationId) && automationId > 0;
|
||||
const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
|
||||
|
||||
if (perms.loading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (!perms.canRead) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
You don't have permission to view automations in this search space.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!validId) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} />;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <AutomationDetailLoading />;
|
||||
}
|
||||
|
||||
if (error || !automation) {
|
||||
return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutomationDetailHeader
|
||||
automation={automation}
|
||||
searchSpaceId={searchSpaceId}
|
||||
canUpdate={perms.canUpdate}
|
||||
canDelete={perms.canDelete}
|
||||
/>
|
||||
|
||||
<AutomationDefinitionSection definition={automation.definition} />
|
||||
|
||||
<AutomationTriggersSection
|
||||
triggers={automation.triggers}
|
||||
automationId={automation.id}
|
||||
searchSpaceId={searchSpaceId}
|
||||
canUpdate={perms.canUpdate}
|
||||
canDelete={perms.canDelete}
|
||||
canCreate={perms.canCreate}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
"use client";
|
||||
import { ListOrdered, Settings2, Tag, Target } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { AutomationDefinition } from "@/contracts/types/automation.types";
|
||||
import { ExecutionSummary } from "./execution-summary";
|
||||
import { InputsSchemaPreview } from "./inputs-schema-preview";
|
||||
import { PlanStepCard } from "./plan-step-card";
|
||||
|
||||
interface AutomationDefinitionSectionProps {
|
||||
definition: AutomationDefinition;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Definition card. Read-only in v1 — editing definitions happens via
|
||||
* chat (re-run create_automation with a refined intent) or, later, via
|
||||
* the raw-JSON path. Layout is top-down:
|
||||
* goal → tags → execution defaults → inputs schema (if any) → plan
|
||||
*
|
||||
* The schema_version is rendered as a small badge next to the section
|
||||
* title so it's discoverable but doesn't fight for attention.
|
||||
*/
|
||||
export function AutomationDefinitionSection({ definition }: AutomationDefinitionSectionProps) {
|
||||
const hasTags = definition.metadata.tags.length > 0;
|
||||
const hasInputs = !!definition.inputs;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-base font-semibold">Definition</CardTitle>
|
||||
<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">
|
||||
v{definition.schema_version}
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{definition.goal && (
|
||||
<Field icon={Target} label="Goal">
|
||||
<p className="text-sm text-foreground">{definition.goal}</p>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{hasTags && (
|
||||
<Field icon={Tag} label="Tags">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{definition.metadata.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field icon={Settings2} label="Execution defaults">
|
||||
<ExecutionSummary execution={definition.execution} />
|
||||
</Field>
|
||||
|
||||
{hasInputs && (
|
||||
<Field icon={Settings2} label="Inputs schema">
|
||||
{definition.inputs && <InputsSchemaPreview inputs={definition.inputs} />}
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field
|
||||
icon={ListOrdered}
|
||||
label={`Plan · ${definition.plan.length} step${definition.plan.length === 1 ? "" : "s"}`}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{definition.plan.map((step, idx) => (
|
||||
<PlanStepCard key={step.step_id} step={step} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
icon: Icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof Target;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||
<Icon className="h-3.5 w-3.5" aria-hidden />
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { ArrowLeft, Pause, Play, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useState } from "react";
|
||||
import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import type { Automation } from "@/contracts/types/automation.types";
|
||||
import { AutomationStatusBadge } from "../../components/automation-status-badge";
|
||||
import { DeleteAutomationDialog } from "../../components/delete-automation-dialog";
|
||||
|
||||
interface AutomationDetailHeaderProps {
|
||||
automation: Automation;
|
||||
searchSpaceId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Title bar for the detail page: back link, name, status badge,
|
||||
* description, and the two destructive-ish primary actions (pause /
|
||||
* resume + delete). Same mutation atoms as the list-row actions to
|
||||
* keep caches coherent.
|
||||
*
|
||||
* Archived automations hide the pause/resume toggle (we don't unarchive
|
||||
* here — that flow comes later if we need it).
|
||||
*/
|
||||
export function AutomationDetailHeader({
|
||||
automation,
|
||||
searchSpaceId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
}: AutomationDetailHeaderProps) {
|
||||
const router = useRouter();
|
||||
const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
|
||||
updateAutomationMutationAtom
|
||||
);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
|
||||
const canToggle = canUpdate && automation.status !== "archived";
|
||||
const nextStatus = automation.status === "active" ? "paused" : "active";
|
||||
const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
|
||||
const PauseIcon = automation.status === "active" ? Pause : Play;
|
||||
|
||||
const handleDeleted = useCallback(() => {
|
||||
router.push(`/dashboard/${searchSpaceId}/automations`);
|
||||
}, [router, searchSpaceId]);
|
||||
|
||||
async function handleTogglePause() {
|
||||
await updateAutomation({
|
||||
automationId: automation.id,
|
||||
patch: { status: nextStatus },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
|
||||
<Link
|
||||
href={`/dashboard/${searchSpaceId}/automations`}
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
|
||||
Back to automations
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<h1 className="text-xl md:text-2xl font-semibold text-foreground break-words">
|
||||
{automation.name}
|
||||
</h1>
|
||||
<AutomationStatusBadge status={automation.status} />
|
||||
</div>
|
||||
{automation.description && (
|
||||
<p className="text-sm text-muted-foreground max-w-3xl">{automation.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{canToggle && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleTogglePause}
|
||||
disabled={updating}
|
||||
>
|
||||
{updating ? (
|
||||
<Spinner size="xs" className="mr-2" />
|
||||
) : (
|
||||
<PauseIcon className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{pauseLabel}
|
||||
</Button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canDelete && (
|
||||
<DeleteAutomationDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={setDeleteOpen}
|
||||
automationId={automation.id}
|
||||
automationName={automation.name}
|
||||
searchSpaceId={searchSpaceId}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
/**
|
||||
* Skeleton for the detail page. Same shell as the loaded view (header +
|
||||
* two stacked cards) so the layout doesn't jump on data arrival.
|
||||
*/
|
||||
export function AutomationDetailLoading() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-7 w-64" />
|
||||
<Skeleton className="h-5 w-16 rounded-md" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-24" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
"use client";
|
||||
import { ArrowLeft, FileWarning } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface AutomationNotFoundProps {
|
||||
searchSpaceId: number;
|
||||
error?: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendered when the detail fetch fails (404 / 403 / network) or the id
|
||||
* is not a number. We don't distinguish "missing" from "forbidden" in the
|
||||
* UI on purpose — leaking that an id exists you can't read is worse than
|
||||
* a vague message.
|
||||
*/
|
||||
export function AutomationNotFound({ searchSpaceId, error }: AutomationNotFoundProps) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
|
||||
<FileWarning className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
|
||||
<h2 className="mt-3 text-base font-semibold text-foreground">Automation not found</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
|
||||
This automation doesn't exist or you don't have access to it.
|
||||
{error?.message ? ` (${error.message})` : null}
|
||||
</p>
|
||||
<Button asChild variant="outline" size="sm" className="mt-6">
|
||||
<Link href={`/dashboard/${searchSpaceId}/automations`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to automations
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
"use client";
|
||||
import { CalendarClock, MessageSquarePlus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { Trigger } from "@/contracts/types/automation.types";
|
||||
import { TriggerCard } from "./trigger-card";
|
||||
|
||||
interface AutomationTriggersSectionProps {
|
||||
triggers: Trigger[];
|
||||
automationId: number;
|
||||
searchSpaceId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
canCreate: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Triggers card. Lists each attached trigger with its own enable
|
||||
* toggle and remove button. Adding a new trigger is intent-driven (via
|
||||
* chat) for v1 — same philosophy as creating an automation, so the
|
||||
* empty/add CTA links to a new chat rather than opening a form.
|
||||
*/
|
||||
export function AutomationTriggersSection({
|
||||
triggers,
|
||||
automationId,
|
||||
searchSpaceId,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
canCreate,
|
||||
}: AutomationTriggersSectionProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-base font-semibold">Triggers</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
When this automation fires. v1 supports scheduled triggers only.
|
||||
</p>
|
||||
</div>
|
||||
{canCreate && (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
Add via chat
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{triggers.length === 0 ? (
|
||||
<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
|
||||
<CalendarClock className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
|
||||
<p className="mt-2 text-sm font-medium text-foreground">No triggers attached</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
This automation can still be invoked, but nothing will fire it on its own.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{triggers.map((trigger) => (
|
||||
<TriggerCard
|
||||
key={trigger.id}
|
||||
trigger={trigger}
|
||||
automationId={automationId}
|
||||
canUpdate={canUpdate}
|
||||
canDelete={canDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { removeTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
|
||||
interface DeleteTriggerDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
automationId: number;
|
||||
triggerId: number;
|
||||
triggerLabel: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm + detach one trigger from its automation. The automation itself
|
||||
* is untouched; only this trigger row is removed. The mutation atom
|
||||
* invalidates the parent automation detail so the page rerenders.
|
||||
*/
|
||||
export function DeleteTriggerDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
automationId,
|
||||
triggerId,
|
||||
triggerLabel,
|
||||
}: DeleteTriggerDialogProps) {
|
||||
const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
async function handleConfirm() {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await removeTrigger({ automationId, triggerId });
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove this trigger?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<span className="font-medium text-foreground">{triggerLabel}</span> will be detached.
|
||||
The automation itself stays, but it won't fire on this trigger anymore.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirm}
|
||||
disabled={submitting}
|
||||
className="bg-destructive text-white hover:bg-destructive/90"
|
||||
>
|
||||
{submitting ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Spinner size="xs" />
|
||||
Removing…
|
||||
</span>
|
||||
) : (
|
||||
"Remove"
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
import type { Execution } from "@/contracts/types/automation.types";
|
||||
|
||||
interface ExecutionSummaryProps {
|
||||
execution: Execution;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact view of an automation's execution defaults (wall-clock cap,
|
||||
* retries, backoff, concurrency, on_failure presence). Per-step overrides
|
||||
* are shown inside each PlanStepCard, not here.
|
||||
*/
|
||||
export function ExecutionSummary({ execution }: ExecutionSummaryProps) {
|
||||
return (
|
||||
<dl className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-xs">
|
||||
<Item label="Timeout" value={`${execution.timeout_seconds}s`} />
|
||||
<Item label="Max retries" value={String(execution.max_retries)} />
|
||||
<Item label="Retry backoff" value={execution.retry_backoff} />
|
||||
<Item label="Concurrency" value={execution.concurrency} />
|
||||
{execution.on_failure.length > 0 && (
|
||||
<Item
|
||||
label="On failure"
|
||||
value={`${execution.on_failure.length} step${execution.on_failure.length === 1 ? "" : "s"}`}
|
||||
/>
|
||||
)}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
function Item({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<dt className="text-muted-foreground">{label}</dt>
|
||||
<dd className="text-foreground font-medium truncate">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
"use client";
|
||||
import type { Inputs } from "@/contracts/types/automation.types";
|
||||
|
||||
interface InputsSchemaPreviewProps {
|
||||
inputs: Inputs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read-only JSON preview of an automation's accepted-inputs schema.
|
||||
* Most automations don't define inputs (defaults are baked into the
|
||||
* trigger's static_inputs), so the parent skips rendering this card
|
||||
* when ``inputs`` is null.
|
||||
*/
|
||||
export function InputsSchemaPreview({ inputs }: InputsSchemaPreviewProps) {
|
||||
return (
|
||||
<pre className="rounded-md bg-muted/40 px-3 py-2 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-72">
|
||||
{JSON.stringify(inputs.schema, null, 2)}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
"use client";
|
||||
import { ArrowRightCircle, GitCommitHorizontal } from "lucide-react";
|
||||
import type { PlanStep } from "@/contracts/types/automation.types";
|
||||
|
||||
interface PlanStepCardProps {
|
||||
step: PlanStep;
|
||||
index: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read-only view of one plan step. Renders the step_id + action prominently,
|
||||
* then a definition list of the per-step knobs, and finally the params as
|
||||
* formatted JSON. Editable mode is out of scope here — definition edits live
|
||||
* on the (future) raw-JSON path.
|
||||
*/
|
||||
export function PlanStepCard({ step, index }: PlanStepCardProps) {
|
||||
return (
|
||||
<div className="rounded-md border border-border/60 bg-background overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-foreground">{step.step_id}</span>
|
||||
<ArrowRightCircle className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
|
||||
<span className="text-xs font-mono text-muted-foreground">{step.action}</span>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 space-y-3">
|
||||
{(step.when ||
|
||||
step.output_as ||
|
||||
step.max_retries != null ||
|
||||
step.timeout_seconds != null) && (
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
|
||||
{step.when && (
|
||||
<DefRow label="When" value={<code className="font-mono">{step.when}</code>} />
|
||||
)}
|
||||
{step.output_as && (
|
||||
<DefRow
|
||||
label="Output as"
|
||||
value={<code className="font-mono">{step.output_as}</code>}
|
||||
/>
|
||||
)}
|
||||
{step.max_retries != null && (
|
||||
<DefRow label="Max retries" value={String(step.max_retries)} />
|
||||
)}
|
||||
{step.timeout_seconds != null && (
|
||||
<DefRow label="Timeout" value={`${step.timeout_seconds}s`} />
|
||||
)}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground mb-1.5">
|
||||
<GitCommitHorizontal className="h-3.5 w-3.5" aria-hidden />
|
||||
Params
|
||||
</div>
|
||||
<pre className="rounded-md bg-muted/40 px-3 py-2 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words">
|
||||
{JSON.stringify(step.params, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DefRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-baseline gap-2 min-w-0">
|
||||
<dt className="text-muted-foreground shrink-0">{label}:</dt>
|
||||
<dd className="text-foreground min-w-0 truncate">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
"use client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { CalendarClock, Clock, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import type { Trigger } from "@/contracts/types/automation.types";
|
||||
import { formatRelativeDate } from "@/lib/format-date";
|
||||
import { describeCron } from "../../lib/describe-cron";
|
||||
import { DeleteTriggerDialog } from "./delete-trigger-dialog";
|
||||
|
||||
interface TriggerCardProps {
|
||||
trigger: Trigger;
|
||||
automationId: number;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* One trigger row in the Triggers section of the detail page. Renders:
|
||||
* - type icon + human-readable schedule + timezone
|
||||
* - last_fired_at / next_fire_at hints
|
||||
* - static_inputs as formatted JSON (when present)
|
||||
* - enable toggle + remove button (each gated independently)
|
||||
*
|
||||
* Editing params (cron, timezone, static_inputs) lives behind the future
|
||||
* raw-JSON path; this card stays read-only-except-for-toggle for v1.
|
||||
*/
|
||||
export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: TriggerCardProps) {
|
||||
const { mutateAsync: updateTrigger, isPending: updating } =
|
||||
useAtomValue(updateTriggerMutationAtom);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
|
||||
const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
|
||||
const tz = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
|
||||
const human = cron ? describeCron(cron) : trigger.type;
|
||||
const triggerLabel = cron ? `${human} · ${tz}` : trigger.type;
|
||||
const hasStaticInputs = Object.keys(trigger.static_inputs ?? {}).length > 0;
|
||||
|
||||
async function handleToggle(checked: boolean) {
|
||||
await updateTrigger({
|
||||
automationId,
|
||||
triggerId: trigger.id,
|
||||
patch: { enabled: checked },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md border border-border/60 bg-background overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-medium text-foreground">{human}</span>
|
||||
<span className="text-muted-foreground">· {tz}</span>
|
||||
</div>
|
||||
{cron && <code className="text-xs font-mono text-muted-foreground">{cron}</code>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{canUpdate && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{trigger.enabled ? "Enabled" : "Off"}
|
||||
</span>
|
||||
<Switch
|
||||
checked={trigger.enabled}
|
||||
onCheckedChange={handleToggle}
|
||||
disabled={updating}
|
||||
aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
aria-label="Remove trigger"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 space-y-3 text-xs">
|
||||
{(trigger.last_fired_at || trigger.next_fire_at) && (
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5">
|
||||
{trigger.next_fire_at && (
|
||||
<TimeRow label="Next fire" iso={trigger.next_fire_at} highlight={trigger.enabled} />
|
||||
)}
|
||||
{trigger.last_fired_at && <TimeRow label="Last fired" iso={trigger.last_fired_at} />}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
{hasStaticInputs && (
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-1">Static inputs</div>
|
||||
<pre className="rounded-md bg-muted/40 px-3 py-2 font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words">
|
||||
{JSON.stringify(trigger.static_inputs, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canDelete && (
|
||||
<DeleteTriggerDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={setDeleteOpen}
|
||||
automationId={automationId}
|
||||
triggerId={trigger.id}
|
||||
triggerLabel={triggerLabel}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TimeRow({
|
||||
label,
|
||||
iso,
|
||||
highlight = false,
|
||||
}: {
|
||||
label: string;
|
||||
iso: string;
|
||||
highlight?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-baseline gap-2 min-w-0">
|
||||
<dt className="text-muted-foreground shrink-0 inline-flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" aria-hidden />
|
||||
{label}:
|
||||
</dt>
|
||||
<dd
|
||||
className={
|
||||
highlight
|
||||
? "text-foreground font-medium min-w-0 truncate"
|
||||
: "text-muted-foreground min-w-0 truncate"
|
||||
}
|
||||
>
|
||||
{formatRelativeDate(iso)}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { AutomationDetailContent } from "./automation-detail-content";
|
||||
|
||||
export default async function AutomationDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ search_space_id: string; automation_id: string }>;
|
||||
}) {
|
||||
const { search_space_id, automation_id } = await params;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<AutomationDetailContent
|
||||
searchSpaceId={Number(search_space_id)}
|
||||
automationId={Number(automation_id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
import { CalendarClock, Pause } from "lucide-react";
|
||||
import type { Trigger } from "@/contracts/types/automation.types";
|
||||
import { describeCron } from "../lib/describe-cron";
|
||||
|
||||
interface AutomationTriggersSummaryProps {
|
||||
triggers: Trigger[];
|
||||
|
|
@ -49,72 +50,3 @@ export function AutomationTriggersSummary({ triggers }: AutomationTriggersSummar
|
|||
|
||||
return <span className="text-xs text-muted-foreground capitalize">{trigger.type}</span>;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Minimal cron describer for the common 5-field patterns SurfSense automations
|
||||
// surface today. Falls back to the raw expression when unrecognized so the user
|
||||
// still sees something honest instead of a guess.
|
||||
//
|
||||
// Kept inline (not a library) because:
|
||||
// - v1 only needs to recognize a small set of patterns produced by the
|
||||
// drafter LLM (hourly/daily/weekdays/weekly/monthly).
|
||||
// - All current consumers live in this slice. If reuse grows, lift to
|
||||
// ``lib/cron-describe.ts``.
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
function describeCron(cron: string): string {
|
||||
const parts = cron.trim().split(/\s+/);
|
||||
if (parts.length !== 5) return cron;
|
||||
|
||||
const [minute, hour, dom, month, dow] = parts;
|
||||
|
||||
// Daily at H:MM (matches the very common "0 9 * * *")
|
||||
if (month === "*" && dom === "*" && dow === "*" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
|
||||
return `Daily at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Weekdays at H:MM ("0 9 * * 1-5")
|
||||
if (month === "*" && dom === "*" && dow === "1-5" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
|
||||
return `Mon–Fri at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Specific weekday(s) ("0 9 * * 1" or "0 9 * * 1,3,5")
|
||||
if (
|
||||
month === "*" &&
|
||||
dom === "*" &&
|
||||
/^\d+$/.test(minute) &&
|
||||
/^\d+$/.test(hour) &&
|
||||
/^[\d,]+$/.test(dow)
|
||||
) {
|
||||
const days = dow
|
||||
.split(",")
|
||||
.map((d) => DAY_NAMES[Number(d) % 7])
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
if (days) return `${days} at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Monthly on day N ("0 9 1 * *")
|
||||
if (
|
||||
month === "*" &&
|
||||
dow === "*" &&
|
||||
/^\d+$/.test(dom) &&
|
||||
/^\d+$/.test(hour) &&
|
||||
/^\d+$/.test(minute)
|
||||
) {
|
||||
return `Day ${dom} of each month at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Hourly ("0 * * * *")
|
||||
if (month === "*" && dom === "*" && dow === "*" && hour === "*" && /^\d+$/.test(minute)) {
|
||||
return minute === "0" ? "Every hour" : `Every hour at :${minute.padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
return cron;
|
||||
}
|
||||
|
||||
function formatTime(hour: string, minute: string): string {
|
||||
return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ interface DeleteAutomationDialogProps {
|
|||
automationId: number;
|
||||
automationName: string;
|
||||
searchSpaceId: number;
|
||||
/**
|
||||
* Fired after a successful delete, before the dialog closes. The detail
|
||||
* page uses this to navigate back to the list (the row simply vanishes
|
||||
* on the list page so no callback is needed there).
|
||||
*/
|
||||
onDeleted?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -33,6 +39,7 @@ export function DeleteAutomationDialog({
|
|||
automationId,
|
||||
automationName,
|
||||
searchSpaceId,
|
||||
onDeleted,
|
||||
}: DeleteAutomationDialogProps) {
|
||||
const { mutateAsync: deleteAutomation } = useAtomValue(deleteAutomationMutationAtom);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
|
@ -41,6 +48,7 @@ export function DeleteAutomationDialog({
|
|||
setSubmitting(true);
|
||||
try {
|
||||
await deleteAutomation({ automationId, searchSpaceId });
|
||||
onDeleted?.();
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* Minimal cron describer for the 5-field patterns the SurfSense drafter LLM
|
||||
* actually produces (daily, weekdays, weekly, monthly, hourly). Falls back
|
||||
* to the raw expression when unrecognized so the user still sees something
|
||||
* honest instead of a guess.
|
||||
*
|
||||
* Lives in the automations slice because it's a UI display concern with no
|
||||
* consumers outside it. If reuse grows, lift to ``lib/cron-describe.ts``.
|
||||
*/
|
||||
|
||||
const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
export function describeCron(cron: string): string {
|
||||
const parts = cron.trim().split(/\s+/);
|
||||
if (parts.length !== 5) return cron;
|
||||
|
||||
const [minute, hour, dom, month, dow] = parts;
|
||||
|
||||
// Daily at H:MM ("0 9 * * *")
|
||||
if (month === "*" && dom === "*" && dow === "*" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
|
||||
return `Daily at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Weekdays at H:MM ("0 9 * * 1-5")
|
||||
if (month === "*" && dom === "*" && dow === "1-5" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
|
||||
return `Mon–Fri at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Specific weekday(s) ("0 9 * * 1" or "0 9 * * 1,3,5")
|
||||
if (
|
||||
month === "*" &&
|
||||
dom === "*" &&
|
||||
/^\d+$/.test(minute) &&
|
||||
/^\d+$/.test(hour) &&
|
||||
/^[\d,]+$/.test(dow)
|
||||
) {
|
||||
const days = dow
|
||||
.split(",")
|
||||
.map((d) => DAY_NAMES[Number(d) % 7])
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
if (days) return `${days} at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Monthly on day N ("0 9 1 * *")
|
||||
if (
|
||||
month === "*" &&
|
||||
dow === "*" &&
|
||||
/^\d+$/.test(dom) &&
|
||||
/^\d+$/.test(hour) &&
|
||||
/^\d+$/.test(minute)
|
||||
) {
|
||||
return `Day ${dom} of each month at ${formatTime(hour, minute)}`;
|
||||
}
|
||||
|
||||
// Hourly ("0 * * * *")
|
||||
if (month === "*" && dom === "*" && dow === "*" && hour === "*" && /^\d+$/.test(minute)) {
|
||||
return minute === "0" ? "Every hour" : `Every hour at :${minute.padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
return cron;
|
||||
}
|
||||
|
||||
function formatTime(hour: string, minute: string): string {
|
||||
return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue