rails-profiler 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a118e9ba5a79bc87f82ee566e0e2af65a7199fff6694561ad080f990fb7bf8cd
-  data.tar.gz: 44e2391b361cbcda4ea4a133fefb7db653cd2f0a48e72859216c368ce1867ded
+  metadata.gz: 6c1f16fad7d5792dda0491401519802bd402be3b6c952b898cc0930e675a0d49
+  data.tar.gz: 6ea6e3ca98b297f89b32da94a56cf73ff38788e8d31a9570dd58c072bfb58930
 SHA512:
-  metadata.gz: c69ecc008b9b9c79161cdc18326c9b0c43e99b7a7284b2681980c0c2d2b7a94c10f77dc186b2826f2cf111f53063e10a3790c4245e4c8a4a07bdde7f49b02e7a
-  data.tar.gz: 22031e28d3fc173b52dab71ed8f1fe8f0faf350134ed683b2847d1ad3a4e44e5de438b6de76d83a3f2b554aa22175cee5b578af0aacc4a8b247f2fd32390d431
+  metadata.gz: 3e487bc2fc57bd9a1dee6eabdc45db629dd752e0df2ce95e74fc31701583ab5d8de72fa57b7b19dc81d6c412c6bec2b4a814768af84ab80da5af6c61b3fb063a
+  data.tar.gz: 0e3572af0b7f7bca2d1bc132da45173ad9dd2f29010d5685a987d247a89c114d5c76846781a5383aa7bee2fdef038059aa66ac8c9e8bf7ed1245c8a6eaf50354

data/app/assets/builds/profiler.css

@@ -1896,6 +1896,61 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   cursor: pointer;
 }
 
+.profiler-preset-btn {
+  height: 28px;
+  padding: 0 10px;
+  background: transparent;
+  border: 1px solid var(--profiler-border);
+  border-radius: var(--profiler-radius-full);
+  color: var(--profiler-text-muted);
+  font-family: var(--profiler-font-sans);
+  font-size: var(--profiler-text-xs);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--profiler-transition-base);
+  white-space: nowrap;
+}
+.profiler-preset-btn:hover {
+  border-color: var(--profiler-accent);
+  color: var(--profiler-accent);
+  background: var(--profiler-accent-bg);
+}
+.profiler-preset-btn--active {
+  border-color: var(--profiler-accent);
+  background: var(--profiler-accent);
+  color: var(--profiler-text-on-accent, #fff);
+}
+.profiler-preset-btn--active:hover {
+  opacity: 0.85;
+  color: var(--profiler-text-on-accent, #fff);
+}
+
+.sortable {
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: color var(--profiler-transition-base);
+}
+.sortable:hover {
+  color: var(--profiler-text) !important;
+}
+.sortable--active {
+  color: var(--profiler-text) !important;
+}
+
+.sort-icon {
+  font-size: 10px;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+.sort-icon--idle {
+  opacity: 0.35;
+}
+.sort-icon--active {
+  color: var(--profiler-accent);
+  opacity: 1;
+}
+
 .profiler-timeline {
   margin: 24px 0;
   padding: 24px;
@@ -2321,6 +2376,33 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   color: var(--profiler-text-subtle);
   font-family: var(--profiler-font-sans);
 }
+.profiler-flamegraph__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.profiler-flamegraph__search-input {
+  height: 28px;
+  padding: 0 8px;
+  background: var(--profiler-bg-lighter);
+  border: 1px solid var(--profiler-border);
+  border-radius: var(--profiler-radius-sm);
+  color: var(--profiler-text);
+  font-family: var(--profiler-font-mono);
+  font-size: var(--profiler-text-xs);
+  width: 200px;
+  transition: border-color var(--profiler-transition-base);
+}
+.profiler-flamegraph__search-input:focus {
+  outline: none;
+  border-color: var(--profiler-accent);
+}
+.profiler-flamegraph__match-count {
+  font-size: var(--profiler-text-xs);
+  font-family: var(--profiler-font-mono);
+  color: var(--profiler-text-muted);
+  white-space: nowrap;
+}
 .profiler-flamegraph__canvas-container {
   position: relative;
   border: 1px solid var(--profiler-border);

data/app/assets/builds/profiler.js

@@ -718,11 +718,26 @@
     if (!bytes) return "-";
     return (bytes / 1024 / 1024).toFixed(2) + " MB";
   }
+  var PRESETS = [
+    { key: "slow", label: "Slow" },
+    { key: "many_queries", label: "Many queries" },
+    { key: "errors", label: "Errors" },
+    { key: "has_exception", label: "Has exception" }
+  ];
   function ProfileList() {
+    const params = new URLSearchParams(window.location.search);
     const initialSection = () => {
-      const s3 = new URLSearchParams(window.location.search).get("section");
+      const s3 = params.get("section");
       return s3 === "http" || s3 === "jobs" || s3 === "outbound" ? s3 : "http";
     };
+    const initialSort = () => {
+      const col = params.get("sort");
+      const dir = params.get("dir");
+      return {
+        col: col === "duration" || col === "memory" || col === "status" || col === "queries" ? col : null,
+        dir: dir === "desc" ? "desc" : "asc"
+      };
+    };
     const [section, setSection] = d2(initialSection);
     const [profiles, setProfiles] = d2([]);
     const [jobs, setJobs] = d2([]);
@@ -740,6 +755,11 @@
     const [httpMethod, setHttpMethod] = d2("");
     const [httpStatus, setHttpStatus] = d2("");
     const [httpDuration, setHttpDuration] = d2("");
+    const [httpPreset, setHttpPreset] = d2(() => {
+      const p3 = params.get("preset");
+      return PRESETS.some((pr) => pr.key === p3) ? p3 : "";
+    });
+    const [httpSort, setHttpSort] = d2(initialSort);
     const [jobSearch, setJobSearch] = d2("");
     const [jobStatus, setJobStatus] = d2("");
     const [jobDuration, setJobDuration] = d2("");
@@ -759,6 +779,30 @@
       if (section === "jobs") loadJobs();
       if (section === "outbound") loadOutbound();
     }, []);
+    y2(() => {
+      const url = new URL(window.location.href);
+      if (httpSort.col) {
+        url.searchParams.set("sort", httpSort.col);
+        url.searchParams.set("dir", httpSort.dir);
+      } else {
+        url.searchParams.delete("sort");
+        url.searchParams.delete("dir");
+      }
+      if (httpPreset) {
+        url.searchParams.set("preset", httpPreset);
+      } else {
+        url.searchParams.delete("preset");
+      }
+      history.replaceState(null, "", url.toString());
+    }, [httpSort, httpPreset]);
+    const toggleHttpSort = (col) => {
+      setHttpSort(
+        (prev) => prev.col === col ? { col, dir: prev.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }
+      );
+    };
+    const togglePreset = (key) => {
+      setHttpPreset((prev) => prev === key ? "" : key);
+    };
     const loadJobs = () => {
       if (jobsLoaded) return;
       setLoadingJobs(true);
@@ -796,6 +840,8 @@
       setHttpMethod("");
       setHttpStatus("");
       setHttpDuration("");
+      setHttpPreset("");
+      setHttpSort({ col: null, dir: "asc" });
       setJobSearch("");
       setJobStatus("");
       setJobDuration("");
@@ -870,8 +916,36 @@
       if (httpDuration) {
         if (httpDuration === "lt100" ? p3.duration >= 100 : p3.duration < parseInt(httpDuration)) return false;
       }
+      if (httpPreset === "slow" && p3.duration < 500) return false;
+      if (httpPreset === "many_queries" && (p3.collectors_data?.database?.total_queries ?? 0) <= 20) return false;
+      if (httpPreset === "errors" && p3.status < 500) return false;
+      if (httpPreset === "has_exception" && !p3.collectors_data?.exception) return false;
       return true;
     });
+    const sortedProfiles = httpSort.col ? [...filteredProfiles].sort((a3, b) => {
+      let av, bv;
+      switch (httpSort.col) {
+        case "duration":
+          av = a3.duration;
+          bv = b.duration;
+          break;
+        case "memory":
+          av = a3.memory ?? 0;
+          bv = b.memory ?? 0;
+          break;
+        case "status":
+          av = a3.status;
+          bv = b.status;
+          break;
+        case "queries":
+          av = a3.collectors_data?.database?.total_queries ?? 0;
+          bv = b.collectors_data?.database?.total_queries ?? 0;
+          break;
+        default:
+          return 0;
+      }
+      return httpSort.dir === "asc" ? av - bv : bv - av;
+    }) : filteredProfiles;
     const filteredJobs = jobs.filter((p3) => {
       if (jobSearch && !p3.path.toLowerCase().includes(jobSearch.toLowerCase())) return false;
       if (jobStatus === "failed" && p3.status !== 500) return false;
@@ -894,9 +968,13 @@
       }
       return true;
     });
-    const httpFiltersActive = !!(httpSearch || httpMethod || httpStatus || httpDuration);
+    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" });
+    };
     return /* @__PURE__ */ u3("div", { class: "container", children: [
       /* @__PURE__ */ u3("div", { class: "header", children: [
         /* @__PURE__ */ u3("h1", { children: [
@@ -925,6 +1003,15 @@
             /* @__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: [
+            /* @__PURE__ */ u3("div", { class: "profiler-action-bar profiler-mb-2", children: /* @__PURE__ */ u3("div", { class: "profiler-filter-group", children: PRESETS.map((preset) => /* @__PURE__ */ u3(
+              "button",
+              {
+                class: `profiler-preset-btn${httpPreset === preset.key ? " profiler-preset-btn--active" : ""}`,
+                onClick: () => togglePreset(preset.key),
+                children: preset.label
+              },
+              preset.key
+            )) }) }),
             /* @__PURE__ */ u3("div", { class: "profiler-action-bar profiler-mb-3", children: [
               /* @__PURE__ */ u3("div", { class: "profiler-filter-group", children: [
                 /* @__PURE__ */ u3(
@@ -974,13 +1061,26 @@
                 /* @__PURE__ */ u3("th", { children: "Time" }),
                 /* @__PURE__ */ u3("th", { children: "Method" }),
                 /* @__PURE__ */ u3("th", { children: "Path" }),
-                /* @__PURE__ */ u3("th", { children: "Duration" }),
-                /* @__PURE__ */ u3("th", { children: "Memory" }),
-                /* @__PURE__ */ u3("th", { children: "Status" }),
+                /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "duration" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("duration"), children: [
+                  "Duration ",
+                  sortIcon("duration")
+                ] }),
+                /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "queries" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("queries"), children: [
+                  "Queries ",
+                  sortIcon("queries")
+                ] }),
+                /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "memory" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("memory"), children: [
+                  "Memory ",
+                  sortIcon("memory")
+                ] }),
+                /* @__PURE__ */ u3("th", { class: `sortable${httpSort.col === "status" ? " sortable--active" : ""}`, onClick: () => toggleHttpSort("status"), children: [
+                  "Status ",
+                  sortIcon("status")
+                ] }),
                 /* @__PURE__ */ u3("th", { children: "Token" }),
                 /* @__PURE__ */ u3("th", {})
               ] }) }),
-              /* @__PURE__ */ u3("tbody", { children: filteredProfiles.map((p3) => /* @__PURE__ */ u3("tr", { children: [
+              /* @__PURE__ */ u3("tbody", { children: sortedProfiles.map((p3) => /* @__PURE__ */ u3("tr", { children: [
                 /* @__PURE__ */ u3("td", { children: formatTime(p3.started_at) }),
                 /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: methodClass(p3.method), children: p3.method }) }),
                 /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("a", { href: `${BASE}/profiles/${p3.token}`, children: p3.path }) }),
@@ -988,6 +1088,7 @@
                   p3.duration.toFixed(2),
                   " ms"
                 ] }) }),
+                /* @__PURE__ */ u3("td", { children: p3.collectors_data?.database?.total_queries ?? "\u2014" }),
                 /* @__PURE__ */ u3("td", { children: formatMemory(p3.memory) }),
                 /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: statusClass(p3.status), children: p3.status }) }),
                 /* @__PURE__ */ u3("td", { class: "profiler-text--xs profiler-text--mono profiler-text--muted", children: /* @__PURE__ */ u3("button", { class: "token-copy", onClick: () => copyToken(p3.token), title: "Copy full token", children: copiedToken === p3.token ? "\u2713" : p3.token.substring(0, 8) + "\u2026" }) }),
@@ -1567,6 +1668,7 @@
       this.dpr = 1;
       this.hoveredFrame = null;
       this.zoomStack = [];
+      this.searchQuery = "";
       this.isPanning = false;
       this.panStartX = 0;
       this.panStartViewport = { start: 0, end: 0 };
@@ -1789,6 +1891,10 @@
         this.render();
       }
     }
+    setSearchQuery(query) {
+      this.searchQuery = query;
+      this.render();
+    }
     render() {
       const ctx = this.ctx;
       const w3 = this.canvas.width / this.dpr;
@@ -1798,6 +1904,15 @@
       const style = getComputedStyle(this.canvas);
       const textColor = style.getPropertyValue("--profiler-text").trim() || "#eef2f7";
       const textMuted = style.getPropertyValue("--profiler-text-muted").trim() || "#5e7080";
+      const searchLower = this.searchQuery.toLowerCase();
+      const hasSearch = searchLower.length > 0;
+      if (hasSearch && this.callbacks.onSearchResults) {
+        let matchCount = 0;
+        for (const f4 of this.frames) {
+          if (f4.node.name.toLowerCase().includes(searchLower)) matchCount++;
+        }
+        this.callbacks.onSearchResults(matchCount, this.frames.length);
+      }
       for (const frame of this.frames) {
         const x2 = (frame.absStart - this.viewport.start) / vpRange * w3;
         const fw = (frame.absEnd - frame.absStart) / vpRange * w3;
@@ -1805,8 +1920,9 @@
         if (x2 + fw < 0 || x2 > w3 || fw < 0.5) continue;
         const color = CATEGORY_COLORS[frame.node.category] || "#a78bfa";
         const isHovered = frame === this.hoveredFrame;
+        const isMatch = !hasSearch || frame.node.name.toLowerCase().includes(searchLower);
         ctx.fillStyle = isHovered ? this.lightenColor(color, 0.2) : color;
-        ctx.globalAlpha = isHovered ? 1 : 0.85;
+        ctx.globalAlpha = hasSearch && !isMatch ? 0.2 : isHovered ? 1 : 0.85;
         this.roundRect(ctx, x2, y3, fw, FRAME_HEIGHT, 3);
         ctx.fill();
         ctx.globalAlpha = 1;
@@ -1815,8 +1931,15 @@
           ctx.lineWidth = 1.5;
           this.roundRect(ctx, x2, y3, fw, FRAME_HEIGHT, 3);
           ctx.stroke();
+        } else if (hasSearch && isMatch) {
+          ctx.strokeStyle = "#ffffff";
+          ctx.lineWidth = 1;
+          ctx.globalAlpha = 0.5;
+          this.roundRect(ctx, x2, y3, fw, FRAME_HEIGHT, 3);
+          ctx.stroke();
+          ctx.globalAlpha = 1;
         }
-        if (fw > MIN_TEXT_WIDTH) {
+        if (fw > MIN_TEXT_WIDTH && isMatch) {
           ctx.fillStyle = this.getTextColor(color);
           ctx.font = '11px "JetBrains Mono", monospace';
           ctx.textBaseline = "middle";
@@ -2041,7 +2164,11 @@
     const rendererRef = A2(null);
     const tooltipRef = A2(null);
     const breadcrumbsRef = A2(null);
+    const searchInputRef = A2(null);
     const [isZoomed, setIsZoomed] = d2(false);
+    const [searchQuery, setSearchQuery] = d2("");
+    const [matchCount, setMatchCount] = d2(0);
+    const [totalCount, setTotalCount] = d2(0);
     const data = flamegraphData;
     y2(() => {
       if (!data?.root_events?.length || !canvasRef.current || !containerRef.current) return;
@@ -2073,6 +2200,10 @@
         onZoomChange: (ancestors) => {
           breadcrumbs.update(ancestors);
           setIsZoomed(ancestors.length > 0);
+        },
+        onSearchResults: (match, total) => {
+          setMatchCount(match);
+          setTotalCount(total);
         }
       });
       rendererRef.current = renderer;
@@ -2091,6 +2222,23 @@
         breadcrumbsRef.current = null;
       };
     }, [data]);
+    y2(() => {
+      rendererRef.current?.setSearchQuery(searchQuery);
+      if (!searchQuery) {
+        setMatchCount(0);
+        setTotalCount(0);
+      }
+    }, [searchQuery]);
+    y2(() => {
+      const onKeyDown = (e3) => {
+        if ((e3.ctrlKey || e3.metaKey) && e3.key === "f") {
+          e3.preventDefault();
+          searchInputRef.current?.focus();
+        }
+      };
+      document.addEventListener("keydown", onKeyDown, { capture: true });
+      return () => document.removeEventListener("keydown", onKeyDown, { capture: true });
+    }, []);
     if (!data?.root_events?.length) {
       if (!perfData?.events?.length) {
         return /* @__PURE__ */ u3("div", { class: "profiler-empty", children: /* @__PURE__ */ u3("p", { class: "profiler-empty__description", children: "No performance events recorded" }) });
@@ -2161,6 +2309,24 @@
       ] }, cat)) }),
       /* @__PURE__ */ u3("div", { class: "profiler-flamegraph__controls", children: [
         isZoomed && /* @__PURE__ */ u3("button", { class: "profiler-flamegraph__reset", onClick: handleReset, children: "Reset Zoom" }),
+        /* @__PURE__ */ u3("div", { class: "profiler-flamegraph__search", children: [
+          /* @__PURE__ */ u3(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              class: "profiler-flamegraph__search-input",
+              placeholder: "Search events\u2026 (Ctrl+F)",
+              value: searchQuery,
+              onInput: (e3) => setSearchQuery(e3.target.value)
+            }
+          ),
+          searchQuery && /* @__PURE__ */ u3("span", { class: "profiler-flamegraph__match-count", children: [
+            matchCount,
+            " / ",
+            totalCount
+          ] })
+        ] }),
         /* @__PURE__ */ u3("span", { class: "profiler-flamegraph__hint", children: "Click to zoom, scroll to zoom in/out, drag to pan" })
       ] }),
       /* @__PURE__ */ u3("div", { class: "profiler-flamegraph__canvas-container", ref: containerRef, children: /* @__PURE__ */ u3(

data/lib/profiler/version.rb

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

metadata

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