Enable turbo (#3509)

enable turbo-rails and refactor BatchConnect::Sessions#index to use turbo_stream partials to send updates instead of the javascript business we used to use.

apps/dashboard/Gemfile

@@ -59,6 +59,8 @@ gem 'rss', '~> 0.2'
 
 gem 'jsbundling-rails', '~> 1.0'
 gem 'cssbundling-rails', '~> 1.1'
+gem 'turbo-rails', '~> 2.0'
+
 # should upgrade to propshaft - only have an issue with fontawesome icons
 gem 'sprockets-rails', '>= 2.0.0'
 
@@ -74,3 +76,4 @@ gem "sinatra", require: false
 gem "sinatra-contrib", require: false
 gem "erubi", require: false
 gem "dalli", require: false
+

apps/dashboard/Gemfile.lock

@@ -269,6 +269,10 @@ GEM
     tilt (2.3.0)
     timecop (0.9.8)
     timeout (0.4.1)
+    turbo-rails (2.0.5)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     webrick (1.8.1)
@@ -318,6 +322,7 @@ DEPENDENCIES
   sinatra-contrib
   sprockets-rails (>= 2.0.0)
   timecop (~> 0.9)
+  turbo-rails (~> 2.0)
   webrick
   zip_kit (~> 6.2)
 

apps/dashboard/app/javascript/batch_connect_sessions.js

@@ -1,109 +1,19 @@
 'use strict';
 
-const pollers = [];
-
-class Timer {
-  constructor(callback, delay){
-    this.delay = delay;
-    this.remaining = delay;
-    this.active = true;
-    this.callback = callback;
-
-    this.resume();
-  }
-
-  resume() {
-    if(!this.active) { return; }
-
-    this.start = new Date();
-    this.clearTO();
-    this.timerId = setTimeout(this.callback, this.remaining);
-  }
-
-  restart() {
-    if(!this.active) { return; }
-
-    this.remaining = this.delay;
-    resume();
-  }
-
-  pause() {
-    if(!this.active) { return; }
-
-    this.clearTO();
-    this.remaining -= new Date() - this.start;
-  }
-
-  stop(){
-    if(!this.active) { return; }
-    this.clearTO();
-    this.active = false;
-  }
-
-  clearTO(){
-    if(this.timerId !== undefined) {
-      clearTimeout(this.timerId);
-    }
-  }
-
-}
-
-class Poller {
-  constructor(url, delay) {
-    this.url = url;
-    this.delay = delay;
-    this.poll();
-  }
-
-  poll(){
-    this.timer = new Timer(this.request.bind(this), this.delay);
-  }
-
-  pause() {
-    this.timer.pause();
-  }
-
-  resume() {
-    this.timer.resume();
-  }
-
-  request(){
-    const that = this;
-    $.getScript(this.url)
-        .done((_script, _textStatus, _jqxhr) => {
-          return;
-        }).fail((_jqxhr, textStatus, errorThrown) => {
-      if(textStatus) { console.log(`Failed to get session data. Server returned '${textStatus}'`); }
-      if(errorThrown) {
-        console.log("Failed to get session data because of error.");
-        console.log(errorThrown);
-      }
-      return;
-    }).always(() => {
-      that.poll();
-      return;
-    });
-  }
-}
-
-function makePollers(){
-  const obj = $('#batch_connect_sessions');
-  if(!obj) return;
-
-  const url = obj.data('url');
-  const delay = obj.data('delay');
-  if(url && delay) { pollers.push(new Poller(url, delay)); }
-
-  $(document)
-      .on('show.bs.modal', () => {
-        pollers.forEach((poller) => {
-          poller.pause();
-        });
-      }).on('hidden.bs.modal', () => {
-    pollers.forEach((poller) => {
-      poller.resume();
+import { bcIndexUrl, bcPollDelay } from './config';
+import { replaceHTML } from './turbo_shim';
+
+function poll() {
+  url = bcIndexUrl();
+  fetch(url, { headers: { Accept: "text/vnd.turbo-stream.html" } })
+    .then(response => response.ok ? Promise.resolve(response) : Promise.reject(response.text()))
+    .then((r) => r.text())
+    .then((html) => replaceHTML("batch_connect_sessions", html))
+    .then(setTimeout(poll, bcPollDelay()))
+    .catch((err) => {
+      console.log('Cannot not retrive batch connect sessions due to error:');
+      console.log(err);
     });
-  });
 }
 
 function settingKey(id) {
@@ -142,7 +52,7 @@ jQuery(function (){
     $('#full-page-spinner').removeClass('d-none');
   }
 
-  makePollers();
+  poll();
 
   $('button.relaunch').each((index, element) => {
     $(element).on('click', showSpinner);

apps/dashboard/app/javascript/config.js

@@ -62,3 +62,13 @@ export function analyticsPath(type){
   const basePath = cfgData['baseAnalyticsPath']
   return `${basePath}/${type}`;
 }
+
+export function bcPollDelay() {
+  const cfgData = configData();
+  return Number(cfgData['bcPollDelay']);
+}
+
+export function bcIndexUrl() {
+  const cfgData = configData();
+  return cfgData['bcIndexUrl'];
+}

apps/dashboard/app/javascript/turbo_shim.js

@@ -0,0 +1,21 @@
+
+/*
+  While we want Turbo enabled at some point,
+  it doesn't really work well yet. So, we'll provide
+  this shim until we enable it.
+*/
+
+export function replaceHTML(id, html) {
+  const ele = document.getElementById(id);
+
+  if(ele == null){
+    return;
+  } else {
+    var tmp = document.createElement('div');
+    tmp.innerHTML = html;
+    const newHTML = tmp.querySelector('template').innerHTML;
+    tmp.remove();
+
+    ele.innerHTML = newHTML;
+  }
+}

apps/dashboard/app/views/batch_connect/sessions/_panels.html.erb

@@ -0,0 +1 @@
+index.turbo_stream.erb

apps/dashboard/app/views/batch_connect/sessions/index.html.erb

@@ -35,14 +35,8 @@ locals: {
       %>
     </div>
     <div class="col-md-9">
-      <div id="batch_connect_sessions" class="batch-connect sessions" data-toggle="poll" data-url="<%= batch_connect_sessions_path(format: :js) %>" data-delay="<%= Configuration.bc_sessions_poll_delay %>">
-        <% if @sessions.empty? %>
-          <div class="ood-appkit markdown">
-            <p><%= t('dashboard.batch_connect_no_sessions') %></p>
-          </div>
-        <% else %>
-          <%= render partial: "panel", collection: @sessions, as: :session %>
-        <% end %>
+      <div id="batch_connect_sessions">
+        <%= render(partial: 'panels', locals: { use_template: false }) %>
       </div>
     </div>
   <%- else -%>

apps/dashboard/app/views/batch_connect/sessions/index.turbo_stream.erb

@@ -0,0 +1,19 @@
+
+<turbo-stream action="replace" target="batch_connect_sessions" id="sessions_frame">
+  <div class="d-flex justify-content-center">
+    <div class="spinner-border" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
+  <template>
+    <div class="batch-connect sessions">
+      <% if @sessions.empty? %>
+        <div class="ood-appkit markdown">
+          <p><%= t('dashboard.batch_connect_no_sessions') %></p>
+        </div>
+      <% else %>
+        <%= render partial: "panel", collection: @sessions, as: :session, formats: [:html] %>
+      <% end %>
+    </div>
+    </template>
+</turbo-stream>

apps/dashboard/app/views/layouts/_config.html.erb

@@ -7,4 +7,6 @@
   data-bc-dynamic-js="<%= Configuration.bc_dynamic_js? %>"
   data-xdmod-url="<%= Configuration.xdmod_host %>"
   data-base-analytics-path="<%= analytics_path('delme').gsub(/[\/]*delme[\/]*/,'') %>"
+  data-bc-poll-delay="<%= Configuration.bc_sessions_poll_delay %>"
+  data-bc-index-url="<%= batch_connect_sessions_path %>"
 ></div>

apps/dashboard/test/system/remote_files_test.rb

@@ -82,13 +82,11 @@ class RemoteFilesTest < ApplicationSystemTestCase
         find('#clipboard-copy-to-dir').click
 
         # files are copying but it takes a little while
-        find('tbody a', exact_text: 'app', wait: MAX_WAIT)
         find('tbody a', exact_text: 'config', wait: MAX_WAIT)
         find('tbody a', exact_text: 'manifest.yml', wait: MAX_WAIT)
 
         # with copying done, let's assert on the UI and the file system
         assert_selector 'span', text: '100% copy files', count: 1
-        assert_equal '', `diff -rq #{File.join(dir, 'app')} #{Rails.root.join('app')}`.strip, 'failed to recursively copy app dir'
         assert_equal '', `diff -rq #{File.join(dir, 'config')} #{Rails.root.join('config')}`.strip, 'failed to recursively copy config dir'
         assert_equal '', `diff -q #{File.join(dir, 'manifest.yml')} #{Rails.root.join('manifest.yml')}`.strip, 'failed to copy manifest.yml'
 

lib/tasks/build.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative 'rake_helper'
+require 'securerandom'
 
 namespace :build do
   include RakeHelper
@@ -36,7 +37,10 @@
               end
     task a.name.to_sym => depends do |_t|
       setup_path = a.path.join('bin', 'setup')
-      sh "PASSENGER_APP_ENV=#{PASSENGER_APP_ENV} #{setup_path}" if setup_path.exist? && setup_path.executable?
+      # SECRET_KEY_BASE is actually generated & used elsewhere. However, we have 
+      # to supply it now at build time for turbo.
+      env = "PASSENGER_APP_ENV=#{PASSENGER_APP_ENV} SECRET_KEY_BASE=#{SecureRandom.uuid}"
+      sh "#{env} #{setup_path}" if setup_path.exist? && setup_path.executable?
     end
   end