adonisjs-server-stats 1.10.3 → 1.11.1

package/dist/react/QueriesSection-CrMdU5Ax.js

@@ -0,0 +1,458 @@
+import { jsx as t, jsxs as l, Fragment as v } from "react/jsx-runtime";
+import { useState as y, useCallback as $, useEffect as X, useMemo as T } from "react";
+import { resolveField as b, resolveNormalizedSql as A, durationClassName as R, resolveSqlMethod as Q, resolveTimestamp as Y, SLOW_DURATION_MS as Z } from "adonisjs-server-stats/core";
+import { a as ee } from "./index-DwDK-4oX.js";
+import { D as U } from "./DataTable-YyShr5B-.js";
+import { F as se } from "./FilterBar-CQ7bD669.js";
+import { T as te } from "./TimeAgoCell-o3KigGfM.js";
+import { P as ae } from "./Pagination-BkmzUDY8.js";
+function W({ node: a, depth: d = 0 }) {
+  if (!a) return null;
+  const f = d * 20, u = a["Node Type"] || "Unknown", C = a["Relation Name"] ? /* @__PURE__ */ l(v, { children: [
+    " on ",
+    /* @__PURE__ */ t("strong", { children: a["Relation Name"] })
+  ] }) : null, c = a.Alias && a.Alias !== a["Relation Name"] ? ` (${a.Alias})` : "", m = a["Index Name"] ? /* @__PURE__ */ l(v, { children: [
+    " using ",
+    /* @__PURE__ */ t("em", { children: a["Index Name"] })
+  ] }) : null, i = [];
+  if (a["Startup Cost"] !== null && a["Startup Cost"] !== void 0 && i.push(`cost=${a["Startup Cost"]}..${a["Total Cost"]}`), a["Plan Rows"] !== null && a["Plan Rows"] !== void 0 && i.push(`rows=${a["Plan Rows"]}`), a["Plan Width"] !== null && a["Plan Width"] !== void 0 && i.push(`width=${a["Plan Width"]}`), a.Filter && i.push(`filter: ${a.Filter}`), a["Index Cond"] && i.push(`cond: ${a["Index Cond"]}`), a["Hash Cond"] && i.push(`hash: ${a["Hash Cond"]}`), a["Join Type"] && i.push(`join: ${a["Join Type"]}`), a["Sort Key"]) {
+    const r = Array.isArray(a["Sort Key"]) ? a["Sort Key"].join(", ") : a["Sort Key"];
+    i.push(`sort: ${r}`);
+  }
+  const q = a.Plans || [];
+  return /* @__PURE__ */ l("div", { className: "ss-dash-explain-node", style: { marginLeft: `${f}px` }, children: [
+    /* @__PURE__ */ l("div", { className: "ss-dash-explain-node-header", children: [
+      /* @__PURE__ */ t("span", { className: "ss-dash-explain-node-type", children: u }),
+      C,
+      c,
+      m
+    ] }),
+    i.length > 0 && /* @__PURE__ */ t("div", { className: "ss-dash-explain-metrics", children: i.join(" · ") }),
+    q.map((r, F) => /* @__PURE__ */ t(W, { node: r, depth: d + 1 }, F))
+  ] });
+}
+function ne({ plan: a }) {
+  if (!a || !Array.isArray(a) || a.length === 0)
+    return /* @__PURE__ */ t("div", { className: "ss-dash-explain-result", children: "No plan data returned" });
+  const d = a[0];
+  if (d && d.Plan)
+    return /* @__PURE__ */ t("div", { className: "ss-dash-explain-result", children: /* @__PURE__ */ t(W, { node: d.Plan, depth: 0 }) });
+  if (typeof d == "object" && d !== null) {
+    const f = Object.keys(d);
+    return /* @__PURE__ */ t("div", { className: "ss-dash-explain-result", children: /* @__PURE__ */ l("table", { children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { children: f.map((u) => /* @__PURE__ */ t("th", { children: u }, u)) }) }),
+      /* @__PURE__ */ t("tbody", { children: a.map((u, C) => {
+        const c = u;
+        return /* @__PURE__ */ t("tr", { children: f.map((m) => /* @__PURE__ */ t("td", { children: c[m] !== null && c[m] !== void 0 ? String(c[m]) : "-" }, m)) }, C);
+      }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ t("div", { className: "ss-dash-explain-result", children: "No plan data returned" });
+}
+const re = 8;
+function me({ options: a = {} }) {
+  const [d, f] = y(1), [u, C] = y(""), [c, m] = y("createdAt"), [i, q] = y("desc"), [r, F] = y("list"), [N, D] = y(null), [o, w] = y(null), [j, _] = y(null), I = $(
+    (e) => {
+      e !== r && (F(e), f(1), m(e === "list" ? "createdAt" : "count"), q("desc"), D(null), w(null), _(null));
+    },
+    [r]
+  );
+  X(() => f(1), [u]);
+  const H = r === "grouped" ? "queries/grouped" : "queries", { data: M, meta: k, isLoading: J, getApi: O } = ee(H, {
+    ...a,
+    page: d,
+    search: u,
+    sort: c,
+    sortDir: i
+  }), K = $(
+    (e) => {
+      c === e ? q((s) => s === "asc" ? "desc" : "asc") : (m(e), q("desc"));
+    },
+    [c]
+  ), V = $(
+    async (e) => {
+      if (o && o.queryId === e) {
+        w(null);
+        return;
+      }
+      _(e);
+      try {
+        const s = await O().explainQuery(e);
+        s && s.error ? w({
+          queryId: e,
+          plan: [],
+          error: s.error,
+          message: s.message
+        }) : w({
+          queryId: e,
+          plan: s?.plan || s?.rows || []
+        });
+      } catch (s) {
+        console.warn("[ss] Query explain failed:", s), w({
+          queryId: e,
+          plan: [],
+          error: s instanceof Error ? s.message : String(s)
+        });
+      } finally {
+        _(null);
+      }
+    },
+    [O, o]
+  ), B = $(
+    (e) => {
+      const s = e.id;
+      return !o || o.queryId !== s ? null : /* @__PURE__ */ t("tr", { className: "ss-dash-explain-row", children: /* @__PURE__ */ t("td", { colSpan: re, className: "ss-dash-explain", children: /* @__PURE__ */ l("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "start" }, children: [
+        /* @__PURE__ */ t("div", { style: { flex: 1 }, children: o.error ? /* @__PURE__ */ l("div", { className: "ss-dash-explain-result ss-dash-explain-error", children: [
+          /* @__PURE__ */ t("strong", { children: "Error:" }),
+          " ",
+          o.error,
+          o.message && /* @__PURE__ */ l(v, { children: [
+            /* @__PURE__ */ t("br", {}),
+            o.message
+          ] })
+        ] }) : /* @__PURE__ */ t(ne, { plan: o.plan }) }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "ss-dash-explain-btn",
+            onClick: () => w(null),
+            style: { marginLeft: "8px", flexShrink: 0 },
+            children: "Close"
+          }
+        )
+      ] }) }) });
+    },
+    [o]
+  ), E = r === "grouped" ? M?.groups || [] : M || [], p = T(() => r !== "grouped" ? E : E.map((e) => {
+    const s = { ...e };
+    return s.sqlNormalized ??= b(e, "sql_normalized", "pattern") ?? void 0, s.count ??= b(e, "total_count"), s.avgDuration ??= b(e, "avg_duration"), s.maxDuration ??= b(e, "max_duration"), s.minDuration ??= b(e, "min_duration"), s.totalDuration ??= b(e, "total_duration"), s.percentOfTotal ??= b(e, "pct_time"), s;
+  }), [E, r]), g = T(() => {
+    const e = k?.total ?? p.length;
+    let s = 0, n = 0, h = 0, x = 0;
+    for (const S of p) {
+      const P = S.duration || 0;
+      h += P, x++, P > Z && s++;
+    }
+    const L = /* @__PURE__ */ new Map();
+    for (const S of p) {
+      const P = A(S);
+      L.set(P, (L.get(P) || 0) + 1);
+    }
+    for (const S of L.values())
+      S > 1 && (n += S);
+    return {
+      total: e,
+      slow: s,
+      duplicates: n,
+      avgDuration: x > 0 ? h / x : 0
+    };
+  }, [p, k]), z = T(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const s of p) {
+      const n = A(s);
+      e.set(n, (e.get(n) || 0) + 1);
+    }
+    return e;
+  }, [p]), G = T(() => {
+    if (r === "grouped")
+      return `${p.length} query patterns`;
+    const e = [`${g.total} queries`];
+    return g.slow > 0 && e.push(`${g.slow} slow`), g.duplicates > 0 && e.push(`${g.duplicates} dup`), e.push(`avg ${(g.avgDuration || 0).toFixed(1)}ms`), e.join(", ");
+  }, [r, p.length, g]);
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ t(
+      se,
+      {
+        search: u,
+        onSearchChange: C,
+        placeholder: "Filter queries...",
+        summary: G,
+        children: /* @__PURE__ */ l("div", { className: "ss-dash-btn-group", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: `ss-dash-btn ${r === "list" ? "ss-dash-active" : ""}`,
+              onClick: () => I("list"),
+              children: "List"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: `ss-dash-btn ${r === "grouped" ? "ss-dash-active" : ""}`,
+              onClick: () => I("grouped"),
+              children: "Grouped"
+            }
+          )
+        ] })
+      }
+    ),
+    J && !M ? /* @__PURE__ */ t("div", { className: "ss-dash-empty", children: "Loading queries..." }) : r === "grouped" ? /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t("div", { className: "ss-dash-table-wrap", children: /* @__PURE__ */ t(
+      U,
+      {
+        columns: [
+          {
+            key: "sqlNormalized",
+            label: "Pattern",
+            render: (e, s) => {
+              const n = e || "", h = (s.count || 0) >= 3;
+              return /* @__PURE__ */ l(v, { children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `ss-dash-sql ${N === n ? "ss-dash-expanded" : ""}`,
+                    title: "Click to expand",
+                    onClick: (x) => {
+                      x.stopPropagation(), D(N === n ? null : n);
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (x) => x.key === "Enter" && D(N === n ? null : n),
+                    children: n
+                  }
+                ),
+                h && /* @__PURE__ */ l(v, { children: [
+                  " ",
+                  /* @__PURE__ */ t("span", { className: "ss-dash-dup", children: "DUP" })
+                ] })
+              ] });
+            }
+          },
+          {
+            key: "count",
+            label: "Count",
+            width: "60px",
+            sortable: !0,
+            render: (e) => /* @__PURE__ */ t(
+              "span",
+              {
+                style: { color: "var(--ss-muted)", textAlign: "center", display: "block" },
+                children: e || 0
+              }
+            )
+          },
+          {
+            key: "avgDuration",
+            label: "Avg",
+            width: "70px",
+            sortable: !0,
+            render: (e) => {
+              const s = e || 0;
+              return /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `ss-dash-duration ${R(s)}`,
+                  children: s.toFixed(2) + "ms"
+                }
+              );
+            }
+          },
+          {
+            key: "minDuration",
+            label: "Min",
+            width: "70px",
+            render: (e) => /* @__PURE__ */ t("span", { className: "ss-dash-duration", children: (e || 0).toFixed(2) + "ms" })
+          },
+          {
+            key: "maxDuration",
+            label: "Max",
+            width: "70px",
+            render: (e) => {
+              const s = e || 0;
+              return /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `ss-dash-duration ${R(s)}`,
+                  children: s.toFixed(2) + "ms"
+                }
+              );
+            }
+          },
+          {
+            key: "totalDuration",
+            label: "Total",
+            width: "70px",
+            sortable: !0,
+            render: (e) => /* @__PURE__ */ t("span", { className: "ss-dash-duration", children: (e || 0).toFixed(1) + "ms" })
+          },
+          {
+            key: "percentOfTotal",
+            label: "% Time",
+            width: "60px",
+            render: (e) => /* @__PURE__ */ t(
+              "span",
+              {
+                style: { color: "var(--ss-muted)", textAlign: "center", display: "block" },
+                children: (e || 0).toFixed(1) + "%"
+              }
+            )
+          }
+        ],
+        data: p,
+        keyField: "sqlNormalized",
+        sort: c,
+        sortDir: i,
+        onSort: K,
+        emptyMessage: "No queries recorded"
+      }
+    ) }) }) : /* @__PURE__ */ l(v, { children: [
+      /* @__PURE__ */ t("div", { className: "ss-dash-table-wrap", children: /* @__PURE__ */ t(
+        U,
+        {
+          columns: [
+            {
+              key: "id",
+              label: "#",
+              width: "40px",
+              render: (e) => /* @__PURE__ */ t("span", { style: { color: "var(--ss-dim)" }, children: e })
+            },
+            {
+              key: "sql",
+              label: "SQL",
+              render: (e, s) => {
+                const n = s.sql || s.sql_text || "";
+                return /* @__PURE__ */ l("div", { children: [
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: `ss-dash-sql ${N === s.id ? "ss-dash-expanded" : ""}`,
+                      title: "Click to expand",
+                      onClick: (h) => {
+                        h.stopPropagation(), D(
+                          N === s.id ? null : s.id
+                        );
+                      },
+                      role: "button",
+                      tabIndex: 0,
+                      onKeyDown: (h) => h.key === "Enter" && D(
+                        N === s.id ? null : s.id
+                      ),
+                      children: n
+                    }
+                  ),
+                  (z.get(A(s)) ?? 0) > 1 && /* @__PURE__ */ l("span", { className: "ss-dash-dup", children: [
+                    "×",
+                    z.get(A(s))
+                  ] })
+                ] });
+              }
+            },
+            {
+              key: "duration",
+              label: "Duration",
+              width: "70px",
+              sortable: !0,
+              render: (e) => {
+                const s = e || 0;
+                return /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `ss-dash-duration ${R(s)}`,
+                    children: s.toFixed(2) + "ms"
+                  }
+                );
+              }
+            },
+            {
+              key: "method",
+              label: "Method",
+              width: "60px",
+              render: (e, s) => {
+                const n = Q(s);
+                return /* @__PURE__ */ t("span", { className: `ss-dash-method ss-dash-method-${n.toLowerCase()}`, children: n });
+              }
+            },
+            {
+              key: "model",
+              label: "Model",
+              width: "90px",
+              render: (e) => /* @__PURE__ */ t(
+                "span",
+                {
+                  style: {
+                    color: "var(--ss-muted)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: e,
+                  children: e || "-"
+                }
+              )
+            },
+            {
+              key: "connection",
+              label: "Connection",
+              width: "80px",
+              render: (e) => /* @__PURE__ */ t(
+                "span",
+                {
+                  style: {
+                    color: "var(--ss-dim)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: e || "-"
+                }
+              )
+            },
+            {
+              key: "createdAt",
+              label: "Time",
+              width: "90px",
+              sortable: !0,
+              render: (e, s) => {
+                const n = e || (Y(s) ?? "");
+                return /* @__PURE__ */ t(te, { ts: n, className: "ss-dash-event-time" });
+              }
+            },
+            {
+              key: "id",
+              label: "",
+              width: "70px",
+              render: (e, s) => {
+                if (Q(s) !== "select") return null;
+                const h = o?.queryId === s.id && !o?.error;
+                return /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: `ss-dash-explain-btn${h ? " ss-dash-explain-btn-active" : ""}`,
+                    onClick: (x) => {
+                      x.stopPropagation(), V(s.id);
+                    },
+                    disabled: j === s.id,
+                    children: j === s.id ? "..." : "EXPLAIN"
+                  }
+                );
+              }
+            }
+          ],
+          data: p,
+          sort: c,
+          sortDir: i,
+          onSort: K,
+          emptyMessage: "No queries recorded",
+          renderAfterRow: B
+        }
+      ) }),
+      k && /* @__PURE__ */ t(
+        ae,
+        {
+          page: k.page,
+          lastPage: k.lastPage,
+          total: k.total,
+          onPageChange: f
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  me as QueriesSection,
+  me as default
+};

package/dist/react/{QueriesTab-BQzcxEiW.js → QueriesTab-x85PjkyS.js}

@@ -1,27 +1,28 @@
-import { jsx as e, jsxs as t, Fragment as v } from "react/jsx-runtime";
-import { useState as h, useMemo as i, useCallback as C } from "react";
-import { filterQueries as S, countDuplicateQueries as D, computeQuerySummary as Q, formatDuration as p, durationSeverity as g, timeAgo as T, formatTime as $ } from "adonisjs-server-stats/core";
-import { u as E } from "./index-CsImORX6.js";
-import { u as F } from "./useResizableTable-CNJmACdt.js";
-import { F as L } from "./FilterBar-CQ7bD669.js";
-function A({ options: b }) {
-  const { data: n, isLoading: y, error: u } = E("queries", b), [o, w] = h(""), [f, x] = h(null), d = i(() => n?.queries || [], [n]), r = i(() => S(d, o), [d, o]), a = i(() => D(d), [d]), l = i(
-    () => Q(d, a),
+import { jsx as e, jsxs as t, Fragment as w } from "react/jsx-runtime";
+import { useState as m, useMemo as i, useCallback as C } from "react";
+import { filterQueries as v, countDuplicateQueries as D, computeQuerySummary as S, formatDuration as p, durationClassName as T } from "adonisjs-server-stats/core";
+import { T as Q } from "./TimeAgoCell-o3KigGfM.js";
+import { u as M, M as $ } from "./index-DwDK-4oX.js";
+import { u as E } from "./useResizableTable-CNJmACdt.js";
+import { F } from "./FilterBar-CQ7bD669.js";
+function A({ options: g }) {
+  const { data: n, isLoading: b, error: u } = M("queries", g), [o, f] = m(""), [y, x] = m(null), d = i(() => n?.queries || [], [n]), r = i(() => v(d, o), [d, o]), a = i(() => D(d), [d]), l = i(
+    () => S(d, a),
     [d, a]
-  ), m = C((s) => {
+  ), h = C((s) => {
     x((c) => c === s ? null : s);
-  }, []), N = F([r]);
-  return y && !n ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading queries..." }) : u ? /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
+  }, []), N = E([r]);
+  return b && !n ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading queries..." }) : u ? /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
     "Error: ",
     u.message
   ] }) : /* @__PURE__ */ t("div", { children: [
     /* @__PURE__ */ e(
-      L,
+      F,
       {
         search: o,
-        onSearchChange: w,
+        onSearchChange: f,
         placeholder: "Filter queries...",
-        summary: /* @__PURE__ */ t(v, { children: [
+        summary: /* @__PURE__ */ t(w, { children: [
           r.length,
           " queries",
           l.slowCount > 0 && ` | ${l.slowCount} slow`,
@@ -53,11 +54,11 @@ function A({ options: b }) {
           /* @__PURE__ */ e(
             "span",
             {
-              className: `ss-dbg-sql ${f === s.id ? "ss-dbg-expanded" : ""}`,
-              onClick: () => m(s.id),
+              className: `ss-dbg-sql ${y === s.id ? "ss-dbg-expanded" : ""}`,
+              onClick: () => h(s.id),
               role: "button",
               tabIndex: 0,
-              onKeyDown: (c) => c.key === "Enter" && m(s.id),
+              onKeyDown: (c) => c.key === "Enter" && h(s.id),
               children: s.sql
             }
           ),
@@ -70,13 +71,13 @@ function A({ options: b }) {
         /* @__PURE__ */ e(
           "td",
           {
-            className: `ss-dbg-duration ${g(s.duration) === "very-slow" ? "ss-dbg-very-slow" : g(s.duration) === "slow" ? "ss-dbg-slow" : ""}`,
+            className: `ss-dbg-duration ${T(s.duration, "ss-dbg")}`,
             children: p(s.duration)
           }
         ),
-        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${s.method.toLowerCase()}`, children: s.method }) }),
+        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e($, { method: s.method, classPrefix: "ss-dbg" }) }),
         /* @__PURE__ */ e("td", { className: "ss-dbg-c-muted", children: s.model || "-" }),
-        /* @__PURE__ */ e("td", { className: "ss-dbg-event-time", title: $(s.timestamp), children: T(s.timestamp) })
+        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(Q, { ts: s.timestamp, className: "ss-dbg-event-time" }) })
       ] }, s.id)) })
     ] })
   ] });