use actioncable to track indexing progress

Author: dnoneill

app/assets/javascripts/spotlight/spotlight.esm.js

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/assets/javascripts/spotlight/spotlight.esm.js.map

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

app/assets/javascripts/spotlight/spotlight.js

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# Channel for receiving indexing progress
+class ProgressChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from 'progress_channel'
+  end
+end

app/assets/javascripts/spotlight/spotlight.js.map

@@ -0,0 +1,30 @@
+<div data-behavior='progress-panel' data-exhibit-id="<%= exhibit.id %>">
+  <div class="card index-status border-info mb-3">
+    <h3 class="card-header bg-info text-white h4"><%= t("heading", scope: translation_field) %></h3>
+    <div class="card-body">
+      <p data-behavior='monitor-start'>
+        <span class="text-muted" data-behavior='date'></span> <%= t("begin_html", scope: translation_field) %>
+      </p>
+
+      <% if I18n.exists?("current_html", scope: translation_field) %>
+        <p data-behavior='monitor-current'>
+          <span class="text-muted" data-behavior='date'></span> <%= t("current_html", scope: translation_field) %>
+        </p>
+      <% end %>
+
+      <% if I18n.exists?("completed_html", scope: translation_field) %>
+        <p data-behavior='monitor-completed'>
+          <span class="text-muted" data-behavior='date'></span> <%= t("completed_html", scope: translation_field) %>
+        </p>
+      <% end %>
+
+      <p class="bg-warning" data-behavior='monitor-error' style='display:none;'>
+        <%= t("error", scope: translation_field) %>
+      </p>
+
+      <div class="progress">
+        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax=""></div>
+      </div>
+    </div>
+  </div>
+</div>

app/channels/application_cable/channel.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Renders progress bar html which is updated by progress_monitor.js
+  class ProgressBarComponent < ViewComponent::Base
+    attr_reader :exhibit, :translation_field
+
+    def initialize(exhibit:, translation_field:)
+      @exhibit = exhibit
+      @translation_field = translation_field
+      super
+    end
+  end
+end

app/channels/application_cable/connection.rb

@@ -1,20 +1,21 @@
+import consumer from "../channels/consumer"
+
 export default class {
   connect() {
     var monitorElements = $('[data-behavior="progress-panel"]');
-    var defaultRefreshRate = 3000;
     var panelContainer;
     var pollers = [];
 
     $(monitorElements).each(function() {
       panelContainer = $(this);
       panelContainer.hide();
-      var monitorUrl = panelContainer.data('monitorUrl');
-      var refreshRate = panelContainer.data('refreshRate') || defaultRefreshRate;
-      pollers.push(
-        setInterval(function() {
-          checkMonitorUrl(monitorUrl);
-        }, refreshRate)
-      );
+
+      consumer.subscriptions.create({ channel: "ProgressChannel"}, {
+        received(data) {
+          if (data.exhibit_id != panelContainer.data('exhibit-id')) return;
+          updateMonitorPanel(data);
+        }
+      });
     });
 
     // Clear the intervals on turbolink:click event (e.g. when the user navigates away from the page)
@@ -27,21 +28,6 @@ export default class {
       }
     });
 
-    function checkMonitorUrl(url) {
-      $.ajax(url).done(success).fail(fail);
-    }
-
-    function success(data) {
-      if (data.recently_in_progress) {
-        updateMonitorPanel(data);
-        monitorPanel().show();
-      } else {
-        monitorPanel().hide();
-      }
-    }
-
-    function fail() { monitorPanel().hide(); }
-
     function updateMonitorPanel(data) {
       panelStartDate().text(data.started_at);
       panelCurrentDate().text(data.updated_at);

app/channels/progress_channel.rb

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

app/components/spotlight/progress_bar_component.html.erb

@@ -0,0 +1 @@
+// Import all the channels to be used by Action Cable

app/components/spotlight/progress_bar_component.rb

@@ -13,15 +13,25 @@ def perform(exhibit, bulk_update)
       errors = 0
       header_converter = ->(header) { header } # Use raw header for columns (since they are configured)
       csv_path = bulk_update.file.current_path
+      started_at = Time.zone.now
+
       File.open(csv_path) do |f|
         progress&.total = f.each_line.count(&:present?) - 1 # ignore the header
 
         ::CSV.table(f, header_converters: header_converter).each do |row|
           process_row(exhibit, row)
           progress&.increment
+          ActionCable.server.broadcast 'progress_channel',
+                                       { exhibit_id: exhibit.id, finished: progress.progress == progress.total,
+                                         completed: progress.progress, total: progress.total, errors: errors,
+                                         updated_at: Time.zone.now, started_at: started_at }
         rescue StandardError => e
           job_tracker.append_log_entry(type: :error, exhibit: exhibit, message: e.to_s)
           errors += 1
+          ActionCable.server.broadcast 'progress_channel',
+                                       { exhibit_id: exhibit.id, finished: progress.progress == progress.total,
+                                         completed: progress.progress, total: progress.total, errors: errors,
+                                         updated_at: Time.zone.now, started_at: started_at }
           mark_job_as_failed!
         end
 

app/javascript/spotlight/admin/progress_monitor.js

@@ -38,12 +38,22 @@ def perform(exhibit_or_resources, start: nil, finish: nil, **)
         errors += 1
       end
 
+      started_at = Time.zone.now
+
       resource_list(exhibit_or_resources, start: start, finish: finish).each do |resource|
         resource.reindex(touch: false, commit: false, job_tracker: job_tracker, additional_data: job_data, on_error: error_handler) do |*|
           progress&.increment
+          ActionCable.server.broadcast 'progress_channel',
+                                       { exhibit_id: resource.exhibit_id, finished: progress.progress == progress.total,
+                                         completed: progress.progress, total: progress.total, errors: errors,
+                                         updated_at: Time.zone.now, started_at: started_at, other: resource }
         end
       rescue StandardError => e
         error_handler.call(Struct.new(:source).new(resource), e, nil)
+        ActionCable.server.broadcast 'progress_channel',
+                                     { exhibit_id: resource.exhibit_id, finished: progress.progress == progress.total,
+                                       completed: progress.progress, total: progress.total, errors: errors,
+                                       updated_at: Time.zone.now, started_at: started_at, other: resource }
       end
 
       job_tracker.append_log_entry(

app/javascript/spotlight/channels/consumer.js

@@ -4,9 +4,7 @@
 
 <%= curation_page_title t(:".header") %>
 
-<div data-behavior='progress-panel' data-monitor-url="<%= monitor_exhibit_bulk_updates_path(current_exhibit) %>">
-  <%= render 'progress_panel' %>
-</div>
+<%= render Spotlight::ProgressBarComponent.new(exhibit: current_exhibit, translation_field: 'spotlight.bulk_updates.progress_panel') %>
 
 <div role="tabpanel">
   <ul class="nav nav-tabs" role="tablist">

app/javascript/spotlight/channels/index.js

@@ -1,7 +1,5 @@
 <% if can? :manage, Spotlight::Resource.new(exhibit: current_exhibit) %>
-  <div data-behavior='progress-panel' data-monitor-url="<%= monitor_exhibit_resources_path(current_exhibit) %>">
-    <%= render 'reindex_progress_panel' %>
-  </div>
+  <%= render Spotlight::ProgressBarComponent.new(exhibit: current_exhibit, translation_field: 'spotlight.catalog.reindex_progress_panel') %>
   <div class="add-items-nav clearfix">
     <div class="float-right float-end">
       <%= link_to t('.reindex'), reindex_all_exhibit_resources_path(current_exhibit), 

app/jobs/spotlight/process_bulk_updates_csv_job.rb

@@ -0,0 +1,7 @@
+development:
+  adapter: async
+
+production:
+  adapter: redis
+  url: redis://localhost:6379/1
+  channel_prefix: myapp_production