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 15:13:49 UTC
[incubator-streampipes] 02/02: Add component for specific and
generic adapters
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
commit e0e29f00ffafbfd6554d33a240cb1391e17fac40
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Jun 14 17:12:52 2021 +0200
Add component for specific and generic adapters
---
.../generic-adapter-settings.component.css | 0
.../generic-adapter-settings.component.html | 25 ++++++++++
.../generic-adapter-settings.component.ts | 56 +++++++++++++++++++++
.../new-adapter/new-adapter.component.html | 57 +++++++++-------------
.../new-adapter/new-adapter.component.ts | 19 ++++++--
.../specific-adapter-settings.component.css | 0
.../specific-adapter-settings.component.html | 22 +++++++++
.../specific-adapter-settings.component.ts | 45 +++++++++++++++++
ui/src/app/connect/connect.module.ts | 6 ++-
9 files changed, 190 insertions(+), 40 deletions(-)
diff --git a/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.css b/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.html b/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.html
new file mode 100644
index 0000000..99fb2f7
--- /dev/null
+++ b/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.html
@@ -0,0 +1,25 @@
+<div style="margin-bottom: 2%;">
+ <ng-template matStepLabel>Settings</ng-template>
+
+ <div >
+ <div class="assemblyOptions sp-blue-bg">
+ <h4 >Protocol settings</h4>
+ </div>
+ <div class="sp-blue-border padding" style="padding: 15px;">
+ <form [formGroup]="genericAdapterForm" fxFlex="100">
+ <div fxFlex="100" >
+ <app-static-property *ngFor="let config of protocolDescription.config"
+ [staticProperty]="config"
+ [staticProperties]="protocolDescription.config"
+ [adapterId]="adapterDescription.appId"
+ [parentForm]="genericAdapterForm"
+ [fieldName]="config.internalName"
+ (updateEmitter)="triggerUpdate($event)"
+ [completedStaticProperty]="completedStaticProperty">
+ </app-static-property>
+ </div>
+ </form>
+ </div>
+ </div>
+
+</div>
diff --git a/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.ts b/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.ts
new file mode 100644
index 0000000..f2212bb
--- /dev/null
+++ b/ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.ts
@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+ AdapterDescriptionUnion,
+ GenericAdapterSetDescription,
+ GenericAdapterStreamDescription,
+ ProtocolDescription
+} from '../../../core-model/gen/streampipes-model';
+import { ConfigurationInfo } from '../../model/ConfigurationInfo';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+ selector: 'sp-generic-adapter-settings',
+ templateUrl: './generic-adapter-settings.component.html',
+ styleUrls: ['./generic-adapter-settings.component.css']
+})
+export class GenericAdapterSettingsComponent implements OnInit {
+
+ /**
+ * Adapter description the selected format is added to
+ */
+ @Input() adapterDescription: AdapterDescriptionUnion;
+
+ /**
+ * Returns whether the user input for the format configuration is valid or not
+ */
+ @Output() validateEmitter: EventEmitter<boolean> = new EventEmitter();
+
+ completedStaticProperty: ConfigurationInfo;
+
+ genericAdapterForm: FormGroup;
+
+ protocolDescription: ProtocolDescription;
+
+ constructor(
+ private _formBuilder: FormBuilder
+ ) { }
+
+ ngOnInit(): void {
+
+ if (this.adapterDescription instanceof GenericAdapterSetDescription ||
+ this.adapterDescription instanceof GenericAdapterStreamDescription) {
+ this.protocolDescription = this.adapterDescription.protocolDescription;
+ }
+
+ // initialize form for validation
+ this.genericAdapterForm = this._formBuilder.group({});
+ this.genericAdapterForm.statusChanges.subscribe((status) => {
+ this.validateEmitter.emit(this.genericAdapterForm.valid);
+ });
+ }
+
+ triggerUpdate(configurationInfo: ConfigurationInfo) {
+ this.completedStaticProperty = {...configurationInfo};
+ }
+
+}
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 ccdf864..e59686a 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
@@ -44,45 +44,34 @@
</div>
<mat-horizontal-stepper [linear]="true" #stepper>
- <mat-step>
- <ng-template matStepLabel>Settings</ng-template>
+ <mat-step *ngIf="!isGenericAdapter">
+ <sp-specific-adapter-settings
+ [adapterDescription]="adapter"
+ (validateEmitter)="validateSpecificAdapterForm($event)">
+ </sp-specific-adapter-settings>
- <div [ngClass]="{'disable-editing': !isEditable}">
- <div class="assemblyOptions sp-blue-bg">
- <h4 *ngIf="!isGenericAdapter">Basic settings</h4>
- <h4 *ngIf="isGenericAdapter">Protocol settings</h4>
- </div>
- <div class="sp-blue-border padding">
- <form [formGroup]="parentForm" fxFlex="100">
- <app-static-property *ngFor="let config of adapter.config"
- [staticProperty]="config"
- [staticProperties]="adapter.config"
- [adapterId]="adapter.appId"
- [parentForm]="parentForm"
- [fieldName]="config.internalName"
- (updateEmitter)="triggerUpdate($event)" [completedStaticProperty]="completedStaticProperty">
- </app-static-property>
- <div fxFlex="100" *ngIf="isGenericAdapter">
- <app-static-property *ngFor="let config of adapter.protocolDescription.config"
- [staticProperty]="config"
- [staticProperties]="adapter.protocolDescription.config"
- [adapterId]="adapter.appId"
- [parentForm]="parentForm"
- [fieldName]="config.internalName"
- (updateEmitter)="triggerUpdate($event)" [completedStaticProperty]="completedStaticProperty">
- </app-static-property>
- </div>
- </form>
- </div>
- </div>
<div fxLayoutAlign="end">
<button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
<div id="specific-settings-next-button">
- <button class="stepper-button" *ngIf="isGenericAdapter" [disabled]="!adapterSettingsFormValid"
- (click)="clickProtocolSettingsNextButton(stepper)" color="primary" mat-raised-button>Next
+ <button class="stepper-button" [disabled]="!specificAdapterSettingsFormValid"
+ (click)="clickSpecificSettingsNextButton(stepper)" color="primary" mat-raised-button>Next
</button>
- <button class="stepper-button" *ngIf="!isGenericAdapter" [disabled]="!adapterSettingsFormValid"
- (click)="clickSpecificSettingsNextButton(stepper)" color="primary" mat-raised-button>Next
+ </div>
+ </div>
+ </mat-step>
+
+ <mat-step *ngIf="isGenericAdapter">
+ <sp-generic-adapter-settings
+ [adapterDescription]="adapter"
+ (validateEmitter)="validateGenericAdapterForm($event)">
+ </sp-generic-adapter-settings>
+
+
+ <div fxLayoutAlign="end">
+ <button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
+ <div id="generic-settings-next-button">
+ <button class="stepper-button" [disabled]="!genericAdapterSettingsFormValid"
+ (click)="clickProtocolSettingsNextButton(stepper)" color="primary" mat-raised-button>Next
</button>
</div>
</div>
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 2d2a8f2..6fbfef6 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
@@ -118,7 +118,8 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
isPreviewEnabled = false;
parentForm: FormGroup;
- adapterSettingsFormValid = false;
+ specificAdapterSettingsFormValid = false;
+ genericAdapterSettingsFormValid = false;
viewInitialized = false;
constructor(
@@ -179,14 +180,14 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
this.oldEventSchema = this.eventSchema;
}
- this.parentForm.statusChanges.subscribe((status) => {
- this.adapterSettingsFormValid = this.viewInitialized && this.parentForm.valid;
- });
+ // this.parentForm.statusChanges.subscribe((status) => {
+ // this.genericadapterSettingsFormValid = this.viewInitialized && this.parentForm.valid;
+ // });
}
ngAfterViewInit() {
this.viewInitialized = true;
- this.adapterSettingsFormValid = this.viewInitialized && this.parentForm.valid;
+ // this.genericAdapterSettingsFormValid = this.viewInitialized && this.parentForm.valid;
this.changeDetectorRef.detectChanges();
}
@@ -245,6 +246,14 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
this.formatConfigurationValid = valid;
}
+ validateSpecificAdapterForm(valid) {
+ this.specificAdapterSettingsFormValid = valid;
+ }
+
+ validateGenericAdapterForm(valid) {
+ this.genericAdapterSettingsFormValid = valid;
+ }
+
removeSelection() {
this.removeSelectionEmitter.emit();
}
diff --git a/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.css b/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.html b/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.html
new file mode 100644
index 0000000..47e44cb
--- /dev/null
+++ b/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.html
@@ -0,0 +1,22 @@
+<div style="margin-bottom: 2%;">
+ <ng-template matStepLabel>Settings</ng-template>
+ <div>
+ <div class="assemblyOptions sp-blue-bg">
+ <h4>Basic settings</h4>
+ </div>
+ <div class="sp-blue-border padding" style="padding: 15px;">
+ <form [formGroup]="specificAdapterForm" fxFlex="100">
+ <app-static-property *ngFor="let config of adapterDescription.config"
+ [staticProperty]="config"
+ [staticProperties]="adapterDescription.config"
+ [adapterId]="adapterDescription.appId"
+ [parentForm]="specificAdapterForm"
+ [fieldName]="config.internalName"
+ (updateEmitter)="triggerUpdate($event)"
+ [completedStaticProperty]="completedStaticProperty">
+ </app-static-property>
+ </form>
+
+ </div>
+ </div>
+</div>
diff --git a/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.ts b/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.ts
new file mode 100644
index 0000000..e7aefd0
--- /dev/null
+++ b/ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.ts
@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AdapterDescriptionUnion } from '../../../core-model/gen/streampipes-model';
+import { ConfigurationInfo } from '../../model/ConfigurationInfo';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+ selector: 'sp-specific-adapter-settings',
+ templateUrl: './specific-adapter-settings.component.html',
+ styleUrls: ['./specific-adapter-settings.component.css']
+})
+export class SpecificAdapterSettingsComponent implements OnInit {
+
+ /**
+ * Adapter description the selected format is added to
+ */
+ @Input() adapterDescription: AdapterDescriptionUnion;
+
+ /**
+ * Returns whether the user input for the format configuration is valid or not
+ */
+ @Output() validateEmitter: EventEmitter<boolean> = new EventEmitter();
+
+
+ completedStaticProperty: ConfigurationInfo;
+
+ specificAdapterForm: FormGroup;
+
+ constructor(
+ private _formBuilder: FormBuilder
+ ) { }
+
+ ngOnInit(): void {
+ // initialize form for validation
+ this.specificAdapterForm = this._formBuilder.group({});
+ this.specificAdapterForm.statusChanges.subscribe((status) => {
+ this.validateEmitter.emit(this.specificAdapterForm.valid);
+ });
+ }
+
+ triggerUpdate(configurationInfo: ConfigurationInfo) {
+ this.completedStaticProperty = {...configurationInfo};
+ }
+
+
+}
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 09a8fbd..676527d 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -71,6 +71,8 @@ import { CoreUiModule } from '../core-ui/core-ui.module';
import { EditCorrectionValueComponent } from './dialog/edit-event-property/components/edit-correction-value/edit-correction-value.component';
import { ExistingAdaptersComponent } from './components/data-marketplace/existing-adapters/existing-adapters.component';
import { SelectFormatComponent } from './components/select-format/select-format.component';
+import { GenericAdapterSettingsComponent } from './components/generic-adapter-settings/generic-adapter-settings.component';
+import { SpecificAdapterSettingsComponent } from './components/specific-adapter-settings/specific-adapter-settings.component';
@NgModule({
imports: [
@@ -116,7 +118,9 @@ import { SelectFormatComponent } from './components/select-format/select-format.
PipelineElementRuntimeInfoComponent,
TimestampPipe,
EditCorrectionValueComponent,
- SelectFormatComponent
+ SelectFormatComponent,
+ GenericAdapterSettingsComponent,
+ SpecificAdapterSettingsComponent
],
providers: [
RestService,