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/06/14 11:56:34 UTC
[incubator-streampipes] branch STREAMPIPES-380 updated: Change
select format component
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-380
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-380 by this push:
new 44f9891 Change select format component
44f9891 is described below
commit 44f98917f896e908838aafa4d3a64d0b7dd0e75c
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Jun 14 13:48:55 2021 +0200
Change select format component
---
.../new-adapter/new-adapter.component.html | 23 +++++----
.../new-adapter/new-adapter.component.ts | 12 -----
.../select-format/select-format.component.css | 3 ++
.../select-format/select-format.component.html | 60 +++++++++++-----------
.../select-format/select-format.component.ts | 49 +++++++++---------
5 files changed, 72 insertions(+), 75 deletions(-)
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
index d532e28..ccdf864 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.html
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
@@ -89,19 +89,17 @@
</mat-step>
<mat-step *ngIf="isGenericAdapter">
- <sp-select-format
- [adapterDescription]="adapter"
- [completedStaticProperty]="completedStaticProperty"
- (selectedFormatEmitter)="formatSelected($event)"
- (validateEmitter)="validateFormat($event)"
- >
- </sp-select-format>
+ <sp-select-format
+ [adapterDescription]="adapter"
+ (validateEmitter)="validateFormat($event)">
+ </sp-select-format>
<div fxLayoutAlign="end">
<button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
<button class="mat-basic stepper-button" mat-raised-button (click)="goBack(stepper)">Back</button>
<button class="stepper-button" id="format-selection-next-button"
- [disabled]="!formatConfigurationValid" (click)="clickFormatSelectionNextButton(stepper)"
+ [disabled]="!formatConfigurationValid"
+ (click)="clickFormatSelectionNextButton(stepper)"
color="primary" mat-raised-button>
Next
</button>
@@ -112,9 +110,12 @@
<mat-step>
<ng-template matStepLabel>Define Event Schema</ng-template>
- <app-event-schema #eschema fxLayout="column" fxFlex="100" [(isEditable)]="isEditable"
- [(adapterDescription)]="adapter" [(eventSchema)]="eventSchema" [(oldEventSchema)]="oldEventSchema"
- (previewEnabled)="showPreview($event)">
+ <app-event-schema #eschema fxLayout="column" fxFlex="100"
+ [(isEditable)]="isEditable"
+ [(adapterDescription)]="adapter"
+ [(eventSchema)]="eventSchema"
+ [(oldEventSchema)]="oldEventSchema"
+ (previewEnabled)="showPreview($event)">
</app-event-schema>
<div fxLayoutAlign="end">
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.ts b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
index 7a9a6fc..2d2a8f2 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
@@ -341,18 +341,6 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
this.adapter.rules = transformationRules;
}
- formatSelected(selectedFormat) {
- if (
- this.adapter instanceof GenericAdapterSetDescription ||
- this.adapter instanceof GenericAdapterStreamDescription
- ) {
- this.adapter.formatDescription = selectedFormat;
- if (selectedFormat.config.length === 0) {
- this.validateFormat(true);
- }
- }
- }
-
goBack(stepper: MatStepper) {
this.myStepper.selectedIndex = this.myStepper.selectedIndex - 1;
}
diff --git a/ui/src/app/connect/components/select-format/select-format.component.css b/ui/src/app/connect/components/select-format/select-format.component.css
index e69de29..b5136d6 100644
--- a/ui/src/app/connect/components/select-format/select-format.component.css
+++ b/ui/src/app/connect/components/select-format/select-format.component.css
@@ -0,0 +1,3 @@
+.format-configuration {
+ padding: 15px;
+}
diff --git a/ui/src/app/connect/components/select-format/select-format.component.html b/ui/src/app/connect/components/select-format/select-format.component.html
index a1e97d4..c22b4c2 100644
--- a/ui/src/app/connect/components/select-format/select-format.component.html
+++ b/ui/src/app/connect/components/select-format/select-format.component.html
@@ -1,34 +1,36 @@
-<ng-template matStepLabel>Select Format</ng-template>
+<div style="margin-bottom: 2%;">
+ <ng-template matStepLabel>Select Format</ng-template>
-<div class="assemblyOptions sp-blue-bg">
- <h4>Select format</h4>
-</div>
-<div class="sp-blue-border padding">
- <sp-format-list fxFlex="100"
- [allFormats]="allFormats"
- (selectedFormatEmitter)="formatSelected($event)"
- [selectedFormat]="selectedFormat">
- </sp-format-list>
-</div>
+ <div class="assemblyOptions sp-blue-bg">
+ <h4>Select format</h4>
+ </div>
+ <div class="sp-blue-border padding">
+ <sp-format-list fxFlex="100"
+ [allFormats]="allFormats"
+ (selectedFormatEmitter)="formatSelected($event)"
+ [selectedFormat]="selectedFormat">
+ </sp-format-list>
+ </div>
-<div class="assemblyOptions sp-blue-bg">
- <h4>Configure format</h4>
-</div>
-<div class="sp-blue-border padding">
- <div fxFlex="100" *ngIf="selectedFormat">
- <form [formGroup]="formatForm" fxFlex="100">
- <app-static-property *ngFor="let config of selectedFormat.config"
- [staticProperty]="config"
- [staticProperties]="adapterDescription.config"
- [adapterId]="adapterDescription.appId"
- [parentForm]="formatForm"
- [fieldName]="config.internalName"
- (updateEmitter)="triggerUpdate($event)"
- [completedStaticProperty]="completedStaticProperty">
+ <div class="assemblyOptions sp-blue-bg">
+ <h4>Configure format</h4>
+ </div>
+ <div class="sp-blue-border padding format-configuration">
+ <div fxFlex="100" *ngIf="selectedFormat">
+ <form [formGroup]="formatForm" fxFlex="100">
+ <app-static-property *ngFor="let config of selectedFormat.config"
+ [staticProperty]="config"
+ [staticProperties]="adapterDescription.config"
+ [adapterId]="adapterDescription.appId"
+ [parentForm]="formatForm"
+ [fieldName]="config.internalName"
+ (updateEmitter)="triggerUpdate($event)"
+ [completedStaticProperty]="completedStaticProperty">
- </app-static-property>
- <h5 *ngIf="selectedFormat.config.length === 0" style="text-align:center;">(no further
- configuration needed)</h5>
- </form>
+ </app-static-property>
+ <h5 *ngIf="selectedFormat.config.length === 0" style="text-align:center;">(no further
+ configuration needed)</h5>
+ </form>
+ </div>
</div>
</div>
diff --git a/ui/src/app/connect/components/select-format/select-format.component.ts b/ui/src/app/connect/components/select-format/select-format.component.ts
index 17cad64..6c7a804 100644
--- a/ui/src/app/connect/components/select-format/select-format.component.ts
+++ b/ui/src/app/connect/components/select-format/select-format.component.ts
@@ -16,66 +16,69 @@ import { RestService } from '../../services/rest.service';
})
export class SelectFormatComponent implements OnInit {
-
+ /**
+ * Adapter description the selected format is added to
+ */
@Input() adapterDescription: AdapterDescriptionUnion;
- // What is this for?
- @Input() completedStaticProperty: ConfigurationInfo;
-
- @Output() public selectedFormatEmitter = new EventEmitter<FormatDescription>();
- @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
+ /**
+ * Returns whether the user input for the format configuration is valid or not
+ */
@Output() validateEmitter: EventEmitter<boolean> = new EventEmitter();
- // local reference of the format description from the adapter description
+ /**
+ * Local reference of the format description from the adapter description
+ */
selectedFormat: FormatDescription;
+ /**
+ * Contains all the available formats that a user can select from
+ */
allFormats: FormatDescription[] = [];
+ completedStaticProperty: ConfigurationInfo;
+
/**
- * The form group to validate format configuration
+ * The form group to validate the configuration for the foramt
*/
formatForm: FormGroup;
-
constructor(
private restService: RestService,
private _formBuilder: FormBuilder) { }
ngOnInit(): void {
- this.restService.getFormats().subscribe(x => {
- this.allFormats = x.list;
- });
-
- if (this.adapterDescription instanceof GenericAdapterSetDescription ||
- this.adapterDescription instanceof GenericAdapterStreamDescription) {
- this.selectedFormat = this.adapterDescription.formatDescription;
- }
-
- this.formatForm = this._formBuilder.group({
+ // fetch all available formats from backend
+ this.restService.getFormats().subscribe(res => {
+ this.allFormats = res.list;
});
+ // initialize form for validation
+ this.formatForm = this._formBuilder.group({});
this.formatForm.statusChanges.subscribe((status) => {
this.validateEmitter.emit(this.formatForm.valid);
});
+ // ensure that adapter description is a generic adapter
+ if (this.adapterDescription instanceof GenericAdapterSetDescription ||
+ this.adapterDescription instanceof GenericAdapterStreamDescription) {
+ this.selectedFormat = this.adapterDescription.formatDescription;
+ }
if (this.adapterDescription instanceof GenericAdapterSetDescription) {
if ((this.adapterDescription as GenericAdapterSetDescription).formatDescription !== undefined) {
this.validateEmitter.emit(true);
}
}
-
if (this.adapterDescription instanceof GenericAdapterStreamDescription) {
if ((this.adapterDescription as GenericAdapterStreamDescription).formatDescription !== undefined) {
this.validateEmitter.emit(true);
}
}
-
-
}
triggerUpdate(configurationInfo: ConfigurationInfo) {
- this.updateEmitter.emit(configurationInfo);
+ this.completedStaticProperty = {...configurationInfo};
}
formatSelected(selectedFormat) {