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 <dominic.gargu...@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 </th> + <th>Directory </th> <th title="The age of the import.">Age </th> <th title="The current state of the bulk import">State </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 Age</th> </tr>