RubyGems - solid_queue_monitor - Versions diffs - 1.2.2 → 2.0.0 - Mend

solid_queue_monitor 1.2.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1f5b752f844b9054655de2fd804eb5c91a42dc605dff161d648c0562136ca1c
-  data.tar.gz: 880bd130bf11db839f500561ee8f7f2c46338227fdc34ed89699874660b07d6a
+  metadata.gz: 83ef4d9fb6a37088b8af586bdbc8af9a46018984918e58b912857a0df0ef910b
+  data.tar.gz: b0ceea99892250d40b763725fbc0dc0428f2a19123d34476f06cc86f22418ea0
 SHA512:
-  metadata.gz: 98c99f43a01ea201576c6de6e1081f303ced5dc9abcd1d957fdf7a7e8b2768a0d6c8d1fa5025eea96c774d62e1e11407c5581812a022fee76cb76378bded541e
-  data.tar.gz: 9e63e38db5dc81b9ef98d0f0d14b723d18ed186c452f677388a030c16f39e5b416eb351fb36be4cc4f070c8d52c9b2c78283fcf2293ba09b6a1e1fab8975e4e0
+  metadata.gz: f704b7eadd79058dc24f384bd2051e6ee0ceac7ae0a4315395122f9b381d2765ebaba2671e71560ec37cc49a1c6d0250a15bc6b61fc09599a4a58be1518c0881
+  data.tar.gz: 2bf9b9351dbc680180e31ce5f347cb480022159a1f4a2d4bfbd2e3b7f9fc6fab91cbfd044964b28ef426e59baa7c03da4079ad80e5440c219492a4aa89de5f8e

data/README.md CHANGED Viewed

@@ -72,7 +72,7 @@ A lightweight, zero-dependency web interface for monitoring Solid Queue backgrou
 Add this line to your application's Gemfile:
 ```ruby
-gem 'solid_queue_monitor', '~> 1.2'
+gem 'solid_queue_monitor', '~> 2.0'
 ```
 Then execute:
@@ -206,6 +206,41 @@ This makes it easy to find specific jobs when debugging issues in your applicati
 - **Rails**: 7.1 or higher
 - **Solid Queue**: 0.1.0 or higher
+## Content Security Policy
+Solid Queue Monitor is fully CSP-compatible as of v2.0.0. The dashboard works out of the box under strict policies — no nonce configuration is required.
+### Strict CSP (v2.0.0+)
+As of v2.0 the dashboard's CSS and JavaScript are served as external, content-hashed assets (e.g. `/solid_queue/assets/application-a1b2c3d4.css`) with `Cache-Control: immutable`. The dashboard emits zero inline `<style>` or `<script>` blocks. A strict policy that only allows `'self'` for both directives is sufficient:
+```ruby
+# config/initializers/content_security_policy.rb
+Rails.application.config.content_security_policy do |policy|
+  policy.script_src :self
+  policy.style_src  :self
+end
+```
+### Nonce-based CSP
+Nonce-based CSP is also supported. When `content_security_policy_nonce_generator` is configured, Solid Queue Monitor stamps the per-request nonce onto the `<link rel="stylesheet">` and `<script src="...">` tags it emits — so policies that exclude `'self'` and only allow nonces still work:
+```ruby
+# config/initializers/content_security_policy.rb
+Rails.application.config.content_security_policy do |policy|
+  policy.script_src :self
+  policy.style_src  :self
+end
+Rails.application.config.content_security_policy_nonce_generator = ->(req) { SecureRandom.base64(16) }
+Rails.application.config.content_security_policy_nonce_directives = %w[script-src style-src]
+```
+### Upgrading from v1.x
+v1.x emitted inline `<style nonce>` and `<script nonce>` blocks, so a nonce generator was effectively required for strict policies. v2.0 removes all inline blocks. If you added a nonce generator only to make the monitor work, you can keep it (no harm) or remove it.
 ## Contributing
 Contributions are welcome! Here's how you can contribute:

data/app/assets/javascripts/solid_queue_monitor/application.js ADDED Viewed

@@ -0,0 +1,393 @@
+// Solid Queue Monitor - main script
+//
+// Runtime config is read from <body data-*> attributes set by the layout.
+// CSP-safe: no eval, no inline handlers, no string-to-code.
+(function () {
+  'use strict';
+  document.addEventListener('DOMContentLoaded', function () {
+    initFlashMessage();
+    initAutoRefresh();
+    initThemeToggle();
+    initChartCollapse();
+    initChartTooltip();
+    initScheduledBulkActions();
+    initFailedJobsBulkActions();
+    initJobDetailsBehaviors();
+    initGlobalBehaviors();
+  });
+  function initFlashMessage() {
+    var el = document.getElementById('flash-message');
+    if (!el) return;
+    setTimeout(function () {
+      el.classList.add('is-fading');
+      setTimeout(function () { el.classList.add('is-hidden'); }, 500);
+    }, 5000);
+  }
+  function initAutoRefresh() {
+    var cfg = document.body.dataset;
+    if (cfg.autoRefreshEnabled !== 'true') return;
+    var refreshInterval = parseInt(cfg.autoRefreshInterval, 10) || 30;
+    var countdown = refreshInterval;
+    var timerId = null;
+    var isEnabled = localStorage.getItem('sqm_auto_refresh') !== 'false';
+    var toggle = document.getElementById('auto-refresh-toggle');
+    var indicator = document.getElementById('auto-refresh-indicator');
+    var countdownEl = document.getElementById('auto-refresh-countdown');
+    var refreshBtn = document.getElementById('refresh-now-btn');
+    function updateUI() {
+      if (toggle) toggle.checked = isEnabled;
+      if (indicator) indicator.classList.toggle('active', isEnabled);
+      if (countdownEl) {
+        countdownEl.textContent = countdown + 's';
+        countdownEl.classList.toggle('countdown-paused', !isEnabled);
+      }
+    }
+    function tick() {
+      countdown -= 1;
+      if (countdown <= 0) {
+        window.location.reload();
+      } else {
+        updateUI();
+      }
+    }
+    function stopTimer() {
+      if (timerId) {
+        clearInterval(timerId);
+        timerId = null;
+      }
+    }
+    function startTimer() {
+      stopTimer();
+      countdown = refreshInterval;
+      updateUI();
+      timerId = setInterval(tick, 1000);
+    }
+    function setEnabled(enabled) {
+      isEnabled = enabled;
+      localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
+      if (enabled) {
+        startTimer();
+      } else {
+        stopTimer();
+        countdown = refreshInterval;
+        updateUI();
+      }
+    }
+    if (toggle) {
+      toggle.addEventListener('change', function () { setEnabled(this.checked); });
+    }
+    if (refreshBtn) {
+      refreshBtn.addEventListener('click', function () { window.location.reload(); });
+    }
+    updateUI();
+    if (isEnabled) startTimer();
+  }
+  function initThemeToggle() {
+    var body = document.body;
+    var themeBtn = document.getElementById('theme-toggle-btn');
+    var storageKey = 'sqm_dark_theme';
+    function getPreferredTheme() {
+      var saved = localStorage.getItem(storageKey);
+      if (saved !== null) return saved === 'true';
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    function setTheme(isDark) {
+      body.classList.toggle('dark-theme', isDark);
+      localStorage.setItem(storageKey, isDark ? 'true' : 'false');
+    }
+    setTheme(getPreferredTheme());
+    if (themeBtn) {
+      themeBtn.addEventListener('click', function () {
+        setTheme(!body.classList.contains('dark-theme'));
+      });
+    }
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+        if (localStorage.getItem(storageKey) === null) setTheme(e.matches);
+      });
+    }
+  }
+  function initChartCollapse() {
+    var chartSection = document.getElementById('chart-section');
+    var toggleBtn = document.getElementById('chart-toggle-btn');
+    if (!chartSection || !toggleBtn) return;
+    if (localStorage.getItem('sqm_chart_collapsed') === 'true') {
+      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');
+    });
+  }
+  function initChartTooltip() {
+    var tooltip = document.getElementById('chart-tooltip');
+    if (!tooltip) return;
+    var dataPoints = document.querySelectorAll('.data-point');
+    var seriesNames = { created: 'Created', completed: 'Completed', failed: 'Failed' };
+    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';
+    }
+    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.classList.add('tooltip-visible');
+        positionTooltip(e);
+      });
+      point.addEventListener('mousemove', positionTooltip);
+      point.addEventListener('mouseleave', function () {
+        tooltip.classList.remove('tooltip-visible');
+      });
+    });
+  }
+  function initGlobalBehaviors() {
+    document.addEventListener('submit', function (e) {
+      var form = e.target;
+      var msg = form.dataset && form.dataset.confirm;
+      if (msg && !window.confirm(msg)) e.preventDefault();
+    }, true);
+    document.addEventListener('click', function (e) {
+      var el = e.target.closest('[data-confirm-submit]');
+      if (!el) return;
+      e.preventDefault();
+      var msg = el.dataset.confirm || 'Are you sure?';
+      if (!window.confirm(msg)) return;
+      var formId = el.dataset.confirmSubmit;
+      var form = document.getElementById(formId);
+      if (form) form.submit();
+    });
+    var timeRangeSelect = document.getElementById('chart-time-select');
+    if (timeRangeSelect) {
+      timeRangeSelect.addEventListener('change', function () {
+        window.location.href = '?time_range=' + this.value;
+      });
+    }
+  }
+  function initScheduledBulkActions() {
+    var form = document.getElementById('scheduled-jobs-form');
+    if (!form) return;
+    var selectAllCheckbox = document.getElementById('scheduled-jobs-select-all');
+    var executeButton = document.getElementById('execute-selected-top');
+    var rejectButton = document.getElementById('reject-selected-top');
+    function selectedCheckboxes() {
+      return Array.prototype.slice.call(document.querySelectorAll('input[name="job_ids[]"]:checked'));
+    }
+    function allJobCheckboxes() {
+      return Array.prototype.slice.call(document.getElementsByName('job_ids[]'));
+    }
+    function updateButtonStates() {
+      var checked = selectedCheckboxes().length > 0;
+      if (executeButton) executeButton.disabled = !checked;
+      if (rejectButton) rejectButton.disabled = !checked;
+    }
+    function submitForm(actionUrl, selectedIds) {
+      allJobCheckboxes().forEach(function (checkbox) { checkbox.checked = false; });
+      Array.prototype.slice.call(form.querySelectorAll('input[type="hidden"][name="job_ids[]"]')).forEach(function (input) {
+        input.remove();
+      });
+      form.action = actionUrl;
+      selectedIds.forEach(function (id) {
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'job_ids[]';
+        input.value = id;
+        form.appendChild(input);
+      });
+      form.submit();
+    }
+    if (selectAllCheckbox) {
+      selectAllCheckbox.addEventListener('change', function () {
+        allJobCheckboxes().forEach(function (checkbox) { checkbox.checked = selectAllCheckbox.checked; });
+        updateButtonStates();
+      });
+    }
+    allJobCheckboxes().forEach(function (checkbox) {
+      checkbox.addEventListener('change', function () {
+        if (selectAllCheckbox) {
+          selectAllCheckbox.checked = allJobCheckboxes().every(function (item) { return item.checked; });
+        }
+        updateButtonStates();
+      });
+    });
+    if (executeButton) {
+      executeButton.addEventListener('click', function () {
+        var selectedIds = selectedCheckboxes().map(function (checkbox) { return checkbox.value; });
+        if (selectedIds.length > 0) submitForm(executeButton.dataset.actionUrl, selectedIds);
+      });
+    }
+    if (rejectButton) {
+      rejectButton.addEventListener('click', function () {
+        var selectedIds = selectedCheckboxes().map(function (checkbox) { return checkbox.value; });
+        if (selectedIds.length === 0) return;
+        if (window.confirm('Are you sure you want to reject the selected jobs? This action cannot be undone.')) {
+          submitForm(rejectButton.dataset.actionUrl, selectedIds);
+        }
+      });
+    }
+    updateButtonStates();
+  }
+  function initFailedJobsBulkActions() {
+    var form = document.getElementById('failed-jobs-form');
+    if (!form) return;
+    var selectAll = document.getElementById('select-all');
+    var retryButton = document.getElementById('retry-selected-top');
+    var discardButton = document.getElementById('discard-selected-top');
+    function checkboxes() {
+      return Array.prototype.slice.call(document.querySelectorAll('.job-checkbox'));
+    }
+    function checkedBoxes() {
+      return checkboxes().filter(function (checkbox) { return checkbox.checked; });
+    }
+    function updateButtonState() {
+      var anyChecked = checkedBoxes().length > 0;
+      if (retryButton) retryButton.disabled = !anyChecked;
+      if (discardButton) discardButton.disabled = !anyChecked;
+    }
+    function appendHidden(name, value) {
+      var input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = name;
+      input.value = value;
+      form.appendChild(input);
+    }
+    function bulkSubmit(action, promptMsg) {
+      var ids = checkedBoxes().map(function (checkbox) { return checkbox.value; });
+      if (ids.length === 0 || !window.confirm(promptMsg)) return;
+      Array.prototype.slice.call(form.querySelectorAll('input[type="hidden"]')).forEach(function (input) { input.remove(); });
+      form.action = action;
+      ids.forEach(function (id) { appendHidden('job_ids[]', id); });
+      form.submit();
+    }
+    if (selectAll) {
+      selectAll.addEventListener('change', function () {
+        checkboxes().forEach(function (checkbox) { checkbox.checked = selectAll.checked; });
+        updateButtonState();
+      });
+    }
+    checkboxes().forEach(function (checkbox) {
+      checkbox.addEventListener('change', function () {
+        if (selectAll) selectAll.checked = checkedBoxes().length === checkboxes().length;
+        updateButtonState();
+      });
+    });
+    if (retryButton) {
+      retryButton.addEventListener('click', function () {
+        bulkSubmit(retryButton.dataset.actionUrl, 'Are you sure you want to retry the selected jobs?');
+      });
+    }
+    if (discardButton) {
+      discardButton.addEventListener('click', function () {
+        bulkSubmit(discardButton.dataset.actionUrl, 'Are you sure you want to discard the selected jobs?');
+      });
+    }
+    updateButtonState();
+  }
+  function initJobDetailsBehaviors() {
+    document.addEventListener('click', function (e) {
+      var el = e.target.closest('[data-action]');
+      if (!el) return;
+      if (el.dataset.stopPropagation === 'true') e.stopPropagation();
+      if (el.dataset.action === 'copy') {
+        var target = document.getElementById(el.dataset.target);
+        if (!target || !navigator.clipboard) return;
+        var original = el.innerHTML;
+        navigator.clipboard.writeText(target.innerText || target.textContent).then(function () {
+          el.innerHTML = 'Copied!';
+          setTimeout(function () { el.innerHTML = original; }, 2000);
+        });
+      }
+      if (el.dataset.action === 'show-backtrace') {
+        var which = el.dataset.backtrace;
+        var appEl = document.getElementById('app-backtrace');
+        var fullEl = document.getElementById('full-backtrace');
+        if (appEl) appEl.classList.toggle('is-hidden', which !== 'app');
+        if (fullEl) fullEl.classList.toggle('is-hidden', which !== 'full');
+        document.querySelectorAll('[data-action="show-backtrace"]').forEach(function (btn) {
+          btn.classList.toggle('active', btn.dataset.backtrace === which);
+        });
+      }
+      if (el.dataset.action === 'toggle-section') {
+        var section = el.closest('.collapsible-section');
+        if (section) section.classList.toggle('is-expanded');
+      }
+    });
+  }
+}());

data/app/{services/solid_queue_monitor/stylesheet_generator.rb → assets/stylesheets/solid_queue_monitor/application.css} RENAMED Viewed

@@ -1,9 +1,19 @@
-# frozen_string_literal: true
+/*
+ * Solid Queue Monitor - main stylesheet
+ *
+ * Section index:
+ *   - Resets and base typography
+ *   - Layout (container, section, header, nav)
+ *   - Stats and charts
+ *   - Tables (jobs lists, sortable headers, pagination)
+ *   - Forms (filters, search, auth-refresh toggle)
+ *   - Messages (flash, tooltips)
+ *   - Theme overrides (dark-theme)
+ *
+ * Edit this file directly. Do NOT regenerate from stylesheet_generator.rb -
+ * that class is being removed in v2.0.
+ */
-module SolidQueueMonitor
-  class StylesheetGenerator
-    def generate
-      <<-CSS
         .solid_queue_monitor {
           --primary-color: #3b82f6;
           --success-color: #10b981;
@@ -189,7 +199,7 @@ module SolidQueueMonitor
           white-space: nowrap;
         }
-        .solid_queue_monitor th,#{' '}
+        .solid_queue_monitor th,
         .solid_queue_monitor td {
           padding: 0.75rem 1rem;
           text-align: left;
@@ -266,6 +276,11 @@ module SolidQueueMonitor
           background-color: #fffbeb;
         }
+        .solid_queue_monitor.dark-theme .queue-paused {
+          background-color: #3a2410;
+          color: #fde68a;
+        }
         .solid_queue_monitor .pause-button {
           background: #f59e0b;
           color: white;
@@ -334,7 +349,7 @@ module SolidQueueMonitor
           padding: 0.5rem 1rem;
           font-size: 0.875rem;
         }
-      #{'  '}
         .solid_queue_monitor .pagination-gap {
           display: inline-flex;
           align-items: center;
@@ -507,7 +522,7 @@ module SolidQueueMonitor
         .solid_queue_monitor .filter-and-actions-container {
           flex-direction: column;
         }
-      #{'  '}
         .solid_queue_monitor .bulk-actions-container {
           width: 100%;
         }
@@ -1088,6 +1103,18 @@ module SolidQueueMonitor
         border-radius: 2px;
       }
+      .solid_queue_monitor .legend-color-created {
+        background-color: #3b82f6;
+      }
+      .solid_queue_monitor .legend-color-completed {
+        background-color: #10b981;
+      }
+      .solid_queue_monitor .legend-color-failed {
+        background-color: #ef4444;
+      }
       .solid_queue_monitor .chart-tooltip {
         position: fixed;
         background: #1f2937;
@@ -2017,7 +2044,48 @@ module SolidQueueMonitor
           grid-template-columns: 1fr;
         }
       }
-      CSS
-    end
-  end
-end
+      /* ===== CSP Phase 1 utility classes (replace runtime style mutations) ===== */
+      .is-hidden {
+        display: none !important;
+      }
+      .countdown-paused {
+        opacity: 0.4;
+      }
+      .is-expanded .collapse-icon {
+        transform: rotate(90deg);
+      }
+      .collapse-icon {
+        transition: transform 150ms ease;
+      }
+      .collapsible-content {
+        display: none;
+      }
+      .is-expanded .collapsible-content {
+        display: block;
+      }
+      .chart-tooltip {
+        display: none;
+        position: fixed;
+        pointer-events: none;
+      }
+      .chart-tooltip.tooltip-visible {
+        display: block;
+      }
+      #flash-message {
+        opacity: 1;
+        transition: opacity 500ms ease;
+      }
+      #flash-message.is-fading {
+        opacity: 0;
+      }

data/app/controllers/solid_queue_monitor/application_controller.rb CHANGED Viewed

@@ -6,7 +6,7 @@ module SolidQueueMonitor
     include ActionController::Flash
     before_action :authenticate, if: -> { SolidQueueMonitor::AuthenticationService.authentication_required? }
-    layout false
+    layout 'solid_queue_monitor/application'
     skip_before_action :verify_authenticity_token
     def set_flash_message(message, type)
@@ -17,7 +17,7 @@ module SolidQueueMonitor
       # Try to use Rails flash if available
       begin
         flash[:notice] = message if type == :success
-        flash[:alert] = message if type == :error
+        flash[:alert]  = message if type == :error
       rescue StandardError
         # Flash not available (e.g., no session middleware)
       end

data/app/controllers/solid_queue_monitor/assets_controller.rb ADDED Viewed

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+module SolidQueueMonitor
+  class AssetsController < ApplicationController
+    skip_before_action :authenticate, raise: false
+    MIME_TYPES = { '.css' => 'text/css', '.js' => 'application/javascript' }.freeze
+    FINGERPRINT_PATTERN = /\A(?<base>[A-Za-z0-9_]+)-(?<hash>[a-f0-9]+)(?<ext>\.css|\.js)\z/
+    def show
+      asset_request = parse_asset_request
+      return head(:not_found) unless asset_request
+      asset = SolidQueueMonitor::AssetCache.fetch_by_name(asset_request[:file_name])
+      return head(:not_found) unless asset
+      return head(:not_found) unless fingerprint_matches?(asset[:etag], asset_request[:hash])
+      assign_asset_headers(asset)
+      return head(:not_modified) if etag_matches?
+      render plain: asset[:content], content_type: MIME_TYPES[asset_request[:ext]]
+    end
+    private
+    def parse_asset_request
+      match = FINGERPRINT_PATTERN.match(params[:file])
+      return nil unless match
+      {
+        ext: match[:ext],
+        file_name: "#{match[:base]}#{match[:ext]}",
+        hash: match[:hash]
+      }
+    end
+    def fingerprint_matches?(expected, actual)
+      expected.bytesize == actual.bytesize && Rack::Utils.secure_compare(expected, actual)
+    end
+    def assign_asset_headers(asset)
+      response.headers['Cache-Control'] = "public, max-age=#{1.year.to_i}, immutable"
+      response.headers['ETag'] = %("#{asset[:etag]}")
+      response.headers['Last-Modified'] = asset[:mtime].httpdate
+      response.headers['Vary'] = 'Accept-Encoding'
+    end
+    def etag_matches?
+      request.headers['If-None-Match'].to_s.split(',').map(&:strip).include?(response.headers['ETag'])
+    end
+  end
+end

data/app/controllers/solid_queue_monitor/base_controller.rb CHANGED Viewed

@@ -6,34 +6,6 @@ module SolidQueueMonitor
       PaginationService.new(relation, current_page, per_page).paginate
     end
-    def render_page(title, content, search_query: nil)
-      # Get flash message from instance variable (set by set_flash_message) or session
-      message = @flash_message
-      message_type = @flash_type
-      # Try to get from session as fallback, but don't fail if session unavailable
-      begin
-        message ||= session[:flash_message]
-        message_type ||= session[:flash_type]
-        # Clear the flash message from session after using it
-        session.delete(:flash_message) if message
-        session.delete(:flash_type) if message_type
-      rescue StandardError
-        # Session not available (e.g., no session middleware in tests)
-      end
-      html = SolidQueueMonitor::HtmlGenerator.new(
-        title: title,
-        content: content,
-        message: message,
-        message_type: message_type,
-        search_query: search_query
-      ).generate
-      render html: html.html_safe
-    end
     def current_page
       (params[:page] || 1).to_i
     end