solid_queue_monitor 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76559272501afef3ca73a5f8739a0d6bea2c7c3dc5fc4a3153ed9890f5a8f0b5
-  data.tar.gz: efcfd9438981bc2f35a8925c6d2b08120ec490441e8f66959202c5d78dff7990
+  metadata.gz: 3bed1180e7bb59bb8741c6fd8607cfcec9e9b604143f4f96c3d4e6f91ae045c6
+  data.tar.gz: 5fe88544f47d2146ec5e8034aa476032bba8fbfae2fbb7bf5aa283b66650dfb8
 SHA512:
-  metadata.gz: b6d8a0d27f8770f9c7ebf838e2f7e78ac72afbdf900ff5718c98861bfb25ab151250a5f36be58edcdcaa029f82d68118e0f5aa102d12c6054289e428f83069d7
-  data.tar.gz: 0750abe0b179438a53c8519fad9219247850de0fb661f57dd9800eb120446c4f5cea3d128ffd8b310842c0f5334c22c6f2c3db800ff46a2ffa66564b1071893d
+  metadata.gz: c59ad8d48e9414e12e86d848f029b9ad31437b6f41c842b787876ce1ae4a348d35ea6808904305c3212ec29124783b02cc7896a039a0ba7e43625842b127c552
+  data.tar.gz: 55554c085582dd57bd884b50bfebaa59e2dffa5758646e49e2744e83ea28b4c7d23d347335c5cd08df0909e312d926a6070371e5474911d52d93256585d7e96f

data/README.md

@@ -25,6 +25,7 @@ A lightweight, zero-dependency web interface for monitoring Solid Queue backgrou
 - **Advanced Job Filtering**: Filter jobs by class name, queue, status, and job arguments
 - **Quick Actions**: Retry or discard failed jobs, execute or reject scheduled jobs directly from any view
 - **Performance Optimized**: Designed for high-volume applications with smart pagination
+- **Auto-refresh**: Real-time monitoring with configurable auto-refresh interval and toggle
 - **Optional Authentication**: Secure your dashboard with HTTP Basic Authentication
 - **Responsive Design**: Works on desktop and mobile devices
 - **Zero Dependencies**: No additional JavaScript libraries or frameworks required
@@ -44,7 +45,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', '~> 0.3.2'
+gem 'solid_queue_monitor', '~> 0.4.0'
 ```
 
 Then execute:
@@ -83,6 +84,13 @@ SolidQueueMonitor.setup do |config|
 
   # Number of jobs to display per page
   config.jobs_per_page = 25
+
+  # Auto-refresh settings
+  # Enable or disable auto-refresh globally (users can still toggle it in the UI)
+  config.auto_refresh_enabled = true
+
+  # Auto-refresh interval in seconds (default: 30)
+  config.auto_refresh_interval = 30
 end
 ```
 

data/app/services/solid_queue_monitor/html_generator.rb

@@ -50,6 +50,7 @@ module SolidQueueMonitor
           </div>
           #{generate_footer}
         </div>
+        #{generate_auto_refresh_script}
       HTML
     end
 
@@ -88,7 +89,10 @@ module SolidQueueMonitor
     def generate_header
       <<-HTML
         <header>
-          <h1>Solid Queue Monitor</h1>
+          <div class="header-top">
+            <h1>Solid Queue Monitor</h1>
+            #{generate_auto_refresh_controls}
+          </div>
           <nav class="navigation">
             <a href="#{root_path}" class="nav-link">Overview</a>
             <a href="#{ready_jobs_path}" class="nav-link">Ready Jobs</a>
@@ -110,6 +114,104 @@ module SolidQueueMonitor
       HTML
     end
 
+    def generate_auto_refresh_controls
+      return '' unless SolidQueueMonitor.auto_refresh_enabled
+
+      interval = SolidQueueMonitor.auto_refresh_interval
+      <<-HTML
+        <div class="auto-refresh-container" title="Auto-refresh every #{interval}s" data-tooltip="Auto-refresh: Dashboard updates automatically every #{interval} seconds. Toggle to enable/disable.">
+          <span class="auto-refresh-indicator" id="auto-refresh-indicator"></span>
+          <span class="auto-refresh-countdown" id="auto-refresh-countdown">#{interval}s</span>
+          <label class="auto-refresh-switch" title="Toggle auto-refresh">
+            <input type="checkbox" id="auto-refresh-toggle" checked>
+            <span class="switch-slider"></span>
+          </label>
+          <button class="refresh-now-btn" id="refresh-now-btn" title="Refresh now">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/>
+            </svg>
+          </button>
+        </div>
+      HTML
+    end
+
+    def generate_auto_refresh_script
+      return '' unless SolidQueueMonitor.auto_refresh_enabled
+
+      "<script>#{auto_refresh_javascript}</script>"
+    end
+
+    def auto_refresh_javascript
+      interval = SolidQueueMonitor.auto_refresh_interval
+      <<-JS
+        (function() {
+          var REFRESH_INTERVAL = #{interval};
+          var countdown = REFRESH_INTERVAL;
+          var timerId = null;
+          var isEnabled = localStorage.getItem('sqm_auto_refresh') !== 'false';
+          #{auto_refresh_dom_elements}
+          #{auto_refresh_functions}
+          #{auto_refresh_event_listeners}
+          #{auto_refresh_init}
+        })();
+      JS
+    end
+
+    def auto_refresh_dom_elements
+      <<-JS
+        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');
+      JS
+    end
+
+    def auto_refresh_functions
+      <<-JS
+        function updateUI() {
+          if (toggle) toggle.checked = isEnabled;
+          if (indicator) indicator.classList.toggle('active', isEnabled);
+          if (countdownEl) {
+            countdownEl.textContent = countdown + 's';
+            countdownEl.style.opacity = isEnabled ? '1' : '0.4';
+          }
+        }
+        function tick() {
+          countdown--;
+          if (countdown <= 0) { refresh(); } else { updateUI(); }
+        }
+        function startTimer() {
+          stopTimer();
+          countdown = REFRESH_INTERVAL;
+          updateUI();
+          timerId = setInterval(tick, 1000);
+        }
+        function stopTimer() {
+          if (timerId) { clearInterval(timerId); timerId = null; }
+        }
+        function refresh() { window.location.reload(); }
+        function setEnabled(enabled) {
+          isEnabled = enabled;
+          localStorage.setItem('sqm_auto_refresh', enabled ? 'true' : 'false');
+          if (enabled) { startTimer(); } else { stopTimer(); countdown = REFRESH_INTERVAL; updateUI(); }
+        }
+      JS
+    end
+
+    def auto_refresh_event_listeners
+      <<-JS
+        if (toggle) { toggle.addEventListener('change', function() { setEnabled(this.checked); }); }
+        if (refreshBtn) { refreshBtn.addEventListener('click', function() { refresh(); }); }
+      JS
+    end
+
+    def auto_refresh_init
+      <<-JS
+        updateUI();
+        if (isEnabled) { startTimer(); }
+      JS
+    end
+
     def default_url_options
       { only_path: true }
     end

data/app/services/solid_queue_monitor/stylesheet_generator.rb

@@ -585,6 +585,183 @@ module SolidQueueMonitor
       .solid_queue_monitor .execute-button:hover {
         background: #2563eb;
       }
+
+      /* Header top row with title and auto-refresh */
+      .solid_queue_monitor .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+      }
+
+      /* Auto-refresh styles - compact design */
+      .solid_queue_monitor .auto-refresh-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.625rem;
+        background: white;
+        border-radius: 2rem;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        font-size: 0.75rem;
+        color: #6b7280;
+        cursor: default;
+      }
+
+      /* Tooltip styles */
+      .solid_queue_monitor .auto-refresh-container::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 0;
+        background: #1f2937;
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        line-height: 1.4;
+        white-space: nowrap;
+        max-width: 280px;
+        white-space: normal;
+        text-align: left;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        z-index: 1000;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        pointer-events: none;
+      }
+
+      /* Tooltip arrow */
+      .solid_queue_monitor .auto-refresh-container::before {
+        content: "";
+        position: absolute;
+        top: calc(100% + 2px);
+        right: 16px;
+        border: 6px solid transparent;
+        border-bottom-color: #1f2937;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        z-index: 1001;
+        pointer-events: none;
+      }
+
+      .solid_queue_monitor .auto-refresh-container:hover::after,
+      .solid_queue_monitor .auto-refresh-container:hover::before {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .solid_queue_monitor .auto-refresh-indicator {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #d1d5db;
+        flex-shrink: 0;
+      }
+
+      .solid_queue_monitor .auto-refresh-indicator.active {
+        background: var(--success-color);
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .solid_queue_monitor .auto-refresh-countdown {
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+        min-width: 1.75rem;
+        color: var(--text-color);
+        transition: opacity 0.2s;
+      }
+
+      /* Toggle switch */
+      .solid_queue_monitor .auto-refresh-switch {
+        position: relative;
+        display: inline-block;
+        width: 32px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .solid_queue_monitor .switch-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #d1d5db;
+        transition: 0.2s;
+        border-radius: 18px;
+      }
+
+      .solid_queue_monitor .switch-slider:before {
+        position: absolute;
+        content: "";
+        height: 14px;
+        width: 14px;
+        left: 2px;
+        bottom: 2px;
+        background-color: white;
+        transition: 0.2s;
+        border-radius: 50%;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input:checked + .switch-slider {
+        background-color: var(--success-color);
+      }
+
+      .solid_queue_monitor .auto-refresh-switch input:checked + .switch-slider:before {
+        transform: translateX(14px);
+      }
+
+      .solid_queue_monitor .refresh-now-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        color: #9ca3af;
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .refresh-now-btn:hover {
+        color: var(--primary-color);
+        background: rgba(59, 130, 246, 0.1);
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .header-top {
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .solid_queue_monitor .auto-refresh-container {
+          align-self: center;
+        }
+
+        /* Hide tooltip on mobile - use native title instead */
+        .solid_queue_monitor .auto-refresh-container::after,
+        .solid_queue_monitor .auto-refresh-container::before {
+          display: none;
+        }
+      }
       CSS
     end
   end

data/config/initializers/solid_queue_monitor.rb

@@ -4,4 +4,6 @@ SolidQueueMonitor.setup do |config|
   config.username = 'admin'     # Change this in your application
   config.password = 'password'  # Change this in your application
   config.jobs_per_page = 25
+  config.auto_refresh_enabled = true  # Enable/disable auto-refresh globally
+  config.auto_refresh_interval = 30   # Auto-refresh interval in seconds
 end

data/lib/generators/solid_queue_monitor/templates/initializer.rb

@@ -13,4 +13,11 @@ SolidQueueMonitor.setup do |config|
 
   # Number of jobs to display per page
   # config.jobs_per_page = 25
+
+  # Auto-refresh settings
+  # Enable or disable auto-refresh globally (users can still toggle it in the UI)
+  # config.auto_refresh_enabled = true
+
+  # Auto-refresh interval in seconds (default: 30)
+  # config.auto_refresh_interval = 30
 end

data/lib/solid_queue_monitor/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidQueueMonitor
-  VERSION = '0.3.2'
+  VERSION = '0.4.0'
 end

data/lib/solid_queue_monitor.rb

@@ -6,13 +6,16 @@ require_relative 'solid_queue_monitor/engine'
 module SolidQueueMonitor
   class Error < StandardError; end
   class << self
-    attr_accessor :username, :password, :jobs_per_page, :authentication_enabled
+    attr_accessor :username, :password, :jobs_per_page, :authentication_enabled,
+                  :auto_refresh_enabled, :auto_refresh_interval
   end
 
   @username = 'admin'
   @password = 'password'
   @jobs_per_page = 25
   @authentication_enabled = false
+  @auto_refresh_enabled = true
+  @auto_refresh_interval = 30 # seconds
 
   def self.setup
     yield self

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_queue_monitor
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Vishal Sadriya