Display Active Record QueryCache hits in UI (#640)

* Display Active Record QueryCache hits in UI Co-authored-by: Greg Molnar <[email protected]> * Add changelog entry --------- Co-authored-by: Greg Molnar <[email protected]>
MiniProfiler · Feb 6, 2025 · ac28045 · ac28045
1 parent 36de45a
commit ac28045
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - [FIX] Truncate long profiler name in profiler popup. [#634](https://github.com/MiniProfiler/rack-mini-profiler/pull/634)
 - [FIX] `flamegraph_mode` query param having no effect. [#635](https://github.com/MiniProfiler/rack-mini-profiler/pull/635)
 - [FEATURE] Show record type and count in SQL query UI. [#638](https://github.com/MiniProfiler/rack-mini-profiler/pull/638)
+- [FEATURE] Show Active Record QueryCache hits in UI. [#640](https://github.com/MiniProfiler/rack-mini-profiler/pull/640)
 
 ## 3.3.1 - 2024-02-15
 - [FEATURE] Support dynamic `config.content_security_policy_nonce` [#609](https://github.com/MiniProfiler/rack-mini-profiler/pull/609)

diff --git a/lib/html/includes.css b/lib/html/includes.css
@@ -133,19 +133,21 @@
   .profiler-result .profiler-timings .profiler-queries-duration {
     padding-left: 6px; }
   .profiler-result .profiler-timings .profiler-percent-in-sql {
-    white-space: nowrap;
-    text-align: right; }
-  .profiler-result .profiler-timings tfoot td {
-    padding-top: 10px;
+    white-space: nowrap; }
+  .profiler-result .profiler-timings tfoot tr td:last-child {
     text-align: right; }
-    .profiler-result .profiler-timings tfoot td a {
+  .profiler-result .profiler-timings-summary {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 10px; }
+    .profiler-result .profiler-timings-summary a {
       font-size: 95%;
       display: inline-block;
       margin-left: 12px; }
-      .profiler-result .profiler-timings tfoot td a:first-child {
+      .profiler-result .profiler-timings-summary a:first-child {
         float: left;
         margin-left: 0px; }
-      .profiler-result .profiler-timings tfoot td a.profiler-custom-link {
+      .profiler-result .profiler-timings-summary a.profiler-custom-link {
         float: left; }
   .profiler-result .profiler-queries {
     font-family: Helvetica, Arial, sans-serif; }
@@ -163,6 +165,12 @@
       background-color: #fdd; }
     .profiler-result .profiler-queries tr.very-very-slow {
       background-color: #fcc; }
+    .profiler-result .profiler-queries tr.cached {
+      background-color: #f2f0ef; }
+    .profiler-result .profiler-queries span.cached {
+      color: #818589; }
+    .profiler-result .profiler-queries span.cached + pre {
+      display: inline; }
     .profiler-result .profiler-queries pre {
       font-family: Consolas, monospace, serif;
       white-space: pre-wrap; }

diff --git a/lib/html/includes.js b/lib/html/includes.js
@@ -1288,6 +1288,10 @@ var _MiniProfiler = (function() {
 
               sqlTiming.parent_timing_name = timing.name;
 
+              if (sqlTiming.cached) {
+                sqlTiming.row_class = "cached";
+              }
+
               if (sqlTiming.duration_milliseconds > 50) {
                 sqlTiming.row_class = "slow";
               }

diff --git a/lib/html/includes.scss b/lib/html/includes.scss
@@ -147,27 +147,28 @@ $zindex: 2147483640; // near 32bit max 2147483647
     }
     .profiler-percent-in-sql {
       white-space: nowrap;
+    }
+    tfoot tr td:last-child {
       text-align: right;
     }
+  }
 
-    tfoot {
-      td {
-        padding-top: 10px;
-        text-align: right;
+  .profiler-timings-summary {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 10px;
 
-        a {
-          font-size: 95%;
-          display: inline-block;
-          margin-left: 12px;
+    a {
+      font-size: 95%;
+      display: inline-block;
+      margin-left: 12px;
 
-          &:first-child {
-            float: left;
-            margin-left: 0px;
-          }
-          &.profiler-custom-link {
-            float: left;
-          }
-        }
+      &:first-child {
+        float: left;
+        margin-left: 0px;
+      }
+      &.profiler-custom-link {
+        float: left;
       }
     }
   }
@@ -202,6 +203,18 @@ $zindex: 2147483640; // near 32bit max 2147483647
       background-color: #fcc;
     }
 
+    tr.cached {
+      background-color: #f2f0ef;
+    }
+
+    span.cached {
+      color: #818589;
+    }
+
+    span.cached + pre {
+      display: inline;
+    }
+
     pre {
       font-family: $codeFonts;
       white-space: pre-wrap;

diff --git a/lib/html/includes.tmpl b/lib/html/includes.tmpl
@@ -45,33 +45,42 @@
           <tbody>
             {{= MiniProfiler.templates.timingTemplate({timing: it.root, page: it}) }}
           </tbody>
-          <tfoot>
-            <tr>
-              <td colspan="3">
-                {{? !it.client_timings}}
-                   {{= MiniProfiler.templates.linksTemplate({timing: it.root, page: it}) }}
-                {{?}}
-                <a class="profiler-toggle-duration-with-children" title="toggles column with aggregate child durations">show time with children</a>
-                <a
-                  class="profiler-snapshots-page-link"
-                  title="Go to snapshots page"
-                  href="{{= MiniProfiler.options.path }}snapshots">snapshots</a>
-              </td>
-              {{? it.has_sql_timings}}
-                <td colspan="2" class="profiler-number profiler-percent-in-sql" title="{{= MiniProfiler.getSqlTimingsCount(it.root) }} queries spent {{= MiniProfiler.formatDuration(it.duration_milliseconds_in_sql) }} ms of total request time">
-                  {{= MiniProfiler.formatDuration(it.duration_milliseconds_in_sql / it.duration_milliseconds * 100) }}
-                  <span class="profiler-unit">% in sql</span>
+          {{? it.has_sql_timings}}
+            <tfoot>
+              <tr>
+                <td colspan="1">
+                  SQL Summary:
                 </td>
-              {{?}}
-              {{~ it.custom_timing_names :value}}
-                <td colspan="2" class="profiler-number profiler-percentage-in-sql" title="{{= it.custom_timing_stats[value].count }} {{= value.toLowerCase() }} invocations spent {{= MiniProfiler.formatDuration(it.custom_timing_stats[value].duration) }} ms of total request time">
-                  {{= MiniProfiler.formatDuration(it.custom_timing_stats[value].duration / it.duration_milliseconds * 100) }}
-                  <span class="profiler-unit">% in {{= value.toLowerCase() }}</span>
+                <td colspan="5" title="percent of total request time spent in SQL">
+                  {{=it.sql_count}} {{? it.cached_sql_count > 0 }} ({{=it.cached_sql_count}} cached) {{?}}
+                  <span class="profiler-unit" title="percent of total request time spent in SQL"> -
+                  {{= MiniProfiler.formatDuration(it.duration_milliseconds_in_sql / it.duration_milliseconds * 100) }}% in sql
+                  </span>
                 </td>
-              {{~}}
-            </tr>
-          </tfoot>
+              </tr>
+            </tfoot>
+          {{?}}
         </table>
+
+        <div class="profiler-timings-summary">
+          <div>
+            {{? !it.client_timings}}
+                {{= MiniProfiler.templates.linksTemplate({timing: it.root, page: it}) }}
+            {{?}}
+            <a class="profiler-toggle-duration-with-children" title="toggles column with aggregate child durations">show time with children</a>
+            <a
+              class="profiler-snapshots-page-link"
+              title="Go to snapshots page"
+              href="{{= MiniProfiler.options.path }}snapshots">snapshots</a>
+          </div>
+          {{~ it.custom_timing_names :value}}
+            <div class="profiler-number profiler-percentage-in-sql" title="{{= it.custom_timing_stats[value].count }} {{= value.toLowerCase() }} invocations spent {{= MiniProfiler.formatDuration(it.custom_timing_stats[value].duration) }} ms of total request time">
+              {{= MiniProfiler.formatDuration(it.custom_timing_stats[value].duration / it.duration_milliseconds * 100) }}
+              <span class="profiler-unit">% in {{= value.toLowerCase() }}</span>
+            </div>
+          {{~}}
+        </div>
+
         {{? it.client_timings}}
           <table class="profiler-timings profiler-client-timings">
             <thead>
@@ -230,6 +239,9 @@
     <td>
       <div class="query">
         <pre class="profiler-stack-trace">{{= it.s.stack_trace_snippet }}</pre>
+        {{? it.s.cached }}
+          <span class="cached"> [CACHE] </span>
+        {{?}}
         {{? it.s.formatted_command_string}}
           <pre class="prettyprint lang-sql"><code>{{= it.s.formatted_command_string }}; {{= MiniProfiler.formatParameters(it.s.parameters) }}</code></pre>
         {{??}}