Upgrade vis.js to vis-network 10.0.2 and vis-data 8.0.3 in /storm-webapp; Fix Java 20 -> 21 in YAML files; Fix Frontend Plugin to use Node 24

Author: rzo1

.github/workflows/nightlies.yaml

@@ -40,11 +40,11 @@ jobs:
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
         with:
           python-version: '3.10'
-      - name: Set up JDK ${{ matrix.java }}
+      - name: Set up JDK 21
         uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0
         with:
           distribution: temurin
-          java-version: 20
+          java-version: 21
       - name: Ensure a clean state without storm artifacts
         run: rm -rf ~/.m2/repository/org/apache/storm
       - name: Set up project dependencies

.github/workflows/snapshots.yaml

@@ -40,11 +40,11 @@ jobs:
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
         with:
           python-version: '3.10'
-      - name: Set up JDK ${{ matrix.java }}
+      - name: Set up JDK 21
         uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0
         with:
           distribution: temurin
-          java-version: 20
+          java-version: 21
       - id: extract_version
         name: Extract project version
         shell: bash

.github/workflows/update-license-files.yml

@@ -42,11 +42,11 @@ jobs:
         with:
           python-version: '3.10'
 
-      - name: Set up JDK 17
+      - name: Set up JDK 21
         uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0
         with:
           distribution: temurin
-          java-version: 17
+          java-version: 21
 
       - name: Ensure clean state without storm artifacts
         run: rm -rf ~/.m2/repository/org/apache/storm

storm-webapp/package-lock.json

@@ -28,7 +28,8 @@
     "moment": "2.30.1",
     "mustache": "4.2.0",
     "typeahead.js": "0.11.1",
-    "vis": "4.21.0"
+    "vis-data": "8.0.3",
+    "vis-network": "10.0.2"
   },
   "devDependencies": {
     "css-loader": "^7.1.1",

storm-webapp/package.json

@@ -160,7 +160,7 @@
                 <artifactId>frontend-maven-plugin</artifactId>
                 <version>2.0.0</version>
                 <configuration>
-                    <nodeVersion>v20.18.0</nodeVersion>
+                    <nodeVersion>v24.14.1</nodeVersion>
                     <workingDirectory>${basedir}</workingDirectory>
                     <installDirectory>target</installDirectory>
                 </configuration>

storm-webapp/pom.xml

@@ -73,7 +73,7 @@
                         <details>
                             <summary>
                                 {{#:show_link}}
-                                    <a href="#" onclick="network.selectNodes(['{{:component}}']); handleNodeClickEvent('{{:component}}'); return false;">{{:component}}</a>
+                                    <a href="#" data-component="{{:component}}" class="component-link">{{:component}}</a>
                                 {{/:show_link}}
                                 {{^:show_link}}
                                     {{:component}}

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

@@ -16,6 +16,23 @@
  * limitations under the License.
  */
 
+function tooltipElement(lines) {
+    var container = document.createElement("div");
+    lines.forEach(function(line, i) {
+        if (line.bold) {
+            var b = document.createElement("b");
+            b.textContent = line.text;
+            container.appendChild(b);
+        } else {
+            container.appendChild(document.createTextNode(line.text));
+        }
+        if (i < lines.length - 1) {
+            container.appendChild(document.createElement("br"));
+        }
+    });
+    return container;
+}
+
 var visNS = {
     // Update / refresh setting
     shouldUpdate: true,
@@ -257,10 +274,12 @@ function parseNode(nodeJson, nodeId) {
         selectedCol = "#ffc180";
     }
 
-    // Generate title
-    var title = "<b>" + nodeId + "</b><br/>";
-    title += "Capacity: " + nodeJson[":capacity"] + "<br/>";
-    title += "Latency: " + nodeJson[":latency"]
+    // Generate title as DOM element (vis-network 10 does not render HTML strings)
+    var title = tooltipElement([
+        { text: nodeId, bold: true },
+        { text: "Capacity: " + nodeJson[":capacity"] },
+        { text: "Latency: " + nodeJson[":latency"] }
+    ])
 
     // Construct the node
     var node = {
@@ -317,7 +336,11 @@ function parseEdge(edgeJson, sourceId) {
             "from": edgeJson[":component"],
             "to": sourceId,
             "label": edgeJson[":stream"],
-            "title": "From: " + edgeJson[":component"] + "<br>To: " + sourceId + "<br>Grouping: " + edgeJson[":grouping"]
+            "title": tooltipElement([
+                { text: "From: " + edgeJson[":component"] },
+                { text: "To: " + sourceId },
+                { text: "Grouping: " + edgeJson[":grouping"] }
+            ])
         });
     }
 }
@@ -410,12 +433,22 @@ function asc_sort(a, b){
     return ($(b).text()) < ($(a).text()) ? 1 : -1;
 }
 
-// Expose for Cypress testing and inline script access
-window.visNS = visNS;
-window.checkStream = checkStream;
+// Expose for Cypress testing only
+if (window.Cypress) {
+    window.visNS = visNS;
+    window.checkStream = checkStream;
+}
 
 $(document).ready(function() {
     visNS.networkContainer = document.getElementById("mynetwork");
     update();
+
+    // Delegated handler replaces inline onclick on component links
+    $(document).on('click', '.component-link', function(e) {
+        e.preventDefault();
+        var comp = $(this).attr('data-component');
+        visNS.network.selectNodes([comp]);
+        handleNodeClickEvent(comp);
+    });
 });
 

storm-webapp/src/main/webapp/js/visualization.js

@@ -21,7 +21,7 @@
 
 // --- CSS ---
 require('bootstrap/dist/css/bootstrap.min.css');
-require('vis/dist/vis.min.css');
+require('vis-network/styles/vis-network.min.css');
 require('../css/style.css');
 
 // --- jQuery ---
@@ -52,8 +52,10 @@ $.url = function (param) {
   return u;
 };
 
-// --- vis.js ---
-var vis = require('vis');
+// --- vis-network + vis-data ---
+var vis = {};
+vis.Network = require('vis-network/peer').Network;
+vis.DataSet = require('vis-data/peer').DataSet;
 window.vis = vis;
 
 // --- Custom Storm visualization code ---