rails_mini_profiler 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0024a0bf06919b656615d69145f2f68cbd18cca28a1ff1358aa0a06ab0bf2955
-  data.tar.gz: 9d3eb7af567564dc6458125cde850d8dd5db1117e50b4bf298bc07024f2cc533
+  metadata.gz: c0dfb74da2ecab593753e57b0b23c131ffb7857d5c22ce167185a8ba29aa013b
+  data.tar.gz: cc0d40ee213af658df6475062054814be1dcbec8471e894dd7fc13c8633dd734
 SHA512:
-  metadata.gz: 7c24ccb1d9c71acc7fa565f51d3832844e78969438080d5f849ca79734b9cbe77be0de055067f077ed07ec6f5a5d85d6e0a9ab8906adb361b126ac07bd4aa9ab
-  data.tar.gz: 9a440fb88d0066f1caf5d89115c1e3479dfa44bf01fe0b617f79ddc87a6ddba80365ca02a39d9154b101fc479dd3255d01ba34a6f0939ab68274a4a9390a3f68
+  metadata.gz: f21f840089c68cd189c75bd00428d3f9f23a9b84a9c3e48de1fe2236d798ece02e7869a0bc4b265a6bb26018c347cc73d0e089d64d96bcf163ecf5bcda157f7e
+  data.tar.gz: 8185fec8a94783a448f7340e395e3278d3eecc4b801acfd3b321a1ff2255c5d902037ecff71001b78e74371f94eabb76efed986d15a9decc307feec0a45779f2

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)
+

data/app/javascript/stylesheets/flamegraph.scss

@@ -0,0 +1,9 @@
+#wrapper {
+  height: 100vh;
+  width: 100%;
+}
+
+#speedscope-iframe {
+  width: 100%;
+  height: 100%;
+  border: none; }

data/app/{assets/stylesheets/rails_mini_profiler/navbar.css → javascript/stylesheets/navbar.scss}

@@ -5,13 +5,13 @@
   display: flex;
   justify-content: center;
 
-  box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
 
   background: var(--primary);
 }
 
 .header a {
-  color:white;
+  color: white;
   text-decoration: none;
 }