@lunora/studio 0.0.0 → 1.0.0-alpha.2

package/dist/packem_shared/FunctionStatsPanel-DboBl-XL.js

@@ -0,0 +1,432 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useState, useRef, useEffect } from 'react';
+import { L as LiveError } from './live-status-bPff1O7Y.js';
+import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { B as Badge } from './badge-B2PKA1-5.js';
+import { B as Button } from './button-BhsN2uZH.js';
+import { C as Card, a as CardContent } from './card-DURq3ElK.js';
+import { E as EmptyState } from './empty-state-DY_oe0k6.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from './table-_RzNvy3R.js';
+import { u as useLiveAdmin } from './use-live-admin-D1h1Fzsd.js';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
+import { d as formatTimestamp, c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { c as cn } from './utils-B05Dmz_H.js';
+import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const GET_FUNCTION_STATS = adminRef(ADMIN_FUNCTIONS.getFunctionStats);
+const KIND_VARIANT = {
+  action: "outline",
+  mutation: "default",
+  query: "secondary"
+};
+const formatMs = (ms) => {
+  if (ms < 1e3) {
+    return `${ms < 10 ? ms.toFixed(1) : Math.round(ms).toString()}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+const errorCell = (stat) => {
+  if (stat.calls === 0) {
+    return "—";
+  }
+  if (stat.errors === 0) {
+    return "0";
+  }
+  return `${stat.errors.toString()} (${(stat.errors / stat.calls * 100).toFixed(1)}%)`;
+};
+const conflictCell = (stat) => {
+  const conflicts = stat.conflicts ?? 0;
+  if (stat.calls === 0) {
+    return "—";
+  }
+  if (conflicts === 0) {
+    return "0";
+  }
+  return `${conflicts.toString()} (${(conflicts / stat.calls * 100).toFixed(1)}%)`;
+};
+const SORTERS = {
+  calls: (a, b) => b.calls - a.calls,
+  recent: (a, b) => b.lastCalledAt - a.lastCalledAt,
+  slowest: (a, b) => b.maxDurationMs - a.maxDurationMs
+};
+const FunctionStatsPanel = (t0) => {
+  const $ = c(48);
+  const {
+    functions,
+    initialShardKey
+  } = t0;
+  const client = useLunora();
+  const t = useT();
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  const [stats, setStats] = useState(null);
+  const [error, setError] = useState(null);
+  const [sortKey, setSortKey] = useState("recent");
+  const [liveError, setLiveError] = useState(void 0);
+  const mountedRef = useRef(true);
+  let t1;
+  let t2;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      mountedRef.current = true;
+      return () => {
+        mountedRef.current = false;
+      };
+    };
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[2] !== functions) {
+    t3 = new Map((functions ?? []).map(_temp));
+    $[2] = functions;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const kindByPath = t3;
+  let t4;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (result) => {
+      setError(null);
+      setLiveError(void 0);
+      setStats(result.functions);
+    };
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const applyResult = t4;
+  let t5;
+  if ($[5] !== client) {
+    t5 = async (shard) => {
+      try {
+        const next = await client.query(GET_FUNCTION_STATS, {}, callOptions(shard));
+        if (mountedRef.current) {
+          applyResult(next);
+        }
+      } catch (t62) {
+        const error_ = t62;
+        if (mountedRef.current) {
+          setStats(null);
+          setError(errorMessage(error_));
+        }
+        throw error_;
+      }
+    };
+    $[5] = client;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const refresh = t5;
+  const committedShard = useLiveShardSeed(shardKey, refresh);
+  let t6;
+  if ($[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {};
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = (next_0) => {
+      if (mountedRef.current) {
+        applyResult(next_0);
+      }
+    };
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t8 = (message) => {
+      if (mountedRef.current) {
+        setLiveError(message);
+      }
+    };
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  useLiveAdmin(ADMIN_FUNCTIONS.getFunctionStats, t6, committedShard ?? "", t7, committedShard !== void 0, t8);
+  let t9;
+  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = (event) => {
+      setSortKey(event.currentTarget.dataset.sort);
+    };
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const selectSort = t9;
+  let t10;
+  if ($[11] !== error || $[12] !== kindByPath || $[13] !== liveError || $[14] !== shardKey || $[15] !== sortKey || $[16] !== stats || $[17] !== t) {
+    const sorted = stats === null ? [] : stats.toSorted(SORTERS[sortKey]);
+    let t11;
+    if ($[19] !== t) {
+      t11 = t("Recent");
+      $[19] = t;
+      $[20] = t11;
+    } else {
+      t11 = $[20];
+    }
+    let t12;
+    if ($[21] !== t11) {
+      t12 = {
+        key: "recent",
+        label: t11
+      };
+      $[21] = t11;
+      $[22] = t12;
+    } else {
+      t12 = $[22];
+    }
+    let t13;
+    if ($[23] !== t) {
+      t13 = t("Most called");
+      $[23] = t;
+      $[24] = t13;
+    } else {
+      t13 = $[24];
+    }
+    let t14;
+    if ($[25] !== t13) {
+      t14 = {
+        key: "calls",
+        label: t13
+      };
+      $[25] = t13;
+      $[26] = t14;
+    } else {
+      t14 = $[26];
+    }
+    let t15;
+    if ($[27] !== t) {
+      t15 = t("Slowest");
+      $[27] = t;
+      $[28] = t15;
+    } else {
+      t15 = $[28];
+    }
+    let t16;
+    if ($[29] !== t15) {
+      t16 = {
+        key: "slowest",
+        label: t15
+      };
+      $[29] = t15;
+      $[30] = t16;
+    } else {
+      t16 = $[30];
+    }
+    let t17;
+    if ($[31] !== t12 || $[32] !== t14 || $[33] !== t16) {
+      t17 = [t12, t14, t16];
+      $[31] = t12;
+      $[32] = t14;
+      $[33] = t16;
+      $[34] = t17;
+    } else {
+      t17 = $[34];
+    }
+    const sortButtons = t17;
+    let t18;
+    if ($[35] !== shardKey) {
+      t18 = /* @__PURE__ */ jsxDEV(ShardInput, {
+        onChange: setShardKey,
+        testId: "fs-shard-input",
+        value: shardKey
+      }, void 0, false);
+      $[35] = shardKey;
+      $[36] = t18;
+    } else {
+      t18 = $[36];
+    }
+    let t19;
+    if ($[37] !== liveError) {
+      t19 = /* @__PURE__ */ jsxDEV(LiveError, {
+        message: liveError,
+        prefix: "fs"
+      }, void 0, false);
+      $[37] = liveError;
+      $[38] = t19;
+    } else {
+      t19 = $[38];
+    }
+    let t20;
+    if ($[39] !== sortButtons || $[40] !== sortKey) {
+      t20 = /* @__PURE__ */ jsxDEV("div", {
+        className: "ml-auto flex items-center gap-1",
+        role: "group",
+        children: sortButtons.map((option) => /* @__PURE__ */ jsxDEV(Button, {
+          "data-sort": option.key,
+          "data-testid": `fs-sort-${option.key}`,
+          onClick: selectSort,
+          size: "sm",
+          type: "button",
+          variant: sortKey === option.key ? "secondary" : "ghost",
+          children: option.label
+        }, option.key, false))
+      }, void 0, false);
+      $[39] = sortButtons;
+      $[40] = sortKey;
+      $[41] = t20;
+    } else {
+      t20 = $[41];
+    }
+    let t21;
+    if ($[42] !== t18 || $[43] !== t19 || $[44] !== t20) {
+      t21 = /* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [t18, t19, t20]
+      }, void 0, true);
+      $[42] = t18;
+      $[43] = t19;
+      $[44] = t20;
+      $[45] = t21;
+    } else {
+      t21 = $[45];
+    }
+    let t22;
+    if ($[46] !== error) {
+      t22 = error !== null && /* @__PURE__ */ jsxDEV("p", {
+        className: "text-sm text-destructive",
+        "data-testid": "fs-error",
+        role: "alert",
+        children: error
+      }, void 0, false);
+      $[46] = error;
+      $[47] = t22;
+    } else {
+      t22 = $[47];
+    }
+    t10 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-4",
+      "data-testid": "lunora-function-stats",
+      children: [t21, t22, stats !== null && sorted.length === 0 && error === null && /* @__PURE__ */ jsxDEV(EmptyState, {
+        description: t("Per-function call counts, error rates, and latency land here after your first request."),
+        icon: /* @__PURE__ */ jsxDEV("svg", {
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.6,
+          viewBox: "0 0 24 24",
+          children: [/* @__PURE__ */ jsxDEV("path", {
+            d: "M3 3v18h18"
+          }, void 0, false), /* @__PURE__ */ jsxDEV("path", {
+            d: "M7 14l4-4 3 3 5-6"
+          }, void 0, false)]
+        }, void 0, true),
+        testId: "fs-empty",
+        title: t("No functions have run on this shard yet.")
+      }, void 0, false), sorted.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "overflow-hidden py-0",
+        children: /* @__PURE__ */ jsxDEV(CardContent, {
+          className: "px-0",
+          children: /* @__PURE__ */ jsxDEV(Table, {
+            "data-testid": "fs-table",
+            children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+              children: /* @__PURE__ */ jsxDEV(TableRow, {
+                children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("function")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("kind")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("calls")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("errors")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("conflicts")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("avg")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("max")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("last run")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("last error")
+                }, void 0, false)]
+              }, void 0, true)
+            }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+              children: sorted.map((stat) => {
+                const kind = kindByPath.get(stat.path);
+                return /* @__PURE__ */ jsxDEV(TableRow, {
+                  "data-testid": `fs-row-${stat.path}`,
+                  children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "font-medium",
+                    children: stat.path
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    children: kind === void 0 ? /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground",
+                      children: "—"
+                    }, void 0, false) : /* @__PURE__ */ jsxDEV(Badge, {
+                      variant: KIND_VARIANT[kind],
+                      children: kind
+                    }, void 0, false)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "text-right tabular-nums",
+                    children: stat.calls
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: cn("text-right tabular-nums", stat.errors > 0 && "text-destructive"),
+                    children: errorCell(stat)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: cn("text-right tabular-nums", (stat.conflicts ?? 0) > 0 && "text-warning"),
+                    children: conflictCell(stat)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "text-right tabular-nums",
+                    children: stat.calls === 0 ? "—" : formatMs(stat.totalDurationMs / stat.calls)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "text-right tabular-nums",
+                    children: stat.calls === 0 ? "—" : formatMs(stat.maxDurationMs)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "text-muted-foreground",
+                    children: formatTimestamp(stat.lastCalledAt, "—")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                    className: "max-w-[24ch] truncate text-destructive",
+                    title: stat.lastErrorMessage ?? void 0,
+                    children: stat.lastErrorMessage ?? /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground",
+                      children: "—"
+                    }, void 0, false)
+                  }, void 0, false)]
+                }, stat.path, true);
+              })
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true);
+    $[11] = error;
+    $[12] = kindByPath;
+    $[13] = liveError;
+    $[14] = shardKey;
+    $[15] = sortKey;
+    $[16] = stats;
+    $[17] = t;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  return t10;
+};
+function _temp(descriptor) {
+  return [descriptor.path, descriptor.kind];
+}
+
+export { FunctionStatsPanel };