rails_pulse 0.1.1 → 0.1.3

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,29 @@ 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),
+        summarizable_type_eq: "RailsPulse::Request",
+        summarizable_id_eq: 0
       )
+
+      # 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
@@ -51,15 +64,27 @@ module RailsPulse
     end
 
     def build_table_results
+      # Only show requests that belong to time periods where we have overall request summaries
+      # This ensures the table data is consistent with the chart data
       @ransack_query.result
-        .includes(:route)
+        .joins(:route)
+        .joins(<<~SQL)
+          INNER JOIN rails_pulse_summaries ON
+            rails_pulse_summaries.summarizable_id = 0 AND
+            rails_pulse_summaries.summarizable_type = 'RailsPulse::Request' AND
+            rails_pulse_summaries.period_type = '#{period_type}' AND
+            rails_pulse_requests.occurred_at >= rails_pulse_summaries.period_start AND
+            rails_pulse_requests.occurred_at < rails_pulse_summaries.period_end
+        SQL
         .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"
         )
+        .distinct
     end
 
     def set_request

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,71 @@ 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")
+        # Only show requests that belong to time periods where we have route summaries
+        # This ensures the table data is consistent with the chart data
+        base_query = @ransack_query.result
+          .joins(<<~SQL)
+            INNER JOIN rails_pulse_summaries ON
+              rails_pulse_summaries.summarizable_id = rails_pulse_requests.route_id AND
+              rails_pulse_summaries.summarizable_type = 'RailsPulse::Route' AND
+              rails_pulse_summaries.period_type = '#{period_type}' AND
+              rails_pulse_requests.occurred_at >= rails_pulse_summaries.period_start AND
+              rails_pulse_requests.occurred_at < rails_pulse_summaries.period_end
+          SQL
+
+        # For PostgreSQL compatibility with DISTINCT + ORDER BY
+        # we need to include computed columns in SELECT when ordering by them
+        if ordering_by_computed_column?
+          base_query.select("rails_pulse_requests.*, #{status_indicator_sql} as status_indicator_value").distinct
+        else
+          base_query.distinct
+        end
       else
         Routes::Tables::Index.new(
           ransack_query: @ransack_query,
+          period_type: period_type,
           start_time: @start_time,
           params: params
         ).to_table
@@ -81,13 +114,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
@@ -95,5 +148,26 @@ module RailsPulse
     def set_route
       @route = Route.find(params[:id])
     end
+
+    def ordering_by_computed_column?
+      # Check if we're ordering by status_indicator (computed column)
+      @ransack_query.sorts.any? { |sort| sort.name == "status_indicator" }
+    end
+
+    def status_indicator_sql
+      # Same logic as in the Request model's ransacker
+      config = RailsPulse.configuration rescue nil
+      thresholds = config&.request_thresholds || { slow: 500, very_slow: 1000, critical: 2000 }
+      slow = thresholds[:slow] || 500
+      very_slow = thresholds[:very_slow] || 1000
+      critical = thresholds[:critical] || 2000
+
+      "CASE
+        WHEN rails_pulse_requests.duration < #{slow} THEN 0
+        WHEN rails_pulse_requests.duration < #{very_slow} THEN 1
+        WHEN rails_pulse_requests.duration < #{critical} THEN 2
+        ELSE 3
+      END"
+    end
   end
 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

@@ -63,16 +63,24 @@ module RailsPulse
     end
 
     def sparkline_chart_options
+      # Compact sparkline columns that fill the canvas with no axes/labels/gaps
       base_chart_options.deep_merge({
         series: {
-          type: "line",
-          smooth: true,
-          lineStyle: { width: 2 },
-          symbol: "none"
+          type: "bar",
+          itemStyle: { borderRadius: [ 2, 2, 0, 0 ] },
+          barCategoryGap: "10%",
+          barGap: "0%"
         },
-        yAxis: { show: false },
-        xAxis: { splitLine: { show: false } },
-        grid: { show: false }
+        yAxis: { show: false, splitLine: { show: false } },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false }
+        },
+        grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, show: false }
       })
     end
 
@@ -117,9 +125,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/application.js

@@ -16,7 +16,9 @@ import ColorSchemeController from "./controllers/color_scheme_controller";
 import PaginationController from "./controllers/pagination_controller";
 import TimezoneController from "./controllers/timezone_controller";
 import IconController from "./controllers/icon_controller";
-import ExpandableRowController from "./controllers/expandable_row_controller";
+import ExpandableRowsController from "./controllers/expandable_rows_controller";
+import CollapsibleController from "./controllers/collapsible_controller";
+import TableSortController from "./controllers/table_sort_controller";
 
 const application = Application.start();
 
@@ -41,7 +43,9 @@ application.register("rails-pulse--color-scheme", ColorSchemeController);
 application.register("rails-pulse--pagination", PaginationController);
 application.register("rails-pulse--timezone", TimezoneController);
 application.register("rails-pulse--icon", IconController);
-application.register("rails-pulse--expandable-row", ExpandableRowController);
+application.register("rails-pulse--expandable-rows", ExpandableRowsController);
+application.register("rails-pulse--collapsible", CollapsibleController);
+application.register("rails-pulse--table-sort", TableSortController);
 
 // Ensure Turbo Frames are loaded after page load
 document.addEventListener('DOMContentLoaded', () => {
@@ -95,6 +99,32 @@ window.addEventListener('resize', function() {
   }
 });
 
+// Apply axis label colors based on current color scheme
+function applyChartAxisLabelColors() {
+  if (!window.RailsCharts || !window.RailsCharts.charts) return;
+  const scheme = document.documentElement.getAttribute('data-color-scheme');
+  const isDark = scheme === 'dark';
+  const axisColor = isDark ? '#ffffff' : '#999999';
+  Object.keys(window.RailsCharts.charts).forEach(function(chartID) {
+    const chart = window.RailsCharts.charts[chartID];
+    try {
+      chart.setOption({
+        xAxis: { axisLabel: { color: axisColor } },
+        yAxis: { axisLabel: { color: axisColor } }
+      });
+    } catch (e) {
+      // noop
+    }
+  });
+}
+
+// Initial apply after charts initialize and on scheme changes
+document.addEventListener('DOMContentLoaded', () => {
+  // run shortly after load to allow charts to initialize
+  setTimeout(applyChartAxisLabelColors, 50);
+});
+document.addEventListener('rails-pulse:color-scheme-changed', applyChartAxisLabelColors);
+
 // Global function to initialize Rails Charts in any container.
 // This is needed as we render Rails Charts in Turbo Frames.
 window.initializeChartsInContainer = function(containerId) {
@@ -108,6 +138,8 @@ window.initializeChartsInContainer = function(containerId) {
         window[match[1]]();
       }
     });
+    // ensure colors are correct for any charts initialized in this container
+    setTimeout(applyChartAxisLabelColors, 10);
   });
 };
 
@@ -116,4 +148,3 @@ window.RailsPulse = {
   application,
   version: "1.0.0"
 };
-

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

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "toggle"]
+  static classes = ["collapsed"]
+
+  connect() {
+    this.collapse()
+  }
+
+  toggle() {
+    if (this.element.classList.contains(this.collapsedClass)) {
+      this.expand()
+    } else {
+      this.collapse()
+    }
+  }
+
+  collapse() {
+    this.element.classList.add(this.collapsedClass)
+    if (this.hasToggleTarget) {
+      this.toggleTarget.textContent = "show more"
+    }
+  }
+
+  expand() {
+    this.element.classList.remove(this.collapsedClass)
+    if (this.hasToggleTarget) {
+      this.toggleTarget.textContent = "show less"
+    }
+  }
+}

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

@@ -13,8 +13,9 @@ export default class extends Controller {
   toggle(event) {
     event.preventDefault()
     const current = this.html.getAttribute("data-color-scheme") === "dark" ? "light" : "dark"
-    console.log("Toggling color scheme to", current)
     this.html.setAttribute("data-color-scheme", current)
     localStorage.setItem(this.storageKey, current)
+    // Notify listeners (e.g., charts) that scheme changed
+    document.dispatchEvent(new CustomEvent('rails-pulse:color-scheme-changed', { detail: { scheme: current }}))
   }
 }

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

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  toggle(event) {
+    // Delegate clicks from tbody to the nearest row
+    const triggerRow = event.target.closest('tr')
+    if (!triggerRow || triggerRow.closest('tbody') !== this.element) return
+
+    // Ignore clicks on the details row itself
+    if (triggerRow.classList.contains('operation-details-row')) return
+
+    // Do not toggle when clicking the final Actions column
+    const clickedCell = event.target.closest('td,th')
+    if (clickedCell && clickedCell.parentElement === triggerRow) {
+      const isLastCell = clickedCell.cellIndex === (triggerRow.cells.length - 1)
+      if (isLastCell) return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const detailsRow = triggerRow.nextElementSibling
+    if (!detailsRow || detailsRow.tagName !== 'TR' || !detailsRow.classList.contains('operation-details-row')) return
+
+    const isHidden = detailsRow.classList.contains('hidden')
+    if (isHidden) {
+      this.expand(triggerRow, detailsRow)
+    } else {
+      this.collapse(triggerRow, detailsRow)
+    }
+  }
+
+  expand(triggerRow, detailsRow) {
+    detailsRow.classList.remove('hidden')
+
+    // Rotate chevron to point down
+    const chevron = triggerRow.querySelector('.chevron')
+    if (chevron) chevron.style.transform = 'rotate(90deg)'
+
+    triggerRow.classList.add('expanded')
+
+    // Lazy load operation details once
+    const frame = detailsRow.querySelector('turbo-frame')
+    if (frame && !frame.getAttribute('src')) {
+      const url = frame.dataset.operationUrl
+      if (url) frame.setAttribute('src', url)
+    }
+  }
+
+  collapse(triggerRow, detailsRow) {
+    detailsRow.classList.add('hidden')
+
+    const chevron = triggerRow.querySelector('.chevron')
+    if (chevron) chevron.style.transform = 'rotate(0deg)'
+
+    triggerRow.classList.remove('expanded')
+  }
+}