query_owl 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d6d1c90011594e84ad366b86242261eb507c646bbbd99567ee68e764f79fed3
-  data.tar.gz: 6b3d04a4eeba7e6cd61f77ac1c86d9267490cb68bc4bee375bf3fca39db21c48
+  metadata.gz: daca52db3c3f2564dc0e0e51b2271e995db9042ffd82d2b2a2ef25529fc5cbd4
+  data.tar.gz: 47cad0afa15471a0fb60dc6366dbadcc5bc480b2cf7b17321198230fd46f8d8b
 SHA512:
-  metadata.gz: 48dd728246c8226b5fc04bf819e85712e8eaf5453d1fe77ca1ce3ba012f7399a52af50cffacb652c5958f2ab086c35270930fed9c093971b3e446bc3846f1756
-  data.tar.gz: 1f26cb6d3c28dccf5708446b4c9e17ce2f334af66ae8b0ed6c6d92eb36440818b4c1feff3cf4ef124f455e54e050641eadc8952aa0a8d59c5b2a4ed50672a8cf
+  metadata.gz: 82cb7e1f4f42c553731c3e0ba32f4b4f7f01a0bf21c837644371fcb02313d4995f27f84fd70f574df3f6ef889266ddec6ba2c7bbf3c5302f3ee0c1084d431539
+  data.tar.gz: 8bf2d7078c201e0bb673943194dbb3d98d07e30a1ce6a9c64ac6c72f0416870aca1349a21050779c7edbc92c1d5f2609219d44fed7745591d60ca83dfe98c387

data/app/assets/stylesheets/query_owl/_02_layout.css

@@ -2,4 +2,5 @@
 .qo-header h1 { font-size: 1.4rem; font-weight: 600; }
 .qo-header p  { color: var(--muted); margin-top: 0.2rem; }
 
-.qo-empty { color: var(--muted); font-style: italic; margin-top: 1rem; }
+.qo-empty   { color: var(--muted); font-style: italic; margin-top: 1rem; }
+.qo-summary { margin-bottom: 0.5rem; }

data/app/assets/stylesheets/query_owl/_03_table.css

@@ -31,4 +31,13 @@
 .qo-table td:nth-child(2) { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 .qo-request  { white-space: nowrap; }
-.qo-path     { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; opacity: .7; }
+.qo-path     { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; opacity: .7; }
+
+.qo-sort-link {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+}
+.qo-sort-link:hover { color: var(--accent, #4f46e5); }
+
+.qo-sort-active { color: var(--accent, #4f46e5); }

data/app/assets/stylesheets/query_owl/_05_filters.css

@@ -0,0 +1,80 @@
+.qo-filters {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 0.6rem 1rem;
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  flex-wrap: wrap;
+}
+
+.qo-filters label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--muted);
+}
+
+.qo-select,
+.qo-input {
+  font-family: inherit;
+  font-size: 13px;
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+}
+
+.qo-input { min-width: 160px; }
+
+.qo-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.qo-input-wrapper .qo-input { padding-right: 1.6rem; }
+
+.qo-input-clear {
+  position: absolute;
+  right: 0.4rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1;
+  padding: 0.15rem 0.2rem;
+  border-radius: 2px;
+}
+
+.qo-input-clear:hover { color: var(--text); background: var(--border); }
+
+.qo-select:focus,
+.qo-input:focus {
+  outline: none;
+  border-color: #86b7fe;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.15);
+}
+
+.qo-btn {
+  display: inline-block;
+  padding: 0.3rem 0.75rem;
+  font-size: 12px;
+  border-radius: var(--radius);
+  text-decoration: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.qo-btn--muted {
+  background: transparent;
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+
+.qo-btn--muted:hover { background: var(--bg); color: var(--text); }

data/app/controllers/query_owl/slow_queries_controller.rb

@@ -6,23 +6,43 @@ module QueryOwl
 
     before_action :check_dashboard_enabled, if: -> { request.format.html? }
 
+    SORTABLE_COLUMNS = %w[type info recorded_at].freeze
+
     def index
       filters = request.query_parameters
       events  = EventStore.all
-      events  = events.select { |e| e[:type].to_s == filters["type"] }       if filters["type"].present?
-      events  = events.select { |e| e[:controller] == filters["controller"] } if filters["controller"].present?
-      events  = events.select { |e| e[:action] == filters["action"] }         if filters["action"].present?
+      events  = events.select { |e| e[:type].to_s == filters["type"] }                     if filters["type"].present?
+      events  = events.select { |e| e[:controller].to_s.include?(filters["controller"]) }  if filters["controller"].present?
+      events  = events.select { |e| e[:action] == filters["action"] }                      if filters["action"].present?
 
       respond_to do |format|
         format.json { render json: events }
-        format.html { @events = events.reverse }
+        format.html do
+          @type_filter       = filters["type"].presence
+          @controller_filter = filters["controller"].presence
+          @sort              = SORTABLE_COLUMNS.include?(filters["sort"]) ? filters["sort"] : "recorded_at"
+          @direction         = filters["direction"] == "asc" ? "asc" : "desc"
+          @events            = sorted_events(events, @sort, @direction)
+        end
       end
     end
 
     private
 
-    def check_dashboard_enabled
-      head :forbidden unless QueryOwl.config.dashboard_enabled
-    end
+      def sorted_events(events, sort, direction)
+        sorted = case sort
+        when "type"
+                   events.sort_by { |e| e[:type].to_s }
+        when "info"
+                   events.sort_by { |e| e[:duration_ms] || e[:count] || 0 }
+        else
+                   events.sort_by { |e| e[:recorded_at] || Time.at(0) }
+        end
+        direction == "asc" ? sorted : sorted.reverse
+      end
+
+      def check_dashboard_enabled
+        head :forbidden unless QueryOwl.config.dashboard_enabled
+      end
   end
 end

data/app/helpers/query_owl/application_helper.rb

@@ -5,5 +5,21 @@ module QueryOwl
       css = dir.glob("_*.css").sort.map(&:read).join("\n")
       content_tag(:style, css.html_safe)
     end
+
+    def sort_th(label, column, current_sort, current_dir)
+      active    = current_sort == column.to_s
+      next_dir  = (active && current_dir == "asc") ? "desc" : "asc"
+      indicator = active ? (current_dir == "asc" ? " ▲" : " ▼") : ""
+      params    = request.query_parameters.merge("sort" => column, "direction" => next_dir)
+      href      = "?" + params.to_query
+      content_tag(:th) do
+        link_to(
+          "#{label}#{indicator}".html_safe,
+          href,
+          class: ["qo-sort-link", ("qo-sort-active" if active)].compact.join(" "),
+          data: { turbo_frame: "qo-events" }
+        )
+      end
+    end
   end
 end

data/app/javascript/query_owl/application.js

@@ -0,0 +1,6 @@
+import "@hotwired/turbo"
+import { Application } from "@hotwired/stimulus"
+import TableFilterController from "query_owl/table_filter_controller"
+
+const application = Application.start()
+application.register("table-filter", TableFilterController)

data/app/javascript/query_owl/table_filter_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["controllerInput", "clearButton"]
+
+  connect() {
+    this._updateClear()
+  }
+
+  filter({ target }) {
+    clearTimeout(this._timer)
+    this._updateClear()
+    this._timer = setTimeout(() => target.form.requestSubmit(), 300)
+  }
+
+  select({ target }) {
+    clearTimeout(this._timer)
+    target.form.requestSubmit()
+  }
+
+  clearController() {
+    this.controllerInputTarget.value = ""
+    this._updateClear()
+    this.controllerInputTarget.form.requestSubmit()
+  }
+
+  _updateClear() {
+    if (this.hasClearButtonTarget) {
+      this.clearButtonTarget.hidden = this.controllerInputTarget.value.length === 0
+    }
+  }
+}

data/app/views/layouts/query_owl/application.html.erb

@@ -6,6 +6,7 @@
   <title>QueryOwl</title>
   <link rel="icon" href="data:,">
   <%= inline_styles %>
+  <%= javascript_importmap_tags "query_owl" %>
 </head>
 <body>
   <%= yield %>

data/app/views/query_owl/slow_queries/index.html.erb

@@ -1,43 +1,81 @@
 <div class="qo-header">
   <h1>QueryOwl</h1>
-  <p>Last <%= @events.length %> detected event<%= "s" unless @events.length == 1 %> (newest first)</p>
 </div>
 
-<% if @events.empty? %>
-  <p class="qo-empty">No events detected yet.</p>
-<% else %>
-  <table class="qo-table">
-    <thead>
-      <tr>
-        <th>Type</th>
-        <th>SQL / Details</th>
-        <th>Info</th>
-        <th>Request</th>
-        <th>Recorded At</th>
-        <th>Backtrace</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @events.each do |event| %>
+<form class="qo-filters" action="<%= slow_queries_path %>" method="get"
+      data-controller="table-filter"
+      data-turbo-frame="qo-events">
+  <input type="hidden" name="sort" value="<%= @sort %>">
+  <input type="hidden" name="direction" value="<%= @direction %>">
+
+  <label for="qo-type-filter">Type</label>
+  <select id="qo-type-filter" name="type" class="qo-select"
+          data-action="change->table-filter#select">
+    <option value="">All</option>
+    <option value="n_plus_one"        <%= "selected" if @type_filter == "n_plus_one" %>>N+1</option>
+    <option value="slow_query"        <%= "selected" if @type_filter == "slow_query" %>>Slow Query</option>
+    <option value="unused_eager_load" <%= "selected" if @type_filter == "unused_eager_load" %>>Unused Eager Load</option>
+  </select>
+
+  <label for="qo-controller-filter">Controller</label>
+  <div class="qo-input-wrapper">
+    <input id="qo-controller-filter" type="text" name="controller" class="qo-input"
+           placeholder="e.g. widgets"
+           value="<%= @controller_filter %>"
+           data-table-filter-target="controllerInput"
+           data-action="input->table-filter#filter">
+    <button type="button" class="qo-input-clear" aria-label="Clear controller filter"
+            data-table-filter-target="clearButton"
+            data-action="click->table-filter#clearController"
+            <%= "hidden" if @controller_filter.blank? %>>✕</button>
+  </div>
+
+  <% if @type_filter.present? || @controller_filter.present? %>
+    <%= link_to "Clear", slow_queries_path, class: "qo-btn qo-btn--muted" %>
+  <% end %>
+</form>
+
+<turbo-frame id="qo-events">
+  <p class="qo-summary qo-muted">
+    <%= @events.length %> event<%= "s" unless @events.length == 1 %><%= " (filtered)" if @type_filter.present? || @controller_filter.present? %>
+  </p>
+
+  <% if @events.empty? %>
+    <p class="qo-empty">No events detected yet.</p>
+  <% else %>
+    <table class="qo-table">
+      <thead>
         <tr>
-          <td><span class="qo-badge qo-badge--<%= event[:type] %>"><%= event[:type].to_s.tr("_", " ") %></span></td>
-          <td class="qo-monospace"><%= event[:sql] || "#{event[:model]}##{event[:association]}" %></td>
-          <td class="qo-muted">
-            <% if event[:count] %>count: <%= event[:count] %><% end %>
-            <% if event[:duration_ms] %><%= event[:duration_ms] %>ms<% end %>
-          </td>
-          <td class="qo-request qo-muted">
-            <% if event[:controller] || event[:action] %>
-              <span class="qo-monospace"><%= [event[:controller], event[:action]].compact.join("#") %></span>
-            <% end %>
-            <% if event[:path] %>
-              <br><span class="qo-path"><%= event[:path] %></span>
-            <% end %>
-          </td>
-          <td class="qo-muted"><%= event[:recorded_at]&.strftime("%H:%M:%S") %></td>
-          <td class="qo-monospace qo-muted"><%= Array(event[:backtrace]).first %></td>
+          <%= sort_th("Type", "type", @sort, @direction) %>
+          <th>SQL / Details</th>
+          <%= sort_th("Info", "info", @sort, @direction) %>
+          <th>Request</th>
+          <%= sort_th("Recorded At", "recorded_at", @sort, @direction) %>
+          <th>Backtrace</th>
         </tr>
-      <% end %>
-    </tbody>
-  </table>
-<% end %>
+      </thead>
+      <tbody>
+        <% @events.each do |event| %>
+          <tr>
+            <td><span class="qo-badge qo-badge--<%= event[:type] %>"><%= event[:type].to_s.tr("_", " ") %></span></td>
+            <td class="qo-monospace"><%= event[:sql] || "#{event[:model]}##{event[:association]}" %></td>
+            <td class="qo-muted">
+              <% if event[:count] %>count: <%= event[:count] %><% end %>
+              <% if event[:duration_ms] %><%= event[:duration_ms] %>ms<% end %>
+            </td>
+            <td class="qo-request qo-muted">
+              <% if event[:controller] || event[:action] %>
+                <span class="qo-monospace"><%= [event[:controller], event[:action]].compact.join("#") %></span>
+              <% end %>
+              <% if event[:path] %>
+                <br><span class="qo-path"><%= event[:path] %></span>
+              <% end %>
+            </td>
+            <td class="qo-muted"><%= event[:recorded_at]&.strftime("%H:%M:%S") %></td>
+            <td class="qo-monospace qo-muted"><%= Array(event[:backtrace]).first %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</turbo-frame>

data/config/importmap.rb

@@ -0,0 +1,4 @@
+pin "@hotwired/turbo", to: "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.23/dist/turbo.es2017-esm.js"
+pin "@hotwired/stimulus", to: "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.js"
+pin "query_owl", to: "query_owl/application.js"
+pin "query_owl/table_filter_controller", to: "query_owl/table_filter_controller.js"

data/lib/query_owl/engine.rb

@@ -1,8 +1,24 @@
+require "turbo-rails"
+require "importmap-rails"
+
 module QueryOwl
   class Engine < ::Rails::Engine
     isolate_namespace QueryOwl
     config.generators.api_only = true
 
+    initializer "query_owl.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << root.join("app/javascript")
+      end
+    end
+
+    initializer "query_owl.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << root.join("config/importmap.rb")
+        app.config.importmap.cache_sweepers << root.join("app/javascript")
+      end
+    end
+
     initializer "query_owl.subscribe" do
       ActiveSupport::Notifications.subscribe("sql.active_record") do |*args|
         next unless QueryOwl.config.enabled

data/lib/query_owl/version.rb

@@ -1,3 +1,3 @@
 module QueryOwl
-  VERSION = "0.6.0"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: query_owl
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Chuck Smith
@@ -23,6 +23,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '7.1'
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: A leaner alternative to Bullet. Detects N+1 queries and slow queries
   in development, logging structured warnings to your Rails logger without the noise.
 email:
@@ -38,14 +66,18 @@ files:
 - app/assets/stylesheets/query_owl/_02_layout.css
 - app/assets/stylesheets/query_owl/_03_table.css
 - app/assets/stylesheets/query_owl/_04_badges.css
+- app/assets/stylesheets/query_owl/_05_filters.css
 - app/controllers/query_owl/application_controller.rb
 - app/controllers/query_owl/slow_queries_controller.rb
 - app/helpers/query_owl/application_helper.rb
+- app/javascript/query_owl/application.js
+- app/javascript/query_owl/table_filter_controller.js
 - app/jobs/query_owl/application_job.rb
 - app/mailers/query_owl/application_mailer.rb
 - app/models/query_owl/application_record.rb
 - app/views/layouts/query_owl/application.html.erb
 - app/views/query_owl/slow_queries/index.html.erb
+- config/importmap.rb
 - config/routes.rb
 - lib/generators/query_owl/install/install_generator.rb
 - lib/generators/query_owl/install/templates/initializer.rb