solid_queue_monitor 0.4.0 → 0.6.0

data/app/services/solid_queue_monitor/stylesheet_generator.rb

@@ -8,9 +8,35 @@ module SolidQueueMonitor
           --primary-color: #3b82f6;
           --success-color: #10b981;
           --error-color: #ef4444;
+          --warning-color: #f59e0b;
           --text-color: #1f2937;
+          --text-muted: #6b7280;
           --border-color: #e5e7eb;
           --background-color: #f9fafb;
+          --card-background: #ffffff;
+          --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          --input-background: #ffffff;
+          --input-border: #d1d5db;
+          --hover-background: #f3f4f6;
+          --code-background: #f5f5f5;
+        }
+
+        /* Dark theme */
+        .solid_queue_monitor.dark-theme {
+          --primary-color: #60a5fa;
+          --success-color: #34d399;
+          --error-color: #f87171;
+          --warning-color: #fbbf24;
+          --text-color: #f9fafb;
+          --text-muted: #9ca3af;
+          --border-color: #2d2d2d;
+          --background-color: #000000;
+          --card-background: #121212;
+          --card-shadow: 0 1px 3px rgba(0,0,0,0.5);
+          --input-background: #1e1e1e;
+          --input-border: #3d3d3d;
+          --hover-background: #1e1e1e;
+          --code-background: #1e1e1e;
         }
 
         .solid_queue_monitor * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -23,7 +49,8 @@ module SolidQueueMonitor
         }
 
         .solid_queue_monitor .container {
-          max-width: 1200px;
+          width: 95%;
+          max-width: 1800px;
           margin: 0 auto;
           padding: 2rem;
         }
@@ -52,8 +79,8 @@ module SolidQueueMonitor
           color: var(--text-color);
           padding: 0.5rem 1rem;
           border-radius: 0.375rem;
-          background: white;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          background: var(--card-background);
+          box-shadow: var(--card-shadow);
           transition: all 0.2s;
         }
 
@@ -89,15 +116,15 @@ module SolidQueueMonitor
         .solid_queue_monitor .stat-card {
           flex: 1 1 0;
           min-width: 150px;
-          background: white;
+          background: var(--card-background);
           padding: 1.5rem 1rem;
           border-radius: 0.5rem;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          box-shadow: var(--card-shadow);
           text-align: center;
         }
 
         .solid_queue_monitor .stat-card h3 {
-          color: #6b7280;
+          color: var(--text-muted);
           font-size: 0.875rem;
           text-transform: uppercase;
           letter-spacing: 0.05em;
@@ -137,11 +164,12 @@ module SolidQueueMonitor
         }
 
         .solid_queue_monitor th {
-          background: var(--background-color);
+          background: var(--hover-background);
           font-weight: 500;
           font-size: 0.875rem;
           text-transform: uppercase;
           letter-spacing: 0.05em;
+          color: var(--text-muted);
         }
 
         .solid_queue_monitor .status-badge {
@@ -182,6 +210,30 @@ module SolidQueueMonitor
         .solid_queue_monitor .status-failed { background: #fee2e2; color: #991b1b; }
         .solid_queue_monitor .status-scheduled { background: #dbeafe; color: #1e40af; }
         .solid_queue_monitor .status-pending { background: #f3f4f6; color: #374151; }
+        .solid_queue_monitor .status-active { background: #d1fae5; color: #065f46; }
+        .solid_queue_monitor .status-paused { background: #fef3c7; color: #92400e; }
+
+        .solid_queue_monitor .queue-paused {
+          background-color: #fffbeb;
+        }
+
+        .solid_queue_monitor .pause-button {
+          background: #f59e0b;
+          color: white;
+        }
+
+        .solid_queue_monitor .pause-button:hover {
+          background: #d97706;
+        }
+
+        .solid_queue_monitor .resume-button {
+          background: #10b981;
+          color: white;
+        }
+
+        .solid_queue_monitor .resume-button:hover {
+          background: #059669;
+        }
 
         .solid_queue_monitor .execute-btn {
           background: var(--primary-color);
@@ -218,7 +270,7 @@ module SolidQueueMonitor
         .solid_queue_monitor footer {
           text-align: center;
           padding: 2rem 0;
-          color: #6b7280;
+          color: var(--text-muted);
         }
 
         .solid_queue_monitor .pagination {
@@ -265,7 +317,7 @@ module SolidQueueMonitor
         }
 
         .solid_queue_monitor .pagination-link {
-          background: white;
+          background: var(--card-background);
           color: var(--text-color);
           border: 1px solid var(--border-color);
         }
@@ -296,7 +348,7 @@ module SolidQueueMonitor
           max-height: 100px;
           overflow-y: auto;
           padding: 8px;
-          background: #f5f5f5;
+          background: var(--code-background);
           border-radius: 4px;
           font-size: 0.9em;
         }
@@ -304,7 +356,7 @@ module SolidQueueMonitor
         .solid_queue_monitor .args-single-line {
           display: inline-block;
           padding: 4px 8px;
-          background: #f5f5f5;
+          background: var(--code-background);
           border-radius: 4px;
           font-size: 0.9em;
         }
@@ -375,10 +427,10 @@ module SolidQueueMonitor
       }
 
       .solid_queue_monitor .filter-form-container {
-        background: white;
+        background: var(--card-background);
         padding: 1rem;
         border-radius: 0.5rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: var(--card-shadow);
         flex: 3;
       }
 
@@ -387,9 +439,9 @@ module SolidQueueMonitor
         flex-direction: row;
         gap: 0.75rem;
         padding: 1rem;
-        background: white;
+        background: var(--card-background);
         border-radius: 0.5rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: var(--card-shadow);
         flex: 2;
         align-items: center;
         justify-content: center;
@@ -429,16 +481,18 @@ module SolidQueueMonitor
         margin-bottom: 0.5rem;
         font-size: 0.875rem;
         font-weight: 500;
-        color: #4b5563;
+        color: var(--text-muted);
       }
 
       .solid_queue_monitor .filter-group input,
       .solid_queue_monitor .filter-group select {
         width: 100%;
         padding: 0.5rem;
-        border: 1px solid #d1d5db;
+        border: 1px solid var(--input-border);
         border-radius: 0.375rem;
         font-size: 0.875rem;
+        background: var(--input-background);
+        color: var(--text-color);
       }
 
       .solid_queue_monitor .filter-actions {
@@ -462,9 +516,9 @@ module SolidQueueMonitor
       }
 
       .solid_queue_monitor .reset-button {
-        background: #f3f4f6;
-        color: #4b5563;
-        border: 1px solid #d1d5db;
+        background: var(--hover-background);
+        color: var(--text-muted);
+        border: 1px solid var(--border-color);
         padding: 0.5rem 1rem;
         border-radius: 0.375rem;
         font-size: 0.875rem;
@@ -474,7 +528,7 @@ module SolidQueueMonitor
       }
 
       .solid_queue_monitor .reset-button:hover {
-        background: #e5e7eb;
+        background: var(--border-color);
       }
 
       .solid_queue_monitor .action-button {
@@ -536,7 +590,7 @@ module SolidQueueMonitor
         white-space: pre-wrap;
         max-height: 200px;
         overflow-y: auto;
-        background: #f3f4f6;
+        background: var(--code-background);
         padding: 0.5rem;
         border-radius: 0.25rem;
         margin-top: 0.5rem;
@@ -548,12 +602,12 @@ module SolidQueueMonitor
 
       .solid_queue_monitor summary {
         cursor: pointer;
-        color: #6b7280;
+        color: var(--text-muted);
         font-size: 0.75rem;
       }
 
       .solid_queue_monitor summary:hover {
-        color: #4b5563;
+        color: var(--text-color);
       }
 
       .solid_queue_monitor .job-checkbox,
@@ -566,10 +620,10 @@ module SolidQueueMonitor
         display: flex;
         gap: 0.75rem;
         margin: 1rem 0;
-        background: white;
+        background: var(--card-background);
         padding: 0.75rem;
         border-radius: 0.5rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: var(--card-shadow);
       }
 
       .solid_queue_monitor .bulk-actions-bar .action-button {
@@ -601,11 +655,11 @@ module SolidQueueMonitor
         align-items: center;
         gap: 0.5rem;
         padding: 0.375rem 0.625rem;
-        background: white;
+        background: var(--card-background);
         border-radius: 2rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: var(--card-shadow);
         font-size: 0.75rem;
-        color: #6b7280;
+        color: var(--text-muted);
         cursor: default;
       }
 
@@ -658,7 +712,7 @@ module SolidQueueMonitor
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: #d1d5db;
+        background: var(--border-color);
         flex-shrink: 0;
       }
 
@@ -702,7 +756,7 @@ module SolidQueueMonitor
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #d1d5db;
+        background-color: var(--border-color);
         transition: 0.2s;
         border-radius: 18px;
       }
@@ -714,7 +768,7 @@ module SolidQueueMonitor
         width: 14px;
         left: 2px;
         bottom: 2px;
-        background-color: white;
+        background-color: var(--card-background);
         transition: 0.2s;
         border-radius: 50%;
         box-shadow: 0 1px 2px rgba(0,0,0,0.2);
@@ -737,7 +791,7 @@ module SolidQueueMonitor
         padding: 0.25rem;
         border-radius: 0.25rem;
         cursor: pointer;
-        color: #9ca3af;
+        color: var(--text-muted);
         transition: all 0.2s;
       }
 
@@ -762,6 +816,344 @@ module SolidQueueMonitor
           display: none;
         }
       }
+
+      /* Navigation active state */
+      .solid_queue_monitor .nav-link.active {
+        background: var(--primary-color);
+        color: white;
+        border-left: 3px solid #1d4ed8;
+      }
+
+      /* Chart styles */
+      .solid_queue_monitor .chart-section {
+        background: var(--card-background);
+        border-radius: 0.5rem;
+        box-shadow: var(--card-shadow);
+        padding: 1rem 1.5rem;
+        margin-bottom: 2rem;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed {
+        padding-bottom: 1rem;
+      }
+
+      .solid_queue_monitor .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+      }
+
+      .solid_queue_monitor .chart-header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .chart-header h3 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin: 0;
+      }
+
+      .solid_queue_monitor .chart-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        background: var(--hover-background);
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.2s;
+      }
+
+      .solid_queue_monitor .chart-toggle-btn:hover {
+        background: var(--border-color);
+        color: var(--text-color);
+      }
+
+      .solid_queue_monitor .chart-toggle-icon {
+        transition: transform 0.2s;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed .chart-toggle-icon {
+        transform: rotate(-90deg);
+      }
+
+      .solid_queue_monitor .chart-summary {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.8rem;
+        color: var(--text-muted);
+        margin-left: 0.5rem;
+        padding-left: 0.75rem;
+        border-left: 1px solid var(--border-color);
+      }
+
+      .solid_queue_monitor .summary-item {
+        white-space: nowrap;
+      }
+
+      .solid_queue_monitor .summary-created {
+        color: #3b82f6;
+      }
+
+      .solid_queue_monitor .summary-completed {
+        color: #10b981;
+      }
+
+      .solid_queue_monitor .summary-failed {
+        color: #ef4444;
+      }
+
+      .solid_queue_monitor .summary-separator {
+        color: var(--border-color);
+      }
+
+      .solid_queue_monitor .chart-time-select-wrapper {
+        position: relative;
+      }
+
+      .solid_queue_monitor .chart-time-select {
+        appearance: none;
+        padding: 0.5rem 2rem 0.5rem 0.75rem;
+        font-size: 0.8rem;
+        color: var(--text-color);
+        background: var(--input-background);
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 0.5rem center;
+        background-size: 14px;
+        min-width: 140px;
+      }
+
+      .solid_queue_monitor .chart-time-select:hover {
+        border-color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .chart-time-select:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+      }
+
+      .solid_queue_monitor .chart-collapsible {
+        overflow: hidden;
+        transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin-top 0.3s ease-out;
+        max-height: 500px;
+        opacity: 1;
+        margin-top: 1rem;
+      }
+
+      .solid_queue_monitor .chart-section.collapsed .chart-collapsible {
+        max-height: 0;
+        opacity: 0;
+        margin-top: 0;
+      }
+
+      .solid_queue_monitor .chart-container {
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .solid_queue_monitor .chart-container svg {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .solid_queue_monitor .job-activity-chart {
+        width: 100%;
+        height: auto;
+        min-height: 250px;
+      }
+
+      .solid_queue_monitor .grid-line {
+        stroke: var(--border-color);
+        stroke-width: 1;
+        stroke-dasharray: 4 4;
+      }
+
+      .solid_queue_monitor .axis-line {
+        stroke: var(--border-color);
+        stroke-width: 1;
+      }
+
+      .solid_queue_monitor .axis-label {
+        font-size: 11px;
+        fill: var(--text-muted);
+      }
+
+      .solid_queue_monitor .x-label {
+        text-anchor: middle;
+      }
+
+      .solid_queue_monitor .y-label {
+        text-anchor: end;
+      }
+
+      .solid_queue_monitor .chart-line {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .solid_queue_monitor .data-point {
+        cursor: pointer;
+        transition: r 0.2s;
+      }
+
+      .solid_queue_monitor .data-point:hover {
+        r: 6;
+      }
+
+      .solid_queue_monitor .chart-legend {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        margin-top: 1rem;
+        flex-wrap: wrap;
+      }
+
+      .solid_queue_monitor .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.875rem;
+        color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .legend-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 2px;
+      }
+
+      .solid_queue_monitor .chart-tooltip {
+        position: fixed;
+        background: #1f2937;
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        pointer-events: none;
+        z-index: 1000;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+      }
+
+      .solid_queue_monitor .tooltip-label {
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+      }
+
+      .solid_queue_monitor .tooltip-value {
+        color: #d1d5db;
+      }
+
+      .solid_queue_monitor .chart-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+      }
+
+      @media (max-width: 768px) {
+        .solid_queue_monitor .chart-section {
+          padding: 1rem;
+        }
+
+        .solid_queue_monitor .chart-header {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        .solid_queue_monitor .chart-header-left {
+          width: 100%;
+          flex-wrap: wrap;
+        }
+
+        .solid_queue_monitor .chart-summary {
+          margin-left: 0;
+          padding-left: 0;
+          border-left: none;
+          margin-top: 0.5rem;
+          width: 100%;
+        }
+
+        .solid_queue_monitor .chart-time-select {
+          width: 100%;
+        }
+
+        .solid_queue_monitor .job-activity-chart {
+          min-height: 200px;
+        }
+
+        .solid_queue_monitor .chart-legend {
+          gap: 1rem;
+        }
+      }
+
+      /* Theme toggle button */
+      .solid_queue_monitor .theme-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--card-background);
+        border: 1px solid var(--border-color);
+        border-radius: 50%;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.2s;
+        box-shadow: var(--card-shadow);
+      }
+
+      .solid_queue_monitor .theme-toggle-btn:hover {
+        color: var(--text-color);
+        border-color: var(--text-muted);
+      }
+
+      .solid_queue_monitor .theme-toggle-btn svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      /* Hide moon icon in light mode, show sun icon */
+      .solid_queue_monitor .theme-icon-moon {
+        display: none;
+      }
+
+      .solid_queue_monitor .theme-icon-sun {
+        display: block;
+      }
+
+      /* In dark mode, show moon icon, hide sun icon */
+      .solid_queue_monitor.dark-theme .theme-icon-moon {
+        display: block;
+      }
+
+      .solid_queue_monitor.dark-theme .theme-icon-sun {
+        display: none;
+      }
+
+      .solid_queue_monitor .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
       CSS
     end
   end

data/config/database.yml

@@ -0,0 +1,3 @@
+test:
+  adapter: sqlite3
+  database: ":memory:"

data/config/routes.rb

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
+# Guard against multiple loads of routes file in test environment
 SolidQueueMonitor::Engine.routes.draw do
-  root to: 'overview#index', as: :root
+  return if SolidQueueMonitor::Engine.routes.routes.any? { |r| r.name == 'root' }
+
+  root to: 'overview#index'
+
+  get 'chart_data', to: 'overview#chart_data', as: :chart_data
 
   resources :ready_jobs, only: [:index]
   resources :scheduled_jobs, only: [:index]
@@ -17,4 +22,7 @@ SolidQueueMonitor::Engine.routes.draw do
   post 'discard_failed_job/:id', to: 'failed_jobs#discard', as: :discard_failed_job
   post 'retry_failed_jobs', to: 'failed_jobs#retry_all', as: :retry_failed_jobs
   post 'discard_failed_jobs', to: 'failed_jobs#discard_all', as: :discard_failed_jobs
+
+  post 'pause_queue', to: 'queues#pause', as: :pause_queue
+  post 'resume_queue', to: 'queues#resume', as: :resume_queue
 end

data/lib/solid_queue_monitor/engine.rb

@@ -9,6 +9,11 @@ module SolidQueueMonitor
     # Optional: Add eager loading for production
     config.eager_load_paths << root.join('app', 'services')
 
+    # Ensure session middleware is available
+    initializer 'solid_queue_monitor.middleware' do |app|
+      app.config.session_store :cookie_store, key: '_solid_queue_monitor_session' unless app.config.session_store
+    end
+
     initializer 'solid_queue_monitor.assets' do |app|
       # Optional: Add assets if needed
     end

data/lib/solid_queue_monitor/version.rb

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