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:47 UTC

[incubator-streampipes] branch STREAMPIPES-380 updated (44f9891 -> e0e29f0)

This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a change to branch STREAMPIPES-380
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.


    from 44f9891  Change select format component
     new a5ec617  Fix linting in connect.module
     new e0e29f0  Add component for specific and generic adapters

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../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 +++--
 .../select-format/select-format.component.html     |  1 +
 .../specific-adapter-settings.component.css        |  0
 .../specific-adapter-settings.component.html       | 22 +++++
 .../specific-adapter-settings.component.ts         | 45 ++++++++++
 ui/src/app/connect/connect.component.ts            |  4 +-
 ui/src/app/connect/connect.module.ts               | 99 ++++++++++++----------
 11 files changed, 240 insertions(+), 88 deletions(-)
 create mode 100644 ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.css
 create mode 100644 ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.html
 create mode 100644 ui/src/app/connect/components/generic-adapter-settings/generic-adapter-settings.component.ts
 create mode 100644 ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.css
 create mode 100644 ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.html
 create mode 100644 ui/src/app/connect/components/specific-adapter-settings/specific-adapter-settings.component.ts

[incubator-streampipes] 01/02: Fix linting in connect.module

Posted by ze...@apache.org.
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 a5ec6171c20c4e4a0fdcbaeecc6270b6aeca8aff
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Jun 14 16:03:56 2021 +0200

    Fix linting in connect.module
---
 .../select-format/select-format.component.html     |  1 +
 ui/src/app/connect/connect.component.ts            |  4 +-
 ui/src/app/connect/connect.module.ts               | 93 +++++++++++-----------
 3 files changed, 50 insertions(+), 48 deletions(-)

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 c22b4c2..2d56715 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
@@ -15,6 +15,7 @@
     <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">
diff --git a/ui/src/app/connect/connect.component.ts b/ui/src/app/connect/connect.component.ts
index 38fce8e..eb90767 100644
--- a/ui/src/app/connect/connect.component.ts
+++ b/ui/src/app/connect/connect.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component} from '@angular/core';
-import {AdapterDescriptionUnion} from "../core-model/gen/streampipes-model";
+import { Component } from '@angular/core';
+import { AdapterDescriptionUnion } from '../core-model/gen/streampipes-model';
 
 @Component({
   selector: 'sp-connect',
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 40dde9c..09a8fbd 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -16,59 +16,60 @@
  *
  */
 
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-import {ConnectComponent} from './connect.component';
-import {NewAdapterComponent} from './components/new-adapter/new-adapter.component';
+import { ConnectComponent } from './connect.component';
+import { NewAdapterComponent } from './components/new-adapter/new-adapter.component';
 
-import {EditEventPropertyPrimitiveComponent} from './dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component';
-import {EventSchemaComponent} from './components/schema-editor/event-schema/event-schema.component';
+import { EditEventPropertyPrimitiveComponent } from './dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component';
+import { EventSchemaComponent } from './components/schema-editor/event-schema/event-schema.component';
 
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
-import {RestService} from './services/rest.service';
+import { RestService } from './services/rest.service';
 
-import {MatInputModule} from '@angular/material/input';
-import {DragulaModule} from 'ng2-dragula';
-import {AdapterStartedDialog} from './dialog/adapter-started/adapter-started-dialog.component';
-import {DataTypesService} from './services/data-type.service';
-import {StaticPropertyUtilService} from '../core-ui/static-properties/static-property-util.service';
-import {TransformationRuleService} from './services/transformation-rule.service';
-import {ConnectService} from './services/connect.service';
-import {AdapterDescriptionComponent} from './components/data-marketplace/adapter-description/adapter-description.component';
-import {DataMarketplaceComponent} from './components/data-marketplace/data-marketplace.component';
-import {DataMarketplaceService} from './services/data-marketplace.service';
-import {FormatItemComponent} from './components/format-item/format-item.component';
-import {FormatListComponent} from './components/format-list/format-list.component';
-import {IconService} from './services/icon.service';
-import {UnitProviderService} from './services/unit-provider.service';
+import { MatInputModule } from '@angular/material/input';
+import { DragulaModule } from 'ng2-dragula';
+import { AdapterStartedDialog } from './dialog/adapter-started/adapter-started-dialog.component';
+import { DataTypesService } from './services/data-type.service';
+import { StaticPropertyUtilService } from '../core-ui/static-properties/static-property-util.service';
+import { TransformationRuleService } from './services/transformation-rule.service';
+import { ConnectService } from './services/connect.service';
+import { AdapterDescriptionComponent } from './components/data-marketplace/adapter-description/adapter-description.component';
+import { DataMarketplaceComponent } from './components/data-marketplace/data-marketplace.component';
+import { DataMarketplaceService } from './services/data-marketplace.service';
+import { FormatItemComponent } from './components/format-item/format-item.component';
+import { FormatListComponent } from './components/format-list/format-list.component';
+import { IconService } from './services/icon.service';
+import { UnitProviderService } from './services/unit-provider.service';
 
 
-import {FilterPipe} from './filter/filter.pipe';
-import {AdapterExportDialog} from './dialog/adapter-export/adapter-export-dialog.component';
-import {AdapterUploadDialog} from './dialog/adapter-upload/adapter-upload-dialog.component';
-import {EditEventPropertyListComponent} from './dialog/edit-event-property/components/edit-event-property-list/edit-event-property-list.component';
-import {TimestampPipe} from './filter/timestamp.pipe';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatSliderModule} from '@angular/material/slider';
-import {TreeModule} from 'angular-tree-component';
-import {xsService} from '../NS/XS.service';
-import {EditDataTypeComponent} from './dialog/edit-event-property/components/edit-data-type/edit-data-type.component';
-import {EditTimestampPropertyComponent} from './dialog/edit-event-property/components/edit-timestamp-property/edit-timestamp-property.component';
-import {EditUnitTransformationComponent} from './dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component';
-import {EditEventPropertyComponent} from './dialog/edit-event-property/edit-event-property.component';
-import {PipelineElementRuntimeInfoComponent} from './components/runtime-info/pipeline-element-runtime-info.component';
-import {EventPropertyRowComponent} from './components/schema-editor/event-property-row/event-property-row.component';
-import {EventSchemaPreviewComponent} from './components/schema-editor/event-schema-preview/event-schema-preview.component';
-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 { FilterPipe } from './filter/filter.pipe';
+import { AdapterExportDialog } from './dialog/adapter-export/adapter-export-dialog.component';
+import { AdapterUploadDialog } from './dialog/adapter-upload/adapter-upload-dialog.component';
+import { EditEventPropertyListComponent } from './dialog/edit-event-property/components/edit-event-property-list/edit-event-property-list.component';
+import { TimestampPipe } from './filter/timestamp.pipe';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSliderModule } from '@angular/material/slider';
+import { TreeModule } from 'angular-tree-component';
+import { xsService } from '../NS/XS.service';
+import { EditDataTypeComponent } from './dialog/edit-event-property/components/edit-data-type/edit-data-type.component';
+import { EditTimestampPropertyComponent } from './dialog/edit-event-property/components/edit-timestamp-property/edit-timestamp-property.component';
+import { EditUnitTransformationComponent } from './dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component';
+import { EditEventPropertyComponent } from './dialog/edit-event-property/edit-event-property.component';
+import { PipelineElementRuntimeInfoComponent } from './components/runtime-info/pipeline-element-runtime-info.component';
+import { EventPropertyRowComponent } from './components/schema-editor/event-property-row/event-property-row.component';
+import { EventSchemaPreviewComponent } from './components/schema-editor/event-schema-preview/event-schema-preview.component';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+// tslint:disable-next-line:max-line-length
+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';
 
 @NgModule({

[incubator-streampipes] 02/02: Add component for specific and generic adapters

Posted by ze...@apache.org.
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,