solid_queue_dashboard 0.0.1 → 0.1.1

data/app/helpers/solid_queue_dashboard/icons_helper.rb

@@ -0,0 +1,231 @@
+module SolidQueueDashboard
+  module IconsHelper
+    def icon_refresh_cw(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8")
+        concat tag.path(d: "M21 3v5h-5")
+        concat tag.path(d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16")
+        concat tag.path(d: "M8 16H3v5")
+      end
+    end
+
+    def icon_triangle_alert(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3")
+        concat tag.path(d: "M12 9v4")
+        concat tag.path(d: "M12 17h.01")
+      end
+    end
+
+    def icon_server(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.rect(width: "20", height: "8", x: "2", y: "2", rx: "2", ry: "2")
+        concat tag.rect(width: "20", height: "8", x: "2", y: "14", rx: "2", ry: "2")
+        concat tag.line(x1: "6", x2: "6.01", y1: "6", y2: "6")
+        concat tag.line(x1: "6", x2: "6.01", y1: "18", y2: "18")
+      end
+    end
+
+    def icon_layout_dashboard(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.rect(width: "7", height: "9", x: "3", y: "3", rx: "1")
+        concat tag.rect(width: "7", height: "5", x: "14", y: "3", rx: "1")
+        concat tag.rect(width: "7", height: "9", x: "14", y: "12", rx: "1")
+        concat tag.rect(width: "7", height: "5", x: "3", y: "16", rx: "1")
+      end
+    end
+
+    def icon_logs(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "M13 12h8")
+        concat tag.path(d: "M13 18h8")
+        concat tag.path(d: "M13 6h8")
+        concat tag.path(d: "M3 12h1")
+        concat tag.path(d: "M3 18h1")
+        concat tag.path(d: "M3 6h1")
+        concat tag.path(d: "M8 12h1")
+        concat tag.path(d: "M8 18h1")
+        concat tag.path(d: "M8 6h1")
+      end
+    end
+
+    def icon_clock(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.circle(cx: "12", cy: "12", r: "10")
+        concat tag.polyline(points: "12 6 12 12 16 14")
+      end
+    end
+
+    def icon_github(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4")
+        concat tag.path(d: "M9 18c-4.51 2-5-2-7-2")
+      end
+    end
+
+    def icon_x(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "M18 6 6 18")
+        concat tag.path(d: "m6 6 12 12")
+      end
+    end
+
+    def icon_moon(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.path(d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z")
+      end
+    end
+
+    def icon_sun(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.circle(cx: "12", cy: "12", r: "4")
+        concat tag.path(d: "M12 2v2")
+        concat tag.path(d: "M12 20v2")
+        concat tag.path(d: "m4.93 4.93 1.41 1.41")
+        concat tag.path(d: "m17.66 17.66 1.41 1.41")
+        concat tag.path(d: "M2 12h2")
+        concat tag.path(d: "M20 12h2")
+        concat tag.path(d: "m6.34 17.66-1.41 1.41")
+        concat tag.path(d: "m19.07 4.93-1.41 1.41")
+      end
+    end
+
+    def icon_play(options = {})
+      svg_options = {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }.merge(options)
+
+      tag.svg(**svg_options) do
+        concat tag.polygon(points: "6 3 20 12 6 21 6 3")
+      end
+    end
+  end
+end

data/app/helpers/solid_queue_dashboard/jobs_helper.rb

@@ -0,0 +1,51 @@
+module SolidQueueDashboard
+  module JobsHelper
+    def job_status_circle(status, options = {})
+      options[:class] = [ "circle", job_status_circle_class(status), options[:class] ].compact_blank.join(" ")
+      tag.span("", **options)
+    end
+
+    def job_status_circle_class(status)
+      {
+        "green": "circle-green",
+        "amber": "circle-amber",
+        "red": "circle-red",
+        "blue": "circle-blue",
+        "zinc": "circle-zinc"
+      }[Job::STATUS_COLORS[status]&.to_sym || :zinc]
+    end
+
+    def job_status_badge(status, options = {})
+      options[:class] = [ "badge", job_status_badge_class(status), options[:class] ].compact_blank.join(" ")
+      tag.span(status.to_s.titleize, **options)
+    end
+
+    def job_status_badge_class(status)
+      {
+        "green": "badge-green",
+        "amber": "badge-amber",
+        "red": "badge-red",
+        "blue": "badge-blue",
+        "zinc": "badge-zinc"
+      }[Job::STATUS_COLORS[status]&.to_sym || :zinc]
+    end
+
+    def format_failure_rate(failure_rate, options = {})
+      badge_variant = case failure_rate
+      when 0..1
+        "badge-emerald"
+      when 1..5
+        "badge-amber"
+      else
+        "badge-red"
+      end
+
+      options[:class] = [ "badge", badge_variant, options[:class] ].compact_blank.join(" ")
+      tag.span(number_to_percentage(failure_rate, precision: 2, strip_insignificant_zeros: true), **options)
+    end
+
+    def any_jobs_filters?
+      params[:class_name].present? || params[:status].present? || params[:queue_name].present?
+    end
+  end
+end

data/app/helpers/solid_queue_dashboard/pagination_helper.rb

@@ -0,0 +1,38 @@
+module SolidQueueDashboard
+  module PaginationHelper
+    def paginate(scope, page:, per_page:)
+      page = [ page.to_i, 1 ].max
+      per_page = per_page.zero? ? 25 : [ per_page.to_i, 1 ].max
+
+      offset = (page - 1) * per_page
+
+      records = scope.offset(offset).limit(per_page)
+      total_count = scope.count
+      total_pages = (total_count.to_f / per_page).ceil
+
+      {
+        records: records,
+        current_page: page,
+        per_page: per_page,
+        total_pages: total_pages,
+        total_count: total_count
+      }
+    end
+
+    def page_range(current_page, total_pages, window: 2)
+      if total_pages <= 7
+        (1..total_pages).to_a
+      else
+        [
+          1,
+          (current_page - window..current_page + window).to_a,
+          total_pages
+        ].flatten.uniq.sort.reject { |p| p < 1 || p > total_pages }.tap do |range|
+          range.each_cons(2) do |a, b|
+            range.insert(range.index(b), :gap) if b - a > 1
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/solid_queue_dashboard/processes_helper.rb

@@ -0,0 +1,35 @@
+module SolidQueueDashboard
+  module ProcessesHelper
+    def process_kind_circle(kind, options = {})
+      options[:class] = [ "circle", process_kind_circle_class(kind), options[:class] ].compact_blank.join(" ")
+      tag.span("", **options)
+    end
+
+    def process_kind_circle_class(kind)
+      {
+        "blue": "circle-blue",
+        "green": "circle-green",
+        "yellow": "circle-yellow",
+        "purple": "circle-purple"
+      }[Process::KIND_COLORS[kind]&.to_sym || :zinc]
+    end
+
+    def process_kind_badge(kind, options = {})
+      options[:class] = [ "badge", process_kind_badge_class(kind), options[:class] ].compact_blank.join(" ")
+      tag.span(kind.to_s.titleize, **options)
+    end
+
+    def process_kind_badge_class(kind)
+      {
+        "blue": "badge-blue",
+        "green": "badge-green",
+        "yellow": "badge-yellow",
+        "purple": "badge-purple"
+      }[Process::KIND_COLORS[kind]&.to_sym || :zinc]
+    end
+
+    def any_processes_filters?
+      params[:kind].present? || params[:hostname].present?
+    end
+  end
+end

data/app/helpers/solid_queue_dashboard/recurring_tasks_helper.rb

@@ -0,0 +1,33 @@
+module SolidQueueDashboard
+  module RecurringTasksHelper
+    def recurring_task_circle(type, options = {})
+      options[:class] = [ "circle", recurring_task_circle_class(type), options[:class] ].compact_blank.join(" ")
+      tag.span("", **options)
+    end
+
+    def recurring_task_circle_class(type)
+      {
+        "amber": "circle-amber",
+        "sky": "circle-sky",
+        "zinc": "circle-zinc"
+      }[RecurringTask::TYPE_COLORS[type]&.to_sym || :zinc]
+    end
+
+    def recurring_task_type_badge(type, options = {})
+      options[:class] = [ "badge", recurring_task_type_badge_class(type), options[:class] ].compact_blank.join(" ")
+      tag.span(type.to_s.titleize, **options)
+    end
+
+    def recurring_task_type_badge_class(type)
+      {
+        "amber": "badge-amber",
+        "sky": "badge-sky",
+        "zinc": "badge-zinc"
+      }[RecurringTask::TYPE_COLORS[type]&.to_sym || :zinc]
+    end
+
+    def any_recurring_tasks_filters?
+      params[:class_name].present? || params[:queue_name].present?
+    end
+  end
+end

data/app/views/layouts/solid_queue_dashboard/application.html.erb

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="<%= dark_mode? ? "dark" : "" %>" lang="en">
+<head>
+  <title>Solid Queue Dashboard</title>
+
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag "solid_queue_dashboard/application", media: "all" %>
+  <%= javascript_include_tag "solid_queue_dashboard/application" %>
+  <%= javascript_include_tag "solid_queue_dashboard/alpine", defer: true %>
+</head>
+<body class="pb-[15vh] sm:pb-[25vh]">
+  <div class="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
+    <%= render 'navbar' %>
+    <%= render 'flash_messages' %>
+    <%= yield %>
+    <%= render 'footer' %>
+  </div>
+</body>
+</html>

data/app/views/solid_queue_dashboard/application/_flash_messages.html.erb

@@ -0,0 +1,38 @@
+<% if flash.any? %>
+  <div class="space-y-4 mb-8">
+    <% flash.each do |type, message| %>
+      <% alert_class = case type
+                       when "notice" then "alert alert-blue"
+                       when "success" then "alert alert-green"
+                       when "error" then "alert alert-red"
+                       when "alert" then "alert alert-yellow"
+                       else "alert alert-default"
+                       end %>
+
+      <div class="<%= alert_class %>" role="alert">
+        <% if type == "notice" %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+          </svg>
+        <% elsif type == "success" %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+          </svg>
+        <% elsif type == "error" %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+        <% elsif type == "alert" %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+        <% end %>
+
+        <h3 class="alert-title"><%= type.capitalize %></h3>
+        <div class="alert-description">
+          <%= message %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/solid_queue_dashboard/application/_footer.html.erb

@@ -0,0 +1,11 @@
+<footer class="mt-6">
+  <p class="text-xs text-center text-muted-foreground">
+    <a
+      href="https://github.com/akodkod/solid_queue_dashboard"
+      target="_blank"
+      class="hover:underline hover:text-foreground"
+    >
+      <%= icon_github class: "inline-block size-3 mr-0.5 -translate-y-px" %>GitHub
+    </a>
+  </p>
+</footer>

data/app/views/solid_queue_dashboard/application/_navbar.html.erb

@@ -0,0 +1,50 @@
+<nav class="navbar mb-6">
+  <%= link_to root_path, class: "inline-flex items-center gap-0.5 text-xl font-bold tracking-tight translate-y-px" do %>
+    <span class="circle circle-blue"></span>
+    <span class="circle circle-green"></span>
+    <span class="circle circle-yellow"></span>
+    <span class="circle circle-red"></span>
+    <span class="ml-1.5 -translate-y-px">Solid Queue</span>
+  <% end %>
+
+  <div class="navbar-section">
+    <%= link_to root_path, class: "navbar-item #{current_page?(controller: 'dashboard', action: 'index') ? 'navbar-item-current' : 'navbar-item-default'}" do %>
+      <%= icon_layout_dashboard class: "size-4 mr-1.5" %>
+      Dashboard
+    <% end %>
+
+    <%= link_to jobs_path, class: "navbar-item #{current_page?(jobs_path) ? 'navbar-item-current' : 'navbar-item-default'}" do %>
+      <%= icon_logs class: "size-4 mr-1.5" %>
+      Jobs
+    <% end %>
+
+    <%= link_to processes_path, class: "navbar-item #{current_page?(processes_path) ? 'navbar-item-current' : 'navbar-item-default'}" do %>
+      <%= icon_server class: "size-4 mr-1.5" %>
+      Processes
+    <% end %>
+
+    <%= link_to recurring_tasks_path, class: "navbar-item #{current_page?(recurring_tasks_path) ? 'navbar-item-current' : 'navbar-item-default'}" do %>
+      <%= icon_clock class: "size-4 mr-1.5" %>
+      Recurring Tasks
+    <% end %>
+  </div>
+
+  <div class="ml-auto">
+    <div>
+      
+    </div>
+
+    <%= form_with url: toggle_appearance_path, method: :post do |f| %>
+      <button
+        type="submit"
+        class="btn btn-icon btn-secondary"
+      >
+        <% if dark_mode?%>
+          <%= icon_sun class: "size-4" %>
+        <% else %>
+          <%= icon_moon class: "size-4" %>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+</nav>

data/app/views/solid_queue_dashboard/application/_pagination.html.erb

@@ -0,0 +1,19 @@
+<% if total_pages > 1 %>
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <div class="pagination-content">
+      <%= link_to raw('&laquo; Previous'), url_for(page: current_page - 1, per_page: per_page), class: "pagination-link pagination-previous #{current_page > 1 ? 'pagination-link-active' : 'pagination-link-inactive'}", rel: "prev" unless current_page == 1 %>
+
+      <% page_range(current_page, total_pages).each do |page| %>
+        <% if page.is_a?(Integer) %>
+          <span class="pagination-item">
+            <%= link_to page, url_for(page: page, per_page: per_page), class: "pagination-link pagination-link-default #{page == current_page ? 'pagination-link-active' : 'pagination-link-inactive'}" %>
+          </span>
+        <% else %>
+          <span class="pagination-ellipsis">&hellip;</span>
+        <% end %>
+      <% end %>
+
+      <%= link_to raw('Next &raquo;'), url_for(page: current_page + 1, per_page: per_page), class: "pagination-link pagination-next #{current_page < total_pages ? 'pagination-link-active' : 'pagination-link-inactive'}", rel: "next" unless current_page == total_pages %>
+    </div>
+  </nav>
+<% end %>

data/app/views/solid_queue_dashboard/dashboard/index.html.erb

@@ -0,0 +1,41 @@
+<div class="grid grid-cols-5 gap-4">
+  <% SolidQueueDashboard::Job::STATUSES.each do |status| %>
+    <div class="card" data-href="<%= jobs_path(status:) %>">
+      <div class="card-content pt-5">
+        <h4 class="font-medium">
+          <%= status.to_s.titleize %>
+          <span class="ml-0.5 -translate-y-px circle <%= job_status_circle_class(status) %>"></span>
+        </h4>
+        <p class="text-4xl font-bold mt-1 text-black dark:text-white">
+          <%= @jobs.with_status(status).count %>
+        </p>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<div class="card mt-4">
+  <div class="card-header border-b">
+    <h3 class="card-title">Failure Rate</h3>
+  </div>
+  <div class="card-content !p-0">
+    <div class="table-wrapper">
+      <table class="table">
+        <thead class="table-header">
+          <tr class="table-row">
+            <th class="table-head">Job</th>
+            <th class="table-head">Failure Rate</th>
+          </tr>
+        </thead>
+        <tbody class="table-body">
+          <% @job_class_names.each do |class_name| %>
+            <tr class="table-row" data-href="<%= jobs_path(class_name:, status: :failed) %>">
+              <td class="table-cell font-medium"><%= class_name.titleize %></td>
+              <td class="table-cell font-medium"><%= format_failure_rate(SolidQueueDashboard.decorate(SolidQueue::Job.where(class_name:)).failure_rate) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/views/solid_queue_dashboard/jobs/_filters.html.erb

@@ -0,0 +1,87 @@
+<%= form_with url: jobs_path, method: :get, class: "space-y-3" do |form| %>
+  <div>
+    <label class="label">Status</label>
+    <div class="flex flex-wrap gap-1 mt-1">
+      <% SolidQueueDashboard::Job::STATUSES.each do |status| %>
+        <%= button_tag type: :submit,
+          name: :status,
+          value: status,
+          class: "px-2 badge #{params[:status] == status.to_s ? 'badge-primary' : 'badge-outline'}" do
+        %>
+          <span class="circle <%= job_status_circle_class(status) %>"></span>
+          <%= status.to_s.titleize %>
+          <span class="opacity-50 -ml-0.5">
+            <%= SolidQueueDashboard.decorate(SolidQueue::Job.all).with_status(status).count %>
+          </span>
+        <% end %>
+      <% end %>
+
+      <% if params[:status].present? %>
+        <%= button_tag type: :submit, name: :status, value: nil, class: "badge badge-destructive gap-1" do %>
+          <%= icon_x class: "size-3.5 text-red-500" %>
+          Clear
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <label class="label">Job Class</label>
+    <div class="flex flex-wrap gap-1 mt-1">
+      <% @job_class_names.each do |class_name| %>
+        <%= button_tag type: :submit,
+          name: :class_name,
+          value: class_name,
+          class: "px-2 badge #{params[:class_name] == class_name ? 'badge-primary' : 'badge-outline'}" do
+        %>
+          <%= class_name.to_s.titleize %>
+          <span class="opacity-50 -ml-0.5">
+            <%= SolidQueue::Job.where(class_name:).count %>
+          </span>
+        <% end %>
+      <% end %>
+
+      <% if params[:class_name].present? %>
+        <%= button_tag type: :submit, name: :class_name, value: nil, class: "badge badge-destructive gap-1" do %>
+          <%= icon_x class: "size-3.5 text-red-500" %>
+          Clear
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <% if @job_queue_names.size > 1 %>
+    <div>
+      <label class="label">Queue</label>
+      <div class="flex flex-wrap gap-1 mt-1">
+        <% @job_queue_names.each do |queue_name| %>
+          <%= button_tag type: :submit,
+            name: :queue_name,
+            value: queue_name,
+            class: "px-2 badge #{params[:queue_name] == queue_name ? 'badge-primary' : 'badge-outline'}" do
+          %>
+            <%= queue_name.to_s.titleize %>
+            <span class="opacity-50 -ml-0.5">
+              <%= SolidQueue::Job.where(queue_name:).count %>
+            </span>
+          <% end %>
+        <% end %>
+
+        <% if params[:queue_name].present? %>
+          <%= button_tag type: :submit, name: :queue_name, value: nil, class: "badge badge-destructive gap-1" do %>
+            <%= icon_x class: "size-3.5 text-red-500" %>
+            Clear
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <% if any_jobs_filters? %>
+    <hr>
+    <%= link_to jobs_path, class: "btn btn-outline btn-xs" do %>
+      <%= icon_x class: "size-4 text-red-500" %>
+      Clear All Filters
+    <% end %>
+  <% end %>
+<% end %>