solid_queue_monitor 0.5.0 → 1.0.0

data/app/services/solid_queue_monitor/chart_presenter.rb

@@ -0,0 +1,239 @@
+# frozen_string_literal: true
+
+module SolidQueueMonitor
+  class ChartPresenter
+    CHART_WIDTH = 1200
+    CHART_HEIGHT = 280
+    PADDING = { top: 40, right: 30, bottom: 60, left: 60 }.freeze
+    COLORS = {
+      created: '#3b82f6',   # Blue
+      completed: '#10b981', # Green
+      failed: '#ef4444'     # Red
+    }.freeze
+
+    def initialize(chart_data)
+      @data = chart_data
+      @plot_width = CHART_WIDTH - PADDING[:left] - PADDING[:right]
+      @plot_height = CHART_HEIGHT - PADDING[:top] - PADDING[:bottom]
+    end
+
+    def render
+      <<-HTML
+        <div class="chart-section" id="chart-section">
+          <div class="chart-header">
+            <div class="chart-header-left">
+              <button class="chart-toggle-btn" id="chart-toggle-btn" title="Toggle chart">
+                <svg class="chart-toggle-icon" id="chart-toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </button>
+              <h3>Job Activity</h3>
+              #{render_summary}
+            </div>
+            #{render_time_select}
+          </div>
+          <div class="chart-collapsible" id="chart-collapsible">
+            <div class="chart-container">
+              #{render_svg}
+            </div>
+            #{render_legend}
+          </div>
+        </div>
+        #{render_tooltip}
+      HTML
+    end
+
+    private
+
+    def render_summary
+      totals = @data[:totals] || { created: 0, completed: 0, failed: 0 }
+      <<-HTML
+        <span class="chart-summary">
+          <span class="summary-item summary-created">#{totals[:created]} created</span>
+          <span class="summary-separator">·</span>
+          <span class="summary-item summary-completed">#{totals[:completed]} completed</span>
+          <span class="summary-separator">·</span>
+          <span class="summary-item summary-failed">#{totals[:failed]} failed</span>
+        </span>
+      HTML
+    end
+
+    def render_time_select
+      options = @data[:available_ranges].map do |key, label|
+        selected = key == @data[:time_range] ? 'selected' : ''
+        "<option value=\"#{key}\" #{selected}>#{label}</option>"
+      end.join
+
+      <<-HTML
+        <div class="chart-time-select-wrapper">
+          <select class="chart-time-select" id="chart-time-select" onchange="window.location.href='?time_range=' + this.value">
+            #{options}
+          </select>
+        </div>
+      HTML
+    end
+
+    def render_svg
+      return render_empty_state if all_series_empty?
+
+      max_value = calculate_max_value
+      max_value = 10 if max_value.zero?
+
+      <<-SVG
+        <svg viewBox="0 0 #{CHART_WIDTH} #{CHART_HEIGHT}" class="job-activity-chart" preserveAspectRatio="xMidYMid meet">
+          #{render_grid_lines(max_value)}
+          #{render_axes}
+          #{render_x_labels}
+          #{render_y_labels(max_value)}
+          #{render_series_line(:failed, max_value)}
+          #{render_series_line(:completed, max_value)}
+          #{render_series_line(:created, max_value)}
+          #{render_series_points(:failed, max_value)}
+          #{render_series_points(:completed, max_value)}
+          #{render_series_points(:created, max_value)}
+        </svg>
+      SVG
+    end
+
+    def all_series_empty?
+      %i[created completed failed].all? { |series| series_empty?(series) }
+    end
+
+    def series_empty?(series)
+      @data[series].nil? || @data[series].all?(&:zero?)
+    end
+
+    def render_empty_state
+      <<-HTML
+        <div class="chart-empty">
+          <span>No job activity in this time range</span>
+        </div>
+      HTML
+    end
+
+    def render_series_line(series, max_value)
+      return '' if series_empty?(series)
+
+      render_line(series, max_value)
+    end
+
+    def render_series_points(series, max_value)
+      return '' if series_empty?(series)
+
+      render_data_points(series, max_value)
+    end
+
+    def calculate_max_value
+      all_values = @data[:created] + @data[:completed] + @data[:failed]
+      max = all_values.max || 0
+      # Round up to nice number
+      return 10 if max <= 10
+
+      magnitude = 10**Math.log10(max).floor
+      ((max.to_f / magnitude).ceil * magnitude)
+    end
+
+    def render_grid_lines(_max_value)
+      lines = []
+      5.times do |i|
+        y = PADDING[:top] + (@plot_height * i / 4.0)
+        lines << "<line x1=\"#{PADDING[:left]}\" y1=\"#{y}\" x2=\"#{CHART_WIDTH - PADDING[:right]}\" y2=\"#{y}\" class=\"grid-line\"/>"
+      end
+      lines.join("\n")
+    end
+
+    def render_axes
+      <<-SVG
+        <line x1="#{PADDING[:left]}" y1="#{PADDING[:top]}" x2="#{PADDING[:left]}" y2="#{CHART_HEIGHT - PADDING[:bottom]}" class="axis-line"/>
+        <line x1="#{PADDING[:left]}" y1="#{CHART_HEIGHT - PADDING[:bottom]}" x2="#{CHART_WIDTH - PADDING[:right]}" y2="#{CHART_HEIGHT - PADDING[:bottom]}" class="axis-line"/>
+      SVG
+    end
+
+    def render_x_labels
+      labels = @data[:labels]
+      return '' if labels.empty?
+
+      # Show fewer labels if too many
+      step = labels.size > 12 ? (labels.size / 6.0).ceil : 1
+
+      label_elements = labels.each_with_index.map do |label, i|
+        next unless (i % step).zero? || i == labels.size - 1
+
+        x = PADDING[:left] + (@plot_width * i / (labels.size - 1).to_f)
+        "<text x=\"#{x}\" y=\"#{CHART_HEIGHT - PADDING[:bottom] + 20}\" class=\"axis-label x-label\">#{label}</text>"
+      end.compact
+
+      label_elements.join("\n")
+    end
+
+    def render_y_labels(max_value)
+      labels = []
+      5.times do |i|
+        value = (max_value * (4 - i) / 4.0).round
+        y = PADDING[:top] + (@plot_height * i / 4.0)
+        labels << "<text x=\"#{PADDING[:left] - 10}\" y=\"#{y + 4}\" class=\"axis-label y-label\">#{value}</text>"
+      end
+      labels.join("\n")
+    end
+
+    def render_line(series, max_value)
+      points = calculate_points(series, max_value)
+      return '' if points.empty?
+
+      points_str = points.map { |p| "#{p[:x]},#{p[:y]}" }.join(' ')
+
+      "<polyline points=\"#{points_str}\" class=\"chart-line chart-line-#{series}\" fill=\"none\" stroke=\"#{COLORS[series]}\" stroke-width=\"2\"/>"
+    end
+
+    def render_data_points(series, max_value)
+      points = calculate_points(series, max_value)
+      values = @data[series]
+
+      points.each_with_index.map do |point, i|
+        <<-SVG
+          <circle cx="#{point[:x]}" cy="#{point[:y]}" r="4" class="data-point data-point-#{series}" fill="#{COLORS[series]}"
+            data-series="#{series}" data-label="#{@data[:labels][i]}" data-value="#{values[i]}"/>
+        SVG
+      end.join("\n")
+    end
+
+    def calculate_points(series, max_value)
+      values = @data[series]
+      return [] if values.blank?
+
+      values.each_with_index.map do |value, i|
+        x = PADDING[:left] + (@plot_width * i / (values.size - 1).to_f)
+        y = CHART_HEIGHT - PADDING[:bottom] - (@plot_height * value / max_value.to_f)
+        { x: x.round(2), y: y.round(2) }
+      end
+    end
+
+    def render_legend
+      <<-HTML
+        <div class="chart-legend">
+          <span class="legend-item">
+            <span class="legend-color" style="background-color: #{COLORS[:created]}"></span>
+            Created
+          </span>
+          <span class="legend-item">
+            <span class="legend-color" style="background-color: #{COLORS[:completed]}"></span>
+            Completed
+          </span>
+          <span class="legend-item">
+            <span class="legend-color" style="background-color: #{COLORS[:failed]}"></span>
+            Failed
+          </span>
+        </div>
+      HTML
+    end
+
+    def render_tooltip
+      <<-HTML
+        <div id="chart-tooltip" class="chart-tooltip" style="display: none;">
+          <div class="tooltip-label"></div>
+          <div class="tooltip-value"></div>
+        </div>
+      HTML
+    end
+  end
+end

data/app/services/solid_queue_monitor/html_generator.rb

@@ -51,6 +51,7 @@ module SolidQueueMonitor
           #{generate_footer}
         </div>
         #{generate_auto_refresh_script}
+        #{generate_chart_script}
       HTML
     end
 
@@ -87,20 +88,33 @@ module SolidQueueMonitor
     end
 
     def generate_header
+      nav_items = [
+        { path: root_path, label: 'Overview', match: 'Overview' },
+        { path: ready_jobs_path, label: 'Ready Jobs', match: 'Ready Jobs' },
+        { path: in_progress_jobs_path, label: 'In Progress Jobs', match: 'In Progress' },
+        { path: scheduled_jobs_path, label: 'Scheduled Jobs', match: 'Scheduled Jobs' },
+        { path: recurring_jobs_path, label: 'Recurring Jobs', match: 'Recurring Jobs' },
+        { path: failed_jobs_path, label: 'Failed Jobs', match: 'Failed Jobs' },
+        { path: queues_path, label: 'Queues', match: 'Queues' },
+        { path: workers_path, label: 'Workers', match: 'Workers' }
+      ]
+
+      nav_links = nav_items.map do |item|
+        active_class = @title&.include?(item[:match]) ? 'active' : ''
+        "<a href=\"#{item[:path]}\" class=\"nav-link #{active_class}\">#{item[:label]}</a>"
+      end.join("\n            ")
+
       <<-HTML
         <header>
           <div class="header-top">
             <h1>Solid Queue Monitor</h1>
-            #{generate_auto_refresh_controls}
+            <div class="header-controls">
+              #{generate_auto_refresh_controls}
+              #{generate_theme_toggle}
+            </div>
           </div>
           <nav class="navigation">
-            <a href="#{root_path}" class="nav-link">Overview</a>
-            <a href="#{ready_jobs_path}" class="nav-link">Ready Jobs</a>
-            <a href="#{in_progress_jobs_path}" class="nav-link">In Progress Jobs</a>
-            <a href="#{scheduled_jobs_path}" class="nav-link">Scheduled Jobs</a>
-            <a href="#{recurring_jobs_path}" class="nav-link">Recurring Jobs</a>
-            <a href="#{failed_jobs_path}" class="nav-link">Failed Jobs</a>
-            <a href="#{queues_path}" class="nav-link">Queues</a>
+            #{nav_links}
           </nav>
         </header>
       HTML
@@ -135,6 +149,27 @@ module SolidQueueMonitor
       HTML
     end
 
+    def generate_theme_toggle
+      <<-HTML
+        <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode">
+          <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+          <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </button>
+      HTML
+    end
+
     def generate_auto_refresh_script
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
@@ -212,6 +247,132 @@ module SolidQueueMonitor
       JS
     end
 
+    def generate_chart_script
+      <<-HTML
+        <script>
+          #{theme_toggle_javascript}
+          #{chart_tooltip_javascript}
+        </script>
+      HTML
+    end
+
+    def theme_toggle_javascript
+      <<-JS
+        (function() {
+          var body = document.body;
+          var themeBtn = document.getElementById('theme-toggle-btn');
+          var storageKey = 'sqm_dark_theme';
+
+          // Check for saved preference or system preference
+          function getPreferredTheme() {
+            var saved = localStorage.getItem(storageKey);
+            if (saved !== null) {
+              return saved === 'true';
+            }
+            // Check system preference
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          }
+
+          function setTheme(isDark) {
+            if (isDark) {
+              body.classList.add('dark-theme');
+            } else {
+              body.classList.remove('dark-theme');
+            }
+            localStorage.setItem(storageKey, isDark ? 'true' : 'false');
+          }
+
+          // Initialize theme
+          setTheme(getPreferredTheme());
+
+          // Toggle on button click
+          if (themeBtn) {
+            themeBtn.addEventListener('click', function() {
+              var isDark = body.classList.contains('dark-theme');
+              setTheme(!isDark);
+            });
+          }
+
+          // Listen for system preference changes
+          if (window.matchMedia) {
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+              // Only auto-switch if user hasn't manually set a preference
+              if (localStorage.getItem(storageKey) === null) {
+                setTheme(e.matches);
+              }
+            });
+          }
+        })();
+      JS
+    end
+
+    def chart_tooltip_javascript
+      <<-JS
+        (function() {
+          // Chart collapse/expand functionality
+          var chartSection = document.getElementById('chart-section');
+          var toggleBtn = document.getElementById('chart-toggle-btn');
+
+          if (chartSection && toggleBtn) {
+            var isCollapsed = localStorage.getItem('sqm_chart_collapsed') === 'true';
+
+            if (isCollapsed) {
+              chartSection.classList.add('collapsed');
+            }
+
+            toggleBtn.addEventListener('click', function() {
+              chartSection.classList.toggle('collapsed');
+              var collapsed = chartSection.classList.contains('collapsed');
+              localStorage.setItem('sqm_chart_collapsed', collapsed ? 'true' : 'false');
+            });
+          }
+
+          // Chart tooltip functionality
+          var tooltip = document.getElementById('chart-tooltip');
+          if (!tooltip) return;
+
+          var dataPoints = document.querySelectorAll('.data-point');
+          var seriesNames = { created: 'Created', completed: 'Completed', failed: 'Failed' };
+
+          dataPoints.forEach(function(point) {
+            point.addEventListener('mouseenter', function(e) {
+              var series = this.getAttribute('data-series');
+              var label = this.getAttribute('data-label');
+              var value = this.getAttribute('data-value');
+
+              tooltip.querySelector('.tooltip-label').textContent = label;
+              tooltip.querySelector('.tooltip-value').textContent = seriesNames[series] + ': ' + value;
+              tooltip.style.display = 'block';
+              positionTooltip(e);
+            });
+
+            point.addEventListener('mousemove', function(e) {
+              positionTooltip(e);
+            });
+
+            point.addEventListener('mouseleave', function() {
+              tooltip.style.display = 'none';
+            });
+          });
+
+          function positionTooltip(e) {
+            var x = e.clientX + 10;
+            var y = e.clientY - 30;
+
+            if (x + tooltip.offsetWidth > window.innerWidth) {
+              x = e.clientX - tooltip.offsetWidth - 10;
+            }
+            if (y < 0) {
+              y = e.clientY + 10;
+            }
+
+            tooltip.style.left = x + 'px';
+            tooltip.style.top = y + 'px';
+          }
+        })();
+      JS
+    end
+
     def default_url_options
       { only_path: true }
     end