From 3e79c8f82603f182e60aa1a443c6447a9837afc7 Mon Sep 17 00:00:00 2001
From: Christopher Tubbs <ctubbsii@apache.org>
Date: Thu, 22 Oct 2026 19:02:58 -0400
Subject: [PATCH] Miscellaneous monitor updates

* Make Activity menu to be a dropdown-menu-end type, so "Compaction
  Overview" doesn't extend off screen to the right
* Improve accessibility
  * Use semantic h1 headers while keeping the sizing of h2/h3 headers
  * add aria- tags, as needed
* Remove legacy bootstrap 3/4 items in favor of bootstrap 5.3
  conventions
* Make main viewport body a flex type with minimum vertical height using
  the entire viewable area, so the footer sticks to the bottom of the
  screen when the content in the main body is sparse
* Fix caption on external compaction table
* Fix quoting typo on recovery template
* Handle case where resourceGroup is null on server template
* HTML-escape tableId

Co-authored-by: OpenAI GPT-6 Luna
---
 .../accumulo/monitor/templates/alerts.ftl     |  12 +--
 .../accumulo/monitor/templates/compactors.ftl |   4 +-
 .../monitor/templates/coordinator.ftl         |   8 +-
 .../accumulo/monitor/templates/default.ftl    |  12 +--
 .../apache/accumulo/monitor/templates/ec.ftl  | 101 +++++++++---------
 .../accumulo/monitor/templates/fate.ftl       |   4 +-
 .../apache/accumulo/monitor/templates/gc.ftl  |   6 +-
 .../accumulo/monitor/templates/manager.ftl    |   4 +-
 .../accumulo/monitor/templates/modals.ftl     |  60 +++++------
 .../accumulo/monitor/templates/navbar.ftl     |  51 +++++----
 .../accumulo/monitor/templates/overview.ftl   |   8 +-
 .../accumulo/monitor/templates/recovery.ftl   |  12 +--
 .../accumulo/monitor/templates/scans.ftl      |   4 +-
 .../accumulo/monitor/templates/server.ftl     |   6 +-
 .../accumulo/monitor/templates/sservers.ftl   |   4 +-
 .../accumulo/monitor/templates/table.ftl      |  18 ++--
 .../monitor/templates/table_loading.ftl       |   2 +-
 .../accumulo/monitor/templates/tables.ftl     |  14 ++-
 .../accumulo/monitor/templates/tservers.ftl   |   4 +-
 19 files changed, 166 insertions(+), 168 deletions(-)

diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/alerts.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/alerts.ftl
index 7422fff65a2..2eef62473d3 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/alerts.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/alerts.ftl
@@ -19,15 +19,15 @@
 
 -->
     <br />
-    <div class="col-xs-12" id="alerts">
-      <h5>Alerts</h5>
+    <div class="col-12" id="alerts">
+      <h1 class="h5">Alerts</h1>
       <table id="alertsTable"
-        class="table table-bordered table-striped table-condensed" style="width: 100%;">
+        class="table table-bordered table-striped table-sm" style="width: 100%;">
         <thead>
           <tr>
-            <th class="col-xs-2">Priority</th>
-            <th class="col-xs-2">Category</th>
-            <th class="col-xs-8">Message</th>
+            <th style="width: 16.6667%">Priority</th>
+            <th style="width: 16.6667%">Category</th>
+            <th style="width: 66.6667%">Message</th>
           </tr>
         </thead>
         <tbody></tbody>
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 bed7793e2ef..6e0509e7586 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
@@ -22,13 +22,13 @@
         <div id="compactors-banner-message" class="alert" role="alert"></div>
       </div>
       <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
           <span class="table-caption">Compactors</span>
           <br />
           <span class="table-subcaption">The following Compactors reported status.</span>
           <br />
           <br />
-          <table id="compactorsTable" class="table caption-top table-bordered table-striped table-condensed">
+          <table id="compactorsTable" class="table caption-top table-bordered table-striped table-sm">
             <#include "table_loading.ftl" >
           </table>
         </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 70564e5d117..a420001f969 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,19 +21,19 @@
     <br />
     <span class="table-caption">Compaction Coordinator Activity</span>
     <br />
-    <table id="coordinators" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="coordinators" class="table caption-top table-bordered table-striped table-sm">
       <#include "table_loading.ftl" >
     </table>
     <br />
     <span class="table-caption">Compaction Coordinator Queues</span>
     <br />
-    <table id="coordinator_queues" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="coordinator_queues" class="table caption-top table-bordered table-striped table-sm">
       <#include "table_loading.ftl" >
     </table>
     <br />
     <span class="table-caption">Running Compactions By Table</span>
     <br />
-    <table id="table_running" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="table_running" class="table caption-top table-bordered table-striped table-sm">
         <thead>
           <tr>
             <th>Table Name</th>
@@ -45,7 +45,7 @@
     <br />
     <span class="table-caption">Running Compactions By Queue</span>
     <br />
-    <table id="queue_running" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="queue_running" class="table caption-top table-bordered table-striped table-sm">
         <thead>
           <tr>
             <th>Queue Name</th>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/default.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/default.ftl
index 9b373ce14c0..eac06f4e111 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/default.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/default.ftl
@@ -19,11 +19,12 @@
 
 -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="${rootContext}"/>
     <title>${title} - Accumulo ${version}</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- Set the saved theme before loading CSS to reduce light-mode flash on reload -->
     <script>
       (function() {
@@ -78,7 +79,7 @@
     <script src="resources/js/modals.js"></script>
   </head>
 
-  <body>
+  <body class="d-flex flex-column min-vh-100">
     <#include "navbar.ftl">
 
     <a id="critical-alert-banner" class="critical-alert-banner alert alert-danger d-none" href="alerts" aria-live="polite">
@@ -89,10 +90,9 @@
       <span class="btn btn-danger btn-sm fw-semibold">View alerts</span>
     </a>
 
-    <div id="main" class="container-fluid">
+    <div id="main" class="container-fluid d-flex flex-column flex-grow-1">
       <#include "${template}">
-      <br />
-      <div id="lastUpdateDiv" class="center">
+      <div id="lastUpdateDiv" class="center mt-auto">
       </div>
     </div>
 
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/ec.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/ec.ftl
index 5fb41c8adff..584611e4bae 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/ec.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/ec.ftl
@@ -19,64 +19,63 @@
 
 -->
       <div class="row">
-        <div class="col-xs-12">
-          <h3>${title}</h3>
+        <div class="col-12">
+          <h1 class="h3">${title}</h1>
         </div>
       </div>
       <div id="runningDiv">
         <div class="row">
-          <div class="col-xs-12">
-            <table id="runningTable" class="table caption-top table-bordered table-striped table-condensed">
-              <caption>
-                <div class="accordion" id="filterAccordion">
-                  <div class="accordion-item">
-                    <h2 class="accordion-header" id="filterHeading">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
-                        Filters
-                      </button>
-                    </h2>
-                    <div id="filterCollapse" class="accordion-collapse collapse" aria-labelledby="filterHeading" data-bs-parent="#filterAccordion">
-                      <div class="accordion-body">
-                        <!-- Hostname Filter -->
-                        <div class="mb-3">
-                          <label for="hostname-filter" class="form-label">Hostname Filter</label>
-                          <input type="text" id="hostname-filter" class="form-control" placeholder="Enter hostname regex">
-                          <small id="hostname-feedback" class="form-text text-danger" style="display:none;">Invalid regex pattern</small>
-                        </div>
-                        <!-- Queue Filter -->
-                        <div class="mb-3">
-                          <label for="queue-filter" class="form-label">Queue Filter</label>
-                          <input type="text" id="queue-filter" class="form-control" placeholder="Enter queue regex">
-                          <small id="queue-feedback" class="form-text text-danger" style="display:none;">Invalid regex pattern</small>
-                        </div>
-                        <!-- Table ID Filter -->
-                        <div class="mb-3">
-                          <label for="tableid-filter" class="form-label">Table ID Filter</label>
-                          <input type="text" id="tableid-filter" class="form-control" placeholder="Enter table ID regex">
-                          <small id="tableid-feedback" class="form-text text-danger" style="display:none;">Invalid regex pattern</small>
-                        </div>
-                        <!-- ECID Filter -->
-                        <div class="mb-3">
-                          <label for="ecid-filter" class="form-label">ECID Filter</label>
-                          <input type="text" id="ecid-filter" class="form-control" placeholder="Enter ECID regex">
-                          <small id="ecid-feedback" class="form-text text-danger" style="display:none;">Invalid regex pattern</small>
-                        </div>
-                        <!-- Duration Filter -->
-                        <div class="mb-3">
-                          <label for="duration-filter" class="form-label">Duration Filter</label>
-                          <input type="text" id="duration-filter" class="form-control" placeholder="Enter duration (e.g., &gt;10m, &lt;1h, &gt;=5s, &lt;=2d)">
-                          <small id="duration-feedback" class="form-text text-danger" style="display:none;">Invalid duration format</small>
-                          <small class="form-text text-muted">Valid formats: &gt;10m, &lt;1h, &gt;=5s, &lt;=2d</small>
-                        </div>
-                        <!-- Clear Filters Button -->
-                        <div class="mb-3">
-                          <button id="clear-filters" class="btn btn-secondary">Clear Filters</button>
-                        </div>
-                      </div>
+          <div class="col-12">
+            <div class="accordion" id="filterAccordion">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="filterHeading">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
+                    Filters
+                  </button>
+                </h2>
+                <div id="filterCollapse" class="accordion-collapse collapse" aria-labelledby="filterHeading" data-bs-parent="#filterAccordion">
+                  <div class="accordion-body">
+                    <!-- Hostname Filter -->
+                    <div class="mb-3">
+                      <label for="hostname-filter" class="form-label">Hostname Filter</label>
+                      <input type="text" id="hostname-filter" class="form-control" placeholder="Enter hostname regex" aria-describedby="hostname-feedback">
+                      <small id="hostname-feedback" class="form-text text-danger" style="display:none;" aria-live="polite">Invalid regex pattern</small>
+                    </div>
+                    <!-- Queue Filter -->
+                    <div class="mb-3">
+                      <label for="queue-filter" class="form-label">Queue Filter</label>
+                      <input type="text" id="queue-filter" class="form-control" placeholder="Enter queue regex" aria-describedby="queue-feedback">
+                      <small id="queue-feedback" class="form-text text-danger" style="display:none;" aria-live="polite">Invalid regex pattern</small>
+                    </div>
+                    <!-- Table ID Filter -->
+                    <div class="mb-3">
+                      <label for="tableid-filter" class="form-label">Table ID Filter</label>
+                      <input type="text" id="tableid-filter" class="form-control" placeholder="Enter table ID regex" aria-describedby="tableid-feedback">
+                      <small id="tableid-feedback" class="form-text text-danger" style="display:none;" aria-live="polite">Invalid regex pattern</small>
+                    </div>
+                    <!-- ECID Filter -->
+                    <div class="mb-3">
+                      <label for="ecid-filter" class="form-label">ECID Filter</label>
+                      <input type="text" id="ecid-filter" class="form-control" placeholder="Enter ECID regex" aria-describedby="ecid-feedback">
+                      <small id="ecid-feedback" class="form-text text-danger" style="display:none;" aria-live="polite">Invalid regex pattern</small>
+                    </div>
+                    <!-- Duration Filter -->
+                    <div class="mb-3">
+                      <label for="duration-filter" class="form-label">Duration Filter</label>
+                      <input type="text" id="duration-filter" class="form-control" placeholder="Enter duration (e.g., &gt;10m, &lt;1h, &gt;=5s, &lt;=2d)" aria-describedby="duration-feedback duration-help">
+                      <small id="duration-feedback" class="form-text text-danger" style="display:none;" aria-live="polite">Invalid duration format</small>
+                      <small id="duration-help" class="form-text text-body-secondary">Valid formats: &gt;10m, &lt;1h, &gt;=5s, &lt;=2d</small>
+                    </div>
+                    <!-- Clear Filters Button -->
+                    <div class="mb-3">
+                      <button id="clear-filters" type="button" class="btn btn-secondary">Clear Filters</button>
                     </div>
                   </div>
                 </div>
-              </caption>
+              </div>
+            </div>
+            <table id="runningTable" class="table caption-top table-bordered table-striped table-sm">
+              <caption>Running External Compactions</caption>
               <thead>
                 <tr>
                   <th class="firstcell" title="The hostname the compactor is running on.">Server Hostname</th>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/fate.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/fate.ftl
index 3041a0fbbc5..7beb5500823 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/fate.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/fate.ftl
@@ -19,8 +19,8 @@
 
 -->
       <div class="row">
-        <div class="col-xs-12">
-          <table id="fateTable" class="table caption-top table-bordered table-striped table-condensed">
+        <div class="col-12">
+          <table id="fateTable" class="table caption-top table-bordered table-striped table-sm">
             <caption><span class="table-caption">Fate Transaction Details</span><br />
               <span class="table-subcaption">Use the <strong>accumulo inst fate</strong> server-side utility with the <strong>-l</strong> and <strong>-i</strong> options to see detailed information about a transaction.</span><br />
             </caption>
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 93bb069fa65..aaf4080402d 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,21 +24,21 @@
       <div>
         <span class="table-caption">Garbage Collector</span>
         <br />
-        <table id="gc-server" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="gc-server" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </div>
       <div>
         <span class="table-caption">File Collection</span>
         <br />
-        <table id="gc-file" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="gc-file" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </div>
       <div>
         <span class="table-caption">Wal Collection</span>
         <br />
-        <table id="gc-wal" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="gc-wal" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </div>
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 f011fd46fd5..2fea40ee6a9 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,13 +29,13 @@
     </div>
     <span class="table-caption">Managers</span>
     <br />
-    <table id="managers" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="managers" class="table caption-top table-bordered table-striped table-sm">
         <#include "table_loading.ftl" >
     </table>
     <br />
     <span class="table-caption">Manager Fate Activity</span>
     <br />
-    <table id="managers_fate" class="table caption-top table-bordered table-striped table-condensed">
+    <table id="managers_fate" class="table caption-top table-bordered table-striped table-sm">
         <#include "table_loading.ftl" >
     </table>
     <br />
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/modals.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/modals.ftl
index 8d4aeed7a5a..af0d467df80 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/modals.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/modals.ftl
@@ -18,50 +18,46 @@
     under the License.
 
 -->
-    <!-- Modal -->
-    <div id="aboutModal" data-target="#aboutModal" class="modal fade" role="dialog">
-      <div class="modal-dialog" role="document">
-        <!-- Modal content -->
+    <!-- About modal -->
+    <div id="aboutModal" class="modal fade" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
         <div class="modal-content">
-          <div>
-            <div class="modal-header justify-content-center">
-              <span class="modal-title">
-                <div class="text-center">
-                  <a href="https://accumulo.apache.org" target="_blank"><img alt="Apache Accumulo" src="resources/images/accumulo-logo.png" /></a>
-              </span>
-            </div>
+          <div class="modal-header justify-content-center position-relative">
+            <h5 class="modal-title" id="aboutModalLabel">
+              <a href="https://accumulo.apache.org" target="_blank" rel="noopener noreferrer">
+                <img alt="Apache Accumulo" src="resources/images/accumulo-logo.png" />
+              </a>
+            </h5>
+            <button type="button" class="btn-close position-absolute end-0 me-3" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <div class="container-fluid">
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">Software</div>
-                <div class="col-sm-8 text-start"><a href="https://accumulo.apache.org" target="_blank">Apache&nbsp;Accumulo</a></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">Software</div>
+                <div class="col-sm-8"><a href="https://accumulo.apache.org" target="_blank" rel="noopener noreferrer">Apache&nbsp;Accumulo</a></div>
               </div>
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">Version</div>
-                <div class="col-sm-8 text-start"><span id="modal-version"></span></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">Version</div>
+                <div class="col-sm-8"><span id="modal-version"></span></div>
               </div>
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">Instance&nbsp;Name</div>
-                <div class="col-sm-8 text-start"><span id="modal-instance-name"></span></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">Instance&nbsp;Name</div>
+                <div class="col-sm-8"><span id="modal-instance-name"></span></div>
               </div>
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">Instance&nbsp;Id</div>
-                <div class="col-sm-8 text-start"><span id="modal-instance-id"></span></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">Instance&nbsp;Id</div>
+                <div class="col-sm-8"><span id="modal-instance-id"></span></div>
               </div>
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">ZooKeeper&nbsp;Hosts</div>
-                <div class="col-sm-8 text-start"><span id="modal-zk-hosts"></span></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">ZooKeeper&nbsp;Hosts</div>
+                <div class="col-sm-8"><span id="modal-zk-hosts"></span></div>
               </div>
-              <div class="row justify-content-evenly">
-                <div class="col-sm-4 text-end">Volumes</div>
-                <div class="col-sm-8 text-start"><span id="modal-volumes"></span></div>
+              <div class="row align-items-center">
+                <div class="col-sm-4 text-sm-end">Volumes</div>
+                <div class="col-sm-8"><span id="modal-volumes"></span></div>
               </div>
             </div>
           </div>
-          <div class="modal-footer">
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
         </div>
       </div>
     </div>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl
index 58974d3f9b4..d4413b43558 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl
@@ -18,27 +18,25 @@
     under the License.
 
 -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
       <div class="container-fluid">
-        <div class="navbar-header">
-          <a class="navbar-brand" id="headertitle" style="text-decoration: none" href="${rootContext}">
-            <img id="accumulo-avatar" alt="accumulo" class="navbar-left" src="resources/images/accumulo-avatar.png" />
-            ${instance_name}
-          </a>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-items" aria-controls="nav-items" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-        </div>
+        <a class="navbar-brand" id="headertitle" style="text-decoration: none" href="${rootContext}">
+          <img id="accumulo-avatar" alt="accumulo" class="me-2" src="resources/images/accumulo-avatar.png" />
+          ${instance_name?html}
+        </a>
+        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav-items" aria-controls="nav-items" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
         <div class="collapse navbar-collapse" id="nav-items">
           <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
             <li class="navbar-text px-2">
-              <span id="alertStatus" class="bi bi-exclamation-triangle-fill" style="display: none; cursor: pointer;" title="System-wide alert. Click to display (if not already present)"></span>
+              <button type="button" id="alertStatus" class="bi bi-exclamation-triangle-fill btn btn-link p-0 text-danger text-decoration-none" style="display: none; cursor: pointer;" title="System-wide alert. Click to display (if not already present)" aria-label="Show system-wide alert details"></button>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" href="#" id="serversDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 <span id="statusNotification" class="icon-dot normal"></span>&nbsp;Servers
               </a>
-              <ul class="dropdown-menu">
+              <ul class="dropdown-menu" aria-labelledby="serversDropdown">
                 <li><a class="link-body-emphasis dropdown-item d-flex justify-content-between align-items-center gap-3" href="compactors"><span><span id="compactorStatusNotification" class="icon-dot normal"></span>&nbsp;Compactors</span><span id="compactorStatusCount" class="server-count"></span></a></li>
                 <li><a class="link-body-emphasis dropdown-item d-flex justify-content-between align-items-center gap-3" href="gc"><span><span id="gcStatusNotification" class="icon-dot normal"></span>&nbsp;Garbage&nbsp;Collector</span><span id="gcStatusCount" class="server-count"></span></a></li>
                 <li><a class="link-body-emphasis dropdown-item d-flex justify-content-between align-items-center gap-3" href="manager"><span><span id="managerStatusNotification" class="icon-dot normal"></span>&nbsp;Managers</span><span id="managerStatusCount" class="server-count"></span></a></li>
@@ -46,14 +44,14 @@
                 <li><a class="link-body-emphasis dropdown-item d-flex justify-content-between align-items-center gap-3" href="tservers"><span><span id="serverStatusNotification" class="icon-dot normal"></span>&nbsp;Tablet&nbsp;Servers</span><span id="serverStatusCount" class="server-count"></span></a></li>
               </ul>
             </li>
-            <li>
-              <a class="nav-link" aria-current="page" href="tables">Tables</a>
+            <li class="nav-item">
+              <a class="nav-link" href="tables">Tables</a>
             </li>
-            <li class="dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="activityDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 Activity
               </a>
-              <ul class="dropdown-menu col-xs-12" aria-labelledby="navbarDropdown">
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="activityDropdown">
                 <li><a class="link-body-emphasis dropdown-item" href="coordinator">Compaction Overview</a></li>
                 <li><a class="link-body-emphasis dropdown-item" href="ec">Compaction Details</a></li>
                 <li><a class="link-body-emphasis dropdown-item" href="fate">Fate Tx Details</a></li>
@@ -61,15 +59,14 @@
                 <li><a class="link-body-emphasis dropdown-item" href="recovery">Tablet Recoveries</a></li>
               </ul>
             </li>
-            <li>
-              <a id="alert-anchor" class="nav-link" aria-current="page" href="alerts">Alerts</a>
+            <li class="nav-item">
+              <a id="alert-anchor" class="nav-link" href="alerts"><span class="bi bi-exclamation-triangle-fill" aria-hidden="true"></span>&nbsp;Alerts</a>
             </li>
-            <li class="dropdown">
-              <a class="nav-link" href="#" id="navbarDropdown"
-              role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" id="preferencesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Preferences">
                 <span style="font-size: 1.2em;" class="bi bi-gear"></span>
               </a>
-              <ul class="dropdown-menu dropdown-menu-end">
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="preferencesDropdown">
                 <li><h6 class="dropdown-header fw-semibold pb-1">General Preferences</h6></li>
                 <li>
                   <div class="dropdown-item d-flex justify-content-between align-items-center small">
@@ -107,8 +104,10 @@
                 </li>
                 <li><hr class="dropdown-divider"></li>
                 <li><h6 class="dropdown-header fw-semibold pb-1">Alert Categories</h6></li>
-                <div id="categories-list">
-                </div>
+                <li>
+                  <ul id="categories-list" class="list-unstyled mb-0">
+                  </ul>
+                </li>
                 <li><hr class="dropdown-divider"></li>
                 <li><a class="link-body-emphasis dropdown-item" data-bs-toggle="modal" href="#aboutModal">About</a></li>
               </ul>
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 3b9c167d481..08487d61bbf 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
@@ -19,14 +19,14 @@
 
 -->
       <div class="row">
-        <div class="col-xs-12 center nowrap">
-          <h3>${title}</h3>
+        <div class="col-12 center nowrap">
+          <h1 class="h3">${title}</h1>
         </div>
       </div>
       <div class="row d-flex justify-content-center">
-        <div class="col-xs-12">
+        <div class="col-12">
           <div class="row mb-4">
-            <div id="deploymentWarning"></div>
+            <div id="deploymentWarning" class="col-12"></div>
             <div class="col">
               <div class="card">
                 <div class="card-header fw-semibold">Server Deployment</div>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/recovery.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/recovery.ftl
index 34a353f22cc..2885e5f682e 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/recovery.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/recovery.ftl
@@ -19,7 +19,7 @@
 
 -->
       <div>
-        <table id="recovery-overview" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="recovery-overview" class="table caption-top table-bordered table-striped table-sm">
           <caption><span class="table-caption">Table Recovery Overview</span><br />
             <span>The Manager is reporting the following tablets need log sorting for recovery</span><br />
           </caption>
@@ -35,7 +35,7 @@
         <br />
       </div>
       <div>
-        <table id="tablets-needing-recovery" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="tablets-needing-recovery" class="table caption-top table-bordered table-striped table-sm">
           <caption><span class="table-caption">Tablets Requiring Recovery</span><br />
             <span>The system tables are reporting the following tablets need recovery (log sorting + mutations replayed)</span><br />
           </caption>
@@ -52,12 +52,12 @@
         <br />
       </div>
       <div>
-        <table id="servers-sorting" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="servers-sorting" class="table caption-top table-bordered table-striped table-sm">
           <caption><span class="table-caption">Servers Sorting WALs</span><br />
             <span>The following servers have reported WAL sort activity.<br />
             Compactors will sort WAL files when not performing a compaction.<br />
             Scan Servers and Tablet Servers will sort WAL files
-            in accordance with their properties ("sserver.wal.sort.concurrent.max` and `tserver.wal.sort.concurrent.max`)</span><br />
+            in accordance with their properties (`sserver.wal.sort.concurrent.max` and `tserver.wal.sort.concurrent.max`)</span><br />
           </caption>          
           <thead>
             <tr>
@@ -74,7 +74,7 @@
         <br />
       </div>
       <div>
-        <table id="servers-replaying" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="servers-replaying" class="table caption-top table-bordered table-striped table-sm">
           <caption>
             <span class="table-caption">Tablet Servers Recovering Tablets</span><br />
             <span>The following Tablet Servers have reported Tablet recovery activity.</span><br />
@@ -93,4 +93,4 @@
           <tbody></tbody>
         </table>
       </div>
-      
\ No newline at end of file
+      
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/scans.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/scans.ftl
index 0694442f53f..41104acc914 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/scans.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/scans.ftl
@@ -19,10 +19,10 @@
 
 -->
       <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
           <span class="table-caption">Scans</span>
           <br />
-          <table id="scansList" class="table caption-top table-bordered table-striped table-condensed">
+          <table id="scansList" class="table caption-top table-bordered table-striped table-sm">
             <thead>
               <tr>
                 <th class="firstcell">Server</th>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/server.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/server.ftl
index 8204af61ba0..79424696601 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/server.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/server.ftl
@@ -27,15 +27,15 @@
       <div id="server-metrics-banner-message" class="alert alert-danger" role="alert"></div>
     </div>
     <div class="row">
-      <div class="col-xs-12">
+      <div class="col-12">
         <span class="table-caption">Server Metrics</span>
         <br />
         <span class="table-subcaption">
-          ${(serverType!)?html} ${(server!)?html}<#if resourceGroup?has_content> (${resourceGroup?html})</#if>
+          ${(serverType!)?html} ${(server!)?html}<#if (resourceGroup!'')?has_content> (${(resourceGroup!'')?html})</#if>
         </span>
         <br />
         <br />
-        <table id="serverMetrics" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="serverMetrics" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </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 b5066874683..78a4ef56856 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
@@ -22,13 +22,13 @@
       <div id="sservers-banner-message" class="alert" role="alert"></div>
     </div>
     <div class="row">
-      <div class="col-xs-12">
+      <div class="col-12">
         <span class="table-caption">Scan Servers</span>
         <br />
         <span class="table-subcaption">The following Scan Servers reported status.</span>
         <br />
         <br />
-        <table id="sservers" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="sservers" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </div>
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 2bd7e2224fb..c4ed9beb18a 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
@@ -23,17 +23,17 @@
          * Creates participating Tservers initial table, passes the tableId from the template
          */
         $(function () {
-          initTableServerTable('${tableId}');
+          initTableServerTable('${tableId?js_string}');
         });
       </script>
       <div class="row">
-        <div class="col-xs-12">
-          <h3>Details for table ${table} <small>(ID: ${tableId})</small></h3>
+        <div class="col-12">
+          <h1 class="h3">Details for table ${table?html} <small>(ID: ${tableId?html})</small></h1>
         </div>
       </div>
       <div class="row">
-        <div class="col-xs-12">
-          <table id="participatingTServers" class="table caption-top table-bordered table-striped table-condensed">
+        <div class="col-12">
+          <table id="participatingTServers" class="table caption-top table-bordered table-striped table-sm">
             <caption><span class="table-caption">Table Summary</span></caption>
             <thead>
               <tr>
@@ -58,8 +58,8 @@
       </div>
       <br><br>
       <div class="row">
-        <div class="col-xs-12">
-          <table id="tabletServersList" class="table caption-top table-bordered table-striped table-condensed">
+        <div class="col-12">
+          <table id="tabletServersList" class="table caption-top table-bordered table-striped table-sm">
             <caption><span class="table-caption">Tablet Distribution Summary</span></caption>
             <thead>
               <tr>
@@ -78,8 +78,8 @@
       <br><br>
       <!-- Section for tablets details DataTable -->
       <div class="row">
-        <div class="col-xs-12">
-          <table id="tabletsList" class="table caption-top table-bordered table-striped table-condensed">
+        <div class="col-12">
+          <table id="tabletsList" class="table caption-top table-bordered table-striped table-sm">
             <caption><span class="table-caption">Tablet Details</span></caption>
             <thead>
               <tr>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
index c307aa9579b..5c937208f2a 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/table_loading.ftl
@@ -27,7 +27,7 @@
   remove the spinner.
 -->
 
-            <thead><tr><th /></tr></thead>
+            <thead><tr><th></th></tr></thead>
             <tbody>
               <tr>
                 <td>
diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tables.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tables.ftl
index b80058223fa..fccae67e35e 100644
--- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tables.ftl
+++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tables.ftl
@@ -64,7 +64,11 @@
                 "type": "html",
                 "render": function (data, type, row, meta) {
                   if (type === 'display') {
-                    data = '<a class="link-body-emphasis" href="tables/' + row.tableId + '">' + row.tableName + '</a>';
+                    var link = $('<a>', {
+                      class: 'link-body-emphasis',
+                      href: 'tables/' + encodeURIComponent(row.tableId)
+                    }).text(row.tableName);
+                    data = link.prop('outerHTML');
                   }
                   return data;
                 }
@@ -98,13 +102,13 @@
         }
       </script>
       <div class="row">
-        <div class="col-xs-12">
-          <h3>Table Overview</h3>
+        <div class="col-12">
+          <h1 class="h3">Table Overview</h1>
         </div>
       </div>
       <div>
-        <table id="tableList" class="table caption-top table-bordered table-striped table-condensed">
-          <caption><span class="table-caption">${tablesTitle}</span><br />
+        <table id="tableList" class="table caption-top table-bordered table-striped table-sm">
+          <caption><span class="table-caption">${tablesTitle}</span></caption>
           <thead>
             <tr>
               <th title="Table Name">Table&nbsp;Name</th>
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 19787599087..97eb3ba8a3f 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
@@ -25,13 +25,13 @@
       <div id="tservers-banner-message" class="alert" role="alert"></div>
     </div>    
     <div class="row">
-      <div class="col-xs-12">
+      <div class="col-12">
         <span class="table-caption">Tablet Servers</span>
         <br />
         <span class="table-subcaption">The following Tablet Servers reported status.</span>
         <br />
         <br />
-        <table id="tservers" class="table caption-top table-bordered table-striped table-condensed">
+        <table id="tservers" class="table caption-top table-bordered table-striped table-sm">
           <#include "table_loading.ftl" >
         </table>
       </div>