activeinsights 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5f5b2bf3d3ddf98282ce8f6af1bf20c3031d4c6cb0c96aee19181a299c3188e
-  data.tar.gz: 9ba2322043de81074333f23d904d16db5f8e34eaecb550daf8181b4cddb5ff44
+  metadata.gz: e21f51380257d374bfb3f74d006a2123a722ca864bf1e369512fc9e4c6dda903
+  data.tar.gz: bbe3b3f8ce4ead3694eaa95b4ac6fde74dff9eea40cbd5ae26adc79bb690393b
 SHA512:
-  metadata.gz: b6cd3afb0ea5820a67b8b8ffd751b23a33a4d6562ef10d7bbfe42b9eea4ece0949b4be4bf4b1cc13cbd2a5287b31c90316562fb81108e202d3fda1c408571828
-  data.tar.gz: 3c8c39842143851332bd71bf98c6bbffa74d95c883b39f163756e5892f105505630cfa2a33ac137f4ac49b3a24d7a3d844728acc1b0a9eab53048dd17b6836a6
+  metadata.gz: 5508290b981d052175899002bd7cc9b7a4e3793d84ac01ced88a524fd25bf5442545607e28989c25fc9cf31c2c9e898cc1c9f73e92e4f6c811c332064f7649a1
+  data.tar.gz: 497aa561b86eb8b1fbc7f930dde745b009dafcb447f37339b8747c19a56888ebd0f60b433b3a8f2fe3f07317c588b52405a74feb00e9ab0ec6035f39433a4daf

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>