rails_pulse 0.1.2 → 0.1.3

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

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);
 
@@ -189,15 +204,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 +230,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 +244,7 @@ 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);
+    currentParams.set('limit', this.paginationLimitTarget.value);
 
     // Update the URL's search parameters
     url.search = currentParams.toString();
@@ -237,8 +252,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 +327,218 @@ 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
+    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
+    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/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
 
           {

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

@@ -33,15 +33,20 @@ 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")
+          # 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")
             .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 }
-            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|
+            total = grouped_daily[day] || 0
+            label = day.strftime("%b %-d")
+            sparkline_data[label] = { value: total }
+          end
 
           # Calculate average executions per minute over 2-week period
           total_minutes = 2.weeks / 1.minute

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

@@ -33,15 +33,20 @@ 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",

data/app/models/rails_pulse/query.rb

@@ -9,6 +9,13 @@ module RailsPulse
     # Validations
     validates :normalized_sql, presence: true, uniqueness: true
 
+    # JSON serialization for analysis columns
+    serialize :issues, type: Array, coder: JSON
+    serialize :metadata, type: Hash, coder: JSON
+    serialize :query_stats, type: Hash, coder: JSON
+    serialize :backtrace_analysis, type: Hash, coder: JSON
+    serialize :suggestions, type: Array, coder: JSON
+
     def self.ransackable_attributes(auth_object = nil)
       %w[id normalized_sql average_query_time_ms execution_count total_time_consumed performance_status occurred_at]
     end
@@ -52,6 +59,45 @@ module RailsPulse
       Arel.sql("MAX(rails_pulse_operations.occurred_at)")
     end
 
+    # Analysis helper methods
+    def analyzed?
+      analyzed_at.present?
+    end
+
+    def has_recent_operations?
+      operations.where("occurred_at > ?", 48.hours.ago).exists?
+    end
+
+    def needs_reanalysis?
+      return true unless analyzed?
+
+      # Check if there are new operations since analysis
+      last_operation_time = operations.maximum(:occurred_at)
+      return false unless last_operation_time
+
+      last_operation_time > analyzed_at
+    end
+
+    def analysis_status
+      return "not_analyzed" unless analyzed?
+      return "needs_update" if needs_reanalysis?
+      "current"
+    end
+
+    def issues_by_severity
+      return {} unless analyzed? && issues.present?
+
+      issues.group_by { |issue| issue["severity"] || "unknown" }
+    end
+
+    def critical_issues_count
+      issues_by_severity["critical"]&.count || 0
+    end
+
+    def warning_issues_count
+      issues_by_severity["warning"]&.count || 0
+    end
+
     def to_s
       id
     end

data/app/models/rails_pulse/routes/cards/average_response_times.rb

@@ -36,27 +36,25 @@ 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
+          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 }
+          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
 
           {