adonisjs-server-stats 1.8.0 → 1.10.0

package/dist/react/TimelineTab-Covg5weo.js

@@ -0,0 +1,220 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useState as g, useMemo as F, useEffect as M, useCallback as E, useRef as v } from "react";
+import { formatDuration as w, durationSeverity as T, timeAgo as U, formatTime as W, initSplitPane as _ } from "adonisjs-server-stats/core";
+import { u as z } from "./useApiClient-BVtNCmnL.js";
+import { u as G } from "./index-Cflz9Ebj.js";
+import { u as V } from "./useResizableTable-CNJmACdt.js";
+import { R as H } from "./RelatedLogs-DFDOyUMr.js";
+function J({
+  children: o,
+  classPrefix: i = "ss-dbg",
+  storageKey: u
+}) {
+  const h = v(null), d = v(null), m = v(null), c = v(null);
+  return M(() => {
+    if (h.current && d.current && m.current && c.current)
+      return _({
+        container: h.current,
+        handle: d.current,
+        topPane: m.current,
+        bottomPane: c.current,
+        storageKey: u
+      });
+  }, [u]), /* @__PURE__ */ t("div", { ref: h, className: `${i}-split-container`, children: [
+    /* @__PURE__ */ e("div", { ref: m, className: `${i}-split-top`, children: o[0] }),
+    /* @__PURE__ */ e("div", { ref: d, className: `${i}-split-handle` }),
+    /* @__PURE__ */ e("div", { ref: c, className: `${i}-split-bottom`, children: o[1] })
+  ] });
+}
+const k = {
+  request: "#1e3a5f",
+  middleware: "rgba(30, 58, 95, 0.7)",
+  db: "#6d28d9",
+  view: "#0e7490",
+  mail: "#059669",
+  event: "#b45309",
+  custom: "#525252"
+}, K = [
+  { label: "Request", color: "#1e3a5f" },
+  { label: "Middleware", color: "rgba(30, 58, 95, 0.7)" },
+  { label: "Database", color: "#6d28d9" },
+  { label: "View", color: "#0e7490" },
+  { label: "Mail", color: "#059669" },
+  { label: "Event", color: "#b45309" }
+];
+function le({ options: o }) {
+  const { baseUrl: i = "", debugEndpoint: u = "/admin/api/debug", authToken: h } = o || {}, { data: d, isLoading: m, error: c } = G("timeline", o), [b, A] = g(""), [p, y] = g(null), [a, L] = g(null), [q, C] = g(!1), [D, x] = g(null), f = F(() => {
+    const s = d?.traces || [];
+    if (!b) return s;
+    const n = b.toLowerCase();
+    return s.filter(
+      (r) => r.url.toLowerCase().includes(n) || r.method.toLowerCase().includes(n) || String(r.statusCode).includes(n)
+    );
+  }, [d, b]), $ = z(i, h);
+  M(() => {
+    if (p === null) {
+      L(null), x(null);
+      return;
+    }
+    let s = !1;
+    return C(!0), x(null), $().get(`${u}/traces/${p}`).then((r) => {
+      s || (L(r), C(!1));
+    }).catch((r) => {
+      s || (x(r instanceof Error ? r.message : "Failed to load trace"), C(!1));
+    }), () => {
+      s = !0;
+    };
+  }, [p, u, $]);
+  const B = E((s) => {
+    y((n) => n === s ? null : s);
+  }, []), R = E((s) => s >= 500 ? "ss-dbg-status-5xx" : s >= 400 ? "ss-dbg-status-4xx" : s >= 300 ? "ss-dbg-status-3xx" : "ss-dbg-status-2xx", []), I = V([f]);
+  if (m && !d)
+    return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading traces..." });
+  if (c)
+    return /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
+      "Error: ",
+      c.message
+    ] });
+  if (p !== null) {
+    if (q)
+      return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading trace detail..." });
+    if (D)
+      return /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-detail-header", children: /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ss-dbg-btn-clear",
+            onClick: () => y(null),
+            children: "← Back"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
+          "Error: ",
+          D
+        ] })
+      ] });
+    if (!a)
+      return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading trace detail..." });
+    const s = a.spans || [], n = a.warnings || [], r = a.logs || [], O = r.length > 0, S = /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e("div", { className: "ss-dbg-tl-legend", children: K.map((l) => /* @__PURE__ */ t("div", { className: "ss-dbg-tl-legend-item", children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-legend-dot", style: { background: l.color } }),
+        /* @__PURE__ */ e("span", { children: l.label })
+      ] }, l.label)) }),
+      /* @__PURE__ */ e("div", { style: { padding: "8px 12px", overflow: "auto" }, children: s.length === 0 ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "No spans captured for this request" }) : s.map((l) => {
+        const N = a.totalDuration || 1, P = l.startOffset / N * 100, j = Math.max(l.duration / N * 100, 0.5);
+        return /* @__PURE__ */ t("div", { className: "ss-dbg-tl-row", children: [
+          /* @__PURE__ */ e("div", { className: "ss-dbg-tl-label", title: l.label, children: l.label }),
+          /* @__PURE__ */ e("div", { className: "ss-dbg-tl-track", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: `ss-dbg-tl-bar ss-dbg-tl-bar-${l.category}`,
+              style: {
+                left: `${P}%`,
+                width: `${j}%`,
+                background: k[l.category] || k.custom
+              },
+              title: `${l.label}: ${w(l.duration)}`
+            }
+          ) }),
+          /* @__PURE__ */ e("span", { className: "ss-dbg-tl-dur", children: w(l.duration) })
+        ] }, l.id);
+      }) }),
+      n.length > 0 && /* @__PURE__ */ t("div", { className: "ss-dbg-tl-warnings", children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-warnings-title", children: "Warnings" }),
+        n.map((l, N) => /* @__PURE__ */ e("div", { className: "ss-dbg-tl-warning", children: l }, N))
+      ] })
+    ] });
+    return /* @__PURE__ */ t("div", { className: "ss-dbg-tl-detail-wrapper", children: [
+      /* @__PURE__ */ t("div", { className: "ss-dbg-tl-detail-header", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ss-dbg-btn-clear",
+            onClick: () => y(null),
+            children: "← Back"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${a.method.toLowerCase()}`, children: a.method }),
+        /* @__PURE__ */ e("span", { className: "ss-dbg-tl-detail-url", children: a.url }),
+        /* @__PURE__ */ e("span", { className: `ss-dbg-status ${R(a.statusCode)}`, children: a.statusCode }),
+        /* @__PURE__ */ t("span", { className: "ss-dbg-tl-meta", children: [
+          w(a.totalDuration),
+          " · ",
+          a.spanCount,
+          " spans"
+        ] })
+      ] }),
+      O ? /* @__PURE__ */ t(J, { classPrefix: "ss-dbg", storageKey: "ss-dbg-timeline-split", children: [
+        S,
+        /* @__PURE__ */ e(H, { logs: r, classPrefix: "ss-dbg" })
+      ] }) : S
+    ] });
+  }
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ t("div", { className: "ss-dbg-search-bar", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          className: "ss-dbg-search",
+          placeholder: "Filter traces...",
+          value: b,
+          onChange: (s) => A(s.target.value)
+        }
+      ),
+      /* @__PURE__ */ t("span", { className: "ss-dbg-summary", children: [
+        f.length,
+        " traces"
+      ] })
+    ] }),
+    f.length === 0 ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "No traces captured. Enable tracing in config." }) : /* @__PURE__ */ t("table", { ref: I, className: "ss-dbg-table", children: [
+      /* @__PURE__ */ t("colgroup", { children: [
+        /* @__PURE__ */ e("col", { style: { width: "50px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "70px" } }),
+        /* @__PURE__ */ e("col", {}),
+        /* @__PURE__ */ e("col", { style: { width: "60px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "80px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "50px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "80px" } })
+      ] }),
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "#" }),
+        /* @__PURE__ */ e("th", { children: "Method" }),
+        /* @__PURE__ */ e("th", { children: "URL" }),
+        /* @__PURE__ */ e("th", { children: "Status" }),
+        /* @__PURE__ */ e("th", { children: "Duration" }),
+        /* @__PURE__ */ e("th", { children: "Spans" }),
+        /* @__PURE__ */ e("th", { children: "Time" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: f.map((s) => /* @__PURE__ */ t(
+        "tr",
+        {
+          className: "ss-dbg-email-row",
+          onClick: () => B(s.id),
+          children: [
+            /* @__PURE__ */ e("td", { className: "ss-dbg-c-dim", style: { whiteSpace: "nowrap" }, children: s.id }),
+            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${s.method.toLowerCase()}`, children: s.method }) }),
+            /* @__PURE__ */ e("td", { title: s.url, children: s.url }),
+            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-status ${R(s.statusCode)}`, children: s.statusCode }) }),
+            /* @__PURE__ */ e(
+              "td",
+              {
+                className: `ss-dbg-duration ${T(s.totalDuration) === "very-slow" ? "ss-dbg-very-slow" : T(s.totalDuration) === "slow" ? "ss-dbg-slow" : ""}`,
+                children: w(s.totalDuration)
+              }
+            ),
+            /* @__PURE__ */ e("td", { className: "ss-dbg-c-muted", style: { textAlign: "center" }, children: s.spanCount }),
+            /* @__PURE__ */ e("td", { className: "ss-dbg-event-time", title: W(s.timestamp), children: U(s.timestamp) })
+          ]
+        },
+        s.id
+      )) })
+    ] })
+  ] });
+}
+export {
+  le as TimelineTab,
+  le as default
+};