feat: minimal frontend (run view, approvals, admin) with E2E smoke
- Tabs: Vorgaenge (run flows + history), Freigaben (decide tasks), Administration (Langflow link, import, deploy) - Typed API client over vite /api proxy; tsc + vite build clean - scripts/smoke_e2e.py: real LFX + API end-to-end, all green - 34 backend tests green
This commit is contained in:
Jonas Miederer
parent
6c195bc2e7
commit
0a2b73f3b4
8 changed files with 618 additions and 4 deletions
|
|
@ -1,10 +1,39 @@
|
|||
function App() {
|
||||
import { useState } from "react";
|
||||
import AdminTab from "./components/AdminTab";
|
||||
import ApprovalsTab from "./components/ApprovalsTab";
|
||||
import FlowsTab from "./components/FlowsTab";
|
||||
|
||||
type Tab = "flows" | "approvals" | "admin";
|
||||
|
||||
const tabStyle = (active: boolean): React.CSSProperties => ({
|
||||
fontWeight: active ? "bold" : "normal",
|
||||
textDecoration: active ? "underline" : "none",
|
||||
});
|
||||
|
||||
export default function App() {
|
||||
const [tab, setTab] = useState<Tab>("flows");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ maxWidth: 900, margin: "0 auto", padding: 16 }}>
|
||||
<h1>Kirche Einfach</h1>
|
||||
<p>KI-gestützte Verwaltungsplattform für Kirche</p>
|
||||
<nav style={{ display: "flex", gap: 12, marginBottom: 16 }}>
|
||||
<button style={tabStyle(tab === "flows")} onClick={() => setTab("flows")}>
|
||||
Vorgänge
|
||||
</button>
|
||||
<button
|
||||
style={tabStyle(tab === "approvals")}
|
||||
onClick={() => setTab("approvals")}
|
||||
>
|
||||
Freigaben
|
||||
</button>
|
||||
<button style={tabStyle(tab === "admin")} onClick={() => setTab("admin")}>
|
||||
Administration
|
||||
</button>
|
||||
</nav>
|
||||
{tab === "flows" && <FlowsTab />}
|
||||
{tab === "approvals" && <ApprovalsTab />}
|
||||
{tab === "admin" && <AdminTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
138
frontend/src/api.ts
Normal file
138
frontend/src/api.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/* Typed client for the kirche-einfach API (served via vite /api proxy). */
|
||||
|
||||
export interface FlowDefinition {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: string;
|
||||
continuation_flow_id: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface FlowVersion {
|
||||
id: string;
|
||||
flow_id: string;
|
||||
version_no: number;
|
||||
langflow_json: unknown;
|
||||
lfx_flow_id: string | null;
|
||||
deployed_at: string | null;
|
||||
author: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface RunOutput {
|
||||
result?: string;
|
||||
component?: string;
|
||||
type?: string;
|
||||
error?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface Run {
|
||||
id: string;
|
||||
version_id: string;
|
||||
tenant_id: string;
|
||||
status: string;
|
||||
input: unknown;
|
||||
output: RunOutput | null;
|
||||
session_id: string | null;
|
||||
created_at: string;
|
||||
finished_at: string | null;
|
||||
}
|
||||
|
||||
export interface ApprovalTask {
|
||||
id: string;
|
||||
run_id: string;
|
||||
version_id: string;
|
||||
tenant_id: string;
|
||||
title: string;
|
||||
payload: unknown;
|
||||
continuation_flow_id: string | null;
|
||||
approver: string | null;
|
||||
status: string;
|
||||
decision_note: string;
|
||||
created_at: string;
|
||||
decided_at: string | null;
|
||||
}
|
||||
|
||||
export interface Decision {
|
||||
task: ApprovalTask;
|
||||
continuation_run: Run | null;
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
status: number;
|
||||
constructor(status: number, message: string) {
|
||||
super(message);
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
|
||||
async function req<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const res = await fetch(path, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
...init,
|
||||
});
|
||||
if (!res.ok) {
|
||||
let detail = res.statusText;
|
||||
try {
|
||||
const body: unknown = await res.json();
|
||||
if (
|
||||
typeof body === "object" &&
|
||||
body !== null &&
|
||||
"detail" in body &&
|
||||
typeof (body as { detail: unknown }).detail === "string"
|
||||
) {
|
||||
detail = (body as { detail: string }).detail;
|
||||
}
|
||||
} catch {
|
||||
/* keep statusText */
|
||||
}
|
||||
throw new ApiError(res.status, detail);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export const LANGFLOW_URL =
|
||||
(import.meta.env.VITE_LANGFLOW_URL as string | undefined) ??
|
||||
"http://localhost:7860";
|
||||
|
||||
export const api = {
|
||||
listFlows: () => req<FlowDefinition[]>("/api/flows"),
|
||||
listVersions: (flowId: string) =>
|
||||
req<FlowVersion[]>(`/api/flows/${flowId}/versions`),
|
||||
deployVersion: (flowId: string, versionNo: number) =>
|
||||
req<FlowVersion>(`/api/flows/${flowId}/versions/${versionNo}/deploy`, {
|
||||
method: "POST",
|
||||
}),
|
||||
runFlow: (flowId: string, input: unknown, tenantId: string) =>
|
||||
req<Run>(`/api/flows/${flowId}/run`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ input, tenant_id: tenantId }),
|
||||
}),
|
||||
listRuns: (flowId: string) => req<Run[]>(`/api/flows/${flowId}/runs`),
|
||||
listApprovals: () => req<ApprovalTask[]>("/api/approvals"),
|
||||
decide: (
|
||||
taskId: string,
|
||||
decision: "approve" | "reject",
|
||||
approver: string,
|
||||
note: string,
|
||||
) =>
|
||||
req<Decision>(`/api/approvals/${taskId}/decision`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ decision, approver, note }),
|
||||
}),
|
||||
importFlow: (langflowFlowId: string, name?: string) =>
|
||||
req<{ definition: FlowDefinition; version: FlowVersion }>(
|
||||
"/api/flows/import",
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
langflow_flow_id: langflowFlowId,
|
||||
...(name ? { name } : {}),
|
||||
}),
|
||||
},
|
||||
),
|
||||
listLangflow: () =>
|
||||
req<{ id: string; name: string }[]>("/api/flows/langflow/available"),
|
||||
};
|
||||
118
frontend/src/components/AdminTab.tsx
Normal file
118
frontend/src/components/AdminTab.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ApiError,
|
||||
LANGFLOW_URL,
|
||||
api,
|
||||
type FlowDefinition,
|
||||
type FlowVersion,
|
||||
} from "../api";
|
||||
|
||||
export default function AdminTab() {
|
||||
const [flows, setFlows] = useState<FlowDefinition[]>([]);
|
||||
const [versions, setVersions] = useState<Record<string, FlowVersion[]>>({});
|
||||
const [langflowId, setLangflowId] = useState("");
|
||||
const [importName, setImportName] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [info, setInfo] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const list = await api.listFlows();
|
||||
setFlows(list);
|
||||
const all: Record<string, FlowVersion[]> = {};
|
||||
for (const f of list) {
|
||||
all[f.id] = await api.listVersions(f.id);
|
||||
}
|
||||
setVersions(all);
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
async function onImport() {
|
||||
setError("");
|
||||
setInfo("");
|
||||
try {
|
||||
const result = await api.importFlow(
|
||||
langflowId,
|
||||
importName.trim() ? importName.trim() : undefined,
|
||||
);
|
||||
setInfo(
|
||||
`Importiert: ${result.definition.name} (Version ${result.version.version_no})`,
|
||||
);
|
||||
setLangflowId("");
|
||||
setImportName("");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}
|
||||
|
||||
async function onDeploy(flowId: string, versionNo: number) {
|
||||
setError("");
|
||||
setInfo("");
|
||||
try {
|
||||
const version = await api.deployVersion(flowId, versionNo);
|
||||
setInfo(`Deployed: Version ${version.version_no} (${version.lfx_flow_id})`);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Administration</h2>
|
||||
{error && <p style={{ color: "crimson" }}>{error}</p>}
|
||||
{info && <p style={{ color: "green" }}>{info}</p>}
|
||||
<p>
|
||||
Flows werden visuell in Langflow entworfen:{" "}
|
||||
<a href={LANGFLOW_URL} target="_blank" rel="noreferrer">
|
||||
Langflow öffnen
|
||||
</a>
|
||||
</p>
|
||||
<h3>Import aus Langflow</h3>
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
|
||||
<input
|
||||
value={langflowId}
|
||||
onChange={(e) => setLangflowId(e.target.value)}
|
||||
placeholder="Langflow Flow-ID (UUID)"
|
||||
style={{ flex: 1, fontFamily: "monospace" }}
|
||||
/>
|
||||
<input
|
||||
value={importName}
|
||||
onChange={(e) => setImportName(e.target.value)}
|
||||
placeholder="Name (optional)"
|
||||
/>
|
||||
<button onClick={() => void onImport()} disabled={!langflowId.trim()}>
|
||||
Importieren + Deployen
|
||||
</button>
|
||||
</div>
|
||||
<h3>Flows + Versionen</h3>
|
||||
{flows.length === 0 && <p>Keine Flows vorhanden.</p>}
|
||||
<ul>
|
||||
{flows.map((f) => (
|
||||
<li key={f.id} style={{ marginBottom: 8 }}>
|
||||
<strong>{f.name}</strong>
|
||||
<ul>
|
||||
{(versions[f.id] ?? []).map((v) => (
|
||||
<li key={v.id}>
|
||||
v{v.version_no} ·{" "}
|
||||
{v.deployed_at ? `deployed (${v.lfx_flow_id})` : "nicht deployed"} ·{" "}
|
||||
{v.author || "–"}{" "}
|
||||
<button onClick={() => void onDeploy(f.id, v.version_no)}>
|
||||
Deployen
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
frontend/src/components/ApprovalsTab.tsx
Normal file
95
frontend/src/components/ApprovalsTab.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { ApiError, api, type ApprovalTask } from "../api";
|
||||
|
||||
export default function ApprovalsTab() {
|
||||
const [tasks, setTasks] = useState<ApprovalTask[]>([]);
|
||||
const [approver, setApprover] = useState("");
|
||||
const [note, setNote] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [busyId, setBusyId] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setTasks(await api.listApprovals());
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
async function decide(taskId: string, decision: "approve" | "reject") {
|
||||
setBusyId(taskId);
|
||||
setError("");
|
||||
try {
|
||||
const result = await api.decide(taskId, decision, approver, note);
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => (t.id === taskId ? result.task : t)),
|
||||
);
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
} finally {
|
||||
setBusyId("");
|
||||
}
|
||||
}
|
||||
|
||||
const open = tasks.filter((t) => t.status === "open");
|
||||
const done = tasks.filter((t) => t.status !== "open");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Freigaben</h2>
|
||||
{error && <p style={{ color: "crimson" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
|
||||
<input
|
||||
value={approver}
|
||||
onChange={(e) => setApprover(e.target.value)}
|
||||
placeholder="Name (Bearbeiter)"
|
||||
/>
|
||||
<input
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
placeholder="Notiz"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<button onClick={() => void load()}>Aktualisieren</button>
|
||||
</div>
|
||||
<h3>Offen ({open.length})</h3>
|
||||
{open.length === 0 && <p>Keine offenen Freigaben.</p>}
|
||||
<ul>
|
||||
{open.map((t) => (
|
||||
<li key={t.id} style={{ marginBottom: 8 }}>
|
||||
<strong>{t.title || t.id}</strong> · {t.tenant_id}
|
||||
<br />
|
||||
<code>{JSON.stringify(t.payload)}</code>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => void decide(t.id, "approve")}
|
||||
disabled={busyId === t.id}
|
||||
>
|
||||
Freigeben
|
||||
</button>{" "}
|
||||
<button
|
||||
onClick={() => void decide(t.id, "reject")}
|
||||
disabled={busyId === t.id}
|
||||
>
|
||||
Ablehnen
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h3>Entschieden ({done.length})</h3>
|
||||
<ul>
|
||||
{done.map((t) => (
|
||||
<li key={t.id}>
|
||||
<strong>{t.status}</strong> · {t.title || t.id} ·{" "}
|
||||
{t.approver ?? "–"}
|
||||
{t.decision_note ? ` · „${t.decision_note}“` : ""}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
frontend/src/components/FlowsTab.tsx
Normal file
105
frontend/src/components/FlowsTab.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { ApiError, api, type FlowDefinition, type Run } from "../api";
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: "100%",
|
||||
fontFamily: "monospace",
|
||||
fontSize: 13,
|
||||
};
|
||||
|
||||
export default function FlowsTab() {
|
||||
const [flows, setFlows] = useState<FlowDefinition[]>([]);
|
||||
const [flowId, setFlowId] = useState("");
|
||||
const [inputJson, setInputJson] = useState(
|
||||
'{\n "betrag": 120000,\n "schwelle": 200000\n}',
|
||||
);
|
||||
const [tenant, setTenant] = useState("default");
|
||||
const [runs, setRuns] = useState<Run[]>([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const loadFlows = useCallback(async () => {
|
||||
try {
|
||||
const list = await api.listFlows();
|
||||
setFlows(list);
|
||||
const first = list[0];
|
||||
if (first && !flowId) setFlowId(first.id);
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}, [flowId]);
|
||||
|
||||
const loadRuns = useCallback(async (id: string) => {
|
||||
if (!id) return;
|
||||
try {
|
||||
setRuns(await api.listRuns(id));
|
||||
} catch (e) {
|
||||
setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadFlows();
|
||||
}, [loadFlows]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadRuns(flowId);
|
||||
}, [flowId, loadRuns]);
|
||||
|
||||
async function onRun() {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const payload: unknown = JSON.parse(inputJson);
|
||||
const run = await api.runFlow(flowId, payload, tenant);
|
||||
setRuns((prev) => [run, ...prev]);
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) setError("Ungültiges JSON in der Eingabe.");
|
||||
else setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Vorgang starten</h2>
|
||||
{error && <p style={{ color: "crimson" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
|
||||
<select value={flowId} onChange={(e) => setFlowId(e.target.value)}>
|
||||
<option value="">— Flow wählen —</option>
|
||||
{flows.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
value={tenant}
|
||||
onChange={(e) => setTenant(e.target.value)}
|
||||
placeholder="Mandant"
|
||||
style={{ width: 160 }}
|
||||
/>
|
||||
<button onClick={() => void onRun()} disabled={!flowId || busy}>
|
||||
{busy ? "Läuft …" : "Starten"}
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
rows={6}
|
||||
style={inputStyle}
|
||||
value={inputJson}
|
||||
onChange={(e) => setInputJson(e.target.value)}
|
||||
/>
|
||||
<h3>Letzte Läufe</h3>
|
||||
{runs.length === 0 && <p>Noch keine Läufe.</p>}
|
||||
<ul>
|
||||
{runs.map((r) => (
|
||||
<li key={r.id}>
|
||||
<strong>{r.status}</strong> · {r.tenant_id} ·{" "}
|
||||
<code>{r.output?.result ?? r.output?.error ?? "–"}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue