rails_mini_profiler 0.4.0 → 0.7.1

data/app/javascript/stylesheets/flashes.scss

@@ -1,17 +1,15 @@
 .flash {
-  margin-top: 1rem;
   padding: 1rem 1rem;
-
+  margin-top: 1rem;
   border-radius: 5px;
 }
 
 .flash-error {
-  color: white;
   background: var(--red-500);
+  color: white;
 }
 
 .flash-notice {
-  color: white;
   background: var(--green-400);
-
+  color: white;
 }

data/app/javascript/stylesheets/profiled_requests.scss

@@ -1,174 +1,25 @@
-main {
-  width: 100%;
+@import 'components/profiled_request_table';
 
-  display: flex;
-  justify-content: center;
-}
-
-.main-section {
-  width: var(--main-width);
+.search-field {
+  box-sizing: border-box;
+  padding: 0.5rem;
+  border: 1px solid var(--grey-400);
+  border-radius: 5px;
 }
 
-.placeholder {
+.profiled-requests-header {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-direction: row;
   align-items: center;
-  width: 100%;
-  height: 450px;
-}
-
-.placeholder-image {
-  height: 30%;
-  width: 30%;
-  -webkit-filter: grayscale(1) brightness(2.5);
-}
-
-.placeholder-text {
-  text-align: center;
-  color: var(--grey-400);
-}
-
-.profiled-requests-actions {
-  display: flex;
-  padding: 1rem 0;
   justify-content: space-between;
-  align-items: center;
-}
-
-.search-field {
-  padding: 0.5rem .5rem;
-  border-radius: .25em;
-
-  border: 1px solid var(--grey-400);
-  color: var(--grey-700) ;
 }
 
 .clear-action button {
   background: var(--red-500);
   color: white;
-}
-
-.table {
-  width: 100%;
-  /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
-  border-collapse: collapse;
-  border-radius: 5px;
-  border: hidden 1px var(--border-color);
-  box-shadow: 0 0 0 1px var(--border-color);
-}
-
-.table thead tr {
-  color: var(--grey-400);
-}
-
-.table thead th {
-  font-weight: 400;
-}
-
-.table tr {
-  border: solid 1px var(--border-color);
-  color: var(--grey-700);
-  cursor: pointer;
-}
-
-.table tr:nth-child(even) {
-  background: var(--grey-50);
-}
-
-.table tbody tr:hover {
-  background: var(--grey-100);
-}
-
-.table th,
-.table td {
-  padding: 0.5rem 1rem;
-}
-
-.request-path {
-  max-width: 300px;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.request-buttons {
-  z-index: 1;
-  text-align: right;
-}
-
-.request-buttons a {
-  text-decoration: none;
-  padding: 0 .25rem;
-  color: var(--grey-700);
-}
-
-.request-buttons a:active,
-.request-buttons a:focus-visible,
-.request-buttons a:hover {
-  color: var(--blue-500);
-}
-
-.request-buttons a.link-disabled {
-  cursor: default;
-  pointer-events: none;
-  text-decoration: none;
-  color: var(--grey-200);
-}
-
-.request-details-data {
-  display: flex;
-
-  margin: 0;
-  padding: 0;
-}
-
-.data-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  list-style: none;
-
-  margin-right: 3rem;
-  padding: 0;
-}
-
-.data-item small {
-  color: var(--grey-400);
-}
-
-.data-item span {
-  margin: .25rem 0;
-}
-
-[class*='request-status-2'],
-[class*='request-method-get'] {
-  color: white;
-  background: var(--green-400) !important;
-}
-
-[class*='request-status-4'],
-[class*='request-method-put'],
-[class*='request-method-patch'] {
-  color: white;
-  background: var(--yellow-400) !important;
-}
-
-[class*='request-status-5'],
-[class*='request-method-delete'] {
-  color: white;
-  background: var(--red-500) !important;
-}
-
-.request-details-actions {
-  margin: 0;
-  padding: 2em 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+  font-weight: 600;
 
-.flamegraph-button button {
-  background: var(--grey-200);
+  &:hover {
+    background: var(--red-600);
+  }
 }

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

@@ -1,99 +1,99 @@
 @import 'flashes';
 @import 'flamegraph';
-@import 'navbar';
 @import 'profiled_requests';
 @import 'traces';
+@import 'components/buttons';
+@import 'components/input';
+@import 'components/navbar';
 @import 'components/pagination';
-
+@import 'components/page_header';
+@import 'components/dropdown';
+@import 'components/placeholder';
+@import 'components/trace';
 @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);
+  --fw-normal: 400;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+}
 
-  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 {
-  border: none;
-  border-radius: .25rem;
-  padding: 0.5em .5em;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 1rem;
-  cursor: pointer;
+main {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }
 
-button:hover {
-  box-shadow: 0 .25rem .25rem 0 var(--grey-50);
+.main-section {
+  width: var(--main-width);
 }
 
 /* --------------------------------------- */
 
+.text-center {
+  text-align: center;
+}
+
 .text-left {
   text-align: left;
 }
@@ -102,49 +102,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 +169,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,82 +1,78 @@
-.trace-list {
-  margin: 0;
-  padding: 0;
-}
-
-.trace {
-  list-style: none;
+.profiled-request-details {
   display: flex;
-  padding: .25em 0;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
+  padding-bottom: 2rem;
 }
 
-.trace:nth-child(odd) {
-  background: var(--grey-100);
+.request-details-data {
+  display: flex;
 }
 
-.trace .trace-bar {
-  position: relative;
-  margin: 0;
-  height: 16px;
+.data-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   padding: 0;
-  cursor: pointer;
-  background: linear-gradient(to top right, var(--grey-500), var(--grey-400));
+  margin-right: 3rem;
+  list-style: none;
 }
 
-.instantiation-trace .trace-bar {
-  background: linear-gradient(to top right, var(--green-400), var(--green-300));
+.data-item small {
+  color: var(--grey-400);
 }
 
-.sequel-trace .trace-bar {
-  background: linear-gradient(to top right, var(--green-500), var(--green-400));
+.data-item span {
+  margin: 0.25rem 0;
 }
 
-.controller-trace .trace-bar {
-  background: linear-gradient(to top right, var(--yellow-500), var(--yellow-400));
+[class*='request-status-2'],
+[class*='request-method-get'] {
+  background: var(--green-400) !important;
+  color: white;
 }
 
-.render-template-trace .trace-bar,
-.render-partial-trace .trace-bar {
-  background: linear-gradient(to top right, var(--blue-500), var(--blue-400));
+[class*='request-status-4'],
+[class*='request-method-put'],
+[class*='request-method-patch'] {
+  background: var(--yellow-400) !important;
+  color: white;
 }
 
-.trace-name {
-  margin: 0;
-  box-sizing: border-box;
-  padding: 0 .5em;
-  overflow: hidden;
-  font-size: 14px;
-  text-align: right;
-  text-overflow: ellipsis;
-  color: var(--grey-400)
+[class*='request-status-5'],
+[class*='request-method-delete'] {
+  background: var(--red-500) !important;
+  color: white;
 }
 
-.trace-payload {
-  margin: 0;
+.trace-list {
+  padding: 1rem;
+  border: 1px solid var(--grey-200);
+  border-radius: 5px;
 }
 
-.sequel-trace-query {
-  padding: 1em 1em;
-  background: var(--grey-100);
-  overflow: auto;
-  max-height: 100px;
-  white-space: pre-wrap;
+.trace-details-table {
+  width: 100%;
+  border: hidden 1px var(--border-color);
+  margin-top: 1em;
+  border-collapse: collapse;
 }
 
-.sequel-trace-binds {
-  margin: 0 0 1em 0;
-  padding: .5em 1em;
-  font-size: 12px;
-  overflow: auto;
-  max-height: 100px;
-  white-space: pre-wrap;
-  background: var(--grey-50);
+.trace-details-table tr th {
+  font-weight: var(--fw-semibold);
 }
 
-.trace-table {
-  margin-top: 1em;
-  width: 100%;
-  border-collapse: collapse;
-  border: hidden 1px var(--border-color);
+.trace-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1rem;
+}
+
+.trace-list-filters {
+  display: flex;
+  width: 60%;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--grey-500);
 }

data/app/models/rails_mini_profiler/profiled_request.rb

@@ -43,7 +43,7 @@ module RailsMiniProfiler
     def request=(request)
       self.request_body = request.body
       self.request_headers = request.headers
-      self.request_method = request.method
+      self.request_method = request.request_method
       self.request_path = request.path
       self.request_query_string = request.query_string
     end

data/app/models/rails_mini_profiler/trace.rb

@@ -23,24 +23,9 @@
 module RailsMiniProfiler
   class Trace < RailsMiniProfiler::ApplicationRecord
     self.table_name = RailsMiniProfiler.storage_configuration.traces_table
-    self.inheritance_column = :name
 
     belongs_to :profiled_request,
                class_name: 'RailsMiniProfiler::ProfiledRequest',
                foreign_key: :rmp_profiled_request_id
-
-    class << self
-      def find_sti_class(name)
-        subclasses = {
-          'process_action.action_controller' => RailsMiniProfiler::ControllerTrace,
-          'sql.active_record' => RailsMiniProfiler::SequelTrace,
-          'instantiation.active_record' => RailsMiniProfiler::InstantiationTrace,
-          'rails_mini_profiler.total_time' => RailsMiniProfiler::RmpTrace,
-          'render_template.action_view' => RailsMiniProfiler::RenderTemplateTrace,
-          'render_partial.action_view' => RailsMiniProfiler::RenderPartialTrace
-        }
-        subclasses[name] || self
-      end
-    end
   end
 end

data/app/presenters/rails_mini_profiler/controller_trace_presenter.rb

@@ -6,10 +6,18 @@ module RailsMiniProfiler
       'Action Controller'
     end
 
-    def payload
+    def view_runtime
+      payload['view_runtime']
+    end
+
+    def db_runtime
+      payload['db_runtime']
+    end
+
+    def content
       content_tag('div') do
         content_tag('pre', class: 'trace-payload') do
-          content_tag(:div, "View Time: #{model.view_runtime} ms, DB Time: #{model.db_runtime} ms",
+          content_tag(:div, "View Time: #{view_runtime} ms, DB Time: #{db_runtime} ms",
                       class: 'sequel-trace-query')
         end
       end

data/app/presenters/rails_mini_profiler/instantiation_trace_presenter.rb

@@ -3,12 +3,24 @@
 module RailsMiniProfiler
   class InstantiationTracePresenter < TracePresenter
     def label
-      "#{model.class_name} Instantiation"
+      "#{class_name} Instantiation"
+    end
+
+    def class_name
+      payload['class_name']
+    end
+
+    def record_count
+      payload['record_count']
+    end
+
+    def db_runtime
+      payload['db_runtime']
     end
 
     def description
-      record_string = 'Record'.pluralize(model.record_count)
-      "Instantiated #{model.record_count} #{model.class_name} #{record_string}"
+      record_string = 'Record'.pluralize(record_count)
+      "Instantiated #{record_count} #{class_name} #{record_string}"
     end
   end
 end