activeinsights 1.0.1 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2778801a841416fe7477c3eaabd4b6a5a77b9fda76256e7254e36d14491c9b9
-  data.tar.gz: adb6b90323b2d2798bd30a4a316e8b9f60216a2108d6c929e0d1e9bc8d7e8a14
+  metadata.gz: 192b4bd4748a82c5e01887fb8f54fe0a76c7ffdf1a8780d190879aaed37f5182
+  data.tar.gz: d02890ed7d5dbfe9bd6339fd15c9997fdf295dc4d5dc145114b431298d420947
 SHA512:
-  metadata.gz: 79c9abe8a4f26633ad888639829209fd63a9871b5a2a00249e4cc6c94dc18b86547c8a19c212a06d2888099b6ee4eb3d0611ceebc0eb955d37d3d21794dc1f53
-  data.tar.gz: fa13721b3a897868c7c39d87582f044371bb8b27959b3d0264024a908c18ed611b5fb71e3b40eb78ad6031985f6514527d8730c51246d2030b4c187b7f00eaaf
+  metadata.gz: 25e424494797d134e929d9521c0052ae4e0a10138eba7a12d997b783d1857e76ba10dc4a20fc9492be05784ede505d7f233365eed8b7270e97363bd896ee453b
+  data.tar.gz: e05659cbd9d081dbfa0c6e6e63c65b6ef3d8fe13d2c69abd6db316dc85cc7b787066e628bbe2418626f1d6c2eb72d1d0bee1fd92f1132f5b7baddd403a766bdb

data/README.md

@@ -36,7 +36,7 @@ $ gem install activeinsights
 
 And then install migrations:
 ```bash
-bin/rails active_insights:install
+bin/rails g active_insights:install
 bin/rails rails db:migrate
 ```
 

data/app/assets/stylesheets/active_insights/application.css

@@ -0,0 +1,396 @@
+@font-face {
+  font-family: 'Calibre';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./calibre-regular.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Calibre';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./calibre-regular-italic.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Calibre';
+  font-style: normal;
+  font-weight: 600;
+  src: url('./calibre-semibold.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Calibre';
+  font-style: italic;
+  font-weight: 600;
+  src: url('./calibre-semibold-italic.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Calibre';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./calibre-bold.woff2') format('woff2');
+  font-display: swap;
+}
+
+body {
+  background-color: #fff;
+  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: #D30001;
+  background: rgb(238, 231, 233);
+  padding: 0.5em 1.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tooltip {
+  background: rgb(238, 231, 233);
+}
+
+header h1 {
+  font-family: 'Calibre';
+}
+
+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;
+}
+
+.red {
+  color: #D30001;
+}
+
+.calibre {
+  font-family: 'Calibre';
+}
+
+.link {
+  color: #261B23;
+  font-size: 20px;
+  &:hover {
+    color: #D30001;
+  }
+}
+
+.datepicker {
+  background-color: #D30001;
+  border-radius: 9999px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.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.trace-frames {
+  color: #666;
+  overflow-wrap: break-word;
+}
+a:hover, a.trace-frames.selected { color: #C00; }
+a.summary:hover { color: #FFF; }
+
+table {
+  margin: 0;
+  border-collapse: collapse;
+  word-wrap:break-word;
+  table-layout: auto;
+  width: 100%;
+  margin-top: 50px;
+}
+
+table thead tr {
+  border-bottom: 3px solid rgba(38,27,35,0.1);
+}
+
+table th {
+  padding-left: 30px;
+  text-align: left;
+  font-family: 'Calibre';
+  font-size: 20px;
+}
+
+table tbody tr {
+  border-bottom: 3px solid rgba(38,27,35,0.1);
+  td {
+    font-family: 'Calibre';
+    font-size: 20px;
+
+    a {
+      color: #261B23;
+      &:hover {
+        color: #D30001;
+      }
+    }
+  }
+}
+
+table tbody tr:nth-child(odd) {
+  background: rgb(238, 231, 233);
+}
+
+table td {
+  padding: 10px 30px;
+}
+
+.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;
+}
+.button {
+  transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
+  padding: 5px 20px;
+  border-radius: 6px;
+
+  &:hover {
+    background: #F0E7E9;
+  }
+}
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.h-400px {
+  height: 400px;
+}
+.h-100 {
+  height: 100%;
+}
+.text-center {
+  text-align: center;
+}
+.w-175px {
+  width: 175px;
+}

data/app/controllers/active_insights/jobs_p_values_controller.rb

@@ -6,6 +6,8 @@ module ActiveInsights
       @p50 = minutes.map{ |minute| [minute.pretty_started_at, minute.p50] }
       @p95 = minutes.map{ |minute| [minute.pretty_started_at, minute.p95] }
       @p99 = minutes.map{ |minute| [minute.pretty_started_at, minute.p99] }
+
+      fetch_jpm
     end
 
     def redirection
@@ -29,5 +31,14 @@ module ActiveInsights
     def job
       params[:job].presence
     end
+
+    def fetch_jpm
+      return if job.blank?
+
+      @jpm =
+        minutes.select("COUNT(id) AS jpm").map do |minute|
+          [minute.started_at.strftime("%-l:%M%P"), minute.jpm]
+        end
+    end
   end
 end

data/app/controllers/active_insights/requests_p_values_controller.rb

@@ -6,6 +6,8 @@ module ActiveInsights
       @p50 = minutes.map{ |minute| [minute.pretty_started_at, minute.p50] }
       @p95 = minutes.map{ |minute| [minute.pretty_started_at, minute.p95] }
       @p99 = minutes.map{ |minute| [minute.pretty_started_at, minute.p99] }
+
+      fetch_rpm
     end
 
     def redirection
@@ -31,5 +33,14 @@ module ActiveInsights
     def formatted_controller
       params[:formatted_controller].presence
     end
+
+    def fetch_rpm
+      return if formatted_controller.blank?
+
+      @rpm =
+        minutes.select("COUNT(id) AS rpm").map do |minute|
+          [minute.started_at.strftime("%-l:%M%P"), minute.rpm]
+        end
+    end
   end
 end

data/app/models/active_insights/request.rb

@@ -9,5 +9,9 @@ module ActiveInsights
                 :db_runtime
       ))
     end
+
+    def percentage(others)
+      (parsed_durations.sum / others.flat_map(&:parsed_durations).sum) * 100.0
+    end
   end
 end

data/app/views/active_insights/jobs/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 request metrics", active_insights.requests_path, class: "white mr-15px" %>
+    <%= link_to "View request metrics", active_insights.requests_path, class: "link calibre mr-15px" %>
 
     <%= form_with url: active_insights.jobs_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,27 +12,27 @@
 
 <div class="pl-30px pt-30px flex flex-row justify-around font-size-30">
   <% @jobs.flat_map(&:parsed_durations).tap do |durations| %>
-    <%= link_to jpm_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to jpm_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>JPM</b>
     <% end %>
 
-    <%= link_to jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to jobs_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 jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to jobs_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 jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to jobs_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 %>
 
-    <%= link_to jobs_latency_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
+    <%= link_to jobs_latency_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
       <div><%= @latency.to_f.round(1) %> ms</div>
       <b>Latency</b>
     <% end %>

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

@@ -2,26 +2,17 @@
   <h1>Job Latency for <%= display_date(@date.first) %> (in ms)</h1>
 
   <%= form_with url: active_insights.jobs_latency_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 @latencies, height: "80%", colors: ["#C00"], library: {
+  <%= column_chart @latencies, 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: (@latencies.map(&:second).min.to_f * 0.98).ceil, max: (@latencies.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: (@latencies.map(&:second).min.to_f * 0.98).ceil, max: (@latencies.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/active_insights/jobs_p_values/index.html.erb

@@ -1,32 +1,37 @@
 <header>
   <% if params[:job].present? %>
-    <h1><%= params[:job] %> metrics for <%= display_date(@date.first) %> (in ms)</h1>
+    <h1><%= params[:job] %> metrics for <%= display_date(@date.first) %></h1>
   <% else %>
     <h1>Job Metrics for <%= display_date(@date.first) %> (in ms)</h1>
   <% end %>
 
   <%= form_with url: active_insights.jobs_p_values_redirection_path, method: :get do |f| %>
     <%= f.hidden_field :job, value: params[:job] %>
-    <%= 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 @jpm %>
+  <div class="p-16px flex items-center">
+    <h1 class="red calibre text-center w-175px">JPM</h1>
+    <%= column_chart @jpm, 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: (@jpm.map(&:second).min.to_f * 0.98).ceil, max: (@jpm.map(&:second).max) }
+      } } %>
+  </div>
+<% end %>

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

@@ -1,26 +1,17 @@
 <header>
   <h1>JPM Metrics for <%= display_date(@date.first) %></h1>
   <%= form_with url: active_insights.jpm_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/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/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.1"
+  VERSION = "1.1.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeinsights
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.1
 platform: ruby
 authors:
 - Nick Pezza
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-27 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