This is an automated email from the ASF dual-hosted git repository.
dlmarion 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 61a879e4a4 Add a loading indicator to empty tables (#6338)
61a879e4a4 is described below
commit 61a879e4a4b1242e8ba3d9700fdf8b48e3c05f5d
Author: Dave Marion <[email protected]>
AuthorDate: Mon May 11 16:00:28 2026 -0400
Add a loading indicator to empty tables (#6338)
This change adds a single column with an empty header row
and a loading indicator to the tables that are managed
by the server_process_common.js file. The logic in the
server_process_common.js file will remove the thead and
tbody elements from the table before populating it with
columns and rows.
---
.../accumulo/monitor/resources/js/overview.js | 12 ++++----
.../accumulo/monitor/templates/compactors.ftl | 1 +
.../accumulo/monitor/templates/coordinator.ftl | 4 +--
.../org/apache/accumulo/monitor/templates/gc.ftl | 6 ++--
.../apache/accumulo/monitor/templates/manager.ftl | 4 +--
.../apache/accumulo/monitor/templates/overview.ftl | 6 +++-
.../apache/accumulo/monitor/templates/sservers.ftl | 2 +-
.../templates/{overview.ftl => table_loading.ftl} | 35 ++++++++++++++--------
.../apache/accumulo/monitor/templates/tservers.ftl | 2 +-
9 files changed, 44 insertions(+), 28 deletions(-)
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
index 27bf0a2ebb..e0f7bc4390 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
@@ -18,6 +18,8 @@
*/
"use strict";
+const deploymentTable = '#deployment-table';
+
var deploymentBreakdown = [];
/**
@@ -65,7 +67,7 @@ function refreshDeploymentTables() {
function renderDeploymentMatrix(breakdown) {
var matrixData = buildDeploymentMatrix(breakdown);
- var $container = $('#deploymentBreakdownMatrix');
+ var $container = $(deploymentTable);
if (breakdown.length === 0) {
$container.empty();
@@ -77,6 +79,8 @@ function renderDeploymentMatrix(breakdown) {
return;
}
+ $container.find('thead').remove();
+ $container.find('tbody').remove();
$container.html(buildDeploymentMatrixTable(matrixData));
}
@@ -168,11 +172,9 @@ function buildDeploymentMatrixTable(matrixData) {
footerCells.push('<td class="deployment-matrix-cell
deployment-matrix-total">' +
buildDeploymentTotalCell(grandTotals) + '</td>');
- return '<div class="table-responsive">' +
- '<table class="table table-bordered table-sm align-middle
deployment-matrix-table mb-0">' +
- '<thead><tr>' + headerCells.join('') +
+ return '<thead><tr>' + headerCells.join('') +
'</tr></thead><tbody>' + rowsHtml + '</tbody><tfoot><tr>' +
footerCells.join('') +
- '</tr></tfoot></table></div>';
+ '</tr></tfoot>';
}
/**
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/compactors.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/compactors.ftl
index b6a3e88317..71944f81e7 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/compactors.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/compactors.ftl
@@ -27,6 +27,7 @@
<caption><span class="table-caption">Compactors</span><br />
<span class="table-subcaption">The following Compactors reported
status.</span><br />
</caption>
+ <#include "table_loading.ftl" >
</table>
</div>
</div>
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/coordinator.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/coordinator.ftl
index 259fc282b8..11d700f30f 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/coordinator.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/coordinator.ftl
@@ -21,12 +21,12 @@
<br />
<table id="coordinators" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">Compaction Coordinator
Activity</span><br /></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
<br />
<table id="coordinator_queues" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">Compaction Coordinator
Queues</span><br /></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
<br />
<table id="table_running" class="table caption-top table-bordered
table-striped table-condensed">
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/gc.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/gc.ftl
index 3a4f2b1063..19e6d317bb 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/gc.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/gc.ftl
@@ -24,19 +24,19 @@
<div>
<table id="gc-server" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">Garbage Collector</span><br
/></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
</div>
<div>
<table id="gc-file" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">File Collection</span><br
/></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
</div>
<div>
<table id="gc-wal" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">Wal Collection</span><br
/></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
</div>
\ No newline at end of file
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/manager.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/manager.ftl
index 6c1040529c..ea900b3fcb 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/manager.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/manager.ftl
@@ -29,12 +29,12 @@
</div>
<table id="managers" class="table caption-top table-bordered table-striped
table-condensed">
<caption><span class="table-caption">Managers</span><br /></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
<br />
<table id="managers_fate" class="table caption-top table-bordered
table-striped table-condensed">
<caption><span class="table-caption">Manager Fate Activity</span><br
/></caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
<br />
<!--
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
index 42031ab289..ada148dddf 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
@@ -27,7 +27,11 @@
<div class="col-xs-12" id="deploymentOverview">
<div id="deploymentWarning"></div>
<div class="deployment-overview-content">
- <div id="deploymentBreakdownMatrix"></div>
+ <div class="table-responsive">
+ <table id="deployment-table" class="table table-bordered
table-sm align-middle deployment-matrix-table mb-0">
+ <#include "table_loading.ftl" >
+ </table>
+ </div>
</div>
</div>
</div>
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/sservers.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/sservers.ftl
index 582bfdc250..3ac0891e50 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/sservers.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/sservers.ftl
@@ -27,7 +27,7 @@
<caption><span class="table-caption">Scan Servers</span><br />
<span class="table-subcaption">The following Scan Servers reported
status.</span><br />
</caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
</div>
</div>
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
similarity index 55%
copy from
server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
copy to
server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
index 42031ab289..c307aa9579 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
@@ -18,16 +18,25 @@
under the License.
-->
- <div class="row">
- <div class="col-xs-12 center nowrap">
- <h3>${title}</h3>
- </div>
- </div>
- <div class="row d-flex justify-content-center">
- <div class="col-xs-12" id="deploymentOverview">
- <div id="deploymentWarning"></div>
- <div class="deployment-overview-content">
- <div id="deploymentBreakdownMatrix"></div>
- </div>
- </div>
- </div>
+
+<#--
+ This snippet is meant to be included in HTML tables that are
+ used in the Monitor with DataTables. This snippet adds a
+ spinner with a label when the HTML table loads. The javascript
+ that creates the DataTable should clear the HTML table to
+ remove the spinner.
+-->
+
+ <thead><tr><th /></tr></thead>
+ <tbody>
+ <tr>
+ <td>
+ <div class="text-center">
+ <div class="spinner-border
spinner-border-sm" role="status">
+ <span
class="visually-hidden">Loading...</span>
+ </div>
+ <span>Loading...</span>
+ </div>
+ </td>
+ </tr>
+ </tbody>
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tservers.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tservers.ftl
index c3929efa00..06cfd0009e 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tservers.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tservers.ftl
@@ -31,7 +31,7 @@
<caption><span class="table-caption">Tablet Servers</span><br />
<span class="table-subcaption">The following Tablet Servers
reported status.</span><br />
</caption>
- <tbody></tbody>
+ <#include "table_loading.ftl" >
</table>
</div>
</div>
