mirror of
https://github.com/open-gitagent/langship.sh.git
synced 2026-08-03 07:21:04 +02:00
feat: add agents management and enhance inspector with typed forms
- Introduced a new "Agents" section in the app sidebar for better navigation. - Enhanced the Inspector component to support typed forms for various node types, improving user experience when configuring nodes. - Created a new NodeForm component to handle specific forms for different node types, including Trigger, Build, Test, Eval, Policy, Approval, Deploy, Promote, and Rollback. - Updated the API layer to manage agents, including listing, creating, deleting, and testing agent authentication. - Modified the node catalog to include new node types and their respective configurations. - Adjusted the Next.js configuration and Nginx settings to reflect changes in API endpoint ports.
This commit is contained in:
patel-lyzr
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, Eye, EyeOff, KeyRound, Save } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
export default function NewAgentPage() {
|
||||
const router = useRouter();
|
||||
const [repoUrl, setRepoUrl] = useState("");
|
||||
const [pat, setPat] = useState("");
|
||||
const [showPat, setShowPat] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
async function onSave() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const url = repoUrl.trim();
|
||||
if (!url) throw new Error("Repository URL is required");
|
||||
await api.createAgent({ repoUrl: url, pat: pat.trim() || undefined });
|
||||
router.push("/agents");
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "save failed");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-2xl space-y-6 p-6">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/agents">
|
||||
<ArrowLeft />
|
||||
Back
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Add agent</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Link a git repository that contains your agent code. The PAT is
|
||||
stored encrypted server-side and used only for git operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Repository</CardTitle>
|
||||
<CardDescription>
|
||||
HTTPS or SSH URL — public repos can leave the PAT blank.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="repoUrl">Git URL</Label>
|
||||
<Input
|
||||
id="repoUrl"
|
||||
value={repoUrl}
|
||||
onChange={(e) => setRepoUrl(e.target.value)}
|
||||
placeholder="https://github.com/org/agent-repo.git"
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Name is auto-derived from the repo path (e.g.{" "}
|
||||
<code className="font-mono">org/repo</code>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pat" className="flex items-center gap-1">
|
||||
<KeyRound className="size-3.5" />
|
||||
Personal access token (optional)
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="pat"
|
||||
type={showPat ? "text" : "password"}
|
||||
value={pat}
|
||||
onChange={(e) => setPat(e.target.value)}
|
||||
placeholder="ghp_… or glpat_…"
|
||||
spellCheck={false}
|
||||
autoComplete="new-password"
|
||||
className="pr-10 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPat((v) => !v)}
|
||||
className="absolute inset-y-0 right-2 flex items-center text-muted-foreground hover:text-foreground"
|
||||
aria-label={showPat ? "Hide token" : "Show token"}
|
||||
>
|
||||
{showPat ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Required for private repos. Scope:{" "}
|
||||
<code className="font-mono">repo</code> read access is enough.
|
||||
Never returned by the API after save.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/agents">Cancel</Link>
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={saving || !repoUrl.trim()}>
|
||||
<Save />
|
||||
{saving ? "Saving…" : "Add agent"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Bot,
|
||||
ExternalLink,
|
||||
KeyRound,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { api, type Agent } from "@/lib/api";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
|
||||
export default function AgentsPage() {
|
||||
const [agents, setAgents] = useState<Agent[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const list = await api.listAgents();
|
||||
list.sort((a, b) => (b.updatedAt || "").localeCompare(a.updatedAt || ""));
|
||||
setAgents(list);
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "failed to load");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
async function onDelete(id: string) {
|
||||
if (!confirm("Remove this agent?")) return;
|
||||
try {
|
||||
await api.deleteAgent(id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
alert(e instanceof Error ? e.message : "delete failed");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-6">
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Agents</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Agent repositories Langship watches and deploys. Add a git URL — we
|
||||
track the ref and trigger pipelines on push.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={load}>
|
||||
<RefreshCw />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button size="sm" asChild>
|
||||
<Link href="/agents/new">
|
||||
<Plus />
|
||||
Add agent
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Card className="border-destructive/40">
|
||||
<CardContent className="pt-6 text-sm text-destructive">{error}</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{agents === null ? (
|
||||
<SkeletonGrid />
|
||||
) : agents.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{agents.map((a) => (
|
||||
<Link
|
||||
key={a.id}
|
||||
href={`/agents/view/?id=${encodeURIComponent(a.id)}`}
|
||||
className="group block"
|
||||
>
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex items-center gap-2">
|
||||
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
||||
<Bot className="size-4" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="truncate">{a.name}</CardTitle>
|
||||
<CardDescription className="mt-0.5 truncate text-[11px]">
|
||||
{a.ref || "main"}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
{a.hasPat && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<KeyRound className="size-3" />
|
||||
PAT
|
||||
</Badge>
|
||||
)}
|
||||
{a.webhookInstalled && (
|
||||
<Badge variant="success">webhook</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-1 truncate text-xs text-muted-foreground"
|
||||
title={a.repoUrl}
|
||||
>
|
||||
<ExternalLink className="size-3 shrink-0" />
|
||||
<span className="truncate">{a.repoUrl}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>added {formatDate(a.createdAt)}</span>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onDelete(a.id);
|
||||
}}
|
||||
aria-label="Remove agent"
|
||||
className="opacity-0 transition-opacity group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkeletonGrid() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader>
|
||||
<div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-3 w-1/3 animate-pulse rounded bg-muted" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-3 w-2/3 animate-pulse rounded bg-muted" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center gap-3 py-16 text-center">
|
||||
<div className="rounded-full bg-muted p-3">
|
||||
<Bot className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">No agents yet</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add a git repository containing your agent code.
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" asChild>
|
||||
<Link href="/agents/new">Add your first agent</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,604 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
ExternalLink,
|
||||
Github,
|
||||
KeyRound,
|
||||
Play,
|
||||
Plus,
|
||||
Trash2,
|
||||
Webhook,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
api,
|
||||
type Agent,
|
||||
type AuthStatus,
|
||||
type FlowSummary,
|
||||
type Run,
|
||||
type ServerConfig,
|
||||
} from "@/lib/api";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
|
||||
export default function AgentDetailPage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="p-6 text-sm text-muted-foreground">Loading…</div>}>
|
||||
<AgentDetail />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentDetail() {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const id = params.get("id") ?? "";
|
||||
|
||||
const [agent, setAgent] = useState<Agent | null>(null);
|
||||
const [config, setConfig] = useState<ServerConfig | null>(null);
|
||||
const [pipelines, setPipelines] = useState<FlowSummary[]>([]);
|
||||
const [runs, setRuns] = useState<Run[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState<string | null>(null); // which action is in flight
|
||||
const [showPipelinePicker, setShowPipelinePicker] = useState(false);
|
||||
|
||||
async function load() {
|
||||
if (!id) return;
|
||||
try {
|
||||
const [a, cfg, allPipes] = await Promise.all([
|
||||
api.getAgent(id),
|
||||
api.getConfig().catch(() => null),
|
||||
api.listFlows().catch(() => []),
|
||||
]);
|
||||
setAgent(a);
|
||||
setConfig(cfg);
|
||||
setPipelines(allPipes);
|
||||
// Pull recent runs across all attached pipelines.
|
||||
if (a.attachedPipelines?.length) {
|
||||
const lists = await Promise.all(
|
||||
a.attachedPipelines.map((pid) =>
|
||||
api.listRuns({ pipelineId: pid, limit: 5 }).catch(() => [])
|
||||
)
|
||||
);
|
||||
const merged = lists.flat();
|
||||
merged.sort((x, y) => (y.startedAt || "").localeCompare(x.startedAt || ""));
|
||||
setRuns(merged.slice(0, 10));
|
||||
} else {
|
||||
setRuns([]);
|
||||
}
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "load failed");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
async function withBusy<T>(label: string, fn: () => Promise<T>) {
|
||||
setBusy(label);
|
||||
setError(null);
|
||||
try {
|
||||
return await fn();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : `${label} failed`);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function onTrigger() {
|
||||
await withBusy("trigger", async () => {
|
||||
const res = await api.triggerAgent(id);
|
||||
if (res.executionIds?.length) {
|
||||
router.push(
|
||||
`/executions/view/?id=${encodeURIComponent(res.executionIds[0])}`
|
||||
);
|
||||
} else {
|
||||
await load();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function onTestAuth() {
|
||||
await withBusy("test-auth", async () => {
|
||||
await api.testAgentAuth(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onInstallWebhook() {
|
||||
await withBusy("webhook-install", async () => {
|
||||
await api.installAgentWebhook(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onUninstallWebhook() {
|
||||
if (!confirm("Uninstall the GitHub webhook for this agent?")) return;
|
||||
await withBusy("webhook-uninstall", async () => {
|
||||
await api.uninstallAgentWebhook(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onAttachPipeline(pipelineId: string) {
|
||||
await withBusy("attach", async () => {
|
||||
await api.attachPipeline(id, pipelineId);
|
||||
setShowPipelinePicker(false);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onDetachPipeline(pipelineId: string) {
|
||||
if (!confirm("Detach this pipeline from the agent?")) return;
|
||||
await withBusy("detach", async () => {
|
||||
await api.detachPipeline(id, pipelineId);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onDeleteAgent() {
|
||||
if (!confirm("Delete this agent? Webhook will be removed too.")) return;
|
||||
await withBusy("delete", async () => {
|
||||
await api.deleteAgent(id);
|
||||
router.push("/agents");
|
||||
});
|
||||
}
|
||||
|
||||
if (!id) {
|
||||
return (
|
||||
<div className="p-6 text-sm text-muted-foreground">
|
||||
Missing <code>id</code> query param.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!agent) {
|
||||
return (
|
||||
<div className="p-6 space-y-3">
|
||||
{error ? (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Loading agent…</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const lastRun = runs[0];
|
||||
const attachedPipelineDetails = (agent.attachedPipelines ?? [])
|
||||
.map((pid) => pipelines.find((p) => p.id === pid))
|
||||
.filter((p): p is FlowSummary => Boolean(p));
|
||||
const attachable = pipelines.filter(
|
||||
(p) => !agent.attachedPipelines?.includes(p.id)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/agents">
|
||||
<ArrowLeft />
|
||||
Back
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">{agent.name}</h1>
|
||||
<p className="mt-1 font-mono text-xs text-muted-foreground">{agent.id}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={onDeleteAgent}
|
||||
disabled={busy === "delete"}
|
||||
>
|
||||
<Trash2 />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Card className="border-destructive/40">
|
||||
<CardContent className="pt-6 text-sm text-destructive">{error}</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Overview ---------------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle>Overview</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={agent.repoUrl} target="_blank" rel="noreferrer">
|
||||
<Github />
|
||||
Repository
|
||||
</a>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onTrigger}
|
||||
disabled={
|
||||
busy === "trigger" ||
|
||||
!config?.orchestratorEnabled ||
|
||||
!agent.attachedPipelines?.length
|
||||
}
|
||||
>
|
||||
<Play />
|
||||
{busy === "trigger" ? "Triggering…" : "Trigger run"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
<Field label="Repository">
|
||||
<div className="flex items-center gap-2">
|
||||
<Github className="size-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{agent.name}</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-1.5">
|
||||
<WebhookBadge agent={agent} />
|
||||
<AuthBadge status={agent.authStatus ?? "untested"} />
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Last run">
|
||||
{lastRun ? (
|
||||
<Link
|
||||
href={`/executions/view/?id=${encodeURIComponent(lastRun.id)}`}
|
||||
className="text-sm hover:underline"
|
||||
>
|
||||
<RunStatus status={lastRun.status} />
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||
{formatDate(lastRun.startedAt)}
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">No runs yet.</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Pipelines">
|
||||
{attachedPipelineDetails.length === 0 ? (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
None attached.{" "}
|
||||
<Link href="/flows/new" className="underline hover:text-foreground">
|
||||
Create one
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm">
|
||||
{attachedPipelineDetails.length} attached
|
||||
</span>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{agent.attachedPipelines?.length ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Pushes to{" "}
|
||||
<code className="font-mono text-xs">{agent.name}</code> route through
|
||||
this agent’s pipelines (matched by branch).
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{agent.webhookUrl && (
|
||||
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Webhook className="size-3.5" />
|
||||
<code className="break-all font-mono">{agent.webhookUrl}</code>
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{/* Repo / webhook -------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Repo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<div className="font-mono text-sm">{agent.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Token{" "}
|
||||
{agent.hasPat ? (
|
||||
<span className="font-mono">********</span>
|
||||
) : (
|
||||
<span>not set</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Auth:</span>
|
||||
<AuthBadge status={agent.authStatus ?? "untested"} />
|
||||
{agent.authCheckedAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
· {formatDate(agent.authCheckedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Webhook:</span>
|
||||
<WebhookBadge agent={agent} />
|
||||
{agent.webhookInstalledAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
· {formatDate(agent.webhookInstalledAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{agent.webhookUrl && (
|
||||
<p className="break-all rounded-md border bg-muted/30 p-2 font-mono text-[11px]">
|
||||
{agent.webhookUrl}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!config?.webhooksAvailable && !agent.webhookInstalled && (
|
||||
<p className="rounded-md border border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-400">
|
||||
FLOW_PUBLIC_URL is not configured on the server. Set it (e.g. to
|
||||
a <code className="font-mono">cloudflared</code> tunnel) to install
|
||||
webhooks.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onTestAuth}
|
||||
disabled={!agent.hasPat || busy === "test-auth"}
|
||||
>
|
||||
{busy === "test-auth" ? "Testing…" : "Test auth"}
|
||||
</Button>
|
||||
{agent.webhookInstalled ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onUninstallWebhook}
|
||||
disabled={busy === "webhook-uninstall"}
|
||||
>
|
||||
{busy === "webhook-uninstall" ? "Removing…" : "Uninstall webhook"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onInstallWebhook}
|
||||
disabled={
|
||||
!agent.hasPat ||
|
||||
!config?.webhooksAvailable ||
|
||||
busy === "webhook-install"
|
||||
}
|
||||
>
|
||||
<Webhook />
|
||||
{busy === "webhook-install" ? "Installing…" : "Install webhook"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pipelines ----------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>Pipelines</CardTitle>
|
||||
{attachable.length > 0 ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setShowPipelinePicker((v) => !v)}
|
||||
>
|
||||
<Plus />
|
||||
Add pipeline
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" variant="ghost" disabled>
|
||||
No more to add
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{attachedPipelineDetails.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No pipelines attached. Click “Add pipeline” to bind one
|
||||
(or create one in{" "}
|
||||
<Link href="/flows/new" className="underline">
|
||||
/flows/new
|
||||
</Link>
|
||||
).
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-1.5">
|
||||
{attachedPipelineDetails.map((p) => (
|
||||
<li
|
||||
key={p.id}
|
||||
className="flex items-center justify-between gap-2 rounded-md border bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
href={`/flows/view/?id=${encodeURIComponent(p.id)}`}
|
||||
className="truncate text-sm font-medium hover:underline"
|
||||
>
|
||||
{p.name || "Untitled"}
|
||||
</Link>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{p.nodeCount} nodes · {formatDate(p.updatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Detach pipeline"
|
||||
onClick={() => onDetachPipeline(p.id)}
|
||||
>
|
||||
<XCircle className="size-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{showPipelinePicker && attachable.length > 0 && (
|
||||
<div className="rounded-md border bg-background p-2">
|
||||
<div className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Attach a pipeline
|
||||
</div>
|
||||
<ul className="space-y-1">
|
||||
{attachable.map((p) => (
|
||||
<li key={p.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAttachPipeline(p.id)}
|
||||
disabled={busy === "attach"}
|
||||
className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
|
||||
>
|
||||
<span className="truncate">{p.name || "Untitled"}</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{p.nodeCount} nodes
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent runs ------------------------------------------------------ */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>Recent runs</CardTitle>
|
||||
{runs.length > 0 && (
|
||||
<Link
|
||||
href="/executions/view"
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
View all →
|
||||
</Link>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{runs.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No runs yet — trigger one from the Overview block above.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{runs.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between py-2">
|
||||
<Link
|
||||
href={`/executions/view/?id=${encodeURIComponent(r.id)}`}
|
||||
className="min-w-0 flex-1"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RunStatus status={r.status} />
|
||||
<span className="truncate font-mono text-xs">{r.id}</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{r.pipelineName || r.pipelineId} ·{" "}
|
||||
{formatDate(r.startedAt)}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthBadge({ status }: { status: AuthStatus }) {
|
||||
if (status === "ok") {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />
|
||||
auth ok
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (status === "failed") {
|
||||
return (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="size-3" />
|
||||
auth failed
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return <Badge variant="outline">auth untested</Badge>;
|
||||
}
|
||||
|
||||
function WebhookBadge({ agent }: { agent: Agent }) {
|
||||
if (agent.webhookInstalled) {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<Webhook className="size-3" />
|
||||
webhook installed
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Webhook className="size-3" />
|
||||
no webhook
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function RunStatus({ status }: { status: string }) {
|
||||
const s = status.toLowerCase();
|
||||
if (s === "success" || s === "completed") {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />
|
||||
{status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (s === "failed" || s === "error") {
|
||||
return (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="size-3" />
|
||||
{status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
|
||||
// Avoid unused-import lint when the symbol is referenced only by type.
|
||||
void KeyRound;
|
||||
void ExternalLink;
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
BookOpen,
|
||||
ExternalLink,
|
||||
Github,
|
||||
Bot,
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
@@ -57,6 +58,12 @@ const primary: NavItem[] = [
|
||||
icon: Activity,
|
||||
match: (p) => p.startsWith("/executions"),
|
||||
},
|
||||
{
|
||||
title: "Agents",
|
||||
href: "/agents",
|
||||
icon: Bot,
|
||||
match: (p) => p.startsWith("/agents"),
|
||||
},
|
||||
];
|
||||
|
||||
const docs = [
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { lookup } from "@/lib/node-catalog";
|
||||
import type { PipelineNode } from "@/lib/pipeline-graph";
|
||||
import { NodeForm, hasTypedForm } from "./node-form";
|
||||
|
||||
interface InspectorProps {
|
||||
node: PipelineNode | null;
|
||||
@@ -21,14 +22,22 @@ export function Inspector({ node, onChange, onDelete, onClose }: InspectorProps)
|
||||
const [name, setName] = useState("");
|
||||
const [paramsText, setParamsText] = useState("{}");
|
||||
const [paramsErr, setParamsErr] = useState<string | null>(null);
|
||||
const [showJSON, setShowJSON] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!node) return;
|
||||
setName(node.name);
|
||||
setParamsText(JSON.stringify(node.parameters ?? {}, null, 2));
|
||||
setParamsErr(null);
|
||||
setShowJSON(false);
|
||||
}, [node?.id]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Keep the JSON textarea in sync when typed-form edits change parameters.
|
||||
useEffect(() => {
|
||||
if (!node) return;
|
||||
setParamsText(JSON.stringify(node.parameters ?? {}, null, 2));
|
||||
}, [node?.parameters]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
if (!node) {
|
||||
return (
|
||||
<aside className="w-80 shrink-0 border-l bg-muted/20 p-4 text-sm text-muted-foreground">
|
||||
@@ -38,6 +47,7 @@ export function Inspector({ node, onChange, onDelete, onClose }: InspectorProps)
|
||||
}
|
||||
|
||||
const entry = lookup(node.type);
|
||||
const typed = hasTypedForm(node.type);
|
||||
|
||||
function commitName(next: string) {
|
||||
if (!node) return;
|
||||
@@ -89,21 +99,61 @@ export function Inspector({ node, onChange, onDelete, onClose }: InspectorProps)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="node-params">Parameters (JSON)</Label>
|
||||
<Textarea
|
||||
id="node-params"
|
||||
value={paramsText}
|
||||
onChange={(e) => setParamsText(e.target.value)}
|
||||
onBlur={() => commitParams(paramsText)}
|
||||
rows={14}
|
||||
spellCheck={false}
|
||||
className="text-xs"
|
||||
/>
|
||||
{paramsErr && (
|
||||
<p className="text-[11px] text-destructive">{paramsErr}</p>
|
||||
)}
|
||||
</div>
|
||||
{typed ? (
|
||||
<div className="space-y-3 rounded-md border bg-background p-3">
|
||||
<NodeForm node={node} onChange={onChange} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="node-params">Parameters (JSON)</Label>
|
||||
<Textarea
|
||||
id="node-params"
|
||||
value={paramsText}
|
||||
onChange={(e) => setParamsText(e.target.value)}
|
||||
onBlur={() => commitParams(paramsText)}
|
||||
rows={14}
|
||||
spellCheck={false}
|
||||
className="text-xs"
|
||||
/>
|
||||
{paramsErr && (
|
||||
<p className="text-[11px] text-destructive">{paramsErr}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{typed && (
|
||||
<div className="rounded-md border bg-background">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-2 px-3 py-2 text-xs font-medium hover:bg-accent"
|
||||
onClick={() => setShowJSON((v) => !v)}
|
||||
>
|
||||
<span className="flex items-center gap-1 text-muted-foreground">
|
||||
{showJSON ? (
|
||||
<ChevronDown className="size-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="size-3.5" />
|
||||
)}
|
||||
Raw JSON
|
||||
</span>
|
||||
</button>
|
||||
{showJSON && (
|
||||
<div className="border-t p-2">
|
||||
<Textarea
|
||||
value={paramsText}
|
||||
onChange={(e) => setParamsText(e.target.value)}
|
||||
onBlur={() => commitParams(paramsText)}
|
||||
rows={10}
|
||||
spellCheck={false}
|
||||
className="text-[11px]"
|
||||
/>
|
||||
{paramsErr && (
|
||||
<p className="mt-1 text-[11px] text-destructive">{paramsErr}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{entry && (
|
||||
<div className="rounded-md border bg-background p-2 text-[11px] text-muted-foreground">
|
||||
|
||||
@@ -0,0 +1,449 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import type { PipelineNode } from "@/lib/pipeline-graph";
|
||||
|
||||
interface NodeFormProps {
|
||||
node: PipelineNode;
|
||||
onChange: (next: PipelineNode) => void;
|
||||
}
|
||||
|
||||
// Typed forms per node type. Anything we don't know about renders a generic
|
||||
// JSON view (handled by the inspector — this component returns null in that
|
||||
// case so the parent shows the JSON fallback).
|
||||
//
|
||||
// Each form mutates node.parameters and calls onChange with the updated node.
|
||||
// We deliberately keep these dumb (no internal state); the inspector owns
|
||||
// debouncing and persistence.
|
||||
export function NodeForm({ node, onChange }: NodeFormProps) {
|
||||
switch (node.type) {
|
||||
case "flow-nodes-base.trigger":
|
||||
return <TriggerForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.build":
|
||||
return <BuildForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.test":
|
||||
return <TestForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.eval":
|
||||
return <EvalForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.policy":
|
||||
return <PolicyForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.waitForApproval":
|
||||
return <ApprovalForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.deploy":
|
||||
return <DeployForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.promote":
|
||||
return <PromoteForm node={node} onChange={onChange} />;
|
||||
case "flow-nodes-base.rollback":
|
||||
return <RollbackForm node={node} onChange={onChange} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns true if we render a typed form for this type (so the JSON
|
||||
* fallback can be hidden). */
|
||||
export function hasTypedForm(type: string): boolean {
|
||||
return [
|
||||
"flow-nodes-base.trigger",
|
||||
"flow-nodes-base.build",
|
||||
"flow-nodes-base.test",
|
||||
"flow-nodes-base.eval",
|
||||
"flow-nodes-base.policy",
|
||||
"flow-nodes-base.waitForApproval",
|
||||
"flow-nodes-base.deploy",
|
||||
"flow-nodes-base.promote",
|
||||
"flow-nodes-base.rollback",
|
||||
].includes(type);
|
||||
}
|
||||
|
||||
// --- helpers --------------------------------------------------------------
|
||||
|
||||
function setParam<T>(node: PipelineNode, key: string, value: T): PipelineNode {
|
||||
return {
|
||||
...node,
|
||||
parameters: { ...(node.parameters ?? {}), [key]: value },
|
||||
};
|
||||
}
|
||||
|
||||
function getString(node: PipelineNode, key: string, fallback = ""): string {
|
||||
const v = node.parameters?.[key];
|
||||
return typeof v === "string" ? v : fallback;
|
||||
}
|
||||
|
||||
function getNumber(node: PipelineNode, key: string, fallback = 0): number {
|
||||
const v = node.parameters?.[key];
|
||||
return typeof v === "number" ? v : fallback;
|
||||
}
|
||||
|
||||
function getStringArray(node: PipelineNode, key: string): string[] {
|
||||
const v = node.parameters?.[key];
|
||||
return Array.isArray(v) ? v.filter((x): x is string => typeof x === "string") : [];
|
||||
}
|
||||
|
||||
// --- forms ----------------------------------------------------------------
|
||||
|
||||
function TriggerForm({ node, onChange }: NodeFormProps) {
|
||||
const mode = getString(node, "mode", "manual");
|
||||
const cron = getString(node, "cron", "0 * * * *");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Mode</Label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => onChange(setParam(node, "mode", e.target.value))}
|
||||
className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm"
|
||||
>
|
||||
<option value="manual">Manual</option>
|
||||
<option value="webhook">Git webhook (push)</option>
|
||||
<option value="schedule">Scheduled (cron)</option>
|
||||
</select>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
How runs are dispatched. Webhook + manual are wired today; schedule
|
||||
lands once the cron worker exists.
|
||||
</p>
|
||||
</div>
|
||||
{mode === "schedule" && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="cron">Cron expression</Label>
|
||||
<Input
|
||||
id="cron"
|
||||
value={cron}
|
||||
onChange={(e) => onChange(setParam(node, "cron", e.target.value))}
|
||||
placeholder="0 * * * *"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BuildForm({ node, onChange }: NodeFormProps) {
|
||||
const command = getString(
|
||||
node,
|
||||
"command",
|
||||
"docker build -t $AGENT_NAME:$COMMIT_SHA ."
|
||||
);
|
||||
const workdir = getString(node, "workdir", ".");
|
||||
const timeout = getNumber(node, "timeoutSeconds", 600);
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="command">Command</Label>
|
||||
<Textarea
|
||||
id="command"
|
||||
rows={3}
|
||||
value={command}
|
||||
onChange={(e) => onChange(setParam(node, "command", e.target.value))}
|
||||
spellCheck={false}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Runs in a clone of the agent repo. Available env:{" "}
|
||||
<code>$AGENT_NAME</code>, <code>$REPO_URL</code>,{" "}
|
||||
<code>$COMMIT_SHA</code>, <code>$REF</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="workdir">Workdir</Label>
|
||||
<Input
|
||||
id="workdir"
|
||||
value={workdir}
|
||||
onChange={(e) => onChange(setParam(node, "workdir", e.target.value))}
|
||||
placeholder="."
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="timeout">Timeout (s)</Label>
|
||||
<Input
|
||||
id="timeout"
|
||||
type="number"
|
||||
min={10}
|
||||
max={3600}
|
||||
value={timeout}
|
||||
onChange={(e) =>
|
||||
onChange(setParam(node, "timeoutSeconds", Number(e.target.value)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TestForm({ node, onChange }: NodeFormProps) {
|
||||
const command = getString(node, "command", "pytest -q");
|
||||
const workdir = getString(node, "workdir", ".");
|
||||
const timeout = getNumber(node, "timeoutSeconds", 600);
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-cmd">Command</Label>
|
||||
<Textarea
|
||||
id="t-cmd"
|
||||
rows={3}
|
||||
value={command}
|
||||
onChange={(e) => onChange(setParam(node, "command", e.target.value))}
|
||||
spellCheck={false}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-wd">Workdir</Label>
|
||||
<Input
|
||||
id="t-wd"
|
||||
value={workdir}
|
||||
onChange={(e) => onChange(setParam(node, "workdir", e.target.value))}
|
||||
placeholder="."
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-to">Timeout (s)</Label>
|
||||
<Input
|
||||
id="t-to"
|
||||
type="number"
|
||||
min={10}
|
||||
max={3600}
|
||||
value={timeout}
|
||||
onChange={(e) =>
|
||||
onChange(setParam(node, "timeoutSeconds", Number(e.target.value)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Stub today: logs the command and returns success. Wire to a real
|
||||
executor when the test runner exists.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EvalForm({ node, onChange }: NodeFormProps) {
|
||||
const suite = getString(node, "suite", "default");
|
||||
const metric = getString(node, "metric", "accuracy");
|
||||
const threshold = getNumber(node, "threshold", 0.8);
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="e-suite">Suite</Label>
|
||||
<Input
|
||||
id="e-suite"
|
||||
value={suite}
|
||||
onChange={(e) => onChange(setParam(node, "suite", e.target.value))}
|
||||
placeholder="default"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="e-metric">Metric</Label>
|
||||
<Input
|
||||
id="e-metric"
|
||||
value={metric}
|
||||
onChange={(e) => onChange(setParam(node, "metric", e.target.value))}
|
||||
placeholder="accuracy"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="e-threshold">Threshold</Label>
|
||||
<Input
|
||||
id="e-threshold"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min={0}
|
||||
max={1}
|
||||
value={threshold}
|
||||
onChange={(e) =>
|
||||
onChange(setParam(node, "threshold", Number(e.target.value)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PolicyForm({ node, onChange }: NodeFormProps) {
|
||||
const rules = getStringArray(node, "rules");
|
||||
const mode = getString(node, "mode", "enforce");
|
||||
const text = rules.join("\n");
|
||||
|
||||
function commit(t: string) {
|
||||
const parsed = t.split("\n").map((s) => s.trim()).filter(Boolean);
|
||||
onChange(setParam(node, "rules", parsed));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Enforcement</Label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => onChange(setParam(node, "mode", e.target.value))}
|
||||
className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm"
|
||||
>
|
||||
<option value="enforce">Enforce — fail on violation</option>
|
||||
<option value="warn">Warn — log only</option>
|
||||
<option value="audit">Audit — record, never block</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="p-rules">Rules (one per line)</Label>
|
||||
<Textarea
|
||||
id="p-rules"
|
||||
rows={6}
|
||||
defaultValue={text}
|
||||
onBlur={(e) => commit(e.target.value)}
|
||||
spellCheck={false}
|
||||
className="font-mono text-xs"
|
||||
placeholder={"max_monthly_spend_usd:1000\nno_pii_in_outputs"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ApprovalForm({ node, onChange }: NodeFormProps) {
|
||||
const reason = getString(node, "reason", "Manual review");
|
||||
const reviewers = getStringArray(node, "reviewers");
|
||||
const text = reviewers.join("\n");
|
||||
|
||||
function commit(t: string) {
|
||||
const parsed = t.split("\n").map((s) => s.trim()).filter(Boolean);
|
||||
onChange(setParam(node, "reviewers", parsed));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="a-reason">Reason</Label>
|
||||
<Input
|
||||
id="a-reason"
|
||||
value={reason}
|
||||
onChange={(e) => onChange(setParam(node, "reason", e.target.value))}
|
||||
placeholder="Manual review before deploy"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Shown in the Resume panel on the executions page.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="a-reviewers">Reviewers (one per line)</Label>
|
||||
<Textarea
|
||||
id="a-reviewers"
|
||||
rows={4}
|
||||
defaultValue={text}
|
||||
onBlur={(e) => commit(e.target.value)}
|
||||
spellCheck={false}
|
||||
className="font-mono text-xs"
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeployForm({ node, onChange }: NodeFormProps) {
|
||||
const runtime = getString(node, "runtime", "kubernetes");
|
||||
const env = getString(node, "env", "dev");
|
||||
const target = getString(node, "target", "");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Runtime</Label>
|
||||
<select
|
||||
value={runtime}
|
||||
onChange={(e) =>
|
||||
onChange(setParam(node, "runtime", e.target.value))
|
||||
}
|
||||
className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm"
|
||||
>
|
||||
<option value="kubernetes">Kubernetes</option>
|
||||
<option value="bedrock">AWS Bedrock AgentCore</option>
|
||||
<option value="vertex">GCP Vertex Agent Engine</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="d-env">Environment</Label>
|
||||
<Input
|
||||
id="d-env"
|
||||
value={env}
|
||||
onChange={(e) => onChange(setParam(node, "env", e.target.value))}
|
||||
placeholder="dev"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="d-target">Target</Label>
|
||||
<Input
|
||||
id="d-target"
|
||||
value={target}
|
||||
onChange={(e) => onChange(setParam(node, "target", e.target.value))}
|
||||
placeholder="cluster name / project / agent ID"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Runtime-specific. E.g. for K8s: cluster + namespace; for Vertex: GCP
|
||||
project + agent ID.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PromoteForm({ node, onChange }: NodeFormProps) {
|
||||
const fromEnv = getString(node, "fromEnv", "staging");
|
||||
const toEnv = getString(node, "toEnv", "prod");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="pr-from">From env</Label>
|
||||
<Input
|
||||
id="pr-from"
|
||||
value={fromEnv}
|
||||
onChange={(e) => onChange(setParam(node, "fromEnv", e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="pr-to">To env</Label>
|
||||
<Input
|
||||
id="pr-to"
|
||||
value={toEnv}
|
||||
onChange={(e) => onChange(setParam(node, "toEnv", e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Promote follows the project’s branching strategy. Stub today;
|
||||
will execute the real promotion (tag/branch/merge) when wired.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RollbackForm({ node, onChange }: NodeFormProps) {
|
||||
const revision = getString(node, "revision", "previous");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="rb-rev">Revision</Label>
|
||||
<Input
|
||||
id="rb-rev"
|
||||
value={revision}
|
||||
onChange={(e) => onChange(setParam(node, "revision", e.target.value))}
|
||||
placeholder='"previous" or a specific build ID'
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -23,6 +23,44 @@ export type ExecutionStatus = {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
|
||||
export type AuthStatus = "untested" | "ok" | "failed";
|
||||
|
||||
export type Agent = {
|
||||
id: string;
|
||||
name: string;
|
||||
repoUrl: string;
|
||||
ref?: string;
|
||||
hasPat: boolean;
|
||||
webhookId?: number;
|
||||
webhookUrl?: string;
|
||||
webhookInstalled: boolean;
|
||||
webhookInstalledAt?: string;
|
||||
authStatus?: AuthStatus;
|
||||
authCheckedAt?: string;
|
||||
attachedPipelines?: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type Run = {
|
||||
id: string;
|
||||
pipelineId: string;
|
||||
pipelineName?: string;
|
||||
status: string;
|
||||
startedAt: string;
|
||||
finishedAt?: string;
|
||||
triggerData?: unknown;
|
||||
outputs?: unknown;
|
||||
nodeOutputs?: unknown;
|
||||
errors?: string[];
|
||||
};
|
||||
|
||||
export type ServerConfig = {
|
||||
publicUrl: string;
|
||||
webhooksAvailable: boolean;
|
||||
orchestratorEnabled: boolean;
|
||||
};
|
||||
|
||||
const base = ""; // same-origin
|
||||
|
||||
async function handle<T>(res: Response): Promise<T> {
|
||||
@@ -80,4 +118,58 @@ export const api = {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
}).then(handle<{ message: string }>),
|
||||
|
||||
// --- config ---
|
||||
getConfig: () => fetch(`${base}/api/config`).then(handle<ServerConfig>),
|
||||
|
||||
// --- agents ---
|
||||
listAgents: () => fetch(`${base}/api/agents`).then(handle<Agent[]>),
|
||||
|
||||
createAgent: (body: { repoUrl: string; pat?: string; ref?: string; name?: string }) =>
|
||||
fetch(`${base}/api/agents`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
}).then(handle<Agent>),
|
||||
|
||||
getAgent: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}`).then(handle<Agent>),
|
||||
|
||||
deleteAgent: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}`, { method: "DELETE" }).then(handle<void>),
|
||||
|
||||
testAgentAuth: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}/test-auth`, { method: "POST" }).then(
|
||||
handle<{ authStatus: AuthStatus; authCheckedAt: string; error?: string }>
|
||||
),
|
||||
|
||||
installAgentWebhook: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}/webhook`, { method: "POST" }).then(handle<Agent>),
|
||||
|
||||
uninstallAgentWebhook: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}/webhook`, { method: "DELETE" }).then(handle<Agent>),
|
||||
|
||||
attachPipeline: (id: string, pipelineId: string) =>
|
||||
fetch(`${base}/api/agents/${id}/pipelines/${pipelineId}`, {
|
||||
method: "POST",
|
||||
}).then(handle<Agent>),
|
||||
|
||||
detachPipeline: (id: string, pipelineId: string) =>
|
||||
fetch(`${base}/api/agents/${id}/pipelines/${pipelineId}`, {
|
||||
method: "DELETE",
|
||||
}).then(handle<void>),
|
||||
|
||||
triggerAgent: (id: string) =>
|
||||
fetch(`${base}/api/agents/${id}/trigger`, { method: "POST" }).then(
|
||||
handle<{ executionIds: string[] }>
|
||||
),
|
||||
|
||||
// --- runs ---
|
||||
listRuns: (params?: { pipelineId?: string; limit?: number }) => {
|
||||
const qs = new URLSearchParams();
|
||||
if (params?.pipelineId) qs.set("pipeline_id", params.pipelineId);
|
||||
if (params?.limit) qs.set("limit", String(params.limit));
|
||||
const q = qs.toString();
|
||||
return fetch(`${base}/api/executions${q ? `?${q}` : ""}`).then(handle<Run[]>);
|
||||
},
|
||||
};
|
||||
|
||||
+143
-26
@@ -1,10 +1,27 @@
|
||||
// Catalog of node types the canvas can drop. Mirrors the executors registered
|
||||
// in pkg/executors/registry.go RegisterAll(). Keep this in sync with the Go
|
||||
// registry — anything listed here without a matching executor will fail at run
|
||||
// time with "executor not implemented for node type".
|
||||
// Catalog of node types the canvas can drop. These are the Langship CI/CD
|
||||
// pipeline primitives — Trigger → Build → Test → Eval → Policy → Approval
|
||||
// → Deploy → Promote → Rollback. The canonical type strings keep the
|
||||
// `flow-nodes-base.` prefix so they line up with the executor registry in
|
||||
// pkg/executors.
|
||||
//
|
||||
// Keep this in sync with pkg/executors/registry.go::RegisterAll(). Anything
|
||||
// listed here without a matching executor will fail at run time with
|
||||
// "executor not implemented for node type".
|
||||
|
||||
import type { ComponentType } from "react";
|
||||
import { Play, Settings2, Pause, CircleSlash } from "lucide-react";
|
||||
import {
|
||||
Play,
|
||||
Hammer,
|
||||
TestTube2,
|
||||
Gauge,
|
||||
ShieldCheck,
|
||||
Pause,
|
||||
Rocket,
|
||||
ArrowUpFromLine,
|
||||
Undo2,
|
||||
CircleSlash,
|
||||
Settings2,
|
||||
} from "lucide-react";
|
||||
|
||||
export type CatalogEntry = {
|
||||
/** Runtime type string: flow-nodes-base.X */
|
||||
@@ -24,10 +41,9 @@ export type CatalogEntry = {
|
||||
/** Default Settings (retry etc.) */
|
||||
settings?: Record<string, unknown>;
|
||||
/** Group in palette */
|
||||
group: "trigger" | "transform" | "human";
|
||||
group: "trigger" | "build" | "verify" | "gate" | "deploy" | "passthrough";
|
||||
};
|
||||
|
||||
// Only the executors registered in pkg/executors/registry.go::RegisterAll().
|
||||
export const CATALOG: CatalogEntry[] = [
|
||||
{
|
||||
type: "flow-nodes-base.trigger",
|
||||
@@ -36,45 +52,146 @@ export const CATALOG: CatalogEntry[] = [
|
||||
icon: Play,
|
||||
color: "bg-emerald-500",
|
||||
outputs: 1,
|
||||
defaults: {},
|
||||
defaults: { mode: "manual" },
|
||||
group: "trigger",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.build",
|
||||
label: "Build",
|
||||
description: "Clone the agent repo and run a build command (e.g. docker build).",
|
||||
icon: Hammer,
|
||||
color: "bg-amber-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
command: "docker build -t $AGENT_NAME:$COMMIT_SHA .",
|
||||
workdir: ".",
|
||||
timeoutSeconds: 600,
|
||||
},
|
||||
settings: { retryOnFail: true, maxTries: 2, waitBetweenTries: 5000 },
|
||||
group: "build",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.test",
|
||||
label: "Test",
|
||||
description: "Run unit / integration tests against the build artifact.",
|
||||
icon: TestTube2,
|
||||
color: "bg-sky-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
command: "pytest -q",
|
||||
workdir: ".",
|
||||
timeoutSeconds: 600,
|
||||
},
|
||||
group: "verify",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.eval",
|
||||
label: "Eval",
|
||||
description: "Run agent evals (LLM benchmarks, scoring suites).",
|
||||
icon: Gauge,
|
||||
color: "bg-violet-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
suite: "default",
|
||||
threshold: 0.8,
|
||||
metric: "accuracy",
|
||||
},
|
||||
group: "verify",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.policy",
|
||||
label: "Policy",
|
||||
description: "Apply governance rules (budget, safety, compliance gates).",
|
||||
icon: ShieldCheck,
|
||||
color: "bg-indigo-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
rules: ["max_monthly_spend_usd:1000", "no_pii_in_outputs"],
|
||||
mode: "enforce",
|
||||
},
|
||||
group: "gate",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.waitForApproval",
|
||||
label: "Approval",
|
||||
description: "Pause until a human (or quorum) approves continuation.",
|
||||
icon: Pause,
|
||||
color: "bg-fuchsia-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
reason: "Manual review",
|
||||
reviewers: [],
|
||||
},
|
||||
group: "gate",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.deploy",
|
||||
label: "Deploy",
|
||||
description: "Ship the artifact to a runtime (K8s / Bedrock / Vertex).",
|
||||
icon: Rocket,
|
||||
color: "bg-rose-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
runtime: "kubernetes",
|
||||
env: "dev",
|
||||
target: "",
|
||||
},
|
||||
group: "deploy",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.promote",
|
||||
label: "Promote",
|
||||
description: "Promote a deployed artifact to the next environment.",
|
||||
icon: ArrowUpFromLine,
|
||||
color: "bg-orange-500",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
fromEnv: "staging",
|
||||
toEnv: "prod",
|
||||
},
|
||||
group: "deploy",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.rollback",
|
||||
label: "Rollback",
|
||||
description: "Revert to a previous deployed revision.",
|
||||
icon: Undo2,
|
||||
color: "bg-red-600",
|
||||
outputs: 1,
|
||||
defaults: {
|
||||
revision: "previous",
|
||||
},
|
||||
group: "deploy",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.set",
|
||||
label: "Set",
|
||||
description: "Define or transform fields on each item.",
|
||||
icon: Settings2,
|
||||
color: "bg-sky-500",
|
||||
color: "bg-slate-500",
|
||||
outputs: 1,
|
||||
defaults: { values: { string: [] } },
|
||||
group: "transform",
|
||||
group: "passthrough",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.noOp",
|
||||
label: "No-op",
|
||||
description: "Pass items through unchanged.",
|
||||
description: "Pass items through unchanged. Useful as a placeholder.",
|
||||
icon: CircleSlash,
|
||||
color: "bg-slate-500",
|
||||
color: "bg-slate-400",
|
||||
outputs: 1,
|
||||
defaults: {},
|
||||
group: "transform",
|
||||
},
|
||||
{
|
||||
type: "flow-nodes-base.waitForApproval",
|
||||
label: "Wait for approval",
|
||||
description: "Pause until a human resolves an awakeable.",
|
||||
icon: Pause,
|
||||
color: "bg-fuchsia-500",
|
||||
outputs: 1,
|
||||
defaults: { reason: "Manual review" },
|
||||
group: "human",
|
||||
group: "passthrough",
|
||||
},
|
||||
];
|
||||
|
||||
export const GROUP_LABELS: Record<CatalogEntry["group"], string> = {
|
||||
trigger: "Trigger",
|
||||
transform: "Transform",
|
||||
human: "Human-in-the-loop",
|
||||
build: "Build",
|
||||
verify: "Verify",
|
||||
gate: "Gate",
|
||||
deploy: "Deploy",
|
||||
passthrough: "Pass-through",
|
||||
};
|
||||
|
||||
/** Look up by runtime type. Returns undefined for unsupported types so the
|
||||
@@ -83,7 +200,7 @@ export function lookup(type: string): CatalogEntry | undefined {
|
||||
return CATALOG.find((c) => c.type === type);
|
||||
}
|
||||
|
||||
/** Suggest a unique name like "Set", "Set 2", "Set 3". */
|
||||
/** Suggest a unique name like "Build", "Build 2", "Build 3". */
|
||||
export function uniqueName(base: string, existing: Set<string>): string {
|
||||
if (!existing.has(base)) return base;
|
||||
let i = 2;
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
const isProd = process.env.NODE_ENV === "production";
|
||||
|
||||
// Where the Go backend is listening during `npm run dev`.
|
||||
const apiTarget = process.env.FLOW_API_URL ?? "http://localhost:8080";
|
||||
const apiTarget = process.env.FLOW_API_URL ?? "http://localhost:8090";
|
||||
|
||||
const nextConfig = {
|
||||
// Static export only at build time — the Go binary embeds ./out.
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@ server {
|
||||
# Proxy API calls to the Go service.
|
||||
# `flow` is the service name on the docker-compose network.
|
||||
location /api/ {
|
||||
proxy_pass http://flow:8080;
|
||||
proxy_pass http://flow:8090;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
|
||||
Reference in New Issue
Block a user