From 14213839a2ae6500e2409f350fe1337d64ffe063 Mon Sep 17 00:00:00 2001 From: Dave Marion Date: Wed, 13 May 2026 17:33:22 +0000 Subject: [PATCH] Created preference menu, moved message switches This is a follow-on to #6366 that 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 / settings menu. Related to #6365 --- .../accumulo/monitor/resources/js/messages.js | 126 ++---------------- .../accumulo/monitor/resources/js/navbar.js | 102 ++++++++++++++ .../accumulo/monitor/templates/messages.ftl | 6 - .../accumulo/monitor/templates/navbar.ftl | 29 +++- 4 files changed, 139 insertions(+), 124 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 f3fbdc61b2e..83ede9866ae 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 7b6dfce77ff..9adeb13e86d 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,17 @@ function updateServerNotifications(statusData) { $(function () { setTheme(); updateDarkThemeSwitch(); + updateMessagePriorities(); refreshSidebar(); + + categories = getStoredArray(MESSAGE_CATEGORIES); + if (categories.length === 0) { + getMessageCategories().then(function () { + updateMessageCategories(); + }); + } else { + updateMessageCategories(); + } }); /** @@ -220,3 +232,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 == '/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"); + + var div = $(document.createElement("div")); + div.addClass("form-check form-switch mb-0 ms-3"); + + var input = $(document.createElement("input")); + input.addClass("form-check-input mt-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 == '/messages') { + refresh(); + } + }); + div.append(input); + + var label = $(document.createElement("label")); + label.addClass("mb-0"); + 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 185801c3fb4..b78f5699e14 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 @@ -->
-
Message Priority Filters (critical messages are always shown)
-
-
-
Message Category Filters
-
-
Messages
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 d29518c380c..6b90f0ee9a5 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 @@ -75,9 +75,11 @@
    • +
    • General Preferences
      • +
    • @@ -94,6 +96,31 @@
      • +
      • +
    • Message Priorities
      • +
      • +
    • +
      + +
      + +
      +
      +
      • +
    • +
      + +
      + +
      +
      +
      • +
      • +
    • Message Categories
      • +
      • +
      +
      +
    • About