solid_queue_web 0.6.0 → 0.7.0

data/app/assets/stylesheets/solid_queue_web/_11_throughput.css

@@ -0,0 +1,68 @@
+.sqd-throughput__summary {
+  display: flex;
+  gap: 1.25rem;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.sqd-throughput__summary strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.sqd-sparkline {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 80px;
+  padding: 0.75rem 1.25rem 0;
+}
+
+.sqd-sparkline__col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  height: 100%;
+}
+
+.sqd-sparkline__bar-wrap {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.sqd-sparkline__bar {
+  width: 100%;
+  background: var(--primary);
+  border-radius: 2px 2px 0 0;
+  min-height: 2px;
+  opacity: 0.75;
+  transition: opacity 0.15s;
+}
+
+.sqd-sparkline__bar:hover {
+  opacity: 1;
+}
+
+.sqd-sparkline__tick {
+  font-size: 10px;
+  color: var(--muted);
+  white-space: nowrap;
+  min-height: 14px;
+  line-height: 14px;
+}
+
+.sqd-sparkline__empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 13px;
+  padding: 1rem 1.25rem;
+}
+
+.sqd-stat--done .sqd-stat__value { color: var(--success); }

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

@@ -1,619 +1,3 @@
 /*
  *= require_self
- */
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-.sqd-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-:root {
-  --bg: #f8f9fa;
-  --surface: #ffffff;
-  --border: #dee2e6;
-  --text: #212529;
-  --muted: #6c757d;
-  --primary: #0d6efd;
-  --danger: #dc3545;
-  --warning: #fd7e14;
-  --success: #198754;
-  --info: #0dcaf0;
-  --purple: #6f42c1;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  font-size: 14px;
-  background: var(--bg);
-  color: var(--text);
-  line-height: 1.5;
-}
-
-/* Layout */
-.sqd-header {
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-}
-
-.sqd-header__inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1.5rem;
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  height: 56px;
-}
-
-.sqd-header__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-  text-decoration: none;
-}
-
-.sqd-nav {
-  display: flex;
-  gap: 0.25rem;
-  list-style: none;
-}
-
-.sqd-nav a {
-  display: block;
-  padding: 0.35rem 0.75rem;
-  border-radius: 6px;
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background 0.1s, color 0.1s;
-}
-
-.sqd-nav a:hover,
-.sqd-nav a.active {
-  background: var(--bg);
-  color: var(--text);
-}
-
-.sqd-nav-toggle {
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  gap: 5px;
-  width: 36px;
-  height: 36px;
-  padding: 6px;
-  margin-left: auto;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.sqd-nav-toggle span {
-  display: block;
-  height: 2px;
-  background: var(--text);
-  border-radius: 1px;
-}
-
-.sqd-main {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.sqd-page-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 0;
-}
-
-.sqd-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.5rem;
-}
-
-.sqd-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Flash notices */
-.sqd-flash {
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-  margin-bottom: 1rem;
-  font-size: 13px;
-}
-.sqd-flash--notice { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
-.sqd-flash--alert  { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
-
-/* Stat cards */
-.sqd-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.sqd-stat {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1.25rem 1rem;
-  text-align: center;
-}
-
-.sqd-stat__value {
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1;
-  margin-bottom: 0.25rem;
-}
-
-.sqd-stat__label {
-  font-size: 12px;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.sqd-stat--ready     .sqd-stat__value { color: var(--success); }
-.sqd-stat--scheduled .sqd-stat__value { color: var(--info); }
-.sqd-stat--claimed   .sqd-stat__value { color: var(--primary); }
-.sqd-stat--failed    .sqd-stat__value { color: var(--danger); }
-.sqd-stat--blocked   .sqd-stat__value { color: var(--warning); }
-.sqd-stat--queues    .sqd-stat__value { color: var(--purple); }
-.sqd-stat--processes .sqd-stat__value { color: var(--muted); }
-.sqd-stat--recurring .sqd-stat__value { color: var(--info); }
-
-.sqd-stat--link {
-  display: block;
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
-}
-.sqd-stat--link:hover {
-  border-color: var(--primary);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-}
-
-/* Tables */
-.sqd-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.sqd-card__header {
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.sqd-card__title {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th {
-  padding: 0.625rem 1rem;
-  text-align: left;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border);
-  vertical-align: middle;
-}
-
-tr:last-child td { border-bottom: none; }
-tbody tr:hover { background: var(--bg); }
-
-.sqd-empty {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--muted);
-}
-
-/* Badges */
-.sqd-badge {
-  display: inline-block;
-  padding: 0.2em 0.55em;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.sqd-badge--ready     { background: #d1e7dd; color: #0f5132; }
-.sqd-badge--scheduled { background: #cff4fc; color: #055160; }
-.sqd-badge--claimed   { background: #cfe2ff; color: #084298; }
-.sqd-badge--failed    { background: #f8d7da; color: #842029; }
-.sqd-badge--blocked   { background: #fff3cd; color: #664d03; }
-.sqd-badge--static  { background: #d1e7dd; color: #0f5132; }
-.sqd-badge--dynamic { background: #e0d7f5; color: #4a2c8a; }
-.sqd-badge--paused      { background: #e2e3e5; color: #41464b; }
-.sqd-badge--running     { background: #d1e7dd; color: #0f5132; }
-.sqd-badge--supervisor  { background: #e0d7f5; color: #4a2c8a; }
-.sqd-badge--worker      { background: #d1e7dd; color: #0f5132; }
-.sqd-badge--dispatcher  { background: #cff4fc; color: #055160; }
-
-.sqd-process-meta { font-size: 12px; color: var(--muted); }
-.sqd-process-meta span + span::before { content: " · "; }
-.sqd-muted-text { color: var(--muted); font-size: 13px; }
-
-/* Buttons */
-.sqd-btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.35rem 0.75rem;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  text-decoration: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.sqd-btn:hover { opacity: 0.85; }
-.sqd-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
-.sqd-btn--danger  { background: var(--danger);  color: #fff; border-color: var(--danger);  }
-.sqd-btn--muted   { background: var(--surface); color: var(--text); border-color: var(--border); }
-.sqd-btn--sm      { padding: 0.2rem 0.55rem; font-size: 11px; }
-
-.sqd-row-actions  { white-space: nowrap; text-align: right; width: 1%; }
-.sqd-row-actions form { display: inline; margin-left: 0.25rem; }
-
-/* Selection bar */
-.sqd-selection-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  font-size: 13px;
-}
-
-table th input[type="checkbox"],
-table td input[type="checkbox"] {
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-  accent-color: var(--primary);
-}
-
-/* Search */
-.sqd-search {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.sqd-search__input {
-  width: 280px;
-  padding: 0.35rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  font-size: 13px;
-  background: var(--surface);
-  color: var(--text);
-  line-height: 1.5;
-}
-
-.sqd-search__input:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: -1px;
-  border-color: var(--primary);
-}
-
-@media (max-width: 640px) {
-  .sqd-search { flex-wrap: wrap; }
-  .sqd-search__input { width: 100%; }
-}
-
-.sqd-search--global { margin-bottom: 2rem; }
-
-.sqd-search__input--lg {
-  width: 420px;
-  font-size: 15px;
-  padding: 0.5rem 1rem;
-}
-
-@media (max-width: 640px) {
-  .sqd-search__input--lg { width: 100%; }
-}
-
-.sqd-search-group {
-  margin-bottom: 2rem;
-}
-
-.sqd-search-group__header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Filters */
-.sqd-filters {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-}
-
-.sqd-filters a {
-  padding: 0.35rem 0.875rem;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  text-decoration: none;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  background: var(--surface);
-  transition: all 0.1s;
-}
-
-.sqd-filters a:hover,
-.sqd-filters a.active {
-  background: var(--primary);
-  border-color: var(--primary);
-  color: #fff;
-}
-
-/* Period filter */
-.sqd-period-filter {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-left: auto;
-}
-
-.sqd-period-filter a {
-  padding: 0.2rem 0.55rem;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  text-decoration: none;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  background: var(--surface);
-  transition: all 0.1s;
-}
-
-.sqd-period-filter a:hover,
-.sqd-period-filter a.active {
-  background: var(--muted);
-  border-color: var(--muted);
-  color: #fff;
-}
-
-/* Code / monospace */
-.sqd-mono {
-  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-}
-
-.sqd-error-msg {
-  color: var(--danger);
-  font-size: 12px;
-}
-
-.sqd-truncate {
-  max-width: 320px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Pagination (pagy v43 series-nav) */
-nav.pagy {
-  display: flex;
-  justify-content: center;
-  gap: 0.25rem;
-  padding: 1rem;
-  list-style: none;
-}
-
-nav.pagy a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 0.5rem;
-  border-radius: 5px;
-  font-size: 13px;
-  text-decoration: none;
-  border: 1px solid var(--border);
-  color: var(--text);
-  background: var(--surface);
-}
-
-nav.pagy a:hover:not([aria-disabled="true"]) { background: var(--bg); }
-nav.pagy a[aria-current="page"] { background: var(--primary); color: #fff; border-color: var(--primary); }
-nav.pagy a[role="separator"],
-nav.pagy a[aria-disabled="true"] { color: var(--muted); cursor: default; }
-
-/* Job detail page */
-.sqd-breadcrumb {
-  font-size: 12px;
-  color: var(--muted);
-  margin-bottom: 0.25rem;
-}
-
-.sqd-breadcrumb a { color: var(--muted); text-decoration: none; }
-.sqd-breadcrumb a:hover { color: var(--text); }
-
-.sqd-detail-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-}
-
-.sqd-grid-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-@media (max-width: 768px) {
-  .sqd-detail-grid { grid-template-columns: 1fr; }
-  .sqd-grid-2 { grid-template-columns: 1fr; }
-}
-
-@media (max-width: 640px) {
-  .sqd-main {
-    padding: 1.5rem 1rem;
-  }
-
-  .sqd-page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .sqd-card {
-    overflow-x: auto;
-  }
-
-  .sqd-card__header {
-    flex-wrap: wrap;
-  }
-
-  .sqd-stats {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-
-  .sqd-truncate {
-    max-width: 160px;
-  }
-}
-
-@media (max-width: 576px) {
-  .sqd-header {
-    position: relative;
-  }
-
-  .sqd-header__inner {
-    padding: 0 1rem;
-  }
-
-  .sqd-nav-toggle {
-    display: flex;
-  }
-
-  .sqd-nav-wrapper {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    z-index: 50;
-    padding: 0.5rem;
-  }
-
-  .sqd-nav-wrapper.sqd-nav--open {
-    display: block;
-  }
-
-  .sqd-nav {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .sqd-nav a {
-    padding: 0.5rem 0.75rem;
-    font-size: 14px;
-  }
-}
-
-.sqd-detail-section { padding: 1.25rem; }
-
-.sqd-section-title {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
-  margin-bottom: 1rem;
-}
-
-.sqd-section-title--danger { color: var(--danger); }
-
-.sqd-dl {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.5rem 1.5rem;
-  font-size: 13px;
-}
-
-.sqd-dl dt { color: var(--muted); white-space: nowrap; }
-.sqd-dl dd { word-break: break-all; }
-
-.sqd-pre {
-  font-family: monospace;
-  font-size: 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  padding: 0.75rem;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.sqd-pre--muted { color: var(--muted); }
-
-.sqd-error-header {
-  font-size: 13px;
-  padding: 0.5rem 0.75rem;
-  background: #f8d7da;
-  color: #842029;
-  border-radius: 5px;
-}
+ */

data/app/controllers/solid_queue_web/dashboard_controller.rb

@@ -11,6 +11,18 @@ module SolidQueueWeb
         processes: SolidQueue::Process.count,
         recurring: SolidQueue::RecurringTask.count
       }
+
+      now = Time.current
+      finished_times = SolidQueue::Job.where(finished_at: 24.hours.ago..now).pluck(:finished_at)
+      @throughput = {
+        completed_1h:  finished_times.count { |t| t >= 1.hour.ago },
+        completed_24h: finished_times.size
+      }
+      @sparkline = 12.times.map do |i|
+        from = (12 - i).hours.ago
+        to   = i == 11 ? now : (11 - i).hours.ago
+        finished_times.count { |t| t >= from && t < to }
+      end
     end
   end
 end

data/app/controllers/solid_queue_web/failed_jobs_controller.rb

@@ -1,6 +1,6 @@
 module SolidQueueWeb
   class FailedJobsController < ApplicationController
-    before_action :set_filter_params, only: [ :index, :retry_all, :discard_all ]
+    before_action :set_filter_params, only: [:index, :retry_all, :discard_all]
 
     def index
       @pagy, @failed_jobs = pagy(filtered_scope.order(created_at: :desc))

data/app/controllers/solid_queue_web/history_controller.rb

@@ -0,0 +1,16 @@
+module SolidQueueWeb
+  class HistoryController < ApplicationController
+    def index
+      @queue  = params[:queue].presence
+      @search = params[:q].presence
+      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
+
+      scope = SolidQueue::Job.where.not(finished_at: nil)
+      scope = scope.where(queue_name: @queue)                                    if @queue.present?
+      scope = scope.where("class_name LIKE ?", "%#{@search}%")                  if @search.present?
+      scope = scope.where("finished_at >= ?", PERIOD_DURATIONS[@period].ago)    if @period.present?
+
+      @pagy, @jobs = pagy(scope.order(finished_at: :desc))
+    end
+  end
+end