Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small UI fix to devservice page #32563

Merged
merged 1 commit into from
Apr 13, 2023
Merged

Small UI fix to devservice page #32563

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 107 additions & 77 deletions extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {LitElement, html, css} from 'lit';
import {devServices} from 'devui-data';
import '@vaadin/details';
import '@vaadin/vertical-layout';
import '@vaadin/icon';

Expand All @@ -9,31 +8,63 @@ import '@vaadin/icon';
*/
export class QwcDevServices extends LitElement {
static styles = css`
vaadin-icon {
margin-right: 1em;
margin-left: 0.5em;
}

vaadin-details {
margin-bottom: 2em;
}

.dev-service-config {
margin-left: 2em;
}
.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);
}
.cards {
height: 100%;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid var(--lumo-contrast-10pct);
border-radius: 4px;
margin-left: 30px;
margin-right: 30px;
}

.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);
}

.configHeader {
padding: 10px;
}
.containerDetails{
padding: 15px;
}

.row {
padding: 3px;
display: flex;
align-items: center;
gap: 10px;
}

.config {
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);
}
`;


Expand All @@ -48,28 +79,9 @@ export class QwcDevServices extends LitElement {

render() {
if (this._services && this._services.length>0) {
const items = [];
for (let i = 0; i < this._services.length; i++) {
const ds = this._services[i];
const item = html`
<vaadin-details opened theme="filled">
<div slot="summary">${ds.name}</div>
<vaadin-vertical-layout>
${this._getContainerName(ds)}
${this._getContainerImage(ds)}
${this._getNetwork(ds)}
${this._getExposedPorts(ds)}
<span><vaadin-icon icon="font-awesome-solid:gear"></vaadin-icon>Config:</span>
<div class="dev-service-config">
${this._getConfig(ds)}
</div>
</vaadin-vertical-layout>
</vaadin-details>
`
items.push(item);
}

return html`${items}`;
return html`<div class="cards">
${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>
Expand All @@ -79,49 +91,67 @@ export class QwcDevServices extends LitElement {
}
}

_getContainerName(devService) {
_renderCard(devService){
return html`<div class="card">
<div class="card-header">${devService.name}</div>
${this._renderContainerDetails(devService)}
${this._renderConfigDetails(devService)}
</div>`;
}

_renderContainerDetails(devService){
if (devService.containerInfo) {
return html`<span><vaadin-icon
icon="font-awesome-solid:box-open"></vaadin-icon>${devService.containerInfo.names[0]} (${devService.containerInfo.shortId})</span>`;
return html`
<table class="containerDetails">
<tr><td>${this._getContainerName(devService)}</td></tr>
<tr><td>${this._getContainerImage(devService)}</td></tr>
<tr><td>${this._getNetwork(devService)}</td></tr>
<tr><td>${this._getExposedPorts(devService)}</td></tr>
</table>`;
}
}

_renderConfigDetails(devService){
if (devService.configs) {
const list = [];
for (const [key, value] of Object.entries(devService.configs)) {
list.push(key + "=" + value + "\n");
}

let properties = ''.concat(...list);
return html`<span class="configHeader">Config:</span>
<div class="config">
<pre><code>${properties.trim()}</code></pre>
</div>`;
}
}

_getContainerName(devService) {
return html`<span class="row"><vaadin-icon
icon="font-awesome-solid:box-open"></vaadin-icon>${devService.containerInfo.names[0]} (${devService.containerInfo.shortId})</span>`;
}

_getContainerImage(devService) {
if (devService.containerInfo) {
return html`<span><vaadin-icon
return html`<span class="row"><vaadin-icon
icon="font-awesome-solid:layer-group"></vaadin-icon>${devService.containerInfo.imageName}</span>`;
}
}

_getNetwork(devService) {
if (devService.containerInfo) {
if (devService.containerInfo.networks) {
return html`<span><vaadin-icon
icon="font-awesome-solid:network-wired"></vaadin-icon>${devService.containerInfo.networks.join(', ')}</span>`;
}
if (devService.containerInfo.networks) {
return html`<span class="row"><vaadin-icon
icon="font-awesome-solid:network-wired"></vaadin-icon>${devService.containerInfo.networks.join(', ')}</span>`;
}
}

_getExposedPorts(devService) {
if (devService.containerInfo) {
if (devService.containerInfo.exposedPorts) {
let ports = devService.containerInfo.exposedPorts;
const p = ports
.filter(p => p.ip)
.map(p => p.ip + ":" + p.publicPort + "->" + p.privatePort + "/" + p.type)
.join(', ');
return html`<span><vaadin-icon icon="font-awesome-solid:diagram-project"></vaadin-icon>${p}</span>`;
}
}
}
if (devService.containerInfo.exposedPorts) {
let ports = devService.containerInfo.exposedPorts;

const p = ports
.map(p => p.ip + ":" + p.publicPort + "->" + p.privatePort + "/" + p.type)
.join(', ');

_getConfig(devService) {
if (devService.configs) {
const list = [];
for (const [key, value] of Object.entries(devService.configs)) {
list.push(html`<li><code>${key}</code>=<code>${value}</code></li>`);
}
return html`${list}`;
return html`<span class="row"><vaadin-icon icon="font-awesome-solid:diagram-project"></vaadin-icon>${p}</span>`;
}
}

Expand Down