rails_mini_profiler 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33db210bbcb4b8ee82f80aa2f88023a478ec4852e9bbcc60cf9f70baf2a0145f
-  data.tar.gz: aed097f8f0e418feea8ce2670f173271bea7dd1f8803e542c2f50b82b953932d
+  metadata.gz: 7e87dd3ae71d8ef0ab8021c31b037db8b290521782577dad5a7143cbbbd2f8f1
+  data.tar.gz: 1f7060bde727f2dbcdd7f4b6269d2436744cfb625484ed7bf43b5e4659743e6f
 SHA512:
-  metadata.gz: a6cc1c0d0e05949bb360d4e5d04091bcfb16419a80ca31361d617a1a34571d28dfc33f31820075646143b9a359b12aa66c9ec67bb859bbdc25feaca062b5adb8
-  data.tar.gz: c6673b79dc6b8aacd205b5b368c1e044fb8b0e595fbb41371cf6f2c667fe31875cea9376ea551cb0e39a6c13c57cd654f41342b09bc4f41a1084a03092804fe9
+  metadata.gz: 4e90925e2addb71264c09084a9b4244553b466f40e87f96902e60e9301b3befe3ed898a6578e6dd4a3c5c51cb18974fecda9036e6e5d82f27f3bac5bbce9e3aa
+  data.tar.gz: ed964b334db077211701b956c43f9f0e778bcd260e1097f1eaface96ffacbefe5c6e6bef01e6326f06db318da925a1a0d3a72790bf6c267e0e7d1309844ff95b

data/app/controllers/rails_mini_profiler/profiled_requests_controller.rb

@@ -7,11 +7,9 @@ module RailsMiniProfiler
     before_action :set_profiled_request, only: %i[show destroy]
 
     def index
-      @profiled_requests = ProfiledRequest
-                             .includes(:flamegraph)
-                             .where(user_id: user_id).order(id: :desc)
-      @profiled_requests = @profiled_requests.where('request_path LIKE ?', "%#{params[:path]}%") if params[:path]
-      @pagy, @profiled_requests = pagy(@profiled_requests, items: configuration.ui.page_size)
+      @profiled_requests = ProfiledRequest.where(user_id: user_id).order(id: :desc)
+      search = ProfiledRequestSearch.new(index_params, scope: @profiled_requests)
+      @pagy, @profiled_requests = pagy(search.results, items: configuration.ui.page_size)
       @profiled_requests = @profiled_requests.map { |request| present(request) }
     end
 
@@ -31,16 +29,21 @@ module RailsMiniProfiler
 
     def destroy_all
       ProfiledRequest.transaction do
-        requests_table_name = RailsMiniProfiler.storage_configuration.profiled_requests_table.to_sym
-        Flamegraph.joins(:profiled_request).where(requests_table_name => { user_id: user_id }).delete_all
-        Trace.joins(:profiled_request).where(requests_table_name => { user_id: user_id }).delete_all
-        ProfiledRequest.where(requests_table_name => { user_id: user_id }).delete_all
+        profiled_requests = ProfiledRequest.where(user_id: user_id)
+        profiled_requests = ProfiledRequestSearch.new(index_params, scope: profiled_requests).results
+        Flamegraph.joins(:profiled_request).merge(profiled_requests).delete_all
+        Trace.joins(:profiled_request).merge(profiled_requests).delete_all
+        profiled_requests.delete_all
       end
-      redirect_to profiled_requests_url, notice: 'Profiled Requests cleared'
+      redirect_to profiled_requests_url, notice: 'Profiled requests cleared', status: :see_other
     end
 
     private
 
+    def index_params
+      params.permit(:path, :duration, id: [], method: [], media_type: [], status: [])
+    end
+
     def user_id
       @user_id ||= User.get(request.env)
     end

data/app/javascript/images/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+</svg>

data/app/javascript/images/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 407.437 407.437">
+  <path fill="currentColor" d="M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z"/>
+</svg>

data/app/javascript/images/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>

data/app/javascript/images/logo_variant.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1070" height="1070" viewBox="0 0 1070 1070" version="1.1">
-  <style>path{fill:none;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4}</style>
+<svg id="logo-variant" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1070" height="1070" viewBox="0 0 1070 1070" version="1.1">
+  <style>#logo-variant path{fill:none;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4}</style>
   <defs>
     <linearGradient id="lightShadow">
       <stop offset="0" style="stop-color:#c22121;stop-opacity:1"/>

data/app/javascript/images/search.svg

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Iconly/Bulk/Search</title>
-    <g id="Iconly/Bulk/Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Search" transform="translate(2.000000, 2.000000)" fill="#000000" fill-rule="nonzero">
+    <g id="Iconly/Bulk/Search" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <g id="Search" transform="translate(2.000000, 2.000000)" fill="currentColor" fill-rule="nonzero">
             <ellipse id="Ellipse_746" cx="8.59921927" cy="8.65324385" rx="8.59921927" ry="8.65324385"></ellipse>
-            <path d="M18.674623,19.9552573 C18.3405833,19.9444414 18.0229443,19.8069986 17.7853553,19.5704698 L15.7489321,17.1901566 C15.3123366,16.7908936 15.2766365,16.1123232 15.668898,15.6689038 L15.668898,15.6689038 C15.8525005,15.4831065 16.1021409,15.3786387 16.3625268,15.3786387 C16.6229128,15.3786387 16.8725531,15.4831065 17.0561557,15.6689038 L19.6172468,17.7181208 C19.9861582,18.0957076 20.0999999,18.656254 19.9078887,19.1492153 C19.7157774,19.6421767 19.2536179,19.9754211 18.7279791,20 L18.674623,19.9552573 Z" id="Path_34202" opacity="0.400000006"></path>
+            <path fill="currentColor" d="M18.674623,19.9552573 C18.3405833,19.9444414 18.0229443,19.8069986 17.7853553,19.5704698 L15.7489321,17.1901566 C15.3123366,16.7908936 15.2766365,16.1123232 15.668898,15.6689038 L15.668898,15.6689038 C15.8525005,15.4831065 16.1021409,15.3786387 16.3625268,15.3786387 C16.6229128,15.3786387 16.8725531,15.4831065 17.0561557,15.6689038 L19.6172468,17.7181208 C19.9861582,18.0957076 20.0999999,18.656254 19.9078887,19.1492153 C19.7157774,19.6421767 19.2536179,19.9754211 18.7279791,20 L18.674623,19.9552573 Z" id="Path_34202" opacity="0.400000006"></path>
         </g>
     </g>
-</svg>
+</svg>

data/app/javascript/js/checklist_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["count"];
+
+  connect() {
+    this.setCount();
+  }
+
+  checkAll() {
+    this.setAllCheckboxes(true);
+    this.setCount();
+  }
+
+  checkNone() {
+    this.setAllCheckboxes(false);
+    this.setCount();
+  }
+
+  onChecked() {
+    this.setCount();
+  }
+
+  setAllCheckboxes(checked) {
+    this.checkboxes.forEach((el) => {
+      const checkbox = el;
+
+      if (!checkbox.disabled) {
+        checkbox.checked = checked;
+      }
+    });
+  }
+
+  setCount() {
+    if (this.hasCountTarget) {
+      const count = this.selectedCheckboxes.length;
+      this.countTarget.innerHTML = `${count} selected`;
+    }
+  }
+
+  get selectedCheckboxes() {
+    return this.checkboxes.filter((c) => c.checked);
+  }
+
+  get checkboxes() {
+    return new Array(...this.element.querySelectorAll("input[type=checkbox]"));
+  }
+}

data/app/javascript/js/enable_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ["enable"];
+
+  enable() {
+    this.enableTarget.disabled = false;
+  }
+
+  disable() {
+    this.enableTarget.disabled = true;
+  }
+
+  change(event) {
+    if (event.type.match(/rmp:select:.*/)) {
+      if (event.detail.count > 0) {
+        this.enable();
+      }
+      else {
+        this.disable()
+      }
+    }
+  }
+}

data/app/javascript/js/filter_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["filter"];
+
+  apply() {
+    location.href = `${window.location.pathname}?${this.params}`;
+  }
+
+  post() {
+    const token = document.head.querySelector(
+      'meta[name="csrf-token"]'
+    ).content;
+    const path = `${window.location.pathname}/destroy_all?${this.params}`;
+    fetch(path, {
+      method: "DELETE",
+      redirect: "follow",
+      headers: {
+        "Content-Type": "application/json",
+        credentials: "same-origin",
+      },
+      body: JSON.stringify({ authenticity_token: token }),
+    }).then((response) => {
+      if (response.redirected) {
+        window.location.href = response.url;
+      }
+    });
+  }
+
+  get params() {
+    return this.activeFilterTargets()
+      .map((t) => `${t.name}=${t.value}`)
+      .join("&");
+  }
+
+  activeFilterTargets() {
+    return this.filterTargets.filter(function (target) {
+      if (target.type === "checkbox" || target.type === "radio")
+        return target.checked;
+
+      return target.value.length > 0;
+    });
+  }
+}

data/app/javascript/js/search_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["field"];
+
+  clear(){
+    this.eventTarget.value = null;
+    window.dispatchEvent(new CustomEvent('search-controller:submit', {}))
+  }
+
+  submit(event) {
+    event.preventDefault();
+
+    if (event.key === 'Enter' || event.type === 'click') {
+      window.dispatchEvent(new CustomEvent('search-controller:submit', {}))
+    }
+  }
+}

data/app/javascript/js/select_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['all', 'selectable']
+
+  selectAll (event) {
+    const checked = event.target.checked
+    this.allTarget.indeterminate = false
+    this._setAllCheckboxes(checked)
+    this._dispatch('change', { count: this.selectedCount })
+  }
+
+  onSelected () {
+    this.allTarget.indeterminate = !!this._indeterminate
+    this._dispatch('change', { count: this.selectedCount })
+  }
+
+  get selectedCount () {
+    return this.selected.length
+  }
+
+  get selected () {
+    return this.selectables.filter((c) => c.checked)
+  }
+
+  get selectables () {
+    return new Array(...this.selectableTargets)
+  }
+
+  _setAllCheckboxes (checked) {
+    this.selectables.forEach((el) => {
+      const checkbox = el
+
+      if (!checkbox.disabled) {
+        checkbox.checked = checked
+      }
+    })
+  }
+
+  get _indeterminate () {
+    return this.selected.length !== this.selectableTargets.length && this.selected.length > 0
+  }
+
+  _dispatch (name, detail) {
+    window.dispatchEvent(new CustomEvent(`rmp:select:${name}`, { bubbles: true, detail }))
+  }
+}

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

@@ -3,17 +3,23 @@ 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()
-      }
-    })
-  }
-}
+import { Application } from 'stimulus'
+import { Dropdown } from 'tailwindcss-stimulus-components'
+import Checklist from '../js/checklist_controller'
+import Selectable from '../js/select_controller'
+import Filter from '../js/filter_controller'
+import Search from '../js/search_controller'
+import Enable from '../js/enable_controller'
+
+const application = Application.start();
+
+application.register('dropdown', Dropdown)
+application.register('checklist', Checklist)
+application.register('selectable', Selectable)
+application.register('filters', Filter)
+application.register('search', Search)
+application.register('enable', Enable)
+
 
 function setupTraceSearch() {
   const traceNameSearch = document.getElementById('trace-search')
@@ -30,8 +36,8 @@ function setupTraceSearch() {
 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 rows = profiledRequestTable.rows;
+    for (let i = 1; i < rows.length; i++) {
       const currentRow = profiledRequestTable.rows[i]
       const link = currentRow.dataset.link
       const createClickHandler = function () {
@@ -39,7 +45,10 @@ function setupRequestTable() {
           window.location.href = link
         }
       }
-      currentRow.onclick = createClickHandler(currentRow)
+      if (link) {
+        currentRow.onclick = createClickHandler(currentRow)
+
+      }
     }
   }
 }
@@ -73,7 +82,6 @@ function setupTraceBars () {
 // Trace Bar Popovers
 document.addEventListener('DOMContentLoaded', () => {
   setupRequestTable();
-  setupRequestSearch();
   setupTraceBars();
   setupTraceSearch();
 }, false)

data/app/javascript/stylesheets/components/page_header/page_header.scss

@@ -0,0 +1,3 @@
+.page-header {
+  padding: 2rem 0 2rem;
+}

data/app/javascript/stylesheets/components/pagination.scss

@@ -9,18 +9,12 @@
 .pagy-nav > .page.active,
 .pagy-nav > .page > a {
   padding: 0.5rem 1rem;
-
-  color: var(--grey-900);
-
-  background: white;
   border: 1px solid var(--border-color);
   border-right: none;
-  text-decoration: none;
+  background: white;
+  color: var(--grey-900);
   cursor: pointer;
-
-  &:hover {
-    background: var(--grey-100);
-  }
+  text-decoration: none;
 }
 
 .pagy-nav > .page.prev a,
@@ -30,15 +24,15 @@
 
 .pagy-nav > .page.next a,
 .pagy-nav > .page.next.disabled {
-  border-radius: 0 5px 5px 0;
   border-right: 1px solid var(--border-color);
+  border-radius: 0 5px 5px 0;
 }
 
 .pagy-nav > .page.active {
-  cursor: default;
-  background: var(--red-500);
   border-color: var(--red-500);
+  background: var(--red-500);
   color: white;
+  cursor: default;
 
   &:hover {
     background: var(--red-500);
@@ -46,9 +40,16 @@
 }
 
 .pagy-nav > .page.disabled {
-  cursor: default;
   color: var(--grey-500);
+  cursor: default;
+
   &:hover {
     background: white;
   }
 }
+
+.pagy-nav > .page.disabled:hover,
+.pagy-nav > .page.active:hover,
+.pagy-nav > .page > a:hover {
+  background: var(--grey-100);
+}

data/app/javascript/stylesheets/components/profiled_request_table/placeholder.scss

@@ -0,0 +1,33 @@
+
+.placeholder {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2rem;
+}
+
+.placeholder-image {
+  width: 30%;
+  height: 30%;
+  -webkit-filter: grayscale(1) brightness(2.5);
+}
+
+.placeholder-text {
+  padding: 1rem 0;
+  color: var(--grey-400);
+  text-align: center;
+}
+
+.placeholder-link {
+  color: var(--grey-400);
+
+  &:visited {
+    color: var(--grey-400);
+  }
+
+  &:hover {
+    color: var(--grey-900);
+  }
+}