Merge pull request quarkusio#32249 from phillip-kruger/dev-ui-no-endp…

…oint Dev UI Resteasy reactive: no endpoint and card
michalvavrik · Mar 30, 2023 · 075e721 · 075e721
2 parents 0d8b6a4 + 6c3960b
commit 075e721
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 19 deletions.
diff --git a/...rkus-resteasy-reactive/deployment/src/main/resources/dev-ui/qwc-resteasy-reactive-card.js b/...rkus-resteasy-reactive/deployment/src/main/resources/dev-ui/qwc-resteasy-reactive-card.js
@@ -1,28 +1,39 @@
 import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
 import { pages } from 'build-time-data';
 import { JsonRpc } from 'jsonrpc';
-import 'echarts-gauge-grade';
 import '@vaadin/icon';
+import 'qwc/qwc-extension-link.js';
 
 export class QwcResteasyReactiveCard extends QwcHotReloadElement {
     jsonRpc = new JsonRpc(this);
 
     static styles = css`
-        .graph {
-            height: 200px;
+        .score {
+            font-size: 4em;
+            text-align: center;
+            color: var(--lumo-primary-text-color);
+            text-shadow: 2px 1px 0 var(--lumo-contrast-10pct);
         }
+    
         .extensionLink {
-            color: var(--lumo-contrast);
+            color: var(--lumo-contrast) !important;
             font-size: small;
             cursor: pointer;
             text-decoration: none;
         }
         .extensionLink:hover {
             filter: brightness(80%);
         }
+        a, a:link, a:visited, a:hover, a:active{
+            color: var(--lumo-primary-color);
+        }
     `;
 
     static properties = {
+        extensionName: {attribute: true},
+        description: {attribute: true},
+        guide: {attribute: true},
+        namespace: {attribute: true},
         _pages: {state: false},
         _latestScores: {state: true},
     };
@@ -43,22 +54,35 @@ export class QwcResteasyReactiveCard extends QwcHotReloadElement {
     render() {
 
         if(this._latestScores){
-            return html`<div class="graph" @click=${this.hotReload}>
-                <echarts-gauge-grade 
-                            percentage="${this._latestScores.score}"
-                            percentageFontSize="14"
-                            sectionColors="--lumo-error-color,--lumo-warning-color,--lumo-success-color">
-                        </echarts-gauge-grade>
-            </div>
+            if(this._latestScores.endpoints){
+                return html`<div class="score" @click=${this.hotReload}>
+                                ${this._latestScores.score} %
+                            </div>
             ${this._renderPagesLinks()}`;
+            }else{
+                return html`${this.description}
+                            <p>No endpoints detected. 
+                            <a href="${this.guide}" target="_blank">Learn how you can add Endpoints</a></p>`;
+            }
         }
     }
 
     _renderPagesLinks(){
-        return html`<a class="extensionLink" href="${this._pages[0].id}">
-                <vaadin-icon class="icon" icon="${this._pages[0].icon}"></vaadin-icon>
-                ${this._pages[0].title}
-            </a>`;
+        return html`${this._pages.map(page => html`
+                            <qwc-extension-link slot="link"
+                                namespace="${this.namespace}"
+                                extensionName="${this.name}"
+                                iconName="${page.icon}"
+                                displayName="${page.title}"
+                                staticLabel="${page.staticLabel}"
+                                dynamicLabel="${page.dynamicLabel}"
+                                streamingLabel="${page.streamingLabel}"
+                                path="${page.id}"
+                                ?embed=${page.embed}
+                                externalUrl="${page.metadata.externalUrl}"
+                                webcomponent="${page.componentLink}" >
+                            </qwc-extension-link>
+                        `)}`;
     }
 
     hotReload(){

diff --git a/...sy-reactive/deployment/src/main/resources/dev-ui/qwc-resteasy-reactive-endpoint-scores.js b/...sy-reactive/deployment/src/main/resources/dev-ui/qwc-resteasy-reactive-endpoint-scores.js
@@ -94,9 +94,13 @@ export class QwcResteasyReactiveEndpointScores extends QwcHotReloadElement {
 
     render() {
         if(this._latestScores){
-            return html`${this._latestScores.endpoints.map(endpoint=>{
-                return html`${this._renderEndpoint(endpoint)}`;
-            })}`;
+            if(this._latestScores.endpoints){
+                return html`${this._latestScores.endpoints.map(endpoint=>{
+                    return html`${this._renderEndpoint(endpoint)}`;
+                })}`;
+            }else{
+                return html`<p>No endpoints detected</p>`;
+            }
         }
     }
 

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js
@@ -91,11 +91,12 @@ export class QwcExtensions extends observeState(LitElement) {
 
     _renderCustomCardContent(extension){
         import(extension.card.componentRef);
-
         let customCardCode = `<${extension.card.componentName} 
                                 class="card-content"
                                 slot="content"
+                                extensionName="${extension.name}"
                                 description="${extension.description}"
+                                guide="${extension.guide}"
                                 namespace="${extension.namespace}">
 
                              </${extension.card.componentName}>`;