@lunora/studio 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/packem_chunks/log-drains-panel.js

@@ -0,0 +1,273 @@
+import { c } from 'react/compiler-runtime';
+import { useState } from 'react';
+import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
+import { C as Card, a as CardContent } from '../packem_shared/card-DURq3ElK.js';
+import { I as Input } from '../packem_shared/input-XH4r1Pt1.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { a as CLOUDFLARE_OBSERVABILITY_URL } from '../packem_shared/cf-links-BZfRdxSE.js';
+import { f as fireAndForget, e as errorMessage, g as copyToClipboard } from '../packem_shared/internal-CYcbqMjX.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const DestinationRow = (t0) => {
+  const $ = c(23);
+  const {
+    destination
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== destination.snippet) {
+    t1 = () => {
+      copyToClipboard(destination.snippet);
+    };
+    $[0] = destination.snippet;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onCopy = t1;
+  let t2;
+  if ($[2] !== destination.title) {
+    t2 = /* @__PURE__ */ jsxDEV("h4", {
+      className: "text-sm font-semibold",
+      children: destination.title
+    }, void 0, false);
+    $[2] = destination.title;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== destination.description) {
+    t3 = /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-muted-foreground",
+      children: destination.description
+    }, void 0, false);
+    $[4] = destination.description;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("div", {
+      children: [t2, t3]
+    }, void 0, true);
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const t5 = `drain-copy-${destination.id}`;
+  let t6;
+  if ($[9] !== t) {
+    t6 = t("Copy");
+    $[9] = t;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== onCopy || $[12] !== t5 || $[13] !== t6) {
+    t7 = /* @__PURE__ */ jsxDEV(Button, {
+      "data-testid": t5,
+      onClick: onCopy,
+      size: "sm",
+      variant: "outline",
+      children: t6
+    }, void 0, false);
+    $[11] = onCopy;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== t4 || $[16] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-start justify-between gap-3",
+      children: [t4, t7]
+    }, void 0, true);
+    $[15] = t4;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== destination.snippet) {
+    t9 = /* @__PURE__ */ jsxDEV("pre", {
+      className: "mt-2 overflow-x-auto rounded bg-muted p-2 font-mono text-xs",
+      children: destination.snippet
+    }, void 0, false);
+    $[18] = destination.snippet;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  let t10;
+  if ($[20] !== t8 || $[21] !== t9) {
+    t10 = /* @__PURE__ */ jsxDEV(Card, {
+      className: "py-0",
+      "data-testid": "drain-card",
+      children: /* @__PURE__ */ jsxDEV(CardContent, {
+        className: "p-3",
+        children: [t8, t9]
+      }, void 0, true)
+    }, void 0, false);
+    $[20] = t8;
+    $[21] = t9;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  return t10;
+};
+const LogDrainsPanel = () => {
+  const t = useT();
+  const destinations = [{
+    description: t("Stream every request log to R2, a SIEM, or a third-party log service."),
+    id: "logpush",
+    snippet: ["{", '  "logpush": true', "}"].join("\n"),
+    title: t("Logpush")
+  }, {
+    description: t("Send logs programmatically to a Worker for custom capture and forwarding."),
+    id: "tail-worker",
+    snippet: ["{", '  "tail_consumers": [{ "service": "my-log-forwarder" }]', "}"].join("\n"),
+    title: t("Tail Workers")
+  }, {
+    description: t("Retain and query recent request logs directly in Cloudflare's dashboard."),
+    id: "workers-logs",
+    snippet: ["{", '  "observability": { "enabled": true }', "}"].join("\n"),
+    title: t("Workers Logs")
+  }];
+  const [webhookUrl, setWebhookUrl] = useState("");
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState(null);
+  const sendTest = async () => {
+    const url = webhookUrl.trim();
+    if (url === "") {
+      return;
+    }
+    const fetchFunction = "fetch" in globalThis ? globalThis.fetch : void 0;
+    if (fetchFunction === void 0) {
+      setResult({
+        kind: "error",
+        message: t("fetch is unavailable in this environment.")
+      });
+      return;
+    }
+    const sampleEvent = {
+      durationMs: 12,
+      function: "messages:list",
+      outcome: "ok",
+      shard: "root",
+      source: "lunora",
+      tablesRead: ["messages"],
+      tablesWritten: [],
+      ts: (/* @__PURE__ */ new Date()).toISOString(),
+      type: "request"
+    };
+    setSending(true);
+    setResult(null);
+    const startedAt = performance.now();
+    try {
+      const response = await fetchFunction(url, {
+        body: JSON.stringify(sampleEvent),
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      setResult({
+        kind: "success",
+        latencyMs: Math.round(performance.now() - startedAt),
+        status: response.status
+      });
+    } catch (error) {
+      setResult({
+        kind: "error",
+        message: errorMessage(error)
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+  const onSendTest = () => {
+    fireAndForget(sendTest());
+  };
+  const onWebhookUrlChange = (event) => {
+    setWebhookUrl(event.target.value);
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "log-drains",
+    children: [/* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-3",
+      children: /* @__PURE__ */ jsxDEV("a", {
+        className: "text-sm text-primary underline-offset-4 hover:underline",
+        "data-testid": "drain-cf-link",
+        href: CLOUDFLARE_OBSERVABILITY_URL,
+        rel: "noreferrer",
+        target: "_blank",
+        children: t("Open in Cloudflare")
+      }, void 0, false)
+    }, void 0, false), /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-muted-foreground",
+      "data-testid": "drain-readonly-note",
+      children: t("Lunora does not ship logs itself — forwarding is handled by Cloudflare. Configure a destination below, then test your collector.")
+    }, void 0, false), /* @__PURE__ */ jsxDEV("section", {
+      className: "flex flex-col gap-3",
+      "data-testid": "drain-destinations",
+      children: [/* @__PURE__ */ jsxDEV("h3", {
+        className: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+        children: t("Cloudflare destinations")
+      }, void 0, false), destinations.map((destination) => /* @__PURE__ */ jsxDEV(DestinationRow, {
+        destination
+      }, destination.id, false))]
+    }, void 0, true), /* @__PURE__ */ jsxDEV(Card, {
+      className: "py-0",
+      children: /* @__PURE__ */ jsxDEV(CardContent, {
+        className: "p-3",
+        children: /* @__PURE__ */ jsxDEV("section", {
+          "data-testid": "drain-webhook",
+          children: [/* @__PURE__ */ jsxDEV("h3", {
+            className: "mb-1 font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+            children: t("Webhook test")
+          }, void 0, false), /* @__PURE__ */ jsxDEV("p", {
+            className: "mb-2 text-sm text-muted-foreground",
+            children: t("POST a sample Lunora request-log envelope to your collector to confirm it is reachable.")
+          }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap items-center gap-2",
+            children: [/* @__PURE__ */ jsxDEV(Input, {
+              className: "min-w-[20rem] flex-1",
+              "data-testid": "drain-webhook-url",
+              onChange: onWebhookUrlChange,
+              placeholder: t("https://example.com/logs"),
+              type: "url",
+              value: webhookUrl
+            }, void 0, false), /* @__PURE__ */ jsxDEV(Button, {
+              "data-testid": "drain-webhook-test",
+              disabled: sending || webhookUrl.trim() === "",
+              onClick: onSendTest,
+              children: sending ? t("Sending…") : t("Send test event")
+            }, void 0, false)]
+          }, void 0, true), result !== null && /* @__PURE__ */ jsxDEV("p", {
+            className: result.kind === "success" ? "mt-2 text-sm text-muted-foreground" : "mt-2 text-sm text-destructive",
+            "data-testid": "drain-webhook-result",
+            role: result.kind === "error" ? "alert" : void 0,
+            children: result.kind === "success" ? t("Delivered — status {status} in {latency}ms", {
+              latency: result.latencyMs,
+              status: result.status
+            }) : t("Failed: {message}", {
+              message: result.message
+            })
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
+};
+
+export { LogDrainsPanel };