Sparklines with ajax and rubocop clean

app/assets/stylesheets/errbit.css.erb

@@ -746,6 +746,31 @@ table.tally th.value {
   text-transform: none;
 }
 
+/* Sparklines */
+
+#sparkline-placeholder {
+  display: none;
+}
+
+.spark {
+  position: relative;
+  border: 1px solid #ddd;
+  float: left;
+  padding: 1px;
+  margin: 0;
+  height: 30px;
+}
+
+.spark > i {
+  display: inline-block;
+  position: relative;
+  width: 10px;
+  background: black;
+  margin: 0;
+  padding: 0;
+  vertical-align: bottom;
+}
+
 /* Resolve Errs */
 #action-bar .resolve:before {
   font-family: FontAwesome;

app/controllers/problems_controller.rb

@@ -1,3 +1,5 @@
+require 'sparklines'
+
 class ProblemsController < ApplicationController
   include ProblemsSearcher
 
@@ -46,6 +48,10 @@ def show
     @comment = Comment.new
   end
 
+  def xhr_sparkline
+    render partial: 'problems/sparkline', layout: false
+  end
+
   def close_issue
     issue = Issue.new(problem: problem, user: current_user)
     flash[:error] = issue.errors.full_messages.join(', ') unless issue.close

app/models/problem.rb

@@ -207,10 +207,54 @@ def unmerge!
 
     # recache each new problem
     new_problems.each(&:recache)
-
     new_problems
   end
 
+  def grouped_notice_counts(since, group_by = 'day')
+    key_op = [['year', '$year'], ['day', '$dayOfYear'], ['hour', '$hour']]
+    key_op = key_op.take(1 + key_op.find_index { |key, _op| group_by == key })
+    project_date_fields = Hash[*key_op.collect { |key, op| [key, { op => "$created_at" }] }.flatten]
+    group_id_fields = Hash[*key_op.collect { |key, _op| [key, "$#{key}"] }.flatten]
+    pipeline = [
+      {
+        "$match" => {
+          "err_id"     => { '$in' => errs.map(&:id) },
+          "created_at" => { "$gt" => since }
+        }
+      },
+      { "$project" => project_date_fields },
+      { "$group" => { "_id" => group_id_fields, "count" => { "$sum" => 1 } } },
+      { "$sort" => { "_id" => 1 } }
+    ]
+    Notice.collection.aggregate(pipeline).find.to_a
+  end
+
+  def zero_filled_grouped_noticed_counts(since, group_by = 'day')
+    non_zero_filled = grouped_notice_counts(since, group_by)
+    buckets = group_by == 'day' ? 14 : 24
+
+    ruby_time_method = group_by == 'day' ? :yday : :hour
+    # rubocop:disable Performance/TimesMap
+    bucket_times = buckets.times.map { |ii| (since + ii.send(group_by)).send(ruby_time_method) }
+    # rubocop:enable Performance/TimesMap
+    bucket_times.to_a.map do |bucket_time|
+      count = if (data_for_day = non_zero_filled.detect { |item| item.dig('_id', group_by) == bucket_time })
+                data_for_day['count']
+              else
+                0
+              end
+      { bucket_time => count }
+    end
+  end
+
+  def grouped_notice_count_relative_percentages(since, group_by = 'day')
+    zero_filled = zero_filled_grouped_noticed_counts(since, group_by).map { |h| h.values.first }
+    max = zero_filled.max
+    zero_filled.map do |number|
+      max.zero? ? 0 : number.to_f / max.to_f * 100.0
+    end
+  end
+
   def self.ordered_by(sort, order)
     case sort
     when "app"            then order_by(["app_name", order])

app/views/notices/_summary.html.haml

@@ -19,6 +19,7 @@
     %tr
       %th= t('.similar')
       %td= problem.notices_count - 1
+    %tr#sparkline-placeholder
     %tr
       %th= t('.browser')
       %td= user_agent_graph(problem)
@@ -41,3 +42,7 @@
       %th= t('.relative_directory')
       %td= notice.server_environment && notice.server_environment["project-root"]
 
+:javascript
+  $.ajax({url: '/apps/#{notice.app.id}/problems/#{problem.id}/xhr_sparkline'}).then(function(resp) {
+    $("#sparkline-placeholder").replaceWith(resp);
+  });

app/views/problems/_sparkline.html.haml

@@ -0,0 +1,9 @@
+= now = Time.current
+%tr
+  - two_week_percentages = problem.grouped_notice_count_relative_percentages((now - 13.days).at_beginning_of_day)
+  - twenty_four_hour_percentages = problem.grouped_notice_count_relative_percentages((now - 23.hours).at_beginning_of_hour)
+  %th= t('.graph-2-weeks')
+  %td= Sparklines.for_relative_percentages(two_week_percentages)
+%tr
+  %th= t('.graph (24 hours)')
+  %td= Sparklines.for_relative_percentages(twenty_four_hour_percentages)

config/locales/en.yml

@@ -254,6 +254,8 @@ en:
       similar: Similar
       browser: Browser
       tenant: Origin
+      graph-2-weeks: Graph (2 weeks)
+      graph-24-hours: Graph (24 hours)
       app_server: App Server
       app_version: App Version
       framework: Framework

config/routes.rb

@@ -40,6 +40,7 @@
       end
 
       member do
+        get :xhr_sparkline
         put :resolve
         put :unresolve
         post :create_issue

lib/sparklines.rb

@@ -0,0 +1,10 @@
+module Sparklines
+  class << self
+    def for_relative_percentages(array_of_relative_percentages)
+      bars = array_of_relative_percentages.map do |percent|
+        "<i style='height:#{percent}%'></i>"
+      end.join
+      "<div class='spark'>#{bars}</div>".html_safe
+    end
+  end
+end

spec/controllers/problems_controller_spec.rb

@@ -173,6 +173,17 @@
     end
   end
 
+  describe "GET /apps/:app_id/problems/:id/xhr_sparkline" do
+    before do
+      sign_in user
+    end
+
+    it "renders without error" do
+      get :xhr_sparkline, app_id: app.id, id: err.problem.id
+      expect(response).to be_success
+    end
+  end
+
   describe "PUT /apps/:app_id/problems/:id/resolve" do
     before do
       sign_in user

spec/lib/sparklines_spec.rb

@@ -0,0 +1,16 @@
+describe Sparklines do
+  it 'includes each percentage and adds a percent sign' do
+    percentages = [33, 75, 100]
+    sparklines_html = Sparklines.for_relative_percentages(percentages)
+    percentages.each do |percentage|
+      expect(sparklines_html).to include("#{percentage}%")
+    end
+  end
+
+  it 'has the right number of i tags' do
+    percentages = [75, 100]
+    sparklines_html = Sparklines.for_relative_percentages(percentages)
+    number_of_i_tags = sparklines_html.scan(/<i/).size
+    expect(number_of_i_tags).to eq(2)
+  end
+end

spec/models/problem_spec.rb

@@ -1,3 +1,4 @@
+# rubocop:disable Metrics/BlockLength
 describe Problem, type: 'model' do
   context 'validations' do
     it 'requires an environment' do
@@ -215,6 +216,62 @@
     end
   end
 
+  context "sparklines-related methods" do
+    before do
+      @app = Fabricate(:app)
+      @problem = Fabricate(:problem, app: @app)
+      @err = Fabricate(:err, problem: @problem)
+    end
+
+    it "gets correct notice counts when grouping by day" do
+      now = Time.current
+      two_weeks_ago = 13.days.ago
+      Fabricate(:notice, err: @err, message: 'ERR 1')
+      Fabricate(:notice, err: @err, message: 'ERR 2', created_at: 3.days.ago)
+      Fabricate(:notice, err: @err, message: 'ERR 3', created_at: 3.days.ago)
+      three_days_ago_yday = (now - 3.days).yday
+      three_days_ago = @problem.grouped_notice_counts(two_weeks_ago, 'day').detect { |grouping| grouping['_id']['day'] == three_days_ago_yday }
+      expect(three_days_ago['count']).to eq(2)
+      count_by_day_for_last_two_weeks = @problem.zero_filled_grouped_noticed_counts(two_weeks_ago, 'day').map { |h| h.values.first }
+      expect(count_by_day_for_last_two_weeks.size).to eq(14)
+      expect(count_by_day_for_last_two_weeks).to eq([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 1])
+    end
+
+    it "gets correct notice counts when grouping by hour" do
+      twenty_four_hours_ago = 23.hours.ago
+      Fabricate(:notice, err: @err, message: 'ERR 1')
+      Fabricate(:notice, err: @err, message: 'ERR 2', created_at: 3.hours.ago)
+      Fabricate(:notice, err: @err, message: 'ERR 3', created_at: 3.hours.ago)
+      count_by_hour_for_last_24_hours = @problem.zero_filled_grouped_noticed_counts(twenty_four_hours_ago, 'hour').map { |h| h.values.first }
+      expect(count_by_hour_for_last_24_hours.size).to eq(24)
+      expect(count_by_hour_for_last_24_hours).to eq(([0] * 20) + [2, 0, 0, 1])
+    end
+
+    it "gets correct relative percentages when grouping by hour" do
+      two_weeks_ago = 13.days.ago
+      Fabricate(:notice, err: @err, message: 'ERR 1')
+      Fabricate(:notice, err: @err, message: 'ERR 2', created_at: 3.days.ago)
+      Fabricate(:notice, err: @err, message: 'ERR 3', created_at: 3.days.ago)
+      relative_percentages = @problem.grouped_notice_count_relative_percentages(two_weeks_ago, 'day')
+      expect(relative_percentages).to eq(([0] * 10) + [100, 0, 0, 50])
+    end
+
+    it "gets correct relative percentages when grouping by hour" do
+      twenty_four_hours_ago = 23.hours.ago
+      Fabricate(:notice, err: @err, message: 'ERR 1')
+      Fabricate(:notice, err: @err, message: 'ERR 2', created_at: 3.hours.ago)
+      Fabricate(:notice, err: @err, message: 'ERR 3', created_at: 3.hours.ago)
+      relative_percentages = @problem.grouped_notice_count_relative_percentages(twenty_four_hours_ago, 'hour')
+      expect(relative_percentages).to eq(([0] * 20) + [100, 0, 0, 50])
+    end
+
+    it "gets correct relative percentages when all zeros for data" do
+      two_weeks_ago = 13.days.ago
+      relative_percentages = @problem.grouped_notice_count_relative_percentages(two_weeks_ago, 'day')
+      expect(relative_percentages).to eq(([0] * 14))
+    end
+  end
+
   context "#app_name" do
     let!(:app) { Fabricate(:app) }
     let!(:problem) { Fabricate(:problem, app: app) }
@@ -498,3 +555,4 @@
     end
   end
 end
+# rubocop:enable Metrics/BlockLength