You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2021/10/15 08:36:12 UTC
[incubator-streampipes] branch dev updated: [hotfix] Add auto
refresh for filter function in data explorer
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 7bb1a9a [hotfix] Add auto refresh for filter function in data explorer
7bb1a9a is described below
commit 7bb1a9ae22356d65fa2bd1f78530844e387bc2b6
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Oct 15 10:35:36 2021 +0200
[hotfix] Add auto refresh for filter function in data explorer
---
.../datalake/DatalakeQueryParameterBuilder.ts | 12 +++++++++--
...ta-explorer-widget-data-settings.component.html | 9 +++++---
.../filter-selection-panel.component.html | 21 +++++++++++++-----
.../filter-selection-panel.component.ts | 25 ++++++++++++++++++----
4 files changed, 53 insertions(+), 14 deletions(-)
diff --git a/ui/src/app/core-services/datalake/DatalakeQueryParameterBuilder.ts b/ui/src/app/core-services/datalake/DatalakeQueryParameterBuilder.ts
index d104d7b..215c1d6 100644
--- a/ui/src/app/core-services/datalake/DatalakeQueryParameterBuilder.ts
+++ b/ui/src/app/core-services/datalake/DatalakeQueryParameterBuilder.ts
@@ -122,8 +122,16 @@ export class DatalakeQueryParameterBuilder {
}
public withFilters(filterConditions: SelectedFilter[]): DatalakeQueryParameterBuilder {
- const filters = filterConditions.map(f => '[' + f.field.runtimeName + ';' + f.operator + ';' + f.value + ']');
- this.queryParams.filter = filters.toString();
+ const filters = [];
+ filterConditions.forEach(filter => {
+ if (filter.field && filter.value && filter.operator) {
+ filters.push('[' + filter.field.runtimeName + ';' + filter.operator + ';' + filter.value + ']');
+ }
+ });
+
+ if (filters.length > 0) {
+ this.queryParams.filter = filters.toString();
+ }
return this;
}
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 dd0ff45..99e6674 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
@@ -85,7 +85,8 @@
<mat-label>
<span> Limit</span>
</mat-label>
- <input [(ngModel)]="sourceConfig.queryConfig.limit" matInput (change)="triggerDataRefresh()">
+ <input [(ngModel)]="sourceConfig.queryConfig.limit" matInput
+ (change)="triggerDataRefresh()">
</mat-form-field>
<mat-form-field fxFlex="100" color="accent">
@@ -98,7 +99,8 @@
<div fxLayout="column" fxFlex="100"
*ngIf="sourceConfig.queryType === 'aggregated'">
<div>
- <mat-checkbox color="accent" [(ngModel)]="sourceConfig.queryConfig.autoAggregate" (change)="triggerDataRefresh()">
+ <mat-checkbox color="accent" [(ngModel)]="sourceConfig.queryConfig.autoAggregate"
+ (change)="triggerDataRefresh()">
Auto-Aggregate
</mat-checkbox>
</div>
@@ -116,7 +118,8 @@
</div>
<div fxLayout="column" fxFlex="100" class="data-explorer-options-panel"
*ngIf="sourceConfig.queryType && sourceConfig.measure">
- <sp-filter-selection-panel [sourceConfig]="sourceConfig"></sp-filter-selection-panel>
+ <sp-filter-selection-panel [sourceConfig]="sourceConfig"
+ [widgetId]="widgetId"></sp-filter-selection-panel>
</div>
<div fxLayout="column" fxFlex="100" class="data-explorer-options-panel"
*ngIf="sourceConfig.queryType && sourceConfig.measure">
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
index 3c76d77..3c84ae9 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
@@ -20,7 +20,7 @@
<span class="data-explorer-header">Filter</span>
<div>
<button mat-button mat-raised-button color="accent" class="small-button"
- (click)="addFilter(sourceConfig)"
+ (click)="addFilter()"
style="margin-right:10px;margin-bottom: 15px;">Add Filter
</button>
</div>
@@ -30,13 +30,19 @@
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
<mat-form-field color="accent" class="w-50-px mr-15">
<mat-label>Field</mat-label>
- <mat-select [(value)]="filter.field" [compareWith]="compare">
- <mat-option *ngFor="let field of sourceConfig.queryConfig.fields" [value]="field">{{field.runtimeName}}</mat-option>
+ <mat-select
+ [(value)]="filter.field"
+ (selectionChange)="updateWidget()"
+ [compareWith]="compare">
+ <mat-option *ngFor="let field of sourceConfig.queryConfig.fields"
+ [value]="field">{{field.runtimeName}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field color="accent" class="w-50-px mr-15">
<mat-label>Operator</mat-label>
- <mat-select [(value)]="filter.operator">
+ <mat-select
+ [(value)]="filter.operator"
+ (selectionChange)="updateWidget()">
<mat-option [value]="'='">
<span class="pipeline-name">=</span>
</mat-option>
@@ -52,11 +58,16 @@
<mat-option [value]="'>'">
<span class="pipeline-name">></span>
</mat-option>
+ <mat-option [value]="'!='">
+ <span class="pipeline-name">!=</span>
+ </mat-option>
</mat-select>
</mat-form-field>
<mat-form-field color="accent" class="w-50-px mr-15">
<mat-label>Value</mat-label>
- <input matInput [(ngModel)]="filter.value">
+ <input matInput
+ [(ngModel)]="filter.value"
+ (change)="updateWidget()">
</mat-form-field>
<button mat-icon-button color="accent"
(click)="remove(sourceConfig, filter.index)">
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts
index 70ca68a..1b53606 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts
@@ -18,6 +18,7 @@
import { Component, Input } from '@angular/core';
import { FieldConfig, SelectedFilter, SourceConfig } from '../../../../models/dataview-dashboard.model';
+import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
@Component({
selector: 'sp-filter-selection-panel',
@@ -29,20 +30,36 @@ export class FilterSelectionPanelComponent {
@Input() sourceConfig: SourceConfig;
@Input() widgetId: string;
- constructor() {
+ constructor(private widgetConfigService: WidgetConfigurationService) {
}
- addFilter(sourceConfig: SourceConfig) {
+ addFilter() {
const newFilter: SelectedFilter = {
- index: sourceConfig.queryConfig.selectedFilters.length,
+ index: this.sourceConfig.queryConfig.selectedFilters.length,
operator: '=',
value: ''
};
- sourceConfig.queryConfig.selectedFilters.push(newFilter);
+ this.sourceConfig.queryConfig.selectedFilters.push(newFilter);
+ this.widgetConfigService.notify({ widgetId: this.widgetId, refreshData: true, refreshView: true });
+ this.updateWidget();
}
remove(sourceConfig: any, index: number) {
sourceConfig.queryConfig.selectedFilters.splice(index, 1);
+ this.updateWidget();
+ }
+
+ updateWidget() {
+ let update = true;
+ this.sourceConfig.queryConfig.selectedFilters.forEach(filter => {
+ if (!filter.field || !filter.value || !filter.operator) {
+ update = false;
+ }
+ });
+
+ if (update) {
+ this.widgetConfigService.notify({ widgetId: this.widgetId, refreshData: true, refreshView: true });
+ }
}
compare(available: FieldConfig, selected: FieldConfig) {