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 27d0fd05c2 Added dark theme switch to last dropdown menu (#6352)
27d0fd05c2 is described below
commit 27d0fd05c2d9b2102886fc1103b6cc6287f47d99
Author: Dave Marion <[email protected]>
AuthorDate: Tue May 5 11:26:05 2026 -0400
Added dark theme switch to last dropdown menu (#6352)
Co-authored-by: Dom G. <[email protected]>
---
.../accumulo/monitor/resources/css/screen.css | 9 +----
.../accumulo/monitor/resources/js/compactions.js | 2 +-
.../accumulo/monitor/resources/js/coordinator.js | 2 +-
.../apache/accumulo/monitor/resources/js/navbar.js | 43 ++++++++++++++++++++++
.../accumulo/monitor/resources/js/overview.js | 2 +-
.../apache/accumulo/monitor/resources/js/scans.js | 2 +-
.../apache/accumulo/monitor/resources/js/server.js | 2 +-
.../apache/accumulo/monitor/templates/default.ftl | 10 ++++-
.../org/apache/accumulo/monitor/templates/ec.ftl | 2 +-
.../apache/accumulo/monitor/templates/navbar.ftl | 32 ++++++++++------
.../apache/accumulo/monitor/templates/tables.ftl | 2 +-
11 files changed, 80 insertions(+), 28 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 3b13a246ea..8a804cb566 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
@@ -116,7 +116,7 @@ table {
.table-bordered th,
.table-bordered td {
- border: 1px solid #ddd !important;
+ border: 1px solid light-dark(#ddd, #444) !important;
}
table.sortable {
@@ -170,16 +170,9 @@ tr.details td.details-control {
}
a {
- text-decoration: none;
- color: #0000ff;
line-height: 1.5em;
}
-a:hover {
- color: #004400;
- text-decoration: underline;
-}
-
a img {
border: 0px;
}
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/compactions.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/compactions.js
index 24041b2199..37ec085371 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/compactions.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/compactions.js
@@ -51,7 +51,7 @@ $(function () {
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
- data = '<a href="tservers?s=' + row.server + '">' + row.server +
'</a>';
+ data = '<a class="link-body-emphasis" href="tservers?s=' +
row.server + '">' + row.server + '</a>';
}
return data;
}
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js
index a20ae9786c..f2d51010a0 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js
@@ -87,7 +87,7 @@ $(function () {
"targets": 0,
"render": function (data, type, row) {
if (type === 'display') {
- data = '<a href="tables/' + row.tableId + '">' + row.tableName +
'</a>';
+ data = '<a class="link-body-emphasis" href="tables/' + row.tableId
+ '">' + row.tableName + '</a>';
}
return data;
}
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 ae78c821db..0ce1125bea 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
@@ -107,6 +107,8 @@ function updateServerNotifications(statusData) {
* Creates the initial sidebar
*/
$(function () {
+ setTheme();
+ updateDarkThemeSwitch();
refreshSidebar();
});
@@ -138,3 +140,44 @@ function refreshSideBarNotifications() {
updateServerNotifications(statusData);
}
+
+/**
+ * Set the theme based on the user
+ * preferences
+ */
+function setTheme() {
+ var setDarkMode = false;
+ var storedValue = localStorage.getItem("dark-theme-enabled");
+ if (storedValue === null) {
+ setDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ } else {
+ setDarkMode = storedValue === 'true';
+ }
+
+ if (setDarkMode === true) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark');
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', 'light');
+ }
+}
+
+/**
+ * Update the Dark Theme Switch in the Preference list
+ */
+function updateDarkThemeSwitch() {
+ var storageKey = "dark-theme-enabled";
+ var darkThemeSwitchElement = $('#darkThemeSwitch');
+ var savedValue = localStorage.getItem(storageKey);
+
+ if (savedValue === 'true') {
+ darkThemeSwitchElement.prop('checked', true);
+ } else {
+ darkThemeSwitchElement.prop('checked', false);
+ }
+
+ darkThemeSwitchElement.on("change", function () {
+ var enableDarkTheme = $(this).is(':checked');
+ localStorage.setItem(storageKey, enableDarkTheme);
+ document.documentElement.setAttribute('data-bs-theme', enableDarkTheme ?
'dark' : 'light');
+ });
+}
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
index 2251c84865..c35a963502 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
@@ -67,7 +67,7 @@ $(function () {
return data;
}
- return '<a href="' + sanitize(link) + '">' + sanitize(data) + '</a>';
+ return '<a class="link-body-emphasis" href="' + sanitize(link) +
'">' + sanitize(data) + '</a>';
}
},
{
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/scans.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/scans.js
index 053f3149e7..d7f69b0064 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/scans.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/scans.js
@@ -52,7 +52,7 @@ $(function () {
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
- data = '<a href="tservers?s=' + row.server + '">' + row.server +
'</a>';
+ data = '<a class="link-body-emphasis" href="tservers?s=' +
row.server + '">' + row.server + '</a>';
}
return data;
}
diff --git
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server.js
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server.js
index a87a620e57..8df7f32646 100644
---
a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server.js
+++
b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server.js
@@ -241,7 +241,7 @@ function initServerTables(serv) {
"type": "html",
"render": function (data, type, row) {
if (type === 'display') {
- data = `<a href="tables/${row.tableID}">${data}</a>`;
+ data = `<a class="link-body-emphasis"
href="tables/${row.tableID}">${data}</a>`;
}
return data;
}
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 454294dedb..d946c24e6a 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
@@ -24,13 +24,21 @@
<base href="${rootContext}"/>
<title>${title} - Accumulo ${version}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <!-- Set the saved theme before loading CSS to reduce light-mode flash on
reload -->
+ <script>
+ (function() {
+ if (localStorage.getItem('dark-theme-enabled') === 'true') {
+ document.documentElement.setAttribute('data-bs-theme', 'dark');
+ }
+ })();
+ </script>
<!-- external resources configurable by setting monitor.resources.external
-->
- <!-- make sure jquery is included first - other scripts depend on it -->
<#if externalResources?has_content>
<#list externalResources as val>
${val}
</#list>
<#else>
+ <!-- make sure jquery is included first - other scripts depend on it -->
<script src="resources/external/jquery/jquery-3.7.1.js"></script>
<script
src="resources/external/bootstrap/js/bootstrap.bundle.js"></script>
<script
src="resources/external/datatables/js/jquery.dataTables.js"></script>
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 e639a1247c..8bbcc916ea 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
@@ -31,7 +31,7 @@
<div class="d-flex justify-content-between align-items-center
mb-3">
<div>
<span class="table-caption">Running
Compactions</span>
- <a href="javascript:refreshRunningCompactions();">
+ <a class="link-body-emphasis"
href="javascript:refreshRunningCompactions();">
<span style="font-size: 1.5em; color: black;" class="bi
bi-arrow-repeat"></span>
</a>
</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 d2c2269991..6f07e4f8a4 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
@@ -39,11 +39,11 @@
<span id="statusNotification" class="icon-dot
normal"></span> Servers
</a>
<ul class="dropdown-menu">
- <li><a class="dropdown-item" href="manager"><span
id="managerStatusNotification" class="icon-dot
normal"></span> Manager Server </a></li>
- <li><a class="dropdown-item" href="tservers"><span
id="serverStatusNotification" class="icon-dot
normal"></span> Tablet Servers </a></li>
- <li><a class="dropdown-item" href="sservers"><span
id="sserverStatusNotification" class="icon-dot
normal"></span> Scan Servers </a></li>
- <li><a class="dropdown-item" href="compactors"><span
id="compactorStatusNotification" class="icon-dot
normal"></span> Compactors</a></li>
- <li><a class="dropdown-item" href="gc"><span
id="gcStatusNotification" class="icon-dot
normal"></span> Garbage collector </a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="manager"><span id="managerStatusNotification" class="icon-dot
normal"></span> Manager Server </a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="tservers"><span id="serverStatusNotification" class="icon-dot
normal"></span> Tablet Servers </a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="sservers"><span id="sserverStatusNotification" class="icon-dot
normal"></span> Scan Servers </a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="compactors"><span id="compactorStatusNotification" class="icon-dot
normal"></span> Compactors</a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="gc"><span id="gcStatusNotification" class="icon-dot
normal"></span> Garbage collector </a></li>
</ul>
</li>
<li>
@@ -54,10 +54,10 @@
Activity
</a>
<ul class="dropdown-menu col-xs-12"
aria-labelledby="navbarDropdown">
- <li><a class="dropdown-item"
href="bulkImports">Bulk Imports</a></li>
- <li><a class="dropdown-item" href="coordinator">Compaction
Overview</a></li>
- <li><a class="dropdown-item" href="ec">Compaction
Details</a></li>
- <li><a class="dropdown-item" href="scans">Scans</a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="bulkImports">Bulk Imports</a></li>
+ <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="scans">Scans</a></li>
</ul>
</li>
<li>
@@ -68,8 +68,8 @@
role="button" data-bs-toggle="dropdown"
aria-expanded="false">REST
</a>
<ul class="dropdown-menu dropdown-menu-end">
- <li><a class="dropdown-item" href="rest/xml">XML
Summary</a></li>
- <li><a class="dropdown-item" href="rest/json">JSON
Summary</a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="rest/xml">XML Summary</a></li>
+ <li><a class="link-body-emphasis dropdown-item"
href="rest/json">JSON Summary</a></li>
</ul>
</li>
<li class="dropdown">
@@ -78,6 +78,14 @@
<span style="font-size: 1.2em;" class="bi
bi-three-dots-vertical"></span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
+ <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>
+ </div>
+ </li>
<li>
<div class="dropdown-item d-flex justify-content-between
align-items-center">
<label class="mb-0"
for="autoRefreshSwitch">Auto-Refresh</label>
@@ -86,7 +94,7 @@
</div>
</div>
</li>
- <li><a class="dropdown-item" data-bs-toggle="modal"
href="#aboutModal">About</a></li>
+ <li><a class="link-body-emphasis dropdown-item"
data-bs-toggle="modal" href="#aboutModal">About</a></li>
</ul>
</li>
</ul>
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 8f481388cc..3fcc6fe398 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,7 @@
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
- data = '<a href="tables/' + row.tableId + '">' +
row.tableName + '</a>';
+ data = '<a class="link-body-emphasis" href="tables/' +
row.tableId + '">' + row.tableName + '</a>';
}
return data;
}
