[accumulo] branch main updated: Convert tables in bulkImport.js to DataTables (#2784)

[do...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

domgarguilo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/accumulo.git


The following commit(s) were added to refs/heads/main by this push:
     new 44cefe8d50 Convert tables in bulkImport.js to DataTables (#2784)
44cefe8d50 is described below

commit 44cefe8d50d8497ec2b9bed61c543e7a9d6a64b8
Author: Dom G <do...@gmail.com>
AuthorDate: Mon Jun 27 13:15:05 2022 -0400

    Convert tables in bulkImport.js to DataTables (#2784)
    
    * Convert tables to DataTables
---
 .../accumulo/monitor/resources/js/bulkImport.js    | 143 +++++++++++----------
 .../accumulo/monitor/templates/bulkImport.ftl      |   6 +-
 2 files changed, 80 insertions(+), 69 deletions(-)

diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/bulkImport.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/bulkImport.js
index 4cf90a445a..dbc9350c35 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/bulkImport.js
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/bulkImport.js
@@ -16,86 +16,97 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/* JSLint global definitions */
-/*global
-    $, document, sessionStorage, clearTableBody, EMPTY_ROW_THREE_CELLS, EMPTY_CELL, getBulkImports
-*/
 "use strict";
 
+var bulkListTable, bulkPerServerTable;
+
 /**
- * Generates the manager bulk import status table
+ * Fetches new data and updates DataTables with it
  */
-function refreshBulkImportTable() {
-  $("#bulkListTable tbody").html(EMPTY_ROW_THREE_CELLS);
-
-  // Get the bulk import data from the session
-  var data = sessionStorage.bulkImports === undefined ? [] : JSON.parse(sessionStorage.bulkImports);
-
-  // If the data is empty, clear table, otherwise populate
-  if (data.length === 0 || data.bulkImport.length === 0) {
-    return;
-  }
-  console.log("Populate bulkListTable with " + sessionStorage.bulkImports);
-  var tableBodyHtml = "";
-  $.each(data.bulkImport, function (key, val) {
-    console.log("Append row " + key + " " + JSON.stringify(val) + " to bulkListTable");
-    tableBodyHtml += "<tr><td class='firstcell'>" + val.filename + "</td>";
-    tableBodyHtml += "<td class='center'>" + new Date(val.age) + "</td>";
-    tableBodyHtml += "<td class='center'>" + val.state + "</td></tr>";
-  });
+function refreshBulkImport() {
+  ajaxReloadTable(bulkListTable);
+  ajaxReloadTable(bulkPerServerTable);
+}
 
-  $("#bulkListTable tbody").html(tableBodyHtml);
+/**
+ * Used to redraw the page
+ */
+function refresh() {
+  refreshBulkImport();
 }
 
 /**
- * Generates the bulkPerServerTable table
+ * Initializes the bulk import DataTables
  */
-function refreshServerBulkTable() {
-  $("#bulkPerServerTable tbody").html(EMPTY_ROW_THREE_CELLS);
+$(document).ready(function () {
 
-  // get the bulkImport data from sessionStorage
-  var data = sessionStorage.bulkImports === undefined ? [] : JSON.parse(sessionStorage.bulkImports);
+  const url = '/rest/bulkImports';
+  console.debug('REST url used to fetch data for the DataTables in bulkImport.js: ' + url);
 
-  // if data is empty, log an error because that means no tablet servers were found
-  if (data.length === 0 || data.tabletServerBulkImport.length === 0) {
-    console.error("No tablet servers.");
-    return;
-  }
-  var tableBodyHtml = "";
-  $.each(data.tabletServerBulkImport, function (key, val) {
-    console.log("Append " + key + " " + JSON.stringify(val) + " to bulkPerServerTable");
-    var ageCell = EMPTY_CELL;
-    if (val.oldestAge > 0) {
-      ageCell = "<td>" + new Date(val.oldestAge) + "</td>";
-    }
-    tableBodyHtml += "<tr><td><a href='/tservers?s=" + val.server + "'>" + val.server + "</a></td>";
-    tableBodyHtml += "<td>" + val.importSize + "</td>";
-    tableBodyHtml += ageCell + "</tr>";
+  // Generates the manager bulk import status table
+  bulkListTable = $('#bulkListTable').DataTable({
+    "ajax": {
+      "url": url,
+      "dataSrc": "bulkImport"
+    },
+    "stateSave": true,
+    "columns": [{
+        "data": "filename",
+        "width": "40%"
+      },
+      {
+        "data": "age",
+        "width": "45%",
+        "render": function (data, type) {
+          if (type === 'display' && Number(data) > 0) {
+            data = new Date(Number(data));
+          } else {
+            data = "-";
+          }
+          return data;
+        }
+      },
+      {
+        "data": "state",
+        "width": "15%"
+      }
+    ]
   });
 
-  $("#bulkPerServerTable tbody").html(tableBodyHtml);
-}
-
-/**
- * Makes the REST calls, generates the tables with the new information
- */
-function refreshBulkImport() {
-  getBulkImports().then(function () {
-    refreshBulkImportTable();
-    refreshServerBulkTable();
+  // Generates the bulkPerServerTable DataTable
+  bulkPerServerTable = $('#bulkPerServerTable').DataTable({
+    "ajax": {
+      "url": url,
+      "dataSrc": "tabletServerBulkImport"
+    },
+    "stateSave": true,
+    "columns": [{
+        "data": "server",
+        "type": "html",
+        "render": function (data, type) {
+          if (type === 'display') {
+            data = `<a href="/tservers?s=${data}">${data}</a>`;
+          }
+          return data;
+        }
+      },
+      {
+        "data": "importSize"
+      },
+      {
+        "data": "oldestAge",
+        "render": function (data, type) {
+          if (type === 'display' && Number(data) > 0) {
+            data = new Date(Number(data));
+          } else {
+            data = "-";
+          }
+          return data;
+        }
+      }
+    ]
   });
-}
 
-/**
- * Creates bulk import initial table
- */
-$(document).ready(function () {
   refreshBulkImport();
-});
 
-/**
- * Used to redraw the page
- */
-function refresh() {
-  refreshBulkImport();
-}
+});
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/bulkImport.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/bulkImport.ftl
index 2020c99815..a438541680 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/bulkImport.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/bulkImport.ftl
@@ -29,7 +29,7 @@
             <caption><span class="table-caption">Bulk Imports</span><br/></caption>
             <thead>
               <tr>
-                <th class="firstcell">Directory&nbsp;</th>
+                <th>Directory&nbsp;</th>
                 <th title="The age of the import.">Age&nbsp;</th>
                 <th title="The current state of the bulk import">State&nbsp;</th>
               </tr>
@@ -38,14 +38,14 @@
           </table>
         </div>
       </div>
-
+      </br></br>
       <div class="row">
         <div class="col-xs-12">
           <table id="bulkPerServerTable" class="table table-bordered table-striped table-condensed">
             <caption><span class="table-caption">Per TabletServer</span><br/></caption>
             <thead>
               <tr>
-                <th class="firstcell">Server</th>
+                <th>Server</th>
                 <th title="Number of imports presently running">#</th>
                 <th title="The age of the oldest import running on this server.">Oldest&nbsp;Age</th>
               </tr>