Merge pull request #32555 from phillip-kruger/devui-testing-stacked-bar

Change pie to bar in continuous-testing dev ui

Author: gsmet

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

@@ -73,6 +73,8 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("echarts/", contextRoot + "echarts/");
         internalImportMapBuildItem.add("echarts-gauge-grade", contextRoot + "echarts/echarts-gauge-grade.js");
         internalImportMapBuildItem.add("echarts-pie", contextRoot + "echarts/echarts-pie.js");
+        internalImportMapBuildItem.add("echarts-horizontal-stacked-bar",
+                contextRoot + "echarts/echarts-horizontal-stacked-bar.js");
 
         // Other assets
         internalImportMapBuildItem.add("icon/", contextRoot + "icon/");

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/echarts/echarts-horizontal-stacked-bar.js

@@ -0,0 +1,97 @@
+import { EchartsAbstractCanvas } from './echarts-abstract-canvas.js';
+/**
+ * This wraps the Horizontal Stacked Bar echart into a component
+ * see https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack
+ */
+class EchartsHorizontalStackedBar extends EchartsAbstractCanvas {
+
+    static get properties() {
+        return {
+            name: {type: String},
+            height: {type: String},
+            sectionTitles: { type: String},
+            sectionValues: { type: String},
+            sectionColors: { type: String},
+        };
+    }
+
+    constructor() {
+        super();
+        this.name = "Bar";
+        this.height = "40px";
+        this.sectionTitles = "";
+        this.sectionValues = "";
+        this.sectionColors = "grey";
+        this.primaryTextColor = "--lumo-body-text-color";
+    }
+
+    getOption(){
+
+        let textColor = this.primaryTextColor;
+        if(textColor.startsWith('--')){
+            textColor = getComputedStyle(this.shadowRoot.host).getPropertyValue(textColor);
+        }
+
+        const sectionColorsArray = this.sectionColors.split(',');
+        const colors = [];
+
+        for (var cc = 0; cc < sectionColorsArray.length; cc++) {
+            let colorString = sectionColorsArray[cc];
+            if(colorString.startsWith("--")){
+                colorString = getComputedStyle(this.shadowRoot.host).getPropertyValue(colorString);
+            }
+            colors.push(colorString);
+        }
+
+        const sectionTitlesArray = this.sectionTitles.split(',');
+        const sectionValuesArray = this.sectionValues.split(',');
+        
+        const option = new Object();
+        // Tooltip
+        option.tooltip = new Object();
+        option.tooltip.trigger = "axis";
+        // Legend
+        option.legend = new Object();
+        option.legend.show = false;
+        // Grid
+        option.grid = new Object();
+        option.grid.left = '3%';
+        option.grid.right = '4%';
+        option.grid.bottom = '3%';
+        option.grid.containLabel = false;
+        // AxisLabel
+        option.axisLabel = new Object();
+        option.axisLabel.color = textColor;
+        // X Axis
+        option.xAxis = new Object();
+        option.xAxis.type = 'value';
+        // Y Axis
+        option.yAxis = new Object();
+        option.yAxis.type = 'category';
+        option.yAxis.data = [this.name];
+        option.yAxis.show = false;
+        // Height
+        option.height = this.height;
+
+        // Series
+        option.series = [];
+
+        for (var count = 0; count < sectionTitlesArray.length; count++) {
+            let title = sectionTitlesArray[count];
+            let value = sectionValuesArray[count];
+            let color = colors[count];
+
+            const serie = new Object();
+            serie.name = title;
+            serie.type = 'bar';
+            serie.stack = 'total';
+            serie.data = [value],
+            serie.color =  color;
+            option.series.push(serie);
+        }
+
+        return option;
+    }
+
+}
+customElements.define('echarts-horizontal-stacked-bar', EchartsHorizontalStackedBar);

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

@@ -10,7 +10,7 @@ import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
 import '@vaadin/progress-bar';
 import '@vaadin/checkbox';
-import 'echarts-pie';
+import 'echarts-horizontal-stacked-bar';
 
 /**
  * This component shows the Continuous Testing Page
@@ -26,13 +26,11 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
         }
         .menubar{
             border-bottom: 1px solid var(--lumo-contrast-5pct);
-        }
-        .center {
-            width: 100%;
             display: flex;
-            gap: 10px;
-            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
         }
+        
         .results {
             display: flex;
             gap: 10px;
@@ -55,29 +53,19 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            margin-left: 10px;
+            margin-left: 40px;
             margin-top: 10px;
-        }
-        vaadin-button {
-            cursor: pointer;
+            height: 100%;
         }
         
-        .logDetails {
-            background: var(--lumo-contrast-5pct);
-            overflow: hidden;
-            margin-right: 5px;
-            margin-left: 5px;
-            border-radius: 15px 15px 0px 0px;
-            display: flex;
-            flex-direction: column;
+        .progress {
+            padding-right: 20px;
+            width: 50%;
         }
-        .rightSideInfo {
-            display: flex;
-            flex-direction: column;
-        }
-        echarts-pie {
-            width: 400px;
-            height: 400px;
+
+        .total {
+            padding-right: 20px;
+            text-align: center;
         }
     `;
 
@@ -142,20 +130,21 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
     render() {
         return html`
             ${this._renderMenuBar()}
-            <div class="results">
-                ${this._renderResultSet()}
-                ${this._renderState()}
-            </div>
+            ${this._renderResultSet()}
+            ${this._renderBarChart()}
         `;
     }
 
     _renderMenuBar(){
         if(this._state){
             return html`<div class="menubar">
-                ${this._renderStopStartButton()}
-                ${this._renderRunAllButton()}
-                ${this._renderRunFailedButton()}
-                ${this._renderToggleBrokenOnly()}
+                <div>
+                    ${this._renderStopStartButton()}
+                    ${this._renderRunAllButton()}
+                    ${this._renderRunFailedButton()}
+                    ${this._renderToggleBrokenOnly()}
+                </div>
+                ${this._renderBusyIndicator()}
             </div>`;
         }else{
             return html`<div class="menubar">
@@ -164,19 +153,19 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
         }
     }
 
-    _renderState(){
+    _renderBarChart(){
         if(this._state && this._state.running && this._state.run > 0){
-            return html`<div class="rightSideInfo">
-                            ${this._renderStateChart()}
-                            ${this._renderBusyIndicator()}
-                        </div>`;
-        }else if(this._state && this._state.running && this._state.run === 0){
-            return html`${this._renderProgressBar("Starting ...")}`;
+            let values = [this._state.passed, this._state.failed, this._state.skipped];
+            return html`<echarts-horizontal-stacked-bar name = "Tests"
+                            sectionTitles="${this._chartTitles.toString()}" 
+                            sectionValues="${values.toString()}"
+                            sectionColors="${this._chartColors.toString()}">
+                        </echarts-horizontal-stacked-bar>`;
         }
     }
 
     _renderStateChart(){
-        let values = [this._state.passed, this._state.failed, this._state.skipped]
+        let values = [this._state.passed, this._state.failed, this._state.skipped];
         return html`<echarts-pie name = "Tests"
                             sectionTitles="${this._chartTitles.toString()}" 
                             sectionValues="${values.toString()}"
@@ -186,13 +175,13 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
 
     _renderBusyIndicator(){
         if(this._state && this._state.inProgress){
-            return html`${this._renderProgressBar("Running ...")}`;
-        }else if(this._results){
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
+        }else if(this._results && this._state && this._state.running){
 
-            return html`<span style="text-align: center;">
-                        Total time: 
-                        <qui-badge><span>${this._results.totalTime}ms</span></qui-badge>
-                    </span>`
+             return html`<span class="total">
+                         Total time: 
+                         <qui-badge><span>${this._results.totalTime}ms</span></qui-badge>
+                     </span>`
         }
 
     }
@@ -206,9 +195,7 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
 
             var allResults = failingResults.concat(passingResults, skippedResults);
 
-            return html`<div class="center">
-                            ${this._renderResults(allResults)}
-                        </div>`;
+            return html`${this._renderResults(allResults)}`;
         }
 
     }
@@ -410,14 +397,5 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
             this._busy = false;
         });
     }
-
-    _renderProgressBar(message){
-        return html`
-            <div style="color: var(--lumo-secondary-text-color);width: 95%;" >
-                <div>${message}</div>
-                <vaadin-progress-bar indeterminate></vaadin-progress-bar>
-            </div>
-            `;
-    }
 }
 customElements.define('qwc-continuous-testing', QwcContinuousTesting);