You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@accumulo.apache.org by do...@apache.org on 2022/06/27 13:35:25 UTC
[accumulo] branch main updated: Convert the tables in table.js to DataTables (#2765)
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 7d0930f22f Convert the tables in table.js to DataTables (#2765)
7d0930f22f is described below
commit 7d0930f22fe3c3c94c4c758feb5d49a0deb423c1
Author: Dom G <do...@gmail.com>
AuthorDate: Mon Jun 27 09:35:19 2022 -0400
Convert the tables in table.js to DataTables (#2765)
---
.../apache/accumulo/monitor/resources/js/table.js | 176 ++++++++++++---------
.../apache/accumulo/monitor/templates/table.ftl | 35 ++--
2 files changed, 121 insertions(+), 90 deletions(-)
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js
index 4149753060..d7b91e7293 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js
@@ -18,14 +18,13 @@
*/
"use strict";
-var tableID;
+var tableServersTable;
+
/**
* Makes the REST calls, generates the tables with the new information
*/
function refreshTable() {
- getTableServers(tableID).then(function () {
- refreshTableServersTable();
- });
+ ajaxReloadTable(tableServersTable);
}
/**
@@ -35,76 +34,109 @@ function refresh() {
refreshTable();
}
+function getQueuedAndRunning(data) {
+ return `${data.running}(${data.queued})`;
+}
+
/**
- * Generates the table servers table
+ * Initialize the table
+ *
+ * @param {String} tableID the accumulo table ID
*/
-function refreshTableServersTable() {
- clearTableBody('participatingTServers');
-
- var data = sessionStorage.tableServers === undefined ? [] : JSON.parse(sessionStorage.tableServers);
-
- if (data.length === 0 || data.servers.length === 0) {
- var items = [];
- items.push(createEmptyRow(13, 'Empty'));
- $('<tr/>', {
- html: items.join('')
- }).appendTo('#participatingTServers tbody');
- } else {
-
- $.each(data.servers, function (key, val) {
- var items = [];
- items.push(createFirstCell(val.hostname, '<a href="/tservers?s=' +
- val.id + '">' + val.hostname + '</a>'));
-
- items.push(createRightCell(val.tablets,
- bigNumberForQuantity(val.tablets)));
-
- items.push(createRightCell(val.lastContact,
- timeDuration(val.lastContact)));
-
- items.push(createRightCell(val.entries,
- bigNumberForQuantity(val.entries)));
-
- items.push(createRightCell(val.ingest,
- bigNumberForQuantity(Math.floor(val.ingest))));
-
- items.push(createRightCell(val.query,
- bigNumberForQuantity(Math.floor(val.query))));
-
- items.push(createRightCell(val.holdtime,
- timeDuration(val.holdtime)));
-
- items.push(createRightCell((val.compactions.scans.running +
- val.compactions.scans.queued),
- bigNumberForQuantity(val.compactions.scans.running) +
- ' (' + bigNumberForQuantity(val.compactions.scans.queued) +
- ')'));
-
- items.push(createRightCell((val.compactions.minor.running +
- val.compactions.minor.queued),
- bigNumberForQuantity(val.compactions.minor.running) +
- ' (' + bigNumberForQuantity(val.compactions.minor.queued) +
- ')'));
-
- items.push(createRightCell((val.compactions.major.running +
- val.compactions.major.queued),
- bigNumberForQuantity(val.compactions.major.running) +
- ' (' + bigNumberForQuantity(val.compactions.major.queued) +
- ')'));
-
- items.push(createRightCell(val.indexCacheHitRate * 100,
- Math.round(val.indexCacheHitRate * 100) + '%'));
-
- items.push(createRightCell(val.dataCacheHitRate * 100,
- Math.round(val.dataCacheHitRate * 100) + '%'));
-
- items.push(createRightCell(val.osload,
- bigNumberForQuantity(val.osload)));
+function initTableServerTable(tableID) {
+
+ const url = '/rest/tables/' + tableID;
+ console.debug('REST url used to fetch data for table.js DataTable: ' + url);
+
+ tableServersTable = $('#participatingTServers').DataTable({
+ "ajax": {
+ "url": url,
+ "dataSrc": "servers"
+ },
+ "stateSave": true,
+ "columnDefs": [{
+ "targets": "big-num",
+ "render": function (data, type) {
+ if (type === 'display') {
+ data = bigNumberForQuantity(data);
+ }
+ return data;
+ }
+ },
+ {
+ "targets": "duration",
+ "render": function (data, type) {
+ if (type === 'display') {
+ data = timeDuration(data);
+ }
+ return data;
+ }
+ },
+ {
+ "targets": "percent",
+ "render": function (data, type) {
+ if (type === 'display') {
+ data = Math.round(data * 100) + '%';
+ }
+ return data;
+ }
+ }
+ ],
+ "columns": [{
+ "data": "hostname",
+ "type": "html",
+ "render": function (data, type, row) {
+ if (type === 'display') {
+ data = `<a href="/tservers?s=${row.id}">${data}</a>`;
+ }
+ return data;
+ }
+ },
+ {
+ "data": "tablets"
+ },
+ {
+ "data": "lastContact"
+ },
+ {
+ "data": "entries"
+ },
+ {
+ "data": "ingest"
+ },
+ {
+ "data": "query"
+ },
+ {
+ "data": "holdtime"
+ },
+ {
+ "data": function (row) {
+ return getQueuedAndRunning(row.compactions.scans);
+ }
+ },
+ {
+ "data": function (row) {
+ return getQueuedAndRunning(row.compactions.minor);
+ }
+ },
+ {
+ "data": function (row) {
+ return getQueuedAndRunning(row.compactions.major);
+ }
+ },
+ {
+ "data": "indexCacheHitRate"
+ },
+ {
+ "data": "dataCacheHitRate"
+ },
+ {
+ "data": "osload"
+ }
+ ]
+ });
- $('<tr/>', {
- html: items.join('')
- }).appendTo('#participatingTServers tbody');
+ refreshTable();
- });
- }
}
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table.ftl
index deb5c66c67..83c335bb37 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table.ftl
@@ -20,12 +20,11 @@
-->
<script>
/**
- * Creates participating Tservers initial table, passes the table and tableID from the template
+ * Creates participating Tservers initial table, passes the tableID from the template
*/
- $(document).ready(function() {
- tableID = '${tableID}';
- refreshTable();
- });
+ $(document).ready(function () {
+ initTableServerTable('${tableID}');
+ });
</script>
<div class="row">
<div class="col-xs-12">
@@ -38,19 +37,19 @@
<caption><span class="table-caption">${table}</span></caption>
<thead>
<tr>
- <th class="firstcell">Server </th>
- <th>Hosted Tablets </th>
- <th>Last Contact </th>
- <th title="Key/value pairs over each instance, table or tablet.">Entries </th>
- <th title="The number of Key/Value pairs inserted. (Note that deletes are considered inserted)">Ingest </th>
- <th title="The number of key/value pairs returned to clients. (Not the number of scans)">Query </th>
- <th title="The amount of time live ingest operations (mutations, batch writes) have been waiting for the tserver to free up memory.">Hold Time </th>
- <th title="Information about the scans threads. Shows how many threads are running and how much work is queued for the threads.">Running<br/>Scans </th>
- <th title="The action of flushing memory to disk. Multiple tablets can be compacted simultaneously, but sometimes they must wait for resources to be available. The number of tablets waiting for compaction are in parentheses.">Minor<br/>Compactions </th>
- <th title="The action of gathering up many small files and rewriting them as one larger file.">Major<br/>Compactions </th>
- <th title="The recent index cache hit rate.">Index Cache<br/>Hit Rate </th>
- <th title="The recent data cache hit rate.">Data Cache<br/>Hit Rate </th>
- <th title="The Unix one minute load average. The average number of processes in the run queue over a one minute interval.">OS Load </th>
+ <th>Server </th>
+ <th class="big-num">Hosted<br/>Tablets </th>
+ <th class="duration">Last Contact </th>
+ <th class="big-num" title="Key/value pairs over each instance, table or tablet.">Entries </th>
+ <th class="big-num" title="The number of Key/Value pairs inserted. (Note that deletes are considered inserted)">Ingest </th>
+ <th class="big-num" title="The number of key/value pairs returned to clients. (Not the number of scans)">Query </th>
+ <th class="duration" title="The amount of time live ingest operations (mutations, batch writes) have been waiting for the tserver to free up memory.">Hold Time </th>
+ <th title="Information about the scans threads. Shows how many threads are running and, in parentheses, how much work is queued for the threads.">Scans </th>
+ <th title="The action of flushing memory to disk. Multiple tablets can be compacted simultaneously, but sometimes they must wait for resources to be available. The number of tablets waiting for compaction is in parentheses.">Minor Compactions </th>
+ <th title="The action of gathering up many small files and rewriting them as one larger file. The number of queued major compactions is in parentheses.">Major Compactions </th>
+ <th class="percent" title="The recent index cache hit rate.">Index Cache<br/>Hit Rate </th>
+ <th class="percent" title="The recent data cache hit rate.">Data Cache<br/>Hit Rate </th>
+ <th class="big-num" title="The Unix one minute load average. The average number of processes in the run queue over a one minute interval.">OS Load </th>
</tr>
</thead>
<tbody></tbody>