solid_queue_dashboard 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bab2c28edcd8751ad636dcae7b2a464e937c4bf538c77a6f6be7f684bcc21e1d
-  data.tar.gz: '0701197567cfa3ed1f5a54add9f6b7b59bec01ddaa014b6213885e22ef724774'
+  metadata.gz: a6d60665de93e100be378a8e607aaf251e62bf7c991051633dd1aba8d9b2a84f
+  data.tar.gz: 47a0d627dbf19a6be53260c846ca3baa35038f64bb7d6e844d77a1de68e62c83
 SHA512:
-  metadata.gz: 5f40078988481a4f51e3433de13ce9640d218dda38ece0179e6d0b2526d78014db593b62c7b5ee69a4fa1c17c95a933da107c95690b550927ee4508d633595ed
-  data.tar.gz: 3a731f4e5c33e77c5989c5f290d7befba922aefd46c0febf4d8de86ad1e6b261825b147d8996394556f43d50f528363e2fa01208c1f48b52e967029f9edacd4c
+  metadata.gz: 0dc95cf029ba6e32480b9a10c07d2f50106f0630b66f0385134181d84b1af1bfd4e0dff016f1d140a696aae180eaae83f173c6575e51a04a68bf7574f9177307
+  data.tar.gz: 5fdb3e8c5b8f08f3afb4769855595ccf2a8426ac429428f19bd32d82cec932d7882c892b60eb5f2e2ae8ae65822a91fc1ef86cc7701b6fa994fffe31912ddabe

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 ## [Unreleased]
 
+## [0.2.0] - October 17, 2024
+
+- Show running jobs
+- Add charts
+- Add auto-refresh
+- Add number of current processes and recurring tasks to navbar
+- Fix dark mode not switching for the first time
+
+## [0.1.1] - October 7, 2024
+
+- Replace OpenStruct with a Hash to avoid including the `ostruct` gem
+
 ## [0.1.0] - October 7, 2024
 
 - Initial release

data/Procfile.dev

@@ -1,2 +1,3 @@
 test_app:   cd test_app && ./bin/rails server -p 3000
-tailwind:   bun watch
+jobs:       cd test_app && ./bin/jobs
+tailwind:   bun watch

data/README.md

@@ -1,14 +1,14 @@
-# Solid Queue Dashboard
+# Solid Queue Dashboard <sup>BETA</sup>
 
 <p align="center">
   <a href="https://github.com/akodkod/solid-queue-dashboard#gh-light-mode-only">
-    <img src="https://github.com/user-attachments/assets/90cb68cf-73d9-41bf-b9d5-93da7c36f204" alt="Solid Queue Dashboard Light Mode">
+    <img src="https://github.com/user-attachments/assets/55aa4a3c-da51-471b-8f58-0cf1f9a1f8da" alt="Solid Queue Dashboard Light Mode">
   </a>
   <a href="https://github.com/akodkod/solid-queue-dashboard#gh-dark-mode-only">
-    <img src="https://github.com/user-attachments/assets/ea089277-67fc-4bc9-91d8-2e3e7349b0c9" alt="Solid Queue Dashboard Dark Mode">
+    <img src="https://github.com/user-attachments/assets/645558cb-c20f-4d4b-9697-55282710ea6c" alt="Solid Queue Dashboard Dark Mode">
   </a>
 
-  _👋 I'm available for hire → [kodkod.me](https://kodkod.me)_
+  _👋 I'm Available for Hire → [kodkod.me](https://kodkod.me)_
 </p>
 
 ## Features
@@ -19,12 +19,12 @@
 - 📜 View execution history
 - 🔍 Filter options
 - 🔄 Retry jobs from the UI
-- 🚫 No dependencies
+- 🥬 Auto-refresh
+- 📈 Add charts
 - 🐒 No monkey patching
+- 💈 TailwindCSS
 
 ## Roadmap
-- 🏊‍♂️ Auto-pooling
-- 📈 Add charts
 - 🚀 Manually trigger jobs
 - ⏹️ Cancel long jobs (if possible)
 - 📊 More statistics and insights
@@ -43,7 +43,7 @@ bundle add solid_queue_dashboard
 Or add this line to your `Gemfile`:
 
 ```bash
-gem "solid_queue_dashboard", "~> 0.1.0"
+gem "solid_queue_dashboard", "~> 0.2.0"
 ```
 
 Add this line to `routes.rb`:
@@ -85,10 +85,14 @@ To generate dummy data:
 ```
 cd test_app
 rails jobs:generate_dummy_data
-./bin/jobs
 ```
 
 ## License
 
 This gem is open source under the [MIT License](http://opensource.org/licenses/MIT).
 
+---
+
+_Made with love by Ukrainians 💙💛_  
+_[Help Ukraine](https://u24.gov.ua/)_
+

data/app/assets/javascripts/solid_queue_dashboard/application.js

@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // Format dates
-  document.querySelectorAll('[data-date]').forEach(function(element) {
+  document.querySelectorAll('[data-date]').forEach(function (element) {
     const dateString = element.textContent.trim();
     const date = new Date(dateString);
 
@@ -37,10 +37,24 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // Handle auto-submit elements
-  document.querySelectorAll('[data-auto-submit]').forEach(function(element) {
-    element.addEventListener('change', function() {
+  document.querySelectorAll('[data-auto-submit]').forEach(function (element) {
+    element.addEventListener('change', function () {
       const form = element.closest('form');
       if (form) form.submit();
     });
   });
+
+
+  // Auto-refresh functionality for dashboard page
+  const searchParams = new URLSearchParams(window.location.search);
+  const refreshInterval = parseInt(searchParams.get('auto_refresh_period'));
+
+  if (refreshInterval) {
+    setInterval(refreshHomePage, refreshInterval * 1000);
+  }
+
+  function refreshHomePage() {
+    // TODO: Implement a smart refresh strategy using Fetch or Turbo
+    window.location.reload();
+  }
 });

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

@@ -584,12 +584,12 @@ video {
 
 .dark {
   --background: 240 10% 5.4%;
-  --foreground: 0 0% 98%;
+  --foreground: 0 0% 92%;
   --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
+  --card-foreground: 0 0% 92%;
   --popover: 240 10% 3.9%;
   --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
+  --primary: 0 0% 95%;
   --primary-foreground: 240 5.9% 10%;
   --secondary: 240 3.7% 15.9%;
   --secondary-foreground: 0 0% 98%;
@@ -796,6 +796,16 @@ body {
   background-color: hsl(var(--primary) / 0.8);
 }
 
+.badge-secondary {
+  border-color: transparent;
+  background-color: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+
+.badge-secondary:hover {
+  background-color: hsl(var(--secondary) / 0.8);
+}
+
 .badge-destructive {
   border-color: transparent;
   background-color: hsl(var(--destructive) / 0.15);
@@ -901,6 +911,18 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.badge-indigo {
+  border-color: transparent;
+  background-color: rgb(99 102 241 / 0.15);
+  --tw-text-opacity: 1;
+  color: rgb(67 56 202 / var(--tw-text-opacity));
+}
+
+.badge-indigo:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
 .badge-purple {
   border-color: transparent;
   background-color: rgb(168 85 247 / 0.15);
@@ -915,7 +937,7 @@ body {
 
 .badge-zinc {
   border-color: transparent;
-  background-color: rgb(82 82 91 / 0.1);
+  background-color: rgb(82 82 91 / 0.075);
   --tw-text-opacity: 1;
   color: rgb(63 63 70 / var(--tw-text-opacity));
 }
@@ -969,6 +991,11 @@ body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.circle-indigo {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
 .circle-purple {
   --tw-bg-opacity: 1;
   background-color: rgb(168 85 247 / var(--tw-bg-opacity));
@@ -976,7 +1003,7 @@ body {
 
 .circle-zinc {
   --tw-bg-opacity: 1;
-  background-color: rgb(82 82 91 / var(--tw-bg-opacity));
+  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
 }
 
 /*
@@ -1504,6 +1531,22 @@ body {
   position: static;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
+.top-6 {
+  top: 1.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1529,6 +1572,10 @@ body {
   margin-left: 0.125rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-1\.5 {
   margin-left: 0.375rem;
 }
@@ -1561,6 +1608,10 @@ body {
   margin-right: 0.375rem;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1581,10 +1632,6 @@ body {
   margin-top: 2rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .inline-block {
   display: inline-block;
 }
@@ -1641,6 +1688,10 @@ body {
   width: 6rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -1667,8 +1718,8 @@ body {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
 .\!flex-row {
@@ -1683,6 +1734,10 @@ body {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1703,6 +1758,10 @@ body {
   gap: 0.25rem;
 }
 
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1785,6 +1844,11 @@ body {
   border-top-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.border-t-sky-500 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(14 165 233 / var(--tw-border-opacity));
+}
+
 .border-t-zinc-500 {
   --tw-border-opacity: 1;
   border-top-color: rgb(113 113 122 / var(--tw-border-opacity));
@@ -1798,6 +1862,14 @@ body {
   padding: 0px !important;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1822,6 +1894,10 @@ body {
   padding-bottom: 15vh;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1867,19 +1943,6 @@ body {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.text-\[15px\] {
-  font-size: 15px;
-}
-
-.text-\[14px\] {
-  font-size: 14px;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1964,6 +2027,10 @@ body {
   }
 }
 
+.running {
+  animation-play-state: running;
+}
+
 .marker\:text-sm *::marker {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2009,6 +2076,11 @@ body {
   border-top-color: rgb(147 51 234 / var(--tw-border-opacity));
 }
 
+.dark\:border-t-sky-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(2 132 199 / var(--tw-border-opacity));
+}
+
 .dark\:border-t-zinc-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-top-color: rgb(82 82 91 / var(--tw-border-opacity));

data/app/assets/stylesheets/solid_queue_dashboard/tailwind.css

@@ -33,12 +33,12 @@
 
   .dark {
     --background: 240 10% 5.4%;
-    --foreground: 0 0% 98%;
+    --foreground: 0 0% 92%;
     --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 0 0% 92%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 0 0% 95%;
     --primary-foreground: 240 5.9% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
@@ -188,7 +188,7 @@
   }
 
   .badge-zinc {
-    @apply border-transparent bg-zinc-600/10 text-zinc-700 dark:bg-white/5 dark:text-zinc-400;
+    @apply border-transparent bg-zinc-600/7.5 text-zinc-700 dark:bg-white/5 dark:text-zinc-400;
   }
 
   /*
@@ -284,7 +284,7 @@
   }
 
   .circle-zinc {
-    @apply bg-zinc-600;
+    @apply bg-zinc-400;
   }
 
   /*

data/app/controllers/solid_queue_dashboard/appearance_controller.rb

@@ -1,7 +1,7 @@
 module SolidQueueDashboard
   class AppearanceController < ApplicationController
     def toggle
-      cookies[:dark_mode] = cookies[:dark_mode] == "false" ? "true" : "false"
+      cookies[:dark_mode] = cookies[:dark_mode] == "true" ? "false" : "true"
       redirect_to request.referer
     end
   end

data/app/controllers/solid_queue_dashboard/dashboard_controller.rb

@@ -2,7 +2,67 @@ module SolidQueueDashboard
   class DashboardController < ApplicationController
     def index
       @jobs = SolidQueueDashboard.decorate(SolidQueue::Job.all)
-      @job_class_names = SolidQueueDashboard.job_class_names
+      load_charts
+    end
+
+    private
+
+    def load_charts
+      case params[:chart_period] || "30m"
+      when "15m"
+        n = 1
+        last = 15
+      when "30m"
+        n = 1
+        last = 30
+      when "1h"
+        n = 2
+        last = 30
+      when "3h"
+        n = 6
+        last = 30
+      when "6h"
+        n = 12
+        last = 30
+      when "12h"
+        n = 20
+        last = 36
+      when "1d"
+        n = 30
+        last = 48
+      when "3d"
+        n = 90 # 1.5 hours
+        last = 48
+      when "1w"
+        n = 180 # 3 hours
+        last = 56
+      else
+        n = 1
+        last = 30
+      end
+
+      @charts = [
+        {
+          name: "Enqueued",
+          data: SolidQueue::Job.group_by_minute(:created_at, last: last, n: n).count,
+          color: "#A1A1AB"
+        },
+        {
+          name: "Finished",
+          data: @jobs.finished.group_by_minute(:finished_at, last: last, n: n).count,
+          color: "#23C55E"
+        },
+        {
+          name: "Retried",
+          data: @jobs.retried.group_by_minute(:finished_at, last: last, n: n).count,
+          color: "#FBBF26"
+        },
+        {
+          name: "Failed",
+          data: SolidQueue::FailedExecution.group_by_minute(:created_at, last: last, n: n).count,
+          color: "#F04444"
+        }
+      ]
     end
   end
 end

data/app/controllers/solid_queue_dashboard/jobs_controller.rb

@@ -32,7 +32,7 @@ module SolidQueueDashboard
       jobs = jobs.where(queue_name: params[:queue_name]) if params[:queue_name].present?
 
       @pagination = paginate(jobs, page: params[:page].to_i, per_page: params[:per_page].to_i)
-      @jobs = SolidQueueDashboard.decorate(@pagination.records)
+      @jobs = SolidQueueDashboard.decorate(@pagination[:records])
     end
 
     def set_job

data/app/controllers/solid_queue_dashboard/stats_controller.rb

@@ -0,0 +1,8 @@
+module SolidQueueDashboard
+  class StatsController < ApplicationController
+    def index
+      @jobs = SolidQueueDashboard.decorate(SolidQueue::Job.all)
+      @job_class_names = SolidQueueDashboard.job_class_names
+    end
+  end
+end

data/app/helpers/solid_queue_dashboard/icons_helper.rb

@@ -227,5 +227,28 @@ module SolidQueueDashboard
         concat tag.polygon(points: "6 3 20 12 6 21 6 3")
       end
     end
+
+    def icon_chart_scatter(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: "7.5", cy: "7.5", r: ".5", fill: "currentColor")
+        concat tag.circle(cx: "18.5", cy: "5.5", r: ".5", fill: "currentColor")
+        concat tag.circle(cx: "11.5", cy: "11.5", r: ".5", fill: "currentColor")
+        concat tag.circle(cx: "7.5", cy: "16.5", r: ".5", fill: "currentColor")
+        concat tag.circle(cx: "17.5", cy: "14.5", r: ".5", fill: "currentColor")
+        concat tag.path(d: "M3 3v16a2 2 0 0 0 2 2h16")
+      end
+    end
   end
 end

data/app/helpers/solid_queue_dashboard/jobs_helper.rb

@@ -11,7 +11,10 @@ module SolidQueueDashboard
         "amber": "circle-amber",
         "red": "circle-red",
         "blue": "circle-blue",
-        "zinc": "circle-zinc"
+        "sky": "circle-sky",
+        "zinc": "circle-zinc",
+        "indigo": "circle-indigo",
+        "purple": "circle-purple"
       }[Job::STATUS_COLORS[status]&.to_sym || :zinc]
     end
 
@@ -26,7 +29,10 @@ module SolidQueueDashboard
         "amber": "badge-amber",
         "red": "badge-red",
         "blue": "badge-blue",
-        "zinc": "badge-zinc"
+        "sky": "badge-sky",
+        "zinc": "badge-zinc",
+        "indigo": "badge-indigo",
+        "purple": "badge-purple"
       }[Job::STATUS_COLORS[status]&.to_sym || :zinc]
     end
 

data/app/helpers/solid_queue_dashboard/pagination_helper.rb

@@ -10,13 +10,13 @@ module SolidQueueDashboard
       total_count = scope.count
       total_pages = (total_count.to_f / per_page).ceil
 
-      OpenStruct.new(
+      {
         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)

data/app/helpers/solid_queue_dashboard/processes_helper.rb

@@ -10,7 +10,8 @@ module SolidQueueDashboard
         "blue": "circle-blue",
         "green": "circle-green",
         "yellow": "circle-yellow",
-        "purple": "circle-purple"
+        "purple": "circle-purple",
+        "sky": "circle-sky",
       }[Process::KIND_COLORS[kind]&.to_sym || :zinc]
     end
 
@@ -24,7 +25,8 @@ module SolidQueueDashboard
         "blue": "badge-blue",
         "green": "badge-green",
         "yellow": "badge-yellow",
-        "purple": "badge-purple"
+        "purple": "badge-purple",
+        "sky": "badge-sky",
       }[Process::KIND_COLORS[kind]&.to_sym || :zinc]
     end
 

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

@@ -8,14 +8,16 @@
 
   <%= stylesheet_link_tag "solid_queue_dashboard/application", media: "all" %>
   <%= javascript_include_tag "solid_queue_dashboard/application" %>
+  <%= javascript_include_tag "chartkick" %>
+  <%= javascript_include_tag "Chart.bundle" %>
   <%= 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' %>
+    <%= render "navbar" %>
+    <%= render "flash_messages" %>
     <%= yield %>
-    <%= render 'footer' %>
+    <%= render "footer" %>
   </div>
 </body>
 </html>

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

@@ -1,5 +1,5 @@
 <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 %>
+  <%= link_to root_path, class: "inline-flex items-center gap-0.5 text-xl font-bold tracking-tight translate-y-px pl-1" do %>
     <span class="circle circle-blue"></span>
     <span class="circle circle-green"></span>
     <span class="circle circle-yellow"></span>
@@ -21,18 +21,41 @@
     <%= 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
+
+      <span class="badge <%= current_page?(processes_path) ? 'badge-secondary' : 'badge-primary' %> ml-1 text-xs">
+        <%= SolidQueue::Process.count %>
+      </span>
     <% 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
+
+      <span class="badge <%= current_page?(recurring_tasks_path) ? 'badge-secondary' : 'badge-primary' %> ml-1 text-xs">
+        <%= SolidQueue::RecurringTask.count %>
+      </span>
+    <% end %>
+
+    <%= link_to stats_path, class: "navbar-item #{current_page?(stats_path) ? 'navbar-item-current' : 'navbar-item-default'}" do %>
+      <%= icon_chart_scatter class: "size-4 mr-1.5" %>
+      Stats
     <% end %>
   </div>
 
-  <div class="ml-auto">
-    <div>
-      
-    </div>
+  <div class="ml-auto flex gap-4">
+    <% if current_page?(controller: 'dashboard', action: 'index') %>
+      <%= form_with url: root_path, method: :get, class: "flex gap-1.5 items-center" do |form| %>
+        <%= form.hidden_field :chart_period %>
+
+        <%= icon_refresh_cw class: "size-4 text-muted-foreground" %>
+        <%= form.select :auto_refresh_period,
+          [["Auto-Refresh Off", "off"], ["15 seconds", "15"], ["30 seconds", "30"], ["1 minute", "60"], ["3 minutes", "180"], ["5 minutes", "300"], ["10 minutes", "600"], ["15 minutes", "900"], ["30 minutes", "1800"], ["1 hour", "3600"]],
+          { selected: params[:auto_refresh_period].presence || "off" },
+          class: "select w-40",
+          data: { auto_submit: true }
+        %>
+      <% end %>
+    <% end %>
 
     <%= form_with url: toggle_appearance_path, method: :post do |f| %>
       <button

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

@@ -1,4 +1,18 @@
-<div class="grid grid-cols-5 gap-4">
+<div class="card card-content p-6 relative">
+  <%= form_with url: root_path, method: :get, class: "absolute top-6 right-6" do |form| %>
+    <%= form.hidden_field :auto_refresh_period %>
+    <%= form.select :chart_period,
+      [["15 minutes", "15m"], ["30 minutes", "30m"], ["1 hour", "1h"], ["3 hours", "3h"], ["6 hours", "6h"], ["12 hours", "12h"], ["1 day", "1d"], ["3 days", "3d"], ["1 week", "1w"]],
+      { selected: params[:chart_period].presence || "30m" },
+      class: "select",
+      data: { auto_submit: true }
+    %>
+  <% end %>
+
+  <%= line_chart @charts, points: false, thousands: "," %>
+</div>
+
+<div class="grid grid-cols-6 gap-4 mt-4">
   <% SolidQueueDashboard::Job::STATUSES.each do |status| %>
     <div class="card" data-href="<%= jobs_path(status:) %>">
       <div class="card-content pt-5">
@@ -7,35 +21,9 @@
           <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 %>
+          <%= number_with_delimiter(@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/_table.html.erb

@@ -13,7 +13,7 @@
       </tr>
     </thead>
     <tbody class="table-body">
-      <%= render partial: 'solid_queue_dashboard/jobs/table_row', collection: jobs, as: :job, locals: { highlight_ids: highlight_ids } %>
+      <%= render partial: "solid_queue_dashboard/jobs/table_row", collection: jobs, as: :job, locals: { highlight_ids: highlight_ids } %>
     </tbody>
   </table>
 </div>

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

@@ -14,6 +14,12 @@
 
   <td class="table-cell">
     <%= job_status_badge(job.status) %>
+    <% if job.running? %>
+      <br />
+      <span class="text-xs text-muted-foreground">
+        <%= time_ago_in_words(job.claimed_execution.created_at, include_seconds: true) %>
+      </span>
+    <% end %>
   </td>
 
   <td class="table-cell">
@@ -29,9 +35,9 @@
       <p class="font-medium"><%= job.class_name %></p>
 
       <% if job.arguments["arguments"].present? %>
-        <p class="mt-0.5">
+        <p class="inline-flex flex-wrap gap-0.5 items-start mt-0.5">
           <% job.arguments["arguments"].each do |argument| %>
-            <span class="badge badge-zinc"><%= truncate(JSON.pretty_generate(argument), length: 80) %></span>
+            <span class="badge badge-zinc text-xs"><%= truncate(JSON.pretty_generate(argument), length: 60) %></span>
           <% end %>
         </p>
       <% end %>
@@ -51,7 +57,17 @@
   </td>
 
   <td class="table-cell">
-    <% if job.success? || job.retried? %>
+    <% if job.running? %>
+      <p class="text-sm text-muted-foreground">
+        Running for <strong class="font-medium text-foreground"><%= time_ago_in_words(job.claimed_execution.created_at, include_seconds: true) %></strong>
+        <% if job.claimed_execution.process %>
+          by <strong class="font-medium text-foreground">
+            <%= process_kind_badge(job.claimed_execution.process.kind) %>
+            <%= link_to "##{job.claimed_execution.process.id}", process_path(job.claimed_execution.process), class: "link" %>
+          </strong>
+        <% end %>
+      </p>
+    <% elsif job.success? || job.retried? %>
       <p class="text-sm text-muted-foreground">
         <%= job.retried? ? "Failed" : "Finished" %> at <strong class="font-medium text-foreground" data-date="<%= job.finished_at.to_fs(:database) %>"><%= job.finished_at %></strong><br />
         <span class="text-xs"><%= time_ago_in_words(job.scheduled_at, include_seconds: true) %> ago</span>

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

@@ -25,12 +25,12 @@
     <% end %>
   </div>
 
-  <% if @pagination.total_pages > 1 %>
+  <% if @pagination[:total_pages] > 1 %>
     <div class="card-footer pt-6 border-t flex justify-between">
       <%= render partial: 'solid_queue_dashboard/application/pagination', locals: {
-        current_page: @pagination.current_page,
-        total_pages: @pagination.total_pages,
-        per_page: @pagination.per_page
+        current_page: @pagination[:current_page],
+        total_pages: @pagination[:total_pages],
+        per_page: @pagination[:per_page]
       } %>
 
       <div class="flex items-center gap-2">
@@ -42,7 +42,7 @@
           <%= f.hidden_field :page, value: 1 %>
           <%= f.select :per_page,
             [10, 25, 50, 100],
-            { selected: @pagination.per_page },
+            { selected: @pagination[:per_page] },
             class: "select w-24",
             data: { auto_submit: true }
           %>

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

@@ -126,9 +126,11 @@
       <% if @job.class_name === SolidQueueDashboard::Job::COMMAND_CLASS_NAME %>
         <pre x-show="!showAll"><%= @job.arguments["arguments"][0] %></pre>
       <% else %>
-        <% @job.arguments["arguments"].each do |argument| %>
-          <span class="badge badge-zinc text-sm"><%= JSON.pretty_generate(argument) %></span>
-        <% end %>
+        <div x-show="!showAll">
+          <% @job.arguments["arguments"].each do |argument| %>
+            <span class="badge badge-zinc text-sm"><%= JSON.pretty_generate(argument) %></span>
+          <% end %>
+        </div>
       <% end %>
 
       <pre x-show="showAll"><%= JSON.pretty_generate(@job.arguments) %></pre>

data/app/views/solid_queue_dashboard/processes/_table_row.html.erb

@@ -5,6 +5,12 @@
 
   <td class="table-cell">
     <%= process_kind_badge(process.kind) %>
+
+    <% if process.claimed_executions.any? %>
+      <span class="ml-0.5 text-xs text-muted-foreground">
+        Running <%= pluralize(process.claimed_executions.count, "job") %>
+      </span>
+    <% end %>
   </td>
 
   <td class="table-cell"><%= process.hostname %></td>

data/app/views/solid_queue_dashboard/processes/show.html.erb

@@ -66,9 +66,22 @@
   </div>
 </div>
 
+<% if @process.claimed_executions.any? %>
+  <div class="card mt-8 overflow-hidden">
+    <div class="card-header border-b border-t-4 border-t-sky-500 dark:border-t-sky-600">
+      <h2 class="card-title">Running Jobs</h2>
+      <p class="card-description">Jobs that this process is currently running</p>
+    </div>
+
+    <div class="card-content p-0">
+      <%= render partial: 'solid_queue_dashboard/jobs/table', locals: { jobs: @process.claimed_executions.map { |execution| SolidQueueDashboard::Decorators::JobDecorator.new(execution.job) } } %>
+    </div>
+  </div>
+<% end %>
+
 <% if @process.metadata.present? %>
   <div class="card mt-8 overflow-hidden">
-    <div class="card-header border-b border-t-4 border-t-blue-500 dark:border-t-blue-600">
+    <div class="card-header border-b border-t-4 border-t-amber-500 dark:border-t-amber-600">
       <h2 class="card-title">Metadata</h2>
       <p class="card-description">Additional information about this process</p>
     </div>

data/app/views/solid_queue_dashboard/recurring_tasks/show.html.erb

@@ -122,7 +122,12 @@
   <div class="card-content pt-5">
     <ul class="list-decimal marker:text-sm marker:text-muted-foreground ml-4 space-y-1">
       <% @recurring_task.next_runs.each do |run_time| %>
-        <li data-date><%= run_time.strftime("%Y-%m-%d %H:%M:%S %Z") %></li>
+        <li>
+          <span data-date><%= run_time.strftime("%Y-%m-%d %H:%M:%S %Z") %></span>
+          <span class="text-muted-foreground">
+            in <%= distance_of_time_in_words(Time.current, run_time) %>
+          </span>
+        </li>
       <% end %>
     </ul>
   </div>

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

@@ -0,0 +1,25 @@
+<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/config/routes.rb

@@ -13,6 +13,8 @@ SolidQueueDashboard::Engine.routes.draw do
     end
   end
 
+  get "stats", to: "stats#index", as: :stats
   post "appearance/toggle", to: "appearance#toggle", as: :toggle_appearance
+
   root "dashboard#index"
 end

data/lib/solid_queue_dashboard/decorators/job_decorator.rb

@@ -8,7 +8,9 @@ module SolidQueueDashboard
       def status
         return @status if defined?(@status)
 
-        @status = if retried?
+        @status = if running?
+          Job::RUNNING
+        elsif retried?
           Job::RETRIED
         elsif failed?
           Job::FAILED
@@ -21,6 +23,11 @@ module SolidQueueDashboard
         end
       end
 
+      def running?
+        return @running if defined?(@running)
+        @running = claimed_execution.present?
+      end
+
       def success?
         return @success if defined?(@success)
         @success = finished_at.present? && !failed? && !retried?
@@ -44,7 +51,7 @@ module SolidQueueDashboard
 
       def pending?
         return @pending if defined?(@pending)
-        @pending = !finished_at.present?
+        @pending = !finished_at.present? && !running?
       end
 
       def execution_history

data/lib/solid_queue_dashboard/decorators/jobs_decorator.rb

@@ -3,6 +3,8 @@ module SolidQueueDashboard
     class JobsDecorator < SimpleDelegator
       def with_status(status)
         case status.to_sym
+        when Job::RUNNING
+          running
         when Job::SUCCESS
           success
         when Job::FAILED
@@ -18,6 +20,10 @@ module SolidQueueDashboard
         end
       end
 
+      def running
+        where.associated(:claimed_execution)
+      end
+
       def success
         where.not(finished_at: nil)
           .where.not(id: failed)
@@ -31,6 +37,7 @@ module SolidQueueDashboard
       def pending
         where(finished_at: nil, scheduled_at: ..Time.current)
           .where.not(id: failed)
+          .where.not(id: running)
       end
 
       def retried

data/lib/solid_queue_dashboard/job.rb

@@ -1,20 +1,22 @@
 module SolidQueueDashboard
   module Job
     # Constants
+    RUNNING = :running
     SUCCESS = :success
     RETRIED = :retried
     FAILED = :failed
     PENDING = :pending
     SCHEDULED = :scheduled
 
-    STATUSES = [ SUCCESS, RETRIED, FAILED, SCHEDULED, PENDING ]
+    STATUSES = [ RUNNING, SUCCESS, RETRIED, FAILED, SCHEDULED, PENDING ]
 
     STATUS_COLORS = {
       SUCCESS => "green",
       RETRIED => "amber",
       FAILED => "red",
-      SCHEDULED => "blue",
-      PENDING => "zinc"
+      SCHEDULED => "purple",
+      PENDING => "zinc",
+      RUNNING => "sky"
     }
 
     COMMAND_CLASS_NAME = "SolidQueue::RecurringJob"

data/lib/solid_queue_dashboard/process.rb

@@ -9,13 +9,13 @@ module SolidQueueDashboard
     KINDS = [ SUPERVISOR, DISPATCHER, WORKER, SCHEDULER ]
 
     KIND_COLORS = {
-      SUPERVISOR => "blue",
+      SUPERVISOR => "yellow",
       DISPATCHER => "green",
-      WORKER => "yellow",
+      WORKER => "sky",
       SCHEDULER => "purple"
     }
 
-    HEARTBEAT_DEAD_THRESHOLD = 1.minute
+    HEARTBEAT_DEAD_THRESHOLD = 3.minutes
 
     def self.kind_color(kind)
       KIND_COLORS[kind] || "zinc"

data/lib/solid_queue_dashboard/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidQueueDashboard
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/solid_queue_dashboard.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 require "rails"
+require "groupdate"
+require "chartkick"
 require_relative "solid_queue_dashboard/version"
 require_relative "solid_queue_dashboard/configuration"
 require_relative "solid_queue_dashboard/engine"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solid_queue_dashboard
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Andrew Kodkod
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-07 00:00:00.000000000 Z
+date: 2024-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: solid_queue
@@ -24,6 +24,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 1.0.0
+- !ruby/object:Gem::Dependency
+  name: groupdate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.5'
+- !ruby/object:Gem::Dependency
+  name: chartkick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
 description: Dashboard for Solid Queue
 email:
 - andrew@kodkod.me
@@ -48,6 +76,7 @@ files:
 - app/controllers/solid_queue_dashboard/jobs_controller.rb
 - app/controllers/solid_queue_dashboard/processes_controller.rb
 - app/controllers/solid_queue_dashboard/recurring_tasks_controller.rb
+- app/controllers/solid_queue_dashboard/stats_controller.rb
 - app/helpers/solid_queue_dashboard/appearance_helper.rb
 - app/helpers/solid_queue_dashboard/application_helper.rb
 - app/helpers/solid_queue_dashboard/icons_helper.rb
@@ -76,6 +105,7 @@ files:
 - app/views/solid_queue_dashboard/recurring_tasks/_table_row.html.erb
 - app/views/solid_queue_dashboard/recurring_tasks/index.html.erb
 - app/views/solid_queue_dashboard/recurring_tasks/show.html.erb
+- app/views/solid_queue_dashboard/stats/index.html.erb
 - bun.lockb
 - config/routes.rb
 - lib/solid_queue_dashboard.rb