@@ -591,12 +591,12 @@ Errors
Component actions
{{#loggersDisabled}}
-
+
{{/loggersDisabled}}
-
+
{{#loggersDisabled}}
{{/loggersDisabled}}
-
+
diff --git a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/templates/deep-search-result-page-template.html b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/templates/deep-search-result-page-template.html
index e5146d8946e..f0fa4afdb02 100644
--- a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/templates/deep-search-result-page-template.html
+++ b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/templates/deep-search-result-page-template.html
@@ -44,19 +44,19 @@
diff --git a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/topology.html b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/topology.html
index 453485f01b6..a17cd638a0c 100644
--- a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/topology.html
+++ b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/topology.html
@@ -18,6 +18,7 @@
+
Storm UI
@@ -281,7 +282,7 @@
var uiUser = $("#ui-user");
getStatic("/templates/user-template.html", function(template) {
uiUser.append(Mustache.render($(template).filter("#user-template").html(),response));
- $('#ui-user [data-toggle="tooltip"]').tooltip();
+ $('#ui-user [data-bs-toggle="tooltip"]').tooltip();
});
var topologySummary = $("#topology-summary");
@@ -429,13 +430,13 @@
errorTime[i].title = "Elapsed Time Since Error: " + time;
}
}
- $('#topology-summary [data-toggle="tooltip"]').tooltip();
- $('#topology-stats [data-toggle="tooltip"]').tooltip();
- $('#spout-stats [data-toggle="tooltip"]').tooltip();
- $('#bolt-stats [data-toggle="tooltip"]').tooltip();
- $('#topology-configuration [data-toggle="tooltip"]').tooltip();
- $('#topology-actions [data-toggle="tooltip"]').tooltip();
- $('#topology-visualization [data-toggle="tooltip"]').tooltip();
+ $('#topology-summary [data-bs-toggle="tooltip"]').tooltip();
+ $('#topology-stats [data-bs-toggle="tooltip"]').tooltip();
+ $('#spout-stats [data-bs-toggle="tooltip"]').tooltip();
+ $('#bolt-stats [data-bs-toggle="tooltip"]').tooltip();
+ $('#topology-configuration [data-bs-toggle="tooltip"]').tooltip();
+ $('#topology-actions [data-bs-toggle="tooltip"]').tooltip();
+ $('#topology-visualization [data-bs-toggle="tooltip"]').tooltip();
var lagUrl = "/api/v1/topology/"+topologyId+"/lag";
$.getJSON(lagUrl,function(lagResponse,status,jqXHR) {
diff --git a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/visualize.html b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/visualize.html
index 52e1e5707b4..2a8dedf71a9 100644
--- a/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/visualize.html
+++ b/storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/visualize.html
@@ -17,6 +17,7 @@
limitations under the License.
-->
+
Topology Visualization
diff --git a/storm-webapp/src/main/webapp/css/style.css b/storm-webapp/src/main/webapp/css/style.css
index b8c5c618162..fb7cb130df4 100644
--- a/storm-webapp/src/main/webapp/css/style.css
+++ b/storm-webapp/src/main/webapp/css/style.css
@@ -39,18 +39,12 @@
width:5em;
}
-body,
-.dataTables_wrapper label,
-div.dataTables_info[role="status"],
-.btn-default
-{
- color: #6d6d6d;
-}
+/* Let Bootstrap 5 theme handle body/text/link colors via data-bs-theme */
table.dataTable thead th,
table.dataTable.no-footer
{
- border-color: #d5d5d5;
+ border-color: var(--bs-border-color);
}
.table > tbody > tr > td {
@@ -64,15 +58,7 @@ table.dataTable {
td {
border-bottom-style: solid;
border-bottom-width: 1px;
- border-color: #d5d5d5;
-}
-
-a {
- color: #0069d6;
-}
-
-a:hover {
- color: #0050a3;
+ border-color: var(--bs-border-color);
}
h1
@@ -82,7 +68,6 @@ h1
h2
{
- color: #404040;
font-weight: bold;
}
@@ -141,14 +126,14 @@ PRE.jsonFormatter-codeContainer {
}
div#visualization {
- color: #333;
+ color: var(--bs-body-color);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
div#visualization a, div#visualization a:visited {
- color: blue;
+ color: var(--bs-link-color);
}
div#visualization ul {
@@ -260,4 +245,55 @@ div#visualization summary {
.resource-guarantee-remaining-negative {
color: red;
font-weight: bold;
-}
\ No newline at end of file
+}
+
+/* --- Dark mode overrides for Storm-specific styles --- */
+/* Bootstrap 5 handles body, text, link, border, and heading colors
+ automatically via data-bs-theme="dark". Only Storm-specific components
+ need explicit dark mode overrides below. */
+
+/* DataTables uses :root.dark for its dark theme, but Bootstrap 5 uses
+ [data-bs-theme="dark"]. Bridge the two so DataTables respects BS5 dark mode. */
+[data-bs-theme="dark"] {
+ --dt-html-background: #212529;
+ --dt-row-background: #212529;
+ --dt-row-stripe-background: #2c3034;
+ --dt-column-ordering-background: rgba(255, 255, 255, 0.02);
+ --dt-foreground-color: #c9d1d9;
+ --dt-border-color: #30363d;
+}
+
+[data-bs-theme="dark"] table.dataTable thead .sorting_asc,
+[data-bs-theme="dark"] table.dataTable thead .sorting_desc {
+ background-color: rgba(56, 139, 253, 0.15);
+}
+
+[data-bs-theme="dark"] PRE.jsonFormatter-codeContainer .jsonFormatter-propertyName {
+ color: #ff7b72;
+}
+
+[data-bs-theme="dark"] PRE.jsonFormatter-codeContainer .jsonFormatter-string {
+ color: #7ee787;
+}
+
+[data-bs-theme="dark"] PRE.jsonFormatter-codeContainer .jsonFormatter-number {
+ color: #d2a8ff;
+}
+
+[data-bs-theme="dark"] PRE.jsonFormatter-codeContainer .jsonFormatter-objectBrace {
+ color: #7ee787;
+}
+
+[data-bs-theme="dark"] PRE.jsonFormatter-codeContainer .jsonFormatter-arrayBrace {
+ color: #79c0ff;
+}
+
+[data-bs-theme="dark"] div#visualization #streams_slideout_inner,
+[data-bs-theme="dark"] div#visualization #bolt_slideout_inner {
+ background: #2d5a1e;
+}
+
+#mynetwork {
+ background-color: var(--bs-body-bg, #fff);
+}
+
diff --git a/storm-webapp/src/main/webapp/js/flux-entry.js b/storm-webapp/src/main/webapp/js/flux-entry.js
index 01ca5fa7cd7..642dbe146b1 100644
--- a/storm-webapp/src/main/webapp/js/flux-entry.js
+++ b/storm-webapp/src/main/webapp/js/flux-entry.js
@@ -19,6 +19,10 @@
* Webpack entry point for the Flux topology viewer page (flux.html).
*/
+// --- CSS ---
+require('bootstrap/dist/css/bootstrap.min.css');
+require('../css/style.css');
+
// --- jQuery ---
var $ = require('jquery');
window.$ = $;
diff --git a/storm-webapp/src/main/webapp/js/main-entry.js b/storm-webapp/src/main/webapp/js/main-entry.js
index d4968c893a9..3ed49b0bb16 100644
--- a/storm-webapp/src/main/webapp/js/main-entry.js
+++ b/storm-webapp/src/main/webapp/js/main-entry.js
@@ -27,7 +27,7 @@
// --- CSS ---
require('bootstrap/dist/css/bootstrap.min.css');
require('datatables.net-dt/css/dataTables.dataTables.css');
-require('datatables.net-bs/css/dataTables.bootstrap.css');
+require('datatables.net-bs5/css/dataTables.bootstrap5.css');
require('../lib/jsonFormatter.css');
require('../css/style.css');
@@ -66,7 +66,7 @@ if (!$.type) {
// --- DataTables + Bootstrap 3 integration ---
require('datatables.net');
-require('datatables.net-bs');
+require('datatables.net-bs5');
// --- Mustache + jQuery integration ---
var Mustache = require('mustache');
@@ -120,9 +120,26 @@ require('../lib/jsonFormatter.js');
// --- npm libraries ---
require('typeahead.js');
-require('bootstrap');
var moment = require('moment');
window.moment = moment;
+// --- Bootstrap 5 (vanilla JS, no jQuery plugin) ---
+var bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');
+window.bootstrap = bootstrap;
+
+// --- Bootstrap 5 tooltip shim ---
+// The inline HTML scripts call $('[data-toggle="tooltip"]').tooltip() or
+// $('[data-bs-toggle="tooltip"]').tooltip(). Bootstrap 5 uses vanilla JS,
+// so we shim the jQuery .tooltip() method.
+$.fn.tooltip = $.fn.tooltip || function () {
+ return this.each(function () {
+ // Support both BS3 data-toggle and BS5 data-bs-toggle attributes
+ if (this.getAttribute('data-bs-toggle') === 'tooltip' ||
+ this.getAttribute('data-toggle') === 'tooltip') {
+ new bootstrap.Tooltip(this);
+ }
+ });
+};
+
// --- Custom Storm UI code ---
require('./script');
diff --git a/storm-webapp/src/main/webapp/js/script.js b/storm-webapp/src/main/webapp/js/script.js
index 1a2ba463206..cea402a67ae 100644
--- a/storm-webapp/src/main/webapp/js/script.js
+++ b/storm-webapp/src/main/webapp/js/script.js
@@ -15,8 +15,56 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+// --- Dark/light theme support ---
+// Uses document.cookie directly so it works before $.cookies shim is loaded
+// and also on pages that don't use the main entry point.
+(function() {
+ function getCookie(name) {
+ var match = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
+ return match ? decodeURIComponent(match[1]) : null;
+ }
+ function setCookie(name, value) {
+ var d = new Date();
+ d.setFullYear(d.getFullYear() + 1);
+ document.cookie = name + '=' + encodeURIComponent(value) + ';path=/;expires=' + d.toUTCString();
+ }
+ var saved = getCookie('stormTheme');
+ if (!saved) {
+ saved = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+ }
+ document.documentElement.setAttribute('data-bs-theme', saved);
+
+ window.toggleTheme = function() {
+ var current = document.documentElement.getAttribute('data-bs-theme') || 'light';
+ var next = (current === 'dark') ? 'light' : 'dark';
+ document.documentElement.setAttribute('data-bs-theme', next);
+ setCookie('stormTheme', next);
+ var btn = document.getElementById('theme-toggle-btn');
+ if (btn) {
+ btn.value = (next === 'dark') ? 'Light Mode' : 'Dark Mode';
+ }
+ };
+})();
+
+// Update the theme toggle button label whenever it appears in the DOM.
+// The button is rendered asynchronously by Mustache templates loaded via AJAX,
+// so we use a MutationObserver to catch it.
+function updateThemeButtonLabel() {
+ var current = document.documentElement.getAttribute('data-bs-theme') || 'light';
+ var btn = document.getElementById('theme-toggle-btn');
+ if (btn) {
+ btn.value = (current === 'dark') ? 'Light Mode' : 'Dark Mode';
+ }
+}
+
+(function() {
+ var observer = new MutationObserver(function() { updateThemeButtonLabel(); });
+ observer.observe(document.documentElement, { childList: true, subtree: true });
+})();
+
$(function () {
$(".js-only").show();
+ updateThemeButtonLabel();
});
//Add in custom sorting for some data types
@@ -191,7 +239,7 @@ function confirmAction(id, name, action, param, defaultParamValue, paramText, ac
}
$(function () {
- $('[data-toggle="tooltip"]').tooltip()
+ $('[data-bs-toggle="tooltip"]').tooltip()
})
function formatConfigData(data) {
@@ -222,9 +270,9 @@ function formatErrorTimeSecs(response){
function renderToggleSys(div) {
var sys = $.cookies.get("sys") || false;
if(sys) {
- div.append("");
+ div.append("");
} else {
- div.append("");
+ div.append("");
}
}
@@ -303,7 +351,7 @@ var formatComponents = function (row) {
var result = '';
Object.keys(row.componentNumTasks || {}).sort().forEach (function (component){
var numTasks = row.componentNumTasks[component];
- result += '';
result += component;
result += '' + numTasks + '';
@@ -377,7 +425,7 @@ var makeWorkerStatsTable = function (response, elId, parentId, type) {
if (type == 'display') {
// show a button to toggle the component row
- return '