rails_mini_profiler 0.1.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2cfffb82f9bb40f94f74222a07283bb1bb4ae1add55d5b21b58b048ad28b1fca
-  data.tar.gz: c7e17ebdf05e9967a62d764feb89784ce12656bd96988ae93263326712063165
+  metadata.gz: c0dfb74da2ecab593753e57b0b23c131ffb7857d5c22ce167185a8ba29aa013b
+  data.tar.gz: cc0d40ee213af658df6475062054814be1dcbec8471e894dd7fc13c8633dd734
 SHA512:
-  metadata.gz: 3c8d7992579cacaff26496e4b35eeceb9b68baa1f2bee127679f927a78f26ee97405c4d301b24063ba9492b01a613ae1dea55f70286676bb4fd65b69e5dd1702
-  data.tar.gz: 98a474c2122eec0a4d5c8a497358ffde9eb08f213a043773f0fdd490204771a5a1105113bd44ea40e9a9bfa154094d38d9c198f7234f3787daf0cfb90e2d4f18
+  metadata.gz: f21f840089c68cd189c75bd00428d3f9f23a9b84a9c3e48de1fe2236d798ece02e7869a0bc4b265a6bb26018c347cc73d0e089d64d96bcf163ecf5bcda157f7e
+  data.tar.gz: 8185fec8a94783a448f7340e395e3278d3eecc4b801acfd3b321a1ff2255c5d902037ecff71001b78e74371f94eabb76efed986d15a9decc307feec0a45779f2

data/README.md

@@ -8,7 +8,7 @@
 
 [![Gem Version](https://badge.fury.io/rb/rails_mini_profiler.svg)](https://badge.fury.io/rb/rails_mini_profiler)
 [![Main](https://github.com/hschne/rails-mini-profiler/actions/workflows/main.yml/badge.svg)](https://github.com/hschne/rails-mini-profiler/actions/workflows/main.yml)
-[![Main](https://img.shields.io/github/license/hschne/rails-mini-profiler)](https://img.shields.io/github/license/hschne/rails-mini-profiler)
+[![License](https://img.shields.io/github/license/hschne/rails-mini-profiler)](https://img.shields.io/github/license/hschne/rails-mini-profiler)
 
 [![Maintainability](https://api.codeclimate.com/v1/badges/1fcc2f4d01ab5bf7a260/maintainability)](https://codeclimate.com/github/hschne/rails-mini-profiler/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/1fcc2f4d01ab5bf7a260/test_coverage)](https://codeclimate.com/github/hschne/rails-mini-profiler/test_coverage)
@@ -91,17 +91,20 @@ By clicking on individual traces you can find out detailed information.
 
 ### Flamegraphs
 
-Rails Mini Profiler per default records Flamegraphs for every profiled request for convenience. Note that Flamegraphs recording
-incur a significant performance penalty, and can take up a lot of space.
+Rails Mini Profiler automatically records Flamegraphs for profiled requests. To enable this feature, add [Stackprof](https://github.com/tmm1/stackprof)
+to your Gemfile: 
 
-To change the default behavior see [Configuration](#Configuration).
+```ruby
+gem 'stackprof'
+```
+
+For convenience, Flamegraphs are recorded for every request. This may incur a significant performance penalty. To change the default behavior see [Configuration](#Configuration).
 
-Flamegraphs are rendered using [Speedscope](https://github.com/jlfwong/speedscope). If Flamegraphs are not rendering
-you may have to amend your content security policy. See [Troubleshooting](#Troubleshooting)
+Flamegraphs are rendered using [Speedscope](https://github.com/jlfwong/speedscope). See [Troubleshooting](#Troubleshooting) if Flamegraphs are not rendering correctly.
 
 ## Configuration
 
-You can set the following configuration options in Rails Mini Profiler:
+Rails Mini Profiler provides a wide array of configuration options. You can find details below. For an example configuration check `initializers/rails_mini_profiler.rb` (or [the template file](https://github.com/hschne/rails-mini-profiler/blob/main/lib/generators/rails_mini_profiler/templates/rails_mini_profiler.rb.erb)).
 
 | Option                   | Default                      | Description                                                                                     |
 | ------------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------- |
@@ -136,7 +139,7 @@ traces and requests are stored.
 
 Rails Mini Profiler does not offer an automatic way to clean up old profiling information. It is recommended you add a sweeper job to clean up old profiled requests periodically (e.g. using [clockwork](https://github.com/adamwiggins/clockwork). For example, with ActiveJob:
 
-```
+```ruby
 # Clockwork
 every(1.month, 'purge rails mini profiler' do
     ProfiledRequestCleanupJob.perform_later
@@ -166,8 +169,6 @@ You may also explicitly set the user from the application itself:
 
 ```ruby
 class ApplicationController < ActionController::Base
-  ...
-
   before_action do
     RailsMiniProfiler::User.authorize(current_user.id)
   end
@@ -243,6 +244,14 @@ end
 
 **Note: Sprockets and flash are currently required for some of Rails Mini Profiler's UI features. These modifications may no longer be needed in the future.
 
+### No Flamegraphs are being recored?
+
+Make sure you have added [StackProf](https://github.com/tmm1/stackprof) to your Gemfile.
+
+```ruby
+gem 'stackprof'
+```
+
 ### Flamegraphs are not rendering?
 
 Flamegraphs are loaded into [Speedscope](https://github.com/jlfwong/speedscope) using an Iframe and URI Encoded blobs (see [source](https://github.com/hschne/rails-mini-profiler/blob/main/app/views/rails_mini_profiler/flamegraphs/show.html.erb))

data/app/assets/javascripts/rails_mini_profiler.js

@@ -12,81 +12,4 @@
 //
 //= require rails-ujs
 //= require_tree .
-//= require popper
-//= require tippy
-
-function setupRequestSearch() {
-  const profiledRequestNameSearch = document.getElementById('profiled-request-search')
-  if (profiledRequestNameSearch) {
-    profiledRequestNameSearch.addEventListener('keyup', function (event) {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        document.getElementById('profiled-request-search-form').submit()
-      }
-    })
-  }
-}
-
-function setupTraceSearch() {
-  const traceNameSearch = document.getElementById('trace-search')
-  if (traceNameSearch) {
-    traceNameSearch.addEventListener('keyup', function (event) {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        document.getElementById('trace-form').submit()
-      }
-    })
-  }
-}
-
-function setupRequestTable() {
-  const profiledRequestTable = document.getElementById('profiled-requests-table');
-  if (profiledRequestTable) {
-    const rows = profiledRequestTable.getElementsByTagName('tr')
-    for (let i = 0; i < rows.length; i++) {
-      const currentRow = profiledRequestTable.rows[i]
-      const link = currentRow.dataset.link
-      const createClickHandler = function (currentRow) {
-        return function () {
-          window.location.href = link
-        }
-      }
-      currentRow.onclick = createClickHandler(currentRow)
-    }
-  }
-}
-
-function setupTraceBars () {
-  const traceBars = document.querySelectorAll('.trace-bar')
-  traceBars.forEach((bar) => {
-    const popover = bar.children[0]
-    tippy(bar, {
-      trigger: 'click',
-      content: popover,
-      theme: 'rmp',
-      maxWidth: '700px',
-      placement: 'bottom',
-      interactive: true,
-      onShow (instance) {
-        instance.popper.querySelector('.popover-close').addEventListener('click', () => {
-          instance.hide()
-        })
-      },
-      onHide (instance) {
-        instance.popper.querySelector('.popover-close').removeEventListener('click', () => {
-          instance.hide()
-        })
-      },
-    })
-  })
-}
-
-
-// Trace Bar Popovers
-document.addEventListener('DOMContentLoaded', () => {
-  setupRequestTable();
-  setupRequestSearch();
-  setupTraceBars();
-  setupTraceSearch();
-}, false)
-
+//= require rails-mini-profiler

data/app/assets/stylesheets/rails_mini_profiler/application.css

@@ -12,175 +12,5 @@
  *
  *= require_tree .
  *= require_self
+ *= require rails-mini-profiler
  */
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 400;
-  font-style: normal;
-  src: url('OpenSans-Regular.ttf') format("truetype");
-}
-
-@font-face {
-   font-family: 'Open Sans';
-   font-weight: 600;
-  font-style: normal;
-   src: url('OpenSans-SemiBold.ttf') format("truetype");
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 700;
-  font-style: normal;
-  src: url('OpenSans-Bold.ttf') format("truetype");
-}
-
-html {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-
-  --grey-50: #F9FAFB;
-  --grey-100: #F3F4F6;
-  --grey-200: #E5E7EB;
-  --grey-400: #9CA3AF;
-  --grey-500: #6B7280;
-  --grey-700: #374151;
-  --grey-900: #111827;
-
-  --red-400: #F87171;
-  --red-500: #EF4444;
-  --red-600: #DC2626;
-
-  --yellow-400: #FBBF24;
-  --yellow-500: #F59E0B;
-
-  --green-300: #6EE7B7;
-  --green-400: #34D399;
-  --green-500: #10B981;
-
-  --blue-400: #60A5FA;
-  --blue-500: #3B82F6;
-
-  --main-width: 1056px;
-
-  --primary: var(--red-600);
-
-  --border-color: var(--grey-200);
-  --text-color: var(--grey-900);
-
-  font-family: 'Open Sans', monospace;
-
-}
-
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-
-  color: var(--text-color)
-}
-
-h1 {
-  padding: 2rem 0 1rem;
-}
-
-button {
-  border: none;
-  border-radius: .25rem;
-  padding: 0.5em .5em;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-button:hover {
-  box-shadow: 0 .25rem .25rem 0 var(--grey-50);
-}
-
-/* --------------------------------------- */
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-/* --------------------------------------- */
-
-.pill {
-  margin: .2rem 0;
-  padding: .1rem .4rem;
-  border-radius: 5px;
-
-  font-size: .9rem;
-  font-weight: 600;
-  letter-spacing: .1rem;
-
-  background: var(--grey-200);
-}
-
-/* --------------------------------------- */
-
-.popover {
-  display: flex;
-  flex-direction: column;
-  width: 600px;
-  padding: 1em;
-  color: black;
-}
-
-.popover-header {
-  display: flex;
-  padding-bottom: 1em;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.popover-description {
-  margin: 0;
-  padding: 0;
-}
-
-.popover-close {
-  background: transparent;
-  padding: 0;
-  font-weight: 700;
-  font-size: 20px;
-  color: var(--grey-400);
-}
-
-.popover-body {
-  padding: 1em 0;
-}
-
-.popover-footer {
-  border-top: 1px solid var(--grey-50);
-}
-
-.tippy-box[data-theme~='rmp'] {
-  background: white;
-  box-shadow: 8px 0 30px 4px rgba(0, 0, 0, .2), 8px 4px 10px 0 rgba(0, 0, 0, .05);
-  border-radius: 3px;
-
-  transition: all cubic-bezier(.19,1,.22,1) .2s;
-}
-.tippy-box[data-theme~='rmp'][data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: white;
-}
-.tippy-box[data-theme~='rmp'][data-placement^='bottom'] > .tippy-arrow::before {
-  border-bottom-color: white;
-}
-.tippy-box[data-theme~='rmp'][data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: white;
-}
-.tippy-box[data-theme~='rmp'][data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: white;
-}

data/app/controllers/rails_mini_profiler/profiled_requests_controller.rb

@@ -16,7 +16,7 @@ module RailsMiniProfiler
 
     def show
       @traces = @profiled_request.traces
-      @traces = @traces.where('payload LIKE ?', "%#{params[:search]}%") if params[:search]
+      @traces = @traces.where("#{payload_column} LIKE ?", "%#{params[:search]}%") if params[:search]
       @traces = @traces
                   .order(:start)
                   .map { |trace| present(trace, profiled_request: @profiled_request) }
@@ -51,5 +51,14 @@ module RailsMiniProfiler
     def configuration
       @configuration ||= RailsMiniProfiler.configuration
     end
+
+    def payload_column
+      if ActiveRecord::Base.connection.adapter_name == 'PostgreSQL'
+        # Cast json field to text to have access to the LIKE operator
+        'payload::text'
+      else
+        'payload'
+      end
+    end
   end
 end

data/app/helpers/rails_mini_profiler/application_helper.rb

@@ -8,5 +8,14 @@ module RailsMiniProfiler
       yield(presenter) if block_given?
       presenter
     end
+
+    def inline_svg(path, options = {})
+      if defined?(Webpacker::Engine)
+        path = "media/images/#{path}"
+        inline_svg_pack_tag(path, options)
+      else
+        inline_svg_tag(path, options)
+      end
+    end
   end
 end

data/app/javascript/packs/rails-mini-profiler.js

@@ -0,0 +1,80 @@
+import '../stylesheets/rails-mini-profiler.scss'
+
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+
+function setupRequestSearch() {
+  const profiledRequestNameSearch = document.getElementById('profiled-request-search')
+  if (profiledRequestNameSearch) {
+    profiledRequestNameSearch.addEventListener('keyup', function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        document.getElementById('profiled-request-search-form').submit()
+      }
+    })
+  }
+}
+
+function setupTraceSearch() {
+  const traceNameSearch = document.getElementById('trace-search')
+  if (traceNameSearch) {
+    traceNameSearch.addEventListener('keyup', function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        document.getElementById('trace-form').submit()
+      }
+    })
+  }
+}
+
+function setupRequestTable() {
+  const profiledRequestTable = document.getElementById('profiled-requests-table');
+  if (profiledRequestTable) {
+    const rows = profiledRequestTable.getElementsByTagName('tr')
+    for (let i = 0; i < rows.length; i++) {
+      const currentRow = profiledRequestTable.rows[i]
+      const link = currentRow.dataset.link
+      const createClickHandler = function () {
+        return function () {
+          window.location.href = link
+        }
+      }
+      currentRow.onclick = createClickHandler(currentRow)
+    }
+  }
+}
+
+function setupTraceBars () {
+  const traceBars = document.querySelectorAll('.trace-bar')
+  traceBars.forEach((bar) => {
+    const popover = bar.children[0]
+    tippy(bar, {
+      trigger: 'click',
+      content: popover,
+      theme: 'rmp',
+      maxWidth: '700px',
+      placement: 'bottom',
+      interactive: true,
+      onShow (instance) {
+        instance.popper.querySelector('.popover-close').addEventListener('click', () => {
+          instance.hide()
+        })
+      },
+      onHide (instance) {
+        instance.popper.querySelector('.popover-close').removeEventListener('click', () => {
+          instance.hide()
+        })
+      },
+    })
+  })
+}
+
+
+// Trace Bar Popovers
+document.addEventListener('DOMContentLoaded', () => {
+  setupRequestTable();
+  setupRequestSearch();
+  setupTraceBars();
+  setupTraceSearch();
+}, false)
+