Add a loading indicator to empty tables

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>';
 }
 
 /**

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>

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">

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>
 

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 />
     <!--

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>

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>

server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl

@@ -0,0 +1,42 @@
+<#--
+
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+
+-->
+
+<#--
+  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>

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>