rails_performance 1.5.1 → 1.6.0.pre1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5825cb03b70fd6a56cd4c2aac109ab4dfab7a0684bfd10673d70e898bd63cc66
-  data.tar.gz: 8b7d0b2079ada3dd50c04675ab5067cad9e42840aaaaf7ab2ae198c699bf5a13
+  metadata.gz: 06ded8314ef8bb526e980beb02093b62ace3717957d21c3fc70bb5a9d4d377bf
+  data.tar.gz: 5250ba4a65e1b2e5c2d94b90970d21ab3d3ef42bf989bccf316fbd44a2d55906
 SHA512:
-  metadata.gz: 77658007f528d5049efc6dc1f83d8e1c2930df4ad183ce2e46777d742871ccfce4427f9098d0f3191e39c1a678e60ff9b4d7c8cca9e3639fa34941569b1a79be
-  data.tar.gz: 17344e5d68394268338e170f97fb72e2948740ffbd8b0074c7238c594c828e68895f6dc928b6304c9f5c09fd91059bf075f2682634d68ccdb1eedcb82b8b7f25
+  metadata.gz: e106203bd4f64b397d919f625226c25caf23007394272600d14c4977f81d4689fc0fcaa7c03cdcdb5156b8198cfacd774a1442d68c8c2962d581abc66b5371e4
+  data.tar.gz: bdd796f8f935693933a7f7da42ed201ddf67e61e3e84525c55cb42b8e3323db3d01b80db8fcf466fdde48c161c50616f05c5ef3da7ff2b8f072bd33e99d62cde

data/Rakefile

@@ -16,12 +16,11 @@ end
 
 APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
 load "rails/tasks/engine.rake"
-
 load "rails/tasks/statistics.rake"
 
 require "bundler/gem_tasks"
-
 require "rake/testtask"
+require "standard/rake"
 
 Rake::TestTask.new(:test) do |t|
   t.libs << "test"
@@ -29,4 +28,4 @@ Rake::TestTask.new(:test) do |t|
   t.verbose = false
 end
 
-task default: :test
+task default: [:test, :standard]

data/app/controllers/rails_performance/base_controller.rb

@@ -1,8 +1,11 @@
 module RailsPerformance
   class BaseController < ActionController::Base
     include RailsPerformance::Concerns::CsvExportable
+
     layout "rails_performance/layouts/rails_performance"
 
+    helper RailsPerformance.engine_assets.helper
+
     before_action :verify_access
     after_action :set_permissive_csp
 

data/app/controllers/rails_performance/rails_performance_controller.rb

@@ -75,7 +75,7 @@ module RailsPerformance
       def recent
         @datasource = RailsPerformance::DataSource.new(**prepare_query(params), type: :requests)
         db = @datasource.db
-        @data = RailsPerformance::Reports::RecentRequestsReport.new(db).data(params[:from_timei])
+        @data = RailsPerformance::Reports::RecentRequestsReport.new(db).data
 
         # example
         # :controller=>"HomeController",
@@ -98,7 +98,6 @@ module RailsPerformance
 
         respond_to do |format|
           format.html
-          format.js
           format.csv do
             export_to_csv "recent_requests_report", @data
           end

data/app/engine_assets/javascripts/apex_ext.js

@@ -0,0 +1,30 @@
+import ApexCharts from 'apexcharts';
+
+ApexCharts.prototype.updateRollingWindow = function(newData, { windowSizeMs }) {
+  let data = this.w.config.series[0].data;
+
+  // drop old points outside of the rolling window
+  const windowStart = Date.now() - windowSizeMs;
+  while (data.length > 0 && data[0][0] < windowStart) {
+    data.shift();
+  }
+
+  // create index of remaining data
+  const dataMap = new Map();
+  data.forEach((point, index) => dataMap.set(point[0], index));
+  const lastTimestamp = data.length > 0 ? data[data.length - 1][0] : -Infinity;
+
+  // merge existing data (it can change), append new data
+  const pointsToAdd = [];
+  newData.forEach(([timestamp, value]) => {
+    const index = dataMap.get(timestamp);
+    if (index) {
+      data[index][1] = value;
+    } else if (timestamp > lastTimestamp) {
+      pointsToAdd.push([timestamp, value]);
+    }
+  });
+  this.appendData([{ data: pointsToAdd }], false);
+};
+
+export default ApexCharts;

data/app/engine_assets/javascripts/application.js

@@ -0,0 +1,8 @@
+import Rails from "@rails/ujs"
+Rails.start()
+
+import "rails_performance/charts"
+import "rails_performance/autoupdate"
+import "rails_performance/navbar"
+import "rails_performance/panel"
+import "rails_performance/table"

data/app/engine_assets/javascripts/autoupdate.js

@@ -0,0 +1,78 @@
+import { Idiomorph } from 'idiomorph';
+import ms from 'ms';
+
+class RailsPerformanceAutoupdate extends HTMLElement {
+  connectedCallback() {
+    this.checkbox = this.querySelector('input[type="checkbox"]');
+    this.intervalMs = this.parseIntervalAttribute();
+    this.initializeCheckboxState();
+    this.setupCheckboxListener();
+    this.startPolling();
+  }
+
+  parseIntervalAttribute() {
+    return ms(this.getAttribute('interval') || '3s');
+  }
+
+  initializeCheckboxState() {
+    const key = this.storageKey();
+    if (localStorage.getItem(key) === null) {
+      localStorage.setItem(key, 'true');
+    }
+    this.checkbox.checked = localStorage.getItem(key) === 'true';
+  }
+
+  setupCheckboxListener() {
+    this.checkbox.addEventListener('change', () => {
+      localStorage.setItem(this.storageKey(), this.checkbox.checked);
+    });
+  }
+
+  startPolling() {
+    setInterval(() => this.poll(), this.intervalMs);
+  }
+
+  async poll() {
+    if (!this.checkbox.checked) return;
+
+    const html = await this.fetchPage();
+    const newDoc = this.parseHtml(html);
+    this.morphPage(newDoc);
+  }
+
+  async fetchPage() {
+    const res = await fetch(window.location.href, {
+      headers: {
+        'X-CSRF-Token': document.querySelector("[name='csrf-token']").content,
+      },
+    });
+    return await res.text();
+  }
+
+  parseHtml(html) {
+    const parser = new DOMParser();
+    return parser.parseFromString(html, 'text/html');
+  }
+
+  morphPage(newDoc) {
+    Idiomorph.morph(document.body, newDoc.body, {
+      callbacks: {
+        beforeNodeMorphed: (oldNode, newNode) => {
+          // skip morphing the autoupdate component itself
+          if (oldNode === this) {
+            return false;
+          }
+          if (oldNode.hasAttribute && oldNode.hasAttribute('data-skip-autoupdate')) {
+            return false;
+          }
+        }
+      }
+    });
+  }
+
+  storageKey() {
+    return `rails-performance-autoupdate:${window.location.pathname}`;
+  }
+}
+
+customElements.define('rails-performance-autoupdate', RailsPerformanceAutoupdate);

data/app/engine_assets/javascripts/charts.js

@@ -0,0 +1,193 @@
+import ApexCharts from "rails_performance/apex_ext"
+import ms from "ms"
+
+class RailsPerformanceChart extends HTMLElement {
+  connectedCallback() {
+    this.legend = this.getAttribute('legend');
+    this.units = this.getAttribute('units');
+    this.type = this.getAttribute('type');
+    this.dataText = this.textContent.trim();
+    this.chart = this.buildChart();
+    this.observeDataChanges();
+  }
+
+  buildChart() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+
+    const chartDiv = document.createElement('div');
+    this.shadowRoot.innerHTML = '';
+    this.shadowRoot.appendChild(chartDiv);
+
+    const data = this.safeParseJson(this.dataText);
+    const renderMethod = this[`render${this.type}Chart`];
+    return renderMethod.call(this, chartDiv, data);
+  }
+
+  safeParseJson(text, defaultValue = []) {
+    try { return JSON.parse(text); } catch(e) { return defaultValue; }
+  }
+
+  observeDataChanges() {
+    this.mutationObserver = new MutationObserver(() => {
+      const currentText = this.textContent.trim();
+      if (currentText === this.dataText) return;
+      this.dataText = currentText;
+      const data = this.safeParseJson(currentText);
+      this.updateChart(data);
+    });
+    this.mutationObserver.observe(this, { childList: true, characterData: true, subtree: true });
+  }
+
+  updateChart(newData) {
+    let incoming = newData;
+    if (this.type === 'Usage') {
+      const { units, bytes } = calculateByteUnit(newData);
+      incoming = newData.map(([t, v]) => [t, typeof v === 'number' ? (v / bytes).toFixed(2) : null]);
+    }
+    this.chart.updateRollingWindow(incoming, { windowSizeMs: this.windowSizeMs });
+  }
+
+  get windowSizeMs() {
+    if (this.type === 'TIR' || this.type === 'RT') {
+      return ms("4h")
+    } else {
+      return ms("24h")
+    }
+  }
+
+  renderTIRChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'area',
+      yAxisTitle: 'RPM',
+      seriesName: this.legend,
+      units: this.units
+    });
+  }
+
+  renderRTChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'area',
+      yAxisTitle: 'Time',
+      seriesName: 'Response Time',
+      units: 'ms'
+    });
+  }
+
+  renderPercentageChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'line',
+      yAxisTitle: '%',
+      seriesName: this.legend,
+      units: '%'
+    });
+  }
+
+  renderUsageChart(element, data) {
+    const { units, bytes } = calculateByteUnit(data);
+    return renderChart(element, data, {
+      chartType: 'line',
+      yAxisTitle: this.legend,
+      seriesName: this.legend,
+      units: units,
+      dataTransform: (data) => {
+        return data.map(([timestamp, value]) => [timestamp, typeof value === 'number' ? (value / bytes).toFixed(2) : null]);
+      },
+    });
+  }
+}
+
+customElements.define('rails-performance-chart', RailsPerformanceChart);
+
+function calculateByteUnit(data) {
+  let max = data.reduce((acc, [_, value]) => (value > acc ? value : acc), -Infinity);
+  let pow = 0;
+  while (max >= 1024 && pow < 5) {
+    max /= 1024;
+    pow += 1;
+  }
+
+  const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'][pow];
+  const bytes = Math.pow(1024, pow);
+
+  return { units, bytes };
+}
+
+function renderChart(element, data, { chartType = 'area', yAxisTitle, seriesName, units, dataTransform = x => x } = {}) {
+  const chart = new ApexCharts(
+    element,
+    {
+      chart: {
+        type: chartType,
+        height: 300,
+        width: '100%',
+        group: 'chart',
+        zoom: {
+          type: 'x',
+        },
+      },
+      colors: ['#ff5b5b'],
+      stroke: {
+        width: 1,
+      },
+      dataLabels: {
+        enabled: false
+      },
+      legend: {
+        show: false
+      },
+      xaxis: {
+        crosshairs: {
+          show: true
+        },
+        type: 'datetime',
+        labels: {
+          datetimeUTC: false,
+          style: {
+            colors: ["#a6b0cf"]
+          }
+        }
+      },
+      yaxis: {
+        min: 0,
+        title: {
+          text: yAxisTitle,
+          style: {
+            color: "#f6f6f6"
+          }
+        },
+        labels: {
+          style: {
+            colors: ["#a6b0cf"]
+          }
+        }
+      },
+      tooltip: {
+        style: {
+          fontSize: '16px'
+        },
+        marker: {
+          show: false,
+        },
+        x: {
+          show: false,
+          format: 'dd/MM/yy HH:mm'
+        },
+        y: {
+          formatter: (value) => value ? `${value} ${units}`.trim() : undefined,
+          title: {
+            formatter: () => '',
+          }
+        }
+      },
+      series: [{
+        name: seriesName,
+        data: dataTransform(data),
+      }],
+      annotations: window?.annotationsData || {}
+    }
+  );
+  chart.render();
+  return chart;
+}

data/app/{views/rails_performance → engine_assets}/javascripts/navbar.js

@@ -1,8 +1,10 @@
-$(document).ready(function() {
-  // Check for click events on the navbar burger icon
-  $(".navbar-burger").click(function() {
-      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-      $(".navbar-burger").toggleClass("is-active");
-      $(".navbar-menu").toggleClass("is-active");
-  });
-});
+import $ from 'jquery';
+
+$(document).ready(function() {
+  // Check for click events on the navbar burger icon
+  $(".navbar-burger").click(function() {
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      $(".navbar-burger").toggleClass("is-active");
+      $(".navbar-menu").toggleClass("is-active");
+  });
+});

data/app/{views/rails_performance → engine_assets}/javascripts/panel.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 function hidePanel() {
   $('.cd-panel').removeClass('cd-panel--is-visible');
   $('body').removeClass('panel-visible');
@@ -12,6 +14,9 @@ function showPanel() {
   $('.cd-panel__content table').stupidtable();
 }
 
+window.hidePanel = hidePanel;
+window.showPanel = showPanel;
+
 $(function() {
   var panel = {};
   window.panel = panel;
@@ -36,4 +41,3 @@ $(function() {
   });
 
 });
-

data/app/engine_assets/javascripts/table.js

@@ -0,0 +1,7 @@
+import $ from 'jquery';
+window.jQuery = $; // shim for stupid-table-plugin
+await import('stupid-table-plugin');
+
+$(function() {
+  $('table').stupidtable();
+});

data/app/{views/rails_performance → engine_assets}/stylesheets/responsive.css

@@ -1,10 +1,10 @@
-@media screen and (max-width: 1600px) {
-  .container.is-fluid {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
-
-  .section {
-    padding: 1em;
-  }
-}
+@media screen and (max-width: 1600px) {
+  .container.is-fluid {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  .section {
+    padding: 1em;
+  }
+}

data/app/{views/rails_performance → engine_assets}/stylesheets/style.css

@@ -98,6 +98,12 @@
   fill: hsl(141, 53%, 53%) !important;
 }
 
+/* Hide the element until it's defined, and prevent layout jump */
+rails-performance-chart:not(:defined) {
+  display: block;
+  opacity: 0;
+}
+
 .chart {
   height: 300px;
 }

data/app/helpers/rails_performance/rails_performance_helper.rb

@@ -111,14 +111,6 @@ module RailsPerformance
       @icons[name] ||= raw File.read(File.expand_path(File.dirname(__FILE__) + "/../../assets/images/#{name}.svg"))
     end
 
-    def insert_css_file(file)
-      raw "<style>#{raw File.read File.expand_path(File.dirname(__FILE__) + "/../../views/rails_performance/stylesheets/#{file}")}</style>"
-    end
-
-    def insert_js_file(file)
-      raw "<script>#{raw File.read File.expand_path(File.dirname(__FILE__) + "/../../views/rails_performance/javascripts/#{file}")}</script>"
-    end
-
     def format_datetime(e)
       dt = RailsPerformance::Reports::BaseReport.time_in_app_time_zone(e)
       I18n.l(dt, format: "%Y-%m-%d %H:%M:%S")

data/app/views/rails_performance/_panel.html.erb

@@ -1,4 +1,4 @@
-<div class="cd-panel cd-panel--from-right js-cd-panel-main">
+<div class="cd-panel cd-panel--from-right js-cd-panel-main" data-skip-autoupdate>
   <div class="cd-panel__container">
     <nav class="panel">
       <p class="panel-heading">
@@ -10,4 +10,6 @@
       </div>
     </nav>
   </div> <!-- cd-panel__container -->
-</div> <!-- cd-panel -->
+</div> <!-- cd-panel -->
+
+<div class="panel-overlay" data-skip-autoupdate></div>

data/app/views/rails_performance/layouts/rails_performance.html.erb

@@ -6,8 +6,23 @@
     <title>Rails Performance</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag if ::Rails::VERSION::STRING.to_f >= 5.2 %>
-    <%= render '/rails_performance/stylesheets/stylesheets' %>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <%= engine_stylesheet_link_tag "style" %>
+    <%= engine_stylesheet_link_tag "panel" %>
+    <%= engine_stylesheet_link_tag "responsive" %>
+
     <link rel="shortcut icon" href="/favicon.ico">
+
+    <%= engine_javascript_importmap_tags "application", {
+      "@rails/ujs" => "https://cdn.jsdelivr.net/npm/@rails/ujs@7.1.3-4/+esm",
+      "jquery" => "https://cdn.jsdelivr.net/npm/jquery@3.7.1/+esm",
+      "apexcharts" => "https://cdn.jsdelivr.net/npm/apexcharts@3.45.0/+esm",
+      "ms" => "https://cdn.jsdelivr.net/npm/ms@2.1.3/+esm",
+      "stupid-table-plugin" => "https://cdn.jsdelivr.net/npm/stupid-table-plugin@1.1.3/+esm",
+      "idiomorph" => "https://cdn.jsdelivr.net/npm/idiomorph@0.7.4/+esm"
+    } %>
+
     <script>
       window.annotationsData = <%= raw RailsPerformance::Reports::AnnotationsReport.new.data.to_json %>;
     </script>
@@ -36,12 +51,5 @@
     </footer>
 
     <%= render '/rails_performance/panel' %>
-
-    <div class="panel-overlay"></div>
-
-    <%= render '/rails_performance/javascripts/javascripts' %>
-
-    <%= yield :on_load %>
   </body>
-
 </html>

data/app/views/rails_performance/rails_performance/_summary.html.erb

@@ -1,8 +1,10 @@
 <h2 class="subtitle">Throughput</h2>
-<div id="throughput_report_chart_mini" class="chart_mini"></div>
+<rails-performance-chart id="throughput_report_chart_mini" type="TIR" legend="RPM" units="rpm" class="chart_mini">
+</rails-performance-chart>
 
 <h2 class="subtitle">Average Response Time</h2>
-<div id="response_time_report_chart_mini" class="chart_mini"></div>
+<rails-performance-chart id="response_time_report_chart_mini" type="RT" legend="Response Time" class="chart_mini">
+</rails-performance-chart>
 
 <h2 class="subtitle"><%= title %></h2>
 <table class="table is-fullwidth is-hoverable is-narrow is-size-8">

data/app/views/rails_performance/rails_performance/custom.html.erb

@@ -56,7 +56,9 @@
 <div class="card">
   <div class="card-content">
     <h2 class="subtitle">Custom Events Throughput Report</h2>
-    <div id="throughput_report_chart" class="chart"></div>
+    <rails-performance-chart id="throughput_report_chart" type="TIR" legend="Events" units="events / minute" class="chart">
+      <%= raw @throughput_report_data.to_json %>
+    </rails-performance-chart>
     <p class="content is-small">All custom events in the application</p>
   </div>
 </div>
@@ -66,18 +68,9 @@
 <div class="card">
   <div class="card-content">
     <h2 class="subtitle">Average Execution Time</h2>
-    <div id="response_time_report_chart" class="chart"></div>
+    <rails-performance-chart id="response_time_report_chart" type="RT" legend="Response Time" class="chart">
+      <%= raw @response_time_report_data.to_json %>
+    </rails-performance-chart>
     <p class="content is-small">All custom events in the application</p>
   </div>
 </div>
-
-
-<% content_for :on_load do %>
-  <script>
-    var data1 = <%= raw @throughput_report_data.to_json %>;
-    showTIRChart('throughput_report_chart', data1, ' events / minute', 'Events');
-
-    var data2 = <%= raw @response_time_report_data.to_json %>;
-    showRTChart('response_time_report_chart', data2);
-  </script>
-<% end %>

data/app/views/rails_performance/rails_performance/delayed_job.html.erb

@@ -7,7 +7,9 @@
 <div class="card">
   <div class="card-content">
     <h2 class="subtitle">Delayed::Job Workers Throughput Report</h2>
-    <div id="throughput_report_chart" class="chart"></div>
+    <rails-performance-chart id="throughput_report_chart" type="TIR" legend="Jobs" units="jobs / minute" class="chart">
+      <%= raw @throughput_report_data.to_json %>
+    </rails-performance-chart>
     <p class="content is-small">All workers in the application</p>
   </div>
 </div>
@@ -17,7 +19,9 @@
 <div class="card">
   <div class="card-content">
     <h2 class="subtitle">Average Execution Time</h2>
-    <div id="response_time_report_chart" class="chart"></div>
+    <rails-performance-chart id="response_time_report_chart" type="RT" legend="Response Time" class="chart">
+      <%= raw @response_time_report_data.to_json %>
+    </rails-performance-chart>
     <p class="content is-small">All workers in the application</p>
   </div>
 </div>
@@ -61,14 +65,3 @@
     </table>
   </div>
 </div>
-
-
-<% content_for :on_load do %>
-  <script>
-    var data1 = <%= raw @throughput_report_data.to_json %>;
-    showTIRChart('throughput_report_chart', data1, ' jobs / minute', 'Jobs');
-
-    var data2 = <%= raw @response_time_report_data.to_json %>;
-    showRTChart('response_time_report_chart', data2);
-  </script>
-<% end %>

data/app/views/rails_performance/rails_performance/grape.html.erb

@@ -7,7 +7,9 @@
 <div class="card">
   <div class="card-content">
     <h2 class="subtitle">Grape Throughput Report</h2>
-    <div id="throughput_report_chart" class="chart"></div>
+    <rails-performance-chart id="throughput_report_chart" type="TIR" legend="Requests" units="requests / minute" class="chart">
+      <%= raw @throughput_report_data.to_json %>
+    </rails-performance-chart>
     <p class="content is-small"></p>
   </div>
 </div>
@@ -54,11 +56,3 @@
     </table>
   </div>
 </div>
-
-
-<% content_for :on_load do %>
-  <script>
-    var data1 = <%= raw @throughput_report_data.to_json %>;
-    showTIRChart('throughput_report_chart', data1, ' requests / minute', 'Requests');
-  </script>
-<% end %>