Upgrade Bootstrap to 5.3.8, add dark mode toggle

.gitignore

@@ -68,3 +68,4 @@ install-shade.txt
 # Frontend build (storm-webapp)
 node_modules/
 storm-webapp/node/
+tmp

LICENSE-binary

@@ -522,10 +522,10 @@ THE SOFTWARE.
 
 -----------------------------------------------------------------------
 
-For Bootstrap 3.3.1 (bundled via npm package "bootstrap" into storm-webapp webpack output)
+For Bootstrap 5.3.8 (bundled via npm package "bootstrap" into storm-webapp webpack output)
 
-Bootstrap v3.3.1 (http://getbootstrap.com)
-Copyright 2011-2014 Twitter, Inc.
+Bootstrap v5.3.8 (https://getbootstrap.com)
+Copyright 2011-2025 The Bootstrap Authors.
 Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 
 -----------------------------------------------------------------------

storm-webapp/cypress/e2e/dark-theme.cy.js

@@ -0,0 +1,110 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+describe('Storm UI - Dark Theme', () => {
+
+  it('applies light theme when cookie is set to light', () => {
+    cy.setCookie('stormTheme', 'light');
+    cy.visit('/');
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'light');
+  });
+
+  it('applies dark theme when cookie is set to dark', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/');
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+  });
+
+  it('dark theme gives body a dark background color', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/');
+    cy.get('body').should(($body) => {
+      const bg = window.getComputedStyle($body[0]).backgroundColor;
+      // Bootstrap 5.3 dark theme uses #212529 = rgb(33, 37, 41)
+      expect(bg).to.equal('rgb(33, 37, 41)');
+    });
+  });
+
+  it('light theme gives body a white/light background color', () => {
+    cy.setCookie('stormTheme', 'light');
+    cy.visit('/');
+    cy.get('body').should(($body) => {
+      const bg = window.getComputedStyle($body[0]).backgroundColor;
+      // Bootstrap 5.3 light theme uses #fff = rgb(255, 255, 255)
+      expect(bg).to.equal('rgb(255, 255, 255)');
+    });
+  });
+
+  it('toggle button switches theme from light to dark', () => {
+    cy.setCookie('stormTheme', 'light');
+    cy.visit('/');
+    cy.get('#theme-toggle-btn', { timeout: 5000 })
+      .should('have.value', 'Dark Mode');
+
+    cy.get('#theme-toggle-btn').click();
+
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+    cy.get('#theme-toggle-btn').should('have.value', 'Light Mode');
+  });
+
+  it('toggle button switches theme from dark to light', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/');
+    // Wait for the user template to render and the label to be updated
+    cy.get('#theme-toggle-btn', { timeout: 5000 }).should('exist');
+    // The $(function(){}) handler updates the label after template render
+    cy.wait(500);
+    cy.get('#theme-toggle-btn').should('have.value', 'Light Mode');
+
+    cy.get('#theme-toggle-btn').click();
+
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'light');
+    cy.get('#theme-toggle-btn').should('have.value', 'Dark Mode');
+  });
+
+  it('persists theme preference across page loads', () => {
+    cy.setCookie('stormTheme', 'light');
+    cy.visit('/');
+    cy.get('#theme-toggle-btn', { timeout: 5000 }).click(); // → dark
+
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+
+    cy.reload();
+
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+  });
+
+  it('dark theme works on topology page', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/topology.html?id=word-count-1-1234567890');
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+  });
+
+  it('dark theme works on visualize page', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/visualize.html?id=word-count-1-1234567890&sys=false');
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+  });
+});

storm-webapp/cypress/e2e/flux-page.cy.js

@@ -62,3 +62,16 @@ describe('Storm UI - Flux Viewer Page', () => {
     cy.get('#cy canvas').should('exist');
   });
 });
+
+describe('Storm UI - Flux Viewer (Dark Mode)', () => {
+  it('respects dark theme from cookie', () => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.visit('/flux.html');
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+    cy.get('body').should(($body) => {
+      const bg = window.getComputedStyle($body[0]).backgroundColor;
+      expect(bg).to.equal('rgb(33, 37, 41)');
+    });
+  });
+});

storm-webapp/cypress/e2e/visualize-page.cy.js

@@ -62,3 +62,50 @@ describe('Storm UI - Topology Visualization Page', () => {
     });
   });
 });
+
+describe('Storm UI - Topology Visualization (Dark Mode)', () => {
+  beforeEach(() => {
+    cy.setCookie('stormTheme', 'dark');
+    cy.intercept('GET', '/api/v1/topology/*/visualization*').as('vizApi');
+    cy.visit('/visualize.html?id=word-count-1-1234567890&sys=true');
+    cy.wait('@vizApi');
+  });
+
+  it('applies dark theme to the page', () => {
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+  });
+
+  it('gives the network container a dark background', () => {
+    cy.get('#mynetwork').should(($el) => {
+      const bg = window.getComputedStyle($el[0]).backgroundColor;
+      expect(bg).to.equal('rgb(33, 37, 41)');
+    });
+  });
+
+  it('renders nodes and streams in dark mode without errors', () => {
+    cy.window().then((win) => {
+      expect(win.visNS).to.exist;
+      expect(win.visNS.nodes.length).to.be.greaterThan(0);
+    });
+    cy.get('#available-streams li', { timeout: 5000 })
+      .should('have.length.greaterThan', 0);
+  });
+
+  it('switching to light mode gives network container a light background', () => {
+    // Start in dark mode (from beforeEach), then switch to light
+    cy.document().its('documentElement')
+      .should('have.attr', 'data-bs-theme', 'dark');
+
+    // Simulate theme toggle by setting the attribute directly
+    cy.document().then((doc) => {
+      doc.documentElement.setAttribute('data-bs-theme', 'light');
+    });
+
+    cy.get('#mynetwork').should(($el) => {
+      const bg = window.getComputedStyle($el[0]).backgroundColor;
+      // Must be white (light mode), NOT dark
+      expect(bg).to.equal('rgb(255, 255, 255)');
+    });
+  });
+});

storm-webapp/package.json

@@ -12,12 +12,12 @@
     "test:e2e": "start-server-and-test test:server http://localhost:3088 cypress:run"
   },
   "dependencies": {
-    "bootstrap": "3.3.1",
+    "bootstrap": "5.3.8",
     "cytoscape": "3.33.1",
     "cytoscape-dagre": "2.5.0",
     "dagre": "0.8.5",
     "datatables.net": "2.3.7",
-    "datatables.net-bs": "2.3.7",
+    "datatables.net-bs5": "2.3.7",
     "datatables.net-dt": "2.3.7",
     "domurl": "2.3.4",
     "esprima": "4.0.1",

storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/component.html

@@ -17,6 +17,7 @@
 -->
 <html><head>
 <meta charset="UTF-8">
+<script>!function(){var m=document.cookie.match(/(?:^|;\s*)stormTheme=([^;]*)/);var t=m?decodeURIComponent(m[1]):null;if(!t)t=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.setAttribute("data-bs-theme",t)}()</script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Storm UI</title>
 <link href="/dist/main.bundle.css?_ts=${packageTimestamp}" rel="stylesheet" type="text/css">
@@ -189,7 +190,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 topologyUrl = "/api/v1/topology/"+topologyId;
@@ -357,13 +358,13 @@
                   errorCells[i].style.whiteSpace = "pre";
                 }
             });
-            $('#component-summary [data-toggle="tooltip"]').tooltip();
-            $('#component-actions [data-toggle="tooltip"]').tooltip();
-            $('#component-stats-detail [data-toggle="tooltip"]').tooltip();
-            $('#component-input-stats [data-toggle="tooltip"]').tooltip();
-            $('#component-output-stats [data-toggle="tooltip"]').tooltip();
-            $('#component-executor-stats [data-toggle="tooltip"]').tooltip();
-            $('#component-errors [data-toggle="tooltip"]').tooltip();
+            $('#component-summary [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-actions [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-stats-detail [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-input-stats [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-output-stats [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-executor-stats [data-bs-toggle="tooltip"]').tooltip();
+            $('#component-errors [data-bs-toggle="tooltip"]').tooltip();
         });
     });
 });

storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/deep_search_result.html

@@ -16,6 +16,7 @@
      limitations under the License.
     -->
 <meta charset="UTF-8">
+<script>!function(){var m=document.cookie.match(/(?:^|;\s*)stormTheme=([^;]*)/);var t=m?decodeURIComponent(m[1]):null;if(!t)t=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.setAttribute("data-bs-theme",t)}()</script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Storm UI</title>
 <link href="/dist/main.bundle.css?_ts=${packageTimestamp}" rel="stylesheet" type="text/css">
@@ -100,7 +101,7 @@
                   displayKey: 'value',
                   source: findIds
                 });
-                $('#search-form [data-toggle="tooltip"]').tooltip();
+                $('#search-form [data-bs-toggle="tooltip"]').tooltip();
             });
         });
 

storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/flux.html

@@ -17,6 +17,7 @@
      limitations under the License.
     -->
 <meta charset="UTF-8">
+<script>!function(){var m=document.cookie.match(/(?:^|;\s*)stormTheme=([^;]*)/);var t=m?decodeURIComponent(m[1]):null;if(!t)t=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.setAttribute("data-bs-theme",t)}()</script>
     <title>Storm Flux Viewer</title>
     <style>
       body {
@@ -26,16 +27,19 @@
 
       textarea {
         font-size: 16px;
+        background-color: var(--bs-body-bg);
+        color: var(--bs-body-color);
       }
 
       .cy {
         width: 49%;
         height: 80%;
         z-index: 999;
         float: left;
-	border: 1px solid black;
+        border: 1px solid var(--bs-border-color);
       }
     </style>
+    <link href="/dist/flux.bundle.css?_ts=${packageTimestamp}" rel="stylesheet" type="text/css">
     <script src="/dist/flux.bundle.js?_ts=${packageTimestamp}"></script>
     <script type="text/javascript">
       function toCytoscapeGraph(doc) {