display activerecord query cache hits

MiniProfiler · Jul 17, 2019 · 3aebddb · 3aebddb
1 parent cc2620b
commit 3aebddb
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 43 deletions.
diff --git a/lib/html/includes.css b/lib/html/includes.css
@@ -82,70 +82,72 @@
         margin-left: 0px; }
       .profiler-result .profiler-timings tfoot td a.profiler-custom-link {
         float: left; }
-  .profiler-result .profiler-queries {
+  .profiler-result .cached-queries {
+    height: 100vh; }
+  .profiler-result .profiler-queries, .profiler-result .cached-queries {
     font-family: Helvetica, Arial, sans-serif; }
-    .profiler-result .profiler-queries .profiler-stack-trace {
+    .profiler-result .profiler-queries .profiler-stack-trace, .profiler-result .cached-queries .profiler-stack-trace {
       margin-bottom: 15px; }
-    .profiler-result .profiler-queries tbody tr {
+    .profiler-result .profiler-queries tbody tr, .profiler-result .cached-queries tbody tr {
       border-bottom: 1px solid #f1f1f1; }
-    .profiler-result .profiler-queries tr {
+    .profiler-result .profiler-queries tr, .profiler-result .cached-queries tr {
       background-color: #FFF; }
-    .profiler-result .profiler-queries tr.slow {
+    .profiler-result .profiler-queries tr.slow, .profiler-result .cached-queries tr.slow {
       background-color: #FEE; }
-    .profiler-result .profiler-queries tr.very-slow {
+    .profiler-result .profiler-queries tr.very-slow, .profiler-result .cached-queries tr.very-slow {
       background-color: #FDD; }
-    .profiler-result .profiler-queries tr.very-very-slow {
+    .profiler-result .profiler-queries tr.very-very-slow, .profiler-result .cached-queries tr.very-very-slow {
       background-color: #FCC; }
-    .profiler-result .profiler-queries pre {
+    .profiler-result .profiler-queries pre, .profiler-result .cached-queries pre {
       font-family: Consolas, monospace, serif;
       white-space: pre-wrap; }
-    .profiler-result .profiler-queries th {
+    .profiler-result .profiler-queries th, .profiler-result .cached-queries th {
       background-color: #fff;
       border-bottom: 1px solid #555;
       font-weight: bold;
       padding: 15px;
       white-space: nowrap; }
-    .profiler-result .profiler-queries td {
+    .profiler-result .profiler-queries td, .profiler-result .cached-queries td {
       padding: 15px;
       text-align: left; }
-      .profiler-result .profiler-queries td:last-child {
+      .profiler-result .profiler-queries td:last-child, .profiler-result .cached-queries td:last-child {
         padding-right: 25px; }
-    .profiler-result .profiler-queries .profiler-since-start, .profiler-result .profiler-queries .profiler-duration {
+    .profiler-result .profiler-queries .profiler-since-start, .profiler-result .profiler-queries .profiler-duration, .profiler-result .cached-queries .profiler-since-start, .profiler-result .cached-queries .profiler-duration {
       text-align: right; }
-    .profiler-result .profiler-queries .profiler-info div {
+    .profiler-result .profiler-queries .profiler-info div, .profiler-result .cached-queries .profiler-info div {
       text-align: right;
       margin-bottom: 5px; }
-    .profiler-result .profiler-queries .profiler-gap-info, .profiler-result .profiler-queries .profiler-gap-info td {
+    .profiler-result .profiler-queries .profiler-gap-info, .profiler-result .profiler-queries .profiler-gap-info td, .profiler-result .cached-queries .profiler-gap-info, .profiler-result .cached-queries .profiler-gap-info td {
       background-color: #ccc; }
-    .profiler-result .profiler-queries .profiler-gap-info .profiler-unit {
+    .profiler-result .profiler-queries .profiler-gap-info .profiler-unit, .profiler-result .cached-queries .profiler-gap-info .profiler-unit {
       color: #777; }
-    .profiler-result .profiler-queries .profiler-gap-info .profiler-info {
+    .profiler-result .profiler-queries .profiler-gap-info .profiler-info, .profiler-result .cached-queries .profiler-gap-info .profiler-info {
       text-align: right; }
-    .profiler-result .profiler-queries .profiler-gap-info.profiler-trivial-gaps {
+    .profiler-result .profiler-queries .profiler-gap-info.profiler-trivial-gaps, .profiler-result .cached-queries .profiler-gap-info.profiler-trivial-gaps {
       display: none; }
-    .profiler-result .profiler-queries .profiler-trivial-gap-container {
+    .profiler-result .profiler-queries .profiler-trivial-gap-container, .profiler-result .cached-queries .profiler-trivial-gap-container {
       text-align: center; }
-    .profiler-result .profiler-queries .str {
+    .profiler-result .profiler-queries .str, .profiler-result .cached-queries .str {
       color: maroon; }
-    .profiler-result .profiler-queries .kwd {
+    .profiler-result .profiler-queries .kwd, .profiler-result .cached-queries .kwd {
       color: #00008b; }
-    .profiler-result .profiler-queries .com {
+    .profiler-result .profiler-queries .com, .profiler-result .cached-queries .com {
       color: gray; }
-    .profiler-result .profiler-queries .typ {
+    .profiler-result .profiler-queries .typ, .profiler-result .cached-queries .typ {
       color: #2b91af; }
-    .profiler-result .profiler-queries .lit {
+    .profiler-result .profiler-queries .lit, .profiler-result .cached-queries .lit {
       color: maroon; }
-    .profiler-result .profiler-queries .pun {
+    .profiler-result .profiler-queries .pun, .profiler-result .cached-queries .pun {
       color: #000; }
-    .profiler-result .profiler-queries .pln {
+    .profiler-result .profiler-queries .pln, .profiler-result .cached-queries .pln {
       color: #000; }
-    .profiler-result .profiler-queries .tag {
+    .profiler-result .profiler-queries .tag, .profiler-result .cached-queries .tag {
       color: maroon; }
-    .profiler-result .profiler-queries .atn {
+    .profiler-result .profiler-queries .atn, .profiler-result .cached-queries .atn {
       color: red; }
-    .profiler-result .profiler-queries .atv {
+    .profiler-result .profiler-queries .atv, .profiler-result .cached-queries .atv {
       color: blue; }
-    .profiler-result .profiler-queries .dec {
+    .profiler-result .profiler-queries .dec, .profiler-result .cached-queries .dec {
       color: purple; }
   .profiler-result .profiler-warning, .profiler-result .profiler-warning *, .profiler-result .profiler-warning .profiler-queries-show, .profiler-result .profiler-warning .profiler-queries-show .profiler-unit {
     color: #f00; }
@@ -266,14 +268,14 @@
       padding-bottom: 3px; }
     .profiler-results .profiler-popup .profiler-timings .profiler-label {
       max-width: 275px; }
-  .profiler-results .profiler-queries {
+  .profiler-results .profiler-queries, .profiler-results .cached-queries {
     display: none;
     z-index: 2147483643;
     position: absolute;
     overflow-y: auto;
     overflow-x: auto;
     background-color: #fff; }
-    .profiler-results .profiler-queries th {
+    .profiler-results .profiler-queries th, .profiler-results .cached-queries th {
       font-size: 17px; }
   .profiler-results.profiler-min .profiler-result {
     display: none; }

diff --git a/lib/html/includes.js b/lib/html/includes.js
@@ -192,6 +192,10 @@ var MiniProfiler = (function () {
         // lightbox in the queries
         popup.find('.profiler-queries-show').on('click', function () { queriesShow($(this), result); });
 
+        popup.find('.cached-queries-show').on('click', function () {
+            cachedQueriesShow($(this), $(document));
+        });
+
         // limit count
         if (container.find('.profiler-result').length > options.maxTracesToShow)
             container.find('.profiler-result').first().remove();
@@ -279,21 +283,33 @@ var MiniProfiler = (function () {
         popup.hide();
     };
 
-    var queriesShow = function (link, result) {
+    var cachedQueriesShow = function (link, result) {
+        var queries = result.find('.cached-queries');
+        showQueriesWrapper(queries)
+        queries.show();
+    }
 
+    var showQueriesWrapper = function(wrapper) {
         var px = 30,
             win = $(window),
             width = win.width() - 2 * px,
-            height = win.height() - 2 * px,
-            queries = result.find('.profiler-queries');
+            height = win.height() - 2 * px;
 
         // opaque background
         $('<div class="profiler-queries-bg"/>').appendTo('body').css({ 'height': $(document).height() }).show();
 
         // center the queries and ensure long content is scrolled
-        queries.css(options.renderVerticalPosition, px).css({'max-height': height, 'width': width }).css(options.renderHorizontalPosition, px)
+        wrapper.css(options.renderVerticalPosition, px).css({'max-height': height, 'width': width }).css(options.renderHorizontalPosition, px)
             .find('table').css({ 'width': width });
+    }
 
+    var queriesShow = function (link, result) {
+        var queries = result.find('.profiler-queries');
+        showQueriesWrapper(queries)
+        var px = 30,
+            win = $(window),
+            width = win.width() - 2 * px,
+            height = win.height() - 2 * px;
         // have to show everything before we can get a position for the first query
         queries.show();
 
@@ -386,6 +402,7 @@ var MiniProfiler = (function () {
             if (hideQueries) {
                 bg.remove();
                 queries.hide();
+                popup.closest('.profiler-result').find('.cached-queries').hide();
             }
 
             if (hidePopup) {

diff --git a/lib/html/includes.scss b/lib/html/includes.scss
@@ -149,7 +149,11 @@ $zindex:2147483640; // near 32bit max 2147483647
         }
     }
 
-    .profiler-queries {
+    .cached-queries {
+        height: 100vh;
+    }
+
+    .profiler-queries, .cached-queries {
         font-family:$normalFonts;
 
         .profiler-stack-trace {
@@ -257,7 +261,7 @@ $zindex:2147483640; // near 32bit max 2147483647
 
     &.profiler-top {
       top:0px;
-      
+
       &.profiler-left {
           left:0px;
 
@@ -423,7 +427,7 @@ $zindex:2147483640; // near 32bit max 2147483647
         }
     }
 
-    .profiler-queries {
+    .profiler-queries, .cached-queries {
         display:none;
         z-index:$zindex + 3;
         position:absolute;

diff --git a/lib/html/includes.tmpl b/lib/html/includes.tmpl
@@ -61,6 +61,15 @@
               </td>
             {{/each}}
             </tr>
+            {{if activerecord_query_cache_hits.length > 0}}
+              <tr>
+                <td colspan="3">&nbsp;</td>
+                <td colspan="2" class="profiler-number profiler-percent-in-sql" title="${activerecord_query_cache_hits} queries hit the cache">
+                  <a class="cached-queries-show">${activerecord_query_cache_hits.length}</a>
+                  <span class="profiler-unit">queries hit the cache</span>
+                </td>
+              </tr>
+            {{/if}}
           </tfoot>
         </table>
         {{if client_timings}}
@@ -121,7 +130,23 @@
       </p>
     </div>
   {{/if}}
-
+  {{if activerecord_query_cache_hits.length > 0}}
+    <div class="cached-queries">
+      <table>
+      <thead>
+        <tr>
+          <th style="text-align:left">Query</th>
+          <th style="text-align:left">Binds</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{each(i, s) activerecord_query_cache_hits}}
+          {{tmpl({g: s}) "#queryCacheTemplate"}}
+        {{/each}}
+      </tbody>
+      </table>
+    </div>
+  {{/if}}
   </div>
 
 </script>
@@ -226,3 +251,14 @@
   </tr>
 
 </script>
+
+<script id="queryCacheTemplate" type="text/x-jquery-tmpl">
+  <tr>
+    <td class="query">
+      <div>${g.sql}</div>
+    </td>
+    <td class="query">
+      <div>${g.binds}</div>
+    </td>
+  </tr>
+</script>
diff --git a/lib/mini_profiler/asset_version.rb b/lib/mini_profiler/asset_version.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
-
 module Rack
   class MiniProfiler
-    ASSET_VERSION = 'e7cc2f0165a64084b6ec661c38cde91f'
+    ASSET_VERSION = '86622b414685246bce99cabc1ea0d9a7'
   end
 end
diff --git a/lib/mini_profiler/profiler.rb b/lib/mini_profiler/profiler.rb
@@ -76,6 +76,17 @@ def initialize(app, config = nil)
         @config.storage_instance = @config.storage.new(@config.storage_options)
       end
       @storage = @config.storage_instance
+      if defined?(ActiveSupport)
+        ActiveSupport::Notifications.subscribe "sql.active_record" do |*args|
+          event = ActiveSupport::Notifications::Event.new *args
+          if event.payload[:cached]
+            current.current_timer.page.attributes[:activerecord_query_cache_hits] << {
+              sql: event.payload[:sql],
+              binds: event.payload[:binds].collect { |b| "#{b.name}: #{b.value_for_database}" }.join(', ')
+            }
+          end
+        end
+      end
     end
 
     def user(env)

diff --git a/lib/mini_profiler/timer_struct/page.rb b/lib/mini_profiler/timer_struct/page.rb
@@ -39,7 +39,8 @@ def initialize(env)
             executed_scalars: 0,
             executed_non_queries: 0,
             custom_timing_names: [],
-            custom_timing_stats: {}
+            custom_timing_stats: {},
+            activerecord_query_cache_hits: []
           )
           name = "#{env['REQUEST_METHOD']} http://#{env['SERVER_NAME']}:#{env['SERVER_PORT']}#{env['SCRIPT_NAME']}#{env['PATH_INFO']}"
           self[:root] = TimerStruct::Request.createRoot(name, self)

diff --git a/lib/mini_profiler/timer_struct/request.rb b/lib/mini_profiler/timer_struct/request.rb
@@ -11,7 +11,7 @@ def self.createRoot(name, page)
           end
         end
 
-        attr_accessor :children_duration
+        attr_accessor :children_duration, :page
 
         def initialize(name, page, parent)
           start_millis = (Process.clock_gettime(Process::CLOCK_MONOTONIC) * 1000).to_i - page[:started]