Dev UI: new feature - menu actions

Signed-off-by: Phillip Kruger <[email protected]>

Author: phillip-kruger

bom/dev-ui/pom.xml

@@ -32,6 +32,7 @@
         <path-to-regexp.version>2.4.0</path-to-regexp.version>
         <codeblock.version>1.1.1</codeblock.version>
         <qomponent.version>1.0.4</qomponent.version>
+        <ldrs.version>1.1.7</ldrs.version>
         <directory-tree.version>1.0.3</directory-tree.version>
         <hpcc-js-wasm.version>2.15.3</hpcc-js-wasm.version>
         <yargs.version>17.7.2</yargs.version>
@@ -328,6 +329,14 @@
                 <scope>runtime</scope>
             </dependency>
 
+            <!-- Loading indicators -->
+            <dependency>
+                <groupId>org.mvnpm</groupId>
+                <artifactId>ldrs</artifactId>
+                <version>${ldrs.version}</version>
+                <scope>runtime</scope>
+            </dependency>
+
             <!-- Polyfill for importmaps -->
             <dependency>
                 <groupId>org.mvnpm</groupId>

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

@@ -503,6 +503,9 @@ private void addMenuSectionBuildTimeData(BuildTimeConstBuildItem internalBuildTi
         for (InternalPageBuildItem internalPageBuildItem : internalPages) {
             List<Page> pages = internalPageBuildItem.getPages();
             for (Page page : pages) {
+                if (internalPageBuildItem.getMenuActionComponent() != null) {
+                    page.setMenuActionComponent(internalPageBuildItem.getMenuActionComponent());
+                }
                 sectionMenu.add(page);
             }
             internalBuildTimeData.addAllBuildTimeData(internalPageBuildItem.getBuildTimeData());

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

@@ -18,10 +18,16 @@ public final class InternalPageBuildItem extends MultiBuildItem {
     private final int position;
     private final List<Page> pages = new ArrayList<>();
     private final Map<String, Object> buildTimeData = new HashMap<>();
+    private final String menuActionComponent;
 
     public InternalPageBuildItem(String namespaceLabel, int position) {
+        this(namespaceLabel, position, null);
+    }
+
+    public InternalPageBuildItem(String namespaceLabel, int position, String menuActionComponent) {
         this.namespaceLabel = namespaceLabel;
         this.position = position;
+        this.menuActionComponent = menuActionComponent;
     }
 
     public void addPage(PageBuilder page) {
@@ -37,6 +43,10 @@ public List<Page> getPages() {
         return pages;
     }
 
+    public String getMenuActionComponent() {
+        return menuActionComponent;
+    }
+
     public int getPosition() {
         return position;
     }

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

@@ -52,7 +52,8 @@ public void continuousTestingState(
     @BuildStep(onlyIf = IsLocalDevelopment.class)
     InternalPageBuildItem createContinuousTestingPages() {
 
-        InternalPageBuildItem continuousTestingPages = new InternalPageBuildItem("Continuous Testing", 30);
+        InternalPageBuildItem continuousTestingPages = new InternalPageBuildItem("Continuous Testing", 30,
+                "qwc-continuous-testing-menu-action");
 
         continuousTestingPages.addPage(Page.webComponentPageBuilder()
                 .namespace(NAMESPACE)

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

@@ -36,7 +36,7 @@ public class ExtensionsProcessor {
     @BuildStep(onlyIf = IsLocalDevelopment.class)
     InternalPageBuildItem createExtensionsPages(ExtensionsBuildItem extensionsBuildItem) {
 
-        InternalPageBuildItem extensionsPages = new InternalPageBuildItem("Extensions", 10);
+        InternalPageBuildItem extensionsPages = new InternalPageBuildItem("Extensions", 10, "qwc-extensions-menu-action");
 
         // Extensions
         Map<ExtensionGroup, List<Extension>> response = Map.of(

extensions/vertx-http/dev-ui-resources/pom.xml

@@ -117,6 +117,13 @@
             <scope>runtime</scope>
         </dependency>
 
+        <!-- Loading indicators -->
+        <dependency>
+            <groupId>org.mvnpm</groupId>
+            <artifactId>ldrs</artifactId>
+            <scope>runtime</scope>
+        </dependency>
+        
         <!-- Markdown it -->
         <dependency>
             <groupId>org.mvnpm</groupId>

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js

@@ -158,6 +158,11 @@ export class RouterController {
         Router.go({pathname: firstPage});
     }
 
+    go(page){
+        let pageRef = this.getPageUrlFor(page);
+        Router.go({pathname: pageRef});
+    }
+
     getFirstPageUrl(){
         for (let entry of RouterController.pageMap) {
             let value = entry[1];

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-continuous-testing-menu-action.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css} from 'lit';
+import {ring} from 'ldrs';
+
+ring.register();
+
+/**
+ * This is the menu action on the Continuous Testing menu
+ */
+export class QwcContinuousTestingMenuAction extends LitElement {
+    
+    static styles = css`
+            .actionBtn{
+                color: var(--lumo-contrast-25pct);
+            }
+            .ring {
+                padding-right: 5px;
+                padding-top: 5px;
+            }
+       `;
+
+    static properties = {
+        _ctState: {state : true}
+    }
+
+    constructor() {
+        super();
+        this._ctState = "stopped";
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('continuous-testing-state-change', this._onStateChanged);   
+    }
+    
+    disconnectedCallback() {
+        window.removeEventListener('continuous-testing-state-change', this._onStateChanged);
+        super.disconnectedCallback();
+    }
+
+    _onStateChanged = (event) => {
+        this._ctState = event.detail.state;
+    }
+
+    render(){
+        let icon = "stop";
+        let title = "Stop";
+        if(this._ctState === "stopped"){
+            icon = "play";
+            title = "Start";
+        }
+
+        if(this._ctState === "stopped" || this._ctState === "started"){
+            return html`<vaadin-button 
+                            title="${title} Continuous Testing " class="actionBtn"
+                            id="start-cnt-testing-btn" 
+                            theme="icon tertiary small" 
+                            @click="${this._startStopClicked}">
+                        <vaadin-icon icon="font-awesome-solid:${icon}"></vaadin-icon>
+                    </vaadin-button>`;
+        }else{
+            return html`<l-ring size="26" stroke="2" color="var(--lumo-contrast-25pct)" class="ring"></l-ring>`;
+        }
+    }
+    
+    _startStopClicked(e){
+        this.dispatchEvent(new CustomEvent('continuous-testing-start-stop', {
+            detail: { requested: "start/stop" },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    
+    
+}
+customElements.define('qwc-continuous-testing-menu-action', QwcContinuousTestingMenuAction);

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

@@ -11,9 +11,11 @@ import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
 import '@qomponent/qui-badge';
 import 'qui-ide-link';
-
-
+import 'qwc-no-data';
 import 'echarts-horizontal-stacked-bar';
+import {ring} from 'ldrs';
+
+ring.register();
 
 /**
  * This component shows the Continuous Testing Page
@@ -133,21 +135,42 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
 
     connectedCallback() {
         super.connectedCallback();
+        window.addEventListener('continuous-testing-start-stop', this._onStartStopChanged);
         this._lastKnownState();
         this._createObservers();
     }
 
     disconnectedCallback() {
+        window.removeEventListener('continuous-testing-start-stop', this._onStartStopChanged);
         this._cancelObservers();    
         super.disconnectedCallback();
     }
 
+    _onStartStopChanged = (event) => {
+        if(this._testsEnabled){
+            this._stop();
+        }else {
+            this._start();
+        }
+    }
+
     _createObservers(){
         this._streamStateObserver = this.jsonRpc.streamState().onNext(jsonRpcResponse => {
             this._tests = jsonRpcResponse.result;
+            this._broadcastState();
         });
     }
 
+    _broadcastState(){
+        if(this._tests.inProgress){
+            this._fireStateChange("busy");
+        }else if(!this._tests.config.enabled){
+            this._fireStateChange("stopped");
+        }else if(this._tests.config.enabled){
+            this._fireStateChange("started");
+        }
+    }
+
     _cancelObservers(){
         this._streamStateObserver.cancel();
         if(this._streamResultsObserver){
@@ -159,6 +182,7 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
         // Get last known
         this.jsonRpc.currentState().then(jsonRpcResponse => {
             this._tests = jsonRpcResponse.result;
+            this._broadcastState();
         });
     }
 
@@ -177,11 +201,16 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
     }
 
     _renderMenuBar(){
-        if(this._testsReceived) {
+        let items = [];
+        if(this._testsEnabled) {
+            items.push(... (this._testResult?.failed ?? []));
+            items.push(... (this._testResult?.passed ?? []));
+            items.push(... (this._testResult?.skipped ?? []));
+        }
+        if(items.length > 0){
             return html`
             <div class="menubar">
                 <div>
-                    ${this._renderStartStopButton()}
                     ${this._renderRunAllButton()}
                     ${this._renderRunFailedButton()}
                     ${this._renderToggleBrokenOnly()}
@@ -249,7 +278,23 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
             </vaadin-grid>`;
 
         }else{
-            return html`No tests`;
+            return html`<qwc-no-data message="Continuous Testing is not running. Click the Start button or press [r] in the console to start." 
+                                    link="https://quarkus.io/guides/continuous-testing"
+                                    linkText="Read more about Continuous Testing">
+                            ${this._renderPlayButton()}
+                </qwc-no-data>
+            `
+        }
+    }
+
+    _renderPlayButton(){
+        if(!this._busy && !this._testsEnabled){
+            return html`<vaadin-button theme="tertiary" @click=${this._start}>
+                        <vaadin-icon icon="font-awesome-solid:play"></vaadin-icon>
+                        Start
+                    </vaadin-button>`;
+        }else{
+            return html`<l-ring size="26" stroke="2" color="var(--lumo-contrast-25pct)" class="ring"></l-ring>`;
         }
     }
 
@@ -340,17 +385,6 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
                     </span>`;        
     }
 
-    _renderStartStopButton(){
-        return html`<vaadin-button 
-                            id="start-cnt-testing-btn" 
-                            theme="tertiary" 
-                            @click="${!this._testsEnabled ? this._start : this._stop}" 
-                            ?disabled=${this._busy}>
-                        <vaadin-icon icon="font-awesome-solid:${!this._testsEnabled ? 'play' : 'stop'}"></vaadin-icon>
-                        ${!this._testsEnabled ? 'Start' : 'Stop'}
-                    </vaadin-button>`;
-    }
-
     _renderRunAllButton(){
         if(this._testsEnabled){
             return html`<vaadin-button id="run-all-cnt-testing-btn" theme="tertiary" @click="${this._runAll}" ?disabled=${this._state.inProgress || this._busy}>
@@ -394,6 +428,7 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
     _start(){
         if(!this._busy){
             this._busy = true;
+            this._fireStateChange("busy");
             this.jsonRpc.start().then(jsonRpcResponse => {
                 this._busy = false;
             });
@@ -403,12 +438,22 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
     _stop(){
         if(!this._busy){
             this._busy = true;
+            this._fireStateChange("busy");
             this.jsonRpc.stop().then(jsonRpcResponse => {
                 this._busy = false;
+                this._fireStateChange("stopped");
             });
         }
     }
 
+    _fireStateChange(state){
+        this.dispatchEvent(new CustomEvent('continuous-testing-state-change', {
+            detail: { state: state },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
     _runAll(){
         this._busy = true;
         this.jsonRpc.runAll().then(jsonRpcResponse => {