rails_pulse 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c6b5219e5da388e0ec200a6382527d227ab0e2ee20faa11e3ce8e49992ce6b8
-  data.tar.gz: 1a713357c2ab7eb454b269f358c9b9fb1939eef9e3d17c8cb7cf9a12cab8206c
+  metadata.gz: 11728d425611e7ab3a9edb171f05638a783d1c8d3ded8dff112bb615e8a18d11
+  data.tar.gz: 3e16c2d59f4f4bd8d2df49625d9f6005edc98dec701212a6052f4abfd1cac6f3
 SHA512:
-  metadata.gz: cf37a0c4d1ac19450ae702ee22b4f460d8b16528a00603d1cbb0fbad6ff5d6b8caf1dca90ff9ec0834683f56651af76ec0d14465c244d3e95482c76a8fcf9ccc
-  data.tar.gz: f150bd31c92462f5c1594368816aaaa60fe6e17ec4e4e0cb67d8b0ff7c0732be9d544df040548c6c80050fea6e66d6f21cf960dcec1b4af6bec4cbb4c318bb24
+  metadata.gz: 443645ed917ef9beea2d642ff8c4a7d2e57cc87559a09e74dfd75d20d18fb0ff11040eac6e825f3ff0af35637ea23757c88b24e78f35e32f64a7660168aa940a
+  data.tar.gz: d11227a7a11c24bff167104e712f9d075a394130a196938ed71b360e6cbc82a8f930672187b92d0009ed5c14fee882ff23d3d88a3df25b1ddeff3a8839452b5b

data/README.md

@@ -60,7 +60,13 @@ Rails Pulse is a comprehensive performance monitoring and debugging gem that pro
 
 ## Screenshots
 
-<img src="app/assets/images/rails_pulse/dashboard.png" alt="Rails Pulse" />
+<table>
+  <tr>
+    <td><img src="app/assets/images/rails_pulse/dashboard.png" alt="Rails Pulse Dashboard" width="400" /></td>
+    <td><img src="app/assets/images/rails_pulse/request.png" alt="Rails Pulse Requests" width="400" /></td>
+  </tr>
+</table>
+
 
 ## Getting Started
 
@@ -101,10 +107,10 @@ end
 Schedule background jobs:
 
 ```ruby
-# Schedule to run 5 minutes past every hour
+# Schedule to run 5 minutes past every hour. cron: 5 * * * *
 RailsPulse::SummaryJob.perform_later
 
-# Schedule to run daily
+# Schedule to run daily. cron: 0 1 * * *
 RailsPulse::CleanupJob.perform_later
 ```
 
@@ -447,7 +453,7 @@ Test individual databases locally:
 # Test with SQLite (default)
 rails test:all
 
-# Test with PostgreSQL  
+# Test with PostgreSQL
 DB=postgresql FORCE_DB_CONFIG=true rails test:all
 
 # Test with MySQL (local only)

data/app/assets/stylesheets/rails_pulse/application.css

@@ -4,25 +4,48 @@
 
 a {
   text-decoration: underline;
-  color: #0048b5;
+  color: var(--color-link);
 }
 
 #header {
-  background-color: #ffc91f;
+  background-color: var(--header-bg);
 }
 
 #header a {
-  color: black
+  color: var(--header-link);
+  text-decoration: none;
 }
 
 #header a:hover {
-  background-color: #ffe284;
+  background-color: transparent;
+  text-decoration: underline;
 }
 
 a:hover {
   cursor: pointer;
 }
 
+/* Dark mode */
+
+/* Dark scheme tweaks via component variables */
+html[data-color-scheme="dark"] .card {
+  /* Scope card surfaces slightly darker than page */
+  --color-bg: rgb(47, 47, 47);
+  --color-border: rgb(64, 64, 64);
+}
+
+/* Header colors are handled by --header-* tokens in base.css */
+
+html[data-color-scheme="dark"] .badge--positive-inverse,
+html[data-color-scheme="dark"] .badge--negative-inverse {
+  --badge-background: rgb(47, 47, 47);
+}
+
+html[data-color-scheme="dark"] .input {
+  --input-background: #535252;
+  --input-border-color: #7e7d7d;
+}
+
 .hidden {
   display: none;
 }
@@ -66,7 +89,7 @@ a:hover {
   height: 16px;
   padding: 2px;
   position: absolute;
-  top: 11px;
+  top: 20px;
 }
 
 /* REQUEST OPERATIONS BAR */

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

@@ -56,3 +56,16 @@
   --badge-border-color: transparent;
   --badge-color: var(--color-negative);
 }
+
+/* Trend badge icon lightening (dark mode only) */
+.badge--trend rails-pulse-icon { color: var(--badge-color, currentColor); }
+html[data-color-scheme="dark"] .badge--trend rails-pulse-icon {
+  /* Lighten icon relative to badge text color for contrast */
+  color: color-mix(in srgb, var(--badge-color) 55%, white 45%);
+}
+
+/* Trend amount lightening (dark mode only) */
+.badge--trend .badge__trend-amount { color: var(--badge-color, currentColor); }
+html[data-color-scheme="dark"] .badge--trend .badge__trend-amount {
+  color: color-mix(in srgb, var(--badge-color) 55%, white 45%);
+}

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

@@ -5,6 +5,10 @@
   --color-text-reversed: white;
   --color-text-subtle: var(--zinc-500);
   --color-link: var(--blue-700);
+  /* Header tokens */
+  --header-bg: #ffc91f;
+  --header-link: black;
+  --header-link-hover-bg: #ffe284;
   --color-border-light: var(--zinc-100);
   --color-border: var(--zinc-200);
   --color-border-dark: var(--zinc-400);
@@ -30,8 +34,9 @@ html[data-color-scheme="dark"] {
   --color-bg: var(--zinc-800);
   --color-text: white;
   --color-text-reversed: black;
-  --color-text-subtle: var(--zinc-400);
-  --color-link: var(--blue-400);
+  --color-text-subtle: var(--zinc-300);
+  /* Use brand yellow for links in dark mode */
+  --color-link: #ffc91f;
   --color-border-light: var(--zinc-900);
   --color-border: var(--zinc-800);
   --color-border-dark: var(--zinc-600);
@@ -39,6 +44,11 @@ html[data-color-scheme="dark"] {
   --color-selected-dark: var(--blue-800);
   --color-highlight: var(--yellow-900);
 
+  /* Header tokens */
+  --header-bg: rgb(32, 32, 32);
+  --header-link: #ffc91f;
+  --header-link-hover-bg: #ffe284; /* keep existing hover color */
+
   /* Accent colors */
   --color-primary: var(--zinc-50);
   --color-secondary: var(--zinc-800);

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

@@ -0,0 +1,30 @@
+.collapsible-code.collapsed pre {
+  max-height: 4.5em;
+  overflow: hidden;
+  position: relative;
+}
+
+.collapsible-code.collapsed pre::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1em;
+  background: linear-gradient(transparent, var(--color-border-light));
+  pointer-events: none;
+}
+
+.collapsible-toggle {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-link);
+  text-decoration: underline;
+  transform: lowercase;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  font-weight: normal;
+  margin-left: 10px;
+}

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

@@ -31,6 +31,5 @@
     left: var(--popover-x, 0) !important;
     top: var(--popover-y, 0) !important;
     margin: 0 !important;
-    inset: unset !important;
   }
 }

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

@@ -3,22 +3,74 @@
   justify-content: space-between;
   width: 100%;
   gap: var(--column-gap, 0.5rem);
+  align-items: stretch;
 }
 
 .row > * {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Stack items on smaller screens */
+/* Ensure metric cards and their panels stretch to full height */
+.row > .grid-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.row > .grid-item > * {
+  flex: 1;
+}
+
+/* Responsive layout for screens smaller than 768px */
 @media (max-width: 768px) {
   .row {
-      flex-direction: column;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
       gap: 0.5rem;
+      align-items: flex-start;
   }
 
   .row > * {
+      flex: 0 0 calc(50% - 0.25rem);
+      min-width: 0;
+      height: auto;
+  }
+
+  .row > .grid-item {
+      height: auto;
+  }
+
+  .row > .grid-item > * {
       flex: none;
-      width: 100%;
+  }
+
+  /* Tables should stack in single column on mobile */
+  .row:has(.table-container) > * {
+      flex: 0 0 100%;
+  }
+
+  /* Single column for very small screens */
+  @media (max-width: 480px) {
+    .row > * {
+        flex: 0 0 100%;
+    }
+
+    .row > .grid-item {
+        min-height: auto;
+    }
+
+    /* Make metric cards more compact on mobile */
+    .row > .grid-item .card {
+        padding: var(--size-3);
+    }
+
+    /* Make charts smaller on mobile */
+    .row > .grid-item .chart-container {
+        height: 60px !important;
+        max-height: 60px;
+    }
   }
 }

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
@@ -75,7 +109,18 @@ module RailsPulse
 
     def build_table_results
       if show_action?
+        # Only show operations that belong to time periods where we have query summaries
+        # This ensures the table data is consistent with the chart data
         @ransack_query.result
+          .joins(<<~SQL)
+            INNER JOIN rails_pulse_summaries ON
+              rails_pulse_summaries.summarizable_id = rails_pulse_operations.query_id AND
+              rails_pulse_summaries.summarizable_type = 'RailsPulse::Query' AND
+              rails_pulse_summaries.period_type = '#{period_type}' AND
+              rails_pulse_operations.occurred_at >= rails_pulse_summaries.period_start AND
+              rails_pulse_operations.occurred_at < rails_pulse_summaries.period_end
+          SQL
+          .distinct
       else
         Queries::Tables::Index.new(
           ransack_query: @ransack_query,

data/app/controllers/rails_pulse/requests_controller.rb

@@ -40,7 +40,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,8 +64,18 @@ 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
         .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",
@@ -72,6 +84,7 @@ module RailsPulse
           "rails_pulse_requests.route_id",
           "rails_pulse_routes.path"
         )
+        .distinct
     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/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, 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/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 }}))
   }
 }