feat: auto-refresh dashboard, jobs, and processes

app/javascript/solid_queue_web/application.js

@@ -1,6 +1,8 @@
 import "@hotwired/turbo"
 import { Application } from "@hotwired/stimulus"
 import SearchController from "solid_queue_web/search_controller"
+import RefreshController from "solid_queue_web/refresh_controller"
 
 const application = Application.start()
 application.register("search", SearchController)
+application.register("refresh", RefreshController)

app/javascript/solid_queue_web/refresh_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { interval: { type: Number, default: 5000 } }
+
+  initialize() {
+    this._onVisibilityChange = this._onVisibilityChange.bind(this)
+  }
+
+  connect() {
+    document.addEventListener("visibilitychange", this._onVisibilityChange)
+    this._schedule()
+  }
+
+  disconnect() {
+    clearTimeout(this._timer)
+    document.removeEventListener("visibilitychange", this._onVisibilityChange)
+  }
+
+  _schedule() {
+    this._timer = setTimeout(() => this._reload(), this.intervalValue)
+  }
+
+  async _reload() {
+    clearTimeout(this._timer)
+    if (!document.hidden) {
+      try {
+        const response = await fetch(window.location.href, {
+          headers: { "Turbo-Frame": this.element.id, Accept: "text/html" }
+        })
+        if (response.ok) {
+          const html = await response.text()
+          const doc = new DOMParser().parseFromString(html, "text/html")
+          const frame = doc.querySelector(`turbo-frame#${this.element.id}`)
+          if (frame && this.element.isConnected) this.element.innerHTML = frame.innerHTML
+        }
+      } catch {
+        // network error — skip this tick
+      }
+    }
+    if (this.element.isConnected) this._schedule()
+  }
+
+  _onVisibilityChange() {
+    if (document.hidden) {
+      clearTimeout(this._timer)
+    } else {
+      this._reload()
+    }
+  }
+}

app/views/solid_queue_web/dashboard/index.html.erb

@@ -1,3 +1,4 @@
+<%= turbo_frame_tag "dashboard", target: "_top", data: { controller: "refresh", refresh_interval_value: 5000 } do %>
 <h1 class="sqd-page-title">Dashboard</h1>
 
 <div class="sqd-stats">
@@ -62,4 +63,5 @@
       </div>
     </div>
   <% end %>
-</div>
+</div>
+<% end %>

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

@@ -1,6 +1,6 @@
 <h1 class="sqd-page-title" style="margin-bottom: 1.5rem;">Jobs</h1>
 
-<%= turbo_frame_tag "jobs-table", data: { turbo_action: "advance" } do %>
+<%= turbo_frame_tag "jobs-table", data: { turbo_action: "advance", controller: "refresh", refresh_interval_value: 10000 } do %>
 <% discardable = SolidQueueWeb::Job::DISCARDABLE.include?(@status) %>
 
 <div class="sqd-page-header">

app/views/solid_queue_web/processes/index.html.erb

@@ -1,3 +1,4 @@
+<%= turbo_frame_tag "processes", target: "_top", data: { controller: "refresh", refresh_interval_value: 10000 } do %>
 <h1 class="sqd-page-title">Processes</h1>
 
 <div class="sqd-card">
@@ -51,4 +52,5 @@
       </tbody>
     </table>
   <% end %>
-</div>
+</div>
+<% end %>

config/importmap.rb

@@ -1,2 +1,3 @@
 pin "solid_queue_web", to: "solid_queue_web/application.js"
 pin "solid_queue_web/search_controller", to: "solid_queue_web/search_controller.js"
+pin "solid_queue_web/refresh_controller", to: "solid_queue_web/refresh_controller.js"

spec/dummy/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path("../config/application", __dir__)
+require_relative "../config/boot"
+require "rails/commands"