rails_mini_profiler 0.4.0 → 0.5.0

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

@@ -4,96 +4,110 @@
 @import 'profiled_requests';
 @import 'traces';
 @import 'components/pagination';
-
+@import 'components/page_header/page_header';
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
 
 @font-face {
   font-family: 'Open Sans';
-  font-weight: 400;
   font-style: normal;
+  font-weight: 400;
 }
 
 @font-face {
   font-family: 'Open Sans';
-  font-weight: 600;
   font-style: normal;
+  font-weight: 600;
 }
 
 @font-face {
   font-family: 'Open Sans';
-  font-weight: 700;
   font-style: normal;
+  font-weight: 700;
 }
 
 html {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  font-family: 'Open Sans', monospace;
 
-  --grey-50: #F9FAFB;
-  --grey-100: #F3F4F6;
-  --grey-200: #E5E7EB;
-  --grey-400: #9CA3AF;
-  --grey-500: #6B7280;
+  --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;
-
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --yellow-400: #fbbf24;
+  --yellow-500: #fbbf24;
+  --yellow-600: #d97706;
+  --yellow-700: #b45309;
+  --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;
-
+* {
+  padding: 0;
+  margin: 0;
 }
 
 body {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
-
-  color: var(--text-color)
-}
-
-h1 {
-  padding: 2rem 0 1rem;
+  margin: 0;
+  color: var(--text-color);
 }
 
-button {
+button,
+.button {
+  display: inline-block;
+  padding: 0.5em 0.5em;
   border: none;
-  border-radius: .25rem;
-  padding: 0.5em .5em;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 1rem;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
-  font-size: 1rem;
-  cursor: pointer;
+
+  &:disabled {
+    background: var(--grey-200);
+    cursor: not-allowed;
+  }
 }
 
 button:hover {
-  box-shadow: 0 .25rem .25rem 0 var(--grey-50);
+  box-shadow: 0 0.25rem 0.25rem 0 var(--grey-50);
+}
+
+button.none {
+  padding: 0;
+  border: none;
+  background: none;
+  outline: none;
+
+  &:hover {
+    box-shadow: none;
+  }
 }
 
 /* --------------------------------------- */
 
+.text-center {
+  text-align: center;
+}
+
 .text-left {
   text-align: left;
 }
@@ -102,49 +116,61 @@ button:hover {
   text-align: right;
 }
 
+.hidden {
+  display: none;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
 /* --------------------------------------- */
 
 .pill {
-  margin: .2rem 0;
-  padding: .1rem .4rem;
+  padding: 0.1rem 0.4rem;
+  margin: 0.2rem 0;
+  background: var(--grey-200);
   border-radius: 5px;
-
-  font-size: .9rem;
+  font-size: 0.9rem;
   font-weight: 600;
-  letter-spacing: .1rem;
-
-  background: var(--grey-200);
+  letter-spacing: 0.1rem;
 }
 
 /* --------------------------------------- */
 
 .popover {
   display: flex;
-  flex-direction: column;
   width: 600px;
+  flex-direction: column;
   padding: 1em;
   color: black;
 }
 
 .popover-header {
   display: flex;
-  padding-bottom: 1em;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1em;
 }
 
 .popover-description {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 .popover-close {
-  background: transparent;
   padding: 0;
-  font-weight: 700;
-  font-size: 20px;
+  background: transparent;
   color: var(--grey-400);
+  font-size: 20px;
+  font-weight: 700;
 }
 
 .popover-body {
@@ -157,20 +183,23 @@ button:hover {
 
 .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;
+  border-radius: 5px;
+  box-shadow: 8px 0 30px 4px rgba(0, 0, 0, 0.2), 8px 4px 10px 0 rgba(0, 0, 0, 0.05);
+  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.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/javascript/stylesheets/traces.scss

@@ -1,14 +1,14 @@
 .trace-list {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 .trace {
-  list-style: none;
   display: flex;
-  padding: .25em 0;
   align-items: center;
   justify-content: flex-start;
+  padding: 0.25em 0;
+  list-style: none;
 }
 
 .trace:nth-child(odd) {
@@ -17,11 +17,11 @@
 
 .trace .trace-bar {
   position: relative;
-  margin: 0;
   height: 16px;
   padding: 0;
-  cursor: pointer;
+  margin: 0;
   background: linear-gradient(to top right, var(--grey-500), var(--grey-400));
+  cursor: pointer;
 }
 
 .instantiation-trace .trace-bar {
@@ -42,14 +42,14 @@
 }
 
 .trace-name {
-  margin: 0;
-  box-sizing: border-box;
-  padding: 0 .5em;
   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;
-  color: var(--grey-400)
 }
 
 .trace-payload {
@@ -57,26 +57,26 @@
 }
 
 .sequel-trace-query {
-  padding: 1em 1em;
-  background: var(--grey-100);
   overflow: auto;
   max-height: 100px;
+  padding: 1em 1em;
+  background: var(--grey-100);
   white-space: pre-wrap;
 }
 
 .sequel-trace-binds {
-  margin: 0 0 1em 0;
-  padding: .5em 1em;
-  font-size: 12px;
   overflow: auto;
   max-height: 100px;
-  white-space: pre-wrap;
+  padding: 0.5em 1em;
+  margin: 0 0 1em 0;
   background: var(--grey-50);
+  font-size: 12px;
+  white-space: pre-wrap;
 }
 
 .trace-table {
-  margin-top: 1em;
   width: 100%;
-  border-collapse: collapse;
   border: hidden 1px var(--border-color);
+  margin-top: 1em;
+  border-collapse: collapse;
 }

data/app/presenters/rails_mini_profiler/profiled_request_presenter.rb

@@ -15,21 +15,14 @@ module RailsMiniProfiler
     end
 
     def created_at
-      time_tag(model.created_at.in_time_zone(Time.zone))
-    end
-
-    def flamegraph_icon
-      return nil unless RailsMiniProfiler.configuration.flamegraph_enabled
-
-      if model.flamegraph.present?
-        link_to(flamegraph_path(model.id), title: 'Show Flamegraph') do
-          inline_svg('graph.svg')
-        end
-      else
-        link_to(flamegraph_path(model.id), title: 'No Flamegraph present for this request', class: 'link-disabled') do
-          inline_svg('graph.svg')
-        end
-      end
+      from_time = Time.now
+      created_at = model.created_at.in_time_zone(Time.zone)
+      distance = if from_time - created_at < 5.minutes
+                   'Now'
+                 else
+                   "#{distance_of_time_in_words(from_time, created_at)} ago"
+                 end
+      time_tag(created_at) { content_tag('span', distance) }
     end
 
     def flamegraph_button

data/app/search/rails_mini_profiler/base_search.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module RailsMiniProfiler
+  class BaseSearch
+    def initialize(params = nil, **kwargs)
+      config = self.class.config
+      options = params&.to_h || {}
+      options = options.merge(kwargs)
+      @scope = options.delete(:scope) || (config[:scope] && instance_eval(&config[:scope]))
+      @options = (options.delete(:options) || config[:options]).stringify_keys
+      @params = options.stringify_keys.slice(*@options.keys)
+    end
+
+    def results
+      @results ||= apply
+    end
+
+    def results?
+      results.any?
+    end
+
+    class << self
+      def scope(&block)
+        config[:scope] = block
+      end
+
+      def option(name, options = {}, &block)
+        name = name.to_s
+        handler = options[:with] || block
+
+        config[:options][name] = normalize_search_handler(handler, name)
+
+        define_method(name) { @search.param name }
+      end
+
+      def results(**kwargs)
+        new(**kwargs).results
+      end
+
+      def config
+        @config ||= { options: {} }
+      end
+
+      private
+
+      def normalize_search_handler(handler, name)
+        case handler
+        when Symbol
+          ->(scope, value) { method(handler).call scope, value }
+        when Proc
+          handler
+        else
+          ->(scope, value) { scope.where name => value unless value.blank? }
+        end
+      end
+    end
+
+    private
+
+    def apply
+      @params.inject(@scope) do |scope, (name, value)|
+        new_scope = instance_exec scope, value, &@options[name]
+        new_scope || scope
+      end
+    end
+  end
+end

data/app/search/rails_mini_profiler/profiled_request_search.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module RailsMiniProfiler
+  class ProfiledRequestSearch < BaseSearch
+    option(:id) do |scope, value|
+      scope.where(id: value)
+    end
+
+    option(:path) do |scope, value|
+      scope.where('request_path LIKE ?', "%#{value}%")
+    end
+
+    option(:method) do |scope, value|
+      scope.where(request_method: value)
+    end
+
+    option(:media_type) do |scope, value|
+      scope.where(response_media_type: value)
+    end
+
+    option(:status) do |scope, value|
+      value = value.map(&:to_i)
+      min = value.min
+      max = value.max + 100
+      scope.where('response_status >= :lower', lower: min)
+        .where('response_status < :upper', upper: max)
+    end
+
+    option(:duration) do |scope, value|
+      value = value.tr('>', '').to_i * 100
+      scope.where('duration > :duration', duration: value)
+    end
+  end
+end