@lunora/studio 0.0.0 → 1.0.0-alpha.1

package/dist/packem_shared/InsightsPanel-DaZPnSgt.js

@@ -0,0 +1,423 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useNavigate } from '@tanstack/react-router';
+import { useState, useEffect, useMemo } from 'react';
+import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { B as Button } from './button-BhsN2uZH.js';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
+import { f as fireAndForget, c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { r as recordShard } from './shard-history-DyebH1R5.js';
+import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
+import { a as advisoryRow, A as AdvisorView } from './advisor-view-DBlzJi6C.js';
+import { ConfirmButton } from './ConfirmButton-WQVUoGFb.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+import { deriveInsights } from './DEFAULT_INSIGHT_THRESHOLDS-DjF0h-gA.js';
+import { runAdvisor, RUNTIME_LINTS } from '@lunora/advisor';
+
+const hasIndexMetadata = (metadata) => {
+  const {
+    suggestedIndex,
+    table
+  } = metadata;
+  if (typeof table !== "string" || table.length === 0) {
+    return false;
+  }
+  if (typeof suggestedIndex !== "object" || suggestedIndex === null || !Array.isArray(suggestedIndex["fields"]) || suggestedIndex["fields"].length === 0) {
+    return false;
+  }
+  return true;
+};
+const composeCreateIndex = (table, indexName, fields) => {
+  const quotedTable = `"${table}"`;
+  const quotedIndex = `"${indexName}"`;
+  const quotedColumns = fields.map((f) => `"${f}"`).join(", ");
+  return `CREATE INDEX IF NOT EXISTS ${quotedIndex} ON ${quotedTable} (${quotedColumns});`;
+};
+
+const ApplyIndexButton = (t0) => {
+  const $ = c(19);
+  const {
+    fields,
+    indexName,
+    table,
+    testId
+  } = t0;
+  const t = useT();
+  const [applied, setApplied] = useState(false);
+  let t1;
+  if ($[0] !== fields || $[1] !== indexName || $[2] !== table) {
+    t1 = () => {
+      const clipboard = "navigator" in globalThis ? globalThis.navigator.clipboard : void 0;
+      if (clipboard === void 0) {
+        return;
+      }
+      const sql = composeCreateIndex(table, indexName, fields);
+      fireAndForget(clipboard.writeText(sql));
+      setApplied(true);
+    };
+    $[0] = fields;
+    $[1] = indexName;
+    $[2] = table;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const onConfirm = t1;
+  if (applied) {
+    const t22 = `${testId}-applied`;
+    let t32;
+    if ($[4] !== t) {
+      t32 = t("CREATE INDEX SQL copied to clipboard.");
+      $[4] = t;
+      $[5] = t32;
+    } else {
+      t32 = $[5];
+    }
+    let t42;
+    if ($[6] !== t22 || $[7] !== t32) {
+      t42 = /* @__PURE__ */ jsxDEV("span", {
+        className: "text-xs text-muted-foreground",
+        "data-testid": t22,
+        children: t32
+      }, void 0, false);
+      $[6] = t22;
+      $[7] = t32;
+      $[8] = t42;
+    } else {
+      t42 = $[8];
+    }
+    return t42;
+  }
+  let t2;
+  if ($[9] !== t) {
+    t2 = t("Apply?");
+    $[9] = t;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== t || $[12] !== table) {
+    t3 = t("Apply index on {table}", {
+      table
+    });
+    $[11] = t;
+    $[12] = table;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== onConfirm || $[15] !== t2 || $[16] !== t3 || $[17] !== testId) {
+    t4 = /* @__PURE__ */ jsxDEV(ConfirmButton, {
+      confirmLabel: t2,
+      onConfirm,
+      testId,
+      children: t3
+    }, void 0, false);
+    $[14] = onConfirm;
+    $[15] = t2;
+    $[16] = t3;
+    $[17] = testId;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
+};
+
+const reconcileIndexHits = (declaredIndexes, indexHits) => {
+  const readsByKey = /* @__PURE__ */ new Map();
+  for (const hit of indexHits) {
+    const key = `${hit.table} ${hit.index}`;
+    readsByKey.set(key, (readsByKey.get(key) ?? 0) + hit.reads);
+  }
+  return declaredIndexes.map((declared) => {
+    return {
+      index: declared.index,
+      reads: readsByKey.get(`${declared.table} ${declared.index}`) ?? 0,
+      table: declared.table
+    };
+  });
+};
+const aggregateTableScans = (functions) => {
+  const scansByTable = /* @__PURE__ */ new Map();
+  for (const callStat of functions) {
+    for (const attribution of callStat.scannedTables ?? []) {
+      scansByTable.set(attribution.table, (scansByTable.get(attribution.table) ?? 0) + attribution.scans);
+    }
+  }
+  return [...scansByTable].map(([table, scans]) => {
+    return {
+      scans,
+      table
+    };
+  });
+};
+const declaredIndexesFor = (table, indexes) => indexes.map((index) => {
+  return {
+    index: index.name,
+    table
+  };
+});
+const deriveRuntimeAdvisories = (inputs) => {
+  const inDoIndexHits = reconcileIndexHits(inputs.declaredIndexes ?? [], inputs.indexHits ?? []);
+  const inDoTableScans = aggregateTableScans(inputs.functions ?? []);
+  const inDoShardTraffic = inputs.shardTraffic ?? [];
+  const analytics = inputs.analyticsMetrics;
+  const indexHits = analytics && analytics.indexHits.length > 0 ? analytics.indexHits : inDoIndexHits;
+  const tableScans = analytics && analytics.tableScans.length > 0 ? analytics.tableScans : inDoTableScans;
+  const shardTraffic = analytics && analytics.shardTraffic.length > 0 ? analytics.shardTraffic : inDoShardTraffic;
+  const findings = runAdvisor({
+    indexHits,
+    schema: {
+      tables: []
+    },
+    shardTraffic,
+    tableScans
+  }, {
+    lints: RUNTIME_LINTS,
+    source: "runtime"
+  });
+  const suppress = inputs.suppressHotScanTables;
+  const visible = suppress === void 0 ? findings : findings.filter((finding) => !(finding.metadata["kind"] === "hot_scan" && typeof finding.metadata["table"] === "string" && suppress.has(finding.metadata["table"])));
+  return visible.map((finding) => advisoryRow(finding));
+};
+
+const GET_ADVISORIES = adminRef(ADMIN_FUNCTIONS.getAdvisories);
+const GET_FUNCTION_STATS = adminRef(ADMIN_FUNCTIONS.getFunctionStats);
+const GET_METRICS = adminRef(ADMIN_FUNCTIONS.getMetrics);
+const LIST_TABLES = adminRef(ADMIN_FUNCTIONS.listTables);
+const LIST_TABLE_INDEXES = adminRef(ADMIN_FUNCTIONS.listTableIndexes);
+const percent = (rate) => `${(rate * 100).toFixed(1)}%`;
+const seconds = (ms) => `${(ms / 1e3).toFixed(2)}s`;
+const tableList = (tables) => {
+  if (tables.length <= 1) {
+    return tables[0] ?? "";
+  }
+  const last = tables[tables.length - 1] ?? "";
+  return `${tables.slice(0, -1).join(", ")} and ${last}`;
+};
+const insightTitle = (t, insight) => ({
+  "high-error-rate": t("High error rate"),
+  "high-evictions": t("High cache eviction rate"),
+  "high-write-contention": t("High write contention"),
+  "low-cache-hit-rate": t("Low cache hit rate"),
+  "missing-index": t("Missing index"),
+  "slow-function": t("Slow function")
+})[insight.kind];
+const insightDetail = (t, insight) => ({
+  "high-error-rate": t("{rate} of calls failed.", {
+    rate: percent(insight.value)
+  }),
+  "high-evictions": t("{count} entries evicted recently.", {
+    count: insight.value
+  }),
+  "high-write-contention": t("{rate} of calls hit a write conflict — consider sharding to cut contention.", {
+    rate: percent(insight.value)
+  }),
+  "low-cache-hit-rate": t("{rate} hit rate over recent traffic.", {
+    rate: percent(insight.value)
+  }),
+  "missing-index": t("Slowest call took {duration} — it full-scanned {tables} with no index.", {
+    duration: seconds(insight.value),
+    tables: tableList(insight.tables ?? [])
+  }),
+  "slow-function": t("Slowest call took {duration}.", {
+    duration: seconds(insight.value)
+  })
+})[insight.kind];
+const AddIndexButton = (t0) => {
+  const $ = c(10);
+  const {
+    onJump,
+    table
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== onJump || $[1] !== table) {
+    t1 = () => {
+      onJump(table);
+    };
+    $[0] = onJump;
+    $[1] = table;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  const t2 = `in-add-index-${table}`;
+  let t3;
+  if ($[3] !== t || $[4] !== table) {
+    t3 = t("Add index on {table}", {
+      table
+    });
+    $[3] = t;
+    $[4] = table;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== onClick || $[7] !== t2 || $[8] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV(Button, {
+      "data-testid": t2,
+      onClick,
+      size: "sm",
+      type: "button",
+      variant: "outline",
+      children: t3
+    }, void 0, false);
+    $[6] = onClick;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+const InsightsPanel = ({
+  initialShardKey,
+  loadShardTraffic
+}) => {
+  const client = useLunora();
+  const navigate = useNavigate();
+  const t = useT();
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  const [metrics, setMetrics] = useState(null);
+  const [functions, setFunctions] = useState(null);
+  const [advisories, setAdvisories] = useState(null);
+  const [indexHits, setIndexHits] = useState(null);
+  const [declaredIndexes, setDeclaredIndexes] = useState(null);
+  const [shardTraffic, setShardTraffic] = useState(null);
+  const [error, setError] = useState(null);
+  const fanShardTraffic = loadShardTraffic ?? ((table) => client.shardTraffic(table));
+  const refresh = async (shard) => {
+    const [snapshot, stats, advisorySnapshot] = await Promise.allSettled([client.query(GET_METRICS, {}, callOptions(shard)), client.query(GET_FUNCTION_STATS, {}, callOptions(shard)), client.query(GET_ADVISORIES, {}, callOptions(shard))]);
+    if (snapshot.status === "rejected" && stats.status === "rejected") {
+      setError(errorMessage(snapshot.reason));
+    } else {
+      setError(null);
+      recordShard(shard);
+    }
+    setMetrics(snapshot.status === "fulfilled" ? snapshot.value : null);
+    setFunctions(stats.status === "fulfilled" ? stats.value.functions : null);
+    setAdvisories(advisorySnapshot.status === "fulfilled" ? advisorySnapshot.value.advisories : null);
+    setIndexHits(snapshot.status === "fulfilled" ? snapshot.value.indexHits ?? null : null);
+    let tableNames = [];
+    try {
+      const tables = await client.query(LIST_TABLES, {}, callOptions(shard));
+      tableNames = tables.map((table_0) => table_0.name);
+      const indexResults = await Promise.allSettled(tables.map(async (table_1) => [table_1.name, await client.query(LIST_TABLE_INDEXES, {
+        table: table_1.name
+      }, callOptions(shard))]));
+      const declared = [];
+      for (const result of indexResults) {
+        if (result.status === "fulfilled") {
+          const [name, payload] = result.value;
+          declared.push(...declaredIndexesFor(name, payload.indexes));
+        }
+      }
+      setDeclaredIndexes(declared);
+    } catch {
+      setDeclaredIndexes(null);
+    }
+    try {
+      const traffic = await fanShardTraffic(tableNames[0] ?? "");
+      const byShard = /* @__PURE__ */ new Map();
+      for (const entry of traffic.shards) {
+        if (!byShard.has(entry.shardKey)) {
+          byShard.set(entry.shardKey, {
+            requests: entry.requests,
+            shardKey: entry.shardKey
+          });
+        }
+      }
+      setShardTraffic([...byShard.values()]);
+    } catch {
+      setShardTraffic(null);
+    }
+  };
+  useLiveShardSeed(shardKey, refresh);
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === "visible") {
+        fireAndForget(refresh(shardKey));
+      }
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [refresh, shardKey]);
+  const jumpToSchemaIndex = (table_2) => {
+    fireAndForget(navigate({
+      search: {
+        table: table_2
+      },
+      to: "/schema"
+    }));
+  };
+  const insights = deriveInsights(metrics, functions);
+  const missingIndexTables = new Set(insights.filter((insight) => insight.kind === "missing-index").flatMap((insight_0) => insight_0.tables ?? []));
+  const runtimeRows = deriveRuntimeAdvisories({
+    declaredIndexes: declaredIndexes ?? [],
+    functions,
+    indexHits,
+    shardTraffic,
+    suppressHotScanTables: missingIndexTables
+  });
+  const rows = useMemo(() => {
+    const insightRows = insights.map((insight_1) => {
+      const tables_0 = insight_1.kind === "missing-index" ? insight_1.tables ?? [] : [];
+      return {
+        action: tables_0.length > 0 ? tables_0.map((table_3) => /* @__PURE__ */ jsxDEV(AddIndexButton, {
+          onJump: jumpToSchemaIndex,
+          table: table_3
+        }, table_3, false)) : void 0,
+        description: insight_1.message === void 0 ? insightDetail(t, insight_1) : `${insightDetail(t, insight_1)} — ${insight_1.message}`,
+        entity: insight_1.fn,
+        issueType: insightTitle(t, insight_1),
+        key: `${insight_1.kind}:${insight_1.fn ?? ""}`,
+        level: insight_1.severity
+      };
+    });
+    const indexAdvisoryLints = /* @__PURE__ */ new Set(["unindexed_foreign_key", "unindexed_relation_target"]);
+    const staticRows = (advisories ?? []).map((finding) => {
+      const base = advisoryRow(finding);
+      if (indexAdvisoryLints.has(finding.name) && hasIndexMetadata(finding.metadata)) {
+        const {
+          table: table_4,
+          suggestedIndex
+        } = finding.metadata;
+        const testId = `in-apply-index-${table_4}-${suggestedIndex.name}`;
+        return {
+          ...base,
+          action: /* @__PURE__ */ jsxDEV(ApplyIndexButton, {
+            fields: suggestedIndex.fields,
+            indexName: suggestedIndex.name,
+            table: table_4,
+            testId
+          }, void 0, false)
+        };
+      }
+      return base;
+    });
+    return [...staticRows, ...runtimeRows, ...insightRows];
+  }, [advisories, insights, jumpToSchemaIndex, runtimeRows, t]);
+  const toolbar = /* @__PURE__ */ jsxDEV(ShardInput, {
+    onChange: setShardKey,
+    testId: "in-shard-input",
+    value: shardKey
+  }, void 0, false);
+  return /* @__PURE__ */ jsxDEV(AdvisorView, {
+    error,
+    rows,
+    testId: "lunora-insights",
+    toolbar
+  }, void 0, false);
+};
+
+export { InsightsPanel };