rails_pulse 0.1.2 → 0.1.4

data/app/assets/stylesheets/rails_pulse/components/sidebar_menu.css

@@ -77,3 +77,26 @@
   padding: var(--size-0_5) var(--size-2);
   row-gap: var(--size-1);
 }
+
+/* Sheet component styles for mobile menu */
+.sheet {
+  border: 0;
+  background: var(--color-bg);
+  max-block-size: none;
+  max-inline-size: none;
+  padding: 0;
+}
+
+.sheet--left {
+  block-size: 100vh;
+  inline-size: var(--sheet-size, 288px);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.sheet__content {
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}

data/app/controllers/concerns/zoom_range_concern.rb

@@ -2,10 +2,22 @@ module ZoomRangeConcern
   extend ActiveSupport::Concern
 
   def setup_zoom_range(main_start_time, main_end_time)
+    # Extract column selection parameter (but don't delete it yet - we need it for the view)
+    selected_column_time = params[:selected_column_time]
+
     # Extract zoom parameters from params (this removes them from params)
     zoom_start = params.delete(:zoom_start_time)
     zoom_end = params.delete(:zoom_end_time)
 
+    # Handle column selection with highest precedence for table filtering
+    if selected_column_time
+      column_start, column_end = normalize_column_time(selected_column_time.to_i, main_start_time, main_end_time)
+      table_start_time = column_start
+      table_end_time = column_end
+      # Don't set zoom times for column selection - let chart show full range
+      return [ zoom_start, zoom_end, table_start_time, table_end_time ]
+    end
+
     # Normalize zoom times to beginning/end of day or hour like we do for main time range
     if zoom_start && zoom_end
       zoom_start, zoom_end = normalize_zoom_times(zoom_start.to_i, zoom_end.to_i)
@@ -20,6 +32,25 @@ module ZoomRangeConcern
 
   private
 
+  def normalize_column_time(column_time, main_start_time, main_end_time)
+    # Determine period type based on main time range (same logic as ChartTableConcern)
+    time_diff_hours = (main_end_time - main_start_time) / 3600.0
+
+    if time_diff_hours <= 25
+      # Hourly period - normalize to beginning/end of hour
+      column_time_obj = Time.zone&.at(column_time) || Time.at(column_time)
+      start_time = column_time_obj&.beginning_of_hour || column_time_obj
+      end_time = column_time_obj&.end_of_hour || column_time_obj
+    else
+      # Daily period - normalize to beginning/end of day
+      column_time_obj = Time.zone&.at(column_time) || Time.at(column_time)
+      start_time = column_time_obj&.beginning_of_day || column_time_obj
+      end_time = column_time_obj&.end_of_day || column_time_obj
+    end
+
+    [ start_time.to_i, end_time.to_i ]
+  end
+
   def normalize_zoom_times(start_time, end_time)
     time_diff = (end_time - start_time) / 3600.0
 

data/app/controllers/rails_pulse/application_controller.rb

@@ -5,7 +5,11 @@ module RailsPulse
     def set_pagination_limit(limit = nil)
       limit = limit || params[:limit]
       session[:pagination_limit] = limit.to_i if limit.present?
-      render json: { status: "ok" }
+
+      # Render JSON for direct API calls or AJAX requests (but not turbo frame requests)
+      if (request.xhr? && !turbo_frame_request?) || (request.patch? && action_name == "set_pagination_limit")
+        render json: { status: "ok" }
+      end
     end
 
     private

data/app/controllers/rails_pulse/queries_controller.rb

@@ -2,7 +2,7 @@ module RailsPulse
   class QueriesController < ApplicationController
     include ChartTableConcern
 
-    before_action :set_query, only: :show
+    before_action :set_query, only: [ :show, :analyze ]
 
     def index
       setup_metric_cards
@@ -14,6 +14,40 @@ module RailsPulse
       setup_chart_and_table_data
     end
 
+    def analyze
+      begin
+        @analysis_results = QueryAnalysisService.analyze_query(@query.id)
+
+        respond_to do |format|
+          format.turbo_stream {
+            render turbo_stream: turbo_stream.replace(
+              "query_analysis",
+              partial: "rails_pulse/queries/analysis_section",
+              locals: { query: @query.reload }
+            )
+          }
+          format.html {
+            redirect_to query_path(@query), notice: "Query analysis completed successfully."
+          }
+        end
+      rescue => e
+        Rails.logger.error("[QueryAnalysis] Analysis failed for query #{@query.id}: #{e.message}")
+
+        respond_to do |format|
+          format.turbo_stream {
+            render turbo_stream: turbo_stream.replace(
+              "query_analysis",
+              partial: "rails_pulse/queries/analysis_section",
+              locals: { query: @query, error_message: "Analysis failed: #{e.message}" }
+            )
+          }
+          format.html {
+            redirect_to query_path(@query), alert: "Query analysis failed: #{e.message}"
+          }
+        end
+      end
+    end
+
     private
 
     def chart_model
@@ -21,7 +55,7 @@ module RailsPulse
     end
 
     def table_model
-      show_action? ? Operation : Summary
+      Summary
     end
 
     def chart_class
@@ -42,7 +76,10 @@ module RailsPulse
       base_params[:avg_duration_gteq] = @start_duration if @start_duration && @start_duration > 0
 
       if show_action?
-        base_params.merge(summarizable_id_eq: @query.id)
+        base_params.merge(
+          summarizable_id_eq: @query.id,
+          summarizable_type_eq: "RailsPulse::Query"
+        )
       else
         base_params
       end
@@ -50,13 +87,14 @@ module RailsPulse
 
     def build_table_ransack_params(ransack_params)
       if show_action?
-        # For Operation model on show page
+        # For Summary model on show page
         params = ransack_params.merge(
-          occurred_at_gteq: Time.at(@table_start_time),
-          occurred_at_lt: Time.at(@table_end_time),
-          query_id_eq: @query.id
+          period_start_gteq: Time.at(@table_start_time),
+          period_start_lt: Time.at(@table_end_time),
+          summarizable_id_eq: @query.id,
+          summarizable_type_eq: "RailsPulse::Query"
         )
-        params[:duration_gteq] = @start_duration if @start_duration && @start_duration > 0
+        params[:avg_duration_gteq] = @start_duration if @start_duration && @start_duration > 0
         params
       else
         # For Summary model on index page
@@ -70,12 +108,13 @@ module RailsPulse
     end
 
     def default_table_sort
-      show_action? ? "occurred_at desc" : "period_start desc"
+      "period_start desc"
     end
 
     def build_table_results
       if show_action?
-        @ransack_query.result
+        # For Summary model on show page - ransack params already include query ID and type filters
+        @ransack_query.result.where(period_type: period_type)
       else
         Queries::Tables::Index.new(
           ransack_query: @ransack_query,

data/app/controllers/rails_pulse/requests_controller.rb

@@ -5,13 +5,7 @@ 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_metric_cards
       setup_chart_and_table_data
     end
 
@@ -21,12 +15,22 @@ module RailsPulse
 
     private
 
+    def setup_metric_cards
+      return if  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
+
+
     def chart_model
-      Summary
+      RailsPulse::Summary
     end
 
     def table_model
-      Request
+      RailsPulse::Request
     end
 
     def chart_class
@@ -40,7 +44,9 @@ module RailsPulse
     def build_chart_ransack_params(ransack_params)
       base_params = ransack_params.except(:s).merge(
         period_start_gteq: Time.at(@start_time),
-        period_start_lt: Time.at(@end_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
@@ -62,16 +68,36 @@ module RailsPulse
     end
 
     def build_table_results
-      @ransack_query.result
-        .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_routes.path"
-        )
+      base_query = @ransack_query.result.includes(:route)
+
+      # If sorting by route_path, we need to join the routes table
+      if @ransack_query.sorts.any? { |sort| sort.name == "route_path" }
+        base_query = base_query.joins(:route)
+      end
+
+      base_query
+    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 Requests::Tables::Index (which handles its own sorting)
+      # For requests, we always use the Tables::Index on the index action
+      unless action_name == "index"
+        @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 set_request

data/app/controllers/rails_pulse/routes_controller.rb

@@ -84,7 +84,25 @@ module RailsPulse
 
     def build_table_results
       if show_action?
-        @ransack_query.result
+        # 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,
@@ -130,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/breadcrumbs_helper.rb

@@ -25,7 +25,7 @@ module RailsPulse
 
       return crumbs if path_segments.empty?
 
-      current_path = "/rails_pulse"
+      current_path = main_app.rails_pulse_path.chomp("/")
 
       path_segments.each_with_index do |segment, index|
         current_path += "/#{segment}"

data/app/helpers/rails_pulse/chart_helper.rb

@@ -27,7 +27,7 @@ module RailsPulse
           top: "10%",
           containLabel: true
         },
-        animation: false
+        animation: true
       }
     end
 
@@ -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, splitLine: { show: false } },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false }
         },
-        yAxis: { show: false },
-        xAxis: { splitLine: { show: false } },
-        grid: { show: false }
+        grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, show: false }
       })
     end
 

data/app/helpers/rails_pulse/formatting_helper.rb

@@ -3,7 +3,8 @@ module RailsPulse
     def human_readable_occurred_at(occurred_at)
       return "" unless occurred_at.present?
       time = occurred_at.is_a?(String) ? Time.parse(occurred_at) : occurred_at
-      time.strftime("%b %d, %Y %l:%M %p")
+      # Convert to local system timezone (same as charts use)
+      time.getlocal.strftime("%b %d, %Y %l:%M %p")
     end
 
     def time_ago_in_words(time)
@@ -11,8 +12,10 @@ module RailsPulse
 
       # Convert to Time object if it's a string
       time = Time.parse(time.to_s) if time.is_a?(String)
+      # Convert to local system timezone for consistent calculation
+      time = time.getlocal
 
-      seconds_ago = Time.current - time
+      seconds_ago = Time.now - time
 
       case seconds_ago
       when 0..59
@@ -25,5 +28,21 @@ module RailsPulse
         "#{(seconds_ago / 86400).to_i}d ago"
       end
     end
+
+    def human_readable_summary_period(summary)
+      return "" unless summary&.period_start&.present? && summary&.period_end&.present?
+
+      # Convert UTC times to local system timezone to match chart display
+      start_time = summary.period_start.getlocal
+      end_time = summary.period_end.getlocal
+
+
+      case summary.period_type
+      when "hour"
+        start_time.strftime("%b %e %Y, %l:%M %p") + " - " + end_time.strftime("%l:%M %p")
+      when "day"
+        start_time.strftime("%b %e, %Y")
+      end
+    end
   end
 end

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')
+  }
+}