Add ReloadableController and modify one page to use it

Author: Fryguy

app/controllers/application_controller/wait_for_task.rb

@@ -23,15 +23,29 @@ def wait_for_task
     end
   end
 
-  def browser_refresh_task(task_id, async_interval, should_flash: false)
+  def browser_refresh_task(task_id, async_interval, should_flash: false, response_type: nil)
+    response_type ||= :script
+
     async_interval = 1000 if async_interval.to_i < 1000 # if it is not an integer, assign to 1 second
     async_interval += 250 if async_interval.to_i < 5000 # Slowly move up to 5 second retries
-    render :update do |page|
-      page << javascript_prologue
-      ajax_call = remote_function(:url => {:action => 'wait_for_task', :task_id => task_id, :async_interval => async_interval})
-      page << "setTimeout(\"#{ajax_call}\", #{async_interval});"
-      page.replace("flash_msg_div", :partial => "layouts/flash_msg") if should_flash
-      page << "miqScrollTop();" if @flash_array.present?
+
+    case response_type
+    when :script
+      render :update do |page|
+        page << javascript_prologue
+        ajax_call = remote_function(:url => {:action => 'wait_for_task', :task_id => task_id, :async_interval => async_interval})
+        page << "setTimeout(\"#{ajax_call}\", #{async_interval});"
+        page.replace("flash_msg_div", :partial => "layouts/flash_msg") if should_flash
+        page << "miqScrollTop();" if @flash_array.present?
+      end
+    when :json
+      render :json => {
+        :async_interval => async_interval,
+        :task_id        => task_id,
+        :should_flash   => should_flash
+      }
+    else
+      raise "Invalid response type: #{response_type}"
     end
   end
   private :browser_refresh_task
@@ -65,7 +79,7 @@ def initiate_wait_for_task(options = {})
     task.context_data = (task.context_data || {}).merge(:async_params => async_params)
     task.save!
 
-    browser_refresh_task(task_id, async_interval, :should_flash => !!options[:flash])
+    browser_refresh_task(task_id, async_interval, :should_flash => !!options[:flash], :response_type => options[:response_type])
   end
   private :initiate_wait_for_task
 

app/controllers/report_controller/reports.rb

@@ -22,13 +22,13 @@ def miq_report_run
 
   def show_preview
     assert_privileges(session.fetch_path(:edit, :rpt_id) ? "miq_report_edit" : "miq_report_new")
-
     unless params[:task_id]                       # First time thru, kick off the report generate task
       @rpt = create_report_object                 # Build a report object from the latest edit fields
       initiate_wait_for_task(:task_id => @rpt.async_generate_table(:userid     => session[:userid],
                                                                    :session_id => request.session_options[:id],
                                                                    :limit      => 50,
-                                                                   :mode       => "adhoc"))
+                                                                   :mode       => "adhoc"),
+                             :response_type => :json)
       return
     end
     miq_task = MiqTask.find(params[:task_id])     # Not first time, read the task record
@@ -49,11 +49,7 @@ def show_preview
       end
     end
     miq_task.destroy
-    render :update do |page|
-      page << javascript_prologue
-      page.replace_html("form_preview", :partial => "form_preview")
-      page << "miqSparkle(false);"
-    end
+    render :partial => "form_preview", :layout => false
   end
 
   def miq_report_delete

app/javascript/controllers/index.js

@@ -3,3 +3,6 @@
 // ./bin/rails generate stimulus controllerName
 
 import { application } from "./application"
+
+import ReloadableController from "./reloadable_controller"
+application.register("reloadable", ReloadableController)

app/javascript/controllers/reloadable_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+import { API } from '../http_api'
+import { miqFetch, addSearchParams } from '../http_api/fetch'
+
+export default class extends Controller {
+  static targets = ["content"]
+  static values = {url: String}
+
+  async reload() {
+    try {
+      window.miqSparkleOn()
+
+      // request the new content and get back a task id
+      const data = await miqFetch({
+        url: this.urlValue,
+        method: 'POST',
+        cookieAndCsrf: true
+      })
+
+      const task_id = data.task_id
+      if (!task_id) {
+        throw new Error('No task_id returned from server')
+      }
+
+      // poll for the task status
+      await API.wait_for_task(task_id)
+
+      // fetch the task content
+      const resultsUrl = addSearchParams(this.urlValue, {task_id})
+      const taskContent = await miqFetch({
+        url: resultsUrl,
+        method: 'POST',
+        cookieAndCsrf: true,
+        skipJsonParsing: true
+      })
+
+      if (taskContent && this.hasContentTarget) {
+        if (typeof taskContent === 'string') {
+          this.contentTarget.innerHTML = taskContent
+        } else if (taskContent.text) {
+          this.contentTarget.innerHTML = await taskContent.text()
+        }
+      }
+
+      window.miqSparkleOff()
+    } catch (error) {
+      console.error('Error in reloadable#reload:', error)
+      window.miqSparkleOff()
+
+      if (window.add_flash) {
+        window.add_flash(__('Error reloading content'), 'error')
+      }
+    }
+  }
+}

app/javascript/http_api/api.js

@@ -1,7 +1,5 @@
 import { miqFetch } from './fetch';
 
-const { miqDeferred } = window;
-
 /*
  * API.get(url, options) - use API.get('/api'), returns a Promise
  * API.delete - (the same)
@@ -63,7 +61,7 @@ API.ws_init = () => API.get('/api/auth?requester_type=ws').then((response) => {
 });
 
 API.wait_for_task = (taskId) => {
-  const deferred = miqDeferred();
+  const deferred = window.miqDeferred();
 
   const retry = () => {
     API.get(`/api/tasks/${taskId}?attributes=task_results`)

app/javascript/http_api/fetch.js

@@ -141,3 +141,12 @@ function errorModal(err, skipErrors, backendName) {
     console.error('API: Server returned a non-200 response:', err.status, err.statusText, err);
   }
 }
+
+export function addSearchParams(path, params) {
+  const tempUrl = new URL(path, 'http://dummy')
+  for (const key of Object.keys(params)) {
+    const value = params[key]
+    tempUrl.searchParams.set(key, value)
+  }
+  return tempUrl.pathname + tempUrl.search
+}

app/views/report/_form_preview.html.haml

@@ -1,4 +1,4 @@
-#form_preview
+#form_preview{"data-controller" => "reloadable", "data-reloadable-url-value" => url_for(:action => "show_preview", :id => "#{@edit[:rpt_id] || 'new'}"), "data-reloadable-target" => "content"}
   - if @html
     - unless @edit[:chart_data].nil?
       %fieldset
@@ -15,10 +15,8 @@
       = _('Generate Report Preview')
       - t = _("Generate Report preview")
        
-      = link_to({:action => "show_preview",  :id => "#{@edit[:rpt_id] || 'new'}"},
-        :alt                  => t,
-        "data-miq_sparkle_on" => true,
-        :remote               => true,
-        "data-method"         => :post,
-        :title                => t) do
+      = link_to("#",
+        :alt          => t,
+        :title        => t,
+        "data-action" => "click->reloadable#reload") do
         %i.fa.fa-refresh