Merge pull request #32518 from phillip-kruger/devui-small-enchancements

Devui small enchancements
quarkusio · Apr 11, 2023 · c08be93 · c08be93
2 parents 8d5b024 + 7468a62
commit c08be93
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 42 deletions.
diff --git a/extensions/scheduler/deployment/src/main/resources/dev-ui/qwc-scheduler-log.js b/extensions/scheduler/deployment/src/main/resources/dev-ui/qwc-scheduler-log.js
@@ -43,7 +43,7 @@ export class QwcSchedulerLog extends LitElement {
                     this._clearLog();
                 }).addFollow("Follow log", true , (e) => {
                     this._toggleFollowLog(e);
-                });
+                }).done();
         this._logEntries = [];
         this._zoom = parseFloat(1.0);
         this._increment = parseFloat(0.05);

diff --git a/...nsions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/log-controller.js b/...nsions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/log-controller.js
@@ -3,7 +3,8 @@
  */
 export class LogController {
     static _controllers = new Map();
-
+    static listener;
+
     host;
     tab;
     items = [];
@@ -51,8 +52,12 @@ export class LogController {
         return this;
     }
 
+    done(){
+        LogController.listener.loaded();
+    }
+
     _createItem(icon, title, color) {
-        var style = `font-size: x-small;cursor: pointer;color: ${color};`;
+        var style = `font-size: small;cursor: pointer;color: ${color};`;
         const item = document.createElement('vaadin-context-menu-item');
         const vaadinicon = document.createElement('vaadin-icon');
         item.setAttribute('aria-label', `${title}`);
@@ -83,6 +88,10 @@ export class LogController {
         return this._createItem(icon,title,color);
     }
 
+    static addListener(listener){
+        LogController.listener = listener;
+    }
+
     static getItemsForTab(tabName){
 
         if(LogController._controllers.has(tabName)){
@@ -94,32 +103,33 @@ export class LogController {
 
     static fireCallback(e){
         if(e.detail.value.isToggle){
-            if(e.detail.value.component.firstChild.icon.endsWith('-on')){
+            let iconComponent = e.detail.value.component.firstChild.firstChild;
+
+            if(iconComponent.icon.endsWith('-on')){
                 // switching off
-                e.detail.value.component.firstChild.icon = "font-awesome-solid:toggle-off";
-                e.detail.value.component.firstChild.style.color = "var(--lumo-tertiary-text-color)";
+                iconComponent.icon = "font-awesome-solid:toggle-off";
+                iconComponent.style.color = "var(--lumo-tertiary-text-color)";
                 e.detail.value.callback(false);
-            }else if(e.detail.value.component.firstChild.icon.endsWith('-off')){
+            }else if(iconComponent.icon.endsWith('-off')){
                 // switching on
-                e.detail.value.component.firstChild.icon = "font-awesome-solid:toggle-on";
-                e.detail.value.component.firstChild.style.color = "var(--lumo-primary-color)";
+                iconComponent.icon = "font-awesome-solid:toggle-on";
+                iconComponent.style.color = "var(--lumo-primary-color)";
                 e.detail.value.callback(true); 
-            }else if(e.detail.value.component.firstChild.icon.endsWith('circle-dot')){
+            }else if(iconComponent.icon.endsWith('circle-dot')){
                 // switching off
-                e.detail.value.component.firstChild.icon = "font-awesome-regular:circle";
-                e.detail.value.component.firstChild.style.color = "var(--lumo-tertiary-text-color)";
+                iconComponent.icon = "font-awesome-regular:circle";
+                iconComponent.style.color = "var(--lumo-tertiary-text-color)";
                 e.detail.value.callback(false);
-            }else if(e.detail.value.component.firstChild.icon.endsWith('circle')){
+            }else if(iconComponent.icon.endsWith('circle')){
                 // switching on
-                e.detail.value.component.firstChild.icon = "font-awesome-regular:circle-dot";
-                e.detail.value.component.firstChild.style.color = "var(--lumo-success-color)";
+                iconComponent.icon = "font-awesome-regular:circle-dot";
+                iconComponent.style.color = "var(--lumo-success-color)";
                 e.detail.value.callback(true); 
             }
 
         }else{
             e.detail.value.callback(e); 
         }
 
-
     }
 }
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-footer.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-footer.js
@@ -22,7 +22,7 @@ export class QwcFooter extends observeState(LitElement) {
     
         vaadin-menu-bar {
             --lumo-size-m: 10px;
-            --lumo-space-xs: 0.5rem;
+            --lumo-space-xs: 0.7rem;
             --_lumo-button-background-color: transparent;
         }
         
@@ -140,6 +140,15 @@ export class QwcFooter extends observeState(LitElement) {
         _originalMouseY: {state: false},
     };
 
+    constructor() {
+        super();
+        LogController.addListener(this);
+    }
+
+    loaded(){
+        this._initControlButtons();
+    }
+
     connectedCallback() {
         super.connectedCallback();
         this._controlButtons = [];
@@ -185,14 +194,14 @@ export class QwcFooter extends observeState(LitElement) {
             this._tabSelected(0);
         }
 
-        return html`<div id="footer" class="${this._footerClass}" style="height: ${this._height}px;" @dblclick=${this._doubleClicked}>
+            return html`<div id="footer" class="${this._footerClass}" style="height: ${this._height}px;" @dblclick=${this._doubleClicked}>
                         <div class="${this._dragClass}" @mousedown=${this._mousedown}></div>
                         <vaadin-tabsheet theme="minimal" class="${this._tabsheetClass}">
         
                             ${this._renderTabBodies()}
         
                             <qwc-ws-status slot="prefix"></qwc-ws-status>
-                            <vaadin-icon slot="prefix" class="openIcon" icon="font-awesome-solid:chevron-${this._arrow}" @click=${this._doubleClicked}></vaadin-icon>
+                            <vaadin-icon slot="prefix" class="openIcon" icon="font-awesome-solid:chevron-${this._arrow}" @click=${this._openCloseClicked}></vaadin-icon>
                             
                             <vaadin-tabs slot="tabs" class="${this._tabsClass}" theme="small" selected=${this._selectedTab}>
                                 ${this._renderTabHeaders()}
@@ -205,7 +214,7 @@ export class QwcFooter extends observeState(LitElement) {
                         </vaadin-tabsheet>
                     </div>`;
     }
-    
+
     _renderTabHeaders(){
         return html`${devuiState.footer.map((footerTab, index) =>
                 this._renderTabHeader(footerTab, index)
@@ -234,7 +243,8 @@ export class QwcFooter extends observeState(LitElement) {
     }
 
     _renderTabBody(footerTab){
-        return html`${unsafeHTML('<' + footerTab.componentName + ' namespace="' + footerTab.namespace + '"></' + footerTab.componentName + '>')}`;
+        let dynamicFooter = `<${footerTab.componentName} namespace="${footerTab.namespace}"></${footerTab.componentName}>`;
+        return html`${unsafeHTML(dynamicFooter)}`;
     }
 
     _tabSelected(index){
@@ -279,21 +289,20 @@ export class QwcFooter extends observeState(LitElement) {
 
     _doubleClicked(e) {
         if(e.target.tagName.toLowerCase() === "vaadin-tabs" 
-                || e.target.tagName.toLowerCase() === "vaadin-tabsheet"
-                || e.target.tagName.toLowerCase() === "vaadin-icon"){
-            if(this._isOpen){
-                this._close();
-            }else {
-                this._open();
-            }
-        }
-
-        // Initial load of control buttons
-        if (this._controlButtons.length === 0) {
-            this._initControlButtons();
+                || e.target.tagName.toLowerCase() === "vaadin-tabsheet"){
+
+                this._openCloseClicked(e);
         }
     }
 
+    _openCloseClicked(e){
+        if(this._isOpen){
+            this._close();
+        }else {
+            this._open();
+        }
+    }
+
     _initControlButtons(){
         if (this._controlButtons.length === 0) {
             if(this._selectedTab){

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
@@ -7,6 +7,7 @@ import { themeState } from 'theme-state';
 import { devuiState } from 'devui-state';
 import '@vaadin/menu-bar';
 import '@vaadin/tabs';
+import '@vaadin/button';
 
 /**
  * This component represent the Dev UI Header
@@ -27,7 +28,7 @@ export class QwcHeader extends observeState(LitElement) {
         }
         .right-bar {
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-around;
             align-items: center;
         }
         
@@ -72,15 +73,17 @@ export class QwcHeader extends observeState(LitElement) {
     
         .app-info {
             font-size: var(--lumo-font-size-s);
-            padding-right: 10px;
             color: var(--lumo-contrast-50pct);
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
     
         .themeDropdown {
             padding-right: 15px;
             padding-left: 15px;
+            width: 60px;
         }
-
         `;
 
     static properties = {
@@ -150,7 +153,6 @@ export class QwcHeader extends observeState(LitElement) {
             <div class="right-bar">
                 ${this._rightSideNav}
                 ${this._renderThemeOptions()}
-                
             </div>
         </div>
         `;
@@ -238,7 +240,11 @@ export class QwcHeader extends observeState(LitElement) {
                                     )}
                                 </vaadin-tabs>`;
         }else{
-            this._rightSideNav = html`<div class="app-info">${devuiState.applicationInfo.applicationName} ${devuiState.applicationInfo.applicationVersion}</div>`; // default
+            this._rightSideNav = html`
+                <div class="app-info">
+                    ${devuiState.applicationInfo.applicationName} ${devuiState.applicationInfo.applicationVersion}
+                    <vaadin-button theme="secondary" @click="${this._previousDevUI}">Back to the previous Dev UI</vaadin-button>
+                </div>`;
         }
     }
 
@@ -250,9 +256,11 @@ export class QwcHeader extends observeState(LitElement) {
             this.routerController.goHome();
             notifier.showErrorMessage("Seems like your server is not available.  <br/>Error : <code>" + error + "</code>","middle");
         });
+    }
 
-
-
+    _previousDevUI(){
+        let pdui = this.routerController.getBasePath().replace("/dev-ui", "/dev-v1");;
+        window.open(pdui, "_self").focus();
     }
 }
 customElements.define('qwc-header', QwcHeader);
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-jsonrpc-messages.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-jsonrpc-messages.js
@@ -67,7 +67,7 @@ export class QwcJsonrpcMessages extends LitElement {
                     this._clearLog();
                 }).addFollow("Follow log", true , (e) => {
                     this._toggleFollowLog(e);
-                });
+                }).done();
 
         this._messages = [];
         this._zoom = parseFloat(1.0);

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-server-log.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-server-log.js
@@ -110,7 +110,7 @@ export class QwcServerLog extends QwcHotReloadElement {
                     this._clearLog();
                 }).addFollow("Follow log", true , (e) => {
                     this._toggleFollowLog(e);
-                });
+                }).done();
 
         this._messages = [];
         this._zoom = parseFloat(1.0);