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 cda8c2d022 Add critical alert banner to Monitor UI (#6387)
cda8c2d022 is described below
commit cda8c2d0223b84d2800bbc43367e0cb1086a7f92
Author: Dom G. <[email protected]>
AuthorDate: Fri May 22 13:22:50 2026 -0400
Add critical alert banner to Monitor UI (#6387)
* Add global banner to monitor pages when critical alerts are present
* Move alert count into sentence
---
.../accumulo/monitor/resources/css/screen.css | 16 +++++++++++++
.../apache/accumulo/monitor/resources/js/navbar.js | 26 +++++++++++++++-------
.../apache/accumulo/monitor/templates/default.ftl | 8 +++++++
3 files changed, 42 insertions(+), 8 deletions(-)
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css
index 129f103f79..f076e607f9 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css
@@ -71,6 +71,22 @@ body {
width: 90%;
}
+.critical-alert-banner {
+ align-items: center;
+ border-radius: 0;
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin: 0;
+ text-align: center;
+ text-decoration: none;
+}
+
+.critical-alert-banner:hover,
+.critical-alert-banner:focus {
+ text-decoration: none;
+}
+
h1 {
font-size: 2.2em;
text-align: center;
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js
index 1417ec6608..0ffc7f174d 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js
@@ -152,7 +152,7 @@ $(function () {
updateDarkThemeSwitch();
updateAlertPriorities();
refreshSidebar();
- refreshAlertBadge();
+ refreshAlerts();
categories = getStoredArray(ALERT_CATEGORIES);
if (categories.length === 0) {
@@ -179,7 +179,7 @@ function refreshSidebar() {
*/
function refreshNavBar() {
refreshSidebar();
- refreshAlertBadge();
+ refreshAlerts();
}
/**
@@ -238,20 +238,22 @@ function updateDarkThemeSwitch() {
}
/**
- * Updates the badge on the Alerts label on the Nav Bar
+ * Updates the badge on the Alerts label on the Nav Bar and the global
critical alert banner
*/
-function refreshAlertBadge() {
+function refreshAlerts() {
getAlertCounts().then(function () {
- var alertAnchor = $('#alert-anchor');
+ const alertAnchor = $('#alert-anchor');
+ const criticalAlertBanner = $('#critical-alert-banner');
+ const criticalAlertMessageElement = $('#critical-alert-message');
- var alertCounts = getStoredJson(ALERT_COUNTS, {
+ const alertCounts = getStoredJson(ALERT_COUNTS, {
"Critical": 0,
"High": 0,
"Info": 0
});
- var criticalAlertCount = alertCounts.Critical;
- var highAlertCount = alertCounts.High;
+ const criticalAlertCount = alertCounts.Critical;
+ const highAlertCount = alertCounts.High;
alertAnchor.find('span').remove();
@@ -263,6 +265,14 @@ function refreshAlertBadge() {
'<span class="badge position-relative top-0 start-0 translate-middle-y
rounded-pill bg-warning">' +
highAlertCount + '</span>');
}
+
+ if (criticalAlertCount > 0 &&
!window.location.pathname.endsWith('/alerts')) {
+ const alertLabel = criticalAlertCount <= 1 ? 'alert' : 'alerts';
+ criticalAlertMessageElement.text(criticalAlertCount + ' critical ' +
alertLabel + ' present');
+ criticalAlertBanner.removeClass('d-none');
+ } else {
+ criticalAlertBanner.addClass('d-none');
+ }
});
}
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 d946c24e6a..1ecc67652d 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
@@ -76,6 +76,14 @@
<body>
<#include "navbar.ftl">
+ <a id="critical-alert-banner" class="critical-alert-banner alert
alert-danger d-none" href="alerts" aria-live="polite">
+ <span>
+ <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
+ <strong id="critical-alert-message">0 critical alerts present</strong>
+ </span>
+ <span class="btn btn-danger btn-sm fw-semibold">View alerts</span>
+ </a>
+
<div id="main" class="container-fluid">
<#include "${template}">
</div>
