Enhance performance metrics and graph visualization

- Implement adaptive default window for performance data display based on recent events.
- Update performance metrics calculations to utilize dynamic timeframe settings.
- Introduce secondary series for average response time in graph visualizations.
- Modify action detail view to accommodate new graph data and improve UI layout.
- Refactor JavaScript controller to support additional data series in graphs.
- Ensure consistent labeling and data handling for improved user experience.

Author: alexshapalov

app/controllers/performance_controller.rb

@@ -13,7 +13,15 @@ def index
     if project_scope
       # Single project performance view
       @timeframe = params[:timeframe] || 'hour'
-      @hours_back = (params[:hours_back] || 24).to_i
+      # Adaptive default window so the page shows data by default
+      requested_hours = (params[:hours_back] || 24).to_i
+      @hours_back = requested_hours
+      unless PerformanceEvent.where(project: project_scope).where('occurred_at > ?', @hours_back.hours.ago).exists?
+        @hours_back = [@hours_back, 168].max # 7 days
+      end
+      unless PerformanceEvent.where(project: project_scope).where('occurred_at > ?', @hours_back.hours.ago).exists?
+        @hours_back = [@hours_back, 720].max # 30 days
+      end
 
       @rollups = project_scope.perf_rollups
                          .where(timeframe: @timeframe)
@@ -34,14 +42,14 @@ def index
                               .limit(20)
 
       # Calculate project-specific metrics
-      recent_rollups = project_scope.perf_rollups.where('timestamp > ?', 24.hours.ago)
-      raw_events_scope = PerformanceEvent.where(project: project_scope).where('occurred_at > ?', 24.hours.ago)
+      recent_rollups = project_scope.perf_rollups.where('timestamp > ?', @hours_back.hours.ago)
+      raw_events_scope = PerformanceEvent.where(project: project_scope).where('occurred_at > ?', @hours_back.hours.ago)
       slow_threshold_ms = 1000
 
       if recent_rollups.exists?
-        total_requests = recent_rollups.sum(:request_count)
-        total_errors = recent_rollups.sum(:error_count)
-        avg_response = recent_rollups.average(:avg_duration_ms)
+      total_requests = recent_rollups.sum(:request_count)
+      total_errors = recent_rollups.sum(:error_count)
+      avg_response = recent_rollups.average(:avg_duration_ms)
         slow_requests = raw_events_scope.where('duration_ms > ?', slow_threshold_ms).count
 
         @metrics = {
@@ -56,9 +64,9 @@ def index
         avg_response = raw_events_scope.average(:duration_ms)
         slow_requests = raw_events_scope.where('duration_ms > ?', slow_threshold_ms).count
 
-        @metrics = {
-          response_time: avg_response ? "#{avg_response.round(1)}ms" : "N/A",
-          throughput: "#{total_requests}/day",
+      @metrics = {
+        response_time: avg_response ? "#{avg_response.round(1)}ms" : "N/A",
+        throughput: "#{total_requests}/day",
           error_rate: total_requests > 0 ? "0.0%" : "0%",
           slow_requests: slow_requests
         }
@@ -192,9 +200,9 @@ def index
       @projects.each do |project|
         recent_rollups = project.perf_rollups.where('timestamp > ?', 24.hours.ago)
         if recent_rollups.exists?
-          avg_response = recent_rollups.average(:avg_duration_ms)
-          requests = recent_rollups.sum(:request_count)
-          errors = recent_rollups.sum(:error_count)
+        avg_response = recent_rollups.average(:avg_duration_ms)
+        requests = recent_rollups.sum(:request_count)
+        errors = recent_rollups.sum(:error_count)
           p95 = recent_rollups.average(:p95_duration_ms)
         else
           raw_events = PerformanceEvent.where(project: project).where('occurred_at > ?', 24.hours.ago)
@@ -332,21 +340,21 @@ def action_detail
         @rollups = synthetic.sort_by(&:timestamp)
       else
         # Calculate detailed metrics from rollups
-        @total_requests = @rollups.sum(:request_count)
-        @total_errors = @rollups.sum(:error_count)
-        @avg_response_time = @rollups.average(:avg_duration_ms)
-        @p50_response_time = @rollups.average(:p50_duration_ms)
-        @p95_response_time = @rollups.average(:p95_duration_ms)
-        @p99_response_time = @rollups.average(:p99_duration_ms)
-        @min_response_time = @rollups.minimum(:min_duration_ms)
-        @max_response_time = @rollups.maximum(:max_duration_ms)
-        @error_rate = @total_requests > 0 ? ((@total_errors.to_f / @total_requests) * 100).round(2) : 0
-
-        # Group by timeframe for charts
-        @hourly_data = @rollups.where('timestamp > ?', 24.hours.ago)
-                               .group_by { |r| r.timestamp.beginning_of_hour }
-
-        @daily_data = @rollups.group_by { |r| r.timestamp.beginning_of_day }
+      @total_requests = @rollups.sum(:request_count)
+      @total_errors = @rollups.sum(:error_count)
+      @avg_response_time = @rollups.average(:avg_duration_ms)
+      @p50_response_time = @rollups.average(:p50_duration_ms)
+      @p95_response_time = @rollups.average(:p95_duration_ms)
+      @p99_response_time = @rollups.average(:p99_duration_ms)
+      @min_response_time = @rollups.minimum(:min_duration_ms)
+      @max_response_time = @rollups.maximum(:max_duration_ms)
+      @error_rate = @total_requests > 0 ? ((@total_errors.to_f / @total_requests) * 100).round(2) : 0
+
+      # Group by timeframe for charts
+      @hourly_data = @rollups.where('timestamp > ?', 24.hours.ago)
+                             .group_by { |r| r.timestamp.beginning_of_hour }
+
+      @daily_data = @rollups.group_by { |r| r.timestamp.beginning_of_day }
       end
 
 
@@ -363,7 +371,7 @@ def action_detail
 
     # Graph data for this action
     if @current_tab == 'graph'
-      range_key = (params[:range] || '24H').to_s.upcase
+      range_key = (params[:range] || '7D').to_s.upcase
       window_seconds = case range_key
                        when '1H' then 1.hour
                        when '4H' then 4.hours
@@ -391,20 +399,29 @@ def action_detail
       counts = Array.new(bucket_count, 0)
       labels = Array.new(bucket_count) { |i| start_time + i * bucket_seconds }
 
-      event_times = PerformanceEvent.where(project: project_scope, target: @target)
-                                    .where('occurred_at >= ? AND occurred_at <= ?', start_time, end_time)
-                                    .pluck(:occurred_at)
-      event_times.each do |ts|
+      events = PerformanceEvent.where(project: project_scope, target: @target)
+                               .where('occurred_at >= ? AND occurred_at <= ?', start_time, end_time)
+                               .pluck(:occurred_at, :duration_ms)
+      sum_per_bucket = Array.new(bucket_count, 0.0)
+      count_per_bucket = Array.new(bucket_count, 0)
+      events.each do |ts, dur|
         idx = (((ts - start_time) / bucket_seconds).floor).to_i
         next if idx.negative? || idx >= bucket_count
         counts[idx] += 1
+        if dur
+          sum_per_bucket[idx] += dur.to_f
+          count_per_bucket[idx] += 1
+        end
       end
 
       @graph_labels = labels
       @graph_counts = counts
       @graph_max = [counts.max || 0, 1].max
       @graph_has_data = counts.sum > 0
       @graph_range_key = range_key
+
+      # Additional series: average response time per bucket (ms)
+      @graph_avg_ms = sum_per_bucket.each_with_index.map { |s, i| count_per_bucket[i] > 0 ? (s / count_per_bucket[i]).round(1) : 0 }
     end
 
     # AI summary generation on demand

app/javascript/controllers/graph_controller.js

@@ -5,24 +5,42 @@ export default class extends Controller {
   static values = {
     labels: Array,
     counts: Array,
-    range: String
+    range: String,
+    secondarySeries: Array,
+    secondarySeriesLabel: String
   }
 
   connect() {
     const ctx = this.element.getContext('2d')
     const data = {
       labels: this.labelsValue,
       datasets: [{
-        label: `Errors (${this.rangeValue})`,
+        label: `Events (${this.rangeValue})`,
         data: this.countsValue,
         backgroundColor: 'rgba(99, 102, 241, 0.7)',
         borderColor: 'rgba(99, 102, 241, 1)',
         borderWidth: 1,
         borderRadius: 3,
         barPercentage: 0.95,
         categoryPercentage: 0.95,
+        yAxisID: 'y',
       }]
     }
+
+    // Optional secondary line series (e.g., Avg ms)
+    if (this.hasSecondarySeriesValue && Array.isArray(this.secondarySeriesValue) && this.secondarySeriesValue.length) {
+      data.datasets.push({
+        type: 'line',
+        label: this.secondarySeriesLabelValue || 'Avg',
+        data: this.secondarySeriesValue,
+        borderColor: 'rgba(16, 185, 129, 1)',
+        backgroundColor: 'rgba(16, 185, 129, 0.2)',
+        borderWidth: 2,
+        tension: 0.3,
+        yAxisID: 'y1',
+        pointRadius: 0,
+      })
+    }
     const options = {
       responsive: true,
       maintainAspectRatio: false,
@@ -31,7 +49,10 @@ export default class extends Controller {
         tooltip: {
           callbacks: {
             title: (items) => items[0]?.label || '',
-            label: (item) => `Count: ${item.parsed.y}`
+            label: (item) => {
+              const dsLabel = item.dataset.label || 'Value'
+              return `${dsLabel}: ${item.parsed.y}`
+            }
           }
         }
       },
@@ -44,6 +65,12 @@ export default class extends Controller {
           beginAtZero: true,
           ticks: { color: '#6b7280', stepSize: Math.max(1, Math.ceil(Math.max(...this.countsValue) / 4)) },
           grid: { color: '#f3f4f6' }
+        },
+        y1: {
+          position: 'right',
+          beginAtZero: true,
+          ticks: { color: '#10b981' },
+          grid: { drawOnChartArea: false }
         }
       }
     }

app/views/performance/action_detail.html.erb

@@ -102,10 +102,12 @@
 
     <% if @graph_counts.present? && @graph_has_data %>
       <% labels = (@graph_labels || []).map { |t| case @graph_range_key; when '1H','4H','8H','12H','24H','48H' then t.strftime('%H:%M'); else t.strftime('%b %d'); end } %>
-      <div class="relative" style="height: 300px;">
+      <div class="relative" style="height: 320px;">
         <canvas data-controller="graph"
                 data-graph-labels-value='<%= labels.to_json %>'
                 data-graph-counts-value='<%= @graph_counts.to_json %>'
+                data-graph-secondary-series-label-value='Avg ms'
+                data-graph-secondary-series-value='<%= (@graph_avg_ms || []).to_json %>'
                 data-graph-range-value='<%= @graph_range_key %>'></canvas>
       </div>
     <% else %>
@@ -266,7 +268,7 @@
               <div class="text-sm font-medium text-gray-900 mb-2">Context</div>
               <pre class="bg-gray-50 rounded p-4 text-sm overflow-x-auto"><%= JSON.pretty_generate(ctx) rescue ctx.inspect %></pre>
             </div>
-          <% else %>
+      <% else %>
             <div class="px-2 py-10 text-center text-gray-500">Select a sample to view details</div>
           <% end %>
         </div>
@@ -294,15 +296,15 @@
                     </div>
                   <% end %>
                 </li>
-              <% end %>
+      <% end %>
             </ul>
           </div>
         </div>
       </div>
     <% else %>
       <div class="px-6 py-10 text-center text-gray-500">No samples yet</div>
     <% end %>
-  </div>
+</div>
 
 <% else %>
 <!-- Key Metrics -->

app/views/performance/index.html.erb

@@ -133,11 +133,11 @@
         <tbody class="bg-white divide-y divide-gray-200">
           <% @list_rows.each do |perf_issue| %>
             <% row_link = if @current_project
-                            project_slug_performance_issue_path(@current_project.slug, id: (@list_rows.index(perf_issue) + 1))
+                            project_slug_performance_action_detail_path(@current_project.slug, target: perf_issue[:action])
                           elsif @project
-                            project_performance_issue_path(@project, id: (@list_rows.index(perf_issue) + 1))
+                            project_performance_action_detail_path(@project, target: perf_issue[:action])
                           else
-                            performance_issue_path(id: (@list_rows.index(perf_issue) + 1))
+                            performance_action_detail_path(target: perf_issue[:action])
                           end %>
             <tr class="hover:bg-gray-50 transition-colors">
               <td class="px-6 py-4">