Multi-line Line Graph for Metrics table + swatch checkbox hide/show b…

…ehavior

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 
 gem "glimmer-dsl-libui", "= 0.11.7"
-gem "glimmer-libui-cc-graphs_and_charts", "= 0.1.2"
+gem "glimmer-libui-cc-graphs_and_charts", "= 0.1.4"
 gem "sidekiq"
 
 group :test do

Gemfile.lock

@@ -27,7 +27,7 @@ GEM
       rouge (>= 3.26.0, < 4.0.0)
       super_module (~> 1.4.1)
       text-table (>= 1.2.4, < 2.0.0)
-    glimmer-libui-cc-graphs_and_charts (0.1.2)
+    glimmer-libui-cc-graphs_and_charts (0.1.4)
       glimmer-dsl-libui (~> 0.11)
     json (2.7.1)
     language_server-protocol (3.17.0.3)
@@ -119,7 +119,7 @@ PLATFORMS
 
 DEPENDENCIES
   glimmer-dsl-libui (= 0.11.7)
-  glimmer-libui-cc-graphs_and_charts (= 0.1.2)
+  glimmer-libui-cc-graphs_and_charts (= 0.1.4)
   minitest
   rake
   sidekiq

lib/kuiq/model/class_metric.rb

@@ -29,7 +29,7 @@ def initialize(klass, results)
         @results = results
         # we need to store data in a triad to match what libui expects of
         # table data in a 3-value checkbox text color column
-        @swatch_name_color = [false, klass, ClassMetric.next_swatch_color]
+        @swatch_name_color = [true, klass, ClassMetric.next_swatch_color]
       end
 
       def success = rounded_number(results.dig("totals", "p") - results.dig("totals", "f"))
@@ -51,11 +51,6 @@ def name
       def swatch_color
         swatch_name_color[2]
       end
-
-      def update_from(class_metric)
-        swatch_name_color[0] = class_metric.swatch
-        swatch_name_color[2] = class_metric.swatch_color
-      end
 
       private
 

lib/kuiq/model/job_manager.rb

@@ -75,23 +75,16 @@ def queues
       end
 
       def metrics
-        query = Sidekiq::Metrics::Query.new
-        query_result = query.top_jobs(minutes: 60)
-        job_results = query_result.job_results
-        sorted_job_results = job_results.sort_by { |_, results| -results.totals["s"] }.take(30)
-        new_class_metrics = sorted_job_results.map { |klass, results| Kuiq::Model::ClassMetric.new(klass, results) }
         if @metrics.nil?
-          @metrics = new_class_metrics
-        else
-          new_class_metrics.each do |new_class_metric|
-            old_class_metric = @metrics.find { |class_metric| class_metric.name == new_class_metric.name }
-            new_class_metric.update_from(old_class_metric)
-          end
-          @metrics = new_class_metrics
+          query = Sidekiq::Metrics::Query.new
+          query_result = query.top_jobs(minutes: 60)
+          job_results = query_result.job_results
+          sorted_job_results = job_results.sort_by { |_, results| -results.totals["s"] }.take(30)
+          @metrics = sorted_job_results.map { |klass, results| Kuiq::Model::ClassMetric.new(klass, results) }
         end
         @metrics
       end
-
+      
       def retried_jobs
         # Data will get lazy loaded into the table as the user scrolls through.
         # After data is built, it is cached long-term, till updating table `cell_rows`.

lib/kuiq/model/metrics_graph_presenter.rb

@@ -0,0 +1,49 @@
+require "date"
+
+require "kuiq/model/job_manager"
+
+module Kuiq
+  module Model
+    class MetricsGraphPresenter
+      attr_reader :job_manager
+      attr_accessor :graph_width, :graph_height
+
+      def initialize(job_manager, graph_width, graph_height)
+        @job_manager = job_manager
+        @graph_width = graph_width
+        @graph_height = graph_height
+      end
+
+      def report_graph_lines
+        job_manager.metrics.select(&:swatch).map(&method(:report_graph_line))
+      end
+
+      def report_graph_line(class_metric)
+        reported_graph_lines = {
+          name: class_metric.name,
+          stroke: [*class_metric.swatch_color, thickness: 2],
+          y_values: [],
+        }
+        series = class_metric.results.series["s"]
+        return reported_graph_lines if series.size <= 1
+        first_raw_time = first_time = nil
+        series.each_with_index do |time_value_pair, n|
+          time, value = time_value_pair
+          raw_time = DateTime.strptime(time, '%H:%M').to_time
+          if n == 0
+            first_time = time
+            first_raw_time = raw_time
+            reported_graph_lines[:x_value_start] = raw_time
+            next
+          end
+          if n == 1
+            reported_graph_lines[:x_interval_in_seconds] = first_raw_time - raw_time
+          end
+          y_value = value
+          reported_graph_lines[:y_values] << y_value
+        end
+        reported_graph_lines
+      end
+    end
+  end
+end

lib/kuiq/view/dashboard_graph.rb

@@ -91,8 +91,8 @@ def graph_width
       end
 
       def graph_height
-        current_window_width = body_root&.window_proxy&.content_size&.last || WINDOW_HEIGHT
-        current_window_width - 360
+        current_window_height = body_root&.window_proxy&.content_size&.last || WINDOW_HEIGHT
+        current_window_height - 360
       end
 
       def report_graph_lines

lib/kuiq/view/metrics.rb

@@ -1,3 +1,5 @@
+require "kuiq/model/metrics_graph_presenter"
+
 require "kuiq/view/stat_row"
 require "kuiq/view/footer"
 
@@ -7,6 +9,25 @@ class Metrics
       include Glimmer::LibUI::CustomControl
 
       option :job_manager
+
+      before_body do
+        @presenter = Model::MetricsGraphPresenter.new(job_manager, graph_width, graph_height)
+      end
+
+      after_body do
+        body_root.window_proxy.content {
+          on_content_size_changed do
+            @metrics_line_graph.width = @presenter.graph_width = graph_width
+            @metrics_line_graph.height = @presenter.graph_height = graph_height
+          end
+        }
+        class_metric_observer = Glimmer::DataBinding::Observer.proc do
+          @metrics_line_graph.lines = @presenter.report_graph_lines
+        end
+        job_manager.metrics.each do |class_metric|
+          class_metric_observer.observe(class_metric.swatch_name_color, recursive: true)
+        end
+      end
 
       body {
         vertical_box {
@@ -16,25 +37,35 @@ class Metrics
 
           group(t("Metrics")) {
             margined false
-
-            table {
-              checkbox_text_color_column(t("Name")) {
-                editable_checkbox true
+
+            vertical_box {
+              @metrics_line_graph = line_graph(
+                width: @presenter.graph_width,
+                height: @presenter.graph_height,
+                lines: @presenter.report_graph_lines,
+                graph_point_distance: :width_divided_by_point_count,
+              )
+
+              table {
+                checkbox_text_color_column(t("Name")) {
+                  editable_checkbox true
+                }
+                text_column(t("Success"))
+                text_column(t("Failure"))
+                text_column(t("TotalExecutionTime"))
+                text_column(t("AvgExecutionTime"))
+
+                cell_rows <= [job_manager, :metrics,
+                  column_attributes: {
+                    t("Name") => :swatch_name_color,
+                    t("Success") => :success,
+                    t("Failure") => :failure,
+                    t("TotalExecutionTime") => :tet,
+                    t("AvgExecutionTime") => :aet,
+                  }]
               }
-              text_column(t("Success"))
-              text_column(t("Failure"))
-              text_column(t("TotalExecutionTime"))
-              text_column(t("AvgExecutionTime"))
-
-              cell_rows <= [job_manager, :metrics,
-                column_attributes: {
-                  t("Name") => :swatch_name_color,
-                  t("Success") => :success,
-                  t("Failure") => :failure,
-                  t("TotalExecutionTime") => :tet,
-                  t("AvgExecutionTime") => :aet,
-                }]
             }
+
           }
 
           horizontal_separator {
@@ -46,6 +77,17 @@ class Metrics
           }
         }
       }
+
+      def graph_width
+        current_window_width = body_root&.window_proxy&.content_size&.first || WINDOW_WIDTH
+        current_window_width - 15
+      end
+
+      def graph_height
+        current_window_height = body_root&.window_proxy&.content_size&.last || WINDOW_HEIGHT
+        (current_window_height - 160)/2.0 - 5
+      end
+
     end
   end
 end