You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/17 11:16:55 UTC
[incubator-streampipes] branch STREAMPIPES-558 updated: [hotfix] Improve selection of data configs in data explorer
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-558 by this push:
new c571f960e [hotfix] Improve selection of data configs in data explorer
c571f960e is described below
commit c571f960e6a0fdf789b3edfc764c1e99eea075d9
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jul 17 13:16:36 2022 +0200
[hotfix] Improve selection of data configs in data explorer
---
.../data-explorer-designer-panel.component.html | 4 +-
.../data-explorer-designer-panel.component.ts | 18 +++++++-
...ta-explorer-widget-data-settings.component.html | 10 ++--
...data-explorer-widget-data-settings.component.ts | 54 +++++++++++++++++-----
.../field-selection-panel.component.ts | 11 +++++
5 files changed, 77 insertions(+), 20 deletions(-)
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
index 8866e1819..af0e26f1c 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
@@ -39,7 +39,8 @@
<div fxFlex fxLayout="column" class="designer-panel-config">
<div *ngIf="selectedIndex == 0">
- <sp-data-explorer-widget-data-settings [(dataLakeMeasure)]="dataLakeMeasure"
+ <sp-data-explorer-widget-data-settings #dataSettingsPanel
+ [(dataLakeMeasure)]="dataLakeMeasure"
[dataConfig]="currentlyConfiguredWidget.dataConfig"
[newWidgetMode]="newWidgetMode"
[widgetId]="currentlyConfiguredWidget._id"
@@ -64,6 +65,7 @@
*ngIf="newWidgetMode">
<button mat-button mat-raised-button color="accent"
data-cy="data-explorer-select-data-set-next-btn"
+ [disabled]="selectedIndex === 0 && (!(currentlyConfiguredWidget.dataConfig.sourceConfigs) || currentlyConfiguredWidget.dataConfig.sourceConfigs.length === 0 || currentlyConfiguredWidget.dataConfig.sourceConfigs[0].measureName === '')"
*ngIf="newWidgetMode && selectedIndex == 0"
(click)="selectedIndex = 1">
Next
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts
index e2e814aac..ec7b7e004 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts
@@ -16,9 +16,10 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { DataExplorerWidgetModel, DataLakeMeasure } from '@streampipes/platform-services';
import { Tuple2 } from '../../../core-model/base/Tuple2';
+import { DataExplorerWidgetDataSettingsComponent } from './data-settings/data-explorer-widget-data-settings.component';
@Component({
selector: 'sp-data-explorer-designer-panel',
@@ -38,6 +39,8 @@ export class DataExplorerDesignerPanelComponent implements OnInit {
selectedIndex = 0;
+ dataSettingsPanel: DataExplorerWidgetDataSettingsComponent;
+
ngOnInit(): void {
}
@@ -59,9 +62,15 @@ export class DataExplorerDesignerPanelComponent implements OnInit {
this.addWidgetEmitter.emit({ a: this.dataLakeMeasure, b: this.currentlyConfiguredWidget });
}
- modifyWidgetMode(widget: DataExplorerWidgetModel, newWidgetMode: boolean) {
+ modifyWidgetMode(widget: DataExplorerWidgetModel,
+ newWidgetMode: boolean) {
this.currentlyConfiguredWidget = widget;
this.newWidgetMode = newWidgetMode;
+ if (this.dataSettingsPanel) {
+ setTimeout(() => {
+ this.dataSettingsPanel.checkSourceTypes();
+ });
+ }
}
closeDesignerPanel() {
@@ -72,4 +81,9 @@ export class DataExplorerDesignerPanelComponent implements OnInit {
this.selectedIndex = 0;
this.newWidgetMode = true;
}
+
+ @ViewChild('dataSettingsPanel')
+ public set content(dataSettingsPanel: DataExplorerWidgetDataSettingsComponent) {
+ this.dataSettingsPanel = dataSettingsPanel;
+ }
}
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
index dee6ba4f5..7edc2e249 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
@@ -48,16 +48,16 @@
<mat-radio-group
class="selection-radio-group"
[(ngModel)]="sourceConfig.sourceType">
- <mat-radio-button class="selection-radio-button" [value]="'pipeline'">Pipeline
+ <mat-radio-button class="selection-radio-button" [value]="'pipeline'" [disabled]="availablePipelines.length === 0">Pipeline
</mat-radio-button>
<mat-radio-button class="selection-radio-button" [value]="'measurement'">Measurement
</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field color="accent" fxFlex="100" *ngIf="sourceConfig.sourceType == 'pipeline'">
- <mat-label>Data Explorer Sinks</mat-label>
+ <mat-label>Select data explorer sink</mat-label>
<mat-select [(value)]="sourceConfig.measureName"
- (selectionChange)="updateMeasure(sourceConfig, $event)"
+ (selectionChange)="updateMeasure(sourceConfig, $event.value)"
data-cy="data-explorer-select-data-set">
<mat-option *ngFor="let pipeline of availablePipelines"
[value]="pipeline.measureName">
@@ -66,9 +66,9 @@
</mat-select>
</mat-form-field>
<mat-form-field color="accent" fxFlex="100" *ngIf="sourceConfig.sourceType == 'measurement'">
- <mat-label>Data Lake Measurements</mat-label>
+ <mat-label>Select measurement</mat-label>
<mat-select [(value)]="sourceConfig.measureName"
- (selectionChange)="updateMeasure(sourceConfig, $event)">
+ (selectionChange)="updateMeasure(sourceConfig, $event.value)">
<mat-option [value]="measurement.measureName"
*ngFor="let measurement of availableMeasurements">
<span class="pipeline-name">{{ measurement.measureName }}</span>
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
index 6bb4c6b3a..e53af98f6 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
@@ -51,8 +51,8 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit {
@ViewChild('fieldSelectionPanel')
fieldSelectionPanel: FieldSelectionPanelComponent;
- availablePipelines: DataLakeMeasure[];
- availableMeasurements: DataLakeMeasure[];
+ availablePipelines: DataLakeMeasure[] = [];
+ availableMeasurements: DataLakeMeasure[] = [];
step = 0;
@@ -79,14 +79,42 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit {
p.eventSchema = measurement.eventSchema;
});
- if (!this.dataConfig.sourceConfigs) {
- this.addDataSource();
+ if (!(this.dataConfig.sourceConfigs)) {
+ const defaultConfigs = this.findDefaultConfig();
+ this.addDataSource(defaultConfigs.measureName, defaultConfigs.sourceType);
+ 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';
}
});
}
- updateMeasure(sourceConfig: SourceConfig, event: MatSelectChange) {
- sourceConfig.measure = this.findMeasure(event.value);
+ existsPipelineWithMeasure(measureName: string) {
+ return this.availablePipelines.find(pipeline => pipeline.measureName === measureName) !== undefined;
+ }
+
+ 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) {
+ return { measureName: this.availableMeasurements[0].measureName, sourceType: 'measurement'};
+ } else {
+ return { measureName: undefined, sourceType: undefined };
+ }
+ }
+
+ updateMeasure(sourceConfig: SourceConfig, measureName: string) {
+ sourceConfig.measure = this.findMeasure(measureName);
sourceConfig.queryConfig.fields = [];
if (this.fieldSelectionPanel) {
this.fieldSelectionPanel.applyDefaultFields();
@@ -94,7 +122,7 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit {
}
- findMeasure(measureName) {
+ findMeasure(measureName: string) {
return this.availablePipelines.find(pipeline => pipeline.measureName === measureName) ||
this.availableMeasurements.find(m => m.measureName === measureName);
}
@@ -108,16 +136,18 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit {
this.triggerDataRefresh();
}
- addDataSource() {
+ addDataSource(measureName = '',
+ sourceType: 'pipeline' | 'measurement' = 'pipeline') {
if (!this.dataConfig.sourceConfigs) {
this.dataConfig.sourceConfigs = [];
}
- this.dataConfig.sourceConfigs.push(this.makeSourceConfig());
+ this.dataConfig.sourceConfigs.push(this.makeSourceConfig(measureName, sourceType));
}
- makeSourceConfig(): SourceConfig {
+ makeSourceConfig(measureName = '',
+ sourceType: 'pipeline' | 'measurement' = 'pipeline'): SourceConfig {
return {
- measureName: '',
+ measureName,
queryConfig: {
selectedFilters: [],
limit: 100,
@@ -126,7 +156,7 @@ export class DataExplorerWidgetDataSettingsComponent implements OnInit {
aggregationValue: 1
},
queryType: 'raw',
- sourceType: 'pipeline'
+ sourceType
};
}
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
index 689c4288b..75ecc2f01 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
@@ -28,6 +28,8 @@ import { WidgetConfigurationService } from '../../../../services/widget-configur
})
export class FieldSelectionPanelComponent implements OnInit {
+ MAX_INITIAL_FIELDS = 3;
+
@Input() sourceConfig: SourceConfig;
@Input() widgetId: string;
@@ -49,6 +51,7 @@ export class FieldSelectionPanelComponent implements OnInit {
applyDefaultFields() {
if (this.sourceConfig.queryConfig.fields.length === 0) {
this.addAllFields();
+ this.selectInitialFields();
} else {
const oldFields = this.sourceConfig.queryConfig.fields;
this.sourceConfig.queryConfig.fields = [];
@@ -67,6 +70,14 @@ export class FieldSelectionPanelComponent implements OnInit {
});
}
+ selectInitialFields() {
+ this.sourceConfig.queryConfig.fields.forEach((field, index) => {
+ if (index < this.MAX_INITIAL_FIELDS) {
+ field.selected = true;
+ }
+ });
+ }
+
selectAllFields() {
this.selectFields(true);
}