rails_mini_profiler 0 → 0.1.0

data/app/javascript/js/filter_controller.js

@@ -1,44 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,88 +0,0 @@
-import '../stylesheets/rails-mini-profiler.scss'
-
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css'
-
-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')
-  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.rows;
-    for (let i = 1; i < rows.length; i++) {
-      const currentRow = profiledRequestTable.rows[i]
-      const link = currentRow.dataset.link
-      const createClickHandler = function () {
-        return function () {
-          window.location.href = link
-        }
-      }
-      if (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();
-  setupTraceBars();
-  setupTraceSearch();
-}, false)
-

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

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

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

@@ -1,55 +0,0 @@
-.pagy-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1em 0;
-}
-
-.pagy-nav > .page.disabled,
-.pagy-nav > .page.active,
-.pagy-nav > .page > a {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border-color);
-  border-right: none;
-  background: white;
-  color: var(--grey-900);
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.pagy-nav > .page.prev a,
-.pagy-nav > .page.prev.disabled {
-  border-radius: 5px 0 0 5px;
-}
-
-.pagy-nav > .page.next a,
-.pagy-nav > .page.next.disabled {
-  border-right: 1px solid var(--border-color);
-  border-radius: 0 5px 5px 0;
-}
-
-.pagy-nav > .page.active {
-  border-color: var(--red-500);
-  background: var(--red-500);
-  color: white;
-  cursor: default;
-
-  &:hover {
-    background: var(--red-500);
-  }
-}
-
-.pagy-nav > .page.disabled {
-  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

@@ -1,33 +0,0 @@
-
-.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);
-  }
-}

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

@@ -1,179 +0,0 @@
-.table {
-  width: 100%;
-  border: hidden 1px var(--border-color);
-
-  /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
-  border-collapse: collapse;
-  border-radius: 5px;
-  box-shadow: 0 0 0 1px var(--border-color);
-  table-layout: fixed;
-}
-
-.table th,
-.table td {
-  padding: 0.5rem 1rem;
-}
-
-.table thead tr {
-  border: hidden 1px var(--border-color);
-  box-shadow: 0 0 0 1px var(--border-color);
-  color: var(--grey-400);
-}
-
-.table tr:nth-child(even) {
-  background: var(--grey-50);
-}
-
-.table thead th {
-  font-weight: 400;
-}
-
-.table-filter-icon {
-  width: 14px;
-  margin-left: 0.5rem;
-}
-
-.table tbody tr:not(.no-row) {
-  border: solid 1px var(--border-color);
-  color: var(--grey-700);
-  cursor: pointer;
-}
-
-.table tbody tr:not(.no-row):hover {
-  background: var(--grey-100);
-}
-
-.request-checkbox {
-  z-index: 1;
-  width: 1rem;
-  height: 1rem;
-}
-
-.dropdown-body {
-  padding: 0.33rem 0.5rem;
-}
-
-.dropdown-search-field {
-  padding: 0.5rem 0.5rem;
-  border: 1px solid var(--grey-400);
-  border-radius: 5px;
-  color: var(--grey-700);
-}
-
-.dropdown-toggle {
-  display: flex;
-  align-items: center;
-  color: inherit;
-
-  &:hover {
-    color: var(--grey-900);
-  }
-}
-
-.dropdown-container {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  overflow: hidden;
-  min-width: 240px;
-  box-sizing: border-box;
-  flex-direction: column;
-  border: 1px solid var(--grey-200);
-  margin-top: 0.3em;
-  background: white;
-  border-radius: 5px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-  color: var(--grey-400);
-  cursor: default;
-}
-
-.dropdown-search {
-  display: flex;
-  flex-direction: column;
-}
-
-.dropdown-search button {
-  display: flex;
-  flex-direction: column;
-}
-
-.dropdown-entry {
-  display: flex;
-  padding: 0.33rem 1rem;
-  text-decoration: none;
-
-  &:hover {
-    background: var(--grey-100);
-    color: var(--grey-900);
-  }
-}
-
-.dropdown-entry input {
-  margin-right: 0.5em;
-}
-
-.dropdown-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--grey-200);
-  background: var(--grey-100);
-  font-size: 0.833rem;
-  text-align: left;
-}
-
-.dropdown-header button {
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--grey-500);
-  font-size: 0.833rem;
-  outline: none;
-  text-decoration: underline;
-
-  &:hover {
-    box-shadow: none;
-    color: var(--grey-900);
-  }
-}
-
-.dropdown-footer {
-  width: 100%;
-  padding: 0.5rem;
-  border: none;
-  background: var(--red-500);
-  border-radius: 0;
-  color: white;
-  font-weight: 600;
-  outline: none;
-
-  &:hover {
-    background: var(--red-600);
-  }
-}
-
-.dropdown-search-button {
-  display: inline-block;
-  padding: 0.5em 0.5em;
-  border: none;
-  background: var(--red-500);
-  border-radius: 5px;
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: 600;
-  text-align: center;
-  text-decoration: none;
-
-  &:hover {
-    background: var(--red-600);
-  }
-}
-
-.request-path {
-  overflow: hidden;
-  max-width: 280px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

data/app/javascript/stylesheets/flamegraph.scss

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

data/app/javascript/stylesheets/profiled_requests.scss

@@ -1,89 +0,0 @@
-@import 'components/profiled_request_table/placeholder';
-@import 'components/profiled_request_table/profiled_request_table';
-
-main {
-  display: flex;
-  width: 100%;
-  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;
-}
-
-.request-details-data {
-  display: flex;
-  padding: 1rem 0;
-}
-
-.request-details-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0 1rem;
-  margin: 0;
-}
-
-.data-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
-  margin-right: 3rem;
-  list-style: none;
-}
-
-.data-item small {
-  color: var(--grey-400);
-}
-
-.data-item span {
-  margin: 0.25rem 0;
-}
-
-[class*='request-status-2'],
-[class*='request-method-get'] {
-  background: var(--green-400) !important;
-  color: white;
-}
-
-[class*='request-status-4'],
-[class*='request-method-put'],
-[class*='request-method-patch'] {
-  background: var(--yellow-400) !important;
-  color: white;
-}
-
-[class*='request-status-5'],
-[class*='request-method-delete'] {
-  background: var(--red-500) !important;
-  color: white;
-}
-
-.flamegraph-button button {
-  background: var(--grey-200);
-}
-
-.clear-action button {
-  background: var(--red-500);
-  color: white;
-  font-weight: 600;
-
-  &:hover {
-    background: var(--red-600);
-  }
-}
-
-.profiled-requests-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}