Merge pull request #43841 from phillip-kruger/dev-ui-better-reconnect

Dev UI better reconnect
quarkusio · Oct 14, 2024 · 8d1764e · 8d1764e
2 parents 54a9fef + 76557c7
commit 8d1764e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/jsonrpc.js
@@ -83,7 +83,9 @@ export class JsonRpc {
     static messageCounter = 0;
     static webSocket;
     static serverUri;
-
+    static retryCount = 0;
+    static maxRetries = 10;
+
     _extensionName;
     _logTraffic;
 
@@ -241,6 +243,8 @@ export class JsonRpc {
 
             JsonRpc.webSocket.onopen = function (event) {
                 connectionState.connected(JsonRpc.serverUri);
+                JsonRpc.retryCount = 0;
+                JsonRpc.maxRetries = 10;
                 JsonRpc.dispatchMessageLogEntry(Level.Info, MessageDirection.Stationary, "Connected to " + JsonRpc.serverUri);
                 while (JsonRpc.initQueue.length > 0) {
                     JsonRpc.webSocket.send(JsonRpc.initQueue.pop());
@@ -314,9 +318,15 @@ export class JsonRpc {
         JsonRpc.webSocket.onclose = function (event) {
             connectionState.disconnected(JsonRpc.serverUri);
             JsonRpc.dispatchMessageLogEntry(Level.Warning, MessageDirection.Stationary, "Closed connection to " + JsonRpc.serverUri);
-            setTimeout(function () {
-                JsonRpc.connect();
-            }, 100);
+            if (JsonRpc.retryCount < JsonRpc.maxRetries) {
+                JsonRpc.reconnect();
+            }else{
+                // Dispatch a custom event when the maximum retries have been reached
+                const event = new CustomEvent('max-retries-reached', {
+                    detail: { message: "Failed to reconnect after multiple attempts." }
+                });
+                document.dispatchEvent(event);
+            }
         };
 
         JsonRpc.webSocket.onerror = function (error) {
@@ -346,4 +356,12 @@ export class JsonRpc {
             JsonRpc.dispatchMessageLogEntry(Level.Info, MessageDirection.Down, jsonrpcpayload);
         }
     }
+
+    static reconnect() {
+        const delay = Math.min(1000 * Math.pow(1.5, JsonRpc.retryCount), 5000); // Exponential backoff with max 5 seconds delay
+        setTimeout(() => {
+            JsonRpc.connect();
+            JsonRpc.retryCount++;
+        }, delay);
+    }
 }
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js
@@ -1,10 +1,12 @@
 import { LitElement, html, css } from 'lit';
 import { RouterController } from 'router-controller';
-import { notifier } from 'notifier';
 import { observeState } from 'lit-element-state';
 import { themeState } from 'theme-state';
+import { connectionState } from 'connection-state';
 import { devuiState } from 'devui-state';
+import { JsonRpc } from 'jsonrpc';
 import '@vaadin/tabs';
+import '@vaadin/confirm-dialog';
 import 'qwc/qwc-extension-link.js';
 import './qwc-theme-switch.js';
 /**
@@ -92,18 +94,24 @@ export class QwcHeader extends observeState(LitElement) {
     static properties = {
         _title: {state: true},
         _subTitle: {state: true},
-        _rightSideNav: {state: true}
+        _rightSideNav: {state: true},
+        _dialogOpened: {state: true},
     };
 
     constructor() {
         super();
+        this._dialogOpened = false;
         this._title = "Extensions";
         this._subTitle = null;
         this._rightSideNav = "";
 
         window.addEventListener('vaadin-router-location-changed', (event) => {
             this._updateHeader(event);
         });
+        document.addEventListener('max-retries-reached', (event) => {
+            this._dialogOpened = true;
+            this.requestUpdate();
+        });
     }
 
     connectedCallback() {
@@ -118,8 +126,27 @@ export class QwcHeader extends observeState(LitElement) {
                 ${this._renderRightSideNav()}
                 ${this._renderThemeOptions()}
             </div>
-        </div>
-        `;
+            ${this._renderReconnectPopup()}
+        </div>`;
+    }
+
+    _renderReconnectPopup(){
+        if(!connectionState.current.isConnected){
+            return html`
+            <vaadin-confirm-dialog
+                header="Server unreachable"
+                confirm-text="Retry"
+                .opened="${this._dialogOpened}"
+                @opened-changed="${this._openedChanged}"
+                @confirm="${() => {
+                    JsonRpc.connect();
+                    this.requestUpdate();
+                }}"
+            >
+                It looks like the application is currently unavailable. After several reconnection attempts, we’re unable to connect.
+                Once the application is back online, click “Retry” to reconnect.
+            </vaadin-confirm-dialog>`;
+        }
     }
 
     _renderLogoAndTitle(){
@@ -218,8 +245,12 @@ export class QwcHeader extends observeState(LitElement) {
         })
         .catch(error => {
             this.routerController.goHome();
-            notifier.showErrorMessage("Seems like your server is not available.  <br/>Error : <code>" + error + "</code>","middle");
+            this._dialogOpened = true;
         });
     }
+
+    _openedChanged(e) {
+        this._dialogOpened = e.detail.value;
+    }
 }
 customElements.define('qwc-header', QwcHeader);
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/state/connection-state.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/state/connection-state.js
@@ -27,6 +27,7 @@ class ConnectionState extends LitState {
         newState.isConnecting = false;
         newState.isHotreloading = false;
         connectionState.current = newState;
+        document.body.style.cursor = 'wait';
     }
 
     connecting(serverUri){
@@ -41,6 +42,7 @@ class ConnectionState extends LitState {
         newState.isConnecting = true;
         newState.isHotreloading = false;
         connectionState.current = newState;
+        document.body.style.cursor = 'progress';
     }
 
     hotreload(serverUri){
@@ -55,6 +57,7 @@ class ConnectionState extends LitState {
         newState.isConnecting = false;
         newState.isHotreloading = true;
         connectionState.current = newState;
+        document.body.style.cursor = 'progress'; 
     }
 
     connected(serverUri){
@@ -69,6 +72,7 @@ class ConnectionState extends LitState {
         newState.isConnecting = false;
         newState.isHotreloading = false;
         connectionState.current = newState;
+        document.body.style.cursor = 'default';
     }
 }