Merge pull request #33538 from phillip-kruger/dev-ui-common-no-servic…

…e-component Dev UI new common component for no-service/data
quarkusio · May 24, 2023 · 3d08855 · 3d08855
2 parents ae88a20 + a8fc6c6
commit 3d08855
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 21 deletions.
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
@@ -5,6 +5,7 @@ import '@vaadin/details';
 import '@vaadin/horizontal-layout';
 import 'echarts-gauge-grade';
 import 'qui-badge';
+import 'qwc-no-data';
 
 /**
  * This component shows the Rest Easy Reactive Endpoint scores
@@ -98,10 +99,13 @@ export class QwcResteasyReactiveEndpointScores extends QwcHotReloadElement {
                 return html`${this._latestScores.endpoints.map(endpoint=>{
                     return html`${this._renderEndpoint(endpoint)}`;
                 })}`;
-            }else{
-                return html`<p>No endpoints detected</p>`;
             }
         }
+        return html`<qwc-no-data message="You do not have any REST endpoints." 
+                                    link="https://quarkus.io/guides/resteasy-reactive"
+                                    linkText="Learn how to write REST Services with RESTEasy Reactive">
+                </qwc-no-data>
+            `;
     }
 
     _renderEndpoint(endpoint){

diff --git a/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java b/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
@@ -81,6 +81,7 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("devui/", contextRoot);
         // Quarkus Web Components
         internalImportMapBuildItem.add("qwc/", contextRoot + "qwc/");
+        internalImportMapBuildItem.add("qwc-no-data", contextRoot + "qwc/qwc-no-data.js");
         internalImportMapBuildItem.add("qwc-hot-reload-element", contextRoot + "qwc/qwc-hot-reload-element.js");
         internalImportMapBuildItem.add("qwc-server-log", contextRoot + "qwc/qwc-server-log.js");
         internalImportMapBuildItem.add("qwc-extension-link", contextRoot + "qwc/qwc-extension-link.js");

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
@@ -3,6 +3,7 @@ import { devServices } from 'devui-data';
 import '@vaadin/icon';
 import 'qui-code-block';
 import 'qui-card';
+import 'qwc-no-data';
 
 /**
  * This component shows the Dev Services Page
@@ -35,23 +36,8 @@ export class QwcDevServices extends QwcHotReloadElement {
             padding-left: 10px;
             background: var(--lumo-contrast-5pct);
         }
-
-        .no-dev-services {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 10px;
-            border: 1px solid var(--lumo-contrast-20pct);
-            border-radius: 9px;
-            padding: 30px;
-            margin: 30px;
-        }
-        .no-dev-services a {
-            color: var(--lumo-contrast-90pct);
-        }
     `;
 
-
     static properties = {
         _services: {state: true}
     };
@@ -73,10 +59,10 @@ export class QwcDevServices extends QwcHotReloadElement {
                             ${this._services.map(devService => this._renderCard(devService))}  
                         </div>`;
         } else {
-            return html`<p class="no-dev-services">
-                    <span>You do not have any Dev Services running.</span>
-                    <a href="https://quarkus.io/guides/dev-services" target="_blank">Read more about Dev Services</a>
-                </p>
+            return html`<qwc-no-data message="You do not have any Dev Services running." 
+                                    link="https://quarkus.io/guides/dev-services"
+                                    linkText="Read more about Dev Services">
+                </qwc-no-data>
             `;
         }
     }

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-no-data.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-no-data.js
@@ -0,0 +1,52 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * This component can we used to show if there is not data to show
+ */
+export class QwcNoData extends LitElement {
+    static styles = css`
+        .nodata {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            border: 1px solid var(--lumo-contrast-20pct);
+            border-radius: 9px;
+            padding: 30px;
+            margin: 30px;
+        }
+        .nodata a {
+            color: var(--lumo-contrast-90pct);
+        }
+    `;
+
+
+    static properties = {
+        message: {attribute: true},
+        link: {attribute: true},
+        linkText: {attribute: true},
+    };
+
+    constructor() {
+        super();
+        this.message = "No data to display";
+        this.link = null;
+        this.linkText = "See the documentation for more information";
+    }
+
+    render() {
+        return html`<p class="nodata">
+                <span>${this.message}</span>
+                ${this._renderLink()}
+            </p>
+        `;
+    }
+
+    _renderLink(){
+        if(this.link){
+            return html`<a href="${this.link}" target="_blank"> ${this.linkText}</a>`;
+        }
+    }
+}
+
+customElements.define('qwc-no-data', QwcNoData);