small ui improvements

igorkasyanchuk · igorkasyanchuk · commit 35270a414dc2 · 2025-08-26T00:23:07.000+03:00
diff --git a/.github/workflows/ruby.yml b/.github/workflows/ruby.yml
@@ -45,7 +45,7 @@ jobs:
     # To automatically get bug fixes and new Ruby versions for ruby/setup-ruby,
     # change this to (see https://github.com/ruby/setup-ruby#versioning):
     # uses: ruby/setup-ruby@v1
-      uses: ruby/setup-ruby@efbf473cab83af4468e8606cc33eca9281bb213f
+      uses: ruby/setup-ruby@a2bbe5b1b236842c1cb7dd11e8e3b51e0a616acc
       with:
         ruby-version: ${{ matrix.ruby-version }}
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,10 @@
 - Unreleased
 
+- 1.4.3
+  - Parameterize resources charts https://github.com/igorkasyanchuk/rails_performance/pull/134
+  - added more icons
+  - wider summary panel
+
 - 1.4.2
   - Filter out slow requests with no duration set https://github.com/igorkasyanchuk/rails_performance/pull/138
   - fix: handle Hash input in extract_duration to prevent =~ error on traces https://github.com/igorkasyanchuk/rails_performance/pull/137
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    rails_performance (1.4.2)
+    rails_performance (1.4.3)
       browser
       railties
       redis
@@ -270,7 +270,7 @@ GEM
       docile (~> 1.1)
       simplecov-html (~> 0.11)
       simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.13.1)
+    simplecov-html (0.13.2)
     simplecov_json_formatter (0.1.4)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
diff --git a/README.md b/README.md
@@ -324,6 +324,15 @@ The idea of this gem grew from curiosity how many RPM my app receiving per day.
 - sinatra?
 - tests to check what is actually stored in redis db after request
 - upgrade bulma
+- optimize svg icons, remove inline svg (switch to base64 or assets)
+
+## Development
+
+1. Clone the repo
+2. Run `bundle install`
+3. Setup dummy app `cd test/dummy && bundle install && rails db:create && rails db:migrate`
+4. Run `rails s` in the root folder
+5. Run `rails test` to run tests
 
 ## Contributing
 
diff --git a/app/assets/images/details.svg b/app/assets/images/details.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
+</svg>
diff --git a/app/assets/images/external.svg b/app/assets/images/external.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/></g></svg>
diff --git a/app/views/rails_performance/javascripts/app.js b/app/views/rails_performance/javascripts/app.js
@@ -6,6 +6,7 @@ function showChart(element_id, type, title, options) {
       chart: {
         type: type,
         height: 300,
+        width: '100%',
         zoom: {
           type: 'x',
         },
diff --git a/app/views/rails_performance/rails_performance/_recent_row.html.erb b/app/views/rails_performance/rails_performance/_recent_row.html.erb
@@ -9,12 +9,24 @@
   <td><%= format_datetime e[:datetime] %></td>
   <td>
     <% controller_action_info = e[:controller] + '#' + e[:action]%>
-    <%= link_to truncate(controller_action_info, length: 40), rails_performance.rails_performance_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true, title: controller_action_info %>
+    <%= link_to rails_performance.rails_performance_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true, title: controller_action_info do %>
+      <span class="details_icon">
+        <%= icon 'details' %>
+      </span>
+      <%= truncate(controller_action_info, length: 40) %>
+    <% end %>
   </td>
   <td><%= e[:method] %></td>
   <td><%= e[:format] %></td>
   <td><%= bot_icon e["user_agent"] %></td>
-  <td><%= link_to_path(e) %></td>
+  <td>
+    <span class="with_external_icon">
+      <%= link_to_path(e) %>
+      <span class="icon external_icon">
+        <%= icon('external') %>
+      </span>
+    </span>
+  </td>
   <td><%= status_tag e[:status] %></td>
   <td class="nowrap"><%= ms e[:duration] %></td>
   <td class="nowrap"><%= ms e[:view_runtime] %></td>
diff --git a/app/views/rails_performance/rails_performance/_summary.html.erb b/app/views/rails_performance/rails_performance/_summary.html.erb
@@ -5,7 +5,7 @@
 <div id="response_time_report_chart_mini" class="chart_mini"></div>
 
 <h2 class="subtitle"><%= title %></h2>
-<table class="table is-fullwidth is-hoverable is-narrow is-size-9">
+<table class="table is-fullwidth is-hoverable is-narrow is-size-8">
   <thead>
     <tr>
       <th data-sort="string">Datetime</th>
@@ -25,7 +25,14 @@
         <td><%= format_datetime e[:datetime] %></td>
         <td><%= e[:method] %></td>
         <td><%= bot_icon e["user_agent"] %></td>
-        <td><%= link_to_path(e) %></td>
+        <td>
+          <span class="with_external_icon">
+            <%= link_to_path(e) %>
+            <span class="icon external_icon">
+              <%= icon('external') %>
+            </span>
+          </span>
+        </td>
         <td><%= e[:format] %></td>
         <td><%= status_tag e[:status] %></td>
         <td class="nowrap"><%= ms e[:duration] %></td>
diff --git a/app/views/rails_performance/rails_performance/crashes.html.erb b/app/views/rails_performance/rails_performance/crashes.html.erb
@@ -35,11 +35,25 @@
         <% @data.each do |e| %>
           <tr>
             <td><%= format_datetime e[:datetime] %></td>
-            <td><%= link_to e[:controller] + '#' + e[:action], rails_performance.rails_performance_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true %></td>
+            <td>
+              <%= link_to rails_performance.rails_performance_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true do %>
+                <span class="details_icon">
+                  <%= icon 'details' %>
+                </span>
+                <%= e[:controller] + '#' + e[:action] %>
+              <% end %>
+            </td>
             <td><%= e[:method] %></td>
             <td><%= e[:format] %></td>
             <td><%= bot_icon e["user_agent"] %></td>
-            <td><%= link_to_path(e) %></td>
+            <td>
+              <span class="with_external_icon">
+                <%= link_to_path(e) %>
+                <span class="icon external_icon">
+                  <%= icon('external') %>
+                </span>
+              </span>
+            </td>
             <td><%= e[:exception] %></td>
             <td class="very-small-text">
               <%= raw e[:backtrace]&.join("<br/>") %>
diff --git a/app/views/rails_performance/rails_performance/requests.html.erb b/app/views/rails_performance/rails_performance/requests.html.erb
@@ -36,7 +36,14 @@
           <% groups = e[:group].split("|") %>
           <% c, a = groups[0].split("#") %>
           <tr>
-            <td><%= link_to groups[0],  rails_performance.rails_performance_summary_path({controller_eq: c, action_eq: a}), remote: true %></td>
+            <td>
+              <%= link_to rails_performance.rails_performance_summary_path({controller_eq: c, action_eq: a}), remote: true do %>
+                <span class="details_icon">
+                  <%= icon 'details' %>
+                </span>
+                <%= groups[0] %>
+              <% end %>
+            </td>
             <td><%= link_to groups[1].try(:upcase),  rails_performance.rails_performance_summary_path({controller_eq: c, action_eq: a, format_eq: groups[1]}), remote: true %></td>
             <td><%= e[:count] %></td>
             <td class="nowrap attention"><%= ms e[:p50_duration] %></td>
diff --git a/app/views/rails_performance/stylesheets/panel.css b/app/views/rails_performance/stylesheets/panel.css
@@ -32,13 +32,25 @@
 .cd-panel__container {
   z-index: 100;
   position: fixed;
-  width: 800px;
+  width: 1200px;
   height: 100%;
   top: 0;
   transition: transform 0.3s 0s;
   overflow: scroll;
 }
 
+@media (max-width: 1200px) {
+  .cd-panel__container {
+    width: 800px;
+  }
+}
+
+@media (max-width: 768px) {
+  .cd-panel__container {
+    width: 500px;
+  }
+}
+
 .cd-panel--from-right .cd-panel__container {
   right: 0;
   transform: translate3d(100%, 0, 0);
@@ -57,4 +69,4 @@
 .cd-panel__container .panel {
   background: white;
   min-height: 100vh;
-}
+}
diff --git a/app/views/rails_performance/stylesheets/style.css b/app/views/rails_performance/stylesheets/style.css
@@ -62,6 +62,33 @@
   color: red;
 }
 
+.external_icon svg {
+  width: 12px;
+  height: 12px;
+  color: #eee;
+  margin-left: -4px;
+  opacity: 0;
+}
+
+.details_icon {
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+
+.details_icon svg {
+  position: relative;
+  top: 2px;
+  width: 14px;
+  height: 14px;
+}
+
+.with_external_icon:hover {
+  .external_icon svg {
+    opacity: 1;
+  }
+}
+
 .user-agent-icon svg {
   width: 12px;
   height: 12px;
@@ -77,7 +104,19 @@
 
 .chart_mini {
   height: 200px;
-  width: 720px;
+  width: 1160px;
+}
+
+@media (max-width: 1200px) {
+  .chart_mini {
+    width: 770px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart_mini {
+    width: 400px;
+  }
 }
 
 .red {
diff --git a/lib/rails_performance/version.rb b/lib/rails_performance/version.rb
@@ -1,4 +1,4 @@
 module RailsPerformance
-  VERSION = "1.4.2"
+  VERSION = "1.4.3"
   SCHEMA = "1.0.2"
 end
diff --git a/test/dummy/app/controllers/home_controller.rb b/test/dummy/app/controllers/home_controller.rb
@@ -26,7 +26,7 @@ def contact
     rand(5).times { SimpleWorker.perform_async }
     rand(3).times { AdvancedWorker.perform_async }
     10.times { User.where(first_name: "X#{rand(100)}").count }
-    10.times { User.where(first_name: "Super mega cool" * 20, age: 88, id: [1..100].to_a).count }
+    10.times { User.where(first_name: "Super mega cool" * 20, age: 88, id: [1..100]).count }
   end
 
   def blog
