diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration.js index 00cb0358a5833..17299c773a2db 100644 --- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration.js +++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration.js @@ -36,6 +36,12 @@ export class QwcConfiguration extends observeState(LitElement) { overflow: hidden; } + .confTopBar { + display: flex; + justify-content: space-between; + align-items: center; + } + vaadin-grid { height: 100%; } @@ -81,10 +87,13 @@ export class QwcConfiguration extends observeState(LitElement) { `; static properties = { - _filtered: {state: true, type: Array}, + _filtered: {state: true, type: Array}, // Filter the visible configuration + _visibleConfiguration: {state: true, type: Array}, // Either all or just user's configuration _values: {state: true}, _detailsOpenedItem: {state: true, type: Array}, _busy: {state: true}, + _showOnlyOwnProperties: {state: true}, + _searchTerm: {state: true} }; constructor() { @@ -95,13 +104,16 @@ export class QwcConfiguration extends observeState(LitElement) { if(this._filteredValue){ this._filteredValue = this._filteredValue.replaceAll(",", " OR "); } - - this._filtered = devuiState.allConfiguration; + this._visibleConfiguration = devuiState.allConfiguration; + this._filtered = this._visibleConfiguration; this.jsonRpc.getAllValues().then(e => { this._values = e.result; }); this._detailsOpenedItem = []; this._busy = null; + + this._showOnlyOwnProperties = false; + this._searchTerm = ''; } render() { @@ -129,31 +141,56 @@ export class QwcConfiguration extends observeState(LitElement) { } _filterTextChanged(e) { - const searchTerm = (e.detail.value || '').trim(); - if (searchTerm === '') { - this._filtered = devuiState.allConfiguration; + this._searchTerm = (e.detail.value || '').trim(); + return this._filterGrid(); + } + + _filterGrid(){ + if (this._searchTerm === '') { + this._filtered = this._visibleConfiguration; return; } - this._filtered = devuiState.allConfiguration.filter((prop) => { - return this._match(prop.name, searchTerm) || this._match(prop.description, searchTerm) + this._filtered = this._visibleConfiguration.filter((prop) => { + return this._match(prop.name, this._searchTerm) || this._match(prop.description, this._searchTerm) }); } _render() { return html`
- - - ${this._filtered.length} - +
+ + + ${this._filtered.length} + + + +
${this._renderGrid()}
`; } + _toggleShowOnlyOwnProperties(onlyMine){ + this._showOnlyOwnProperties = onlyMine; + if(this._showOnlyOwnProperties){ + this._visibleConfiguration = devuiState.allConfiguration.filter((prop) => { + return (prop.configValue.sourceName && prop.configValue.sourceName.startsWith("PropertiesConfigSource[source") + && prop.configValue.sourceName.endsWith("/application.properties]")); + }); + }else { + this._visibleConfiguration = devuiState.allConfiguration; + } + return this._filterGrid(); + } + _renderGrid(){ if(this._busy){ return html`${this._renderStyledGrid("disabledDatatable")}`;