rails_pulse 0.1.0 → 0.1.2

data/app/controllers/rails_pulse/requests_controller.rb

@@ -5,6 +5,13 @@ module RailsPulse
     before_action :set_request, only: :show
 
     def index
+      unless turbo_frame_request?
+        @average_response_times_metric_card = RailsPulse::Routes::Cards::AverageResponseTimes.new(route: nil).to_metric_card
+        @percentile_response_times_metric_card = RailsPulse::Routes::Cards::PercentileResponseTimes.new(route: nil).to_metric_card
+        @request_count_totals_metric_card = RailsPulse::Routes::Cards::RequestCountTotals.new(route: nil).to_metric_card
+        @error_rate_per_route_metric_card = RailsPulse::Routes::Cards::ErrorRatePerRoute.new(route: nil).to_metric_card
+      end
+
       setup_chart_and_table_data
     end
 
@@ -15,7 +22,7 @@ module RailsPulse
     private
 
     def chart_model
-      Request
+      Summary
     end
 
     def table_model
@@ -27,23 +34,27 @@ module RailsPulse
     end
 
     def chart_options
-      { route: true }
+      {}
     end
 
     def build_chart_ransack_params(ransack_params)
-      ransack_params.except(:s).merge(
-        occurred_at_gteq: @start_time,
-        occurred_at_lt: @end_time,
-        duration_gteq: @start_duration
+      base_params = ransack_params.except(:s).merge(
+        period_start_gteq: Time.at(@start_time),
+        period_start_lt: Time.at(@end_time)
       )
+
+      # Only add duration filter if we have a meaningful threshold
+      base_params[:avg_duration_gteq] = @start_duration if @start_duration && @start_duration > 0
+      base_params
     end
 
     def build_table_ransack_params(ransack_params)
-      ransack_params.merge(
-        occurred_at_gteq: @table_start_time,
-        occurred_at_lt: @table_end_time,
-        duration_gteq: @start_duration
+      params = ransack_params.merge(
+        occurred_at_gteq: Time.at(@table_start_time),
+        occurred_at_lt: Time.at(@table_end_time)
       )
+      params[:duration_gteq] = @start_duration if @start_duration && @start_duration > 0
+      params
     end
 
     def default_table_sort
@@ -52,13 +63,14 @@ module RailsPulse
 
     def build_table_results
       @ransack_query.result
-        .includes(:route)
+        .joins(:route)
         .select(
           "rails_pulse_requests.id",
           "rails_pulse_requests.occurred_at",
           "rails_pulse_requests.duration",
           "rails_pulse_requests.status",
-          "rails_pulse_requests.route_id"
+          "rails_pulse_requests.route_id",
+          "rails_pulse_routes.path"
         )
     end
 

data/app/controllers/rails_pulse/routes_controller.rb

@@ -5,21 +5,32 @@ module RailsPulse
     before_action :set_route, only: :show
 
     def index
+      setup_metric_cards
       setup_chart_and_table_data
     end
 
     def show
+      setup_metric_cards
       setup_chart_and_table_data
     end
 
     private
 
+    def setup_metric_cards
+      return if turbo_frame_request?
+
+      @average_query_times_metric_card = RailsPulse::Routes::Cards::AverageResponseTimes.new(route: @route).to_metric_card
+      @percentile_response_times_metric_card = RailsPulse::Routes::Cards::PercentileResponseTimes.new(route: @route).to_metric_card
+      @request_count_totals_metric_card = RailsPulse::Routes::Cards::RequestCountTotals.new(route: @route).to_metric_card
+      @error_rate_per_route_metric_card = RailsPulse::Routes::Cards::ErrorRatePerRoute.new(route: @route).to_metric_card
+    end
+
     def chart_model
-      show_action? ? Request : Route
+      Summary
     end
 
     def table_model
-      show_action? ? Request : Route
+      show_action? ? Request : Summary
     end
 
     def chart_class
@@ -31,49 +42,53 @@ module RailsPulse
     end
 
     def build_chart_ransack_params(ransack_params)
-      base_params = ransack_params.except(:s).merge(duration_field => @start_duration)
+      base_params = ransack_params.except(:s).merge(
+        period_start_gteq: Time.at(@start_time),
+        period_start_lt: Time.at(@end_time)
+      )
+
+      # Only add duration filter if we have a meaningful threshold
+      base_params[:avg_duration_gteq] = @start_duration if @start_duration && @start_duration > 0
 
       if show_action?
-        base_params.merge(
-          route_id_eq: @route.id,
-          occurred_at_gteq: @start_time,
-          occurred_at_lt: @end_time
-        )
+        base_params.merge(summarizable_id_eq: @route.id)
       else
-        base_params.merge(
-          requests_occurred_at_gteq: @start_time,
-          requests_occurred_at_lt: @end_time
-        )
+        base_params
       end
     end
 
     def build_table_ransack_params(ransack_params)
-      base_params = ransack_params.merge(duration_field => @start_duration)
-
       if show_action?
-        base_params.merge(
-          route_id_eq: @route.id,
-          occurred_at_gteq: @table_start_time,
-          occurred_at_lt: @table_end_time
+        # For Request model on show page
+        params = ransack_params.merge(
+          occurred_at_gteq: Time.at(@table_start_time),
+          occurred_at_lt: Time.at(@table_end_time),
+          route_id_eq: @route.id
         )
+        params[:duration_gteq] = @start_duration if @start_duration && @start_duration > 0
+        params
       else
-        base_params.merge(
-          requests_occurred_at_gteq: @table_start_time,
-          requests_occurred_at_lt: @table_end_time
+        # For Summary model on index page
+        params = ransack_params.merge(
+          period_start_gteq: Time.at(@table_start_time),
+          period_start_lt: Time.at(@table_end_time)
         )
+        params[:avg_duration_gteq] = @start_duration if @start_duration && @start_duration > 0
+        params
       end
     end
 
     def default_table_sort
-      show_action? ? "occurred_at desc" : "average_response_time_ms desc"
+      show_action? ? "occurred_at desc" : "avg_duration desc"
     end
 
     def build_table_results
       if show_action?
-        @ransack_query.result.select("id", "route_id", "occurred_at", "duration", "status")
+        @ransack_query.result
       else
         Routes::Tables::Index.new(
           ransack_query: @ransack_query,
+          period_type: period_type,
           start_time: @start_time,
           params: params
         ).to_table
@@ -81,13 +96,33 @@ module RailsPulse
     end
 
     def duration_field
-      show_action? ? :duration_gteq : :requests_duration_gteq
+      :avg_duration
     end
 
     def show_action?
       action_name == "show"
     end
 
+    def setup_table_data(ransack_params)
+      table_ransack_params = build_table_ransack_params(ransack_params)
+      @ransack_query = table_model.ransack(table_ransack_params)
+
+      # Only apply default sort if not using Routes::Tables::Index (which handles its own sorting)
+      if show_action?
+        @ransack_query.sorts = default_table_sort if @ransack_query.sorts.empty?
+      end
+
+      table_results = build_table_results
+      handle_pagination
+
+      @pagy, @table_data = pagy(table_results, limit: session_pagination_limit)
+    end
+
+    def handle_pagination
+      method = pagination_method
+      send(method, params[:limit]) if params[:limit].present?
+    end
+
     def pagination_method
       show_action? ? :set_pagination_limit : :store_pagination_limit
     end

data/app/helpers/rails_pulse/application_helper.rb

@@ -3,7 +3,6 @@ module RailsPulse
     include Pagy::Frontend
 
     include BreadcrumbsHelper
-    include CachedComponentHelper
     include ChartHelper
     include FormattingHelper
     include StatusHelper

data/app/helpers/rails_pulse/chart_formatters.rb

@@ -1,6 +1,6 @@
 module RailsPulse
   module ChartFormatters
-    def self.occurred_at_as_time_or_date(time_diff_hours)
+    def self.period_as_time_or_date(time_diff_hours)
       if time_diff_hours <= 25
         <<~JS
           function(value) {
@@ -25,7 +25,7 @@ module RailsPulse
             const data = params[0];
             const date = new Date(data.axisValue * 1000);
             const dateString = date.getHours().toString().padStart(2, '0') + ':00';
-            return `${dateString} <br /> ${data.marker} ${parseInt(data.data.value)} ms`;
+            return `${dateString} <br /> ${data.marker} ${parseInt(data.data)} ms`;
           }
         JS
       else
@@ -34,7 +34,7 @@ module RailsPulse
             const data = params[0];
             const date = new Date(data.axisValue * 1000);
             const dateString = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-            return `${dateString} <br /> ${data.marker} ${parseInt(data.data.value)} ms`;
+            return `${dateString} <br /> ${data.marker} ${parseInt(data.data)} ms`;
           }
         JS
       end

data/app/helpers/rails_pulse/chart_helper.rb

@@ -117,9 +117,13 @@ module RailsPulse
         # Chart data is a hash like: { 1234567890 => { value: 123.45 } }
         chart_timestamps = chart_data.keys
 
+        # Convert zoom parameters to integers (timestamps)
+        zoom_start_int = zoom_start.respond_to?(:to_i) ? zoom_start.to_i : zoom_start
+        zoom_end_int = zoom_end.respond_to?(:to_i) ? zoom_end.to_i : zoom_end
+
         if chart_timestamps.any?
-          closest_start = chart_timestamps.min_by { |ts| (ts - zoom_start).abs }
-          closest_end = chart_timestamps.min_by { |ts| (ts - zoom_end).abs }
+          closest_start = chart_timestamps.min_by { |ts| (ts - zoom_start_int).abs }
+          closest_end = chart_timestamps.min_by { |ts| (ts - zoom_end_int).abs }
 
           # Find the array indices of these timestamps
           start_index = chart_timestamps.index(closest_start)

data/app/helpers/rails_pulse/status_helper.rb

@@ -256,13 +256,19 @@ module RailsPulse
 
     def event_color(operation_type)
       case operation_type
-      when "sql" then "#92c282;"
-      when "template", "partial", "layout", "collection" then "#b77cbf"
-      when "controller" then "#00adc4"
-      else "gray"
+      when "sql"
+        "#d27d6b"
+      when "template", "partial", "layout", "collection"
+        "#6c7ab9"
+      when "controller"
+        "#5ba6b0"
+      else
+        "#a6a6a6"
       end
     end
 
+
+
     def duration_options(type = :route)
       thresholds = RailsPulse.configuration.public_send("#{type}_thresholds")
 

data/app/javascript/rails_pulse/controllers/index_controller.js

@@ -1,69 +1,108 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["chart", "paginationLimit", "indexTable"] // The chart element to be monitored
+  static targets = ["chart", "paginationLimit", "indexTable"]
 
   static values = {
     chartId: String        // The ID of the chart to be monitored
   }
 
-  // Add a property to track the last request time
+  // Add properties for improved debouncing
   lastTurboFrameRequestAt = 0;
+  pendingRequestTimeout = null;
+  pendingRequestData = null;
 
   connect() {
     // Listen for the custom event 'chart:initialized' to set up the chart.
     // This event is sent from the RailsCharts library when the chart is ready.
     this.handleChartInitialized = this.onChartInitialized.bind(this);
-    document.addEventListener('chart:initialized', this.handleChartInitialized);
+
+    document.addEventListener('chart:rendered', this.handleChartInitialized);
 
     // If the chart is already initialized (e.g., on back navigation), set up immediately
-    if (window.RailsCharts?.charts?.[this.chartIdValue]) { this.setup(); }
+    if (window.RailsCharts?.charts?.[this.chartIdValue]) {
+      this.setup();
+    }
   }
 
   disconnect() {
     // Remove the event listener from RailsCharts when the controller is disconnected
-    document.removeEventListener('chart:initialized', this.handleChartInitialized);
+    document.removeEventListener('chart:rendered', this.handleChartInitialized);
 
     // Remove chart event listeners if they exist
-    if (this.chartTarget) {
+    if (this.hasChartTarget && this.chartTarget) {
       this.chartTarget.removeEventListener('mousedown', this.handleChartMouseDown);
       this.chartTarget.removeEventListener('mouseup', this.handleChartMouseUp);
     }
     document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+
+    // Clear any pending timeout
+    if (this.pendingRequestTimeout) {
+      clearTimeout(this.pendingRequestTimeout);
+    }
   }
 
   // After the chart is initialized, set up the event listeners and data tracking
   onChartInitialized(event) {
-    if (event.detail.chartId === this.chartIdValue) { this.setup(); }
+    if (event.detail.containerId === this.chartIdValue) {
+      this.setup();
+    }
   }
 
   setup() {
-    if (this.setupDone) return; // Prevent multiple setups
+    if (this.setupDone) {
+      return; // Prevent multiple setups
+    }
 
+    // We need both the chart target in DOM and the chart object from RailsCharts
+    let hasTarget = false;
+    try {
+      hasTarget = !!this.chartTarget;
+    } catch (e) {
+      hasTarget = false;
+    }
+    
     // Get the chart element which the RailsCharts library has created
     this.chart = window.RailsCharts.charts[this.chartIdValue];
-    if (!this.chart) return;
+    
+    // Only proceed if we have BOTH the DOM target and the chart object
+    if (!hasTarget || !this.chart) {
+      return;
+    }
 
     this.visibleData = this.getVisibleData();
     this.setupChartEventListeners();
     this.setupDone = true;
+
+    // Mark the chart as fully rendered for testing
+    if (hasTarget) {
+      document.getElementById(this.chartIdValue)?.setAttribute('data-chart-rendered', 'true');
+    }
   }
 
   // Add some event listeners to the chart so we can track the zoom changes
   setupChartEventListeners() {
     // When clicking on the chart, we want to store the current visible data so we can compare it later
-    this.handleChartMouseDown = () => { this.visibleData = this.getVisibleData(); };
+    this.handleChartMouseDown = () => {
+      this.visibleData = this.getVisibleData();
+    };
     this.chartTarget.addEventListener('mousedown', this.handleChartMouseDown);
 
     // When releasing the mouse button, we want to check if the visible data has changed
-    this.handleChartMouseUp = () => { this.handleZoomChange(); };
+    this.handleChartMouseUp = () => {
+      this.handleZoomChange();
+    };
     this.chartTarget.addEventListener('mouseup', this.handleChartMouseUp);
 
     // When the chart is zoomed, we want to check if the visible data has changed
-    this.chart.on('datazoom', () => { this.handleZoomChange(); });
+    this.chart.on('datazoom', () => {
+      this.handleZoomChange();
+    });
 
     // When releasing the mouse button outside the chart, we want to check if the visible data has changed
-    this.handleDocumentMouseUp = () => { this.handleZoomChange(); };
+    this.handleDocumentMouseUp = () => {
+      this.handleZoomChange();
+    };
     document.addEventListener('mouseup', this.handleDocumentMouseUp);
   }
 
@@ -71,18 +110,37 @@ export default class extends Controller {
   // The xAxis data and series data are sliced based on the start and end values of the dataZoom component.
   // The series data will contain the actual data points that are visible in the chart.
   getVisibleData() {
-    const currentOption = this.chart.getOption();
-    const dataZoom = currentOption.dataZoom[1];
-    const xAxisData = currentOption.xAxis[0].data;
-    const seriesData = currentOption.series[0].data;
+    try {
+      const currentOption = this.chart.getOption();
 
-    const startValue = dataZoom.startValue;
-    const endValue = dataZoom.endValue;
+      if (!currentOption.dataZoom || currentOption.dataZoom.length === 0) {
+        return { xAxis: [], series: [] };
+      }
 
-    return {
-      xAxis: xAxisData.slice(startValue, endValue + 1),
-      series: seriesData.slice(startValue, endValue + 1)
-    };
+      // Try to find the correct dataZoom component
+      let dataZoom = currentOption.dataZoom[1] || currentOption.dataZoom[0];
+
+      if (!currentOption.xAxis || !currentOption.xAxis[0] || !currentOption.xAxis[0].data) {
+        return { xAxis: [], series: [] };
+      }
+
+      if (!currentOption.series || !currentOption.series[0] || !currentOption.series[0].data) {
+        return { xAxis: [], series: [] };
+      }
+
+      const xAxisData = currentOption.xAxis[0].data;
+      const seriesData = currentOption.series[0].data;
+
+      const startValue = dataZoom.startValue || 0;
+      const endValue = dataZoom.endValue || xAxisData.length - 1;
+
+      return {
+        xAxis: xAxisData.slice(startValue, endValue + 1),
+        series: seriesData.slice(startValue, endValue + 1)
+      };
+    } catch (error) {
+      return { xAxis: [], series: [] };
+    }
   }
 
   // When the zoom level changes, we want to check if the visible data has changed
@@ -90,7 +148,10 @@ export default class extends Controller {
   // we can update the table with the new data that is visible in the chart.
   handleZoomChange() {
     const newVisibleData = this.getVisibleData();
-    if (newVisibleData.xAxis.join() !== this.visibleData.xAxis.join()) {
+    const newDataString = newVisibleData.xAxis.join();
+    const currentDataString = this.visibleData.xAxis.join();
+
+    if (newDataString !== currentDataString) {
       this.visibleData = newVisibleData;
       this.updateUrlWithZoomParams(newVisibleData);
       this.sendTurboFrameRequest(newVisibleData);
@@ -124,14 +185,35 @@ export default class extends Controller {
       window.history.replaceState({}, '', url);
     }
 
-  // After the zoom level changes, we want to send a request to the server with the new visible data.
-  // The server will then return the full page HTML with the updated table data wrapped in a turbo-frame.
-  // We will then replace the innerHTML of the turbo-frame with the new HTML.
+  // Improved debouncing with guaranteed final request
   sendTurboFrameRequest(data) {
     const now = Date.now();
-    // If less than 1 second since last request, ignore this call
-    if (now - this.lastTurboFrameRequestAt < 1000) { return; }
-    this.lastTurboFrameRequestAt = now;
+    const timeSinceLastRequest = now - this.lastTurboFrameRequestAt;
+    
+    // Store the latest data for potential delayed execution
+    this.pendingRequestData = data;
+    
+    // Clear any existing timeout
+    if (this.pendingRequestTimeout) {
+      clearTimeout(this.pendingRequestTimeout);
+    }
+    
+    // If enough time has passed since last request, execute immediately
+    if (timeSinceLastRequest >= 1000) {
+      this.executeTurboFrameRequest(data);
+    } else {
+      // Otherwise, schedule execution for later to ensure final request goes through
+      const remainingTime = 1000 - timeSinceLastRequest;
+      this.pendingRequestTimeout = setTimeout(() => {
+        this.executeTurboFrameRequest(this.pendingRequestData);
+        this.pendingRequestTimeout = null;
+      }, remainingTime);
+    }
+  }
+
+  // Execute the actual AJAX request
+  executeTurboFrameRequest(data) {
+    this.lastTurboFrameRequestAt = Date.now();
 
     // Start with the current page's URL
     const url = new URL(window.location.href);
@@ -159,7 +241,9 @@ export default class extends Controller {
         'Turbo-Frame': this.chartIdValue
       }
     })
-    .then(response => response.text()) // Get the raw HTML response
+    .then(response => {
+      return response.text();
+    })
     .then(html => {
       // Find the turbo-frame in the document using the target
       const frame = this.indexTableTarget;
@@ -179,7 +263,7 @@ export default class extends Controller {
         }
       }
     })
-    .catch(error => console.error('Error:', error));
+    .catch(error => console.error('[IndexController] Fetch error:', error));
   }
 
   // CSP-safe method to replace frame content using DOM methods
@@ -209,7 +293,7 @@ export default class extends Controller {
       // Parse HTML safely
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, 'text/html');
-      
+
       // Clear existing content
       while (targetFrame.firstChild) {
         targetFrame.removeChild(targetFrame.firstChild);

data/app/javascript/rails_pulse/controllers/pagination_controller.js

@@ -11,33 +11,25 @@ export default class extends Controller {
     this.restorePaginationLimit()
   }
 
-  // Update pagination limit via AJAX and reload the page to reflect changes
-  async updateLimit() {
+  // Update pagination limit and refresh the turbo frame
+  updateLimit() {
     const limit = this.limitTarget.value
 
-    // Save to session storage
+    // Save to session storage only - no server request needed
     sessionStorage.setItem(this.storageKeyValue, limit)
 
-    try {
-      // Send AJAX request to update server session using Rails.ajax
-      const response = await fetch(this.urlValue, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-Token': this.getCSRFToken()
-        },
-        body: JSON.stringify({ limit: limit })
-      })
-
-      if (response.ok) {
-        // Reload the page to reflect the new pagination limit
-        // This preserves all current URL parameters including Ransack search params
-        window.location.reload()
-      } else {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-    } catch (error) {
-      console.error('Error updating pagination limit:', error)
+    // Find the closest turbo frame and reload it to apply new pagination
+    const turboFrame = this.element.closest('turbo-frame')
+    if (turboFrame) {
+      // Add the limit as a URL parameter so server picks it up
+      const currentUrl = new URL(window.location)
+      currentUrl.searchParams.set('limit', limit)
+      turboFrame.src = currentUrl.pathname + currentUrl.search
+    } else {
+      // Fallback to page reload if not within a turbo frame
+      const currentUrl = new URL(window.location)
+      currentUrl.searchParams.set('limit', limit)
+      window.location.href = currentUrl.pathname + currentUrl.search
     }
   }
 
@@ -60,10 +52,8 @@ export default class extends Controller {
       // Only set if the current value is different (prevents unnecessary DOM updates)
       if (this.limitTarget.value !== savedLimit) {
         this.limitTarget.value = savedLimit
-
-        // Trigger a change event to ensure any other listeners are notified
-        this.limitTarget.dispatchEvent(new Event('change', { bubbles: true }))
+        // Don't trigger change event when restoring from session - prevents infinite loops
       }
     }
   }
-}
+}

data/app/jobs/rails_pulse/backfill_summaries_job.rb

@@ -0,0 +1,41 @@
+module RailsPulse
+  class BackfillSummariesJob < ApplicationJob
+    queue_as :low_priority
+
+    def perform(start_date, end_date, period_types = [ "hour", "day" ])
+      start_date = start_date.to_datetime
+      end_date = end_date.to_datetime
+
+      period_types.each do |period_type|
+        backfill_period(period_type, start_date, end_date)
+      end
+    end
+
+    private
+
+    def backfill_period(period_type, start_date, end_date)
+      current = Summary.normalize_period_start(period_type, start_date)
+      period_end = Summary.calculate_period_end(period_type, end_date)
+
+      while current <= period_end
+        Rails.logger.info "[RailsPulse] Backfilling #{period_type} summary for #{current}"
+
+        SummaryService.new(period_type, current).perform
+
+        current = advance_period(current, period_type)
+
+        # Add small delay to avoid overwhelming the database
+        sleep 0.1
+      end
+    end
+
+    def advance_period(time, period_type)
+      case period_type
+      when "hour"  then time + 1.hour
+      when "day"   then time + 1.day
+      when "week"  then time + 1.week
+      when "month" then time + 1.month
+      end
+    end
+  end
+end