Merge pull request #31674 from phillip-kruger/dev-ui-hotreload

Dev UI: added a way to react on hot reload

Author: geoand

extensions/resteasy-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-ui/resteasy-reactive/qwc-resteasy-reactive-card.js

@@ -1,10 +1,10 @@
-import { LitElement, html, css} from 'lit';
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
 import { pages } from 'resteasy-reactive-data';
 import { JsonRpc } from 'jsonrpc';
 import 'echarts-gauge-grade';
 import '@vaadin/icon';
 
-export class QwcResteasyReactiveCard extends LitElement {
+export class QwcResteasyReactiveCard extends QwcHotReloadElement {
     jsonRpc = new JsonRpc("RESTEasy Reactive");
 
     static styles = css`
@@ -43,7 +43,7 @@ export class QwcResteasyReactiveCard extends LitElement {
     render() {
 
         if(this._latestScores){
-            return html`<div class="graph" @click=${this._refresh}>
+            return html`<div class="graph" @click=${this.hotReload}>
                 <echarts-gauge-grade 
                             percentage="${this._latestScores.score}"
                             percentageFontSize="14"
@@ -61,7 +61,7 @@ export class QwcResteasyReactiveCard extends LitElement {
             </a>`;
     }
 
-    _refresh(){
+    hotReload(){
         this._latestScores = null;
         this.jsonRpc.getEndpointScores().then(endpointScores => {
             this._latestScores = endpointScores.result;

extensions/resteasy-reactive/quarkus-resteasy-reactive/deployment/src/main/resources/dev-ui/resteasy-reactive/qwc-resteasy-reactive-endpoint-scores.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css} from 'lit';
+import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
 import { JsonRpc } from 'jsonrpc';
 
 import '@vaadin/details';
@@ -9,7 +9,7 @@ import 'qui-badge';
 /**
  * This component shows the Rest Easy Reactive Endpoint scores
  */
-export class QwcResteasyReactiveEndpointScores extends LitElement {
+export class QwcResteasyReactiveEndpointScores extends QwcHotReloadElement {
     jsonRpc = new JsonRpc("RESTEasy Reactive");
 
     static styles = css`
@@ -89,7 +89,7 @@ export class QwcResteasyReactiveEndpointScores extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        this._refresh();
+        this.hotReload();
     }
 
     render() {
@@ -194,7 +194,8 @@ export class QwcResteasyReactiveEndpointScores extends LitElement {
         return level;
     }
 
-    _refresh(){
+    hotReload(){
+        this._latestScores = null;
         this.jsonRpc.getEndpointScores().then(endpointScores => {
             this._latestScores = endpointScores.result;
         });

extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java

@@ -78,6 +78,7 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("devui/", contextRoot + "/");
         // Quarkus Web Components
         internalImportMapBuildItem.add("qwc/", contextRoot + "qwc/");
+        internalImportMapBuildItem.add("qwc-hot-reload-element", contextRoot + "qwc/qwc-hot-reload-element.js");
         // Quarkus UI
         internalImportMapBuildItem.add("qui/", contextRoot + "qui/");
         internalImportMapBuildItem.add("qui-badge", contextRoot + "qui/qui-badge.js");
@@ -301,6 +302,7 @@ void loadAllBuildTimeTemplates(BuildProducer<StaticContentBuildItem> buildTimeCo
     @BuildStep(onlyIf = IsDevelopment.class)
     void createBuildTimeData(BuildProducer<BuildTimeConstBuildItem> buildTimeConstProducer,
             BuildProducer<ThemeVarsBuildItem> themeVarsProducer,
+            NonApplicationRootPathBuildItem nonApplicationRootPathBuildItem,
             ExtensionsBuildItem extensionsBuildItem,
             List<MenuPageBuildItem> menuPageBuildItems,
             List<DevServiceDescriptionBuildItem> devServiceDescriptions,
@@ -395,7 +397,9 @@ void createBuildTimeData(BuildProducer<BuildTimeConstBuildItem> buildTimeConstPr
         internalBuildTimeData.addBuildTimeData("footerTabs", footerTabs);
 
         // Add version info
+        String contextRoot = nonApplicationRootPathBuildItem.getNonApplicationRootPath() + DEV_UI + SLASH;
         Map<String, String> applicationInfo = new HashMap<>();
+        applicationInfo.put("contextRoot", contextRoot);
         applicationInfo.put("quarkusVersion", Version.getVersion());
         applicationInfo.put("applicationName", config.getOptionalValue("quarkus.application.name", String.class).orElse(""));
         applicationInfo.put("applicationVersion",

extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/logstream/LogStreamProcessor.java

@@ -39,7 +39,7 @@ public void handler(BuildProducer<StreamingLogHandlerBuildItem> streamingLogHand
 
     @BuildStep(onlyIf = IsDevelopment.class)
     JsonRPCProvidersBuildItem createJsonRPCService() {
-        return new JsonRPCProvidersBuildItem("DevUI", LogStreamJsonRPCService.class);
+        return new JsonRPCProvidersBuildItem("devui-logstream", LogStreamJsonRPCService.class);
     }
 
 }

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js

@@ -242,7 +242,7 @@ export class QwcHeader extends observeState(LitElement) {
     }
 
     _reload(e) {
-        console.log("TODO: Reload");
+        fetch(devuiState.applicationInfo.contextRoot);
     }
 }
 customElements.define('qwc-header', QwcHeader);

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-hot-reload-element.js

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { connectionState } from 'connection-state';
+export * from 'lit';
+
+/**
+ * This is an abstract component that monitor hot reload events
+ */
+class QwcHotReloadElement extends LitElement {
+    
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.connectionStateObserver = () => this._connectionStateChange();
+        connectionState.addObserver(this.connectionStateObserver);
+    }
+      
+    disconnectedCallback() {
+        connectionState.removeObserver(this.connectionStateObserver);
+        super.disconnectedCallback();
+    }
+
+    _connectionStateChange(){
+        if(connectionState.current.isConnected){
+            this.hotReload();
+        }
+    }
+
+    hotReload(){
+        throw new Error("Method 'hotReload()' must be implemented.");
+    }
+
+}
+
+export { QwcHotReloadElement };

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-server-log.js

@@ -16,7 +16,7 @@ import 'qui-badge';
 export class QwcServerLog extends LitElement {
 
     logControl = new LogController(this);
-    jsonRpc = new JsonRpc("DevUI", false);
+    jsonRpc = new JsonRpc("devui-logstream", false);
 
     static styles = css`
         .log {

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/state/devui-state.js

@@ -7,10 +7,7 @@ import { LitState } from 'lit-element-state';
 
 /**
  * This keeps track of the build time data of Dev UI
- * 
- * TODO: Find a way to abstract this so that any build time data can reuse this in an easy way
  * TODO: Import map needs to be reloaded too
- * TODO: Hot reload should trigger this too (not only ws connection drops)
  */
 class DevUIState extends LitState {