rails_pulse 0.1.2 → 0.1.4

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

@@ -11,6 +11,8 @@ export default class extends Controller {
   lastTurboFrameRequestAt = 0;
   pendingRequestTimeout = null;
   pendingRequestData = null;
+  selectedColumnIndex = null;
+  originalSeriesOption = null;
 
   connect() {
     // Listen for the custom event 'chart:initialized' to set up the chart.
@@ -61,16 +63,20 @@ export default class extends Controller {
     } catch (e) {
       hasTarget = false;
     }
-    
+
     // Get the chart element which the RailsCharts library has created
     this.chart = window.RailsCharts.charts[this.chartIdValue];
-    
+
     // Only proceed if we have BOTH the DOM target and the chart object
     if (!hasTarget || !this.chart) {
       return;
     }
 
     this.visibleData = this.getVisibleData();
+
+    // Store the original series configuration BEFORE any modifications
+    this.storeOriginalSeriesOption();
+
     this.setupChartEventListeners();
     this.setupDone = true;
 
@@ -78,6 +84,10 @@ export default class extends Controller {
     if (hasTarget) {
       document.getElementById(this.chartIdValue)?.setAttribute('data-chart-rendered', 'true');
     }
+
+    // Initialize column selection from URL parameters after chart is fully ready
+    // This must come AFTER storing the original option to avoid storing modified state
+    this.initializeColumnSelectionFromUrl();
   }
 
   // Add some event listeners to the chart so we can track the zoom changes
@@ -104,6 +114,11 @@ export default class extends Controller {
       this.handleZoomChange();
     };
     document.addEventListener('mouseup', this.handleDocumentMouseUp);
+
+    // Add click event handler for bar chart columns
+    this.chart.on('click', (params) => {
+      this.handleColumnClick(params);
+    });
   }
 
   // This returns the visible data from the chart based on the current zoom level.
@@ -166,7 +181,7 @@ export default class extends Controller {
     const startTimestamp = data.xAxis[0];
     const endTimestamp = data.xAxis[data.xAxis.length - 1];
 
-    // Update zoom parameters in URL
+    // Update zoom parameters in URL while preserving all other parameters including sort
     currentParams.set('zoom_start_time', startTimestamp);
     currentParams.set('zoom_end_time', endTimestamp);
 
@@ -177,6 +192,8 @@ export default class extends Controller {
   updatePaginationLimit() {
       // Update or set the limit param in the browser so if the user refreshes the page,
       // the limit will be preserved.
+      if (!this.hasPaginationLimitTarget) return;
+
       const url = new URL(window.location.href);
       const currentParams = new URLSearchParams(url.search);
       const limit = this.paginationLimitTarget.value;
@@ -189,15 +206,15 @@ export default class extends Controller {
   sendTurboFrameRequest(data) {
     const now = Date.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);
@@ -215,10 +232,10 @@ export default class extends Controller {
   executeTurboFrameRequest(data) {
     this.lastTurboFrameRequestAt = Date.now();
 
-    // Start with the current page's URL
+    // Start with the current page's URL to preserve all existing parameters including sort
     const url = new URL(window.location.href);
 
-    // Preserve existing URL parameters
+    // Preserve existing URL parameters (including sort parameters like q[s])
     const currentParams = new URLSearchParams(url.search);
 
     const startTimestamp = data.xAxis[0];
@@ -229,7 +246,9 @@ export default class extends Controller {
     currentParams.set('zoom_end_time', endTimestamp);
 
     // Set the limit param based on the value in the pagination selector
-    url.searchParams.set('limit', this.paginationLimitTarget.value);
+    if (this.hasPaginationLimitTarget) {
+      currentParams.set('limit', this.paginationLimitTarget.value);
+    }
 
     // Update the URL's search parameters
     url.search = currentParams.toString();
@@ -237,8 +256,9 @@ export default class extends Controller {
     fetch(url, {
       method: 'GET',
       headers: {
-        'Accept': 'text/html; turbo-frame',
-        'Turbo-Frame': this.chartIdValue
+        'Accept': 'text/vnd.turbo-stream.html, text/html',
+        'Turbo-Frame': this.indexTableTarget.id,
+        'X-Requested-With': 'XMLHttpRequest'
       }
     })
     .then(response => {
@@ -311,4 +331,222 @@ export default class extends Controller {
       targetFrame.innerHTML = html;
     }
   }
+
+  handleColumnClick(params) {
+    const clickedIndex = params.dataIndex;
+
+    // If clicking the same column that's already selected, deselect all
+    if (this.selectedColumnIndex === clickedIndex) {
+      this.resetColumnColors();
+      this.selectedColumnIndex = null;
+      this.sendColumnDeselectionRequest();
+    } else {
+      // Select the clicked column and gray out others
+      this.highlightColumn(clickedIndex);
+      this.selectedColumnIndex = clickedIndex;
+      this.sendColumnSelectionRequest(clickedIndex);
+    }
+  }
+
+  highlightColumn(selectedIndex) {
+    try {
+      const option = this.chart.getOption();
+      if (!option.series || !option.series[0] || !option.series[0].data) {
+        return;
+      }
+
+      const seriesData = option.series[0].data;
+
+      // Instead of changing data structure, modify the series itemStyle
+      const currentOption = this.chart.getOption();
+
+      // Get the default color from the chart theme
+      const defaultColor = currentOption.color?.[0] || '#5470c6'; // ECharts default blue
+
+      this.chart.setOption({
+        series: [{
+          data: seriesData, // Keep original data format for tooltips
+          itemStyle: {
+            color: (params) => {
+              return params.dataIndex === selectedIndex ? defaultColor : '#cccccc';
+            }
+          }
+        }]
+      });
+    } catch (error) {
+      console.error('Error highlighting column:', error);
+    }
+  }
+
+  storeOriginalSeriesOption() {
+    try {
+      const option = this.chart.getOption();
+      if (option.series && option.series[0]) {
+        // Deep clone the original series configuration to restore later
+        const originalSeries = JSON.parse(JSON.stringify(option.series[0]));
+
+        // Ensure we don't store any column selection modifications
+        // Remove any custom itemStyle that might have color functions
+        if (originalSeries.itemStyle && typeof originalSeries.itemStyle.color === 'function') {
+          delete originalSeries.itemStyle.color;
+        }
+
+        this.originalSeriesOption = originalSeries;
+      }
+    } catch (error) {
+      console.error('Error storing original series option:', error);
+    }
+  }
+
+  resetColumnColors() {
+    try {
+      if (!this.originalSeriesOption) {
+        console.warn('No original series option stored, cannot reset properly');
+        return;
+      }
+
+      const option = this.chart.getOption();
+      const seriesData = option.series[0].data;
+
+      // Restore original series configuration but keep current data
+      const restoredOption = {
+        ...this.originalSeriesOption,
+        data: seriesData // Keep current data to preserve tooltips
+      };
+
+      // Explicitly set color back to default yellow theme color
+      if (!restoredOption.itemStyle) {
+        restoredOption.itemStyle = {};
+      }
+      restoredOption.itemStyle.color = '#ffc91f'; // Default yellow from railspulse theme
+
+      this.chart.setOption({
+        series: [restoredOption]
+      }, false); // Use replace mode to ensure clean state
+    } catch (error) {
+      console.error('Error resetting column colors:', error);
+    }
+  }
+
+  sendColumnSelectionRequest(columnIndex) {
+    // Get the timestamp for the selected column
+    const option = this.chart.getOption();
+    const xAxisData = option.xAxis[0].data;
+    const selectedTimestamp = xAxisData[columnIndex];
+
+    if (!selectedTimestamp) {
+      console.error('Could not find timestamp for column index:', columnIndex);
+      return;
+    }
+
+    // Build the request URL with column selection parameter, preserving all existing params including sort
+    const url = new URL(window.location.href);
+    const currentParams = new URLSearchParams(url.search);
+
+    // Keep all existing parameters (including sort like q[s]) and add column selection parameter
+    currentParams.set('selected_column_time', selectedTimestamp);
+
+    // Preserve pagination limit
+    if (this.hasPaginationLimitTarget) {
+      currentParams.set('limit', this.paginationLimitTarget.value);
+    }
+
+    url.search = currentParams.toString();
+
+    // Update browser URL to persist column selection
+    window.history.replaceState({}, '', url);
+
+    // Send the turbo frame request
+    this.executeTurboFrameRequestForColumn(url);
+  }
+
+  sendColumnDeselectionRequest() {
+    // Build the request URL without column selection parameter, preserving all other params including sort
+    const url = new URL(window.location.href);
+    const currentParams = new URLSearchParams(url.search);
+
+    // Remove only the column selection parameter, keep all others (including sort like q[s])
+    currentParams.delete('selected_column_time');
+
+    // Preserve pagination limit
+    if (this.hasPaginationLimitTarget) {
+      currentParams.set('limit', this.paginationLimitTarget.value);
+    }
+
+    url.search = currentParams.toString();
+
+    // Update browser URL to remove column selection
+    window.history.replaceState({}, '', url);
+
+    // Send the turbo frame request to restore default/zoom view
+    this.executeTurboFrameRequestForColumn(url);
+  }
+
+  executeTurboFrameRequestForColumn(url) {
+    fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/vnd.turbo-stream.html, text/html',
+        'Turbo-Frame': this.indexTableTarget.id,
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+    .then(response => {
+      return response.text();
+    })
+    .then(html => {
+      // Find the turbo-frame in the document using the target
+      const frame = this.indexTableTarget;
+      if (frame) {
+        // Parse the response HTML
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        // Find the turbo-frame in the response using the frame's ID
+        const responseFrame = doc.querySelector(`turbo-frame#${frame.id}`);
+        if (responseFrame) {
+          // CSP-safe content replacement using DOM methods
+          this.replaceFrameContent(frame, responseFrame);
+        } else {
+          // Fallback: parse the entire HTML response
+          this.replaceFrameContentFromHTML(frame, html);
+        }
+      }
+    })
+    .catch(error => console.error('[IndexController] Column selection fetch error:', error));
+  }
+
+  initializeColumnSelectionFromUrl() {
+    // Check if there's a selected_column_time parameter in the URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const selectedColumnTime = urlParams.get('selected_column_time');
+
+    if (selectedColumnTime) {
+      // Find the column index that matches this timestamp
+      const option = this.chart.getOption();
+      if (!option.xAxis || !option.xAxis[0] || !option.xAxis[0].data) {
+        return;
+      }
+
+      const xAxisData = option.xAxis[0].data;
+
+      // Try exact match first
+      let columnIndex = xAxisData.findIndex(timestamp => timestamp.toString() === selectedColumnTime);
+
+      // If no exact match, try converting to numbers and comparing
+      if (columnIndex === -1) {
+        const selectedTimeNumber = parseInt(selectedColumnTime);
+        columnIndex = xAxisData.findIndex(timestamp => parseInt(timestamp) === selectedTimeNumber);
+      }
+
+      if (columnIndex !== -1) {
+        // Set the selected column index and apply visual styling
+        this.selectedColumnIndex = columnIndex;
+        // Use requestAnimationFrame to ensure ECharts is ready
+        requestAnimationFrame(() => {
+          this.highlightColumn(columnIndex);
+        });
+      }
+    }
+  }
 }

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

@@ -1,9 +1,33 @@
 import { Controller } from "@hotwired/stimulus"
 import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom"
 
+/**
+ * Popover Stimulus Controller
+ *
+ * Usage:
+ *   <div data-controller="popover" data-popover-placement-value="top">
+ *     <button data-popover-target="button" data-action="click->popover#toggle">Toggle</button>
+ *     <div data-popover-target="menu" popover>Menu content</div>
+ *   </div>
+ *
+ * Targets:
+ *   - button: The element that triggers the popover
+ *   - menu: The popover content element
+ *
+ * Values:
+ *   - placement: Controls popover positioning (default: "top")
+ *     Valid values: "top", "top-start", "top-end", "bottom", "bottom-start",
+ *     "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"
+ *
+ * Features:
+ *   - Auto-positioning with collision detection
+ *   - Lazy loading of operation details via Turbo frames
+ *   - CSP-compliant styling using CSS custom properties
+ */
+
 export default class extends Controller {
   static targets = [ "button", "menu" ]
-  static values  = { placement: { type: String, default: "bottom" } }
+  static values  = { placement: { type: String, default: "top" } }
 
   #showTimer = null
   #hideTimer = null
@@ -64,16 +88,16 @@ export default class extends Controller {
     // Check if this popover has operation details to load
     const operationUrl = this.menuTarget.dataset.operationUrl
     if (!operationUrl) return
-    
+
     // Find the turbo frame inside the popover
     const turboFrame = this.menuTarget.querySelector('turbo-frame')
     if (!turboFrame) return
-    
+
     // Only load if not already loaded (check if still shows loading content)
     // Use CSP-safe method to check for loading content
     const hasLoadingContent = this.hasLoadingContent(turboFrame)
     if (!hasLoadingContent) return
-    
+
     // Set the src attribute to trigger the turbo frame loading
     turboFrame.src = operationUrl
   }

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

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  updateUrl(event) {
+    // Get the href from the clicked link
+    const link = event.currentTarget;
+    const href = link.getAttribute('href');
+    
+    if (href) {
+      // Update the browser URL to match the sort link
+      window.history.replaceState({}, '', href);
+    }
+  }
+}

data/app/models/rails_pulse/dashboard/tables/slow_queries.rb

@@ -32,7 +32,7 @@ module RailsPulse
             {
               query_text: truncate_query(record.normalized_sql),
               query_id: record.query_id,
-              query_link: "/rails_pulse/queries/#{record.query_id}",
+              query_link: RailsPulse::Engine.routes.url_helpers.query_path(record.query_id),
               average_time: record.avg_duration.to_f.round(0),
               request_count: record.request_count,
               last_request: time_ago_in_words(record.last_seen)

data/app/models/rails_pulse/dashboard/tables/slow_routes.rb

@@ -33,7 +33,7 @@ module RailsPulse
             {
               route_path: record.path,
               route_id: record.route_id,
-              route_link: "/rails_pulse/routes/#{record.route_id}",
+              route_link: RailsPulse::Engine.routes.url_helpers.route_path(record.route_id),
               average_time: record.avg_duration.to_f.round(0),
               request_count: record.request_count,
               last_request: time_ago_in_words(record.last_seen)

data/app/models/rails_pulse/queries/cards/average_query_times.rb

@@ -36,27 +36,27 @@ module RailsPulse
           trend_icon = percentage < 0.1 ? "move-right" : current_period_avg < previous_period_avg ? "trending-down" : "trending-up"
           trend_amount = previous_period_avg.zero? ? "0%" : "#{percentage}%"
 
-          # Separate query for sparkline data - manually calculate weighted averages by week
-          sparkline_data = {}
-          base_query.each do |summary|
-            week_start = summary.period_start.beginning_of_week
-            formatted_date = week_start.strftime("%b %-d")
+          # Sparkline data by day with zero-filled days over the last 14 days
+          # Use Groupdate to get grouped sums and compute weighted averages per day
+          grouped_weighted = base_query
+            .group_by_day(:period_start, time_zone: "UTC")
+            .sum(Arel.sql("avg_duration * count"))
 
-            if sparkline_data[formatted_date]
-              sparkline_data[formatted_date][:total_weighted] += (summary.avg_duration || 0) * (summary.count || 0)
-              sparkline_data[formatted_date][:total_count] += (summary.count || 0)
-            else
-              sparkline_data[formatted_date] = {
-                total_weighted: (summary.avg_duration || 0) * (summary.count || 0),
-                total_count: (summary.count || 0)
-              }
-            end
-          end
+          grouped_counts = base_query
+            .group_by_day(:period_start, time_zone: "UTC")
+            .sum(:count)
 
-          # Convert to final format
-          sparkline_data = sparkline_data.transform_values do |data|
-            weighted_avg = data[:total_count] > 0 ? (data[:total_weighted] / data[:total_count]).round(0) : 0
-            { value: weighted_avg }
+          # Build a continuous 14-day range, fill missing days with 0
+          start_day = 2.weeks.ago.beginning_of_day.to_date
+          end_day = Time.current.to_date
+
+          sparkline_data = {}
+          (start_day..end_day).each do |day|
+            weighted_sum = grouped_weighted[day] || 0
+            count_sum = grouped_counts[day] || 0
+            avg = count_sum > 0 ? (weighted_sum.to_f / count_sum).round(0) : 0
+            label = day.strftime("%b %-d")
+            sparkline_data[label] = { value: avg }
           end
 
           {
@@ -64,7 +64,7 @@ module RailsPulse
             context: "queries",
             title: "Average Query Time",
             summary: "#{average_query_time} ms",
-            line_chart_data: sparkline_data,
+            chart_data: sparkline_data,
             trend_icon: trend_icon,
             trend_amount: trend_amount,
             trend_text: "Compared to last week"

data/app/models/rails_pulse/queries/cards/execution_rate.rb

@@ -10,10 +10,20 @@ module RailsPulse
           last_7_days = 7.days.ago.beginning_of_day
           previous_7_days = 14.days.ago.beginning_of_day
 
+          # Get the most common period type for this query, or fall back to "day"
+          period_type = if @query
+            RailsPulse::Summary.where(
+              summarizable_type: "RailsPulse::Query",
+              summarizable_id: @query.id
+            ).group(:period_type).count.max_by(&:last)&.first || "day"
+          else
+            "day"
+          end
+
           # Single query to get all count metrics with conditional aggregation
           base_query = RailsPulse::Summary.where(
             summarizable_type: "RailsPulse::Query",
-            period_type: "day",
+            period_type: period_type,
             period_start: 2.weeks.ago.beginning_of_day..Time.current
           )
           base_query = base_query.where(summarizable_id: @query.id) if @query
@@ -33,26 +43,60 @@ module RailsPulse
           trend_icon = percentage < 0.1 ? "move-right" : current_period_count < previous_period_count ? "trending-down" : "trending-up"
           trend_amount = previous_period_count.zero? ? "0%" : "#{percentage}%"
 
-          # Separate query for sparkline data - group by week using Rails
-          sparkline_data = base_query
-            .group_by_week(:period_start, time_zone: "UTC")
-            .sum(:count)
-            .each_with_object({}) do |(week_start, total_count), hash|
-              formatted_date = week_start.strftime("%b %-d")
-              value = total_count || 0
-              hash[formatted_date] = { value: value }
+          # Sparkline data with zero-filled periods over the last 14 days
+          if period_type == "day"
+            grouped_data = base_query
+              .group_by_day(:period_start, time_zone: "UTC")
+              .sum(:count)
+
+            start_period = 2.weeks.ago.beginning_of_day.to_date
+            end_period = Time.current.to_date
+
+            sparkline_data = {}
+            (start_period..end_period).each do |day|
+              total = grouped_data[day] || 0
+              label = day.strftime("%b %-d")
+              sparkline_data[label] = { value: total }
             end
+          else
+            # For hourly data, group by day for sparkline display
+            grouped_data = base_query
+              .group("DATE(period_start)")
+              .sum(:count)
+
+            start_period = 2.weeks.ago.beginning_of_day.to_date
+            end_period = Time.current.to_date
+
+            sparkline_data = {}
+            (start_period..end_period).each do |day|
+              date_key = day.strftime("%Y-%m-%d")
+              total = grouped_data[date_key] || 0
+              label = day.strftime("%b %-d")
+              sparkline_data[label] = { value: total }
+            end
+          end
+
+          # Calculate appropriate rate display based on frequency
+          total_minutes = 2.weeks / 1.minute.to_f
+          executions_per_minute = total_execution_count.to_f / total_minutes
 
-          # Calculate average executions per minute over 2-week period
-          total_minutes = 2.weeks / 1.minute
-          average_executions_per_minute = total_execution_count / total_minutes
+          # Choose appropriate time unit for display
+          if executions_per_minute >= 1
+            summary = "#{executions_per_minute.round(2)} / min"
+          elsif executions_per_minute * 60 >= 1
+            executions_per_hour = executions_per_minute * 60
+            summary = "#{executions_per_hour.round(2)} / hour"
+          else
+            executions_per_day = executions_per_minute * 60 * 24
+            summary = "#{executions_per_day.round(2)} / day"
+          end
 
           {
             id: "execution_rate",
             context: "queries",
             title: "Execution Rate",
-            summary: "#{average_executions_per_minute.round(2)} / min",
-            line_chart_data: sparkline_data,
+            summary: summary,
+            chart_data: sparkline_data,
             trend_icon: trend_icon,
             trend_amount: trend_amount,
             trend_text: "Compared to last week"

data/app/models/rails_pulse/queries/cards/percentile_query_times.rb

@@ -33,22 +33,27 @@ module RailsPulse
           trend_icon = percentage < 0.1 ? "move-right" : current_period_p95 < previous_period_p95 ? "trending-down" : "trending-up"
           trend_amount = previous_period_p95.zero? ? "0%" : "#{percentage}%"
 
-          # Separate query for sparkline data - group by week using Rails
-          sparkline_data = base_query
-            .group_by_week(:period_start, time_zone: "UTC")
+          # Sparkline data by day with zero-filled days over the last 14 days
+          grouped_daily = base_query
+            .group_by_day(:period_start, time_zone: "UTC")
             .average(:p95_duration)
-            .each_with_object({}) do |(week_start, avg_p95), hash|
-              formatted_date = week_start.strftime("%b %-d")
-              value = (avg_p95 || 0).round(0)
-              hash[formatted_date] = { value: value }
-            end
+
+          start_day = 2.weeks.ago.beginning_of_day.to_date
+          end_day = Time.current.to_date
+
+          sparkline_data = {}
+          (start_day..end_day).each do |day|
+            avg = grouped_daily[day]&.round(0) || 0
+            label = day.strftime("%b %-d")
+            sparkline_data[label] = { value: avg }
+          end
 
           {
             id: "percentile_query_times",
             context: "queries",
             title: "95th Percentile Query Time",
             summary: "#{p95_query_time} ms",
-            line_chart_data: sparkline_data,
+            chart_data: sparkline_data,
             trend_icon: trend_icon,
             trend_amount: trend_amount,
             trend_text: "Compared to last week"

data/app/models/rails_pulse/queries/charts/average_query_times.rb

@@ -12,13 +12,9 @@ module RailsPulse
         end
 
         def to_rails_chart
-          summaries = @ransack_query.result(distinct: false).where(
-            summarizable_type: "RailsPulse::Query",
-            period_type: @period_type
-          )
-
-          summaries = summaries.where(summarizable_id: @query.id) if @query
-          summaries = summaries
+          # The ransack query already contains the correct filters, just add period_type
+          summaries = @ransack_query.result(distinct: false)
+            .where(period_type: @period_type)
             .group(:period_start)
             .having("AVG(avg_duration) > ?", @start_duration || 0)
             .average(:avg_duration)