rails_mini_profiler 0.6.0 → 0.7.0

data/app/javascript/stylesheets/profiled_requests.scss

@@ -1,15 +1,4 @@
-@import 'components/profiled_request_table/placeholder';
-@import 'components/profiled_request_table/profiled_request_table';
-
-main {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-
-.main-section {
-  width: var(--main-width);
-}
+@import 'components/profiled_request_table';
 
 .search-field {
   box-sizing: border-box;
@@ -18,57 +7,11 @@ main {
   border-radius: 5px;
 }
 
-.request-details-data {
-  display: flex;
-  padding: 1rem 0;
-}
-
-.request-details-actions {
+.profiled-requests-header {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 0 1rem;
-  margin: 0;
-}
-
-.data-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
-  margin-right: 3rem;
-  list-style: none;
-}
-
-.data-item small {
-  color: var(--grey-400);
-}
-
-.data-item span {
-  margin: 0.25rem 0;
-}
-
-[class*='request-status-2'],
-[class*='request-method-get'] {
-  background: var(--green-400) !important;
-  color: white;
-}
-
-[class*='request-status-4'],
-[class*='request-method-put'],
-[class*='request-method-patch'] {
-  background: var(--yellow-400) !important;
-  color: white;
-}
-
-[class*='request-status-5'],
-[class*='request-method-delete'] {
-  background: var(--red-500) !important;
-  color: white;
-}
-
-.flamegraph-button button {
-  background: var(--grey-200);
 }
 
 .clear-action button {
@@ -80,10 +23,3 @@ main {
     background: var(--red-600);
   }
 }
-
-.profiled-requests-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}

data/app/javascript/stylesheets/rails-mini-profiler.scss

@@ -1,10 +1,15 @@
 @import 'flashes';
 @import 'flamegraph';
-@import 'navbar';
 @import 'profiled_requests';
 @import 'traces';
+@import 'components/buttons';
+@import 'components/input';
+@import 'components/navbar';
 @import 'components/pagination';
-@import 'components/page_header/page_header';
+@import 'components/page_header';
+@import 'components/dropdown';
+@import 'components/placeholder';
+@import 'components/trace';
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
 
 @font-face {
@@ -55,6 +60,9 @@ html {
   --primary: var(--red-600);
   --border-color: var(--grey-200);
   --text-color: var(--grey-900);
+  --fw-normal: 400;
+  --fw-semibold: 600;
+  --fw-bold: 700;
 }
 
 * {
@@ -70,36 +78,14 @@ body {
   color: var(--text-color);
 }
 
-button,
-.button {
-  display: inline-block;
-  padding: 0.5em 0.5em;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 1rem;
-  text-align: center;
-  text-decoration: none;
-
-  &:disabled {
-    background: var(--grey-200);
-    cursor: not-allowed;
-  }
-}
-
-button:hover {
-  box-shadow: 0 0.25rem 0.25rem 0 var(--grey-50);
+main {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }
 
-button.none {
-  padding: 0;
-  border: none;
-  background: none;
-  outline: none;
-
-  &:hover {
-    box-shadow: none;
-  }
+.main-section {
+  width: var(--main-width);
 }
 
 /* --------------------------------------- */

data/app/javascript/stylesheets/traces.scss

@@ -1,110 +1,78 @@
-.trace-list {
-  padding: 0;
-  margin: 2rem 0;
-}
-
-.trace {
+.profiled-request-details {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  padding: 0.25em 0;
-  list-style: none;
+  justify-content: space-between;
+  padding-bottom: 2rem;
 }
 
-.trace:nth-child(odd) {
-  background: var(--grey-100);
+.request-details-data {
+  display: flex;
 }
 
-.trace .trace-bar {
-  position: relative;
-  height: 16px;
+.data-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   padding: 0;
-  margin: 0;
-  background: linear-gradient(to top right, var(--grey-500), var(--grey-400));
-  cursor: pointer;
-}
-
-.instantiation-trace .trace-bar {
-  background: linear-gradient(to top right, var(--green-400), var(--green-300));
-}
-
-.sequel-trace .trace-bar {
-  background: linear-gradient(to top right, var(--green-500), var(--green-400));
+  margin-right: 3rem;
+  list-style: none;
 }
 
-.controller-trace .trace-bar {
-  background: linear-gradient(to top right, var(--yellow-500), var(--yellow-400));
+.data-item small {
+  color: var(--grey-400);
 }
 
-.render-template-trace .trace-bar,
-.render-partial-trace .trace-bar {
-  background: linear-gradient(to top right, var(--blue-500), var(--blue-400));
+.data-item span {
+  margin: 0.25rem 0;
 }
 
-.trace-name {
-  overflow: hidden;
-  box-sizing: border-box;
-  padding: 0 0.5em;
-  margin: 0;
-  color: var(--grey-400);
-  font-size: 14px;
-  text-align: right;
-  text-overflow: ellipsis;
+[class*='request-status-2'],
+[class*='request-method-get'] {
+  background: var(--green-400) !important;
+  color: white;
 }
 
-.trace-payload {
-  margin: 0;
+[class*='request-status-4'],
+[class*='request-method-put'],
+[class*='request-method-patch'] {
+  background: var(--yellow-400) !important;
+  color: white;
 }
 
-.sequel-trace-query {
-  overflow: auto;
-  max-height: 100px;
-  padding: 1em 1em;
-  background: var(--grey-100);
-  white-space: pre-wrap;
+[class*='request-status-5'],
+[class*='request-method-delete'] {
+  background: var(--red-500) !important;
+  color: white;
 }
 
-.sequel-trace-binds {
-  overflow: auto;
-  max-height: 100px;
-  padding: 0.5em 1em;
-  margin: 0 0 1em 0;
-  background: var(--grey-50);
-  font-size: 12px;
-  white-space: pre-wrap;
+.trace-list {
+  padding: 1rem;
+  border: 1px solid var(--grey-200);
+  border-radius: 5px;
 }
 
-.trace-table {
+.trace-details-table {
   width: 100%;
   border: hidden 1px var(--border-color);
   margin-top: 1em;
   border-collapse: collapse;
 }
 
-.backtrace {
+.trace-details-table tr th {
+  font-weight: var(--fw-semibold);
+}
+
+.trace-list-header {
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5em;
-  background: var(--grey-100);
+  padding-bottom: 1rem;
 }
 
-.backtrace button {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0;
-  background: none;
+.trace-list-filters {
+  display: flex;
+  width: 60%;
+  align-items: center;
+  justify-content: space-between;
   color: var(--grey-500);
-  transition: color 200ms ease-in-out;
-}
-
-.backtrace button.copied {
-  color: var(--green-400);
-}
-
-.backtrace button svg {
-  width: 20px;
-  height: 20px;
 }

data/app/presenters/rails_mini_profiler/profiled_request_presenter.rb

@@ -30,8 +30,8 @@ module RailsMiniProfiler
 
       return nil unless model.flamegraph.present?
 
-      link_to(flamegraph_path(model.id), title: 'Show Flamegraph', class: 'flamegraph-button') do
-        content_tag('button', 'Flamegraph')
+      link_to(flamegraph_path(model.id), title: 'Show Flamegraph') do
+        content_tag('button', 'Flamegraph', class: 'btn-grey')
       end
     end
   end

data/app/presenters/rails_mini_profiler/trace_presenter.rb

@@ -2,9 +2,12 @@
 
 module RailsMiniProfiler
   class TracePresenter < BasePresenter
-    def initialize(trace, view, profiled_request:)
+    def initialize(trace, view, context: {})
       super(trace, view)
-      @profiled_request = profiled_request
+      @start = context[:start]
+      @finish = context[:finish]
+      @total_duration = context[:total_duration]
+      @total_allocations = context[:total_allocations]
     end
 
     def label
@@ -38,7 +41,7 @@ module RailsMiniProfiler
     end
 
     def duration_percent
-      (model.duration.to_f / @profiled_request.duration * 100).round
+      (model.duration.to_f / @total_duration * 100).round
     end
 
     def allocations
@@ -46,16 +49,15 @@ module RailsMiniProfiler
     end
 
     def allocations_percent
-      (model.allocations.to_f / @profiled_request.allocations * 100).round
+      (model.allocations.to_f / @total_allocations * 100).round
     end
 
     def from_start
-      (model.start - @profiled_request.start).to_f / 100
+      (model.start - @start).to_f / 100
     end
 
     def from_start_percent
-      ((model.start - @profiled_request.start).to_f /
-        (@profiled_request.finish - @profiled_request.start)).to_f * 100
+      ((model.start - @start).to_f / (@finish - @start)).to_f * 100
     end
   end
 end

data/app/search/rails_mini_profiler/profiled_request_search.rb

@@ -27,7 +27,6 @@ module RailsMiniProfiler
     end
 
     option(:duration) do |scope, value|
-      value = value.tr('>', '').to_i * 100
       scope.where('duration > :duration', duration: value)
     end
   end

data/app/search/rails_mini_profiler/trace_search.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RailsMiniProfiler
+  class TraceSearch < BaseSearch
+    option(:name) do |scope, value|
+      scope.where(name: value)
+    end
+
+    option(:duration) do |scope, value|
+      scope.where('duration > :duration', duration: value)
+    end
+
+    option(:allocations) do |scope, value|
+      scope.where('allocations > :allocations', allocations: value)
+    end
+
+    option(:payload) do |scope, value|
+      payload_column = DatabaseAdapter.cast_to_text(:payload)
+      scope.where("#{payload_column} LIKE ?", "%#{value}%")
+    end
+
+    option(:backtrace) do |scope, value|
+      backtrace_column = Adapters::DatabaseAdapter.cast_to_text(:backtrace)
+      scope.where("#{backtrace_column} LIKE ?", "%#{value}%")
+    end
+  end
+end

data/app/views/rails_mini_profiler/profiled_requests/shared/header/_header.erb

@@ -12,9 +12,8 @@
                    }) -%>
     <%= link_to(destroy_all_profiled_requests_url,
                 method: :delete,
-                class: 'clear-action',
                 data: { confirm: "This will delete all requests. Are you sure?" }) do %>
-      <%= button_tag('Delete All') %>
+      <%= button_tag('Delete All', class: 'btn-red') %>
     <% end %>
   </div>
 </div>

data/app/views/rails_mini_profiler/profiled_requests/shared/table/_table_head.erb

@@ -23,7 +23,7 @@
                                 placeholder: 'Search Path',
                                 class: 'dropdown-search-field',
                                 data: { 'filters-target': 'filter' } %>
-          <%= form.submit 'Search', class: 'dropdown-search-button', data: { action: 'click->search#submit' } -%>
+          <%= form.submit 'Search', class: 'btn-red', data: { action: 'click->search#submit' } -%>
         <% end %>
       </div>
     </div>
@@ -74,7 +74,7 @@
       </button>
     </div>
   </th>
-  <th style="width: 15%" class="" data-controller="dropdown">
+  <th style="width: 15%;" class="" data-controller="dropdown">
     <button data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button" class="dropdown-toggle none">
       Media Type <%= inline_svg('filter.svg', class: 'table-filter-icon') %> </button>
     <div data-controller="checklist" data-dropdown-target="menu" class="dropdown-container hidden">
@@ -97,7 +97,7 @@
       </button>
     </div>
   </th>
-  <th style="width: 10%" class="text-left" data-controller="dropdown">
+  <th style="width: 10%;" class="text-left" data-controller="dropdown">
     <button data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button" class="dropdown-toggle none">
       Duration <%= inline_svg('filter.svg', class: 'table-filter-icon') %> </button>
     <div data-controller="checklist" data-dropdown-target="menu" class="dropdown-container hidden">
@@ -107,12 +107,12 @@
           Clear filter
         </button>
       </div>
-      <% %w[>100ms >250ms].each do |duration| %>
+      <% [100_00, 250_00, 500_00].each do |duration| %>
         <%= label_tag nil, class: "dropdown-entry" do %>
-          <%= radio_button_tag 'duration', duration, params.fetch(:duration, []).include?(duration),
+          <%= radio_button_tag 'duration', duration.to_s , params.fetch(:duration, []).include?(duration.to_s),
                                class: "",
                                data: { target: "filters.filter" } %>
-          <%= duration %>
+          <%= "> #{duration / 100}ms" %>
         <% end %>
       <% end %>
       <button class="dropdown-footer" data-action="filters#apply">
@@ -120,6 +120,6 @@
       </button>
     </div>
   </th>
-  <th style="width: 15%" class="text-left">Date</th>
+  <th style="width: 15%;" class="text-left">Date</th>
 </tr>
 </thead>

data/app/views/rails_mini_profiler/profiled_requests/{shared → show}/_trace.html.erb

@@ -8,7 +8,28 @@
       </section>
       <section class="popover-body">
         <%= trace.payload %>
-        <table class="trace-table">
+
+        <% if trace.backtrace %>
+          <section class="popover-footer">
+            <div
+              class="backtrace"
+              data-controller="clipboard"
+              data-clipboard-filter=".+?(?=:in)"
+              data-clipboard-copied-message="Copied" >
+              <pre data-clipboard-target="source"><%= trace.backtrace %></pre>
+              <button
+                title="Copy to clipboard"
+                type="button"
+                data-action="clipboard#copy"
+                data-clipboard-target="button"
+              >
+                <%= inline_svg('copy.svg') %>
+              </button>
+            </div>
+          </section>
+        <% end %>
+
+        <table class="trace-details-table">
           <thead>
           <tr>
             <th class="text-left"></th>
@@ -30,26 +51,7 @@
         </table>
       </section>
 
-      <% if trace.backtrace %>
-        <section class="popover-footer">
-          <div
-            class="backtrace"
-            data-controller="clipboard"
-            data-clipboard-filter=".+?(?=:in)"
-            data-clipboard-copied-class="copied"
-          >
-            <pre data-clipboard-target="source"><%= trace.backtrace %></pre>
-            <button
-              title="Copy to clipboard"
-              type="button"
-              data-action="clipboard#copy"
-              data-clipboard-target="button"
-            >
-              <%= inline_svg('copy.svg') %>
-          </button>
-          </div>
-        </section>
-      <% end %>
+
     </div>
   </div>
 </li>

data/app/views/rails_mini_profiler/profiled_requests/show/_trace_list.erb

@@ -0,0 +1,12 @@
+<section class="trace-list">
+  <%= render "rails_mini_profiler/profiled_requests/show/trace_list_header" %>
+  <% if @traces.empty? %>
+    <%= render "rails_mini_profiler/profiled_requests/show/trace_list_placeholder" %>
+  <% else %>
+    <ol>
+      <% @traces.each do |trace| %>
+        <%= render "rails_mini_profiler/profiled_requests/show/trace", trace: trace %>
+      <% end %>
+    </ol>
+  <% end %>
+</section>

data/app/views/rails_mini_profiler/profiled_requests/show/_trace_list_header.erb

@@ -0,0 +1,87 @@
+<div class="trace-list-header" data-controller="filters">
+  <div class="trace-list-filters">
+    <%= form_with url: profiled_request_url(@profiled_request.id), method: :get do |form| %>
+      <%= form.search_field :payload,
+                            value: params[:payload],
+                            placeholder: 'Search Traces...',
+                            class: 'search-field',
+                            data: { 'filters-target': 'filter' } %>
+    <% end %>
+    <div data-controller="dropdown">
+      <button data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button" class="dropdown-toggle none" >
+        Type <%= inline_svg('filter.svg', class: 'table-filter-icon') %> </button>
+      <div data-controller="checklist" data-dropdown-target="menu" class="dropdown-container hidden">
+        <div class="dropdown-header">
+          Select Type...
+          <button class="clear-filters" data-action="checklist#checkNone">
+            Clear filter
+          </button>
+        </div>
+        <% trace_names = %w[process_action.action_controller sql.active_record instantiation.active_record render_template.action_view render_partial.action_view] %>
+        <% trace_names.each do |name| %>
+          <%= label_tag nil, class: "dropdown-entry" do %>
+            <%= check_box_tag 'name[]', name, params.fetch(:name, []).include?(name),
+                              class: "",
+                              data: { 'filters-target': "filter" } %>
+            <%= trace_display_name(name) %>
+          <% end %>
+        <% end %>
+        <button class="dropdown-footer" data-action="filters#apply">
+          Apply
+        </button>
+      </div>
+    </div>
+
+    <div data-controller="dropdown">
+      <button data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button" class="dropdown-toggle none">
+        Duration <%= inline_svg('filter.svg', class: 'table-filter-icon') %> </button>
+      <div data-controller="checklist" data-dropdown-target="menu" class="dropdown-container hidden">
+        <div class="dropdown-header">
+          Select Duration...
+          <button class="clear-filters" data-action="checklist#checkNone filters#apply">
+            Clear filter
+          </button>
+        </div>
+        <% [100_00, 250_00, 500_00].each do |duration| %>
+          <%= label_tag nil, class: "dropdown-entry" do %>
+            <%= radio_button_tag 'duration', duration.to_s, params.fetch(:duration, []).include?(duration.to_s),
+                                 class: "",
+                                 data: { target: "filters.filter" } %>
+            <%= "> #{formatted_duration(duration)}ms" %>
+          <% end %>
+        <% end %>
+        <button class="dropdown-footer" data-action="filters#apply">
+          Apply
+        </button>
+      </div>
+    </div>
+
+    <div data-controller="dropdown">
+      <button data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button" class="dropdown-toggle none">
+        Allocations <%= inline_svg('filter.svg', class: 'table-filter-icon') %> </button>
+      <div data-controller="checklist" data-dropdown-target="menu" class="dropdown-container hidden">
+        <div class="dropdown-header">
+          Select Allocation...
+          <button class="clear-filters" data-action="filters#apply">
+            Clear filter
+          </button>
+        </div>
+        <!-- https://twitter.com/nateberkopec/status/1442648442149367809-->
+        <% [10_000, 100_000, 1_000_000, 10_000_000].each do |allocations| %>
+          <%= label_tag nil, class: "dropdown-entry" do %>
+            <%= radio_button_tag 'allocations', allocations.to_s, params.fetch(:allocations, []).include?(allocations.to_s),
+                                 class: "",
+                                 data: { target: "filters.filter" } %>
+            <%= "> #{formatted_allocations(allocations)}" %>
+          <% end %>
+        <% end %>
+        <button class="dropdown-footer" data-action="filters#apply">
+          Apply
+        </button>
+      </div>
+    </div>
+  </div>
+  <%= link_to(profiled_request_url(@profiled_request.id)) do %>
+    <%= button_tag('Clear All', class: 'btn-red') %>
+  <% end %>
+</div>

data/app/views/rails_mini_profiler/profiled_requests/show/_trace_list_placeholder.erb

@@ -0,0 +1,12 @@
+<tr class="no-row">
+  <td colspan="100%">
+    <div class="placeholder">
+      <%= inline_svg('logo_variant.svg', class: 'placeholder-image') %>
+      <div class="placeholder-text">
+        <h2>No Traces found!</h2>
+        <p>Modify filters or reload this page</p>
+      </div>
+      <%= link_to('Clear Filters', profiled_request_url(@profiled_request.id), class: 'placeholder-link') %>
+    </div>
+  </td>
+</tr>

data/app/views/rails_mini_profiler/profiled_requests/show.html.erb

@@ -1,6 +1,8 @@
 <section class="page-header">
   <h1> <%= @profiled_request.request_path %> </h1>
+</section>
 
+<div class="profiled-request-details">
   <ul class="request-details-data">
     <li class="data-item">
       <small>Method</small>
@@ -18,23 +20,8 @@
       <small>Allocations</small>
       <span><%= @profiled_request.allocations %></span>
     </li>
-
   </ul>
-
-</section>
-
-<section class="request-details-actions">
-  <%= form_with id: 'trace-form', url: profiled_request_url(@profiled_request.id), method: :get do |form| %>
-    <%= form.search_field :search, id: 'trace-search', placeholder: 'Search Traces...', class: 'search-field' %>
-  <% end %>
   <%= @profiled_request.flamegraph_button %>
-</section>
+</div>
 
-<section>
-  <h2>Traces</h2>
-  <ol class="trace-list">
-    <% @traces.each do |trace| %>
-      <%= render "rails_mini_profiler/profiled_requests/shared/trace", trace: trace %>
-    <% end %>
-  </ol>
-</section>
+<%= render "rails_mini_profiler/profiled_requests/show/trace_list" %>