rails-profiler 0.12.0 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b25edc08059907d5374748ac0624d804685b83189faabc4bae8b19cc65b0bed9
-  data.tar.gz: a5e8268d4e59540a91d7fc2b27c44bbb492e221e2ac2f4446c2ad095a2473245
+  metadata.gz: e968972f60bc4764a4b61648179a5bf618f2d1f2a68b9d43f724c4e14f3c2794
+  data.tar.gz: 70536b9f1ed2c5d04b698657ae9f948abad17cbc9fa202125311092b77d94005
 SHA512:
-  metadata.gz: af7137fb8650d7a40d2291ad66dc4fe25466c77ad2ebb83489f15191114a1a290b6a4eb47e5760744e991212ec0ed05a146d1d9450f4c7d7cbcbd394629ae3b1
-  data.tar.gz: 197f4016c350ed157b690d52ff44c83ef4ef2c5ae69f7906ad55ec8b44416fb606e41b66e3d0d84124ec378cb2961ac0b6c8bcde08e55c1e45c488648889cea8
+  metadata.gz: 8e9bb63e8ac85773680d3f83daff09b18a8c440e5272bac926e10d1dd30142969b5442168965711e40eddd9882c05ac592323f0a46410fa6390a3f70064e8521
+  data.tar.gz: 16bc718c65e6fa50493e9cdc1cc87ae51264f1873cb68baac0db52915a22eb8c383c52523941ab7d2f7d14f86fad2cb6996b74e4e5c175fa7a4e5da3a75272cb

data/app/assets/builds/profiler.css

@@ -1957,6 +1957,52 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   opacity: 1;
 }
 
+@keyframes profiler-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.profiler-skeleton__row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--profiler-border);
+}
+.profiler-skeleton__row:last-child {
+  border-bottom: none;
+}
+.profiler-skeleton__cell {
+  height: 12px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--profiler-bg-lighter, #e5e7eb) 25%, var(--profiler-bg-light, #f3f4f6) 50%, var(--profiler-bg-lighter, #e5e7eb) 75%);
+  background-size: 200% 100%;
+  animation: profiler-shimmer 1.4s infinite linear;
+}
+.profiler-skeleton__cell--xs {
+  width: 40px;
+  flex-shrink: 0;
+}
+.profiler-skeleton__cell--sm {
+  width: 72px;
+  flex-shrink: 0;
+}
+.profiler-skeleton__cell--md {
+  width: 120px;
+  flex-shrink: 0;
+}
+.profiler-skeleton__cell--lg {
+  width: 180px;
+  flex-shrink: 0;
+}
+.profiler-skeleton__cell--flex {
+  flex: 1;
+  min-width: 60px;
+}
+
 .profiler-timeline {
   margin: 24px 0;
   padding: 24px;

data/app/assets/builds/profiler.js

@@ -496,6 +496,63 @@
   }
   var PREVIEW_LIMIT = 500;
   var CSV_ROW_LIMIT = 10;
+  function categoryMime(category) {
+    const map = {
+      json: "application/json",
+      xml: "application/xml",
+      csv: "text/csv",
+      html: "text/html",
+      svg: "image/svg+xml"
+    };
+    return map[category] || "text/plain";
+  }
+  function mimeToExt(mime) {
+    const m3 = mime.split(";")[0].trim().toLowerCase();
+    const map = {
+      "application/json": ".json",
+      "application/ld+json": ".jsonld",
+      "application/xml": ".xml",
+      "text/xml": ".xml",
+      "text/csv": ".csv",
+      "application/csv": ".csv",
+      "text/html": ".html",
+      "text/plain": ".txt",
+      "text/css": ".css",
+      "application/javascript": ".js",
+      "text/javascript": ".js",
+      "image/svg+xml": ".svg",
+      "image/png": ".png",
+      "image/jpeg": ".jpg",
+      "image/gif": ".gif",
+      "image/webp": ".webp",
+      "image/avif": ".avif",
+      "application/pdf": ".pdf",
+      "application/zip": ".zip",
+      "application/gzip": ".gz",
+      "application/octet-stream": ".bin"
+    };
+    return map[m3] || ".bin";
+  }
+  function CopyButton({ text }) {
+    const [copied, setCopied] = d2(false);
+    function copy() {
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    }
+    return /* @__PURE__ */ u3("button", { onClick: copy, class: "profiler-body-download-btn profiler-text--xs", style: "cursor:pointer", children: copied ? "Copied!" : "Copy" });
+  }
+  function DownloadTextButton({ text, mime }) {
+    const [url, setUrl] = d2(null);
+    y2(() => {
+      const objectUrl = URL.createObjectURL(new Blob([text], { type: mime }));
+      setUrl(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    }, [text, mime]);
+    if (!url) return null;
+    return /* @__PURE__ */ u3("a", { href: url, download: `body${mimeToExt(mime)}`, class: "profiler-body-download-btn profiler-text--xs", children: "Download" });
+  }
   function SmartBodyPreview({ body, encoding, headers }) {
     const [expanded, setExpanded] = d2(false);
     const [objectUrl, setObjectUrl] = d2(null);
@@ -513,17 +570,21 @@
     if (!body) return /* @__PURE__ */ u3("span", { class: "profiler-text--muted profiler-text--xs", children: "empty" });
     if (encoding === "base64") {
       const mime = Object.entries(headers).find(([k3]) => k3.toLowerCase() === "content-type")?.[1]?.split(";")[0].trim() || "application/octet-stream";
-      const filename = mime.replace("/", "_").replace(/[^a-z0-9_]/gi, "") + "_download";
+      const filename = `body${mimeToExt(mime)}`;
       return /* @__PURE__ */ u3("div", { class: "profiler-body-binary", children: [
         objectUrl && (category === "image" || category === "svg") && /* @__PURE__ */ u3("img", { src: objectUrl, alt: "response preview", style: "max-width:100%;max-height:300px;display:block;margin-bottom:8px;border-radius:4px;border:1px solid var(--profiler-border)" }),
         objectUrl && category === "pdf" && /* @__PURE__ */ u3("iframe", { src: objectUrl, class: "profiler-body-preview-frame", title: "PDF preview" }),
-        objectUrl && /* @__PURE__ */ u3("a", { href: objectUrl, download: filename, class: "profiler-body-download-btn profiler-text--xs", children: [
-          "Download ",
-          mime
+        /* @__PURE__ */ u3("div", { style: "display:flex;gap:8px;margin-top:4px", children: [
+          objectUrl && /* @__PURE__ */ u3("a", { href: objectUrl, download: filename, class: "profiler-body-download-btn profiler-text--xs", children: [
+            "Download ",
+            mime
+          ] }),
+          /* @__PURE__ */ u3(CopyButton, { text: body })
         ] }),
         !objectUrl && /* @__PURE__ */ u3("span", { class: "profiler-text--muted profiler-text--xs", children: "Loading preview\u2026" })
       ] });
     }
+    const actualMime = Object.entries(headers).find(([k3]) => k3.toLowerCase() === "content-type")?.[1]?.split(";")[0].trim() || categoryMime(category);
     if (category === "csv") {
       const rows = parseCsv(body);
       const header = rows[0] || [];
@@ -531,6 +592,10 @@
       const visible = expanded ? dataRows : dataRows.slice(0, CSV_ROW_LIMIT);
       const hasMore = dataRows.length > CSV_ROW_LIMIT;
       return /* @__PURE__ */ u3("div", { children: [
+        /* @__PURE__ */ u3("div", { style: "display:flex;gap:8px;margin-bottom:6px", children: [
+          /* @__PURE__ */ u3(CopyButton, { text: body }),
+          /* @__PURE__ */ u3(DownloadTextButton, { text: body, mime: actualMime })
+        ] }),
         /* @__PURE__ */ u3("div", { style: "overflow-x:auto", children: /* @__PURE__ */ u3("table", { class: "profiler-body-csv", children: [
           /* @__PURE__ */ u3("thead", { children: /* @__PURE__ */ u3("tr", { children: header.map((h3, i3) => /* @__PURE__ */ u3("th", { children: h3 }, i3)) }) }),
           /* @__PURE__ */ u3("tbody", { children: visible.map((row, i3) => /* @__PURE__ */ u3("tr", { children: row.map((cell, j3) => /* @__PURE__ */ u3("td", { children: cell }, j3)) }, i3)) })
@@ -550,6 +615,10 @@
     const preview = expanded ? formatted : formatted.slice(0, PREVIEW_LIMIT);
     const truncated = formatted.length > PREVIEW_LIMIT && !expanded;
     return /* @__PURE__ */ u3("div", { children: [
+      /* @__PURE__ */ u3("div", { style: "display:flex;gap:8px;margin-bottom:6px", children: [
+        /* @__PURE__ */ u3(CopyButton, { text: formatted }),
+        /* @__PURE__ */ u3(DownloadTextButton, { text: formatted, mime: actualMime })
+      ] }),
       /* @__PURE__ */ u3("pre", { class: "profiler-code profiler-text--xs", style: "white-space:pre-wrap;word-break:break-all;margin:0", children: [
         preview,
         truncated ? "\u2026" : ""
@@ -565,11 +634,101 @@
       )
     ] });
   }
+  function waterfallBarColor(status, duration) {
+    if (status === 0 || status >= 500) return "var(--profiler-error, #ef4444)";
+    if (status >= 400) return "var(--profiler-warning, #f59e0b)";
+    if (duration >= 500) return "var(--profiler-warning, #f59e0b)";
+    return "var(--profiler-success, #22c55e)";
+  }
+  function WaterfallView({ requests }) {
+    const timed = requests.filter((r3) => r3.started_at).map((r3) => ({ ...r3, startMs: new Date(r3.started_at).getTime() }));
+    if (!timed.length) {
+      return /* @__PURE__ */ u3("div", { class: "profiler-text--muted profiler-text--sm", children: "No timing data available (started_at missing)." });
+    }
+    const minStart = Math.min(...timed.map((r3) => r3.startMs));
+    const maxEnd = Math.max(...timed.map((r3) => r3.startMs + r3.duration));
+    const totalSpan = maxEnd - minStart || 1;
+    const ticks = [0, 0.25, 0.5, 0.75, 1].map((f4) => ({
+      pct: f4 * 100,
+      label: `${Math.round(f4 * totalSpan)}ms`
+    }));
+    return /* @__PURE__ */ u3("div", { children: [
+      /* @__PURE__ */ u3("div", { style: "display:flex;position:relative;margin-left:200px;margin-bottom:4px;height:16px", children: ticks.map((t3) => /* @__PURE__ */ u3("div", { style: `position:absolute;left:${t3.pct}%;font-size:10px;color:var(--profiler-text-muted);transform:translateX(-50%)`, children: t3.label }, t3.pct)) }),
+      /* @__PURE__ */ u3("div", { style: "position:relative", children: [
+        ticks.map((t3) => /* @__PURE__ */ u3("div", { style: `position:absolute;left:calc(200px + ${t3.pct}% * (100% - 200px) / 100);top:0;bottom:0;width:1px;background:var(--profiler-border);opacity:0.5;pointer-events:none` }, t3.pct)),
+        timed.map((req, i3) => {
+          const left = (req.startMs - minStart) / totalSpan * 100;
+          const width = Math.max(req.duration / totalSpan * 100, 0.5);
+          const path = req.url.replace(/^https?:\/\/[^/]+/, "") || req.url;
+          const color = waterfallBarColor(req.status, req.duration);
+          return /* @__PURE__ */ u3("div", { style: "display:flex;align-items:center;gap:0;margin-bottom:3px;height:22px", children: [
+            /* @__PURE__ */ u3(
+              "div",
+              {
+                title: req.url,
+                style: "width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--profiler-text-muted);padding-right:8px;text-align:right",
+                children: [
+                  /* @__PURE__ */ u3("span", { style: `font-size:10px;font-weight:600;margin-right:4px;color:${color}`, children: req.method }),
+                  path
+                ]
+              }
+            ),
+            /* @__PURE__ */ u3("div", { style: "flex:1;position:relative;height:14px;background:var(--profiler-bg-lighter);border-radius:2px", children: /* @__PURE__ */ u3(
+              "div",
+              {
+                style: `position:absolute;left:${left}%;width:${width}%;min-width:2px;height:100%;background:${color};border-radius:2px;opacity:0.85`,
+                title: `${req.duration.toFixed(2)}ms \xB7 ${req.status || "ERR"}`
+              }
+            ) }),
+            /* @__PURE__ */ u3("div", { style: "width:52px;text-align:right;font-size:11px;color:var(--profiler-text-muted);padding-left:6px;flex-shrink:0", children: [
+              req.duration.toFixed(0),
+              "ms"
+            ] })
+          ] }, i3);
+        })
+      ] }),
+      /* @__PURE__ */ u3("div", { class: "profiler-text--xs profiler-text--muted", style: "margin-top:8px", children: [
+        "Total span: ",
+        totalSpan.toFixed(0),
+        "ms \xB7 ",
+        timed.length,
+        " request",
+        timed.length !== 1 ? "s" : ""
+      ] })
+    ] });
+  }
+  function buildCurl(req) {
+    const parts = [`curl -X ${req.method}`];
+    const headers = req.request_headers || {};
+    for (const [k3, v3] of Object.entries(headers)) {
+      parts.push(`  -H ${JSON.stringify(`${k3}: ${v3}`)}`);
+    }
+    if (req.request_body && req.request_body_encoding !== "base64") {
+      parts.push(`  -d ${JSON.stringify(req.request_body)}`);
+    }
+    parts.push(`  ${JSON.stringify(req.url)}`);
+    return parts.join(" \\\n");
+  }
   function HttpRequestDetail({ req, index, threshold }) {
     const [open, setOpen] = d2(false);
+    const [copiedUrl, setCopiedUrl] = d2(false);
+    const [copiedCurl, setCopiedCurl] = d2(false);
     const isError = req.status >= 400 || req.status === 0;
     const isSlow = req.duration >= threshold;
     const cardCls = isError ? "profiler-ajax-card--error" : isSlow ? "profiler-ajax-card--warning" : "profiler-ajax-card--success";
+    function copyUrl(e3) {
+      e3.stopPropagation();
+      navigator.clipboard.writeText(req.url).then(() => {
+        setCopiedUrl(true);
+        setTimeout(() => setCopiedUrl(false), 2e3);
+      });
+    }
+    function copyCurl() {
+      navigator.clipboard.writeText(buildCurl(req)).then(() => {
+        setCopiedCurl(true);
+        setTimeout(() => setCopiedCurl(false), 2e3);
+      });
+    }
     return /* @__PURE__ */ u3("div", { class: `profiler-ajax-card ${cardCls}`, style: "margin-bottom:8px", children: [
       /* @__PURE__ */ u3(
         "div",
@@ -578,10 +737,20 @@
           style: "cursor:pointer;user-select:none",
           onClick: () => setOpen((o3) => !o3),
           children: [
-            /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-3", children: [
+            /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-3", style: "min-width:0;flex:1", children: [
               /* @__PURE__ */ u3("span", { style: "font-size:11px;color:var(--profiler-muted)", children: open ? "\u25BE" : "\u25B8" }),
               /* @__PURE__ */ u3("span", { class: `profiler-ajax-card__method badge-${methodBadge(req.method)}`, children: req.method }),
-              /* @__PURE__ */ u3("strong", { class: "profiler-ajax-card__path", style: "word-break:break-all", children: req.url })
+              /* @__PURE__ */ u3("strong", { class: "profiler-ajax-card__path", style: "word-break:break-all", children: req.url }),
+              /* @__PURE__ */ u3(
+                "button",
+                {
+                  onClick: copyUrl,
+                  class: "profiler-body-download-btn profiler-text--xs",
+                  style: "flex-shrink:0;cursor:pointer",
+                  title: "Copy URL",
+                  children: copiedUrl ? "Copied!" : "Copy URL"
+                }
+              )
             ] }),
             /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-2", style: "flex-shrink:0", children: [
               /* @__PURE__ */ u3("span", { class: `badge-${statusBadge(req.status)}`, children: req.status === 0 ? "ERR" : req.status }),
@@ -604,6 +773,7 @@
       ] }),
       req.error && /* @__PURE__ */ u3("div", { class: "profiler-ajax-card__row", children: /* @__PURE__ */ u3("span", { class: "profiler-text--xs profiler-text--error", children: req.error }) }),
       open && /* @__PURE__ */ u3("div", { style: "padding:12px 4px 4px;border-top:1px solid rgba(0,0,0,0.08);margin-top:8px", children: [
+        /* @__PURE__ */ u3("div", { style: "margin-bottom:12px", children: /* @__PURE__ */ u3("button", { onClick: copyCurl, class: "profiler-body-download-btn profiler-text--xs", style: "cursor:pointer", children: copiedCurl ? "Copied!" : "Copy as cURL" }) }),
         /* @__PURE__ */ u3("div", { style: "margin-bottom:16px", children: [
           /* @__PURE__ */ u3("div", { class: "profiler-text--sm", style: "font-weight:600;margin-bottom:8px;color:var(--profiler-muted)", children: "REQUEST" }),
           /* @__PURE__ */ u3("div", { class: "profiler-text--xs profiler-text--muted", style: "margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px", children: "Headers" }),
@@ -688,13 +858,19 @@
         ] })
       ] }),
       /* @__PURE__ */ u3("h3", { class: "profiler-text--lg profiler-mb-3", children: "Requests" }),
-      /* @__PURE__ */ u3("p", { class: "profiler-text--xs profiler-text--muted profiler-mb-3", children: "Click a request to expand headers and body." }),
-      httpData.requests.map((req, index) => /* @__PURE__ */ u3(HttpRequestDetail, { req, index, threshold }, index))
+      /* @__PURE__ */ u3(WaterfallView, { requests: httpData.requests }),
+      /* @__PURE__ */ u3("div", { style: "margin-top:16px", children: [
+        /* @__PURE__ */ u3("p", { class: "profiler-text--xs profiler-text--muted profiler-mb-3", children: "Click a request to expand headers and body." }),
+        httpData.requests.map((req, index) => /* @__PURE__ */ u3(HttpRequestDetail, { req, index, threshold }, index))
+      ] })
     ] });
   }
 
   // app/assets/typescript/profiler/components/ProfileList.tsx
   var BASE = "/_profiler";
+  function TableSkeleton({ cols, rows = 6 }) {
+    return /* @__PURE__ */ u3("div", { children: Array.from({ length: rows }).map((_2, i3) => /* @__PURE__ */ u3("div", { class: "profiler-skeleton__row", children: cols.map((size, j3) => /* @__PURE__ */ u3("div", { class: `profiler-skeleton__cell profiler-skeleton__cell--${size}` }, j3)) }, i3)) });
+  }
   function methodClass(method) {
     const map = { GET: "badge-info", POST: "badge-success", PUT: "badge-warning", PATCH: "badge-warning", DELETE: "badge-error" };
     return map[method] || "badge-default";
@@ -734,7 +910,7 @@
       const col = params.get("sort");
       const dir = params.get("dir");
       return {
-        col: col === "duration" || col === "memory" || col === "status" || col === "queries" ? col : null,
+        col: col === "date" || col === "duration" || col === "memory" || col === "status" || col === "queries" ? col : null,
         dir: dir === "desc" ? "desc" : "asc"
       };
     };
@@ -766,6 +942,7 @@
       return PRESETS.some((pr) => pr.key === p3) ? p3 : "";
     });
     const [httpSort, setHttpSort] = d2(initialSort);
+    const [jobSort, setJobSort] = d2({ col: null, dir: "asc" });
     const [jobSearch, setJobSearch] = d2("");
     const [jobStatus, setJobStatus] = d2("");
     const [jobDuration, setJobDuration] = d2("");
@@ -808,6 +985,11 @@
         (prev) => prev.col === col ? { col, dir: prev.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }
       );
     };
+    const toggleJobSort = (col) => {
+      setJobSort(
+        (prev) => prev.col === col ? { col, dir: prev.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }
+      );
+    };
     const togglePreset = (key) => {
       setHttpPreset((prev) => prev === key ? "" : key);
     };
@@ -873,6 +1055,7 @@
       setJobSearch("");
       setJobStatus("");
       setJobDuration("");
+      setJobSort({ col: null, dir: "asc" });
       setOutboundSearch("");
       setOutboundMethod("");
       setOutboundStatus("");
@@ -955,6 +1138,10 @@
       return true;
     });
     const sortedProfiles = httpSort.col ? [...filteredProfiles].sort((a3, b) => {
+      if (httpSort.col === "date") {
+        const diff = new Date(a3.started_at).getTime() - new Date(b.started_at).getTime();
+        return httpSort.dir === "asc" ? diff : -diff;
+      }
       let av, bv;
       switch (httpSort.col) {
         case "duration":
@@ -987,6 +1174,26 @@
       }
       return true;
     });
+    const sortedJobs = jobSort.col ? [...filteredJobs].sort((a3, b) => {
+      if (jobSort.col === "date") {
+        const diff = new Date(a3.started_at).getTime() - new Date(b.started_at).getTime();
+        return jobSort.dir === "asc" ? diff : -diff;
+      }
+      let av, bv;
+      switch (jobSort.col) {
+        case "duration":
+          av = a3.duration;
+          bv = b.duration;
+          break;
+        case "status":
+          av = a3.status;
+          bv = b.status;
+          break;
+        default:
+          return 0;
+      }
+      return jobSort.dir === "asc" ? av - bv : bv - av;
+    }) : filteredJobs;
     const filteredOutbound = outboundRequests.filter((req) => {
       if (outboundSearch && !req.url.toLowerCase().includes(outboundSearch.toLowerCase())) return false;
       if (outboundMethod && req.method !== outboundMethod) return false;
@@ -1003,9 +1210,9 @@
     const httpFiltersActive = !!(httpSearch || httpMethod || httpStatus || httpDuration || httpPreset);
     const jobFiltersActive = !!(jobSearch || jobStatus || jobDuration);
     const outboundFiltersActive = !!(outboundSearch || outboundMethod || outboundStatus);
-    const sortIcon = (col) => {
-      if (httpSort.col !== col) return /* @__PURE__ */ u3("span", { class: "sort-icon sort-icon--idle", children: "\u21C5" });
-      return /* @__PURE__ */ u3("span", { class: "sort-icon sort-icon--active", children: httpSort.dir === "asc" ? "\u25B2" : "\u25BC" });
+    const sortIcon = (activeCol, dir, col) => {
+      if (activeCol !== col) return /* @__PURE__ */ u3("span", { class: "sort-icon sort-icon--idle", children: "\u21C5" });
+      return /* @__PURE__ */ u3("span", { class: "sort-icon sort-icon--active", children: dir === "asc" ? "\u25B2" : "\u25BC" });
     };
     return /* @__PURE__ */ u3("div", { class: "container", children: [
       /* @__PURE__ */ u3("div", { class: "header", children: [
@@ -1031,7 +1238,7 @@
           }, children: "Outbound HTTP" })
         ] }),
         /* @__PURE__ */ u3("div", { class: "profiler-p-4 tab-content active", children: [
-          section === "http" && (loadingHttp ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "Loading..." }) }) : error ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: error }) }) : profiles.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
+          section === "http" && (loadingHttp ? /* @__PURE__ */ u3(TableSkeleton, { cols: ["sm", "xs", "flex", "sm", "sm", "sm", "xs", "sm"] }) : error ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: error }) }) : profiles.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
             /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "No profiles found" }),
             /* @__PURE__ */ u3("p", { class: "profiler-empty__description", children: "Make some requests to your application to see profiling data" })
           ] }) : /* @__PURE__ */ u3(k, { children: [
@@ -1090,24 +1297,27 @@
             ] }),
             filteredProfiles.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "No results match filters" }) }) : /* @__PURE__ */ u3("table", { children: [
               /* @__PURE__ */ u3("thead", { children: /* @__PURE__ */ u3("tr", { children: [
-                /* @__PURE__ */ u3("th", { children: "Time" }),
+                /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "date" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("date"), children: [
+                  "Time ",
+                  sortIcon(httpSort.col, httpSort.dir, "date")
+                ] }),
                 /* @__PURE__ */ u3("th", { children: "Method" }),
                 /* @__PURE__ */ u3("th", { children: "Path" }),
                 /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "duration" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("duration"), children: [
                   "Duration ",
-                  sortIcon("duration")
+                  sortIcon(httpSort.col, httpSort.dir, "duration")
                 ] }),
                 /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "queries" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("queries"), children: [
                   "Queries ",
-                  sortIcon("queries")
+                  sortIcon(httpSort.col, httpSort.dir, "queries")
                 ] }),
                 /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "memory" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("memory"), children: [
                   "Memory ",
-                  sortIcon("memory")
+                  sortIcon(httpSort.col, httpSort.dir, "memory")
                 ] }),
                 /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "status" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("status"), children: [
                   "Status ",
-                  sortIcon("status")
+                  sortIcon(httpSort.col, httpSort.dir, "status")
                 ] }),
                 /* @__PURE__ */ u3("th", { children: "Token" }),
                 /* @__PURE__ */ u3("th", {})
@@ -1129,7 +1339,7 @@
             ] }),
             httpHasMore && !httpFiltersActive && /* @__PURE__ */ u3("div", { class: "profiler-load-more", children: /* @__PURE__ */ u3("button", { class: "btn btn-secondary", onClick: loadMoreHttp, disabled: httpLoadingMore, children: httpLoadingMore ? "Loading\u2026" : "Load more" }) })
           ] })),
-          section === "jobs" && (loadingJobs ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "Loading..." }) }) : jobsError ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: jobsError }) }) : jobs.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
+          section === "jobs" && (loadingJobs ? /* @__PURE__ */ u3(TableSkeleton, { cols: ["sm", "flex", "md", "sm", "xs", "xs", "sm"] }) : jobsError ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: jobsError }) }) : jobs.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
             /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "No job profiles found" }),
             /* @__PURE__ */ u3("p", { class: "profiler-empty__description", children: "Run background jobs in your application to see profiling data" })
           ] }) : /* @__PURE__ */ u3(k, { children: [
@@ -1169,16 +1379,25 @@
             ] }),
             filteredJobs.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "No results match filters" }) }) : /* @__PURE__ */ u3("table", { children: [
               /* @__PURE__ */ u3("thead", { children: /* @__PURE__ */ u3("tr", { children: [
-                /* @__PURE__ */ u3("th", { children: "Time" }),
+                /* @__PURE__ */ u3("th", { class: `sortable${jobSort.col === "date" ? " sortable--active" : ""}`, onClick: () => toggleJobSort("date"), children: [
+                  "Time ",
+                  sortIcon(jobSort.col, jobSort.dir, "date")
+                ] }),
                 /* @__PURE__ */ u3("th", { children: "Job Class" }),
                 /* @__PURE__ */ u3("th", { children: "Queue" }),
-                /* @__PURE__ */ u3("th", { children: "Duration" }),
-                /* @__PURE__ */ u3("th", { children: "Status" }),
+                /* @__PURE__ */ u3("th", { class: `sortable${jobSort.col === "duration" ? " sortable--active" : ""}`, onClick: () => toggleJobSort("duration"), children: [
+                  "Duration ",
+                  sortIcon(jobSort.col, jobSort.dir, "duration")
+                ] }),
+                /* @__PURE__ */ u3("th", { class: `sortable${jobSort.col === "status" ? " sortable--active" : ""}`, onClick: () => toggleJobSort("status"), children: [
+                  "Status ",
+                  sortIcon(jobSort.col, jobSort.dir, "status")
+                ] }),
                 /* @__PURE__ */ u3("th", { children: "Executions" }),
                 /* @__PURE__ */ u3("th", { children: "Token" }),
                 /* @__PURE__ */ u3("th", {})
               ] }) }),
-              /* @__PURE__ */ u3("tbody", { children: filteredJobs.map((p3) => {
+              /* @__PURE__ */ u3("tbody", { children: sortedJobs.map((p3) => {
                 const jobData = p3.collectors_data?.job;
                 const isFailed = p3.status === 500;
                 return /* @__PURE__ */ u3("tr", { children: [
@@ -1198,7 +1417,7 @@
             ] }),
             jobHasMore && !jobFiltersActive && /* @__PURE__ */ u3("div", { class: "profiler-load-more", children: /* @__PURE__ */ u3("button", { class: "btn btn-secondary", onClick: loadMoreJobs, disabled: jobLoadingMore, children: jobLoadingMore ? "Loading\u2026" : "Load more" }) })
           ] })),
-          section === "outbound" && (loadingOutbound ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "Loading..." }) }) : outboundError ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: outboundError }) }) : outboundRequests.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
+          section === "outbound" && (loadingOutbound ? /* @__PURE__ */ u3(TableSkeleton, { cols: ["sm", "xs", "flex", "sm", "xs"], rows: 4 }) : outboundError ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: outboundError }) }) : outboundRequests.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
             /* @__PURE__ */ u3("div", { class: "profiler-empty__title", children: "No outbound HTTP requests found" }),
             /* @__PURE__ */ u3("p", { class: "profiler-empty__description", children: "Make requests to external services to see outbound HTTP data" })
           ] }) : /* @__PURE__ */ u3(k, { children: [
@@ -1264,22 +1483,7 @@
   }
 
   // app/assets/typescript/profiler/components/dashboard/tabs/RequestTab.tsx
-  function tryFormatJson(text) {
-    try {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    } catch {
-      return text;
-    }
-  }
-  function BodyBlock({ body, encoding }) {
-    if (!body) return null;
-    if (encoding === "base64") {
-      return /* @__PURE__ */ u3("p", { class: "profiler-text--muted profiler-text--sm", children: "[binary content, base64-encoded]" });
-    }
-    const formatted = tryFormatJson(body);
-    return /* @__PURE__ */ u3("pre", { class: "profiler-code profiler-text--xs", children: formatted });
-  }
-  function buildCurl(profile) {
+  function buildCurl2(profile) {
     const headers = profile.headers ?? {};
     const params = profile.params ?? {};
     const reqBody = profile.request_body;
@@ -1308,7 +1512,7 @@
   }
   function RequestTab({ profile }) {
     const [copied, setCopied] = d2(false);
-    const curl = buildCurl(profile);
+    const curl = buildCurl2(profile);
     const routeData = profile.collectors_data?.request ?? {};
     function copyToClipboard() {
       navigator.clipboard.writeText(curl).then(() => {
@@ -1368,7 +1572,14 @@
       ] }),
       profile.request_body && /* @__PURE__ */ u3(k, { children: [
         /* @__PURE__ */ u3("h2", { class: "profiler-section__header profiler-mt-6", children: "Request Body" }),
-        /* @__PURE__ */ u3(BodyBlock, { body: profile.request_body, encoding: profile.request_body_encoding })
+        /* @__PURE__ */ u3(
+          SmartBodyPreview,
+          {
+            body: profile.request_body,
+            encoding: profile.request_body_encoding,
+            headers: profile.headers ?? {}
+          }
+        )
       ] }),
       profile.response_headers && Object.keys(profile.response_headers).length > 0 && /* @__PURE__ */ u3(k, { children: [
         /* @__PURE__ */ u3("h2", { class: "profiler-section__header profiler-mt-6", children: "Response Headers" }),
@@ -1379,7 +1590,14 @@
       ] }),
       profile.response_body && /* @__PURE__ */ u3(k, { children: [
         /* @__PURE__ */ u3("h2", { class: "profiler-section__header profiler-mt-6", children: "Response Body" }),
-        /* @__PURE__ */ u3(BodyBlock, { body: profile.response_body, encoding: profile.response_body_encoding })
+        /* @__PURE__ */ u3(
+          SmartBodyPreview,
+          {
+            body: profile.response_body,
+            encoding: profile.response_body_encoding,
+            headers: profile.response_headers ?? {}
+          }
+        )
       ] }),
       /* @__PURE__ */ u3("h2", { class: "profiler-section__header profiler-mt-6", children: "Curl Command" }),
       /* @__PURE__ */ u3("div", { style: "position: relative;", children: [
@@ -1461,6 +1679,14 @@
     ] });
   }
   function ExplainModal({ state, onClose }) {
+    y2(() => {
+      if (!state.open) return;
+      const handler = (e3) => {
+        if (e3.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [state.open]);
     if (!state.open) return null;
     const renderResult = () => {
       if (state.loading) return /* @__PURE__ */ u3("div", { class: "profiler-text--muted", children: "Running EXPLAIN ANALYZE\u2026" });
@@ -1571,7 +1797,7 @@
       ] }),
       n1Groups.length > 0 && /* @__PURE__ */ u3("div", { class: "profiler-alert-banner profiler-alert-banner--warning profiler-mb-4", children: [
         /* @__PURE__ */ u3("span", { class: "profiler-alert-banner__icon", children: "\u26A0\uFE0F" }),
-        /* @__PURE__ */ u3("div", { children: [
+        /* @__PURE__ */ u3("div", { style: "flex:1", children: [
           /* @__PURE__ */ u3("strong", { children: "Potential N+1 detected" }),
           " \u2014 ",
           n1Groups.length,
@@ -1581,7 +1807,19 @@
           n1Groups.reduce((sum, g2) => sum + g2.indices.length, 0),
           " times total",
           /* @__PURE__ */ u3("div", { class: "profiler-text--xs profiler-text--muted profiler-mt-1", children: "Queries causing N+1 are highlighted below. Expand each group to see the call stack." })
-        ] })
+        ] }),
+        n1Groups.length > 1 && /* @__PURE__ */ u3(
+          "button",
+          {
+            class: "profiler-btn profiler-btn--sm",
+            style: "flex-shrink:0;align-self:flex-start",
+            onClick: () => {
+              const allOpen = n1Groups.every((g2) => openBacktraces.has(g2.pattern));
+              setOpenBacktraces(allOpen ? /* @__PURE__ */ new Set() : new Set(n1Groups.map((g2) => g2.pattern)));
+            },
+            children: n1Groups.every((g2) => openBacktraces.has(g2.pattern)) ? "Collapse all" : "Expand all"
+          }
+        )
       ] }),
       n1Groups.map((group) => /* @__PURE__ */ u3("div", { class: "profiler-n1-group profiler-mb-4", children: [
         /* @__PURE__ */ u3("div", { class: "profiler-n1-group__header", onClick: () => toggleBacktrace(group.pattern), children: [
@@ -3035,6 +3273,7 @@
   }
   function LogsTab({ logData }) {
     const [filter, setFilter] = d2("ALL");
+    const [search, setSearch] = d2("");
     if (!logData?.logs?.length) {
       return /* @__PURE__ */ u3("div", { class: "profiler-empty", children: [
         /* @__PURE__ */ u3("div", { class: "profiler-empty__icon", children: "\u{1F4CB}" }),
@@ -3047,7 +3286,11 @@
       ] });
     }
     const levels = ["ALL", "DEBUG", "INFO", "WARN", "ERROR", "FATAL"];
-    const filtered = filter === "ALL" ? logData.logs : logData.logs.filter((l3) => l3.level === filter);
+    const filtered = logData.logs.filter((l3) => {
+      if (filter !== "ALL" && l3.level !== filter) return false;
+      if (search && !l3.message.toLowerCase().includes(search.toLowerCase())) return false;
+      return true;
+    });
     return /* @__PURE__ */ u3(k, { children: [
       /* @__PURE__ */ u3("h2", { class: "profiler-section__header", children: [
         "Log Messages (",
@@ -3064,19 +3307,32 @@
           /* @__PURE__ */ u3("strong", { class: "profiler-text--warning", children: logData.warnings })
         ] })
       ] }),
-      /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-2 profiler-mb-4", children: levels.map((level) => /* @__PURE__ */ u3(
-        "button",
-        {
-          onClick: () => setFilter(level),
-          class: `btn btn-sm ${filter === level ? "btn-primary" : "btn-secondary"}`,
-          children: level
-        },
-        level
-      )) }),
+      /* @__PURE__ */ u3("div", { class: "profiler-action-bar profiler-mb-4", children: [
+        /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-2", children: levels.map((level) => /* @__PURE__ */ u3(
+          "button",
+          {
+            onClick: () => setFilter(level),
+            class: `btn btn-sm ${filter === level ? "btn-primary" : "btn-secondary"}`,
+            children: level
+          },
+          level
+        )) }),
+        /* @__PURE__ */ u3(
+          "input",
+          {
+            type: "text",
+            class: "profiler-filter-input",
+            placeholder: "Search messages\u2026",
+            value: search,
+            onInput: (e3) => setSearch(e3.target.value),
+            style: "width:200px"
+          }
+        )
+      ] }),
       filtered.length === 0 ? /* @__PURE__ */ u3("div", { class: "profiler-text--muted profiler-text--sm", children: [
-        "No ",
-        filter,
-        " messages."
+        "No messages match",
+        search ? ` "${search}"` : "",
+        "."
       ] }) : filtered.map((entry, index) => /* @__PURE__ */ u3("div", { class: "profiler-query-card profiler-mb-2", children: [
         /* @__PURE__ */ u3("div", { class: "profiler-query-card__header", children: [
           /* @__PURE__ */ u3(
@@ -3368,7 +3624,8 @@
               (profile.memory / 1024 / 1024).toFixed(2),
               " MB"
             ] })
-          ] })
+          ] }),
+          /* @__PURE__ */ u3("span", { style: "color:var(--profiler-text-muted)", children: new Date(profile.started_at).toLocaleString("en", { hour12: false, month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" }) })
         ] })
       ] }),
       /* @__PURE__ */ u3("div", { class: "profiler-panel profiler-mb-6", children: [

data/lib/profiler/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Profiler
-  VERSION = "0.12.0"
+  VERSION = "0.13.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-profiler
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.13.0
 platform: ruby
 authors:
 - Sébastien Duplessy