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 bd3e4448e5 Created preference menu, moved message switches (#6369)
bd3e4448e5 is described below
commit bd3e4448e57596e13c280cbdc362efb4a68fd370
Author: Dave Marion <[email protected]>
AuthorDate: Tue May 19 16:40:44 2026 -0400
Created preference menu, moved message switches (#6369)
This changes the three-dot menu icon to a gear and moves
the message priority and message category switches from
the messages page to the preference menu.
Co-authored-by: Dom G. <[email protected]>
---
.../accumulo/monitor/resources/js/messages.js | 126 ++-------------------
.../apache/accumulo/monitor/resources/js/navbar.js | 124 ++++++++++++++++++--
.../apache/accumulo/monitor/templates/messages.ftl | 6 -
.../apache/accumulo/monitor/templates/navbar.ftl | 42 +++++--
4 files changed, 156 insertions(+), 142 deletions(-)
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/messages.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/messages.js
index f3fbdc61b2..83ede9866a 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/messages.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/messages.js
@@ -18,120 +18,10 @@
*/
"use strict";
-const messageCategoryList = '#message-category-list';
-const messagePriorityList = '#message-priority-list';
const messageHtmlTable = '#messagesTable';
-const messagePriorities = ['High', 'Info'];
var dataTableRef;
-
-/**
- * Updates the list of message priorities
- */
-function updateMessagePriorities() {
- var priorityList = $(messagePriorityList);
- $.each(messagePriorities, function (index, pri) {
- var switchId = "msg-pri-switch-" + pri;
- var switchElement = "#" + switchId;
- var savedValue = localStorage.getItem(switchId + "-state");
-
- if ($(switchElement).length) {
- // update it
- if (savedValue === null || savedValue === 'true') {
- $(switchElement).prop('checked', true);
- } else {
- $(switchElement).prop('checked', false);
- }
- } else {
- // create it
- var div = $(document.createElement("div"));
- div.addClass("form-check form-switch");
-
- var input = $(document.createElement("input"));
- input.addClass("form-check-input");
- input.attr("type", "checkbox");
- input.attr("role", "switch");
- input.attr("id", switchId);
-
- if (savedValue === null || savedValue === 'true') {
- input.prop('checked', true);
- } else {
- input.prop('checked', false);
- }
-
- input.on("change", function () {
- localStorage.setItem("msg-pri-switch-" + pri + "-state",
$(this).is(':checked'));
- refresh();
- });
- div.append(input);
-
- var label = $(document.createElement("label"));
- label.addClass("form-check-label fs-6");
- label.attr("for", switchId);
- label.text(pri);
- div.append(label);
-
- priorityList.append(div);
- }
- });
-
-}
-
-/**
- * Updates the list of message categories
- */
-function updateMessageCategories() {
-
- var categories = getStoredArray(MESSAGE_CATEGORIES);
-
- var categoryList = $(messageCategoryList);
- $.each(categories, function (index, cat) {
-
- var switchId = "msg-cat-switch-" + cat;
- var switchElement = "#" + switchId;
- var savedValue = localStorage.getItem(switchId + "-state");
-
- if ($(switchElement).length) {
- // update it
- if (savedValue === null || savedValue === 'true') {
- $(switchElement).prop('checked', true);
- } else {
- $(switchElement).prop('checked', false);
- }
- } else {
- // create it
- var div = $(document.createElement("div"));
- div.addClass("form-check form-check-inline form-switch");
-
- var input = $(document.createElement("input"));
- input.addClass("form-check-input");
- input.attr("type", "checkbox");
- input.attr("role", "switch");
- input.attr("id", switchId);
-
- if (savedValue === null || savedValue === 'true') {
- input.prop('checked', true);
- } else {
- input.prop('checked', false);
- }
-
- input.on("change", function () {
- localStorage.setItem("msg-cat-switch-" + cat + "-state",
$(this).is(':checked'));
- refresh();
- });
- div.append(input);
-
- var label = $(document.createElement("label"));
- label.addClass("form-check-label fs-6");
- label.attr("for", switchId);
- label.text(cat);
- div.append(label);
-
- categoryList.append(div);
- }
- });
-
-}
+var categories;
function fetchTableData() {
@@ -170,15 +60,19 @@ function getTableData() {
}
function loadMessagesPageData() {
- return getMessageCategories().then(function () {
+
+ categories = getStoredArray(MESSAGE_CATEGORIES);
+ if (categories.length === 0) {
+ return getMessageCategories().then(function () {
+ return fetchTableData();
+ });
+ } else {
return fetchTableData();
- });
+ }
}
function refresh() {
return loadMessagesPageData().then(function () {
- updateMessagePriorities();
- updateMessageCategories();
if (dataTableRef) {
ajaxReloadTable(dataTableRef);
}
@@ -214,8 +108,6 @@ function createDataTable() {
$(function () {
loadMessagesPageData().then(function () {
- updateMessagePriorities();
- updateMessageCategories();
createDataTable();
});
});
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 7b6dfce77f..5a55271151 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
@@ -58,6 +58,8 @@ const NAVBAR_COMPONENTS = [{
countId: 'compactorStatusCount'
}];
+var categories;
+
/**
* Remove other bootstrap color classes and add the given class to the given
element
* @param {string} elementId the element id to update
@@ -148,7 +150,18 @@ function updateServerNotifications(statusData) {
$(function () {
setTheme();
updateDarkThemeSwitch();
+ updateMessagePriorities();
refreshSidebar();
+
+ categories = getStoredArray(MESSAGE_CATEGORIES);
+ if (categories.length === 0) {
+ getMessageCategories().then(function () {
+ categories = getStoredArray(MESSAGE_CATEGORIES);
+ updateMessageCategories();
+ });
+ } else {
+ updateMessageCategories();
+ }
});
/**
@@ -181,19 +194,21 @@ function refreshSideBarNotifications() {
}
/**
- * Set the theme based on the user
- * preferences
+ * Returns the effective dark theme preference.
*/
-function setTheme() {
- var setDarkMode = false;
+function isDarkThemeEnabled() {
var storedValue = localStorage.getItem("dark-theme-enabled");
if (storedValue === null) {
- setDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
- } else {
- setDarkMode = storedValue === 'true';
+ return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
+ return storedValue === 'true';
+}
- if (setDarkMode === true) {
+/**
+ * Set the theme based on the user preferences
+ */
+function setTheme() {
+ if (isDarkThemeEnabled() === true) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', 'light');
@@ -206,9 +221,8 @@ function setTheme() {
function updateDarkThemeSwitch() {
var storageKey = "dark-theme-enabled";
var darkThemeSwitchElement = $('#darkThemeSwitch');
- var savedValue = localStorage.getItem(storageKey);
- if (savedValue === 'true') {
+ if (isDarkThemeEnabled() === true) {
darkThemeSwitchElement.prop('checked', true);
} else {
darkThemeSwitchElement.prop('checked', false);
@@ -220,3 +234,93 @@ function updateDarkThemeSwitch() {
document.documentElement.setAttribute('data-bs-theme', enableDarkTheme ?
'dark' : 'light');
});
}
+
+/**
+ * Update the High and Info Message Category Switches
+ */
+function updateMessagePriorities() {
+ var messagePriorities = ['High', 'Info'];
+ $.each(messagePriorities, function (index, pri) {
+ var switchId = "msg-pri-switch-" + pri;
+ var switchElement = "#" + switchId;
+ var savedValue = localStorage.getItem(switchId + "-state");
+
+ // update it
+ if (savedValue === null || savedValue === 'true') {
+ $(switchElement).prop('checked', true);
+ } else {
+ $(switchElement).prop('checked', false);
+ }
+
+ $(switchElement).on("change", function () {
+ localStorage.setItem("msg-pri-switch-" + pri + "-state",
$(this).is(':checked'));
+ if (window.location.pathname.endsWith('/messages')) {
+ refresh();
+ }
+ });
+ });
+}
+
+/**
+ * Update the High and Info Message Category Switches
+ */
+function updateMessageCategories() {
+ const messageCategoryList = '#categories-list';
+
+ var categoryList = $(messageCategoryList);
+ $.each(categories, function (index, cat) {
+
+ var switchId = "msg-cat-switch-" + cat;
+ var switchElement = "#" + switchId;
+ var savedValue = localStorage.getItem(switchId + "-state");
+
+ if ($(switchElement).length) {
+ // update it
+ if (savedValue === null || savedValue === 'true') {
+ $(switchElement).prop('checked', true);
+ } else {
+ $(switchElement).prop('checked', false);
+ }
+ } else {
+ // create it
+ var li = $(document.createElement("li"));
+
+ var outerDiv = $(document.createElement("div"));
+ outerDiv.addClass("dropdown-item d-flex justify-content-between
align-items-center small");
+
+ var div = $(document.createElement("div"));
+ div.addClass("form-check form-switch d-flex align-items-center mb-0 p-0
fs-6");
+
+ var input = $(document.createElement("input"));
+ input.addClass("form-check-input float-none m-0");
+ input.attr("type", "checkbox");
+ input.attr("role", "switch");
+ input.attr("id", switchId);
+
+ if (savedValue === null || savedValue === 'true') {
+ input.prop('checked', true);
+ } else {
+ input.prop('checked', false);
+ }
+
+ input.on("change", function () {
+ localStorage.setItem("msg-cat-switch-" + cat + "-state",
$(this).is(':checked'));
+ if (window.location.pathname.endsWith('/messages')) {
+ refresh();
+ }
+ });
+ div.append(input);
+
+ var label = $(document.createElement("label"));
+ label.addClass("form-check-label");
+ label.attr("for", switchId);
+ label.text(cat);
+
+ outerDiv.append(label);
+ outerDiv.append(div);
+ li.append(outerDiv);
+ categoryList.append(li);
+ }
+ });
+
+}
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/messages.ftl
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/messages.ftl
index 185801c3fb..b78f5699e1 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/messages.ftl
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/messages.ftl
@@ -20,12 +20,6 @@
-->
<br />
<div class="col-xs-12" id="messages">
- <h5>Message Priority Filters <small>(critical messages are always
shown)</small></h5>
- <div id="message-priority-list"></div>
- <br />
- <h5>Message Category Filters</h5>
- <div id="message-category-list"></div>
- <br />
<h5>Messages</h5>
<table id="messagesTable"
class="table table-bordered table-striped table-condensed"
style="width: 100%;">
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 fc188ca618..f1bde79ce5 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
@@ -76,25 +76,49 @@
<li class="dropdown">
<a class="nav-link" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span style="font-size: 1.2em;" class="bi
bi-three-dots-vertical"></span>
+ <span style="font-size: 1.2em;" class="bi bi-gear"></span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
+ <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">
- <label class="mb-0" for="darkThemeSwitch">Dark
Theme</label>
- <div class="form-check form-switch mb-0 ms-3">
- <input id="darkThemeSwitch" class="form-check-input
mt-0" type="checkbox" role="switch">
+ <div class="dropdown-item d-flex justify-content-between
align-items-center small">
+ <label class="form-check-label" for="darkThemeSwitch">Dark
Theme</label>
+ <div class="form-check form-switch d-flex
align-items-center mb-0 p-0 fs-6">
+ <input id="darkThemeSwitch" class="form-check-input
float-none m-0" type="checkbox" role="switch">
</div>
</div>
</li>
<li>
- <div class="dropdown-item d-flex justify-content-between
align-items-center">
- <label class="mb-0"
for="autoRefreshSwitch">Auto-Refresh</label>
- <div class="form-check form-switch mb-0 ms-3">
- <input id="autoRefreshSwitch" class="form-check-input
mt-0" type="checkbox" role="switch">
+ <div class="dropdown-item d-flex justify-content-between
align-items-center small">
+ <label class="form-check-label"
for="autoRefreshSwitch">Auto-Refresh</label>
+ <div class="form-check form-switch d-flex
align-items-center mb-0 p-0 fs-6">
+ <input id="autoRefreshSwitch" class="form-check-input
float-none m-0" type="checkbox" role="switch">
</div>
</div>
</li>
+ <li><hr class="dropdown-divider"></li>
+ <li><h6 class="dropdown-header fw-semibold pb-1">Message
Priorities</h6></li>
+ <li>
+ <div class="dropdown-item d-flex justify-content-between
align-items-center small">
+ <label class="form-check-label"
for="msg-pri-switch-High">High</label>
+ <div class="form-check form-switch d-flex
align-items-center mb-0 p-0 fs-6">
+ <input id="msg-pri-switch-High" class="form-check-input
float-none m-0" type="checkbox" role="switch">
+ </div>
+ </div>
+ </li>
+ <li>
+ <div class="dropdown-item d-flex justify-content-between
align-items-center small">
+ <label class="form-check-label"
for="msg-pri-switch-Info">Info</label>
+ <div class="form-check form-switch d-flex
align-items-center mb-0 p-0 fs-6">
+ <input id="msg-pri-switch-Info" class="form-check-input
float-none m-0" type="checkbox" role="switch">
+ </div>
+ </div>
+ </li>
+ <li><hr class="dropdown-divider"></li>
+ <li><h6 class="dropdown-header fw-semibold pb-1">Message
Categories</h6></li>
+ <div id="categories-list">
+ </div>
+ <li><hr class="dropdown-divider"></li>
<li><a class="link-body-emphasis dropdown-item"
data-bs-toggle="modal" href="#aboutModal">About</a></li>
</ul>
</li>
