This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch remove-pipeline-selection-data-explorer in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 0838cd7f6bdd1fb9dc3684916b1a92ec27517d35 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Nov 24 16:57:14 2025 +0100 feat: Remove pipeline selection from data explorer query selector --- .../model/datalake/data-lake-query-config.model.ts | 1 - .../data-explorer-chart-container.component.html | 231 ++++++++++---------- .../data-explorer-chart-container.component.scss | 2 +- .../data-explorer-designer-panel.component.scss | 1 + ...ta-explorer-widget-data-settings.component.html | 232 +++------------------ ...data-explorer-widget-data-settings.component.ts | 113 +++------- 6 files changed, 175 insertions(+), 405 deletions(-) diff --git a/ui/projects/streampipes/platform-services/src/lib/model/datalake/data-lake-query-config.model.ts b/ui/projects/streampipes/platform-services/src/lib/model/datalake/data-lake-query-config.model.ts index 27dcfe1c21..f2bc4c9e39 100644 --- a/ui/projects/streampipes/platform-services/src/lib/model/datalake/data-lake-query-config.model.ts +++ b/ui/projects/streampipes/platform-services/src/lib/model/datalake/data-lake-query-config.model.ts @@ -67,7 +67,6 @@ export interface SourceConfig { measure?: DataLakeMeasure; queryConfig: QueryConfig; queryType: 'raw' | 'aggregated' | 'single'; - sourceType: 'pipeline' | 'measurement'; } export interface DataExplorerDataConfig { diff --git a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.html b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.html index 6928d45086..a2ff19e7a4 100644 --- a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.html +++ b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.html @@ -33,137 +33,148 @@ > @if (!previewMode) { <div class="widget-header h-40"> - <div - fxFlex="100" - fxLayout="row" - fxLayoutAlign="start center" - class="widget-header-text" - > - {{ configuredWidget.baseAppearanceConfig.widgetTitle }} - </div> - @if (!kioskMode) { - <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"> - @if (editMode) { - @if (timerActive) { - <mat-spinner - [diameter]="20" - color="primary" + <div fxFlex="100" fxLayout="row"> + <div + fxFlex + fxLayout="row" + fxLayoutAlign="start center" + class="widget-header-text" + > + {{ configuredWidget.baseAppearanceConfig.widgetTitle }} + </div> + @if (!kioskMode) { + <div fxLayout="row" fxLayoutAlign="end center"> + @if (editMode) { + @if (timerActive) { + <mat-spinner + [diameter]="20" + color="primary" + class="mr-10" + > + </mat-spinner> + } + <sp-label + size="small" + [labelBackground]=" + configuredWidget.baseAppearanceConfig + .textColor + " + [labelText]="loadingTime + 's'" class="mr-10" - > - </mat-spinner> + ></sp-label> } - <sp-label - size="small" - [labelBackground]=" - configuredWidget.baseAppearanceConfig - .textColor - " - [labelText]="loadingTime + 's'" - class="mr-10" - ></sp-label> - } - @if (!dataViewMode) { - <button - mat-icon-button - [matMenuTriggerFor]="menu" - [matTooltip]="'More options' | translate" - [attr.data-cy]=" - 'more-options-' + - configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll( - ' ', - '' - ) - " - > - <mat-icon>more_vert</mat-icon> - </button> - } - <mat-menu #menu="matMenu"> - <button - mat-menu-item - (click)="downloadDataAsFile()" - > - <mat-icon>get_app</mat-icon> - <span>{{ 'Download data' | translate }}</span> - </button> - @if (hasDataExplorerWritePrivileges) { + @if (!dataViewMode) { <button - mat-menu-item - (click)="startEditMode()" + mat-icon-button + [matMenuTriggerFor]="menu" + [matTooltip]="'More options' | translate" [attr.data-cy]=" - 'start-edit-' + + 'more-options-' + configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll( ' ', '' ) " > - <mat-icon>edit</mat-icon> - <span>{{ 'Edit Chart' | translate }}</span> + <mat-icon>more_vert</mat-icon> </button> } - </mat-menu> - @if (!globalTimeEnabled) { - <button - mat-icon-button - [matMenuTriggerFor]="optMenu" - data-cy="options-data-explorer" - #menuTrigger="matMenuTrigger" - [matTooltip]="tooltipText" - matTooltipClass="no-wrap-tooltip" - > - <mat-icon - [color]=" - timeSettingsModified - ? 'primary' - : 'default' - " - >alarm_clock</mat-icon - > - </button> - } - <mat-menu #optMenu="matMenu" class="large-menu"> - @if (quickSelections) { - <sp-time-selector-menu - #timeSelectorMenu - [timeSettings]="clonedTimeSettings" - [quickSelections]="quickSelections" - [enableTimePicker]="enableTimePicker" - [maxDayRange]="maxDayRange" - [labels]="labels" - (timeSettingsEmitter)=" - modifyWidgetTimeSettings($event) - " - class="w-100" + <mat-menu #menu="matMenu"> + <button + mat-menu-item + (click)="downloadDataAsFile()" > + <mat-icon>get_app</mat-icon> + <span>{{ + 'Download data' | translate + }}</span> + </button> + @if (hasDataExplorerWritePrivileges) { <button - mat-flat-button - class="mat-basic" - (click)="resetWidgetTimeSettings()" + mat-menu-item + (click)="startEditMode()" + [attr.data-cy]=" + 'start-edit-' + + configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll( + ' ', + '' + ) + " > - {{ 'Reset' | translate }} + <mat-icon>edit</mat-icon> + <span>{{ + 'Edit Chart' | translate + }}</span> </button> - </sp-time-selector-menu> - } - </mat-menu> - @if (!dataViewMode) { - @if (editMode && hasDataExplorerWritePrivileges) { + } + </mat-menu> + @if (!globalTimeEnabled) { <button mat-icon-button - (click)="removeWidget()" - [matTooltip]="'Delete Chart' | translate" - [attr.data-cy]=" - 'remove-' + - configuredWidget.baseAppearanceConfig - .widgetTitle - " + [matMenuTriggerFor]="optMenu" + data-cy="options-data-explorer" + #menuTrigger="matMenuTrigger" + [matTooltip]="tooltipText" + matTooltipClass="no-wrap-tooltip" > - <mat-icon>clear</mat-icon> + <mat-icon + [color]=" + timeSettingsModified + ? 'primary' + : 'default' + " + >alarm_clock</mat-icon + > </button> } - } - </div> - } + <mat-menu #optMenu="matMenu" class="large-menu"> + @if (quickSelections) { + <sp-time-selector-menu + #timeSelectorMenu + [timeSettings]="clonedTimeSettings" + [quickSelections]="quickSelections" + [enableTimePicker]="enableTimePicker" + [maxDayRange]="maxDayRange" + [labels]="labels" + (timeSettingsEmitter)=" + modifyWidgetTimeSettings($event) + " + class="w-100" + > + <button + mat-flat-button + class="mat-basic" + (click)="resetWidgetTimeSettings()" + > + {{ 'Reset' | translate }} + </button> + </sp-time-selector-menu> + } + </mat-menu> + @if (!dataViewMode) { + @if ( + editMode && hasDataExplorerWritePrivileges + ) { + <button + mat-icon-button + (click)="removeWidget()" + [matTooltip]=" + 'Delete Chart' | translate + " + [attr.data-cy]=" + 'remove-' + + configuredWidget + .baseAppearanceConfig + .widgetTitle + " + > + <mat-icon>clear</mat-icon> + </button> + } + } + </div> + } + </div> </div> } <div diff --git a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss index 875f5fed06..592687545c 100644 --- a/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss +++ b/ui/src/app/data-explorer-shared/components/chart-container/data-explorer-chart-container.component.scss @@ -52,7 +52,7 @@ } .widget-header-text { - font-size: var(--mat-sys-body-small-font); + font-size: var(--mat-sys-body-large-size); font-weight: bold; } diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-explorer-designer-panel.component.scss b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-explorer-designer-panel.component.scss index dfd4e95fca..4869604b4a 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-explorer-designer-panel.component.scss +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-explorer-designer-panel.component.scss @@ -21,6 +21,7 @@ height: 100%; overflow-y: hidden; overflow-x: hidden; + margin-left: 5px; } .designer-panel-config { diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.html b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.html index 206b183efb..86d2f6fdbc 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.html +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.html @@ -64,34 +64,8 @@ </div> </mat-expansion-panel-header> <div fxFlex="100" fxLayout="column" class="mt-10"> - <sp-configuration-box [title]="'Data Source' | translate"> - <div header fxFlex class="header-container"> - <span fxFlex></span> - <button - mat-icon-button - class="pull-btn-right" - [matTooltip]=" - expandFieldsDataSource - ? ('Expand Less' | translate) - : ('Expand More' | translate) - " - (click)="toggleExpandFieldsDataSource()" - [disabled]=" - availablePipelines.length === 0 && - availableMeasurements.length === 0 - " - > - <mat-icon>{{ - expandFieldsDataSource - ? 'expand_less' - : 'expand_more' - }}</mat-icon> - </button> - </div> - @if ( - availablePipelines.length === 0 && - availableMeasurements.length === 0 - ) { + <sp-configuration-box [title]="'Dataset' | translate"> + @if (availableMeasurements.length === 0) { <div class="warning-container" fxLayout="column" @@ -139,186 +113,36 @@ </div> </div> } - @if ( - availablePipelines.length !== 0 || - availableMeasurements.length !== 0 - ) { - <div> - <mat-radio-group - class="selection-radio-group" - [(ngModel)]="sourceConfig.sourceType" + @if (availableMeasurements.length !== 0) { + <mat-form-field + color="accent" + fxFlex="100" + appearance="outline" + subscriptSizing="dynamic" + > + <mat-select + [(value)]="sourceConfig.measureName" + (selectionChange)=" + updateMeasure( + sourceConfig, + $event.value + ) + " > - @if ( - expandFieldsDataSource || - sourceConfig.sourceType === 'pipeline' - ) { - <div - class="radio-option-box" - fxLayout="column" - [ngClass]="{ - 'radio-option-box-accent': - sourceConfig.sourceType === - 'pipeline' - }" - > - <mat-radio-button - class="selection-radio-button" - [value]="'pipeline'" - [disabled]=" - availablePipelines.length === - 0 - " - > - <b>{{ - 'Pipeline' | translate - }}</b> - </mat-radio-button> - <p class="description"> - {{ - 'Select this option if you want to use data from one of your pipelines.' - | translate - }} - </p> - @if ( - sourceConfig.sourceType === - 'pipeline' && - availablePipelines.length !== 0 - ) { - <div - class="selection-form-field" - > - <mat-form-field - color="accent" - fxFlex="100" - appearance="outline" - > - <mat-select - [panelClass]=" - 'form-field-small' - " - [(value)]=" - sourceConfig.measureName - " - (selectionChange)=" - updateMeasure( - sourceConfig, - $event.value - ) - " - data-cy="data-explorer-select-data-set" - > - @for ( - pipeline of availablePipelines; - track pipeline - ) { - <mat-option - [value]=" - pipeline.measureName - " - > - <span - class="pipeline-name" - >{{ - pipeline.pipelineName - }}</span - ><br /> - <span - class="measure-name" - >{{ - pipeline.measureName - }}</span - > - </mat-option> - } - </mat-select> - </mat-form-field> - </div> - } - </div> - } - @if ( - expandFieldsDataSource || - sourceConfig.sourceType === - 'measurement' + @for ( + measurement of availableMeasurements; + track measurement ) { - <div - class="radio-option-box" - fxLayout="column" - [ngClass]="{ - 'radio-option-box-accent': - sourceConfig.sourceType === - 'measurement' - }" + <mat-option + [value]="measurement.measureName" > - <mat-radio-button - class="selection-radio-button" - [value]="'measurement'" - [disabled]=" - availableMeasurements.length === - 0 - " - > - <b>{{ - 'Database Identifier' - | translate - }}</b> - </mat-radio-button> - <p class="description"> - {{ - 'Choose this option to work with individual measurements from a Data Lake.' - | translate - }} - </p> - @if ( - sourceConfig.sourceType === - 'measurement' && - availableMeasurements.length !== - 0 - ) { - <div - class="selection-form-field" - > - <mat-form-field - color="accent" - fxFlex="100" - appearance="outline" - > - <mat-select - [(value)]=" - sourceConfig.measureName - " - (selectionChange)=" - updateMeasure( - sourceConfig, - $event.value - ) - " - > - @for ( - measurement of availableMeasurements; - track measurement - ) { - <mat-option - [value]=" - measurement.measureName - " - > - <span - class="pipeline-name" - >{{ - measurement.measureName - }}</span - > - </mat-option> - } - </mat-select> - </mat-form-field> - </div> - } - </div> + <span class="pipeline-name">{{ + measurement.measureName + }}</span> + </mat-option> } - </mat-radio-group> - </div> + </mat-select> + </mat-form-field> } </sp-configuration-box> @if (sourceConfig.measureName) { diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts index b98d442633..8a1f195b13 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts @@ -25,7 +25,6 @@ import { ViewChild, } from '@angular/core'; import { - ChartService, DataExplorerDataConfig, DataExplorerWidgetModel, DataLakeMeasure, @@ -33,7 +32,6 @@ import { SourceConfig, } from '@streampipes/platform-services'; import { Tuple2 } from '../../../../../core-model/base/Tuple2'; -import { zip } from 'rxjs'; import { Router } from '@angular/router'; import { ChartConfigurationService } from '../../../../../data-explorer-shared/services/chart-configuration.service'; import { FieldSelectionPanelComponent } from './field-selection-panel/field-selection-panel.component'; @@ -70,7 +68,6 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { @ViewChild('groupSelectionPanel') groupSelectionPanel: GroupSelectionPanelComponent; - availablePipelines: DataLakeMeasure[] = []; availableMeasurements: DataLakeMeasure[] = []; step = 0; @@ -79,7 +76,6 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { expandFieldsQuery = true; constructor( - private dataExplorerService: ChartService, private datalakeRestService: DatalakeRestService, private widgetConfigService: ChartConfigurationService, private fieldProviderService: DataExplorerFieldProviderService, @@ -92,85 +88,36 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { } loadPipelinesAndMeasurements() { - zip( - this.dataExplorerService.getAllPersistedDataStreams(), - this.datalakeRestService.getAllMeasurementSeries(), - ).subscribe(response => { - this.availablePipelines = response[0].filter( - p => - response[1].find(m => m.measureName === p.measureName) !== - undefined, - ); - this.availableMeasurements = response[1]; - - this.availablePipelines.sort((a, b) => - a.pipelineName.localeCompare(b.pipelineName), - ); - this.availableMeasurements.sort((a, b) => - a.measureName.localeCompare(b.measureName), - ); - - // replace pipeline event schemas. Reason: Available measures do not contain field for timestamp - this.availablePipelines.forEach(p => { - const measurement = this.availableMeasurements.find(m => { - return m.measureName === p.measureName; - }); - p.eventSchema = measurement.eventSchema; - }); - - if (!this.dataConfig.sourceConfigs) { - const defaultConfigs = this.findDefaultConfig(); - this.addDataSource( - defaultConfigs.measureName, - defaultConfigs.sourceType, + this.datalakeRestService + .getAllMeasurementSeries() + .subscribe(response => { + this.availableMeasurements = response; + this.availableMeasurements.sort((a, b) => + a.measureName.localeCompare(b.measureName), ); - if (defaultConfigs.measureName !== undefined) { - this.updateMeasure( - this.dataConfig.sourceConfigs[0], - defaultConfigs.measureName, - ); - } - } else { - this.checkSourceTypes(); - } - }); - } - checkSourceTypes() { - this.dataConfig.sourceConfigs.forEach(sourceConfig => { - if ( - sourceConfig.sourceType === 'pipeline' && - !this.existsPipelineWithMeasure(sourceConfig.measureName) - ) { - sourceConfig.sourceType = 'measurement'; - } - }); - } - - existsPipelineWithMeasure(measureName: string) { - return ( - this.availablePipelines.find( - pipeline => pipeline.measureName === measureName, - ) !== undefined - ); + if (!this.dataConfig.sourceConfigs) { + const defaultConfigs = this.findDefaultConfig(); + this.addDataSource(defaultConfigs.measureName); + if (defaultConfigs.measureName !== undefined) { + this.updateMeasure( + this.dataConfig.sourceConfigs[0], + defaultConfigs.measureName, + ); + } + } + }); } findDefaultConfig(): { measureName: string; - sourceType: 'pipeline' | 'measurement'; } { - if (this.availablePipelines.length > 0) { - return { - measureName: this.availablePipelines[0].measureName, - sourceType: 'pipeline', - }; - } else if (this.availableMeasurements.length > 0) { + if (this.availableMeasurements.length > 0) { return { measureName: this.availableMeasurements[0].measureName, - sourceType: 'measurement', }; } else { - return { measureName: undefined, sourceType: undefined }; + return { measureName: undefined }; } } @@ -189,11 +136,8 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { } findMeasure(measureName: string) { - return ( - this.availablePipelines.find( - pipeline => pipeline.measureName === measureName, - ) || - this.availableMeasurements.find(m => m.measureName === measureName) + return this.availableMeasurements.find( + m => m.measureName === measureName, ); } @@ -206,22 +150,14 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { this.triggerDataRefresh(); } - addDataSource( - measureName = '', - sourceType: 'pipeline' | 'measurement' = 'pipeline', - ) { + addDataSource(measureName = '') { if (!this.dataConfig.sourceConfigs) { this.dataConfig.sourceConfigs = []; } - this.dataConfig.sourceConfigs.push( - this.makeSourceConfig(measureName, sourceType), - ); + this.dataConfig.sourceConfigs.push(this.makeSourceConfig(measureName)); } - makeSourceConfig( - measureName = '', - sourceType: 'pipeline' | 'measurement' = 'pipeline', - ): SourceConfig { + makeSourceConfig(measureName = ''): SourceConfig { return { measureName, queryConfig: { @@ -232,7 +168,6 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit { aggregationValue: 1, }, queryType: 'raw', - sourceType, }; }
