diff --git a/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java b/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
index ff3954246bce91..1bb4670e4c1823 100644
--- a/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
+++ b/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
@@ -110,6 +110,7 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
internalImportMapBuildItem.add("qwc-extension-link", contextRoot + "qwc/qwc-extension-link.js");
// Quarkus UI
internalImportMapBuildItem.add("qui-ide-link", contextRoot + "qui/qui-ide-link.js");
+ internalImportMapBuildItem.add("qui-recyclable-badge", contextRoot + "qui/qui-recyclable-badge.js");
// Echarts
internalImportMapBuildItem.add("echarts/", contextRoot + "echarts/");
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-recyclable-badge.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-recyclable-badge.js
new file mode 100644
index 00000000000000..2b58d0c4bed723
--- /dev/null
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-recyclable-badge.js
@@ -0,0 +1,170 @@
+import { LitElement, html, css} from 'lit';
+import '@qomponent/qui-icons';
+
+/**
+ * Badge UI Component based on the vaadin theme one
+ * see https://vaadin.com/docs/latest/components/badge
+ */
+export class QuiRecyclableBadge extends LitElement {
+ static styles = css`
+ [theme~="badge"] {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ padding: 0.4em calc(0.5em + var(--lumo-border-radius-s, 0.25em) / 4);
+ color: var(--lumo-primary-text-color, hsla(211, 63%, 54%, 1.0));
+ background-color: var(--lumo-primary-color-10pct, hsla(214, 100%, 60%, 0.13));
+ border-radius: var(--lumo-border-radius-s, 0.25em);
+ font-family: var(--lumo-font-family, "Open Sans", sans-serif);
+ font-size: var(--lumo-font-size-s, 0.875rem);
+ line-height: 1;
+ font-weight: 500;
+ text-transform: initial;
+ letter-spacing: initial;
+ min-width: calc(var (--lumo-line-height-xs, 1.25) * 1em + 0.45em);
+ }
+ [theme~="success"] {
+ color: var(--lumo-success-text-color, hsla(145, 85%, 25%, 1.0));
+ background-color: var(--lumo-success-color-10pct, hsla(145, 72%, 31%, 0.1));
+ }
+ [theme~="error"] {
+ color: var(--lumo-error-text-color, hsla(3, 89%, 42%, 1.0));
+ background-color: var(--lumo-error-color-10pct, hsla(3, 85%, 49%, 0.1));
+ }
+ [theme~="warning"] {
+ color: var(--lumo-warning-text-color, hsla(30, 89%, 42%, 1.0));
+ background-color: var(--lumo-warning-color-10pct, hsla(30, 100%, 50%, 0.1));
+ }
+ [theme~="contrast"] {
+ color: var(--lumo-contrast-80pct, hsla(214, 41%, 17%, 0.83));
+ background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
+ }
+ [theme~="small"] {
+ font-size: var(--lumo-font-size-xxs, 0.75rem);
+ line-height: 1;
+ }
+ [theme~="tiny"] {
+ font-size: var(--lumo-font-size-xxs, 0.75rem);
+ line-height: 1;
+ padding: 0.2em calc(0.2em + var(--lumo-border-radius-s, 0.25em) / 4);
+ }
+ [theme~="primary"] {
+ color: var(--lumo-primary-contrast-color, hsla(0, 100%, 100%, 1.0));
+ background-color: var(--lumo-primary-color, hsla(211, 63%, 54%, 1.0));
+ }
+ [theme~="successprimary"] {
+ color: var(--lumo-success-contrast-color, hsla(0, 100%, 100%, 1.0));
+ background-color: var(--lumo-success-color, hsla(145, 72%, 30%, 1.0));
+ }
+ [theme~="warningprimary"] {
+ color: var(--lumo-warning-contrast-color, hsla(0, 100%, 100%, 1.0));
+ background-color: var(--lumo-warning-color, hsla(30, 100%, 50%, 1.0));
+ }
+ [theme~="errorprimary"] {
+ color: var(--lumo-error-contrast-color, hsla(0, 100%, 100%, 1.0));
+ background-color: var(--lumo-error-color, hsla(3, 85%, 48%, 1.0));
+ }
+ [theme~="contrastprimary"] {
+ color: var(--lumo-base-color, hsla(0, 100%, 100%, 1.0));
+ background-color: var(--lumo-contrast, hsla(214, 35%, 15%, 1.0));
+ }
+ [theme~="pill"] {
+ --lumo-border-radius-s: 1em;
+ }
+ `;
+
+ static properties = {
+ background: {type: String},
+ color: {type: String},
+ icon: {type: String},
+ level: {type: String},
+ small: {type: Boolean},
+ tiny: {type: Boolean},
+ primary: {type: Boolean},
+ pill: {type: Boolean},
+ clickable: {type: Boolean},
+ _theme: {attribute: false},
+ _style: {attribute: false}
+ };
+
+ constructor(){
+ super();
+ this.icon = null;
+ this.level = null;
+ this.background = null;
+ this.color = null;
+ this.small = false;
+ this.primary = false;
+ this.pill = false;
+ this.clickable = false;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this._resetTheme();
+ this._resetStyle();
+ }
+
+ _resetTheme() {
+ this._theme = "badge";
+ if (this.level) {
+ this._theme = this._theme + " " + this.level;
+ }
+ if (this.primary) {
+ if (this.level) {
+ this._theme = this._theme + "primary";
+ } else {
+ this._theme = this._theme + " primary";
+ }
+ }
+
+ if (this.small && !this.tiny) {
+ this._theme = this._theme + " small";
+ }
+ if (this.tiny) {
+ this._theme = this._theme + " tiny";
+ }
+
+ if (this.pill) {
+ this._theme = this._theme + " pill";
+ }
+ }
+
+ _resetStyle() {
+ this._style = "";
+ if(this.background){
+ this._style = this._style + "background: " + this.background + ";";
+ }
+ if(this.color){
+ this._style = this._style + "color: " + this.color + ";";
+ }
+ if(this.clickable){
+ this._style = this._style + "cursor: pointer";
+ }
+ }
+
+ update(changedProperties) {
+ this._resetTheme();
+ this._resetStyle();
+
+ // this will invoke re-rendering
+ super.update(changedProperties);
+ }
+
+
+ render() {
+ return html`
+ ${this._renderIcon()}
+
+ `;
+ }
+
+ _renderIcon(){
+ if(this.icon){
+ return html``;
+ }
+ }
+
+}
+customElements.define('qui-recyclable-badge', QuiRecyclableBadge);
\ No newline at end of file
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-continuous-testing.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-continuous-testing.js
index 17b982fefb1587..b730bfeea4b719 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-continuous-testing.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-continuous-testing.js
@@ -10,6 +10,7 @@ import '@vaadin/checkbox';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import { gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
import '@qomponent/qui-badge';
+import 'qui-recyclable-badge';
import 'qui-ide-link';
@@ -89,6 +90,7 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
this._detailsOpenedItem = [];
this._chartTitles = ["passed", "failed", "skipped"];
this._chartColors = ['--lumo-success-text-color', '--lumo-error-text-color', '--lumo-contrast-70pct'];
+ this._displayTags = true;
}
connectedCallback() {
@@ -150,6 +152,7 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
${this._renderRunAllButton()}
${this._renderRunFailedButton()}
${this._renderToggleBrokenOnly()}
+ ${this._renderToggleDisplayTags()}
${this._renderBusyIndicator()}
`;
@@ -240,12 +243,13 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
}}"
${gridRowDetailsRenderer(this._descriptionRenderer, [])}
>
-
- this._tagsRenderer(prop), [])}>
+ ${this._displayTags ? html`
+ this._tagsRenderer(prop), [])}>
+ `: ''}
this._testRenderer(prop), [])}>
this._nameRenderer(prop), [])}>
this._timeRenderer(prop), [])}>>
- `;
+ `;
}else{
return html`No tests`;
}
@@ -288,10 +292,12 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
}
_tagToColor(tag){
+ // Step 0: two strings with the last char differing by 1 should render to totally different colors
+ const tagValue = tag + tag;
// Step 1: Convert the string to a numeric hash value
let hash = 0;
- for (let i = 0; i < tag.length; i++) {
- hash = tag.charCodeAt(i) + ((hash << 5) - hash);
+ for (let i = 0; i < tagValue.length; i++) {
+ hash = tagValue.charCodeAt(i) + ((hash << 5) - hash);
}
// Step 2: Convert the numeric hash value to a hex color code
@@ -306,11 +312,11 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
}
_tagsRenderer(testLine){
- return html`${testLine.tags.map((tag) => {
+ return html`${testLine.tags.map((tag, index) => {
const color = this._tagToColor(tag);
- return html`
+ return html`
${"io.quarkus.test.junit.QuarkusTest" === tag ? "Q" : tag}
- `;
+ `;
})}`;
}
@@ -397,6 +403,17 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
}
}
+ _renderToggleDisplayTags() {
+ if(this._state && this._state.running){
+ return html`
+ `;
+ }
+ }
+
_start(){
if(!this._busy){
this._busy = true;
@@ -435,5 +452,10 @@ export class QwcContinuousTesting extends QwcHotReloadElement {
this._busy = false;
});
}
+
+ _toggleDisplayTags(){
+ this._displayTags = !this._displayTags;
+ this.hotReload();
+ }
}
customElements.define('qwc-continuous-testing', QwcContinuousTesting);
\ No newline at end of file