This is an automated email from the ASF dual-hosted git repository.
davsclaus pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel.git
The following commit(s) were added to refs/heads/main by this push:
new eabdcd6cf77a CAMEL-23807: inline route-diagram web component JS in dev
console HTML
eabdcd6cf77a is described below
commit eabdcd6cf77ad6d07578cb11cbb050ec409bd118
Author: Ravi <[email protected]>
AuthorDate: Mon Jun 22 00:05:40 2026 +0530
CAMEL-23807: inline route-diagram web component JS in dev console HTML
The route-diagram dev console referenced the web component JS via a
<script src="..."> tag, but that static resource path is not served
when running with --console only, causing a 404. The JS is now read
from the classpath at class-load time and inlined directly into the
HTML response. The web component also unwraps the dev console's nested
JSON format ({"route-structure": {...}}) when present.
Closes #24160
---
.../org/apache/camel/diagram/DiagramDevConsole.java | 19 +++++++++++++++++--
.../resources/camel/diagram/camel-route-diagram.js | 6 +++++-
.../apache/camel/diagram/DiagramDevConsoleTest.java | 3 ++-
3 files changed, 24 insertions(+), 4 deletions(-)
diff --git
a/components/camel-diagram/src/main/java/org/apache/camel/diagram/DiagramDevConsole.java
b/components/camel-diagram/src/main/java/org/apache/camel/diagram/DiagramDevConsole.java
index 165eaa63f300..b2b7391f531b 100644
---
a/components/camel-diagram/src/main/java/org/apache/camel/diagram/DiagramDevConsole.java
+++
b/components/camel-diagram/src/main/java/org/apache/camel/diagram/DiagramDevConsole.java
@@ -17,6 +17,9 @@
package org.apache.camel.diagram;
import java.awt.image.BufferedImage;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
import java.util.Map;
import java.util.StringJoiner;
@@ -205,13 +208,16 @@ public class DiagramDevConsole extends AbstractDevConsole
{
return root;
}
+ private static final String WEB_COMPONENT_JS = loadWebComponentJs();
+
private static String buildRouteWebComponentHtml(String filter, boolean
refresh) {
String f = filter == null ? "*" : filter;
String refreshAttr = refresh ? " refresh=\"5000\"" : "";
- // script path + route-structure src assume the dev console and static
resources share an origin
+ // inline the web component script: static resource serving is not
available when only the developer
+ // console is enabled (camel run --console). route-structure is a
sibling console on the same origin.
return "<html>\n"
+ " <head>\n"
- + " <script type=\"module\"
src=\"/camel/diagram/camel-route-diagram.js\"></script>\n"
+ + " <script type=\"module\">\n" + WEB_COMPONENT_JS + "\n
</script>\n"
+ " </head>\n"
+ " <body>\n"
+ String.format(" <camel-route-diagram
src=\"route-structure\" filter=\"%s\"%s></camel-route-diagram>%n",
@@ -220,6 +226,15 @@ public class DiagramDevConsole extends AbstractDevConsole {
+ "</html>\n";
}
+ private static String loadWebComponentJs() {
+ try (InputStream is = DiagramDevConsole.class.getResourceAsStream(
+ "/META-INF/resources/camel/diagram/camel-route-diagram.js")) {
+ return is != null ? new String(is.readAllBytes(),
StandardCharsets.UTF_8) : "";
+ } catch (IOException e) {
+ return "";
+ }
+ }
+
private static String escapeAttr(String s) {
return s.replace("&", "&").replace("<", "<").replace(">",
">").replace("\"", """);
}
diff --git
a/components/camel-diagram/src/main/resources/META-INF/resources/camel/diagram/camel-route-diagram.js
b/components/camel-diagram/src/main/resources/META-INF/resources/camel/diagram/camel-route-diagram.js
index 665887f27ca9..bf83d53f7d54 100644
---
a/components/camel-diagram/src/main/resources/META-INF/resources/camel/diagram/camel-route-diagram.js
+++
b/components/camel-diagram/src/main/resources/META-INF/resources/camel/diagram/camel-route-diagram.js
@@ -382,7 +382,11 @@ class CamelRouteDiagram extends HTMLElement {
this.#render();
return;
}
- const data = await res.json();
+ let data = await res.json();
+ // the dev console nests each console's payload under its id, e.g.
{"route-structure": {"routes": [...]}}
+ if (data && !Array.isArray(data.routes) &&
data['route-structure']) {
+ data = data['route-structure'];
+ }
if (!Array.isArray(data?.routes)) {
this.#error = 'Unexpected response: missing routes array';
this.#render();
diff --git
a/components/camel-diagram/src/test/java/org/apache/camel/diagram/DiagramDevConsoleTest.java
b/components/camel-diagram/src/test/java/org/apache/camel/diagram/DiagramDevConsoleTest.java
index 524bc0e10ffc..18ce8c25e205 100644
---
a/components/camel-diagram/src/test/java/org/apache/camel/diagram/DiagramDevConsoleTest.java
+++
b/components/camel-diagram/src/test/java/org/apache/camel/diagram/DiagramDevConsoleTest.java
@@ -72,7 +72,8 @@ class DiagramDevConsoleTest extends CamelTestSupport {
assertThat(text).contains("<html>");
assertThat(text).contains("<camel-route-diagram");
assertThat(text).contains("src=\"route-structure\"");
- assertThat(text).contains("camel-route-diagram.js");
+ assertThat(text).contains("customElements.define");
+ assertThat(text).doesNotContain("src=\"/camel/diagram/");
assertThat(text).doesNotContain("data:image/png;base64,");
}
