solid_queue_web 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4178da05b230b0990212f6dd74b68f45b18e97e50fd1b732bc54a3243e1d61d
-  data.tar.gz: af6f4c2352ce0076fb441fe90d8e38f233bb3bee99fce040155d34e23af2e0b9
+  metadata.gz: f84e63b803df1ce7a322b564eeb78262d7ec76c00d34d087076c842606960e45
+  data.tar.gz: 3cc8a8e1dd074bf9770cea28053b7f7d947f40588f6ac20bc0ccf3b1936adcd0
 SHA512:
-  metadata.gz: '0751948c9e66b3b5d0bbd3bb47007121466ebec956b523b2d3c3b1e16df399005d4acc823b2a1196f75a9511cc5167f135ba8bbb83f6e5c3778f405accc62e3f'
-  data.tar.gz: 422342bb5b419181d5ed4612cf2b06f907f5dcf540d43bb88973b145d1b08b5e4afd9e6319af5249dd6d16351480ab5440b54b111390f6692fc1209a217cfb4d
+  metadata.gz: d7ecc0d4f79f041cca6f6d1aff56953336c63579eae4802e9fdf72603d19523189cf81f27409560f26d1c9df8ecb165c7a0c5bb1302a91a681759ecf5840f8bb
+  data.tar.gz: 5ae9f1035b8443dcbaa66fc02a5171cd91d65b0c09bcb7d66f365350c86aa87a682a5a10c0235227315818fdc7ad8b7d6a3bdb72807c232d429f2a0d046f4a16

data/README.md

@@ -39,16 +39,16 @@ SolidQueueWeb surfaces all of this in a browser UI available at any route you ch
 
 - **Dashboard** — stat cards showing counts for ready, scheduled, running, blocked, and failed jobs, plus queues, recurring tasks, and processes; "Done (1h)" and "Done (24h)" throughput cards; a "Throughput — Last 12 Hours" bar chart (blue) and a "Queue Depth — Last 12 Hours" bar chart (purple) showing hourly snapshots of active job count; pure CSS, no charting library; auto-refreshes every 5 seconds
 - **Queues** — all queues sorted by name with size; oldest ready job latency (color-coded, with UTC timestamp tooltip); Done (24h) and Failed (24h) throughput counts; a mini 12-bar failure rate sparkline per queue showing failure % per hour over the last 12 hours; pause/resume controls
-- **Jobs** — filterable by status (ready, scheduled, claimed, blocked, failed), queue, and priority; search by job class name with dynamic auto-submit; time-based period filter (1 h / 24 h / 7 d); discard individual or all jobs; Turbo Frame navigation so only the table updates on filter or search; auto-refreshes every 10 seconds
+- **Jobs** — filterable by status (ready, scheduled, claimed, blocked, failed), queue, and priority; search by job class name with dynamic auto-submit; time-based period filter (1 h / 24 h / 7 d); sortable by class, queue, priority, and enqueued-at; sort state is preserved across filter, period, and status tab changes; discard individual or all jobs; Turbo Frame navigation so only the table updates on filter or search; auto-refreshes every 10 seconds
 - **Scheduled job management** — reschedule a scheduled job to run immediately ("Run Now") or push its `scheduled_at` forward by 1 h, 24 h, or 7 d; Turbo Stream responses update the row in place; "Run All Now" bulk action promotes every scheduled job in the current filtered view in a single operation
-- **Failed jobs** — list of failed executions with error details; search by class name; filter by queue; time-based period filter; retry or discard individually or in bulk; bulk retry with configurable stagger (+5s / +10s / +30s / +1m) to avoid thundering herd on recovery
+- **Failed jobs** — list of failed executions with error details; search by class name; filter by queue; time-based period filter; sortable by class, queue, and failed-at; retry or discard individually or in bulk; bulk retry with configurable stagger (+5s / +10s / +30s / +1m) to avoid thundering herd on recovery
 - **Job detail** — full arguments, timestamps, blocked-until date, and error backtrace; action buttons based on job status; failed jobs show an editable arguments textarea so you can correct a bad payload and retry in one step without redeploying
 - **Queue management** — pause and resume individual queues; queue-scoped job list with status filter, search, and discard
 - **Recurring tasks** — all configured recurring tasks with cron schedule, next run time, last run time, and static/dynamic classification; "Run Now" button enqueues a task immediately without waiting for its next scheduled run
 - **Processes** — workers, dispatchers, and supervisors with heartbeat health status; auto-refreshes every 10 seconds
 - **Global search** — search across all job statuses at once by class name substring; results grouped by status with match count and direct links to filtered views; native datalist autocomplete pre-populated from all known job classes; auto-submits on selection
 - **Targeted bulk actions** — checkboxes on the jobs and failed jobs lists for selecting individual rows; selection bar shows count and action buttons ("Discard Selected" for jobs, "Retry Selected" / "Discard Selected" for failed jobs); select-all checkbox in the table header
-- **Job history** — browsable list of all finished jobs with class name, queue, duration, and finished timestamp; filterable by period (1h / 24h / 7d), queue, and class name search; Done (1h) / Done (24h) dashboard cards link directly to the filtered history view; auto-refreshes every 10 seconds
+- **Job history** — browsable list of all finished jobs with class name, queue, duration, and finished timestamp; filterable by period (1h / 24h / 7d), queue, and class name search; sortable by class, queue, and finished-at; Done (1h) / Done (24h) dashboard cards link directly to the filtered history view; auto-refreshes every 10 seconds
 - **Dark mode** — ☽/☀ toggle in the header; preference persists to `localStorage` and defaults to the OS `prefers-color-scheme` on first visit; zero extra dependencies — implemented via CSS custom properties and a small Stimulus controller
 - **Dashboard quick actions** — "Retry All Failed" and "Discard All Blocked" cards appear on the dashboard only when the respective count is non-zero; one-click bulk operations with confirm dialogs, keeping the dashboard clean when everything is healthy
 - **CSV export** — "Export CSV" button on the jobs, failed jobs, and history pages downloads all records matching the current filters; columns are tailored per view
@@ -109,6 +109,7 @@ SolidQueueWeb.configure do |config|
   config.alert_queue_thresholds     = { "critical" => 50, "default" => 200 } # fire when queue depth >= threshold (default: {})
   config.alert_webhook_cooldown     = 1800       # seconds between repeated alerts per alert type (default: 3600)
   config.connects_to                = { reading: :reading, writing: :writing } # read replica (default: nil)
+  config.time_zone                  = "America/New_York" # display timezone for all timestamps (default: nil = UTC)
 end
 
 SolidQueueWeb.authenticate do

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

@@ -56,4 +56,8 @@ tbody tr:hover { background: var(--bg); }
 
 .sqd-row--slow { background: rgba(253, 126, 20, 0.07); }
 .sqd-row--slow:hover { background: rgba(253, 126, 20, 0.13); }
-.sqd-slow-duration { color: var(--warning); font-weight: 600; }
+.sqd-slow-duration { color: var(--warning); font-weight: 600; }
+
+th a { color: inherit; text-decoration: none; }
+th a:hover { color: var(--primary); }
+.sqd-sort-indicator { margin-left: 0.2rem; }

data/app/controllers/solid_queue_web/failed_jobs_controller.rb

@@ -4,7 +4,7 @@ module SolidQueueWeb
 
     def index
       respond_to do |format|
-        format.html { @pagy, @failed_jobs = pagy(filtered_scope.order(created_at: :desc)) }
+        format.html { @pagy, @failed_jobs = pagy(filtered_scope.order(sort_expression)) }
         format.csv do
           send_data failed_jobs_csv,
                     filename: "failed-jobs-#{Date.today}.csv",
@@ -25,7 +25,7 @@ module SolidQueueWeb
     def failed_jobs_csv
       CSV.generate(headers: true) do |csv|
         csv << %w[id class_name queue_name error_class error_message failed_at]
-        filtered_scope.order(created_at: :desc).each do |execution|
+        filtered_scope.order(sort_expression).each do |execution|
           job   = execution.job
           error = execution.error || {}
           csv << [job.id, job.class_name, job.queue_name,
@@ -42,10 +42,25 @@ module SolidQueueWeb
         notice: "#{jobs.size} #{"job".pluralize(jobs.size)} discarded."
     end
 
+    def sortable_columns
+      %w[class_name queue_name created_at]
+    end
+
+    def sort_expression
+      sql_col = case @sort
+      when "class_name" then "solid_queue_jobs.class_name"
+      when "queue_name" then "solid_queue_jobs.queue_name"
+      else "solid_queue_failed_executions.created_at"
+      end
+      Arel.sql("#{sql_col} #{@direction == 'asc' ? 'ASC' : 'DESC'}")
+    end
+
     def set_filter_params
-      @queue  = params[:queue].presence
-      @search = params[:q].presence
-      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
+      @queue     = params[:queue].presence
+      @search    = params[:q].presence
+      @period    = params[:period].presence_in(PERIOD_DURATIONS.keys)
+      @sort      = params[:sort].presence_in(sortable_columns) || "created_at"
+      @direction = params[:direction] == "asc" ? "asc" : "desc"
     end
 
     def filtered_scope

data/app/controllers/solid_queue_web/history_controller.rb

@@ -1,9 +1,11 @@
 module SolidQueueWeb
   class HistoryController < ApplicationController
     def index
-      @queue  = params[:queue].presence
-      @search = params[:q].presence
-      @period = params[:period].presence_in(PERIOD_DURATIONS.keys)
+      @queue     = params[:queue].presence
+      @search    = params[:q].presence
+      @period    = params[:period].presence_in(PERIOD_DURATIONS.keys)
+      @sort      = params[:sort].presence_in(sortable_columns) || "finished_at"
+      @direction = params[:direction] == "asc" ? "asc" : "desc"
 
       scope = SolidQueue::Job.where.not(finished_at: nil)
       scope = scope.where(queue_name: @queue)                                    if @queue.present?
@@ -11,7 +13,7 @@ module SolidQueueWeb
       scope = scope.where("finished_at >= ?", PERIOD_DURATIONS[@period].ago)    if @period.present?
 
       respond_to do |format|
-        format.html { @pagy, @jobs = pagy(scope.order(finished_at: :desc)) }
+        format.html { @pagy, @jobs = pagy(scope.order(sort_expression)) }
         format.csv do
           send_data history_csv(scope),
                     filename: "job-history-#{Date.today}.csv",
@@ -22,10 +24,18 @@ module SolidQueueWeb
 
     private
 
+    def sortable_columns
+      %w[class_name queue_name finished_at]
+    end
+
+    def sort_expression
+      Arel.sql("#{@sort} #{@direction == 'asc' ? 'ASC' : 'DESC'}")
+    end
+
     def history_csv(scope)
       CSV.generate(headers: true) do |csv|
         csv << %w[id class_name queue_name duration_seconds finished_at]
-        scope.order(finished_at: :desc).each do |job|
+        scope.order(sort_expression).each do |job|
           duration = job.finished_at && job.created_at ? (job.finished_at - job.created_at).round : nil
           csv << [job.id, job.class_name, job.queue_name, duration, job.finished_at.iso8601]
         end

data/app/controllers/solid_queue_web/jobs_controller.rb

@@ -1,22 +1,16 @@
 module SolidQueueWeb
   class JobsController < ApplicationController
-    def index
-      @status   = params[:status].presence_in(Job::STATUSES) || "ready"
-      @search   = params[:q].presence
-      @period   = params[:period].presence_in(PERIOD_DURATIONS.keys)
-      @priority = params[:priority].presence
-
-      scope = Job::EXECUTION_MODELS[@status].includes(:job)
-      scope = scope.references(:job).where("solid_queue_jobs.class_name LIKE ?", "%#{@search}%")         if @search.present?
-      scope = scope.references(:job).where("solid_queue_jobs.created_at >= ?", PERIOD_DURATIONS[@period].ago) if @period.present?
-      scope = scope.references(:job).where("solid_queue_jobs.priority = ?", @priority.to_i)              if @priority.present?
-      scope = scope.order(created_at: :desc)
+    before_action :set_filters, only: [:index, :destroy]
 
-      @priority_options = Job::EXECUTION_MODELS[@status].joins(:job)
-        .distinct.pluck("solid_queue_jobs.priority").sort
+    def index
+      scope = job_scope
 
       respond_to do |format|
-        format.html { @pagy, @jobs = pagy(scope) }
+        format.html do
+          @priority_options = Job::EXECUTION_MODELS[@status].joins(:job)
+            .distinct.pluck("solid_queue_jobs.priority").sort
+          @pagy, @jobs = pagy(scope)
+        end
         format.csv do
           send_data jobs_csv(scope),
                     filename: "jobs-#{@status}-#{Date.today}.csv",
@@ -33,9 +27,6 @@ module SolidQueueWeb
     end
 
     def destroy
-      @status   = params[:status]
-      @period   = params[:period].presence_in(PERIOD_DURATIONS.keys)
-      @priority = params[:priority].presence
       model = Job.execution_model_for!(@status)
       if params[:id]
         @execution = model.find(params[:id])
@@ -43,23 +34,52 @@ module SolidQueueWeb
         @remaining_count = filtered_scope(model).count
         respond_to do |format|
           format.turbo_stream
-          format.html { redirect_to jobs_path(status: @status, period: @period), notice: "Job discarded." }
+          format.html { redirect_to jobs_return_path, notice: "Job discarded." }
         end
       else
         jobs = filtered_scope(model).map(&:job)
         model.discard_all_from_jobs(jobs)
-        redirect_to jobs_path(status: @status, period: @period),
-          notice: "#{jobs.size} #{"job".pluralize(jobs.size)} discarded."
+        redirect_to jobs_return_path, notice: "#{jobs.size} #{"job".pluralize(jobs.size)} discarded."
       end
     rescue ArgumentError => e
-      redirect_to jobs_path(status: @status, period: @period), alert: e.message
+      redirect_to jobs_return_path, alert: e.message
     rescue => e
-      redirect_to jobs_path(status: @status, period: @period),
-        alert: "Could not discard #{params[:id] ? "job" : "jobs"}: #{e.message}"
+      redirect_to jobs_return_path, alert: "Could not discard #{params[:id] ? "job" : "jobs"}: #{e.message}"
     end
 
     private
 
+    def set_filters
+      @status    = params[:status].presence_in(Job::STATUSES) || "ready"
+      @search    = params[:q].presence
+      @period    = params[:period].presence_in(PERIOD_DURATIONS.keys)
+      @priority  = params[:priority].presence
+      @sort      = params[:sort].presence_in(sortable_columns) || "created_at"
+      @direction = params[:direction] == "asc" ? "asc" : "desc"
+    end
+
+    def job_scope
+      scope = Job::EXECUTION_MODELS[@status].includes(:job).references(:job).order(sort_expression)
+      scope = scope.where("solid_queue_jobs.class_name LIKE ?", "%#{@search}%")              if @search.present?
+      scope = scope.where("solid_queue_jobs.created_at >= ?", PERIOD_DURATIONS[@period].ago) if @period.present?
+      scope = scope.where("solid_queue_jobs.priority = ?", @priority.to_i)                   if @priority.present?
+      scope
+    end
+
+    def sortable_columns
+      %w[class_name queue_name priority created_at]
+    end
+
+    def sort_expression
+      sql_col = case @sort
+      when "class_name" then "solid_queue_jobs.class_name"
+      when "queue_name" then "solid_queue_jobs.queue_name"
+      when "priority"   then "solid_queue_jobs.priority"
+      else "#{Job::EXECUTION_MODELS[@status].quoted_table_name}.created_at"
+      end
+      Arel.sql("#{sql_col} #{@direction == 'asc' ? 'ASC' : 'DESC'}")
+    end
+
     def jobs_csv(scope)
       CSV.generate(headers: true) do |csv|
         csv << %w[id class_name queue_name status priority enqueued_at]
@@ -70,6 +90,10 @@ module SolidQueueWeb
       end
     end
 
+    def jobs_return_path
+      jobs_path(status: @status, period: @period, sort: @sort, direction: @direction)
+    end
+
     def filtered_scope(model)
       scope = model.includes(:job)
       scope = scope.references(:job).where("solid_queue_jobs.created_at >= ?", PERIOD_DURATIONS[@period].ago) if @period.present?

data/app/helpers/solid_queue_web/application_helper.rb

@@ -1,11 +1,32 @@
 module SolidQueueWeb
   module ApplicationHelper
+    def sort_header_th(label, col, url_proc, current_sort:, current_dir:)
+      is_active = current_sort == col
+      next_dir  = (is_active && current_dir == "desc") ? "asc" : "desc"
+      indicator = is_active ? content_tag(:span, current_dir == "desc" ? "↓" : "↑", class: "sqd-sort-indicator") : nil
+      tag_opts  = { scope: "col" }
+      tag_opts[:"aria-sort"] = current_dir == "asc" ? "ascending" : "descending" if is_active
+      content_tag(:th, **tag_opts) do
+        link_to(url_proc.call(sort: col, direction: next_dir)) do
+          safe_join([label, indicator].compact)
+        end
+      end
+    end
+
     def inline_styles
       dir = SolidQueueWeb::Engine.root.join("app/assets/stylesheets/solid_queue_web")
       css = dir.glob("_*.css").sort.map(&:read).join("\n")
       content_tag(:style, css.html_safe)
     end
 
+    def format_timestamp(time, format: "%Y-%m-%d %H:%M:%S")
+      return "—" unless time
+
+      tz = SolidQueueWeb.time_zone
+      displayed = tz ? time.in_time_zone(tz) : time.utc
+      displayed.strftime(format)
+    end
+
     def format_duration(seconds)
       s = seconds.to_i
       return "< 1s" if s < 1

data/app/javascript/solid_queue_web/application.js

@@ -4,9 +4,11 @@ import SearchController from "solid_queue_web/search_controller"
 import RefreshController from "solid_queue_web/refresh_controller"
 import SelectionController from "solid_queue_web/selection_controller"
 import ThemeController from "solid_queue_web/theme_controller"
+import FiltersController from "solid_queue_web/filters_controller"
 
 const application = Application.start()
 application.register("search", SearchController)
 application.register("refresh", RefreshController)
 application.register("selection", SelectionController)
 application.register("theme", ThemeController)
+application.register("filters", FiltersController)

data/app/javascript/solid_queue_web/filters_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { page: String }
+
+  connect() {
+    const url = new URL(window.location.href)
+    const params = url.searchParams
+    const page = this.pageValue
+    let changed = false
+
+    const keys = page === "jobs" ? ["status", "period"] : ["period"]
+    keys.forEach(key => {
+      if (!params.has(key)) {
+        const saved = localStorage.getItem(`sqd-${page}-${key}`)
+        if (saved) { params.set(key, saved); changed = true }
+      }
+    })
+
+    if (changed) window.location.replace(url.toString())
+  }
+
+  saveStatus({ params: { status } }) {
+    if (status) localStorage.setItem(`sqd-${this.pageValue}-status`, status)
+  }
+
+  savePeriod({ params: { period } }) {
+    if (period) {
+      localStorage.setItem(`sqd-${this.pageValue}-period`, period)
+    } else {
+      localStorage.removeItem(`sqd-${this.pageValue}-period`)
+    }
+  }
+}

data/app/views/solid_queue_web/failed_jobs/index.html.erb

@@ -34,17 +34,19 @@
     <input type="hidden" name="queue" value="<%= @queue %>">
   <% end %>
   <input type="hidden" name="period" value="<%= @period %>">
+  <input type="hidden" name="sort" value="<%= @sort %>">
+  <input type="hidden" name="direction" value="<%= @direction %>">
   <input class="sqd-search__input" type="search" name="q" value="<%= @search %>"
          placeholder="Filter by job class…" autocomplete="off" aria-label="Filter by job class"
          data-action="input->search#filter">
   <% if @search.present? %>
     <%= link_to "Clear", failed_jobs_path(queue: @queue, period: @period), class: "sqd-btn sqd-btn--muted" %>
   <% end %>
-  <div class="sqd-period-filter" role="group" aria-label="Time period">
-    <%= link_to "All", failed_jobs_path(queue: @queue, q: @search),                       class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, aria_label: "All time" %>
-    <%= link_to "1h",  failed_jobs_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, aria_label: "Last 1 hour" %>
-    <%= link_to "24h", failed_jobs_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, aria_label: "Last 24 hours" %>
-    <%= link_to "7d",  failed_jobs_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, aria_label: "Last 7 days" %>
+  <div class="sqd-period-filter" role="group" aria-label="Time period" data-controller="filters" data-filters-page-value="failed">
+    <%= link_to "All", failed_jobs_path(queue: @queue, q: @search),                       class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, aria_label: "All time",      data: { action: "click->filters#savePeriod", filters_period_param: "" } %>
+    <%= link_to "1h",  failed_jobs_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, aria_label: "Last 1 hour",   data: { action: "click->filters#savePeriod", filters_period_param: "1h" } %>
+    <%= link_to "24h", failed_jobs_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, aria_label: "Last 24 hours", data: { action: "click->filters#savePeriod", filters_period_param: "24h" } %>
+    <%= link_to "7d",  failed_jobs_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, aria_label: "Last 7 days",   data: { action: "click->filters#savePeriod", filters_period_param: "7d" } %>
   </div>
 </form>
 
@@ -86,10 +88,11 @@
                      data-action="change->selection#selectAll"
                      aria-label="Select all failed jobs">
             </th>
-            <th scope="col">Job Class</th>
-            <th scope="col">Queue</th>
+            <% sort_url = ->(p) { failed_jobs_path(queue: @queue, q: @search, period: @period, **p) } %>
+            <%= sort_header_th("Job Class", "class_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+            <%= sort_header_th("Queue",     "queue_name", sort_url, current_sort: @sort, current_dir: @direction) %>
             <th scope="col">Error</th>
-            <th scope="col">Failed At</th>
+            <%= sort_header_th("Failed At", "created_at", sort_url, current_sort: @sort, current_dir: @direction) %>
             <th scope="col"><span class="sqd-sr-only">Actions</span></th>
           </tr>
         </thead>
@@ -117,7 +120,7 @@
                   <span style="color:var(--muted)">—</span>
                 <% end %>
               </td>
-              <td class="sqd-mono"><%= execution.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+              <td class="sqd-mono"><%= format_timestamp(execution.created_at) %></td>
               <td class="sqd-row-actions">
                 <%= button_to "Retry", retry_failed_job_path(execution), method: :post,
                       class: "sqd-btn sqd-btn--primary sqd-btn--sm" %>

data/app/views/solid_queue_web/history/index.html.erb

@@ -14,17 +14,19 @@
     <input type="hidden" name="queue" value="<%= @queue %>">
   <% end %>
   <input type="hidden" name="period" value="<%= @period %>">
+  <input type="hidden" name="sort" value="<%= @sort %>">
+  <input type="hidden" name="direction" value="<%= @direction %>">
   <input class="sqd-search__input" type="search" name="q" value="<%= @search %>"
          placeholder="Filter by job class…" autocomplete="off" aria-label="Filter by job class"
          data-action="input->search#filter">
   <% if @search.present? %>
     <%= link_to "Clear", history_path(queue: @queue, period: @period), class: "sqd-btn sqd-btn--muted" %>
   <% end %>
-  <div class="sqd-period-filter" role="group" aria-label="Time period">
-    <%= link_to "All",  history_path(queue: @queue, q: @search),                      class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil } %>
-    <%= link_to "1h",   history_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil } %>
-    <%= link_to "24h",  history_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil } %>
-    <%= link_to "7d",   history_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil } %>
+  <div class="sqd-period-filter" role="group" aria-label="Time period" data-controller="filters" data-filters-page-value="history">
+    <%= link_to "All",  history_path(queue: @queue, q: @search),                      class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, data: { action: "click->filters#savePeriod", filters_period_param: "" } %>
+    <%= link_to "1h",   history_path(queue: @queue, q: @search, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, data: { action: "click->filters#savePeriod", filters_period_param: "1h" } %>
+    <%= link_to "24h",  history_path(queue: @queue, q: @search, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, data: { action: "click->filters#savePeriod", filters_period_param: "24h" } %>
+    <%= link_to "7d",   history_path(queue: @queue, q: @search, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, data: { action: "click->filters#savePeriod", filters_period_param: "7d" } %>
   </div>
 </form>
 
@@ -39,11 +41,12 @@
   <div class="sqd-card">
     <table>
       <thead>
+        <% sort_url = ->(p) { history_path(queue: @queue, q: @search, period: @period, **p) } %>
         <tr>
-          <th scope="col">Job Class</th>
-          <th scope="col">Queue</th>
+          <%= sort_header_th("Job Class",   "class_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+          <%= sort_header_th("Queue",       "queue_name", sort_url, current_sort: @sort, current_dir: @direction) %>
           <th scope="col">Duration</th>
-          <th scope="col">Finished At</th>
+          <%= sort_header_th("Finished At", "finished_at", sort_url, current_sort: @sort, current_dir: @direction) %>
         </tr>
       </thead>
       <tbody>
@@ -55,7 +58,7 @@
                     class: "sqd-mono", style: "color: inherit;" %>
             </td>
             <td class="sqd-mono"><%= format_duration(job.finished_at - job.created_at) %></td>
-            <td class="sqd-mono"><%= job.finished_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+            <td class="sqd-mono"><%= format_timestamp(job.finished_at) %></td>
           </tr>
         <% end %>
       </tbody>

data/app/views/solid_queue_web/jobs/index.html.erb

@@ -3,17 +3,18 @@
 <%= turbo_frame_tag "jobs-table", data: { turbo_action: "advance", controller: "refresh", refresh_interval_value: SolidQueueWeb.default_refresh_interval } do %>
 <% discardable = SolidQueueWeb::Job::DISCARDABLE.include?(@status) %>
 
+<div data-controller="filters" data-filters-page-value="jobs">
 <div class="sqd-page-header">
   <div class="sqd-filters">
-    <%= link_to "Ready",     jobs_path(status: "ready",     q: @search, period: @period, priority: @priority), class: @status == "ready"     ? "active" : "" %>
-    <%= link_to "Scheduled", jobs_path(status: "scheduled", q: @search, period: @period, priority: @priority), class: @status == "scheduled" ? "active" : "" %>
-    <%= link_to "Running",   jobs_path(status: "claimed",   q: @search, period: @period, priority: @priority), class: @status == "claimed"   ? "active" : "" %>
-    <%= link_to "Blocked",   jobs_path(status: "blocked",   q: @search, period: @period, priority: @priority), class: @status == "blocked"   ? "active" : "" %>
-    <%= link_to "Failed",    jobs_path(status: "failed",    q: @search, period: @period, priority: @priority), class: @status == "failed"    ? "active" : "" %>
+    <%= link_to "Ready",     jobs_path(status: "ready",     q: @search, period: @period, priority: @priority, sort: @sort, direction: @direction), class: @status == "ready"     ? "active" : "", data: { action: "click->filters#saveStatus", filters_status_param: "ready" } %>
+    <%= link_to "Scheduled", jobs_path(status: "scheduled", q: @search, period: @period, priority: @priority, sort: @sort, direction: @direction), class: @status == "scheduled" ? "active" : "", data: { action: "click->filters#saveStatus", filters_status_param: "scheduled" } %>
+    <%= link_to "Running",   jobs_path(status: "claimed",   q: @search, period: @period, priority: @priority, sort: @sort, direction: @direction), class: @status == "claimed"   ? "active" : "", data: { action: "click->filters#saveStatus", filters_status_param: "claimed" } %>
+    <%= link_to "Blocked",   jobs_path(status: "blocked",   q: @search, period: @period, priority: @priority, sort: @sort, direction: @direction), class: @status == "blocked"   ? "active" : "", data: { action: "click->filters#saveStatus", filters_status_param: "blocked" } %>
+    <%= link_to "Failed",    jobs_path(status: "failed",    q: @search, period: @period, priority: @priority, sort: @sort, direction: @direction), class: @status == "failed"    ? "active" : "", data: { action: "click->filters#saveStatus", filters_status_param: "failed" } %>
   </div>
   <% if @jobs.any? %>
     <div class="sqd-actions">
-      <%= link_to "Export CSV", jobs_path(format: :csv, status: @status, q: @search, period: @period),
+      <%= link_to "Export CSV", jobs_path(format: :csv, status: @status, q: @search, period: @period, sort: @sort, direction: @direction),
             class: "sqd-btn sqd-btn--muted", data: { turbo: false } %>
       <% if @status == "scheduled" %>
         <%= button_to "Run All Now", run_all_now_scheduled_jobs_path,
@@ -36,6 +37,8 @@
 <form class="sqd-search" action="<%= jobs_path %>" method="get" data-controller="search">
   <input type="hidden" name="status" value="<%= @status %>">
   <input type="hidden" name="period" value="<%= @period %>">
+  <input type="hidden" name="sort" value="<%= @sort %>">
+  <input type="hidden" name="direction" value="<%= @direction %>">
   <input class="sqd-search__input" type="search" name="q" value="<%= @search %>"
          placeholder="Filter by job class…" autocomplete="off" aria-label="Filter by job class"
          data-action="input->search#filter">
@@ -49,22 +52,25 @@
     </select>
   <% end %>
   <% if @search.present? || @priority.present? %>
-    <%= link_to "Clear", jobs_path(status: @status, period: @period), class: "sqd-btn sqd-btn--muted" %>
+    <%= link_to "Clear", jobs_path(status: @status, period: @period, sort: @sort, direction: @direction), class: "sqd-btn sqd-btn--muted" %>
   <% end %>
   <div class="sqd-period-filter" role="group" aria-label="Time period">
-    <%= link_to "All", jobs_path(status: @status, q: @search, priority: @priority),                       class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, aria_label: "All time" %>
-    <%= link_to "1h",  jobs_path(status: @status, q: @search, priority: @priority, period: "1h"),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, aria_label: "Last 1 hour" %>
-    <%= link_to "24h", jobs_path(status: @status, q: @search, priority: @priority, period: "24h"), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, aria_label: "Last 24 hours" %>
-    <%= link_to "7d",  jobs_path(status: @status, q: @search, priority: @priority, period: "7d"),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, aria_label: "Last 7 days" %>
+    <%= link_to "All", jobs_path(status: @status, q: @search, priority: @priority, sort: @sort, direction: @direction),                       class: @period.nil?       ? "active" : "", aria: { current: @period.nil?       ? "true" : nil }, aria_label: "All time",      data: { action: "click->filters#savePeriod", filters_period_param: "" } %>
+    <%= link_to "1h",  jobs_path(status: @status, q: @search, priority: @priority, period: "1h",  sort: @sort, direction: @direction),  class: @period == "1h"  ? "active" : "", aria: { current: @period == "1h"  ? "true" : nil }, aria_label: "Last 1 hour",   data: { action: "click->filters#savePeriod", filters_period_param: "1h" } %>
+    <%= link_to "24h", jobs_path(status: @status, q: @search, priority: @priority, period: "24h", sort: @sort, direction: @direction), class: @period == "24h" ? "active" : "", aria: { current: @period == "24h" ? "true" : nil }, aria_label: "Last 24 hours", data: { action: "click->filters#savePeriod", filters_period_param: "24h" } %>
+    <%= link_to "7d",  jobs_path(status: @status, q: @search, priority: @priority, period: "7d",  sort: @sort, direction: @direction),  class: @period == "7d"  ? "active" : "", aria: { current: @period == "7d"  ? "true" : nil }, aria_label: "Last 7 days",   data: { action: "click->filters#savePeriod", filters_period_param: "7d" } %>
   </div>
 </form>
+</div>
 
 <% if discardable && @jobs.any? %>
   <div data-controller="selection">
     <%= form_tag job_selection_path, method: :delete, id: "job-selection-form",
           data: { turbo_confirm: "Discard selected jobs? This cannot be undone." } do %>
-      <%= hidden_field_tag :status, @status %>
-      <%= hidden_field_tag :period, @period %>
+      <%= hidden_field_tag :status,    @status %>
+      <%= hidden_field_tag :period,    @period %>
+      <%= hidden_field_tag :sort,      @sort %>
+      <%= hidden_field_tag :direction, @direction %>
     <% end %>
 
     <div class="sqd-selection-bar" data-selection-target="bar" style="display: none;">
@@ -83,11 +89,12 @@
                      data-action="change->selection#selectAll"
                      aria-label="Select all jobs">
             </th>
-            <th scope="col">Job Class</th>
-            <th scope="col">Queue</th>
-            <th scope="col">Priority</th>
+            <% sort_url = ->(p) { jobs_path(status: @status, q: @search, period: @period, priority: @priority, **p) } %>
+            <%= sort_header_th("Job Class",   "class_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+            <%= sort_header_th("Queue",       "queue_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+            <%= sort_header_th("Priority",    "priority",   sort_url, current_sort: @sort, current_dir: @direction) %>
             <th scope="col">Scheduled At</th>
-            <th scope="col">Enqueued At</th>
+            <%= sort_header_th("Enqueued At", "created_at", sort_url, current_sort: @sort, current_dir: @direction) %>
             <th scope="col"><span class="sqd-sr-only">Actions</span></th>
           </tr>
         </thead>
@@ -111,9 +118,9 @@
               </td>
               <td><%= job.priority %></td>
               <td id="scheduled_at_<%= execution.id %>" class="sqd-mono">
-                <%= job.scheduled_at ? job.scheduled_at.strftime("%Y-%m-%d %H:%M:%S") : "—" %>
+                <%= format_timestamp(job.scheduled_at) %>
               </td>
-              <td class="sqd-mono"><%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+              <td class="sqd-mono"><%= format_timestamp(job.created_at) %></td>
               <td class="sqd-row-actions">
                 <% if @status == "scheduled" %>
                   <%= button_to "Run Now", scheduled_job_path(execution),
@@ -130,7 +137,7 @@
                 <% end %>
                 <%= button_to "Discard", job_path(execution),
                       method: :delete,
-                      params: { status: @status, period: @period },
+                      params: { status: @status, period: @period, sort: @sort, direction: @direction },
                       class: "sqd-btn sqd-btn--danger sqd-btn--sm",
                       data: { confirm: "Discard this job?" } %>
               </td>
@@ -149,11 +156,12 @@
       <table>
         <thead>
           <tr>
-            <th scope="col">Job Class</th>
-            <th scope="col">Queue</th>
-            <th scope="col">Priority</th>
+            <% sort_url = ->(p) { jobs_path(status: @status, q: @search, period: @period, priority: @priority, **p) } %>
+            <%= sort_header_th("Job Class",   "class_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+            <%= sort_header_th("Queue",       "queue_name", sort_url, current_sort: @sort, current_dir: @direction) %>
+            <%= sort_header_th("Priority",    "priority",   sort_url, current_sort: @sort, current_dir: @direction) %>
             <th scope="col">Scheduled At</th>
-            <th scope="col">Enqueued At</th>
+            <%= sort_header_th("Enqueued At", "created_at", sort_url, current_sort: @sort, current_dir: @direction) %>
             <% if @status == "claimed" %>
               <th scope="col">Running For</th>
             <% end %>
@@ -177,9 +185,9 @@
               </td>
               <td><%= job.priority %></td>
               <td class="sqd-mono">
-                <%= job.scheduled_at ? job.scheduled_at.strftime("%Y-%m-%d %H:%M:%S") : "—" %>
+                <%= format_timestamp(job.scheduled_at) %>
               </td>
-              <td class="sqd-mono"><%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+              <td class="sqd-mono"><%= format_timestamp(job.created_at) %></td>
               <% if @status == "claimed" %>
                 <td class="sqd-mono<%= slow ? " sqd-slow-duration" : "" %>">
                   <%= time_ago_in_words(execution.created_at) %>

data/app/views/solid_queue_web/queues/index.html.erb

@@ -26,7 +26,7 @@
               <% if (oldest = @oldest_ready[queue.name]) %>
                 <% age = Time.current - oldest %>
                 <% latency_color = age > 86_400 ? "var(--danger)" : age > 3_600 ? "var(--warning)" : "inherit" %>
-                <abbr title="<%= oldest.strftime("%Y-%m-%d %H:%M:%S UTC") %>">
+                <abbr title="<%= format_timestamp(oldest) %>">
                   <span style="color: <%= latency_color %>"><%= format_duration(age) %></span>
                 </abbr>
               <% else %>

data/app/views/solid_queue_web/queues/jobs/index.html.erb

@@ -64,9 +64,9 @@
             </td>
             <td><%= job.priority %></td>
             <td class="sqd-mono">
-              <%= job.scheduled_at ? job.scheduled_at.strftime("%Y-%m-%d %H:%M:%S") : "—" %>
+              <%= format_timestamp(job.scheduled_at) %>
             </td>
-            <td class="sqd-mono"><%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+            <td class="sqd-mono"><%= format_timestamp(job.created_at) %></td>
             <% if discardable %>
               <td class="sqd-row-actions">
                 <%= button_to "Discard", queue_job_path(queue_name: @queue, id: execution),

data/app/views/solid_queue_web/recurring_tasks/index.html.erb

@@ -43,7 +43,7 @@
             <td class="sqd-mono">
               <%
                 next_run = begin
-                  task.next_time.strftime("%Y-%m-%d %H:%M %Z")
+                  format_timestamp(task.next_time, format: "%Y-%m-%d %H:%M")
                 rescue
                   nil
                 end
@@ -52,7 +52,7 @@
             </td>
             <td class="sqd-mono">
               <% last_run = task.last_enqueued_time %>
-              <%= last_run ? last_run.strftime("%Y-%m-%d %H:%M %Z") : "—" %>
+              <%= format_timestamp(last_run, format: "%Y-%m-%d %H:%M") %>
             </td>
             <td>
               <% if task.static? %>

data/app/views/solid_queue_web/scheduled_jobs/update.turbo_stream.erb

@@ -3,7 +3,7 @@
 <% else %>
   <%= turbo_stream.replace "scheduled_at_#{@execution.id}" do %>
     <td id="scheduled_at_<%= @execution.id %>" class="sqd-mono">
-      <%= @execution.scheduled_at.strftime("%Y-%m-%d %H:%M:%S") %>
+      <%= format_timestamp(@execution.scheduled_at) %>
     </td>
   <% end %>
 <% end %>

data/app/views/solid_queue_web/search/index.html.erb

@@ -52,7 +52,7 @@
                 <tr>
                   <td><%= link_to job.class_name, job_path(job), class: "sqd-table-link" %></td>
                   <td class="sqd-mono"><%= job.queue_name %></td>
-                  <td class="sqd-mono"><%= job.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+                  <td class="sqd-mono"><%= format_timestamp(job.created_at) %></td>
                 </tr>
               <% end %>
             </tbody>

data/config/importmap.rb

@@ -3,3 +3,4 @@ pin "solid_queue_web/search_controller", to: "solid_queue_web/search_controller.
 pin "solid_queue_web/refresh_controller", to: "solid_queue_web/refresh_controller.js"
 pin "solid_queue_web/selection_controller", to: "solid_queue_web/selection_controller.js"
 pin "solid_queue_web/theme_controller", to: "solid_queue_web/theme_controller.js"
+pin "solid_queue_web/filters_controller", to: "solid_queue_web/filters_controller.js"

data/lib/solid_queue_web/version.rb

@@ -1,3 +1,3 @@
 module SolidQueueWeb
-  VERSION = "1.2.0"
+  VERSION = "1.3.0"
 end

data/lib/solid_queue_web.rb

@@ -6,7 +6,7 @@ module SolidQueueWeb
   class << self
     attr_writer :page_size, :dashboard_refresh_interval, :default_refresh_interval, :search_results_limit,
                 :slow_job_threshold, :alert_webhook_url, :alert_failure_threshold, :alert_webhook_cooldown,
-                :alert_queue_thresholds, :connects_to
+                :alert_queue_thresholds, :connects_to, :time_zone
 
     def page_size
       @page_size || 25
@@ -48,6 +48,10 @@ module SolidQueueWeb
       @connects_to
     end
 
+    def time_zone
+      @time_zone
+    end
+
     def configure
       yield self
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_queue_web
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Chuck Smith
@@ -144,6 +144,7 @@ files:
 - app/controllers/solid_queue_web/search_controller.rb
 - app/helpers/solid_queue_web/application_helper.rb
 - app/javascript/solid_queue_web/application.js
+- app/javascript/solid_queue_web/filters_controller.js
 - app/javascript/solid_queue_web/refresh_controller.js
 - app/javascript/solid_queue_web/search_controller.js
 - app/javascript/solid_queue_web/selection_controller.js