Dev UI make sure to work on custom http root

Signed-off-by: Phillip Kruger <[email protected]>
quarkusio · Apr 16, 2023 · e184046 · e184046
1 parent a4f329b
commit e184046
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 47 deletions.
diff --git a/bom/application/pom.xml b/bom/application/pom.xml
@@ -220,7 +220,7 @@
         <mime4j.version>0.8.9</mime4j.version>
         <mutiny-zero.version>1.0.0</mutiny-zero.version>
         <!-- Dev UI -->
-        <importmap.version>1.0.7</importmap.version>
+        <importmap.version>1.0.8</importmap.version>
         <vaadin.version>24.0.2</vaadin.version>
         <lit.version>2.7.2</lit.version>
         <lit-element.version>3.3.1</lit-element.version>

diff --git a/...nsions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js b/...nsions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js
@@ -1,16 +1,12 @@
 import { LitElement, html, css} from 'lit';
 import { JsonRpc } from 'jsonrpc';
-import { until } from 'lit/directives/until.js';
-import { observeState } from 'lit-element-state';
-import { themeState } from 'theme-state';
-import '@vanillawc/wc-codemirror';
-import '@vanillawc/wc-codemirror/mode/yaml/yaml.js';
+import 'qui-code-block';
 import '@vaadin/icon';
 import '@vaadin/tabs';
 import '@vaadin/tabsheet';
 import '@vaadin/progress-bar';
 
-export class QwcKubernetesManifest extends observeState(LitElement)  {
+export class QwcKubernetesManifest extends LitElement {
 
     jsonRpc = new JsonRpc(this);
 
@@ -101,13 +97,10 @@ export class QwcKubernetesManifest extends observeState(LitElement)  {
         let yaml = this._manifests.get(key);
 
         return html`<div class="codeBlock">
-                            <wc-codemirror mode='yaml'
-                                           theme='base16-${themeState.theme.name}'
-                                           readonly>
-                                <link rel="stylesheet"
-                                      href="/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css">
-                                <script type="wc-content">${yaml}</script>
-                            </wc-codemirror>
+                            <qui-code-block 
+                                mode='yaml'
+                                content='${yaml}'>
+                            </qui-code-block>
                         </div>`;
     }
 

diff --git a/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java b/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
@@ -69,6 +69,8 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("qui/", contextRoot + "qui/");
         internalImportMapBuildItem.add("qui-badge", contextRoot + "qui/qui-badge.js");
         internalImportMapBuildItem.add("qui-alert", contextRoot + "qui/qui-alert.js");
+        internalImportMapBuildItem.add("qui-code-block", contextRoot + "qui/qui-code-block.js");
+
         // Echarts
         internalImportMapBuildItem.add("echarts/", contextRoot + "echarts/");
         internalImportMapBuildItem.add("echarts-gauge-grade", contextRoot + "echarts/echarts-gauge-grade.js");
@@ -231,13 +233,15 @@ QuteTemplateBuildItem createIndexHtmlTemplate(
             Map<String, String> importMap = importMapBuildItem.getImportMap();
             aggregator.addMappings(importMap);
         }
-        String importmap = aggregator.aggregateAsJson();
+        String importmap = aggregator.aggregateAsJson(nonApplicationRootPathBuildItem.getNonApplicationRootPath());
         aggregator.reset();
 
         String themeVars = themeVarsBuildItem.getTemplateValue();
-        String contextRoot = nonApplicationRootPathBuildItem.getNonApplicationRootPath() + DEV_UI + SLASH;
+        String nonApplicationRoot = nonApplicationRootPathBuildItem.getNonApplicationRootPath();
+        String contextRoot = nonApplicationRoot + DEV_UI + SLASH;
 
         Map<String, Object> data = Map.of(
+                "nonApplicationRoot", nonApplicationRoot,
                 "contextRoot", contextRoot,
                 "importmap", importmap,
                 "themeVars", themeVars);

diff --git a/...sions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/DevUIProcessor.java b/...sions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/DevUIProcessor.java
@@ -193,15 +193,17 @@ void registerDevUiHandlers(
         }
 
         // Static mvnpm jars
-        routeProducer.produce(RouteBuildItem.builder()
-                .route("/_static" + SLASH_ALL)
-                .handler(recorder.mvnpmHandler(mvnpmBuildItem.getMvnpmJars()))
-                .build());
+        String contextRoot = nonApplicationRootPathBuildItem.getNonApplicationRootPath();
+        routeProducer.produce(
+                nonApplicationRootPathBuildItem.routeBuilder()
+                        .route("_static" + SLASH_ALL)
+                        .handler(recorder.mvnpmHandler(contextRoot, mvnpmBuildItem.getMvnpmJars()))
+                        .build());
 
         // Redirect /q/dev -> /q/dev-ui
-        routeProducer.produce(RouteBuildItem.builder()
-                .route("/q/dev")
-                .handler(recorder.redirect())
+        routeProducer.produce(nonApplicationRootPathBuildItem.routeBuilder()
+                .route("dev")
+                .handler(recorder.redirect(contextRoot))
                 .build());
     }
 

diff --git a/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui-templates/build-time/index.html b/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui-templates/build-time/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="shortcut icon" type="image/png" href="{contextRoot}favicon.ico">
 
-        <script async src="/_static/es-module-shims/dist/es-module-shims.js"></script>
+        <script async src="{nonApplicationRoot}_static/es-module-shims/dist/es-module-shims.js"></script>
 
         <script type="importmap">
             {importmap}

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js
@@ -0,0 +1,50 @@
+import {LitElement, html, css} from 'lit';
+
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@vanillawc/wc-codemirror';
+import '@vanillawc/wc-codemirror/mode/yaml/yaml.js';
+import '@vanillawc/wc-codemirror/mode/properties/properties.js';
+import '@vanillawc/wc-codemirror/mode/javascript/javascript.js';
+
+export class QuiCodeBlock extends observeState(LitElement) {
+
+    static styles = css``;
+
+    static properties = {
+        mode: {type: String}, // yaml / js / etc
+        src: {type: String}, // src (optional)
+        content: {type: String} // content (optional)
+    };
+
+    constructor() {
+        super();
+        this.mode = null;
+        this.src = null;
+        this.content = null;
+    }
+
+    render() {
+        let currentPath = window.location.pathname;
+        currentPath = currentPath.substring(0, currentPath.indexOf('/dev'));
+
+        if(this.src){
+            return html`<wc-codemirror mode='${this.mode}'
+                                    src='${this.src}'
+                                    theme='base16-${themeState.theme.name}'
+                                    readonly>
+                            <link rel='stylesheet' href='${currentPath}/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css'>
+                        </wc-codemirror>`;
+        }else if(this.content){
+            return html`<wc-codemirror mode='${this.mode}'
+                                    theme='base16-${themeState.theme.name}'
+                                    readonly>
+                            <link rel='stylesheet' href='${currentPath}/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css'>
+                            <script type='wc-content'>${this.content}</script>
+                        </wc-codemirror>`;
+        }
+    }
+
+}
+
+customElements.define('qui-code-block', QuiCodeBlock);
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
@@ -2,6 +2,7 @@ import {LitElement, html, css} from 'lit';
 import {devServices} from 'devui-data';
 import '@vaadin/vertical-layout';
 import '@vaadin/icon';
+import 'qui-code-block';
 
 /**
  * This component shows the Dev Services Page
@@ -87,7 +88,7 @@ export class QwcDevServices extends LitElement {
                     <span>You do not have any Dev Services running.</span>
                     <a href="https://quarkus.io/guides/dev-services" target="_blank">Read more about Dev Services</a>
                 </p>
-            `
+            `;
         }
     }
 
@@ -121,7 +122,10 @@ export class QwcDevServices extends LitElement {
             let properties = ''.concat(...list);
             return html`<span class="configHeader">Config:</span>
                         <div class="config">
-                            <pre><code>${properties.trim()}</code></pre>
+                            <qui-code-block 
+                                mode='properties'
+                                content='${properties.trim()}'>
+                            </qui-code-block>
                         </div>`;
         }
     }

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js
@@ -1,18 +1,13 @@
 import { LitElement, html, css} from 'lit';
-import { until } from 'lit/directives/until.js';
 import { RouterController } from 'router-controller';
-import { observeState } from 'lit-element-state';
-import { themeState } from 'theme-state';
-import '@vanillawc/wc-codemirror';
-import '@vanillawc/wc-codemirror/mode/yaml/yaml.js';
-import '@vanillawc/wc-codemirror/mode/properties/properties.js';
-import '@vanillawc/wc-codemirror/mode/javascript/javascript.js';
 import '@vaadin/icon';
+import 'qui-code-block';
+import '@vaadin/progress-bar';
 
 /**
  * This component loads an external page
  */
-export class QwcExternalPage extends observeState(LitElement)  {
+export class QwcExternalPage extends LitElement {
     routerController = new RouterController(this);
 
     static styles = css`
@@ -52,7 +47,15 @@ export class QwcExternalPage extends observeState(LitElement)  {
     }
 
     render() {
-        return html`${until(this._loadExternal(), html`<span>Loading with ${themeState.theme.name} theme</span>`)}`;
+        if(this._mode){
+            return this._loadExternal();
+        }else {
+            return html`
+                <div style="color: var(--lumo-secondary-text-color);width: 95%;" >
+                    <div>Loading content...</div>
+                    <vaadin-progress-bar indeterminate></vaadin-progress-bar>
+                </div>`;
+        }
     }
 
     _autoDetectMimeType(){
@@ -89,17 +92,17 @@ export class QwcExternalPage extends observeState(LitElement)  {
                                 height='100%'>
                             </object>`;
             } else {
+                let currentPath = window.location.pathname;
+                currentPath = currentPath.substring(0, currentPath.indexOf('/dev'));
                 return html`<div class="codeBlock">
                             <span class="download" @click="${this._download}">
                                 <vaadin-icon class="icon" icon="font-awesome-solid:download"></vaadin-icon>
                                 Download
                             </span>
-                            <wc-codemirror mode='${this._mode}'
-                                        src='${this._externalUrl}'
-                                        theme='base16-${themeState.theme.name}'
-                                        readonly>
-                                <link rel="stylesheet" href="/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css">
-                            </wc-codemirror>
+                            <qui-code-block 
+                                mode='${this._mode}'
+                                src='${this._externalUrl}'>
+                            </qui-code-block>
                         </div>
                         `;
             }

diff --git a/extensions/vertx-http/runtime/src/main/java/io/quarkus/devui/runtime/DevUIRecorder.java b/extensions/vertx-http/runtime/src/main/java/io/quarkus/devui/runtime/DevUIRecorder.java
@@ -90,16 +90,16 @@ public Handler<RoutingContext> vaadinRouterHandler(String basePath) {
         return new VaadinRouterHandler(basePath);
     }
 
-    public Handler<RoutingContext> mvnpmHandler(Set<URL> mvnpmJarFiles) {
-        return new MvnpmHandler(mvnpmJarFiles);
+    public Handler<RoutingContext> mvnpmHandler(String root, Set<URL> mvnpmJarFiles) {
+        return new MvnpmHandler(root, mvnpmJarFiles);
     }
 
-    public Handler<RoutingContext> redirect() {
+    public Handler<RoutingContext> redirect(String contextRoot) {
         return new Handler<RoutingContext>() {
             @Override
             public void handle(RoutingContext rc) {
                 // 308 because we also want to redirect other HTTP Methods (and not only GET).
-                rc.response().putHeader("Location", "/q/dev-ui").setStatusCode(308).end();
+                rc.response().putHeader("Location", contextRoot + "dev-ui").setStatusCode(308).end();
             }
         };
     }

diff --git a/extensions/vertx-http/runtime/src/main/java/io/quarkus/devui/runtime/MvnpmHandler.java b/extensions/vertx-http/runtime/src/main/java/io/quarkus/devui/runtime/MvnpmHandler.java
@@ -18,15 +18,17 @@
 public class MvnpmHandler implements Handler<RoutingContext> {
 
     private final URLClassLoader mvnpmLoader;
+    private final String root;
 
-    public MvnpmHandler(Set<URL> mvnpmJars) {
+    public MvnpmHandler(String root, Set<URL> mvnpmJars) {
+        this.root = root;
         this.mvnpmLoader = new URLClassLoader(mvnpmJars.toArray(new URL[] {}));
     }
 
     @Override
     public void handle(RoutingContext event) {
+        String fullPath = event.normalizedPath().replaceFirst(root, SLASH);
         // Find the "filename" and see if it has a file extension
-        String fullPath = event.normalizedPath();
         String parts[] = fullPath.split(SLASH);
         String fileName = parts[parts.length - 1];