This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch dev in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new b50482ce26 feat: Restructure data source selection and query selection
(#3383)
b50482ce26 is described below
commit b50482ce2677e2acd81f48dfd6ff3975ddaae5c6
Author: Marcel Früholz <[email protected]>
AuthorDate: Thu Jan 9 11:19:40 2025 +0100
feat: Restructure data source selection and query selection (#3383)
---
...ta-explorer-widget-data-settings.component.html | 489 +++++++++++++++------
...ta-explorer-widget-data-settings.component.scss | 60 ++-
...data-explorer-widget-data-settings.component.ts | 21 +
3 files changed, 433 insertions(+), 137 deletions(-)
diff --git
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html
index 810d702fec..0f7bceafac 100644
---
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html
+++
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html
@@ -57,166 +57,387 @@
</div>
</mat-expansion-panel-header>
<div fxFlex="100" fxLayout="column" class="mt-10">
- <sp-configuration-box title="From">
- <div header>
+ <sp-configuration-box title="Data Source">
+ <div header fxFlex class="header-container">
+ <span fxFlex></span>
+ <button
+ mat-icon-button
+ class="pull-btn-right"
+ matTooltip="{{
+ expandFieldsDataSource
+ ? 'Expand Less'
+ : 'Expand More'
+ }}"
+ (click)="toggleExpandFieldsDataSource()"
+ [disabled]="
+ availablePipelines.length === 0 &&
+ availableMeasurements.length === 0
+ "
+ >
+ <mat-icon>{{
+ expandFieldsDataSource
+ ? 'expand_less'
+ : 'expand_more'
+ }}</mat-icon>
+ </button>
+ </div>
+ <div
+ *ngIf="
+ availablePipelines.length === 0 &&
+ availableMeasurements.length === 0
+ "
+ class="warning-container"
+ fxLayout="column"
+ fxLayoutAlign="start stretch"
+ >
+ <div
+ class="warning"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ <i class="material-icons warning-icon">warning</i>
+ <b>
+ No data available! Please connect an adapter or
+ verify your pipeline is running.
+ </b>
+ </div>
+ <div
+ fxFlex
+ fxLayout="row"
+ fxLayoutAlign="end end"
+ class="mt-10"
+ >
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="navigateToConnect()"
+ >
+ Connect Adapter
+ </button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="navigateToPipelines()"
+ >
+ Start Pipeline
+ </button>
+ </div>
+ </div>
+
+ <div
+ *ngIf="
+ availablePipelines.length !== 0 ||
+ availableMeasurements.length !== 0
+ "
+ >
<mat-radio-group
class="selection-radio-group"
[(ngModel)]="sourceConfig.sourceType"
>
- <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>
- <div class="form-field-small">
- <mat-form-field
- color="accent"
- fxFlex="100"
- appearance="outline"
- *ngIf="sourceConfig.sourceType === 'pipeline'"
- >
- <mat-select
- [panelClass]="'form-field-small'"
- [(value)]="sourceConfig.measureName"
- (selectionChange)="
- updateMeasure(sourceConfig, $event.value)
+ <div
+ class="radio-option-box"
+ fxLayout="column"
+ [ngClass]="{
+ 'radio-option-box-accent':
+ sourceConfig.sourceType === 'pipeline'
+ }"
+ *ngIf="
+ expandFieldsDataSource ||
+ sourceConfig.sourceType === 'pipeline'
"
- data-cy="data-explorer-select-data-set"
>
- <mat-option
- *ngFor="let pipeline of availablePipelines"
- [value]="pipeline.measureName"
+ <mat-radio-button
+ class="selection-radio-button"
+ [value]="'pipeline'"
+ [disabled]="availablePipelines.length ===
0"
>
- <span class="pipeline-name">{{
- pipeline.pipelineName
- }}</span
- ><br />{{ pipeline.measureName }}
- </mat-option>
- </mat-select>
- </mat-form-field>
-
- <mat-form-field
- color="accent"
- fxFlex="100"
- appearance="outline"
- *ngIf="sourceConfig.sourceType === 'measurement'"
- >
- <mat-select
- [(value)]="sourceConfig.measureName"
- (selectionChange)="
- updateMeasure(sourceConfig, $event.value)
+ <b>Pipeline</b>
+ </mat-radio-button>
+ <p class="description">
+ Select this option if you want to use data
+ from one of your pipelines.
+ </p>
+ <div
+ class="selection-form-field"
+ *ngIf="
+ sourceConfig.sourceType ===
+ 'pipeline' &&
+ availablePipelines.length !== 0
+ "
+ >
+ <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"
+ >
+ <mat-option
+ *ngFor="
+ let pipeline of
availablePipelines
+ "
+ [value]="pipeline.measureName"
+ >
+ <span class="pipeline-name">{{
+ pipeline.pipelineName
+ }}</span
+ ><br />
+ {{ pipeline.measureName }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ <div
+ class="radio-option-box"
+ fxLayout="column"
+ [ngClass]="{
+ 'radio-option-box-accent':
+ sourceConfig.sourceType ===
+ 'measurement'
+ }"
+ *ngIf="
+ expandFieldsDataSource ||
+ sourceConfig.sourceType === 'measurement'
"
>
- <mat-option
- [value]="measurement.measureName"
- *ngFor="
- let measurement of
availableMeasurements
+ <mat-radio-button
+ class="selection-radio-button"
+ [value]="'measurement'"
+ [disabled]="
+ availableMeasurements.length === 0
+ "
+ >
+ <b>Database Identifier</b>
+ </mat-radio-button>
+ <p class="description">
+ Choose this option to work with individual
+ measurements from a Data Lake.
+ </p>
+ <div
+ class="selection-form-field"
+ *ngIf="
+ sourceConfig.sourceType ===
+ 'measurement' &&
+ availableMeasurements.length !== 0
"
>
- <span class="pipeline-name">{{
- measurement.measureName
- }}</span>
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <mat-form-field
+ color="accent"
+ fxFlex="100"
+ appearance="outline"
+ >
+ <mat-select
+
[(value)]="sourceConfig.measureName"
+ (selectionChange)="
+ updateMeasure(
+ sourceConfig,
+ $event.value
+ )
+ "
+ >
+ <mat-option
+ [value]="
+ measurement.measureName
+ "
+ *ngFor="
+ let measurement of
availableMeasurements
+ "
+ >
+ <span class="pipeline-name">{{
+ measurement.measureName
+ }}</span>
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ </mat-radio-group>
</div>
</sp-configuration-box>
+
<sp-configuration-box
title="Query"
*ngIf="sourceConfig.measureName"
>
- <div header>
+ <div header fxFlex class="header-container">
+ <span fxFlex></span>
+ <button
+ mat-icon-button
+ class="pull-btn-right"
+ matTooltip="{{
+ expandFieldsQuery
+ ? 'Expand Less'
+ : 'Expand More'
+ }}"
+ (click)="toggleExpandFieldsQuery()"
+ >
+ <mat-icon>{{
+ expandFieldsQuery
+ ? 'expand_less'
+ : 'expand_more'
+ }}</mat-icon>
+ </button>
+ </div>
+ <div>
<mat-radio-group
class="selection-radio-group"
[(ngModel)]="sourceConfig.queryType"
(change)="changeDataAggregation()"
>
- <mat-radio-button
- class="selection-radio-button"
- [value]="'raw'"
- >Raw
- </mat-radio-button>
- <mat-radio-button
- class="selection-radio-button"
- [value]="'aggregated'"
- >Aggregated
- </mat-radio-button>
- <mat-radio-button
- class="selection-radio-button"
- [value]="'single'"
- >Single
- </mat-radio-button>
- </mat-radio-group>
- </div>
- <div
- fxLayout="column"
- fxFlex="100"
- *ngIf="sourceConfig.queryType === 'raw'"
- >
- <div class="form-field-small mb-10">
- <mat-form-field
- fxFlex="100"
- color="accent"
- appearance="outline"
+ <div
+ class="radio-option-box"
+ *ngIf="
+ expandFieldsQuery ||
+ sourceConfig.queryType === 'raw'
+ "
+ fxLayout="column"
+ [ngClass]="{
+ 'radio-option-box-accent':
+ sourceConfig.queryType === 'raw'
+ }"
>
- <mat-label>
- <span> Limit</span>
- </mat-label>
- <input
-
[(ngModel)]="sourceConfig.queryConfig.limit"
- matInput
- (change)="triggerDataRefresh()"
- />
- </mat-form-field>
- </div>
- <div class="form-field-small mb-10">
- <mat-form-field
- fxFlex="100"
- color="accent"
- appearance="outline"
+ <mat-radio-button
+ class="selection-radio-button"
+ [value]="'raw'"
+ >Raw
+ </mat-radio-button>
+ <p class="description">
+ Show raw data from your data source.
+ </p>
+ <div
+ fxLayout="column"
+ class="selection-form-field"
+ fxFlex="100"
+ *ngIf="sourceConfig.queryType === 'raw'"
+ >
+ <div class="form-field-small mt-10">
+ <mat-form-field
+ fxFlex="100"
+ color="accent"
+ appearance="outline"
+ >
+ <mat-label>
+ <span> Limit</span>
+ </mat-label>
+ <input
+ [(ngModel)]="
+ sourceConfig.queryConfig
+ .limit
+ "
+ matInput
+ (change)="triggerDataRefresh()"
+ />
+ </mat-form-field>
+ </div>
+ <div class="form-field-small mt-20 mb-20">
+ <mat-form-field
+ fxFlex="100"
+ color="accent"
+ appearance="outline"
+ >
+ <mat-label>
+ <span> Page</span>
+ </mat-label>
+ <input
+ [(ngModel)]="
+ sourceConfig.queryConfig
+ .page
+ "
+ matInput
+ (change)="triggerDataRefresh()"
+ />
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+ <div
+ class="radio-option-box"
+ *ngIf="
+ expandFieldsQuery ||
+ sourceConfig.queryType === 'aggregated'
+ "
+ fxLayout="column"
+ [ngClass]="{
+ 'radio-option-box-accent':
+ sourceConfig.queryType === 'aggregated'
+ }"
>
- <mat-label>
- <span> Page</span>
- </mat-label>
- <input
- [(ngModel)]="sourceConfig.queryConfig.page"
- matInput
- (change)="triggerDataRefresh()"
- />
- </mat-form-field>
- </div>
- </div>
- <div
- fxLayout="column"
- fxFlex="100"
- *ngIf="sourceConfig.queryType === 'aggregated'"
- >
- <div>
- <mat-checkbox
- color="accent"
- [(ngModel)]="
- sourceConfig.queryConfig.autoAggregate
+ <mat-radio-button
+ class="selection-radio-button"
+ [value]="'aggregated'"
+ >Aggregated
+ </mat-radio-button>
+ <p class="description">
+ Aggregate raw data by time unit or value.
+ </p>
+ <div
+ fxLayout="column"
+ class="selection-form-field"
+ fxFlex="100"
+ *ngIf="
+ sourceConfig.queryType === 'aggregated'
+ "
+ >
+ <div>
+ <mat-checkbox
+ color="accent"
+ [(ngModel)]="
+ sourceConfig.queryConfig
+ .autoAggregate
+ "
+ (change)="triggerDataRefresh()"
+ >
+ Auto-Aggregate
+ </mat-checkbox>
+ </div>
+ <sp-aggregate-configuration
+ class="aggregate-config"
+ *ngIf="
+ !sourceConfig.queryConfig
+ .autoAggregate
+ "
+
[queryConfig]="sourceConfig.queryConfig"
+ [widgetId]="widgetId"
+ >
+ </sp-aggregate-configuration>
+ </div>
+ </div>
+ <div
+ class="radio-option-box"
+ *ngIf="
+ expandFieldsQuery ||
+ sourceConfig.queryType === 'single'
"
- (change)="triggerDataRefresh()"
+ fxLayout="column"
+ [ngClass]="{
+ 'radio-option-box-accent':
+ sourceConfig.queryType === 'single'
+ }"
>
- Auto-Aggregate
- </mat-checkbox>
- </div>
- <sp-aggregate-configuration
- class="mt-10"
- *ngIf="!sourceConfig.queryConfig.autoAggregate"
- [queryConfig]="sourceConfig.queryConfig"
- [widgetId]="widgetId"
- >
- </sp-aggregate-configuration>
+ <mat-radio-button
+ class="selection-radio-button"
+ [value]="'single'"
+ >Single
+ </mat-radio-button>
+ <p class="description">
+ Show single data entry.
+ </p>
+ </div>
+ </mat-radio-group>
</div>
</sp-configuration-box>
<div
diff --git
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss
index 7826cade85..8eaa6928e0 100644
---
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss
+++
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss
@@ -25,13 +25,67 @@
}
.selection-radio-group {
+ vertical-align: top;
display: flex;
- flex-direction: row;
- margin: 5px 0;
+ flex-direction: column;
+ margin: 0 0;
}
-.selection-radio-button {
+.selection-form-field {
+ margin: 0 0 10px 44px;
+}
+
+.radio-option-box {
+ border: 1px solid var(--color-bg-3);
+ padding: 5px 15px 5px 5px;
margin: 5px;
+ background-color: #f9f9f9;
+}
+
+.radio-option-box-accent {
+ border: 2px solid var(--color-accent);
+}
+
+.pull-btn-right {
+ margin-right: 10px;
+}
+
+.header-container {
+ float: right;
+ margin-left: 50px;
+}
+
+.aggregate-config {
+ margin-bottom: -20px;
+ margin-right: -5px;
+ margin-top: 10px;
+}
+
+.description {
+ margin: 0 0 10px 44px;
+ color: #6c757d;
+ font-size: 0.75rem;
+ line-height: 1.2;
+}
+
+.selection-radio-button {
+ margin: 0 0 -5px 0;
+}
+
+.warning {
+ border: 1px solid #dea843;
+ background: #f1f1e6;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ box-sizing: border-box;
+ font-size: 10pt;
+}
+
+.warning-icon {
+ color: #dea843;
+ font-size: 18px;
}
.mat-accordion .mat-expansion-panel-header.expansion-panel-header {
diff --git
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
index 3a6c2e3f2b..fdd484d0ad 100644
---
a/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
+++
b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts
@@ -34,6 +34,7 @@ import {
} from '@streampipes/platform-services';
import { Tuple2 } from '../../../../../core-model/base/Tuple2';
import { zip } from 'rxjs';
+import { Router } from '@angular/router';
import { WidgetConfigurationService } from
'../../../../services/widget-configuration.service';
import { FieldSelectionPanelComponent } from
'./field-selection-panel/field-selection-panel.component';
import { GroupSelectionPanelComponent } from
'./group-selection-panel/group-selection-panel.component';
@@ -73,12 +74,16 @@ export class DataExplorerWidgetDataSettingsComponent
implements OnInit {
step = 0;
+ expandFieldsDataSource = true;
+ expandFieldsQuery = true;
+
constructor(
private dataExplorerService: DataViewDataExplorerService,
private datalakeRestService: DatalakeRestService,
private widgetConfigService: WidgetConfigurationService,
private fieldProviderService: DataExplorerFieldProviderService,
private widgetTypeService: WidgetTypeService,
+ private router: Router,
) {}
ngOnInit(): void {
@@ -281,6 +286,22 @@ export class DataExplorerWidgetDataSettingsComponent
implements OnInit {
});
}
+ toggleExpandFieldsDataSource() {
+ this.expandFieldsDataSource = !this.expandFieldsDataSource;
+ }
+
+ toggleExpandFieldsQuery() {
+ this.expandFieldsQuery = !this.expandFieldsQuery;
+ }
+
+ navigateToConnect(): void {
+ this.router.navigate(['connect']);
+ }
+
+ navigateToPipelines(): void {
+ this.router.navigate(['pipelines']);
+ }
+
deepCopy(obj) {
let copy;
