forked from quarkusio/quarkus
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- list WebSocket endpoints with info about open connections - resolves quarkusio#39464
- Loading branch information
Showing
9 changed files
with
449 additions
and
11 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
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
87 changes: 87 additions & 0 deletions
87
.../main/java/io/quarkus/websockets/next/deployment/devui/WebSocketServerDevUIProcessor.java
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,87 @@ | ||
| package io.quarkus.websockets.next.deployment.devui; | ||
|
|
||
| import java.util.ArrayList; | ||
| import java.util.HashMap; | ||
| import java.util.List; | ||
| import java.util.Map; | ||
| import java.util.regex.Matcher; | ||
| import java.util.regex.Pattern; | ||
|
|
||
| import io.quarkus.deployment.IsDevelopment; | ||
| import io.quarkus.deployment.annotations.BuildProducer; | ||
| import io.quarkus.deployment.annotations.BuildStep; | ||
| import io.quarkus.devui.spi.JsonRPCProvidersBuildItem; | ||
| import io.quarkus.devui.spi.page.CardPageBuildItem; | ||
| import io.quarkus.devui.spi.page.Page; | ||
| import io.quarkus.websockets.next.deployment.GeneratedEndpointBuildItem; | ||
| import io.quarkus.websockets.next.deployment.WebSocketEndpointBuildItem; | ||
| import io.quarkus.websockets.next.runtime.devui.WebSocketNextJsonRPCService; | ||
|
|
||
| public class WebSocketServerDevUIProcessor { | ||
|
|
||
| @BuildStep(onlyIf = IsDevelopment.class) | ||
| public void pages(List<WebSocketEndpointBuildItem> endpoints, List<GeneratedEndpointBuildItem> generatedEndpoints, | ||
| BuildProducer<CardPageBuildItem> cardPages) { | ||
|
|
||
| CardPageBuildItem pageBuildItem = new CardPageBuildItem(); | ||
|
|
||
| pageBuildItem.addBuildTimeData("endpoints", createEndpointsJson(endpoints, generatedEndpoints)); | ||
|
|
||
| pageBuildItem.addPage(Page.webComponentPageBuilder() | ||
| .title("Endpoints") | ||
| .icon("font-awesome-solid:plug") | ||
| .componentLink("qwc-wsn-endpoints.js") | ||
| .staticLabel(String.valueOf(endpoints.size()))); | ||
|
|
||
| cardPages.produce(pageBuildItem); | ||
| } | ||
|
|
||
| @BuildStep(onlyIf = IsDevelopment.class) | ||
| JsonRPCProvidersBuildItem rpcProvider() { | ||
| return new JsonRPCProvidersBuildItem(WebSocketNextJsonRPCService.class); | ||
| } | ||
|
|
||
| private List<Map<String, Object>> createEndpointsJson(List<WebSocketEndpointBuildItem> endpoints, | ||
| List<GeneratedEndpointBuildItem> generatedEndpoints) { | ||
| List<Map<String, Object>> json = new ArrayList<>(); | ||
| for (WebSocketEndpointBuildItem endpoint : endpoints) { | ||
| Map<String, Object> endpointJson = new HashMap<>(); | ||
| String clazz = endpoint.bean.getImplClazz().name().toString(); | ||
| endpointJson.put("clazz", clazz); | ||
| endpointJson.put("generatedClazz", | ||
| generatedEndpoints.stream().filter(ge -> ge.endpointClassName.equals(clazz)).findFirst() | ||
| .orElseThrow().generatedClassName); | ||
| endpointJson.put("path", getOriginalPath(endpoint.path)); | ||
| endpointJson.put("executionMode", endpoint.executionMode.toString()); | ||
| List<Map<String, Object>> callbacks = new ArrayList<>(); | ||
| addCallback(endpoint.onOpen, callbacks); | ||
| addCallback(endpoint.onBinaryMessage, callbacks); | ||
| addCallback(endpoint.onTextMessage, callbacks); | ||
| addCallback(endpoint.onPongMessage, callbacks); | ||
| addCallback(endpoint.onClose, callbacks); | ||
| endpointJson.put("callbacks", callbacks); | ||
| json.add(endpointJson); | ||
| } | ||
| return json; | ||
| } | ||
|
|
||
| private void addCallback(WebSocketEndpointBuildItem.Callback callback, List<Map<String, Object>> callbacks) { | ||
| if (callback != null) { | ||
| callbacks.add(Map.of("annotation", callback.annotation.toString(), "method", callback.method.toString())); | ||
| } | ||
| } | ||
|
|
||
| private static final Pattern PATH_PARAM_PATTERN = Pattern.compile(":[a-zA-Z0-9_]+"); | ||
|
|
||
| static String getOriginalPath(String path) { | ||
| StringBuilder sb = new StringBuilder(); | ||
| Matcher m = PATH_PARAM_PATTERN.matcher(path); | ||
| while (m.find()) { | ||
| // Replace :foo with {foo} | ||
| String match = m.group(); | ||
| m.appendReplacement(sb, "{" + match.subSequence(1, match.length()) + "}"); | ||
| } | ||
| m.appendTail(sb); | ||
| return sb.toString(); | ||
| } | ||
| } |
232 changes: 232 additions & 0 deletions
232
extensions/websockets-next/server/deployment/src/main/resources/dev-ui/qwc-wsn-endpoints.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,232 @@ | ||
|
|
||
| import { LitElement, html, css} from 'lit'; | ||
| import { columnBodyRenderer } from '@vaadin/grid/lit.js'; | ||
| import '@vaadin/grid'; | ||
| import '@vaadin/text-field'; | ||
| import { JsonRpc } from 'jsonrpc'; | ||
| import { endpoints } from 'build-time-data'; | ||
|
|
||
|
|
||
| export class QwcWebSocketNextEndpoints extends LitElement { | ||
|
|
||
| jsonRpc = new JsonRpc(this); | ||
|
|
||
| static styles = css` | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| } | ||
| .endpoints-table { | ||
| padding-bottom: 10px; | ||
| } | ||
| .annotation { | ||
| color: var(--lumo-contrast-50pct); | ||
| } | ||
| .connections-icon { | ||
| font-size: small; | ||
| color: var(--lumo-contrast-50pct); | ||
| cursor: pointer; | ||
| } | ||
| .top-bar { | ||
| display: flex; | ||
| align-items: baseline; | ||
| gap: 20px; | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| } | ||
| .top-bar h4 { | ||
| color: var(--lumo-contrast-60pct); | ||
| } | ||
| `; | ||
|
|
||
|
|
||
| static properties = { | ||
| _selectedEndpoint: {state: true}, | ||
| _endpointsAndConnections: {state: true} | ||
| }; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this._selectedEndpoint = null; | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| const generatedEndpoints = endpoints.map(e => e.generatedClazz); | ||
| this.jsonRpc.getConnections({"endpoints": generatedEndpoints}) | ||
| .then(jsonResponse => { | ||
| this._endpointsAndConnections = endpoints.map(e => { | ||
| e.connections = jsonResponse.result[e.generatedClazz]; | ||
| return e; | ||
| }); | ||
| }) | ||
| .then(() => { | ||
| this._conntectionStatusStream = this.jsonRpc.connectionStatus().onNext(jsonResponse => { | ||
| const endpoint = this._endpointsAndConnections.find(e => e.generatedClazz == jsonResponse.result.endpoint); | ||
| if (endpoint) { | ||
| if (jsonResponse.result.removed) { | ||
| const connectionId = jsonResponse.result.id; | ||
| endpoint.connections = endpoint.connections.filter(c => c.id != connectionId); | ||
| } else { | ||
| endpoint.connections = [ | ||
| ...endpoint.connections, | ||
| jsonResponse.result | ||
| ]; | ||
| } | ||
| // TODO this is inefficient but I did not find a way to update the endpoint list | ||
| // when a connection is added/removed | ||
| // https://lit.dev/docs/components/properties/#mutating-properties | ||
| this._endpointsAndConnections = this._endpointsAndConnections.map(e => e); | ||
| } | ||
| } | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); | ||
| this._conntectionStatusStream.cancel(); | ||
| } | ||
|
|
||
| render() { | ||
| if (this._endpointsAndConnections){ | ||
| if (this._selectedEndpoint){ | ||
| return this._renderConnections(); | ||
| } else{ | ||
| return this._renderEndpoints(); | ||
| } | ||
| } else { | ||
| return html`<span>Loading endpoints...</span>`; | ||
| } | ||
| } | ||
|
|
||
| // TODO I'm not really sure this info is interesting enough | ||
| // <vaadin-grid-column auto-width | ||
| // header="Execution mode" | ||
| // ${columnBodyRenderer(this._renderExecutionMode, [])} | ||
| // resizable> | ||
| // </vaadin-grid-column> | ||
| _renderEndpoints(){ | ||
| return html` | ||
| <vaadin-grid .items="${this._endpointsAndConnections}" class="endpoints-table" theme="no-border" all-rows-visible> | ||
| <vaadin-grid-column auto-width | ||
| header="Endpoint" | ||
| ${columnBodyRenderer(this._renderClazz, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| <vaadin-grid-column auto-width | ||
| header="Path" | ||
| ${columnBodyRenderer(this._renderPath, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| <vaadin-grid-column auto-width | ||
| header="Callbacks" | ||
| ${columnBodyRenderer(this._renderCallbacks, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| <vaadin-grid-column auto-width | ||
| header="Connections" | ||
| ${columnBodyRenderer(this._renderConnectionsButton, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| </vaadin-grid> | ||
| `; | ||
| } | ||
|
|
||
| _renderConnections(){ | ||
| return html` | ||
| ${this._renderTopBar()} | ||
| <vaadin-grid .items="${this._selectedEndpoint.connections}" class="connections-table" theme="no-border" all-rows-visible> | ||
| <vaadin-grid-column auto-width | ||
| header="Id" | ||
| ${columnBodyRenderer(this._renderId, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| <vaadin-grid-column auto-width | ||
| header="Handshake Path" | ||
| ${columnBodyRenderer(this._renderHandshakePath, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| <vaadin-grid-column auto-width | ||
| header="Opened" | ||
| ${columnBodyRenderer(this._renderOpenedAt, [])} | ||
| resizable> | ||
| </vaadin-grid-column> | ||
| </vaadin-grid> | ||
| `; | ||
| } | ||
|
|
||
| _renderTopBar(){ | ||
| return html` | ||
| <div class="top-bar"> | ||
| <vaadin-button @click="${this._showEndpoints}"> | ||
| <vaadin-icon icon="font-awesome-solid:caret-left" slot="prefix"></vaadin-icon> | ||
| Back | ||
| </vaadin-button> | ||
| <h4>${this._selectedEndpoint.clazz} · Open Connections</h4> | ||
| </div>`; | ||
| } | ||
|
|
||
| _renderPath(endpoint) { | ||
| return html` | ||
| <code>${endpoint.path}</code> | ||
| `; | ||
| } | ||
|
|
||
| _renderClazz(endpoint) { | ||
| return html` | ||
| <strong>${endpoint.clazz}</strong> | ||
| `; | ||
| } | ||
|
|
||
| _renderExecutionMode(endpoint) { | ||
| return html` | ||
| ${endpoint.executionMode} | ||
| `; | ||
| } | ||
|
|
||
| _renderCallbacks(endpoint) { | ||
| return endpoint.callbacks ? html`<ul> | ||
| ${ endpoint.callbacks.map(callback => | ||
| html`<li><div class="annotation"><code>${callback.annotation}</code></div><div><code>${callback.method}</code></div></li>` | ||
| )}</ul>`: html``; | ||
| } | ||
|
|
||
| _renderConnectionsButton(endpoint) { | ||
| let ret = html` | ||
| <vaadin-icon class="connections-icon" icon="font-awesome-solid:plug" @click=${() => this._showConnections(endpoint)}></vaadin-icon> | ||
| `; | ||
| ret = html`${ret} <span>${endpoint.connections.length}</span>`; | ||
| return ret; | ||
| } | ||
|
|
||
| _renderId(connection) { | ||
| return html` | ||
| ${connection.id} | ||
| `; | ||
| } | ||
|
|
||
| _renderHandshakePath(connection) { | ||
| return html` | ||
| <code>${connection.handshakePath}</code> | ||
| `; | ||
| } | ||
|
|
||
| _renderOpenedAt(connection) { | ||
| return html` | ||
| ${connection.creationTime} | ||
| `; | ||
| } | ||
|
|
||
| _showConnections(endpoint){ | ||
| this._selectedEndpoint = endpoint; | ||
| } | ||
|
|
||
| _showEndpoints(){ | ||
| this._selectedEndpoint = null; | ||
| } | ||
|
|
||
| } | ||
| customElements.define('qwc-wsn-endpoints', QwcWebSocketNextEndpoints); |
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
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
Oops, something went wrong.