forked from quarkusio/quarkus
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Dev UI Move info to menu item and format page for known items
Signed-off-by: Phillip Kruger <[email protected]>
- Loading branch information
1 parent
e6d8ca3
commit d480ef8
Showing
4 changed files
with
288 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 149 additions & 0 deletions
149
extensions/info/deployment/src/main/resources/dev-ui/qwc-info.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { LitElement, html, css} from 'lit'; | ||
| import { columnBodyRenderer } from '@vaadin/grid/lit.js'; | ||
| import { infoUrl } from 'build-time-data'; | ||
| import '@vaadin/progress-bar'; | ||
| import 'qui-card'; | ||
| import '@vaadin/icon'; | ||
|
|
||
| /** | ||
| * This component shows the Info Screen | ||
| */ | ||
| export class QwcInfo extends LitElement { | ||
|
|
||
| static styles = css` | ||
| :host { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); | ||
| gap: 1em; | ||
| padding: 10px; | ||
| } | ||
| qui-card { | ||
| display: flex; | ||
| } | ||
| .cardContent { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 10px; | ||
| gap: 10px; | ||
| } | ||
| vaadin-icon { | ||
| font-size: xx-large; | ||
| } | ||
| `; | ||
|
|
||
| static properties = { | ||
| _infoUrl: {state: false}, | ||
| _info: {state: true}, | ||
| }; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this._infoUrl = infoUrl; | ||
| this._info = null; | ||
| } | ||
|
|
||
| async connectedCallback() { | ||
| super.connectedCallback(); | ||
| await this.load(); | ||
| } | ||
|
|
||
| async load() { | ||
| const response = await fetch(this._infoUrl) | ||
| const data = await response.json(); | ||
| this._info = data; | ||
| } | ||
|
|
||
| render() { | ||
| if (this._info) { | ||
| return html` | ||
| ${this._renderOsInfo(this._info)} | ||
| ${this._renderJavaInfo(this._info)} | ||
| ${this._renderGitInfo(this._info)} | ||
| ${this._renderBuildInfo(this._info)} | ||
| `; | ||
| }else{ | ||
| return html` | ||
| <div style="color: var(--lumo-secondary-text-color);width: 95%;" > | ||
| <div>Fetching infomation...</div> | ||
| <vaadin-progress-bar indeterminate></vaadin-progress-bar> | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| _renderOsInfo(info){ | ||
| if(info.os){ | ||
| let os = info.os; | ||
| return html`<qui-card title="Operating System"> | ||
| <div class="cardContent" slot="content"> | ||
| ${this._renderOsIcon(os.name)} | ||
| <table class="table"> | ||
| <tr><td>Name</td><td>${os.name}</td></tr> | ||
| <tr><td>Version</td><td>${os.version}</td></tr> | ||
| <tr><td>Arch</td><td>${os.arch}</td></tr> | ||
| </table> | ||
| </div> | ||
| </qui-card>`; | ||
| } | ||
| } | ||
|
|
||
| _renderJavaInfo(info){ | ||
| if(info.java){ | ||
| let java = info.java; | ||
| return html`<qui-card title="Java"> | ||
| <div class="cardContent" slot="content"> | ||
| <vaadin-icon icon="font-awesome-brands:java"></vaadin-icon> | ||
| <table class="table"> | ||
| <tr><td>Version</td><td>${java.version}</td></tr> | ||
| </table> | ||
| </div> | ||
| </qui-card>`; | ||
| } | ||
| } | ||
|
|
||
| _renderOsIcon(osname){ | ||
|
|
||
| if(osname){ | ||
| if(osname.toLowerCase().startsWith("linux")){ | ||
| return html`<vaadin-icon icon="font-awesome-brands:linux"></vaadin-icon>`; | ||
| }else if(osname.toLowerCase().startsWith("mac") || osname.toLowerCase().startsWith("darwin")){ | ||
| return html`<vaadin-icon icon="font-awesome-brands:apple"></vaadin-icon>`; | ||
| }else if(osname.toLowerCase().startsWith("win")){ | ||
| return html`<vaadin-icon icon="font-awesome-brands:windows"></vaadin-icon>`; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| _renderGitInfo(info){ | ||
| if(info.git){ | ||
| let git = info.git; | ||
| return html`<qui-card title="Git"> | ||
| <div class="cardContent" slot="content"> | ||
| <vaadin-icon icon="font-awesome-brands:git"></vaadin-icon> | ||
| <table class="table"> | ||
| <tr><td>Branch</td><td>${git.branch}</td></tr> | ||
| <tr><td>Commit</td><td>${git.commit.id}</td></tr> | ||
| <tr><td>Time</td><td>${git.commit.time}</td></tr> | ||
| </table> | ||
| </div> | ||
| </qui-card>`; | ||
| } | ||
| } | ||
|
|
||
| _renderBuildInfo(info){ | ||
| if(info.build){ | ||
| let build = info.build; | ||
| return html`<qui-card title="Build"> | ||
| <div class="cardContent" slot="content"> | ||
| <table class="table"> | ||
| <tr><td>Group</td><td>${build.group}</td></tr> | ||
| <tr><td>Artifact</td><td>${build.artifact}</td></tr> | ||
| <tr><td>Version</td><td>${build.version}</td></tr> | ||
| <tr><td>Time</td><td>${build.time}</td></tr> | ||
| </table> | ||
| </div> | ||
| </qui-card>`; | ||
| } | ||
| } | ||
| } | ||
| customElements.define('qwc-info', QwcInfo); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-card.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { LitElement, html, css} from 'lit'; | ||
|
|
||
| /** | ||
| * Card UI Component | ||
| */ | ||
| export class QuiCard extends LitElement { | ||
|
|
||
| static styles = css` | ||
| .card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| border: 1px solid var(--lumo-contrast-10pct); | ||
| border-radius: 4px; | ||
| filter: brightness(90%); | ||
| } | ||
| .card-header { | ||
| font-size: var(--lumo-font-size-l); | ||
| line-height: 1; | ||
| height: 25px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 10px 10px; | ||
| background-color: var(--lumo-contrast-5pct); | ||
| border-bottom: 1px solid var(--lumo-contrast-10pct); | ||
| } | ||
| .card-footer { | ||
| height: 20px; | ||
| padding: 10px 10px; | ||
| color: var(--lumo-contrast-50pct); | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| visibility:hidden; | ||
| }`; | ||
|
|
||
| static properties = { | ||
| title: {type: String}, | ||
| width: {state: true}, | ||
| _hasFooter: {state: true}, | ||
| }; | ||
|
|
||
| constructor(){ | ||
| super(); | ||
| this.width = "100%"; | ||
| this._hasFooter = false; | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| super.connectedCallback() | ||
| } | ||
|
|
||
| render() { | ||
| return html`<div class="card" style="width: ${this.width};"> | ||
| ${this._headerTemplate()} | ||
| <slot name="content"></slot> | ||
| ${this._footerTemplate()} | ||
| </div>`; | ||
| } | ||
|
|
||
| firstUpdated(){ | ||
| const footerSlot = this.shadowRoot.querySelector("#footer"); | ||
| if (footerSlot && footerSlot.assignedNodes().length>0){ | ||
| console.log('No content is available') | ||
| this._hasFooter = true; | ||
| } | ||
| } | ||
|
|
||
| _headerTemplate() { | ||
| return html`<div class="card-header"> | ||
| <div>${this.title}</div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| _footerTemplate() { | ||
| if(this._hasFooter){ | ||
| return html` | ||
| <div class="card-footer"> | ||
| <slot id="footer" name="footer"></slot> | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| } | ||
| customElements.define('qui-card', QuiCard); |