activeinsights 1.0.0 → 1.1.0

data/app/views/active_insights/requests/index.html.erb

@@ -1,10 +1,10 @@
 <header>
   <h1>Metrics for <%= display_date(@date.first) %></h1>
   <div class="flex flex-row items-center">
-    <%= link_to "View job metrics", active_insights.jobs_path, class: "white mr-15px" %>
+    <%= link_to "View job metrics", active_insights.jobs_path, class: "link calibre mr-15px" %>
 
     <%= form_with url: active_insights.requests_path, method: :get do |f| %>
-      <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
+      <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
       <% f.submit "submit", class: "hidden" %>
     <% end %>
   </div>
@@ -12,22 +12,22 @@
 
 <div class="pl-30px pt-30px flex flex-row justify-around font-size-30">
   <% @requests.flat_map(&:parsed_durations).tap do |durations| %>
-    <%= link_to rpm_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to rpm_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
       <div><%= per_minute(durations.size, (@date.last - @date.first).seconds) %></div>
       <b>RPM</b>
     <% end %>
 
-    <%= link_to requests_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to requests_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
       <div><%= p50(durations) %> ms</div>
       <b>p50</b>
     <% end %>
 
-    <%= link_to requests_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to requests_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
       <div><%= p95(durations) %> ms</div>
       <b>p95</b>
     <% end %>
 
-    <%= link_to requests_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to requests_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
       <div><%= p99(durations) %> ms</div>
       <b>p99</b>
     <% end %>
@@ -39,6 +39,7 @@
     <tr>
       <th>Controller</th>
       <th>RPM</th>
+      <th>%</th>
       <th>p50</th>
       <th>p95</th>
       <th>p99</th>
@@ -49,6 +50,7 @@
       <tr>
         <td><%= link_to model.formatted_controller, controller_p_values_path(@date.first.to_date, model.formatted_controller) %></td>
         <td><%= per_minute(model.parsed_durations.size, (@date.last - @date.first).seconds) %></td>
+        <td><%= number_to_percentage model.percentage(@requests.excluding(model)), precision: 1 %></td>
         <td><%= model.p50 %> ms</td>
         <td><%= model.p95 %> ms</td>
         <td><%= model.p99 %> ms</td>

data/app/views/active_insights/requests_p_values/index.html.erb

@@ -1,32 +1,37 @@
 <header>
   <% if params[:formatted_controller].present? %>
-    <h1><%= params[:formatted_controller] %> metrics for <%= display_date(@date.first) %> (in ms)</h1>
+    <h1><%= params[:formatted_controller] %> metrics for <%= display_date(@date.first) %></h1>
   <% else %>
-    <h1>Response Metrics for <%= display_date(@date.first) %> (in ms)</h1>
+    <h1>Response Metrics for <%= display_date(@date.first) %></h1>
   <% end %>
 
   <%= form_with url: active_insights.requests_p_values_redirection_path, method: :get do |f| %>
     <%= f.hidden_field :formatted_controller, value: params[:formatted_controller] %>
-    <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
+    <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
     <% f.submit "submit", class: "hidden" %>
   <% end %>
 </header>
 
-<div class="p-16px">
-  <%= line_chart [{ name: "p50", data: @p50 }, { name: "p95", data: @p95 }, { name: "p99", data: @p99 }], height: "80%", colors: ["rgb(255, 249, 216)", "green", "#C00"], library: {
-    plugins: { zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgba(225,225,225,0.5)' }, mode: 'x' } }, decimation: { enabled: true, algorithm: 'lttb' } },
+<div class="p-16px flex items-center">
+  <h1 class="red calibre text-center w-175px">Response Times <br> (in ms)</h1>
+  <%= line_chart [{ name: "p50", data: @p50 }, { name: "p95", data: @p95 }, { name: "p99", data: @p99 }], height: "500px", colors: ["#C00", "rgb(223, 180, 115)", "#000"], library: {
+    plugins: { legend: { position: "bottom" }, tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
     elements: { point: { radius: 0 } },
     scales: {
-      x: { autoSkip: false, display: false },
-      y: { grid: { display: false }, ticks: { color: "white" }, min: (@p50.map(&:second).min.to_f * 0.98).ceil, max: (@p99.map(&:second).max) }
+      x: { border: { color: "rgb(238, 231, 233)" }, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
+      y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@p50.map(&:second).min.to_f * 0.98).ceil, max: (@p99.map(&:second).max) }
     } } %>
 </div>
 
-<script>
-  document.addEventListener('keydown',(event) => {
-    const chart = Chartkick.charts[Object.keys(Chartkick.charts)[0]].getChartObject()
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      chart.resetZoom()
-    }
-  });
-</script>
+<% if @rpm %>
+  <div class="p-16px flex items-center">
+    <h1 class="red calibre text-center w-175px">RPM</h1>
+    <%= column_chart @rpm, height: "400px", colors: ["#C00"], library: {
+      borderSkipped: true, barPercentage: 1, categoryPercentage: 1,
+      plugins: { tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
+      scales: {
+        x: { border: { color: "rgb(238, 231, 233)" }, barPercentage: 1.0, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
+        y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@rpm.map(&:second).min.to_f * 0.98).ceil, max: (@rpm.map(&:second).max) }
+      } } %>
+  </div>
+<% end %>

data/app/views/active_insights/rpm/index.html.erb

@@ -1,26 +1,17 @@
 <header>
   <h1>RPM Metrics for <%= display_date(@date.first) %></h1>
   <%= form_with url: active_insights.rpm_redirection_path, method: :get do |f| %>
-    <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
+    <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
     <% f.submit "submit", class: "hidden" %>
   <% end %>
 </header>
 
-<div class="p-16px">
-  <%= column_chart @minutes, height: "80%", colors: ["#C00"], library: {
+<div class="p-16px flex items-center h-100">
+  <%= column_chart @minutes, height: "400px", colors: ["#C00"], library: {
     borderSkipped: true, barPercentage: 1, categoryPercentage: 1,
-    plugins: { zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgba(225,225,225,0.5)' }, mode: 'x' } } },
+    plugins: { tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
     scales: {
-      x: { barPercentage: 1.0, autoSkip: false, display: false },
-      y: { grid: { display: false }, ticks: { color: "white" }, min: (@minutes.map(&:second).min.to_f * 0.98).ceil, max: (@minutes.map(&:second).max) }
+      x: { border: { color: "rgb(238, 231, 233)" }, barPercentage: 1.0, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
+      y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@minutes.map(&:second).min.to_f * 0.98).ceil, max: (@minutes.map(&:second).max) }
     } } %>
 </div>
-
-<script>
-  document.addEventListener('keydown',(event) => {
-    const chart = Chartkick.charts[Object.keys(Chartkick.charts)[0]].getChartObject()
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      chart.resetZoom()
-    }
-  });
-</script>

data/app/views/layouts/active_insights/application.html.erb

@@ -20,348 +20,20 @@
 
     Chartkick.use(Chart);
     Chart.register(zoomPlugin);
+
+    document.addEventListener('keydown',(event) => {
+      Object.keys(Chartkick.charts).forEach((key) => {
+        const chart = Chartkick.charts[key].getChartObject()
+        if (event.key === 'Escape' || event.key === 'Esc') {
+          chart.resetZoom()
+        }
+      })
+    });
   </script>
 
   <title>Active Insights</title>
-  <style>
-    body {
-      background-color: #FAFAFA;
-      color: #333;
-      color-scheme: light dark;
-      supported-color-schemes: light dark;
-      margin: 0px;
-    }
-
-    body, p, ol, ul, td, input {
-      font-family: helvetica, verdana, arial, sans-serif;
-      font-size:   15px;
-      line-height: 18px;
-    }
-
-    form {
-      margin-bottom: 0px;
-    }
-
-    pre {
-      font-size: 11px;
-      white-space: pre-wrap;
-    }
-
-    pre.box {
-      border: 1px solid #EEE;
-      padding: 10px;
-      margin: 0px;
-      width: 958px;
-    }
-
-    header {
-      color: #F0F0F0;
-      background: #C00;
-      padding: 0.5em 1.5em;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    h1 {
-      overflow-wrap: break-word;
-      margin: 0.2em 0;
-      line-height: 1.1em;
-      font-size: 2em;
-    }
-
-    h2 {
-      color: #C00;
-      line-height: 25px;
-    }
-
-    code.traces {
-      font-size: 11px;
-    }
-
-    .response-heading, .request-heading {
-      margin-top: 30px;
-    }
-
-    .exception-message {
-      padding: 8px 0;
-    }
-
-    .exception-message .message {
-      margin-bottom: 8px;
-      line-height: 25px;
-      font-size: 1.5em;
-      font-weight: bold;
-      color: #C00;
-    }
-
-    .details {
-      border: 1px solid #D0D0D0;
-      border-radius: 4px;
-      margin: 1em 0px;
-      display: block;
-      max-width: 978px;
-    }
-
-    .summary {
-      padding: 8px 15px;
-      border-bottom: 1px solid #D0D0D0;
-      display: block;
-    }
-
-    a.summary {
-      color: #F0F0F0;
-      text-decoration: none;
-      background: #C52F24;
-      border-bottom: none;
-    }
-
-    .details pre {
-      margin: 5px;
-      border: none;
-    }
-
-    #container {
-      box-sizing: border-box;
-      width: 100%;
-      padding: 0 1.5em;
-    }
-
-    .source * {
-      margin: 0px;
-      padding: 0px;
-    }
-
-    .source {
-      border: 1px solid #D9D9D9;
-      background: #ECECEC;
-      max-width: 978px;
-    }
-
-    .source pre {
-      padding: 10px 0px;
-      border: none;
-    }
-
-    .source .data {
-      font-size: 80%;
-      overflow: auto;
-      background-color: #FFF;
-    }
-
-    .info {
-      padding: 0.5em;
-    }
-
-    .source .data .line_numbers {
-      background-color: #ECECEC;
-      color: #555;
-      padding: 1em .5em;
-      border-right: 1px solid #DDD;
-      text-align: right;
-    }
-
-    .line {
-      padding-left: 10px;
-      white-space: pre;
-    }
-
-    .line:hover {
-      background-color: #F6F6F6;
-    }
-
-    .line.active {
-      background-color: #FCC;
-    }
-
-    .error_highlight {
-      display: inline-block;
-      background-color: #FF9;
-      text-decoration: #F00 wavy underline;
-    }
-
-    .error_highlight_tip {
-      color: #666;
-      padding: 2px 2px;
-      font-size: 10px;
-    }
-
-    .button_to {
-      display: inline-block;
-      margin-top: 0.75em;
-      margin-bottom: 0.75em;
-    }
-
-    .hidden {
-      display: none;
-    }
-
-    .correction {
-      list-style-type: none;
-    }
-
-    input[type="submit"] {
-      color: white;
-      background-color: #C00;
-      border: none;
-      border-radius: 12px;
-      box-shadow: 0 3px #F99;
-      font-size: 13px;
-      font-weight: bold;
-      margin: 0;
-      padding: 10px 18px;
-      cursor: pointer;
-      -webkit-appearance: none;
-    }
-    input[type="submit"]:focus,
-    input[type="submit"]:hover {
-      opacity: 0.8;
-    }
-    input[type="submit"]:active {
-      box-shadow: 0 2px #F99;
-      transform: translateY(1px)
-    }
-
-    a { color: #980905; }
-    a:visited { color: #666; }
-    a.trace-frames {
-      color: #666;
-      overflow-wrap: break-word;
-    }
-    a:hover, a.trace-frames.selected { color: #C00; }
-    a.summary:hover { color: #FFF; }
-
-    @media (prefers-color-scheme: dark) {
-      body {
-        background-color: #222;
-        color: #ECECEC;
-      }
-
-      .details, .summary {
-        border-color: #666;
-      }
-
-      .source {
-        border-color: #555;
-        background-color: #333;
-      }
-
-      .source .data {
-        background: #444;
-      }
-
-      .source .data .line_numbers {
-        background: #333;
-        border-color: #222;
-      }
-
-      .line:hover {
-        background: #666;
-      }
-
-      .line.active {
-        background-color: #900;
-      }
-
-      .error_highlight {
-        color: #333;
-      }
-
-      input[type="submit"] {
-        box-shadow: 0 3px #800;
-      }
-      input[type="submit"]:active {
-        box-shadow: 0 2px #800;
-      }
-
-      a { color: #C00; }
-    }
-
-    table {
-      margin: 0;
-      border-collapse: collapse;
-      word-wrap:break-word;
-      table-layout: auto;
-      width: 100%;
-      margin-top: 50px;
-    }
-
-    table thead tr {
-      border-bottom: 2px solid #ddd;
-    }
-
-    table th {
-      padding-left: 30px;
-      text-align: left;
-    }
-
-    table tbody tr {
-      border-bottom: 1px solid #ddd;
-    }
-
-    table tbody tr:nth-child(odd) {
-      background: #f2f2f2;
-    }
-
-    table td {
-      padding: 4px 30px;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      table tbody tr:nth-child(odd) {
-        background: #282828;
-      }
-    }
-
-    .pl-30px {
-      padding-left: 30px;
-    }
-
-    .pt-30px {
-      padding-top: 30px;
-    }
-
-    .flex {
-      display: flex;
-    }
-
-    .flex-col {
-      flex-direction: column;
-    }
-    .flex-row {
-      flex-direction: row;
-    }
-    .justify-around {
-      justify-content: space-around;
-    }
-
-    .justify-center {
-      justify-content: center;
-    }
-    .items-center {
-      align-items: center;
-    }
-    .font-size-30 {
-      font-size: 30px;
-      line-height: 30px;
-    }
-    .no-underline {
-      text-decoration: none;
-    }
-    .p-16px {
-      padding: 16px;
-    }
-
-    a.white {
-      color: #fff;
-    }
-    .mr-15px {
-      margin-right: 15px;
-    }
-
-    <%= yield :style %>
-  </style>
+  <%= stylesheet_link_tag "active_insights/application" %>
+  <style><%= yield :style %></style>
 </head>
 <body><%= yield %></body>
 </html>

data/config/initializers/importmap.rb

@@ -4,12 +4,13 @@ require "active_insights"
 
 ActiveInsights::Engine.importmap.draw do
   pin "chartkick", to: "https://ga.jspm.io/npm:chartkick@5.0.1/dist/chartkick.esm.js"
-  pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@4.4.1/dist/chart.js"
+  pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@4.4.4/dist/chart.js"
+
   pin "chartjs-adapter-date-fns", to: "https://ga.jspm.io/npm:chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.esm.js"
   pin "date-fns", to: "https://ga.jspm.io/npm:date-fns@3.2.0/index.mjs"
 
   pin "chartjs-plugin-zoom", to: "https://ga.jspm.io/npm:chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.esm.js"
   pin "hammerjs", to: "https://ga.jspm.io/npm:hammerjs@2.0.8/hammer.js"
   pin "@kurkle/color", to: "https://ga.jspm.io/npm:@kurkle/color@0.3.2/dist/color.esm.js"
-  pin "chart.js/helpers", to: "https://ga.jspm.io/npm:chart.js@4.4.1/helpers/helpers.js"
+  pin "chart.js/helpers", to: "https://ga.jspm.io/npm:chart.js@4.4.4/helpers/helpers.js"
 end

data/lib/active_insights/engine.rb

@@ -28,6 +28,8 @@ module ActiveInsights
       ActiveSupport::Notifications.
         subscribe("perform.active_job") do |_name,
           started, finished, unique_id, payload|
+          next unless ActiveInsights.enabled?
+
           ActiveInsights::Job.setup(started, finished, unique_id, payload)
         end
     end
@@ -36,11 +38,11 @@ module ActiveInsights
       ActiveSupport::Notifications.
         subscribe("process_action.action_controller") do |_name,
           started, finished, unique_id, payload|
-        next if Rails.env.development? ||
-          ActiveInsights.ignored_endpoint?(payload)
+        next if ActiveInsights.ignored_endpoint?(payload) ||
+          !ActiveInsights.enabled?
 
         Thread.new do
-          ActiveRecord::Base.connection_pool.with_connection do
+          ActiveRecord::Base.lease_connection do
             ActiveInsights::Request.
               setup(started, finished, unique_id, payload)
           end

data/lib/active_insights/seeders/jobs.rb

@@ -34,11 +34,15 @@ module ActiveInsights
     end
 
     def processing_times
-      Array.new(rpm) do
+      Array.new(calculate_rpm) do
         p50 + (beta_distribution.rng * (p95 - p50))
       end.select { |time| time <= p99 }
     end
 
+    def calculate_rpm
+      (rpm * 0.9) + (rpm * 0.2 * rand)
+    end
+
     def beta_distribution
       @beta_distribution ||= Rubystats::BetaDistribution.new(2, 5)
     end

data/lib/active_insights/seeders/requests.rb

@@ -34,11 +34,15 @@ module ActiveInsights
     end
 
     def response_times
-      Array.new(rpm) do
+      Array.new(calculate_rpm) do
         p50 + (beta_distribution.rng * (p95 - p50))
       end.select { |time| time <= p99 }
     end
 
+    def calculate_rpm
+      (rpm * 0.9) + (rpm * 0.2 * rand)
+    end
+
     def beta_distribution
       @beta_distribution ||= Rubystats::BetaDistribution.new(2, 5)
     end

data/lib/active_insights/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ActiveInsights
-  VERSION = "1.0.0"
+  VERSION = "1.1.0"
 end

data/lib/active_insights.rb

@@ -7,11 +7,21 @@ require "active_insights/version"
 require "active_insights/engine"
 
 module ActiveInsights
-  mattr_accessor :connects_to, :ignored_endpoints
+  mattr_accessor :connects_to, :ignored_endpoints, :enabled
 
-  def self.ignored_endpoint?(payload)
-    ignored_endpoints.to_a.include?(
-      "#{payload[:controller]}##{payload[:action]}"
-    )
+  class << self
+    def ignored_endpoint?(payload)
+      ignored_endpoints.to_a.include?(
+        "#{payload[:controller]}##{payload[:action]}"
+      )
+    end
+
+    def enabled?
+      if enabled.nil?
+        !Rails.env.development?
+      else
+        enabled.present?
+      end
+    end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeinsights
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Nick Pezza
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-25 00:00:00.000000000 Z
+date: 2024-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chartkick
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '7.1'
+        version: '7.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '7.1'
+        version: '7.2'
 description:
 email:
 - pezza@hey.com
@@ -61,6 +61,12 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
+- app/assets/stylesheets/active_insights/application.css
+- app/assets/stylesheets/active_insights/calibre-bold.woff2
+- app/assets/stylesheets/active_insights/calibre-regular-italic.woff2
+- app/assets/stylesheets/active_insights/calibre-regular.woff2
+- app/assets/stylesheets/active_insights/calibre-semibold-italic.woff2
+- app/assets/stylesheets/active_insights/calibre-semibold.woff2
 - app/controllers/active_insights/application_controller.rb
 - app/controllers/active_insights/jobs_controller.rb
 - app/controllers/active_insights/jobs_latencies_controller.rb
@@ -104,14 +110,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.1.0
+      version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.5
+rubygems_version: 3.5.18
 signing_key:
 specification_version: 4
 summary: Rails performance tracking