adonisjs-server-stats 1.10.0 → 1.11.0

package/dist/react/{OverviewSection-C4T1ur51.js → OverviewSection-CxvfOR0v.js}

@@ -1,8 +1,9 @@
 import { jsx as s, jsxs as e } from "react/jsx-runtime";
-import { useState as E, useRef as X, useEffect as P, useCallback as z } from "react";
-import { formatDuration as $, timeAgo as ss, formatTime as es, durationSeverity as as } from "adonisjs-server-stats/core";
-import { a as B, S } from "./index-Cflz9Ebj.js";
-const ls = [
+import { useState as T, useRef as P, useEffect as ss, useCallback as O } from "react";
+import { resolveMetric as k, formatDuration as S, durationClassName as U, resolveEventName as es, resolveNormalizedSql as as } from "adonisjs-server-stats/core";
+import { a as z, b as M } from "./index-DwDK-4oX.js";
+import { T as ls } from "./TimeAgoCell-o3KigGfM.js";
+const rs = [
   { value: "5m", label: "5m" },
   { value: "15m", label: "15m" },
   { value: "30m", label: "30m" },
@@ -11,8 +12,8 @@ const ls = [
   { value: "24h", label: "24h" },
   { value: "7d", label: "7d" }
 ];
-function rs({ value: r, onChange: i, className: c = "" }) {
-  return /* @__PURE__ */ s("div", { className: `ss-dash-btn-group ${c}`, children: ls.map((n) => /* @__PURE__ */ s(
+function ts({ value: r, onChange: i, className: c = "" }) {
+  return /* @__PURE__ */ s("div", { className: `ss-dash-btn-group ${c}`, children: rs.map((n) => /* @__PURE__ */ s(
     "button",
     {
       type: "button",
@@ -23,7 +24,7 @@ function rs({ value: r, onChange: i, className: c = "" }) {
     n.value
   )) });
 }
-function ts(r, i) {
+function ds(r, i) {
   if (r <= 0) return [0];
   const c = r / i, n = Math.pow(10, Math.floor(Math.log10(c))), u = c / n;
   let o;
@@ -32,7 +33,7 @@ function ts(r, i) {
   for (let v = o; v <= r + o * 0.5; v += o) a.push(Math.round(v));
   return a.length === 0 && a.push(Math.ceil(r)), a;
 }
-function O(r) {
+function I(r) {
   try {
     return new Date(r).toLocaleTimeString("en-US", {
       hour12: !1,
@@ -43,7 +44,7 @@ function O(r) {
     return "";
   }
 }
-function U(r) {
+function G(r) {
   if (r.length === 0) return "";
   if (r.length === 1) return `M${r[0].x},${r[0].y}`;
   let i = `M${r[0].x.toFixed(1)},${r[0].y.toFixed(1)}`;
@@ -53,37 +54,27 @@ function U(r) {
   }
   return i;
 }
-function I(r) {
-  const i = as(r);
-  return i === "very-slow" ? "ss-dash-very-slow" : i === "slow" ? "ss-dash-slow" : "";
-}
-function ds({ chartPoints: r }) {
-  const i = { top: 12, right: 12, bottom: 28, left: 38 }, c = 220, n = X(null), [u, o] = E(0);
-  P(() => {
+function is({ chartPoints: r }) {
+  const i = { top: 12, right: 12, bottom: 28, left: 38 }, c = 220, n = P(null), [u, o] = T(0);
+  ss(() => {
     const d = n.current;
     if (!d) return;
     o(d.clientWidth);
     const t = new ResizeObserver((w) => {
-      for (const C of w)
-        o(C.contentRect.width);
+      for (const D of w)
+        o(D.contentRect.width);
     });
     return t.observe(d), () => t.disconnect();
   }, []);
-  const a = u || 600, v = a - i.left - i.right, f = c - i.top - i.bottom, x = i.top + f, b = r.map((d) => {
-    const t = d;
-    return (d.requestCount ?? 0) + (Number(t.request_count) || 0) || d.total || 0;
-  }), y = r.map((d) => {
-    const t = d;
-    return (d.errorCount ?? 0) + (Number(t.error_count) || 0);
-  }), T = Math.max(...b, 1), g = Math.ceil(T * 1.1), N = y.some((d) => d > 0), k = ts(g, 4), M = k.length > 0 ? k[k.length - 1] : g, R = (d) => i.left + d / Math.max(r.length - 1, 1) * v, q = (d) => i.top + f - d / (M || 1) * f, l = r.map((d, t) => ({ x: R(t), y: q(b[t]) })), h = r.map((d, t) => ({ x: R(t), y: q(y[t]) })), m = U(l), L = N ? U(h) : "", F = l.length > 1 ? `${m} L${l[l.length - 1].x.toFixed(1)},${x} L${l[0].x.toFixed(1)},${x} Z` : "", j = N && h.length > 1 ? `${L} L${h[h.length - 1].x.toFixed(1)},${x} L${h[0].x.toFixed(1)},${x} Z` : "", G = Math.min(10, r.length), K = Math.max(1, Math.ceil(r.length / G)), [p, Q] = E({ visible: !1, x: 0, idx: -1 }), V = z(
+  const a = u || 600, v = a - i.left - i.right, f = c - i.top - i.bottom, x = i.top + f, b = r.map((d) => k(d, "requestCount", "request_count") || d.total || 0), N = r.map((d) => k(d, "errorCount", "error_count")), F = Math.max(...b, 1), g = Math.ceil(F * 1.1), y = N.some((d) => d > 0), R = ds(g, 4), C = R.length > 0 ? R[R.length - 1] : g, q = (d) => i.left + d / Math.max(r.length - 1, 1) * v, $ = (d) => i.top + f - d / (C || 1) * f, l = r.map((d, t) => ({ x: q(t), y: $(b[t]) })), h = r.map((d, t) => ({ x: q(t), y: $(N[t]) })), m = G(l), L = y ? G(h) : "", j = l.length > 1 ? `${m} L${l[l.length - 1].x.toFixed(1)},${x} L${l[0].x.toFixed(1)},${x} Z` : "", Q = y && h.length > 1 ? `${L} L${h[h.length - 1].x.toFixed(1)},${x} L${h[0].x.toFixed(1)},${x} Z` : "", K = Math.min(10, r.length), V = Math.max(1, Math.ceil(r.length / K)), [p, A] = T({ visible: !1, x: 0, idx: -1 }), Y = O(
     (d) => {
       const t = l[d].x;
-      Q({ visible: !0, x: t, idx: d });
+      A({ visible: !0, x: t, idx: d });
     },
     [l]
-  ), Y = z(() => {
-    Q({ visible: !1, x: 0, idx: -1 });
-  }, []), _ = 120, Z = p.visible ? Math.max(_ / 2, Math.min(p.x, a - _ / 2)) : 0;
+  ), Z = O(() => {
+    A({ visible: !1, x: 0, idx: -1 });
+  }, []), _ = 120, J = p.visible ? Math.max(_ / 2, Math.min(p.x, a - _ / 2)) : 0;
   return /* @__PURE__ */ e("div", { ref: n, style: { position: "relative" }, children: [
     /* @__PURE__ */ e("svg", { viewBox: `0 0 ${a} ${c}`, className: "ss-dash-chart-svg", children: [
       /* @__PURE__ */ e("defs", { children: [
@@ -96,8 +87,8 @@ function ds({ chartPoints: r }) {
           /* @__PURE__ */ s("stop", { offset: "100%", stopColor: "var(--ss-red-fg)", stopOpacity: 0.02 })
         ] })
       ] }),
-      k.map((d) => {
-        const t = q(d);
+      R.map((d) => {
+        const t = $(d);
         return /* @__PURE__ */ e("g", { children: [
           /* @__PURE__ */ s(
             "line",
@@ -125,7 +116,7 @@ function ds({ chartPoints: r }) {
           )
         ] }, `ytick-${d}`);
       }),
-      F && /* @__PURE__ */ s("path", { d: F, fill: "url(#ss-cg-total)" }),
+      j && /* @__PURE__ */ s("path", { d: j, fill: "url(#ss-cg-total)" }),
       m && /* @__PURE__ */ s(
         "path",
         {
@@ -137,7 +128,7 @@ function ds({ chartPoints: r }) {
           strokeLinecap: "round"
         }
       ),
-      j && /* @__PURE__ */ s("path", { d: j, fill: "url(#ss-cg-error)" }),
+      Q && /* @__PURE__ */ s("path", { d: Q, fill: "url(#ss-cg-error)" }),
       L && /* @__PURE__ */ s(
         "path",
         {
@@ -151,59 +142,59 @@ function ds({ chartPoints: r }) {
         }
       ),
       r.map((d, t) => {
-        const w = b[t], C = y[t], D = l[t].x, J = l[t].y, A = v / (r.length || 1), W = p.visible && p.idx === t, H = p.visible && p.idx !== t;
+        const w = b[t], D = N[t], E = l[t].x, X = l[t].y, W = v / (r.length || 1), H = p.visible && p.idx === t, B = p.visible && p.idx !== t;
         return /* @__PURE__ */ e("g", { children: [
           /* @__PURE__ */ s(
             "rect",
             {
-              x: D - A / 2,
+              x: E - W / 2,
               y: i.top,
-              width: A,
+              width: W,
               height: f,
               fill: "transparent",
               className: "ss-dash-chart-hover-zone",
               "data-idx": t,
-              onMouseEnter: () => V(t),
-              onMouseLeave: Y
+              onMouseEnter: () => Y(t),
+              onMouseLeave: Z
             }
           ),
           w > 0 && /* @__PURE__ */ s(
             "circle",
             {
-              cx: D,
-              cy: J,
-              r: W ? 4 : 2.5,
+              cx: E,
+              cy: X,
+              r: H ? 4 : 2.5,
               fill: "var(--ss-accent)",
               stroke: "var(--ss-surface)",
               strokeWidth: 1,
               className: "ss-dash-chart-dot",
               "data-idx": t,
-              opacity: H ? 0.3 : 1
+              opacity: B ? 0.3 : 1
             }
           ),
-          C > 0 && /* @__PURE__ */ s(
+          D > 0 && /* @__PURE__ */ s(
             "circle",
             {
-              cx: D,
+              cx: E,
               cy: h[t].y,
-              r: W ? 3.5 : 2,
+              r: H ? 3.5 : 2,
               fill: "var(--ss-red-fg)",
               stroke: "var(--ss-surface)",
               strokeWidth: 1,
               className: "ss-dash-chart-dot ss-dash-chart-dot-err",
               "data-idx": t,
-              opacity: H ? 0.3 : 1
+              opacity: B ? 0.3 : 1
             }
           )
         ] }, t);
       }),
       r.map((d, t) => {
-        if (t % K !== 0 && t !== r.length - 1) return null;
-        const w = O(d.bucket);
+        if (t % V !== 0 && t !== r.length - 1) return null;
+        const w = I(d.bucket);
         return w ? /* @__PURE__ */ s(
           "text",
           {
-            x: R(t),
+            x: q(t),
             y: c - 6,
             textAnchor: "middle",
             fill: "var(--ss-dim)",
@@ -219,27 +210,27 @@ function ds({ chartPoints: r }) {
       {
         className: "ss-dash-chart-tooltip",
         style: {
-          left: Z,
+          left: J,
           top: i.top - 4,
           transform: "translate(-50%, -100%)"
         },
         children: [
-          /* @__PURE__ */ s("div", { children: O(r[p.idx].bucket) }),
+          /* @__PURE__ */ s("div", { children: I(r[p.idx].bucket) }),
           /* @__PURE__ */ e("div", { children: [
             "Requests: ",
             b[p.idx]
           ] }),
-          y[p.idx] > 0 && /* @__PURE__ */ e("div", { style: { color: "var(--ss-red-fg)" }, children: [
+          N[p.idx] > 0 && /* @__PURE__ */ e("div", { style: { color: "var(--ss-red-fg)" }, children: [
             "Errors: ",
-            y[p.idx]
+            N[p.idx]
           ] })
         ]
       }
     )
   ] });
 }
-function hs({ options: r = {} }) {
-  const [i, c] = E("1h"), { data: n, isLoading: u } = B("overview", r), { data: o } = B("overview/chart", {
+function us({ options: r = {} }) {
+  const [i, c] = T("1h"), { data: n, isLoading: u } = z("overview", r), { data: o } = z("overview/chart", {
     ...r,
     timeRange: i
   });
@@ -261,7 +252,7 @@ function hs({ options: r = {} }) {
     jobQueueStatus: null,
     statusDistribution: { "2xx": 0, "3xx": 0, "4xx": 0, "5xx": 0 },
     slowestQueries: []
-  }, v = a, f = a.avgResponseTime || Number(v.avg_response_time) || 0, x = a.p95ResponseTime || Number(v.p95_response_time) || 0, b = a.requestsPerMinute || Number(v.requests_per_minute) || 0, y = a.errorRate || Number(v.error_rate) || 0, g = (a.totalRequests || Number(v.total_requests) || 0) > 0, N = o?.buckets || [], k = a.sparklines?.avgResponseTime ?? N.map((l) => l.avgDuration ?? 0), M = a.sparklines?.p95ResponseTime ?? N.map((l) => l.p95Duration ?? 0), R = a.sparklines?.requestsPerMinute ?? N.map((l) => l.requestCount ?? 0), q = a.sparklines?.errorRate ?? N.map((l) => l.errorCount ?? 0);
+  }, v = a, f = k(v, "avgResponseTime", "avg_response_time"), x = k(v, "p95ResponseTime", "p95_response_time"), b = k(v, "requestsPerMinute", "requests_per_minute"), N = k(v, "errorRate", "error_rate"), g = k(v, "totalRequests", "total_requests") > 0, y = o?.buckets || [], R = a.sparklines?.avgResponseTime ?? y.map((l) => l.avgDuration ?? 0), C = a.sparklines?.p95ResponseTime ?? y.map((l) => l.p95Duration ?? 0), q = a.sparklines?.requestsPerMinute ?? y.map((l) => l.requestCount ?? 0), $ = a.sparklines?.errorRate ?? y.map((l) => l.errorCount ?? 0);
   return /* @__PURE__ */ e("div", { className: "ss-dash-overview", children: [
     /* @__PURE__ */ e("div", { className: "ss-dash-cards", children: [
       /* @__PURE__ */ e("div", { className: "ss-dash-card", children: [
@@ -270,10 +261,10 @@ function hs({ options: r = {} }) {
           "div",
           {
             className: `ss-dash-card-value ${g ? f > 500 ? "ss-dash-red" : f > 200 ? "ss-dash-amber" : "ss-dash-accent" : "ss-dash-dim"}`,
-            children: g ? $(f) : "-"
+            children: g ? S(f) : "-"
           }
         ),
-        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(S, { data: k, color: "#34d399", width: 160, height: 40 }) })
+        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(M, { data: R, color: "#34d399", width: 160, height: 40 }) })
       ] }),
       /* @__PURE__ */ e("div", { className: "ss-dash-card", children: [
         /* @__PURE__ */ s("div", { className: "ss-dash-card-title", children: "P95 Response Time" }),
@@ -281,40 +272,40 @@ function hs({ options: r = {} }) {
           "div",
           {
             className: `ss-dash-card-value ${g ? x > 500 ? "ss-dash-red" : x > 200 ? "ss-dash-amber" : "ss-dash-accent" : "ss-dash-dim"}`,
-            children: g ? $(x) : "-"
+            children: g ? S(x) : "-"
           }
         ),
-        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(S, { data: M, color: "#60a5fa", width: 160, height: 40 }) })
+        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(M, { data: C, color: "#60a5fa", width: 160, height: 40 }) })
       ] }),
       /* @__PURE__ */ e("div", { className: "ss-dash-card", children: [
         /* @__PURE__ */ s("div", { className: "ss-dash-card-title", children: "Requests / min" }),
         /* @__PURE__ */ s("div", { className: `ss-dash-card-value ${g ? "ss-dash-accent" : "ss-dash-dim"}`, children: g ? b.toFixed(1) : "-" }),
-        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(S, { data: R, color: "#34d399", width: 160, height: 40 }) })
+        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(M, { data: q, color: "#34d399", width: 160, height: 40 }) })
       ] }),
       /* @__PURE__ */ e("div", { className: "ss-dash-card", children: [
         /* @__PURE__ */ s("div", { className: "ss-dash-card-title", children: "Error Rate" }),
         /* @__PURE__ */ s(
           "div",
           {
-            className: `ss-dash-card-value ${g ? y > 5 ? "ss-dash-red" : y > 1 ? "ss-dash-amber" : "ss-dash-accent" : "ss-dash-dim"}`,
-            children: g ? `${y.toFixed(1)}%` : "-"
+            className: `ss-dash-card-value ${g ? N > 5 ? "ss-dash-red" : N > 1 ? "ss-dash-amber" : "ss-dash-accent" : "ss-dash-dim"}`,
+            children: g ? `${N.toFixed(1)}%` : "-"
           }
         ),
-        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(S, { data: q, color: "#f87171", width: 160, height: 40 }) })
+        /* @__PURE__ */ s("div", { className: "ss-dash-sparkline", children: /* @__PURE__ */ s(M, { data: $, color: "#f87171", width: 160, height: 40 }) })
       ] })
     ] }),
     /* @__PURE__ */ e("div", { className: "ss-dash-chart-container", children: [
       /* @__PURE__ */ e("div", { className: "ss-dash-chart-header", children: [
         /* @__PURE__ */ s("span", { className: "ss-dash-chart-title", children: "Request Volume" }),
-        /* @__PURE__ */ s(rs, { value: i, onChange: c })
+        /* @__PURE__ */ s(ts, { value: i, onChange: c })
       ] }),
-      /* @__PURE__ */ s("div", { className: "ss-dash-chart", id: "ss-dash-chart-area", children: N.length === 0 ? /* @__PURE__ */ s("div", { className: "ss-dash-empty", style: { minHeight: "120px" }, children: "No data for this range" }) : /* @__PURE__ */ s(ds, { chartPoints: N }) }),
+      /* @__PURE__ */ s("div", { className: "ss-dash-chart", id: "ss-dash-chart-area", children: y.length === 0 ? /* @__PURE__ */ s("div", { className: "ss-dash-empty", style: { minHeight: "120px" }, children: "No data for this range" }) : /* @__PURE__ */ s(is, { chartPoints: y }) }),
       /* @__PURE__ */ e("div", { className: "ss-dash-chart-legend", id: "ss-dash-chart-legend", children: [
         /* @__PURE__ */ e("span", { className: "ss-dash-chart-legend-item", children: [
           /* @__PURE__ */ s("span", { className: "ss-dash-legend-dot", style: { background: "var(--ss-accent)" } }),
           "Requests"
         ] }),
-        N.some((l) => (l.errorCount ?? 0) > 0) && /* @__PURE__ */ e("span", { className: "ss-dash-chart-legend-item", children: [
+        y.some((l) => (l.errorCount ?? 0) > 0) && /* @__PURE__ */ e("span", { className: "ss-dash-chart-legend-item", children: [
           /* @__PURE__ */ s("span", { className: "ss-dash-legend-dot", style: { background: "var(--ss-red-fg)" } }),
           "Errors"
         ] })
@@ -335,8 +326,8 @@ function hs({ options: r = {} }) {
                 /* @__PURE__ */ s(
                   "span",
                   {
-                    className: `ss-dash-secondary-list-value ss-dash-duration ${I(l.avgDuration)}`,
-                    children: $(l.avgDuration)
+                    className: `ss-dash-secondary-list-value ss-dash-duration ${U(l.avgDuration)}`,
+                    children: S(l.avgDuration)
                   }
                 )
               ]
@@ -353,7 +344,7 @@ function hs({ options: r = {} }) {
           ] }),
           /* @__PURE__ */ e("li", { children: [
             /* @__PURE__ */ s("span", { children: "Avg Duration" }),
-            /* @__PURE__ */ s("span", { className: "ss-dash-secondary-list-value", children: $(a.queryStats.avgDuration) })
+            /* @__PURE__ */ s("span", { className: "ss-dash-secondary-list-value", children: S(a.queryStats.avgDuration) })
           ] }),
           /* @__PURE__ */ e("li", { children: [
             /* @__PURE__ */ s("span", { children: "Queries / Request" }),
@@ -366,12 +357,11 @@ function hs({ options: r = {} }) {
         a.recentErrors.length === 0 ? /* @__PURE__ */ s("div", { className: "ss-dash-empty", style: { minHeight: "60px" }, children: "No recent errors" }) : /* @__PURE__ */ s("ul", { className: "ss-dash-secondary-list", children: a.recentErrors.map((l, h) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ e("a", { href: `#logs?id=${l.id ?? ""}`, className: "ss-dash-widget-row-link", children: [
           /* @__PURE__ */ s("span", { style: { color: "var(--ss-red-fg)" }, title: l.message, children: l.message }),
           l.timestamp && /* @__PURE__ */ s(
-            "span",
+            ls,
             {
+              ts: l.timestamp,
               className: "ss-dash-secondary-list-value",
-              style: { color: "var(--ss-dim)" },
-              title: es(l.timestamp),
-              children: ss(l.timestamp)
+              style: { color: "var(--ss-dim)" }
             }
           )
         ] }) }, h)) })
@@ -379,7 +369,7 @@ function hs({ options: r = {} }) {
       /* @__PURE__ */ e("div", { className: "ss-dash-secondary-card", children: [
         /* @__PURE__ */ s("div", { className: "ss-dash-secondary-card-title", children: /* @__PURE__ */ s("a", { href: "#events", className: "ss-dash-widget-link", children: "Top Events" }) }),
         a.topEvents.length === 0 ? /* @__PURE__ */ s("div", { className: "ss-dash-empty", style: { minHeight: "60px" }, children: "No events yet" }) : /* @__PURE__ */ s("ul", { className: "ss-dash-secondary-list", children: a.topEvents.slice(0, 5).map((l, h) => {
-          const m = l.name || l.eventName || l.event_name || l.event || "";
+          const m = es(l);
           return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ e(
             "a",
             {
@@ -510,7 +500,7 @@ function hs({ options: r = {} }) {
       /* @__PURE__ */ e("div", { className: "ss-dash-secondary-card", children: [
         /* @__PURE__ */ s("div", { className: "ss-dash-secondary-card-title", children: /* @__PURE__ */ s("a", { href: "#queries", className: "ss-dash-widget-link", children: "Slowest Queries" }) }),
         a.slowestQueries.length === 0 ? /* @__PURE__ */ s("div", { className: "ss-dash-empty", style: { minHeight: "60px" }, children: "No query data yet" }) : /* @__PURE__ */ s("ul", { className: "ss-dash-secondary-list", children: a.slowestQueries.slice(0, 5).map((l, h) => {
-          const m = l.sqlNormalized || l.normalizedSql || l.sql_normalized || l.sql || "-";
+          const m = as(l) || "-";
           return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ e(
             "a",
             {
@@ -521,8 +511,8 @@ function hs({ options: r = {} }) {
                 /* @__PURE__ */ s(
                   "span",
                   {
-                    className: `ss-dash-secondary-list-value ss-dash-duration ${I(l.avgDuration)}`,
-                    children: $(l.avgDuration)
+                    className: `ss-dash-secondary-list-value ss-dash-duration ${U(l.avgDuration)}`,
+                    children: S(l.avgDuration)
                   }
                 )
               ]
@@ -534,6 +524,6 @@ function hs({ options: r = {} }) {
   ] });
 }
 export {
-  hs as OverviewSection,
-  hs as default
+  us as OverviewSection,
+  us as default
 };