solid_apm 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3d5be7324da26b5f4720bc0ba9e61717be304286b9ecad84e09adf503095699
-  data.tar.gz: 8969d758c906bb7de44b4024e1f7353bc63f1f4dda0f2ee5631df1e2fa436e2e
+  metadata.gz: 96ffe2124d7df431b9e6d3bc95f0ed77d047bf387d1dce1008f5bc654519b7b7
+  data.tar.gz: c4ae53a38929c8eb07e30be80e372c07e0e846165295222857008fc5cf442950
 SHA512:
-  metadata.gz: 1ed2237e30cabd350515555a5e6a66006777835d4e07adcc2dc2758f0fe8e474e931e3da204f44309671923ba1eb1fbcbc32203eaf459a6cebffc2eb3030f3fa
-  data.tar.gz: fb86bb4e14bf08207255ca5e0121b6e50a5ba43e3a4d394d777362df614d47d25e0d54508a66660c01c7ecccf3c53cc00b395981bee6a32378a5903ca64dd268
+  metadata.gz: d1278425ff0312598f4d75676c5e6ba6eb1e97d6033dfbc45f85e107323aa334a695c75f4118e7d312b28b5640426d6a4725cb3fa8ed37d5d261f9336c349c94
+  data.tar.gz: e0397780ca57f21a8495d02473f67fd0ab3ad9fa60975d6062a13269a07d6a2a1ad87a32c7201f1891f726cbccc7b8282e14e42bd17fe300bf05eac5a8d9cefe

data/app/assets/javascripts/solid_apm/application.js

@@ -4,6 +4,25 @@ import {
 } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
 window.Stimulus = Application.start();
 
+// Global function for chart selection
+window.handleChartSelection = function(minTimestamp, maxTimestamp) {
+  const currentUrl = new URL(window.location.href);
+  const params = new URLSearchParams(currentUrl.search);
+  
+  // Convert from milliseconds to seconds (ApexCharts provides timestamps in milliseconds)
+  params.set('from_timestamp', Math.floor(minTimestamp / 1000));
+  params.set('to_timestamp', Math.floor(maxTimestamp / 1000));
+  
+  // Remove relative time params
+  params.delete('from_value');
+  params.delete('from_unit');
+  params.delete('to_value');
+  params.delete('to_unit');
+  
+  // Navigate to the new URL
+  window.location.href = `${currentUrl.pathname}?${params.toString()}`;
+};
+
 //= require_tree .
 
 // require "./controllers/spans-chart_controller"

data/app/assets/javascripts/solid_apm/time_range_form.js

@@ -0,0 +1,219 @@
+class TimeRangeForm {
+  constructor() {
+    this.form = document.getElementById('time-range-form');
+    this.relativeTab = document.getElementById('relative-tab');
+    this.absoluteTab = document.getElementById('absolute-tab');
+    this.relativePanel = document.getElementById('relative-panel');
+    this.absolutePanel = document.getElementById('absolute-panel');
+    this.customFromControl = document.getElementById('custom-from-control');
+    this.customToControl = document.getElementById('custom-to-control');
+    
+    // Timezone handling
+    this.browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    this.timezoneOffset = new Date().getTimezoneOffset();
+    
+    this.init();
+  }
+  
+  init() {
+    this.setupEventListeners();
+    this.initializeFormState();
+    this.addTimezoneToForm();
+    this.adjustAbsoluteTimes();
+  }
+  
+  setupEventListeners() {
+    if (this.form) {
+      this.form.addEventListener('submit', (e) => this.handleFormSubmit(e));
+    }
+  }
+  
+  switchToRelative(event) {
+    event.preventDefault();
+    
+    this.relativeTab.classList.add('is-primary');
+    this.absoluteTab.classList.remove('is-primary');
+    this.relativePanel.classList.remove('is-hidden');
+    this.absolutePanel.classList.add('is-hidden');
+    
+    this.removeFields(['from_timestamp', 'to_timestamp']);
+    this.cleanupUrlParams(['from_timestamp', 'to_timestamp', 'from_datetime', 'to_datetime']);
+  }
+  
+  switchToAbsolute(event) {
+    event.preventDefault();
+    
+    this.absoluteTab.classList.add('is-primary');
+    this.relativeTab.classList.remove('is-primary');
+    this.absolutePanel.classList.remove('is-hidden');
+    this.relativePanel.classList.add('is-hidden');
+    
+    this.cleanupUrlParams(['quick_range', 'from_value', 'from_unit', 'to_value', 'to_unit', 'quick_range_apply']);
+  }
+  
+  handleQuickRangeChange(select) {
+    const isCustom = select.value === 'custom';
+    
+    this.toggleVisibility(this.customFromControl, isCustom);
+    this.toggleVisibility(this.customToControl, isCustom);
+    
+    if (!isCustom) {
+      this.applyQuickRange();
+    }
+  }
+  
+  applyQuickRange() {
+    const quickRangeSelect = this.form.querySelector('[name="quick_range"]');
+    if (!quickRangeSelect || quickRangeSelect.value === 'custom') return;
+    
+    this.removeFields(['from_datetime', 'to_datetime', 'from_timestamp', 'to_timestamp']);
+    this.addHiddenField('quick_range_apply', quickRangeSelect.value);
+    this.form.submit();
+  }
+  
+  handleFormSubmit(event) {
+    const isAbsoluteMode = !this.absolutePanel.classList.contains('is-hidden');
+    
+    if (isAbsoluteMode) {
+      this.handleAbsoluteModeSubmit();
+    } else {
+      this.handleRelativeModeSubmit();
+    }
+  }
+  
+  handleAbsoluteModeSubmit() {
+    const fromDatetime = this.form.querySelector('[name="from_datetime"]');
+    const toDatetime = this.form.querySelector('[name="to_datetime"]');
+    
+    if (fromDatetime?.value && toDatetime?.value) {
+      const fromTimestamp = Math.floor(new Date(fromDatetime.value).getTime() / 1000);
+      const toTimestamp = Math.floor(new Date(toDatetime.value).getTime() / 1000);
+      
+      fromDatetime.disabled = true;
+      toDatetime.disabled = true;
+      
+      this.addHiddenField('from_timestamp', fromTimestamp);
+      this.addHiddenField('to_timestamp', toTimestamp);
+      this.addHiddenField('browser_timezone', this.browserTimezone);
+      this.removeFields(['quick_range', 'from_value', 'from_unit', 'to_value', 'to_unit', 'quick_range_apply']);
+    }
+  }
+  
+  handleRelativeModeSubmit() {
+    const quickRangeSelect = this.form.querySelector('[name="quick_range"]');
+    const quickRangeValue = quickRangeSelect?.value;
+    
+    if (quickRangeValue && quickRangeValue !== 'custom') {
+      this.removeFields(['from_value', 'from_unit', 'to_value', 'to_unit', 'quick_range_apply']);
+    } else if (quickRangeValue === 'custom') {
+      this.removeFields(['quick_range_apply']);
+    }
+    
+    this.removeFields(['from_datetime', 'to_datetime', 'from_timestamp', 'to_timestamp']);
+  }
+  
+  initializeFormState() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const hasCustomParams = urlParams.has('from_value') && urlParams.has('from_unit');
+    const hasQuickRange = urlParams.has('quick_range') && urlParams.get('quick_range') !== 'custom';
+    const quickRangeSelect = this.form.querySelector('[name="quick_range"]');
+    
+    if (hasQuickRange) {
+      this.toggleVisibility(this.customFromControl, false);
+      this.toggleVisibility(this.customToControl, false);
+    } else if (hasCustomParams || urlParams.get('quick_range') === 'custom') {
+      if (quickRangeSelect) quickRangeSelect.value = 'custom';
+      this.toggleVisibility(this.customFromControl, true);
+      this.toggleVisibility(this.customToControl, true);
+    } else {
+      // Default state - show quick range only
+      this.toggleVisibility(this.customFromControl, false);
+      this.toggleVisibility(this.customToControl, false);
+    }
+  }
+  
+  // Utility methods
+  removeFields(fieldNames) {
+    fieldNames.forEach(name => {
+      this.form.querySelectorAll(`[name="${name}"]`).forEach(field => field.remove());
+    });
+  }
+  
+  addHiddenField(name, value) {
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value;
+    this.form.appendChild(input);
+  }
+  
+  toggleVisibility(element, show) {
+    if (!element) return;
+    element.classList.toggle('is-hidden', !show);
+  }
+  
+  cleanupUrlParams(params) {
+    const url = new URL(window.location);
+    params.forEach(param => url.searchParams.delete(param));
+    window.history.replaceState({}, '', url);
+  }
+  
+  // Timezone-related methods
+  addTimezoneToForm() {
+    // Add timezone information to form for server processing
+    this.addHiddenField('browser_timezone', this.browserTimezone);
+  }
+  
+  adjustAbsoluteTimes() {
+    // Convert timestamps from URL to browser timezone for datetime-local inputs
+    const urlParams = new URLSearchParams(window.location.search);
+    const fromTimestamp = urlParams.get('from_timestamp');
+    const toTimestamp = urlParams.get('to_timestamp');
+    
+    if (fromTimestamp && toTimestamp) {
+      const fromDatetime = this.form.querySelector('[name="from_datetime"]');
+      const toDatetime = this.form.querySelector('[name="to_datetime"]');
+      
+      if (fromDatetime && toDatetime) {
+        // Convert UTC timestamps to local datetime strings
+        const fromDate = new Date(parseInt(fromTimestamp) * 1000);
+        const toDate = new Date(parseInt(toTimestamp) * 1000);
+        
+        fromDatetime.value = this.formatDatetimeLocal(fromDate);
+        toDatetime.value = this.formatDatetimeLocal(toDate);
+      }
+    }
+  }
+  
+  formatDatetimeLocal(date) {
+    // Format date for datetime-local input (YYYY-MM-DDTHH:MM)
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+}
+
+// Global functions for onclick handlers (maintaining backward compatibility)
+let timeRangeFormInstance;
+
+function switchToRelative(event) {
+  timeRangeFormInstance?.switchToRelative(event);
+}
+
+function switchToAbsolute(event) {
+  timeRangeFormInstance?.switchToAbsolute(event);
+}
+
+function handleQuickRangeChange(select) {
+  timeRangeFormInstance?.handleQuickRangeChange(select);
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+  timeRangeFormInstance = new TimeRangeForm();
+});

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

@@ -13,3 +13,47 @@
  *= require_tree .
  *= require_self
  */
+
+/* Time Range Component Enhancements */
+#time-range-form .box {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+#time-range-form .tabs ul {
+  border-bottom: 1px solid #dbdbdb;
+}
+
+#time-range-form .field.has-addons .control:not(:last-child) .input,
+#time-range-form .field.has-addons .control:not(:last-child) .select select {
+  border-right: none;
+}
+
+#time-range-form .field.has-addons .control:not(:first-child) .input,
+#time-range-form .field.has-addons .control:not(:first-child) .select select {
+  border-left: none;
+}
+
+#time-range-form .label.is-small {
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+/* Chart Container Enhancements */
+#charts-container .level {
+  margin-bottom: 0.75rem;
+}
+
+#charts-container .tags.has-addons .tag {
+  font-size: 0.75rem;
+}
+
+/* Smooth transitions */
+#relative-panel,
+#absolute-panel,
+#custom-relative-range {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.is-hidden {
+  display: none !important;
+}

data/app/controllers/solid_apm/transactions_controller.rb

@@ -13,13 +13,12 @@ module SolidApm
       end
 
       @transactions_scope = Transaction.where(timestamp: from_to_range)
-      if params[:name].present?
-        @transactions_scope = @transactions_scope.where(name: params[:name])
-      end
+      @transactions_scope = @transactions_scope.where(name: params[:name]) if params[:name].present?
       transaction_names = @transactions_scope.distinct.pluck(:name)
       latency_95p = @transactions_scope.group(:name).percentile(:duration, 0.95)
       latency_median = @transactions_scope.group(:name).median(:duration)
-      tmp_dict = @transactions_scope.group(:name).group_by_minute(:timestamp, series: false).count.each_with_object({}) do |(k, v), h|
+      tmp_dict = @transactions_scope.group(:name).group_by_minute(:timestamp,
+                                                                  series: false).count.each_with_object({}) do |(k, v), h|
         current_value = h[k.first] ||= 0
         h[k.first] = v if v > current_value
       end
@@ -38,6 +37,7 @@ module SolidApm
       end
 
       return if @aggregated_transactions.empty?
+
       # Find the maximum and minimum impact values
       max_impact = @aggregated_transactions.values.max_by(&:impact).impact
       min_impact = @aggregated_transactions.values.min_by(&:impact).impact
@@ -50,9 +50,13 @@ module SolidApm
       end
       @aggregated_transactions = @aggregated_transactions.sort_by { |_, v| -v.impact }.to_h
 
-      scope = @transactions_scope.group_by_second(:timestamp, n: n_intervals_seconds(from_to_range))
+      grouping_method, grouping_options = smart_time_grouping(from_to_range)
+      scope = @transactions_scope.public_send(grouping_method, :timestamp, range: from_to_range, **grouping_options)
       @throughput_data = scope.count
       @latency_data = scope.median(:duration).transform_values(&:to_i)
+
+      # Pass browser timezone info to view for chart rendering
+      @browser_timezone = params[:browser_timezone]
     end
 
     def spans
@@ -63,15 +67,71 @@ module SolidApm
     private
 
     def from_to_range
-      params[:from_value] ||= 60
-      params[:from_unit] ||= 'minutes'
-      from = params[:from_value].to_i.public_send(params[:from_unit].to_sym).ago
-      params[:to_value] ||= 1
-      params[:to_unit] ||= 'seconds'
-      to = params[:to_value].to_i.public_send(params[:to_unit].to_sym).ago
+      if params[:from_timestamp].present? && params[:to_timestamp].present?
+        # Timestamps from browser are already in UTC/local time
+        from = Time.zone.at(params[:from_timestamp].to_i)
+        to = Time.zone.at(params[:to_timestamp].to_i)
+      elsif params[:quick_range_apply].present? || (params[:quick_range].present? && params[:quick_range] != 'custom')
+        to = Time.current
+        quick_range_value = params[:quick_range_apply] || params[:quick_range]
+        from = case quick_range_value
+               when '5m'
+                 5.minutes.ago
+               when '15m'
+                 15.minutes.ago
+               when '30m'
+                 30.minutes.ago
+               when '1h'
+                 1.hour.ago
+               when '3h'
+                 3.hours.ago
+               when '6h'
+                 6.hours.ago
+               when '12h'
+                 12.hours.ago
+               when '24h'
+                 24.hours.ago
+               when '3d'
+                 3.days.ago
+               when '7d'
+                 7.days.ago
+               else
+                 1.hour.ago
+               end
+      elsif params[:from_value].present? && params[:from_unit].present?
+        from = params[:from_value].to_i.public_send(params[:from_unit].to_sym).ago
+        to_value = params[:to_value].present? ? params[:to_value].to_i : 0
+        to_unit = params[:to_unit].present? ? params[:to_unit] : 'seconds'
+        to = to_value.public_send(to_unit.to_sym).ago
+      else
+        # Default fallback
+        from = 1.hour.ago
+        to = Time.current
+      end
       (from..to)
     end
 
+    def smart_time_grouping(range)
+      duration_seconds = (range.end - range.begin).to_i
+
+      case duration_seconds
+      when 0..3600 # 1 hour or less - group by minute
+        [:group_by_minute, {}]
+      when 3601..86_400 # 1-24 hours - group by 15 minutes
+        [:group_by_minute, { n: 15 }]
+      when 86_401..604_800 # 1-7 days - group by hour
+        [:group_by_hour, {}]
+      when 604_801..2_592_000 # 1 week to 1 month - group by 6 hours
+        [:group_by_hour, { n: 6 }]
+      when 2_592_001..7_776_000 # 1-3 months - group by day
+        [:group_by_day, {}]
+      when 7_776_001..31_536_000 # 3 months to 1 year - group by week
+        [:group_by_week, {}]
+      else # more than 1 year - group by month
+        [:group_by_month, {}]
+      end
+    end
+
     def n_intervals_seconds(range, intervals_count: 30)
       start_time = range.begin
       end_time = range.end
@@ -85,7 +145,9 @@ module SolidApm
       time_range_in_seconds = (end_time - start_time).to_i
       time_interval_duration_in_seconds = (time_range_in_seconds / intervals_count.to_f).round
 
-      items.chunk { |item| Time.zone.at((item.created_at.to_i) / time_interval_duration_in_seconds * time_interval_duration_in_seconds, 0) }.to_h
+      items.chunk do |item|
+        Time.zone.at(item.created_at.to_i / time_interval_duration_in_seconds * time_interval_duration_in_seconds, 0)
+      end.to_h
     end
   end
 end

data/app/helpers/solid_apm/application_helper.rb

@@ -19,33 +19,90 @@ module SolidApm
       end
     end
 
-    def area_chart_options
+    def area_chart_options(browser_timezone: nil)
+      timezone_js = if browser_timezone.present?
+                      "if (!val) return ''; return new Date(val).toLocaleString('en-US', { timeZone: '#{browser_timezone}', hour12: false })"
+                    else
+                      "if (!val) return ''; return new Date(val).toLocaleString('en-US', { hour12: false })"
+                    end
+
+      # Create date formatter for x-axis labels that respects timezone
+      xaxis_formatter = if browser_timezone.present?
+                          "if (!val) return ''; return new Date(val).toLocaleString('en-US', { timeZone: '#{browser_timezone}', hour: '2-digit', minute: '2-digit', day: '2-digit', month: 'short', hour12: false })"
+                        else
+                          "if (!val) return ''; return new Date(val).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: 'short', hour12: false })"
+                        end
+
       {
         module: true,
         chart: {
-          type: 'area', height: '200', background: '0', foreColor: '#ffffff55', zoom: {
-            enabled: false,
-          }, toolbar: {
-            show: false,
+          type: 'area',
+          height: '200',
+          background: '0',
+          foreColor: '#ffffff55',
+          zoom: {
+            enabled: true,
+            autoScaleYaxis: true
+          },
+          selection: {
+            enabled: true,
+            type: 'x'
+          },
+          toolbar: {
+            show: false
+          },
+          events: {
+            zoomed: {
+              function: {
+                args: 'chartContext, { xaxis, yaxis }',
+                body: 'handleChartSelection(xaxis.min, xaxis.max)'
+              }
+            },
+            selection: {
+              function: {
+                args: 'chartContext, { xaxis, yaxis }',
+                body: 'handleChartSelection(xaxis.min, xaxis.max)'
+              }
+            }
           }
         },
         xaxis: {
-        type: 'datetime',
-        tooltip: {
+          type: 'datetime',
+          tooltip: {
+            enabled: false
+          },
+          labels: {
+            formatter: {
+              function: {
+                args: 'val',
+                body: xaxis_formatter
+              }
+            }
+          }
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+        theme: {
+          mode: 'dark'
+        },
+        grid: {
+          show: true,
+          borderColor: '#ffffff55'
+        },
+        dataLabels: {
           enabled: false
-
+        },
+        tooltip: {
+          x: {
+            formatter: {
+              function: {
+                args: 'val',
+                body: timezone_js
+              }
+            }
+          }
         }
-      },
-        stroke: {
-        curve: 'smooth'
-      }, theme: {
-        mode: 'dark',
-      }, grid: {
-        show: true, borderColor: '#ffffff55',
-      }, dataLabels: {
-        enabled: false
-      },
-       tooltip: {x: {formatter: {function: {args: "val", body: "return new Date(val).toLocaleString()"}} }}
       }
     end
   end

data/app/views/solid_apm/application/_time_range_form.html.erb

@@ -1,34 +1,104 @@
-<%= form_with path: transactions_path, method: :get do |f| %>
-  <div class="is-flex is-flex-direction-row is-justify-content-center is-align-items-center" style="gap: 1em">
-    <%= f.number_field :from_value, value: params[:from_value] || 60, min: 1, class: 'input', style: 'width: 6em' %>
-    <div class="select">
-      <%= f.select :from_unit, {
-        "minutes" => "minutes",
-        "hours" => "hours",
-        "days" => "days",
-        "weeks" => "weeks",
-        "months" => "months",
-        "years" => "years"
-      }, {selected: params[:from_unit] || 'minutes' } %>
+<%
+  is_absolute_mode = params[:from_timestamp].present?
+  is_custom_range = (params[:from_value].present? && params[:from_unit].present?) || params[:quick_range] == 'custom'
+  
+  time_ranges = {
+    "Last 5 minutes" => "5m", "Last 15 minutes" => "15m", "Last 30 minutes" => "30m",
+    "Last 1 hour" => "1h", "Last 3 hours" => "3h", "Last 6 hours" => "6h", 
+    "Last 12 hours" => "12h", "Last 24 hours" => "24h", "Last 3 days" => "3d",
+    "Last 7 days" => "7d", "Custom" => "custom"
+  }
+  
+  time_units = %w[minutes hours days weeks months]
+  to_time_units = %w[seconds minutes hours days weeks]
+%>
+
+<%= form_with path: transactions_path, method: :get, local: true, id: 'time-range-form' do |f| %>
+  <div class="field is-grouped is-justify-content-center" style="margin-bottom: 1rem;">
+    <div class="control">
+      <div class="buttons has-addons">
+        <% [['Relative', !is_absolute_mode], ['Absolute', is_absolute_mode]].each do |label, is_active| %>
+          <button type="button" 
+                  class="button is-small <%= 'is-primary' if is_active %>" 
+                  id="<%= label.downcase %>-tab" 
+                  onclick="switchTo<%= label %>(event)">
+            <%= label %>
+          </button>
+        <% end %>
+      </div>
     </div>
-    <b>→</b>
-    <%= f.number_field :to_value, value: params[:to_value] || 1, min: 1, class: 'input', style: 'width: 6em' %>
-    <div class="select">
-      <%= f.select :to_unit, {
-        "seconds" => "seconds",
-        "minutes" => "minutes",
-        "hours" => "hours",
-        "days" => "days",
-        "weeks" => "weeks",
-        "months" => "months",
-        "years" => "years"
-      }, {selected: params[:to_unit] || 'seconds' } %>
+
+  </div>
+
+  <div id="relative-panel" class="<%= 'is-hidden' if is_absolute_mode %>">
+    <div class="field is-grouped is-grouped-centered is-align-items-end" style="flex-wrap: nowrap;">
+      <div class="control">
+        <div class="select">
+          <%= f.select :quick_range, time_ranges, {
+            selected: params[:quick_range] || (is_custom_range ? 'custom' : '1h'),
+            include_blank: false
+          }, {
+            class: 'select-input',
+            onchange: 'handleQuickRangeChange(this)'
+          } %>
+        </div>
+      </div>
+
+      <% [
+        { field: :from_value, default: 60, min: 1, units: time_units, default_unit: 'minutes', label: 'From', id: 'custom-from-control' },
+        { field: :to_value, default: 0, min: 0, units: to_time_units, default_unit: 'seconds', label: 'To', id: 'custom-to-control' }
+      ].each do |config| %>
+        <div class="control <%= 'is-hidden' unless is_custom_range %>" id="<%= config[:id] %>">
+          <label class="label is-small"><%= config[:label] %></label>
+          <div class="field has-addons">
+            <div class="control">
+              <%= f.number_field config[:field], 
+                    value: params[config[:field]] || config[:default], 
+                    min: config[:min], 
+                    class: 'input has-text-centered', 
+                    style: 'width: 3.5em' %>
+            </div>
+            <div class="control">
+              <div class="select">
+                <%= f.select "#{config[:field].to_s.split('_')[0]}_unit", config[:units], 
+                           { selected: params["#{config[:field].to_s.split('_')[0]}_unit"] || config[:default_unit] } %>
+              </div>
+            </div>
+            <div class="control">
+              <span class="button is-static">ago</span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <div class="control">
+        <%= f.submit 'Apply', class: 'button is-primary' %>
+      </div>
     </div>
+  </div>
 
-    <% if params[:name] %>
-      <%= f.hidden_field :name, value: params[:name] %>
-    <% end %>
+  <%= f.hidden_field :name, value: params[:name] if params[:name] %>
 
-    <%= f.submit 'Apply', class: 'button' %>
+  <div id="absolute-panel" class="<%= 'is-hidden' unless is_absolute_mode %>">
+    <div class="field is-grouped is-grouped-centered is-align-items-end">
+      <% [['from', 1.hour.ago], ['to', Time.current]].each do |prefix, default_time| %>
+        <div class="control">
+          <label class="label is-small">
+            <%= prefix.capitalize %>
+          </label>
+          <%= f.datetime_local_field "#{prefix}_datetime", 
+                value: (params["#{prefix}_timestamp"] ? 
+                        Time.zone.at(params["#{prefix}_timestamp"].to_i).strftime('%Y-%m-%dT%H:%M') : 
+                        default_time.strftime('%Y-%m-%dT%H:%M')),
+                class: 'input',
+                id: "#{prefix}_datetime" %>
+        </div>
+      <% end %>
+      <div class="control">
+        <%= f.submit 'Apply', class: 'button is-primary' %>
+      </div>
+    </div>
   </div>
 <% end %>
+
+<%= javascript_include_tag 'solid_apm/time_range_form' %>

data/app/views/solid_apm/transactions/_charts.html.erb

@@ -1,10 +1,94 @@
-<div class="columns pt-2" style="height: 16em">
+<div class="columns pt-2" style="height: 16em" id="charts-container">
   <div class="column">
-    <h2 class="ml-4">Throughput</h2>
-    <%= area_chart({ name: 'tmp', data: @throughput_data }, area_chart_options.merge(colors: ['#43BCCD'])) %>
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <h2 class="title is-5">Throughput</h2>
+        </div>
+      </div>
+    </div>
+    <div id="throughput-chart">
+      <%= area_chart({ name: 'req/min', data: @throughput_data }, area_chart_options(browser_timezone: @browser_timezone).merge(colors: ['#43BCCD'], refresh: 30)) %>
+    </div>
   </div>
   <div class="column">
-    <h2 class="ml-4">Latency</h2>
-    <%= area_chart({ name: 'ms', data: @latency_data }, area_chart_options.merge(colors: ['#13d8aa'])) %>
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <h2 class="title is-5">Latency</h2>
+        </div>
+      </div>
+    </div>
+    <div id="latency-chart">
+      <%= area_chart({ name: 'ms', data: @latency_data }, area_chart_options(browser_timezone: @browser_timezone).merge(colors: ['#13d8aa'], refresh: 30)) %>
+    </div>
   </div>
 </div>
+
+<script>
+// Chart selection functionality for time range
+function handleChartSelection(minTimestamp, maxTimestamp) {
+  const form = document.getElementById('time-range-form');
+  if (!form) return;
+  
+  // Convert chart selection to timestamps
+  const fromTimestamp = Math.floor(minTimestamp / 1000);
+  const toTimestamp = Math.floor(maxTimestamp / 1000);
+  
+  // Get browser timezone
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  
+  // Create new URL with absolute time range
+  const url = new URL(window.location.href);
+  url.searchParams.set('from_timestamp', fromTimestamp);
+  url.searchParams.set('to_timestamp', toTimestamp);
+  url.searchParams.set('browser_timezone', browserTimezone);
+  
+  // Remove relative time parameters
+  ['quick_range', 'quick_range_apply', 'from_value', 'from_unit', 'to_value', 'to_unit'].forEach(param => {
+    url.searchParams.delete(param);
+  });
+  
+  // Navigate to new URL
+  window.location.href = url.toString();
+}
+
+// Chart refresh functionality
+function refreshCharts() {
+  const form = document.getElementById('time-range-form');
+  if (form) {
+    const formData = new FormData(form);
+    const params = new URLSearchParams(formData);
+    
+    fetch('<%= transactions_path %>?' + params.toString(), {
+      headers: {
+        'Accept': 'text/html',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+    .then(response => response.text())
+    .then(html => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      const newChartsContainer = doc.getElementById('charts-container');
+      if (newChartsContainer) {
+        document.getElementById('charts-container').innerHTML = newChartsContainer.innerHTML;
+      }
+    })
+    .catch(error => console.error('Error refreshing charts:', error));
+  }
+}
+
+// Auto-refresh charts based on time range
+document.addEventListener('DOMContentLoaded', function() {
+  const currentUrl = new URL(window.location.href);
+  const hasRecentTimeRange = currentUrl.searchParams.get('quick_range_apply') === '5m' || 
+                           currentUrl.searchParams.get('quick_range_apply') === '15m' ||
+                           currentUrl.searchParams.get('quick_range_apply') === '30m';
+  
+  if (hasRecentTimeRange) {
+    // Auto-refresh every 30 seconds for recent time ranges
+    setInterval(refreshCharts, 30000);
+  }
+});
+</script>

data/lib/solid_apm/version.rb

@@ -1,3 +1,3 @@
 module SolidApm
-  VERSION = "0.10.0"
+  VERSION = "0.11.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_apm
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.11.0
 platform: ruby
 authors:
 - Jean-Francis Bastien
@@ -119,6 +119,7 @@ files:
 - Rakefile
 - app/assets/config/solid_apm_manifest.js
 - app/assets/javascripts/solid_apm/application.js
+- app/assets/javascripts/solid_apm/time_range_form.js
 - app/assets/stylesheets/solid_apm/application.css
 - app/controllers/solid_apm/application_controller.rb
 - app/controllers/solid_apm/spans_controller.rb