dial 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61252b82f8769e8c0724a9cb40a8771afc59df61de01847add599037939b1e7d
-  data.tar.gz: 3944fe8e444853a4dfe4f2fb474bf6ed6a4b30814d55dc127df986e99c08bcf6
+  metadata.gz: 82171550e05c2bc884c0ea9a55e6464f42d9bfef043af62e123c03fdbce943b6
+  data.tar.gz: f7c98017bbcaa66ad376c0b01570007f6b5b70c36ef25843a34254b0e4c82714
 SHA512:
-  metadata.gz: cdbc7c51f7392b280a56f56d232204c93ee77e436ee6891f7f88e9d9c39570b77b85af3ff07dc15a54c854757053be0ab8c85d7adb6c21ed23f438c43c0d4da7
-  data.tar.gz: 8b8b5400414355f6012d87b490b719ab3b79cfacc229705e752e8822162cc383979e8898711f76b0b1393c497ec0c5a0cd4a344f9050ab1832e1317b314c30bd
+  metadata.gz: 64e51ddaf1029231903836e08c8943afe75df9ec068f4506cba3a85e4c2a5059651af66e8ce3c797132f0ee1943c773abcd52a8ea9fc13fec8280253dbf5dfb3
+  data.tar.gz: cf6d09efec8cd1e581d0b13a91cd6bfce0c1d86612d9b2bf778c01ac6f1766c40fe122eeca19e6133749c396eec2bea34610be2e3d6cd231a4c6eaeebf0d99d6

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+## [0.1.5] - 2025-01-24
+
+- UI: Fix overflow and add vertical scroll
+
 ## [0.1.4] - 2024-12-27
 
 - Use vernier memory usage and rails hooks by default

data/README.md

@@ -12,18 +12,24 @@ Check out the demo:
 
 ## Installation
 
-1. Install the gem and add it to your Rails application's Gemfile by executing:
+1. Add the gem to your Rails application's Gemfile (adjust the `require` option to match your server of choice):
 
-```bash
-bundle add dial
+```ruby
+# require in just the server process
+gem "dial", require: !!($PROGRAM_NAME =~ /puma/)
 ```
 
-2. Mount the engine in your `config/routes.rb` file:
+2. Install the gem:
+
+```bash
+bundle install
+```
 
+3. Mount the engine in your `config/routes.rb` file:
 
 ```ruby
 # this will mount the engine at /dial
-mount Dial::Engine, at: "/"
+mount Dial::Engine, at: "/" if Object.const_defined?("Dial::Engine")
 ```
 
 ## Development

data/lib/dial/constants.rb

@@ -6,7 +6,7 @@ module Dial
   REQUEST_TIMING_HEADER = "dial_request_timing"
 
   PROFILE_OUT_STALE_SECONDS = 60 * 60
-  PROFILE_OUT_RELATIVE_DIRNAME = "tmp/dial/profile/"
+  PROFILE_OUT_RELATIVE_DIRNAME = "tmp/dial/profiles/"
 
   PROSOPITE_IGNORE_QUERIES = [/schema_migrations/]
   PROSOPITE_LOG_RELATIVE_PATHNAME = "log/dial/prosopite.log"

data/lib/dial/middleware/panel.rb

@@ -21,7 +21,16 @@ module Dial
               <span>#{formatted_ruby_version}</span>
             </div>
 
+            <hr>
+
             <div id="dial-details">
+              <details>
+                <summary>N+1s</summary>
+                <div class="section query-logs">
+                  #{formatted_query_logs query_logs}
+                </div>
+              </details>
+
               <hr>
 
               <details>
@@ -31,12 +40,7 @@ module Dial
                 </div>
               </details>
 
-              <details>
-                <summary>N+1s</summary>
-                <div class="section query-logs">
-                  #{formatted_query_logs query_logs}
-                </div>
-              </details>
+              <hr>
 
               <details>
                 <summary>RubyVM stat</summary>
@@ -45,6 +49,8 @@ module Dial
                 </div>
               </details>
 
+              <hr>
+
               <details>
                 <summary>GC stat</summary>
                 <div class="section">
@@ -52,6 +58,8 @@ module Dial
                 </div>
               </details>
 
+              <hr>
+
               <details>
                 <summary>GC stat heap</summary>
                 <div class="section">
@@ -70,6 +78,8 @@ module Dial
       def style
         <<~CSS
           #dial {
+            max-height: 50%;
+            max-width: 50%;
             z-index: 9999;
             position: fixed;
             bottom: 0;
@@ -91,6 +101,7 @@ module Dial
 
             #dial-details {
               display: none;
+              overflow-y: auto;
             }
 
             .section {
@@ -104,6 +115,7 @@ module Dial
 
               details {
                 margin-top: 0;
+                margin-bottom: 0.25rem;
               }
             }
 
@@ -114,6 +126,7 @@ module Dial
             hr {
               width: -moz-available;
               margin: 0.65rem 0 0 0;
+              background-color: black;
             }
 
             details {
@@ -133,10 +146,22 @@ module Dial
         <<~JS
           const dialPreview = document.getElementById("dial-preview");
           const dialDetails = document.getElementById("dial-details");
+
           dialPreview.addEventListener("click", () => {
             const collapsed = ["", "none"].includes(dialDetails.style.display);
             dialDetails.style.display = collapsed ? "block" : "none";
           });
+
+          document.addEventListener("click", (event) => {
+            if (!dialPreview.contains(event.target) && !dialDetails.contains(event.target)) {
+              dialDetails.style.display = "none";
+
+              const detailsElements = dialDetails.querySelectorAll("details");
+              detailsElements.forEach(detail => {
+                detail.removeAttribute("open");
+              });
+            }
+          });
         JS
       end
 
@@ -178,7 +203,6 @@ module Dial
       def formatted_server_timing server_timing
         if server_timing.any?
           server_timing
-            # TODO: Nested sorting
             .sort_by { |_, timing| -timing }
             .map { |event, timing| "<span><b>#{event}:</b> #{timing}</span>" }.join
         else
@@ -187,17 +211,21 @@ module Dial
       end
 
       def formatted_query_logs query_logs
-        query_logs.map do |(queries, stack_lines)|
-          <<~HTML
-            <details>
-              <summary>#{queries.shift}</summary>
-              <div class="section query-logs">
-                #{queries.map { |query| "<span>#{query}</span>" }.join}
-                #{stack_lines.map { |stack_line| "<span>#{stack_line}</span>" }.join}
-              </div>
-            </details>
-          HTML
-        end.join
+        if query_logs.any?
+          query_logs.map do |(queries, stack_lines)|
+            <<~HTML
+              <details>
+                <summary>#{queries.shift}</summary>
+                <div class="section query-logs">
+                  #{queries.map { |query| "<span>#{query}</span>" }.join}
+                  #{stack_lines.map { |stack_line| "<span>#{stack_line}</span>" }.join}
+                </div>
+              </details>
+            HTML
+          end.join
+        else
+          "NA"
+        end
       end
 
       def formatted_ruby_vm_stat ruby_vm_stat

data/lib/dial/middleware.rb

@@ -93,32 +93,10 @@ module Dial
     def clear_query_logs!
       [].tap do |query_logs|
         File.open(query_log_pathname, "r+") do |file|
-          entry = reading_section = query_count = nil
+          entry = section = count = nil
           file.each_line do |line|
-            case line
-            when /N\+1 queries detected/
-              entry = [[], []]
-              reading_section = :queries
-              query_count = 0
-            when /Call stack/
-              reading_section = :call_stack
-              if query_count > 5
-                entry.first << "+ #{query_count - 5} more queries"
-              end
-            else
-              case reading_section
-              when :queries
-                query_count += 1
-                entry.first << line.strip if query_count <= 5
-              when :call_stack
-                if line.strip.empty?
-                  query_logs << entry
-                  reading_section = nil
-                else
-                  entry.last << line.strip
-                end
-              end
-            end
+            entry, section, count = process_query_log_line line, entry, section, count
+            query_logs << entry if entry && section.nil?
           end
 
           file.truncate 0
@@ -127,6 +105,30 @@ module Dial
       end
     end
 
+    def process_query_log_line line, entry, section, count
+      case line
+      when /N\+1 queries detected/
+        [[[],[]], :queries, 0]
+      when /Call stack/
+        entry.first << "+ #{count - 5} more queries" if count > 5
+        [entry, :call_stack, count]
+      else
+        case section
+        when :queries
+          count += 1
+          entry.first << line.strip if count <= 5
+          [entry, :queries, count]
+        when :call_stack
+          if line.strip.empty?
+            [entry, nil, count]
+          else
+            entry.last << line.strip
+            [entry, section, count]
+          end
+        end
+      end
+    end
+
     def query_log_pathname
       @_query_log_dir_pathname ||= ::Rails.root.join PROSOPITE_LOG_RELATIVE_PATHNAME
     end

data/lib/dial/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Dial
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: dial
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.5
 platform: ruby
 authors:
 - Joshua Young
 bindir: bin
 cert_chain: []
-date: 2024-12-27 00:00:00.000000000 Z
+date: 2025-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties