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/08/27 05:19:15 UTC
[incubator-streampipes] branch dev updated: [STREAMPIPES-421]
Configure collection static properties CSV file
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 d1ecdb3 [STREAMPIPES-421] Configure collection static properties CSV file
new 9bd5816 Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
d1ecdb3 is described below
commit d1ecdb3c75c085872768145e40b1efb332c89231
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Aug 27 07:17:52 2021 +0200
[STREAMPIPES-421] Configure collection static properties CSV file
---
ui/src/app/core-ui/core-ui.module.ts | 141 +++++++++++----------
.../base/abstract-static-property.ts | 19 ++-
.../add-to-collection.component.css | 0
.../add-to-collection.component.html | 31 +++++
.../add-to-collection.component.ts | 79 ++++++++++++
.../static-collection.component.html | 14 +-
.../static-collection.component.ts | 64 +++++-----
.../static-one-of-input.component.ts | 40 +++---
.../static-property.component.html | 34 ++---
9 files changed, 266 insertions(+), 156 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index d3579c8..9265d2b 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -78,78 +78,79 @@ import { StatusWidgetComponent } from './widget/status/status-widget.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { BarchartWidgetComponent } from './widget/barchart/barchart-widget.component';
import { ErrorHintComponent } from './error-hint/error-hint.component';
+import { AddToCollectionComponent } from './static-properties/static-collection/add-to-collection/add-to-collection.component';
@NgModule({
- imports: [
- CommonModule,
- ColorPickerModule,
- FlexLayoutModule,
- CodemirrorModule,
- CustomMaterialModule,
- ReactiveFormsModule,
- FormsModule,
- CdkTableModule,
- MatAutocompleteModule,
- MatSnackBarModule,
- MatProgressSpinnerModule,
- MatDatepickerModule,
- MatNativeDateModule,
- NgxChartsModule,
- PlotlyViaWindowModule,
- MatSliderModule,
- MatChipsModule,
- PortalModule,
- OverlayModule,
- QuillModule.forRoot()
- ],
- declarations: [
- BarchartWidgetComponent,
- ConfigureLabelsComponent,
- ConfirmDialogComponent,
- DisplayRecommendedPipe,
- ImageComponent,
- ImageContainerComponent,
- ImageLabelingComponent,
- SelectLabelComponent,
- ImageBarComponent,
- ImageAnnotationsComponent,
- ImageViewerComponent,
- StandardDialogComponent,
- PanelDialogComponent,
- StaticAnyInput,
- StaticPropertyComponent,
- StaticFreeInputComponent,
- StaticSecretInputComponent,
- StaticFileInputComponent,
- StaticMappingNaryComponent,
- StaticMappingUnaryComponent,
- StaticGroupComponent,
- StaticAlternativesComponent,
- StaticCollectionComponent,
- StaticColorPickerComponent,
- StaticCodeInputComponent,
- StaticOneOfInputComponent,
- StaticRuntimeResolvableAnyInputComponent,
- StaticRuntimeResolvableOneOfInputComponent,
- StatusWidgetComponent,
- LabelListItemComponent,
- ErrorHintComponent
- ],
- providers: [
- MatDatepickerModule,
- ColorService,
- DisplayRecommendedPipe,
- ReactLabelingService,
- PolygonLabelingService,
- BrushLabelingService,
- CocoFormatService,
- LabelingModeService,
- DialogService,
- RuntimeResolvableService,
- StaticFileRestService,
- ],
- entryComponents: [
- ],
+ imports: [
+ CommonModule,
+ ColorPickerModule,
+ FlexLayoutModule,
+ CodemirrorModule,
+ CustomMaterialModule,
+ ReactiveFormsModule,
+ FormsModule,
+ CdkTableModule,
+ MatAutocompleteModule,
+ MatSnackBarModule,
+ MatProgressSpinnerModule,
+ MatDatepickerModule,
+ MatNativeDateModule,
+ NgxChartsModule,
+ PlotlyViaWindowModule,
+ MatSliderModule,
+ MatChipsModule,
+ PortalModule,
+ OverlayModule,
+ QuillModule.forRoot()
+ ],
+ declarations: [
+ BarchartWidgetComponent,
+ ConfigureLabelsComponent,
+ ConfirmDialogComponent,
+ DisplayRecommendedPipe,
+ ImageComponent,
+ ImageContainerComponent,
+ ImageLabelingComponent,
+ SelectLabelComponent,
+ ImageBarComponent,
+ ImageAnnotationsComponent,
+ ImageViewerComponent,
+ StandardDialogComponent,
+ PanelDialogComponent,
+ StaticAnyInput,
+ StaticPropertyComponent,
+ StaticFreeInputComponent,
+ StaticSecretInputComponent,
+ StaticFileInputComponent,
+ StaticMappingNaryComponent,
+ StaticMappingUnaryComponent,
+ StaticGroupComponent,
+ StaticAlternativesComponent,
+ StaticCollectionComponent,
+ StaticColorPickerComponent,
+ StaticCodeInputComponent,
+ StaticOneOfInputComponent,
+ StaticRuntimeResolvableAnyInputComponent,
+ StaticRuntimeResolvableOneOfInputComponent,
+ StatusWidgetComponent,
+ LabelListItemComponent,
+ ErrorHintComponent,
+ AddToCollectionComponent
+ ],
+ providers: [
+ MatDatepickerModule,
+ ColorService,
+ DisplayRecommendedPipe,
+ ReactLabelingService,
+ PolygonLabelingService,
+ BrushLabelingService,
+ CocoFormatService,
+ LabelingModeService,
+ DialogService,
+ RuntimeResolvableService,
+ StaticFileRestService
+ ],
+ entryComponents: [],
exports: [
ConfigureLabelsComponent,
ImageComponent,
diff --git a/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts b/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
index 3ba15a9..386cce8 100644
--- a/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
+++ b/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
@@ -16,24 +16,21 @@
*
*/
-import {
- EventSchema,
- StaticProperty,
- StaticPropertyUnion
-} from "../../../core-model/gen/streampipes-model";
-import {Directive, EventEmitter, Input, Output} from "@angular/core";
-import {FormGroup} from "@angular/forms";
-import {ConfigurationInfo} from "../../../connect/model/ConfigurationInfo";
-import {InvocablePipelineElementUnion} from "../../../editor/model/editor.model";
+import { EventSchema, StaticProperty, StaticPropertyUnion } from '../../../core-model/gen/streampipes-model';
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
+import { InvocablePipelineElementUnion } from '../../../editor/model/editor.model';
@Directive()
+// tslint:disable-next-line:directive-class-suffix
export abstract class AbstractStaticPropertyRenderer<T extends StaticProperty> {
@Input()
staticProperty: T;
@Input()
- staticProperties: Array<StaticPropertyUnion>;
+ staticProperties: StaticPropertyUnion[];
@Input()
eventSchemas: EventSchema[];
@@ -64,4 +61,4 @@ export abstract class AbstractStaticPropertyRenderer<T extends StaticProperty> {
this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.css b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html
new file mode 100644
index 0000000..d7fc496
--- /dev/null
+++ b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="!showFileSelecion">
+ <button mat-button mat-flat-button (click)="add()">
+ <mat-icon class="icon">add</mat-icon>
+ <span>Add</span>
+ </button>
+ <button mat-button mat-flat-button (click)="selectFileSelection()">
+ <mat-icon class="icon">add</mat-icon>
+ <span>Add file</span>
+ </button>
+</div>
+<div *ngIf="showFileSelecion">
+ <button mat-button mat-flat-button (click)="closeFileSelection()">
+ <mat-icon class="icon">arrow_back</mat-icon>
+ <span>Back</span>
+ </button>
+ <div fxFlex="100" style="margin:5px;width:100%">
+ <mat-form-field style="width: 95%" (click)="fileInput.click();" color="accent">
+ <input matInput placeholder="File" disabled>
+ <input #fileInput type="file" style="display:none;"
+ data-cy="sp-file-management-file-input"
+ (change)="handleFileInput($event.target.files)">
+ <button color="accent" matSuffix
+ mat-button style="min-width: 0px">
+ <mat-icon>insert_drive_file</mat-icon>
+ </button>
+ <!-- <mat-error *ngIf="!hasInput">-->
+ <!-- {{errorMessage}}-->
+ <!-- </mat-error>-->
+ </mat-form-field>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts
new file mode 100644
index 0000000..3f9b856
--- /dev/null
+++ b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts
@@ -0,0 +1,79 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { StaticPropertyUtilService } from '../../static-property-util.service';
+import { EventProperty, OneOfStaticProperty, StaticProperty } from '../../../../core-model/gen/streampipes-model';
+
+@Component({
+ selector: 'sp-add-to-collection',
+ templateUrl: './add-to-collection.component.html',
+ styleUrls: ['./add-to-collection.component.css']
+})
+export class AddToCollectionComponent implements OnInit {
+
+ @Input()
+ public staticPropertyTemplate: StaticProperty;
+
+ @Output()
+ addPropertyEmitter: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
+
+ public showFileSelecion = false;
+
+ constructor(private staticPropertyUtil: StaticPropertyUtilService) {
+ }
+
+ ngOnInit(): void {
+ }
+
+ add() {
+ const clone = this.staticPropertyUtil.clone(this.staticPropertyTemplate);
+ this.addPropertyEmitter.emit(clone);
+ }
+
+ selectFileSelection() {
+ this.showFileSelecion = true;
+ }
+
+ closeFileSelection() {
+ this.showFileSelecion = false;
+ }
+
+ handleFileInput(files: any) {
+ const fileReader = new FileReader();
+ fileReader.onload = (e) => {
+ const res = this.parseCsv(fileReader.result);
+ res.pop();
+
+ res.forEach(row => {
+ const clone = this.staticPropertyUtil.clone(this.staticPropertyTemplate);
+ clone.staticProperties.forEach(p => {
+ if (p instanceof OneOfStaticProperty) {
+ const option = p.options.find(o => o.name === row[p.label]);
+ option.selected = true;
+ } else {
+ p.value = row[p.label];
+ }
+ });
+ this.addPropertyEmitter.emit(clone);
+ });
+
+ };
+ fileReader.readAsText(files[0]);
+ }
+
+ private parseCsv(str) {
+ const delimiter = ';';
+ const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
+
+ const rows = str.slice(str.indexOf('\n') + 1).split('\n');
+
+ const arr = rows.map(row => {
+ const values = row.split(delimiter);
+ const el = headers.reduce((object, header, index) => {
+ object[header] = values[index];
+ return object;
+ }, {});
+ return el;
+ });
+
+ return arr;
+ }
+}
diff --git a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.html b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.html
index 6bf9036..fa44290 100644
--- a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.html
+++ b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.html
@@ -17,7 +17,9 @@
-->
<div fxFlex="100" fxLayout="column">
- <div fxLayout="row" fxLayoutAlign="space-between center" *ngFor="let property of staticProperty.members; let i = index">
+
+ <div fxLayout="row" fxLayoutAlign="space-between center"
+ *ngFor="let property of staticProperty.members; let i = index">
<div fxFlex="grow">
<app-static-property [adapterId]="adapterId"
[eventSchemas]="eventSchemas"
@@ -29,15 +31,17 @@
</div>
<div fxFlex="nogrow" style="width: 50px" fxLayout="row" fxLayoutAlign="end center">
<button mat-icon-button class="icon-button" (click)="remove(i)">
- <mat-icon class="icon">remove</mat-icon>
+ <mat-icon class="icon">remove</mat-icon>
</button>
</div>
</div>
<div fxFlex>
- <button mat-button mat-flat-button (click)="add()">
- <mat-icon class="icon">add</mat-icon><span>Add more</span>
- </button>
+ <sp-add-to-collection
+ (addPropertyEmitter)="add($event)"
+ [staticPropertyTemplate]="staticProperty.staticPropertyTemplate"></sp-add-to-collection>
</div>
+
+
</div>
diff --git a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
index d5b1a18..53b5b2c 100644
--- a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
@@ -16,51 +16,49 @@
*
*/
-import {Component, OnInit} from '@angular/core';
-import {StaticPropertyUtilService} from '../static-property-util.service';
-import {CollectionStaticProperty} from "../../../core-model/gen/streampipes-model";
-import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validated-static-property";
+import { Component, OnInit } from '@angular/core';
+import { CollectionStaticProperty, StaticPropertyUnion } from '../../../core-model/gen/streampipes-model';
+import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
@Component({
- selector: 'app-static-collection',
- templateUrl: './static-collection.component.html',
- styleUrls: ['./static-collection.component.css']
+ selector: 'sp-static-collection',
+ templateUrl: './static-collection.component.html',
+ styleUrls: ['./static-collection.component.css']
})
export class StaticCollectionComponent
- extends AbstractValidatedStaticPropertyRenderer<CollectionStaticProperty> implements OnInit {
+ extends AbstractValidatedStaticPropertyRenderer<CollectionStaticProperty> implements OnInit {
- constructor(private staticPropertyUtil: StaticPropertyUtilService) {
- super();
- }
+ constructor() {
+ super();
+ }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
- add() {
- if (!this.staticProperty.members) {
- this.staticProperty.members = [];
- }
- let clone = this.staticPropertyUtil.clone(this.staticProperty.staticPropertyTemplate);
- this.staticProperty.members.push(clone);
- this.updateIndex();
+ add(property: StaticPropertyUnion) {
+ if (!this.staticProperty.members) {
+ this.staticProperty.members = [];
}
+ this.staticProperty.members.push(property);
+ this.updateIndex();
+ }
- remove(i) {
- this.staticProperty.members.splice(i,1).slice(0);
- this.updateIndex();
- }
+ remove(i) {
+ this.staticProperty.members.splice(i, 1).slice(0);
+ this.updateIndex();
+ }
- updateIndex() {
- this.staticProperty.members.forEach((property, index) => {
- property.index = index;
- })
- }
+ updateIndex() {
+ this.staticProperty.members.forEach((property, index) => {
+ property.index = index;
+ });
+ }
- onStatusChange(status: any) {
- }
+ onStatusChange(status: any) {
+ }
- onValueChange(value: any) {
- }
+ onValueChange(value: any) {
+ }
}
\ No newline at end of file
diff --git a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
index c9c7365..7bfd746 100644
--- a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
@@ -16,19 +16,19 @@
*
*/
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
-import {OneOfStaticProperty} from "../../../core-model/gen/streampipes-model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AbstractStaticPropertyRenderer } from '../base/abstract-static-property';
+import { OneOfStaticProperty } from '../../../core-model/gen/streampipes-model';
@Component({
- selector: 'app-static-one-of-input',
+ selector: 'sp-static-one-of-input',
templateUrl: './static-one-of-input.component.html',
styleUrls: ['./static-one-of-input.component.css']
})
export class StaticOneOfInputComponent extends AbstractStaticPropertyRenderer<OneOfStaticProperty> implements OnInit {
- @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
+ @Output() inputEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
selectedOption: string;
@@ -37,27 +37,27 @@ export class StaticOneOfInputComponent extends AbstractStaticPropertyRenderer<On
}
ngOnInit() {
- if (this.noneSelected()) {
- if (this.staticProperty.options.length > 0) {
- this.staticProperty.options[0].selected = true;
- this.selectedOption = this.staticProperty.options[0].elementId;
- }
- } else {
- this.selectedOption = this.staticProperty.options.find(option => option.selected).elementId;
+ if (this.noneSelected()) {
+ if (this.staticProperty.options.length > 0) {
+ this.staticProperty.options[0].selected = true;
+ this.selectedOption = this.staticProperty.options[0].elementId;
}
- this.inputEmitter.emit(true);
+ } else {
+ this.selectedOption = this.staticProperty.options.find(option => option.selected).elementId;
+ }
+ this.inputEmitter.emit(true);
}
noneSelected(): boolean {
- return this.staticProperty.options.every(o => !(o.selected));
+ return this.staticProperty.options.every(o => !(o.selected));
}
select(id) {
- this.selectedOption = this.staticProperty.options.find(option => option.elementId === id).elementId;
- for (let option of this.staticProperty.options) {
- option.selected = false;
- }
- this.staticProperty.options.find(option => option.elementId === id).selected = true;
- this.inputEmitter.emit(true)
+ this.selectedOption = this.staticProperty.options.find(option => option.elementId === id).elementId;
+ for (const option of this.staticProperty.options) {
+ option.selected = false;
+ }
+ this.staticProperty.options.find(option => option.elementId === id).selected = true;
+ this.inputEmitter.emit(true);
}
}
diff --git a/ui/src/app/core-ui/static-properties/static-property.component.html b/ui/src/app/core-ui/static-properties/static-property.component.html
index e5f40ba..006842a 100644
--- a/ui/src/app/core-ui/static-properties/static-property.component.html
+++ b/ui/src/app/core-ui/static-properties/static-property.component.html
@@ -48,12 +48,12 @@
</app-static-free-input>
<sp-static-file-input *ngIf="isFileStaticProperty(staticProperty)"
- (inputEmitter)="valueChange($event)"
- [staticProperty]="staticProperty"
- [parentForm]="parentForm"
- [fieldName]="fieldName"
- (updateEmitter)="emitUpdate($event)"
- [adapterId]="adapterId">
+ (inputEmitter)="valueChange($event)"
+ [staticProperty]="staticProperty"
+ [parentForm]="parentForm"
+ [fieldName]="fieldName"
+ (updateEmitter)="emitUpdate($event)"
+ [adapterId]="adapterId">
</sp-static-file-input>
<app-static-color-picker *ngIf="isColorPickerStaticProperty(staticProperty)"
@@ -88,11 +88,11 @@
</app-static-any-input>
- <app-static-one-of-input
+ <sp-static-one-of-input
*ngIf="isOneOfStaticProperty(staticProperty) && !isRuntimeResolvableOneOfStaticProperty(staticProperty)"
(inputEmitter)="valueChange($event)"
[staticProperty]="staticProperty">
- </app-static-one-of-input>
+ </sp-static-one-of-input>
<app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
[eventSchemas]="eventSchemas"
@@ -135,15 +135,15 @@
(updateEmitter)="emitUpdate($event)">
</app-static-group>
- <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
- [adapterId]="adapterId"
- [eventSchemas]="eventSchemas"
- [parentForm]="parentForm"
- [fieldName]="fieldName"
- [displayRecommended]="displayRecommended"
- [staticProperty]="staticProperty" class="test fullWidth"
- (updateEmitter)="emitUpdate($event)">
- </app-static-collection>
+ <sp-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
+ [adapterId]="adapterId"
+ [eventSchemas]="eventSchemas"
+ [parentForm]="parentForm"
+ [fieldName]="fieldName"
+ [displayRecommended]="displayRecommended"
+ [staticProperty]="staticProperty" class="test fullWidth"
+ (updateEmitter)="emitUpdate($event)">
+ </sp-static-collection>
</div>
</div>
<mat-divider></mat-divider>