feat: add script dry-run functionality and enhance script management
- Introduced a new dry-run endpoint for executing scripts without saving changes. - Implemented a dedicated ScriptDryRunPage for user interaction with dry-run functionality. - Enhanced ScriptsPage to support navigation to the dry-run feature. - Added LogViewer component for displaying logs during script execution. - Created ScriptEditPage for editing scripts with integrated dry-run capabilities. - Updated workflows to include new scripts for fetching and notifying data. - Improved overall user experience with better navigation and error handling.
This commit is contained in:
@@ -291,6 +291,10 @@ function createScriptSandbox({ log, script, workflowName }) {
|
||||
return sandbox;
|
||||
}
|
||||
|
||||
function compileScriptSource(source, filename) {
|
||||
return new vm.Script(wrapScriptSource(source, filename), { filename });
|
||||
}
|
||||
|
||||
function loadCompiledScript(script) {
|
||||
const filePath = path.join(SCRIPTS_DIR, script);
|
||||
const { mtimeMs } = fs.statSync(filePath);
|
||||
@@ -300,9 +304,7 @@ function loadCompiledScript(script) {
|
||||
}
|
||||
|
||||
const source = fs.readFileSync(filePath, "utf8");
|
||||
const compiled = new vm.Script(wrapScriptSource(source, script), {
|
||||
filename: filePath,
|
||||
});
|
||||
const compiled = compileScriptSource(source, filePath);
|
||||
scriptCache.set(script, { compiled, mtimeMs });
|
||||
return compiled;
|
||||
}
|
||||
@@ -320,3 +322,18 @@ export async function runScript(script, ctx, { log, workflowName }) {
|
||||
const fn = compiled.runInContext(sandbox);
|
||||
return await fn(ctx);
|
||||
}
|
||||
|
||||
/**
|
||||
* Evaluate script source in memory (dry-run). Does not read from disk or use the disk cache.
|
||||
*
|
||||
* @param {string} script
|
||||
* @param {string} source
|
||||
* @param {unknown} ctx
|
||||
* @param {{ log: import("pino").Logger, workflowName: string }} opts
|
||||
*/
|
||||
export async function runScriptSource(script, source, ctx, { log, workflowName }) {
|
||||
const compiled = compileScriptSource(source, script);
|
||||
const sandbox = createScriptSandbox({ log, script, workflowName });
|
||||
const fn = compiled.runInContext(sandbox);
|
||||
return await fn(ctx);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
function ensureDataObject(ctx) {
|
||||
if (ctx.data == null || typeof ctx.data !== "object" || Array.isArray(ctx.data)) {
|
||||
ctx.data = {};
|
||||
}
|
||||
}
|
||||
|
||||
function filenameFromUrl(url) {
|
||||
try {
|
||||
const name = new URL(url).pathname.split("/").filter(Boolean).pop();
|
||||
return name || "attachment";
|
||||
} catch {
|
||||
return "attachment";
|
||||
}
|
||||
}
|
||||
|
||||
function resolveUrl(ctx) {
|
||||
const fromConfig = ctx.config?.url;
|
||||
if (typeof fromConfig === "string" && fromConfig.length > 0) {
|
||||
return fromConfig;
|
||||
}
|
||||
|
||||
const urlVar = ctx.config?.urlVar;
|
||||
if (typeof urlVar === "string" && urlVar.length > 0) {
|
||||
const value = ctx.data?.[urlVar];
|
||||
if (typeof value === "string" && value.length > 0) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
for (const key of ["attach", "url"]) {
|
||||
const value = ctx.data?.[key];
|
||||
if (typeof value === "string" && value.length > 0) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default async function fetchBinary(ctx) {
|
||||
ensureDataObject(ctx);
|
||||
|
||||
const url = resolveUrl(ctx);
|
||||
if (!url) {
|
||||
throw new Error(
|
||||
"fetch-binary: url is required (ctx.config.url, ctx.config.urlVar, ctx.data.attach, or ctx.data.url)",
|
||||
);
|
||||
}
|
||||
|
||||
const outputVar = typeof ctx.config?.outputVar === "string" && ctx.config.outputVar.length > 0
|
||||
? ctx.config.outputVar
|
||||
: "file";
|
||||
|
||||
log.info({ url, outputVar }, "fetch-binary: fetching");
|
||||
const response = await $axios.get(url, { responseType: "arraybuffer" });
|
||||
const file = Buffer.from(response.data ?? []);
|
||||
const contentType = String(response.headers?.["content-type"] ?? "application/octet-stream");
|
||||
const filename = ctx.config?.filename || ctx.data.filename || filenameFromUrl(url);
|
||||
|
||||
ctx.data[outputVar] = file;
|
||||
ctx.data.filename = filename;
|
||||
ctx.data.contentType = contentType;
|
||||
|
||||
log.info(
|
||||
{ outputVar, filename, contentType, length: file.length },
|
||||
"fetch-binary: saved",
|
||||
);
|
||||
|
||||
return ctx;
|
||||
}
|
||||
@@ -1,20 +1,66 @@
|
||||
export default async function ntfy(ctx) {
|
||||
log.info({ ctx }, "ntfy incoming context");
|
||||
const headers = {}
|
||||
function ntfyHeaders(ctx) {
|
||||
const headers = {};
|
||||
|
||||
if(ctx.data?.title) {
|
||||
log.info("ntfy: setting title %s", ctx.data.title);
|
||||
headers.Title = ctx.data.title
|
||||
if (ctx.data?.title) {
|
||||
log.info("ntfy: setting title %s", ctx.data.title);
|
||||
headers.Title = ctx.data.title;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
export default async function ntfy(ctx) {
|
||||
const file = ctx.data?.file;
|
||||
const hasFile = Buffer.isBuffer(file) || file instanceof Uint8Array;
|
||||
|
||||
log.info(
|
||||
{
|
||||
title: ctx.data?.title,
|
||||
message: ctx.data?.message,
|
||||
filename: ctx.data?.filename,
|
||||
hasFile,
|
||||
fileLength: hasFile ? file.length : 0,
|
||||
attach: ctx.data?.attach,
|
||||
},
|
||||
"ntfy incoming context",
|
||||
);
|
||||
|
||||
const headers = ntfyHeaders(ctx);
|
||||
const ntfyUrl = ctx.config?.url || "https://ntfy.sh/scrunner";
|
||||
|
||||
if (hasFile) {
|
||||
const filename = ctx.data?.filename || "attachment";
|
||||
headers.Filename = filename;
|
||||
if (ctx.data?.message) {
|
||||
headers.Message = ctx.data.message;
|
||||
}
|
||||
if (ctx.data?.contentType) {
|
||||
headers["Content-Type"] = ctx.data.contentType;
|
||||
}
|
||||
|
||||
const ntfyUrl = ctx.config?.url || "https://ntfy.sh/scrunner";
|
||||
log.info(
|
||||
{ ntfyUrl, filename, length: file.length },
|
||||
"ntfy uploading file",
|
||||
);
|
||||
await $axios.put(ntfyUrl, file, {
|
||||
headers,
|
||||
maxBodyLength: Infinity,
|
||||
maxContentLength: Infinity,
|
||||
});
|
||||
return { sent: "true" };
|
||||
}
|
||||
|
||||
log.info("ntfy sending message to %s", ntfyUrl);
|
||||
const truncatedMessage = ctx.data?.message?.substring(0, 100);
|
||||
log.info("ntfy messsage: %s", truncatedMessage);
|
||||
if (ctx.data?.attach) {
|
||||
log.info("ntfy: setting attach %s", ctx.data.attach);
|
||||
headers.Attach = ctx.data.attach;
|
||||
}
|
||||
|
||||
await $axios.post(ntfyUrl, ctx.data?.message || "Hello from scrunner", {
|
||||
headers: headers
|
||||
})
|
||||
return {sent: "true"}
|
||||
const truncatedMessage = ctx.data?.message?.substring(0, 100);
|
||||
log.info("ntfy sending message to %s", ntfyUrl);
|
||||
log.info("ntfy messsage: %s", truncatedMessage);
|
||||
|
||||
await $axios.post(ntfyUrl, ctx.data?.message || "Hello from scrunner", {
|
||||
headers,
|
||||
});
|
||||
return { sent: "true" };
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import pino from "pino";
|
||||
|
||||
const LEVEL_TO_NUM = {
|
||||
trace: 10,
|
||||
debug: 20,
|
||||
info: 30,
|
||||
warn: 40,
|
||||
error: 50,
|
||||
fatal: 60,
|
||||
};
|
||||
|
||||
/**
|
||||
* Pino logger that collects log lines in memory (no SQLite / process logger).
|
||||
*
|
||||
* @returns {{ log: import("pino").Logger, logs: Array<{ ts: string, level: number, msg?: string | null, payload?: unknown }> }}
|
||||
*/
|
||||
export function createDryRunLogger() {
|
||||
/** @type {Array<{ ts: string, level: number, msg?: string | null, payload?: unknown }>} */
|
||||
const logs = [];
|
||||
|
||||
const dest = {
|
||||
write(line) {
|
||||
let record;
|
||||
try {
|
||||
record = JSON.parse(typeof line === "string" ? line : String(line));
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const ts =
|
||||
typeof record.time === "number"
|
||||
? new Date(record.time).toISOString()
|
||||
: typeof record.time === "string"
|
||||
? record.time
|
||||
: new Date().toISOString();
|
||||
|
||||
const level =
|
||||
typeof record.level === "number"
|
||||
? record.level
|
||||
: LEVEL_TO_NUM[record.level] ?? LEVEL_TO_NUM.info;
|
||||
|
||||
const { time: _time, level: _level, msg = null, ...rest } = record;
|
||||
logs.push({
|
||||
ts,
|
||||
level,
|
||||
msg,
|
||||
payload: Object.keys(rest).length ? rest : null,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const log = pino({ level: "trace" }, dest);
|
||||
return { log, logs };
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {unknown} value
|
||||
*/
|
||||
export function safeSerialize(value) {
|
||||
const seen = new WeakSet();
|
||||
try {
|
||||
return JSON.parse(
|
||||
JSON.stringify(value, (_key, v) => {
|
||||
if (typeof v === "bigint") return v.toString();
|
||||
if (typeof v === "object" && v !== null) {
|
||||
if (seen.has(v)) return "[Circular]";
|
||||
seen.add(v);
|
||||
}
|
||||
return v;
|
||||
}),
|
||||
);
|
||||
} catch (err) {
|
||||
return {
|
||||
error: "output could not be serialized",
|
||||
detail: err instanceof Error ? err.message : String(err),
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { clearScriptCache } from "../../script-sandbox.js";
|
||||
import { clearScriptCache, runScriptSource } from "../../script-sandbox.js";
|
||||
import * as fsStore from "../../fs-store.js";
|
||||
import { createDryRunLogger, safeSerialize } from "./dry-run-logger.js";
|
||||
|
||||
/**
|
||||
* @param {{ referencedScripts: () => Set<string> }} registry
|
||||
@@ -60,5 +61,51 @@ export default function scriptsPluginFactory(registry) {
|
||||
clearScriptCache();
|
||||
return { ok: true };
|
||||
});
|
||||
|
||||
fastify.post("/scripts/:name/dry-run", async (req, reply) => {
|
||||
const { name } = /** @type {{ name: string }} */ (req.params);
|
||||
try {
|
||||
fsStore.assertScriptName(name);
|
||||
} catch (err) {
|
||||
return reply.code(err.statusCode ?? 400).send({ error: err.message });
|
||||
}
|
||||
|
||||
const body = /** @type {{ content?: string, data?: unknown, config?: unknown }} */ (
|
||||
req.body ?? {}
|
||||
);
|
||||
if (typeof body.content !== "string") {
|
||||
return reply.code(400).send({ error: "content is required" });
|
||||
}
|
||||
|
||||
const ctx = {
|
||||
data: body.data ?? null,
|
||||
config: body.config ?? null,
|
||||
};
|
||||
|
||||
const { log, logs } = createDryRunLogger();
|
||||
const started = Date.now();
|
||||
|
||||
try {
|
||||
const output = await runScriptSource(name, body.content, ctx, {
|
||||
log,
|
||||
workflowName: "dry-run",
|
||||
});
|
||||
return {
|
||||
status: "success",
|
||||
output: safeSerialize(output),
|
||||
error: null,
|
||||
logs,
|
||||
durationMs: Date.now() - started,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
status: "failed",
|
||||
output: null,
|
||||
error: err instanceof Error ? err.message : String(err),
|
||||
logs,
|
||||
durationMs: Date.now() - started,
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
name: Comic - monkeyuser to ntfy
|
||||
scripts:
|
||||
- script: fetch-html.js
|
||||
config:
|
||||
url: "https://www.monkeyuser.com/"
|
||||
outputVar: "httpResponse"
|
||||
selector: ".comic img"
|
||||
jsonata: |
|
||||
{"url": "https://www.monkeyuser.com" & [attributes.src][0], "title": [attributes.title][0]}
|
||||
- script: jsonata.js
|
||||
config:
|
||||
expression: |
|
||||
{"data": {"title": httpResponse.title, "message": httpResponse.title, "attach": httpResponse.url}}
|
||||
- fetch-binary.js
|
||||
- script: ntfy.js
|
||||
config:
|
||||
url: https://ntfy.sh/scrunner
|
||||
|
||||
triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /new
|
||||
@@ -4,3 +4,4 @@ scripts:
|
||||
- manual-trigger.yaml
|
||||
- cron-example.yaml
|
||||
- fetch-devto.yaml
|
||||
- comic-monkeyuser-to-ntfy.yaml
|
||||
|
||||
@@ -6,6 +6,8 @@ import { Layout } from "./components/Layout.jsx";
|
||||
import { AuthPage } from "./pages/AuthPage.jsx";
|
||||
import { HomePage } from "./pages/HomePage.jsx";
|
||||
import { ScriptsPage } from "./pages/ScriptsPage.jsx";
|
||||
import { ScriptDryRunPage } from "./pages/ScriptDryRunPage.jsx";
|
||||
import { ScriptEditPage, ScriptNewPage } from "./pages/ScriptEditPage.jsx";
|
||||
import { WorkflowsPage } from "./pages/WorkflowsPage.jsx";
|
||||
import { EventsPage } from "./pages/EventsPage.jsx";
|
||||
import { EventDetailPage } from "./pages/EventDetailPage.jsx";
|
||||
@@ -45,6 +47,9 @@ export function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/scripts" element={<ScriptsPage />} />
|
||||
<Route path="/scripts/new" element={<ScriptNewPage />} />
|
||||
<Route path="/scripts/:name/dry-run" element={<ScriptDryRunPage />} />
|
||||
<Route path="/scripts/:name/edit" element={<ScriptEditPage />} />
|
||||
<Route path="/workflows" element={<WorkflowsPage />} />
|
||||
<Route path="/events" element={<EventsPage />} />
|
||||
<Route path="/events/:id" element={<EventDetailPage />} />
|
||||
|
||||
@@ -105,6 +105,19 @@ export function useDeleteScript() {
|
||||
});
|
||||
}
|
||||
|
||||
export function useDryRunScript() {
|
||||
return useMutation({
|
||||
mutationFn: async ({ name, content, data, config }) =>
|
||||
(
|
||||
await api.post(`/scripts/${encodeURIComponent(name)}/dry-run`, {
|
||||
content,
|
||||
data,
|
||||
config,
|
||||
})
|
||||
).data,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkflows(owner) {
|
||||
return useQuery({
|
||||
queryKey: ["workflows", owner ?? "all"],
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
import Editor from "@monaco-editor/react";
|
||||
import { useTheme } from "../theme.jsx";
|
||||
|
||||
export function CodeEditor({ language, value, onChange, height = "50vh" }) {
|
||||
export function CodeEditor({ language, value, onChange, height = "50vh", readOnly = false }) {
|
||||
const { theme } = useTheme();
|
||||
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-box border border-base-300">
|
||||
<div className="overflow-hidden rounded-box border border-base-300 h-full min-h-0">
|
||||
<Editor
|
||||
height={height}
|
||||
language={language}
|
||||
value={value}
|
||||
onChange={(v) => onChange(v ?? "")}
|
||||
onChange={readOnly ? undefined : (v) => onChange(v ?? "")}
|
||||
theme={theme === "dark" ? "vs-dark" : "light"}
|
||||
options={{
|
||||
readOnly,
|
||||
minimap: { enabled: !isMobile },
|
||||
lineNumbers: "on",
|
||||
tabSize: 2,
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from "react";
|
||||
import { levelName } from "../lib/format.jsx";
|
||||
|
||||
export function LogViewer({ logs = [], className = "" }) {
|
||||
const [wordWrap, setWordWrap] = useState(true);
|
||||
|
||||
return (
|
||||
<section className={`flex min-h-0 flex-col ${className}`}>
|
||||
<div className="mb-2 flex shrink-0 items-center justify-between gap-2">
|
||||
<h2 className="font-semibold text-sm">Logs</h2>
|
||||
<label className="label cursor-pointer gap-2 py-0">
|
||||
<span className="label-text text-sm">Word wrap</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-sm"
|
||||
checked={wordWrap}
|
||||
onChange={(e) => setWordWrap(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mockup-code min-h-0 flex-1 overflow-auto text-xs">
|
||||
{logs.length === 0 ? (
|
||||
<div className="flex gap-3 px-5 py-0.5 font-mono opacity-50">
|
||||
<span className="w-12 shrink-0 text-right">—</span>
|
||||
<span>no logs</span>
|
||||
</div>
|
||||
) : (
|
||||
logs.map((l, i) => (
|
||||
<div key={l.id ?? i} className="flex gap-3 px-5 py-0.5 font-mono">
|
||||
<span className="w-12 shrink-0 text-right opacity-50">
|
||||
{levelName(l.level)}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
wordWrap
|
||||
? "min-w-0 flex-1 whitespace-pre-wrap break-words"
|
||||
: "whitespace-pre"
|
||||
}
|
||||
>
|
||||
{l.ts} {l.msg ?? ""}
|
||||
{l.payload ? ` ${JSON.stringify(l.payload)}` : ""}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -46,7 +46,7 @@ export function MermaidDiagram({ chart, scriptIds = {} }) {
|
||||
el.style.cursor = "pointer";
|
||||
el.setAttribute("title", script);
|
||||
el.addEventListener("click", () => {
|
||||
navigate(`/scripts?edit=${encodeURIComponent(script)}`);
|
||||
navigate(`/scripts/${encodeURIComponent(script)}/edit`);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
export const NEW_SCRIPT_TEMPLATE = `export default async function main(ctx) {
|
||||
return ctx;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DEFAULT_INPUT_CONTEXT = `{
|
||||
"data": {},
|
||||
"config": {}
|
||||
}
|
||||
`;
|
||||
|
||||
export function normalizeScriptName(name) {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return "";
|
||||
return trimmed.endsWith(".js") ? trimmed : `${trimmed}.js`;
|
||||
}
|
||||
|
||||
export function prettyJson(value) {
|
||||
if (value === null || value === undefined) return "";
|
||||
try {
|
||||
return JSON.stringify(value, null, 2);
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { LuArrowLeft } from "react-icons/lu";
|
||||
import { useRun } from "../api/hooks.js";
|
||||
import { formatTime, levelName, StatusBadge } from "../lib/format.jsx";
|
||||
import { LogViewer } from "../components/LogViewer.jsx";
|
||||
import { formatTime, StatusBadge } from "../lib/format.jsx";
|
||||
|
||||
export function EventDetailPage() {
|
||||
const { id } = useParams();
|
||||
const { data: run, isLoading, error } = useRun(id);
|
||||
const [wordWrap, setWordWrap] = useState(true);
|
||||
|
||||
if (isLoading) return <span className="loading loading-spinner loading-lg" />;
|
||||
if (error || !run) return <p className="text-error">Event not found</p>;
|
||||
@@ -68,7 +67,7 @@ export function EventDetailPage() {
|
||||
<tr key={s.id}>
|
||||
<td>{s.step_index}</td>
|
||||
<td className="font-mono">
|
||||
<Link className="link" to={`/scripts?edit=${encodeURIComponent(s.script)}`}>
|
||||
<Link className="link" to={`/scripts/${encodeURIComponent(s.script)}/edit`}>
|
||||
{s.script}
|
||||
</Link>
|
||||
</td>
|
||||
@@ -84,46 +83,7 @@ export function EventDetailPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<h2 className="font-semibold">Logs</h2>
|
||||
<label className="label cursor-pointer gap-2 py-0">
|
||||
<span className="label-text text-sm">Word wrap</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-sm"
|
||||
checked={wordWrap}
|
||||
onChange={(e) => setWordWrap(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mockup-code text-xs max-h-[50vh] overflow-auto">
|
||||
{(run.logs ?? []).length === 0 ? (
|
||||
<div className="flex gap-3 px-5 py-0.5 font-mono opacity-50">
|
||||
<span className="w-12 shrink-0 text-right">—</span>
|
||||
<span>no logs</span>
|
||||
</div>
|
||||
) : (
|
||||
run.logs.map((l) => (
|
||||
<div key={l.id} className="flex gap-3 px-5 py-0.5 font-mono">
|
||||
<span className="w-12 shrink-0 text-right opacity-50">
|
||||
{levelName(l.level)}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
wordWrap
|
||||
? "min-w-0 flex-1 whitespace-pre-wrap break-words"
|
||||
: "whitespace-pre"
|
||||
}
|
||||
>
|
||||
{l.ts} {l.msg ?? ""}
|
||||
{l.payload ? ` ${JSON.stringify(l.payload)}` : ""}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<LogViewer logs={run.logs ?? []} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,214 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useLocation, useParams } from "react-router-dom";
|
||||
import { LuArrowLeft, LuPlay, LuSave } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDryRunScript,
|
||||
useSaveScript,
|
||||
useScript,
|
||||
} from "../api/hooks.js";
|
||||
import { CodeEditor } from "../components/CodeEditor.jsx";
|
||||
import { LogViewer } from "../components/LogViewer.jsx";
|
||||
import { StatusBadge } from "../lib/format.jsx";
|
||||
import {
|
||||
DEFAULT_INPUT_CONTEXT,
|
||||
NEW_SCRIPT_TEMPLATE,
|
||||
normalizeScriptName,
|
||||
prettyJson,
|
||||
} from "../lib/script.js";
|
||||
|
||||
export function ScriptDryRunPage() {
|
||||
const { name: rawName } = useParams();
|
||||
const name = decodeURIComponent(rawName ?? "");
|
||||
const location = useLocation();
|
||||
const stateContent = location.state?.content;
|
||||
|
||||
const existing = useScript(name, stateContent == null);
|
||||
const dryRun = useDryRunScript();
|
||||
const save = useSaveScript();
|
||||
|
||||
const [content, setContent] = useState("");
|
||||
const [inputJson, setInputJson] = useState(DEFAULT_INPUT_CONTEXT);
|
||||
const [outputJson, setOutputJson] = useState("");
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [runStatus, setRunStatus] = useState(null);
|
||||
const [parseError, setParseError] = useState(null);
|
||||
const [contentReady, setContentReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (stateContent != null) {
|
||||
setContent(stateContent);
|
||||
setContentReady(true);
|
||||
return;
|
||||
}
|
||||
if (existing.isLoading) return;
|
||||
if (existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
setContentReady(true);
|
||||
return;
|
||||
}
|
||||
if (existing.isError) {
|
||||
setContent(NEW_SCRIPT_TEMPLATE);
|
||||
setContentReady(true);
|
||||
}
|
||||
}, [stateContent, existing.data, existing.isLoading, existing.isError]);
|
||||
|
||||
const backHref = `/scripts/${encodeURIComponent(name)}/edit`;
|
||||
|
||||
const lastRun = dryRun.data;
|
||||
|
||||
useEffect(() => {
|
||||
if (!lastRun) return;
|
||||
setRunStatus(lastRun.status);
|
||||
setLogs(lastRun.logs ?? []);
|
||||
if (lastRun.status === "success") {
|
||||
setOutputJson(prettyJson(lastRun.output));
|
||||
} else {
|
||||
setOutputJson(prettyJson({ error: lastRun.error ?? "run failed" }));
|
||||
}
|
||||
}, [lastRun]);
|
||||
|
||||
const runDisabledReason = useMemo(() => {
|
||||
if (!contentReady) return "loading script";
|
||||
if (!name) return "missing script name";
|
||||
if (dryRun.isPending) return "running";
|
||||
return null;
|
||||
}, [contentReady, name, dryRun.isPending]);
|
||||
|
||||
function parseInputContext() {
|
||||
let parsed;
|
||||
try {
|
||||
parsed = JSON.parse(inputJson);
|
||||
} catch (err) {
|
||||
throw new Error(err instanceof Error ? err.message : "invalid JSON");
|
||||
}
|
||||
if (parsed == null || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||||
throw new Error('input context must be a JSON object with "data" and/or "config"');
|
||||
}
|
||||
return {
|
||||
data: "data" in parsed ? parsed.data : null,
|
||||
config: "config" in parsed ? parsed.config : null,
|
||||
};
|
||||
}
|
||||
|
||||
function onRun() {
|
||||
setParseError(null);
|
||||
let ctx;
|
||||
try {
|
||||
ctx = parseInputContext();
|
||||
} catch (err) {
|
||||
setParseError(err instanceof Error ? err.message : String(err));
|
||||
return;
|
||||
}
|
||||
|
||||
dryRun.mutate({
|
||||
name,
|
||||
content,
|
||||
data: ctx.data,
|
||||
config: ctx.config,
|
||||
});
|
||||
}
|
||||
|
||||
function onSave() {
|
||||
save.mutate({ name, content });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-5rem)] min-h-[32rem] flex-col gap-3">
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
||||
<Link to={backHref} className="btn btn-ghost btn-sm btn-square" aria-label="Back">
|
||||
<LuArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<h1 className="truncate font-mono text-lg font-semibold">{name}</h1>
|
||||
<span className="badge badge-ghost badge-sm">dry run</span>
|
||||
{runStatus ? <StatusBadge status={runStatus} /> : null}
|
||||
{lastRun?.durationMs != null ? (
|
||||
<span className="text-sm opacity-60">{lastRun.durationMs}ms</span>
|
||||
) : null}
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={Boolean(runDisabledReason)}
|
||||
onClick={onRun}
|
||||
>
|
||||
{dryRun.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuPlay className="size-4" />
|
||||
)}
|
||||
Run
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline btn-sm"
|
||||
disabled={save.isPending || !contentReady}
|
||||
onClick={onSave}
|
||||
>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{parseError ? (
|
||||
<p className="text-error text-sm shrink-0">{parseError}</p>
|
||||
) : null}
|
||||
{dryRun.isError ? (
|
||||
<p className="text-error text-sm shrink-0">{errorMessage(dryRun.error)}</p>
|
||||
) : null}
|
||||
{save.isError ? (
|
||||
<p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
|
||||
) : null}
|
||||
{save.isSuccess ? (
|
||||
<p className="text-success text-sm shrink-0">Script saved</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-1 gap-3 lg:grid-cols-3">
|
||||
<section className="flex min-h-0 flex-col gap-1">
|
||||
<h2 className="shrink-0 text-sm font-semibold opacity-70">Input context</h2>
|
||||
<div className="min-h-0 flex-1">
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={inputJson}
|
||||
onChange={setInputJson}
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex min-h-0 flex-col gap-1">
|
||||
<h2 className="shrink-0 text-sm font-semibold opacity-70">Script</h2>
|
||||
<div className="min-h-0 flex-1">
|
||||
{!contentReady ? (
|
||||
<div className="flex h-full items-center justify-center rounded-box border border-base-300">
|
||||
<span className="loading loading-spinner" />
|
||||
</div>
|
||||
) : (
|
||||
<CodeEditor
|
||||
language="javascript"
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
height="100%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex min-h-0 flex-col gap-1">
|
||||
<h2 className="shrink-0 text-sm font-semibold opacity-70">Output</h2>
|
||||
<div className="min-h-0 flex-1">
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={outputJson}
|
||||
onChange={() => {}}
|
||||
readOnly
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<LogViewer logs={logs} className="h-48 shrink-0 lg:h-56" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import { LuArrowLeft, LuPlay, LuSave } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import { useSaveScript, useScript } from "../api/hooks.js";
|
||||
import { CodeEditor } from "../components/CodeEditor.jsx";
|
||||
import { NEW_SCRIPT_TEMPLATE, normalizeScriptName } from "../lib/script.js";
|
||||
|
||||
export function ScriptNewPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [name, setName] = useState("");
|
||||
const [content, setContent] = useState(
|
||||
location.state?.content ?? NEW_SCRIPT_TEMPLATE,
|
||||
);
|
||||
const save = useSaveScript();
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
const file = normalizeScriptName(name);
|
||||
if (!file) return;
|
||||
save.mutate(
|
||||
{ name: file, content },
|
||||
{
|
||||
onSuccess: () => navigate(`/scripts/${encodeURIComponent(file)}/edit`),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function openDryRun() {
|
||||
const file = normalizeScriptName(name);
|
||||
if (!file) return;
|
||||
navigate(`/scripts/${encodeURIComponent(file)}/dry-run`, {
|
||||
state: { content },
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-5rem)] min-h-[32rem] flex-col gap-3">
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
||||
<Link to="/scripts" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
|
||||
<LuArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<h1 className="text-xl font-semibold">New script</h1>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline btn-sm"
|
||||
disabled={!normalizeScriptName(name)}
|
||||
onClick={openDryRun}
|
||||
>
|
||||
<LuPlay className="size-4" />
|
||||
Dry run
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
form="script-edit-form"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={save.isPending || !normalizeScriptName(name)}
|
||||
>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="script-edit-form" onSubmit={onSave} className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<input
|
||||
className="input input-sm w-full max-w-md shrink-0"
|
||||
placeholder="name.js"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div className="min-h-0 flex-1">
|
||||
<CodeEditor language="javascript" value={content} onChange={setContent} height="100%" />
|
||||
</div>
|
||||
{save.isError ? (
|
||||
<p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
|
||||
) : null}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ScriptEditPage() {
|
||||
const { name: rawName } = useParams();
|
||||
const name = decodeURIComponent(rawName ?? "");
|
||||
const navigate = useNavigate();
|
||||
const existing = useScript(name);
|
||||
const save = useSaveScript();
|
||||
const [content, setContent] = useState("");
|
||||
const [contentReady, setContentReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (existing.isLoading) return;
|
||||
if (existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
setContentReady(true);
|
||||
}
|
||||
}, [existing.data, existing.isLoading]);
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
save.mutate({ name, content });
|
||||
}
|
||||
|
||||
function openDryRun() {
|
||||
navigate(`/scripts/${encodeURIComponent(name)}/dry-run`, {
|
||||
state: { content },
|
||||
});
|
||||
}
|
||||
|
||||
if (existing.isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[12rem] items-center justify-center">
|
||||
<span className="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (existing.isError) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Link to="/scripts" className="btn btn-ghost btn-sm">
|
||||
<LuArrowLeft className="size-4" />
|
||||
Back
|
||||
</Link>
|
||||
<p className="text-error">Script not found</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-5rem)] min-h-[32rem] flex-col gap-3">
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
||||
<Link to="/scripts" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
|
||||
<LuArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<h1 className="truncate font-mono text-xl font-semibold">{name}</h1>
|
||||
<div className="flex-1" />
|
||||
<button type="button" className="btn btn-outline btn-sm" onClick={openDryRun}>
|
||||
<LuPlay className="size-4" />
|
||||
Dry run
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
form="script-edit-form"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={save.isPending || !contentReady}
|
||||
>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="script-edit-form" onSubmit={onSave} className="min-h-0 flex-1">
|
||||
<CodeEditor language="javascript" value={content} onChange={setContent} height="100%" />
|
||||
</form>
|
||||
|
||||
{save.isError ? (
|
||||
<p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
|
||||
) : null}
|
||||
{save.isSuccess ? (
|
||||
<p className="text-success text-sm shrink-0">Script saved</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,89 +1,29 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { LuPencil, LuPlus, LuSave, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useState } from "react";
|
||||
import { Link, Navigate, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { LuPencil, LuPlay, LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteScript,
|
||||
useSaveScript,
|
||||
useScript,
|
||||
useScripts,
|
||||
} from "../api/hooks.js";
|
||||
import { CodeEditor } from "../components/CodeEditor.jsx";
|
||||
|
||||
const NEW_TEMPLATE = `export default async function main(ctx) {
|
||||
return ctx;
|
||||
}
|
||||
`;
|
||||
import { useDeleteScript, useScripts } from "../api/hooks.js";
|
||||
|
||||
export function ScriptsPage() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const editName = params.get("edit");
|
||||
const { data: scripts = [], isLoading } = useScripts();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [name, setName] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
|
||||
const existing = useScript(mode === "edit" ? name : null, mode === "edit");
|
||||
const save = useSaveScript();
|
||||
const del = useDeleteScript();
|
||||
|
||||
useEffect(() => {
|
||||
if (editName) {
|
||||
setMode("edit");
|
||||
setName(editName);
|
||||
}
|
||||
}, [editName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "edit" && existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
}
|
||||
}, [mode, existing.data]);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setName("");
|
||||
setContent(NEW_TEMPLATE);
|
||||
setParams({});
|
||||
}
|
||||
|
||||
function openEdit(script) {
|
||||
setMode("edit");
|
||||
setName(script);
|
||||
setParams({ edit: script });
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
setName("");
|
||||
setContent("");
|
||||
setParams({});
|
||||
}
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
const file = name.endsWith(".js") ? name : `${name}.js`;
|
||||
save.mutate(
|
||||
{ name: file, content },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setMode("edit");
|
||||
setName(file);
|
||||
setParams({ edit: file });
|
||||
},
|
||||
},
|
||||
);
|
||||
if (editName) {
|
||||
return <Navigate to={`/scripts/${encodeURIComponent(editName)}/edit`} replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-xl font-semibold">Scripts</h1>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<Link to="/scripts/new" className="btn btn-primary btn-sm">
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
@@ -94,22 +34,35 @@ export function ScriptsPage() {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th className="w-24" />
|
||||
<th className="w-28" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{scripts.map((s) => (
|
||||
<tr key={s} className="hover">
|
||||
<td className="font-mono">{s}</td>
|
||||
<td className="font-mono">
|
||||
<Link className="link" to={`/scripts/${encodeURIComponent(s)}/edit`}>
|
||||
{s}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Dry run"
|
||||
onClick={() =>
|
||||
navigate(`/scripts/${encodeURIComponent(s)}/dry-run`)
|
||||
}
|
||||
>
|
||||
<LuPlay className="size-4" />
|
||||
</button>
|
||||
<Link
|
||||
to={`/scripts/${encodeURIComponent(s)}/edit`}
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() => openEdit(s)}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
@@ -126,38 +79,6 @@ export function ScriptsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form onSubmit={onSave} className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold">{mode === "add" ? "New script" : name}</h2>
|
||||
<button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<input
|
||||
className="input input-sm w-full max-w-md"
|
||||
placeholder="name.js"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
) : null}
|
||||
{mode === "edit" && existing.isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : (
|
||||
<CodeEditor language="javascript" value={content} onChange={setContent} />
|
||||
)}
|
||||
{save.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(save.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary btn-sm" disabled={save.isPending}>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
@@ -175,10 +96,7 @@ export function ScriptsPage() {
|
||||
disabled={del.isPending}
|
||||
onClick={() =>
|
||||
del.mutate(confirmDelete, {
|
||||
onSuccess: () => {
|
||||
if (name === confirmDelete) closeForm();
|
||||
setConfirmDelete(null);
|
||||
},
|
||||
onSuccess: () => setConfirmDelete(null),
|
||||
})
|
||||
}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user