Refactors inline javascript in active_jobs (#3423)

* WIP - Refactors inline javascript in active_jobs

* Fixes two bugs

* Removes redundant plugin require

* Fixes cluster/filter search functionality

* Adjusts git string quote marks

* Makes active_jobs JS code one file

* Simplifies filter & cluster _id setting

Author: HazelGrant

apps/dashboard/app/javascript/active_jobs.js

@@ -1,16 +1,13 @@
 'use strict';
 
 import oboe from 'oboe';
-import dataTableProcessing from 'datatables.net-plugins/api/processing()';
 import { cssBadgeForState, capitalizeFirstLetter } from './utils.js'
 
 window.fetch_table_data = fetch_table_data;
 window.create_datatable = create_datatable;
 window.set_cluster_id = set_cluster_id;
 window.set_filter_id = set_filter_id;
 
-dataTableProcessing(window, jQuery);
-
 var entityMap = {
   '&': '&',
   '<': '&lt;',
@@ -336,3 +333,53 @@ function set_cluster_id(id) {
 function reload_page() {
     window.location = '?' + get_request_params();
 }
+
+const activeJobsConfig = $('#active_jobs_config')[0].dataset;
+
+var filter_id = activeJobsConfig.filterId;
+var cluster_id = activeJobsConfig.clusterId;
+
+if (filter_id == "null") {
+  filter_id = localStorage.getItem('jobfilter') || activeJobsConfig.defaultFilterId;
+}
+
+if (cluster_id == "null") {
+  cluster_id = localStorage.getItem('jobcluster') || 'all';
+}
+
+var performance_tracking_enabled = false;
+
+function report_performance(){
+  var marks = performance.getEntriesByType('mark');
+  marks.forEach(function(entry){
+    console.log(entry.startTime + "," + entry.name);
+  });
+
+  // hack but only one mark for document ready, and rest are draw times
+  if(marks.length > 1){
+    console.log("version,documentReady,firstDraw,lastDraw");
+    console.log(`${activeJobsConfig.oodVersion},${marks[0].startTime},${marks[1].startTime},${marks.slice(-1)[0].startTime}`);
+  }
+}
+
+if (activeJobsConfig.consoleLogPerformanceReport) {
+  performance_tracking_enabled = true;
+  performance.mark('document ready - build table and make ajax request for jobs');
+}
+
+var table = create_datatable({
+  drawCallback: function(settings){
+    // do a performance mark every time we draw the table (which happens when new records are downloaded)
+    if(performance_tracking_enabled && settings.aoData.length > 0){
+      performance.mark('draw records - ' + settings.aoData.length);
+    }
+  }, base_uri: activeJobsConfig.baseUri});
+
+fetch_table_data(table, {
+  doneCallback: function(){
+    // generate report after done fetching records
+    if(performance_tracking_enabled){
+      setTimeout(report_performance, 2000);
+    }
+  },
+  base_uri: activeJobsConfig.baseUri});

apps/dashboard/app/javascript/application.js

@@ -19,6 +19,7 @@ import 'jquery-ujs';
 import 'datatables.net';
 import 'datatables.net-bs4/js/dataTables.bootstrap4';
 import 'datatables.net-select/js/dataTables.select';
+import 'datatables.net-plugins/api/processing().mjs';
 
 import Rails from '@rails/ujs';
 

apps/dashboard/app/views/active_jobs/index.html.erb

@@ -1,5 +1,3 @@
-<%=  javascript_include_tag 'active_jobs', nonce: true %>
-
 <div class="row">
   <div class="col-md-12">
     <div class="float-right">
@@ -59,46 +57,15 @@
   </div>
 </div>
 
-<script>
-var filter_id = <%= (@jobfilter ? "'#{@jobfilter}'" : "localStorage.getItem('jobfilter') || '#{default_filter_id}'").html_safe %>;
-var cluster_id = <%= (@jobcluster ? "'#{@jobcluster}'" : "localStorage.getItem('jobcluster') || 'all'").html_safe %>;
-var performance_tracking_enabled = false;
-
-<% if Configuration.console_log_performance_report? %>
-function report_performance(){
-  var marks = performance.getEntriesByType('mark');
-  marks.forEach(function(entry){
-    console.log(entry.startTime + "," + entry.name);
-  });
-
-  // hack but only one mark for document ready, and rest are draw times
-  if(marks.length > 1){
-    console.log("version,documentReady,firstDraw,lastDraw");
-    console.log(`<%= `git describe --always --tags`.strip() %>,${marks[0].startTime},${marks[1].startTime},${marks.slice(-1)[0].startTime}`);
-  }
-}
-
-performance_tracking_enabled = true;
-performance.mark('document ready - build table and make ajax request for jobs');
-<% end %>
-
-var table = create_datatable({
-  drawCallback: function(settings){
-    // do a performance mark every time we draw the table (which happens when new records are downloaded)
-    if(performance_tracking_enabled && settings.aoData.length > 0){
-      performance.mark('draw records - ' + settings.aoData.length);
-    }
-  },
-  base_uri: '<%= controller.relative_url_root %>'
-});
+<div hidden=true
+  id="active_jobs_config"
+  data-filter-id=<%= @jobfilter ? "#{@jobfilter}" : "null" %>
+  data-default-filter-id=<%= default_filter_id %> 
+  data-cluster-id=<%= @jobcluster ? "#{@jobcluster}" : "null" %> 
+  data-console-log-performance-report=<%= Configuration.console_log_performance_report? %>
+  data-base-uri=<%= controller.relative_url_root %>
+  data-ood-version=<%= Configuration.ood_version %>
+>
+</div>
 
-fetch_table_data(table, {
-  doneCallback: function(){
-    // generate report after done fetching records
-    if(performance_tracking_enabled){
-      setTimeout(report_performance, 2000);
-    }
-  },
-  base_uri: '<%= controller.relative_url_root %>'
-});
-</script>
+<%=  javascript_include_tag 'active_jobs', nonce: true %>