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/15 09:52:31 UTC
[incubator-streampipes] 01/02: WIP refactor start adapter
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 3879bb376b8433a881350e25fa61a0a826121058
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jun 15 09:55:14 2021 +0200
WIP refactor start adapter
---
.../new-adapter/new-adapter.component.html | 105 ++-------------------
.../new-adapter/new-adapter.component.ts | 5 -
.../specific-adapter-configuration.component.css | 3 +
.../specific-adapter-configuration.component.html | 12 +++
.../specific-adapter-configuration.component.ts | 26 ++++-
.../start-adapter-configuration.component.css} | 0
.../start-adapter-configuration.component.html | 92 ++++++++++++++++++
.../start-adapter-configuration.component.ts | 15 +++
8 files changed, 151 insertions(+), 107 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 eb789de..f1746da 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
@@ -46,17 +46,10 @@
<mat-step *ngIf="!isGenericAdapter">
<sp-specific-adapter-configuration
[adapterDescription]="adapter"
- (validateEmitter)="validateSpecificAdapterForm($event)">
+ [stepper]="stepper"
+ (clickNextEmitter)="clickSpecificSettingsNextButton($event)"
+ (removeSelectionEmitter)="removeSelection()">
</sp-specific-adapter-configuration>
-
- <div fxLayoutAlign="end">
- <button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
- <div id="specific-settings-next-button">
- <button class="stepper-button" [disabled]="!specificAdapterSettingsFormValid"
- (click)="clickSpecificSettingsNextButton(stepper)" color="primary" mat-raised-button>Next
- </button>
- </div>
- </div>
</mat-step>
<mat-step *ngIf="isGenericAdapter">
@@ -115,97 +108,11 @@
</mat-step>
<mat-step>
- <div [formGroup]="startAdapterFormGroup">
- <ng-template matStepLabel>Start Adapter</ng-template>
- <div class="assemblyOptions sp-blue-bg">
- <h4>Adapter settings</h4>
- </div>
- <div class="sp-blue-border padding">
- <div fxLayoutAlign="center" fxLayout="column" fxFlex="100">
- <mat-form-field>
- <input matInput id="input-AdapterName" placeholder="Adapter Name"
- formControlName="startAdapterFormCtrl" [(ngModel)]="adapter.name">
- </mat-form-field>
- <mat-form-field>
- <input matInput id="input-AdapterDescription" [ngModelOptions]="{standalone: true}"
- placeholder="Adapter Description" [(ngModel)]="adapter.description">
- </mat-form-field>
-
-<!-- <mat-form-field *ngIf="isEditable" style="width: 50%" (click)="fileInput.click();">-->
-<!-- <input matInput placeholder="Icon" disabled (value)="fileName">-->
-<!-- <input #fileInput type="file" style="display:none;"-->
-<!-- (change)="handleFileInput($event.target.files)">-->
-<!-- {{fileName}}-->
-<!-- <button color="primary" matSuffix mat-button style="min-width: 0px">-->
-<!-- <mat-icon>insert_drive_file</mat-icon>-->
-<!-- </button>-->
-<!-- </mat-form-field>-->
-
-
- <mat-checkbox [disabled]="!isEditable" [(ngModel)]="removeDuplicates"
- [ngModelOptions]="{standalone: true}">Remove Duplicates</mat-checkbox>
- <mat-form-field *ngIf="removeDuplicates">
- <input [disabled]="!isEditable" matInput id="input-removeDuplicatesTime"
- [ngModelOptions]="{standalone: true}" placeholder="Remove Duplicates Time Window"
- [(ngModel)]="removeDuplicatesTime">
- </mat-form-field>
-
- <mat-checkbox [disabled]="!isEditable" [(ngModel)]="eventRateReduction"
- [ngModelOptions]="{standalone: true}"
- matTooltip="Send maximum one event in the specified time window">Reduce the event rate
- </mat-checkbox>
- <mat-form-field *ngIf="eventRateReduction">
- <input [disabled]="!isEditable" type="number" matInput id="input-evenRateTime"
- [ngModelOptions]="{standalone: true}" [(ngModel)]="eventRateTime"
- placeholder="Time Window (Milliseconds)" matTooltipPosition="above">
- </mat-form-field>
- <mat-form-field *ngIf="eventRateReduction">
- <mat-label>Event Aggregation</mat-label>
- <mat-select [(ngModel)]="eventRateMode" [ngModelOptions]="{standalone: true}">
- <mat-option class="md-elevation-z1" style="background: white;"
- matTooltip="Last Event in Time Window" value="none">
- None
- </mat-option>
- </mat-select>
- </mat-form-field>
-
- <!--<mat-checkbox *ngIf="timestampPropertiesInSchema.length == 0"-->
- <!--[disabled]="timestampPropertiesInSchema.length == 0" [(ngModel)]="saveInDataLake"-->
- <!--[ngModelOptions]="{standalone: true}">Store in Datalake (Timestamp required)</mat-checkbox>-->
- <!--<mat-checkbox *ngIf="timestampPropertiesInSchema.length > 0" [(ngModel)]="saveInDataLake"-->
- <!--[ngModelOptions]="{standalone: true}">Store in Datalake</mat-checkbox>-->
- <!--<mat-form-field *ngIf="saveInDataLake">-->
- <!--<mat-label>Select Time Field</mat-label>-->
- <!--<mat-select [(ngModel)]="dataLakeTimestampField" [ngModelOptions]="{standalone: true}">-->
- <!--<mat-option class="md-elevation-z1" style="background: white;"-->
- <!--*ngFor="let timestampField of eventSchema.eventProperties | timestampFilter"-->
- <!--[value]="timestampField.runTimeName">-->
- <!--{{timestampField.runTimeName}}-->
- <!--</mat-option>-->
- <!--</mat-select>-->
- <!--</mat-form-field>-->
-
- <mat-checkbox *ngIf="isSetAdapter" [(ngModel)]="adapter.stopPipeline"
- [ngModelOptions]="{standalone: true}">Stop pipeline when replay is completed</mat-checkbox>
+ <sp-start-adapter-configuration
+ >
+ </sp-start-adapter-configuration>
- </div>
- </div>
-
- <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 [disabled]="startAdapterFormGroup.invalid || !isEditable" mat-raised-button
- id="button-saveTemplate" color="primary" (click)="saveTemplate()" mat-button
- style="margin-left:10px;">
- Save as Template
- </button>
- <button [disabled]="startAdapterFormGroup.invalid" mat-raised-button id="button-startAdapter"
- color="primary" (click)="startAdapter()" mat-button style="margin-left:10px;">
- Start Adapter
- </button>
- </div>
- </div>
</mat-step>
</mat-horizontal-stepper>
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 471a831..27274f5 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,6 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
isPreviewEnabled = false;
parentForm: FormGroup;
- specificAdapterSettingsFormValid = false;
genericAdapterSettingsFormValid = false;
viewInitialized = false;
@@ -242,10 +241,6 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
this.formatConfigurationValid = valid;
}
- validateSpecificAdapterForm(valid) {
- this.specificAdapterSettingsFormValid = valid;
- }
-
validateGenericAdapterForm(valid) {
this.genericAdapterSettingsFormValid = valid;
}
diff --git a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css
index e69de29..2835bd6 100644
--- a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css
+++ b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css
@@ -0,0 +1,3 @@
+.stepper-button {
+ margin-left:10px;
+}
diff --git a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html
index 939ec10..696c3b6 100644
--- a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html
+++ b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html
@@ -13,3 +13,15 @@
</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" [disabled]="!specificAdapterSettingsFormValid"
+ (click)="clickNext()" color="primary" mat-raised-button>Next
+ </button>
+<!-- <button class="stepper-button" [disabled]="!specificAdapterSettingsFormValid"-->
+<!-- (click)="clickSpecificSettingsNextButton(stepper)" color="primary" mat-raised-button>Next-->
+<!-- </button>-->
+ </div>
+</div>
diff --git a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.ts b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.ts
index 8605d62..c7a3a18 100644
--- a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.ts
+++ b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.ts
@@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AdapterDescriptionUnion } from '../../../core-model/gen/streampipes-model';
import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatStepper } from '@angular/material/stepper';
@Component({
selector: 'sp-specific-adapter-configuration',
@@ -15,9 +16,21 @@ export class SpecificAdapterConfigurationComponent implements OnInit {
@Input() adapterDescription: AdapterDescriptionUnion;
/**
- * Returns whether the user input for the format configuration is valid or not
+ * Mat stepper to trigger next confifuration step when this is completed
*/
- @Output() validateEmitter: EventEmitter<boolean> = new EventEmitter();
+ @Input() stepper: MatStepper;
+
+ /**
+ * Cancels the adapter configuration process
+ */
+ @Output() removeSelectionEmitter: EventEmitter<boolean> = new EventEmitter();
+
+ /**
+ * Go to next configuration step when this is complete
+ */
+ @Output() clickNextEmitter: EventEmitter<MatStepper> = new EventEmitter();
+
+ specificAdapterSettingsFormValid: boolean;
specificAdapterForm: FormGroup;
@@ -29,8 +42,15 @@ export class SpecificAdapterConfigurationComponent implements OnInit {
// initialize form for validation
this.specificAdapterForm = this._formBuilder.group({});
this.specificAdapterForm.statusChanges.subscribe((status) => {
- this.validateEmitter.emit(this.specificAdapterForm.valid);
+ this.specificAdapterSettingsFormValid = this.specificAdapterForm.valid;
});
}
+ public removeSelection() {
+ this.removeSelectionEmitter.emit();
+ }
+
+ public clickNext() {
+ this.clickNextEmitter.emit(this.stepper);
+ }
}
diff --git a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.css
similarity index 100%
copy from ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.css
copy to ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.css
diff --git a/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.html b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.html
new file mode 100644
index 0000000..67cedd4
--- /dev/null
+++ b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.html
@@ -0,0 +1,92 @@
+<div [formGroup]="startAdapterFormGroup">
+ <ng-template matStepLabel>Start Adapter</ng-template>
+ <div class="assemblyOptions sp-blue-bg">
+ <h4>Adapter settings</h4>
+ </div>
+
+ <div class="sp-blue-border padding">
+ <div fxLayoutAlign="center" fxLayout="column" fxFlex="100">
+ <mat-form-field>
+ <input matInput id="input-AdapterName" placeholder="Adapter Name"
+ formControlName="startAdapterFormCtrl" [(ngModel)]="adapter.name">
+ </mat-form-field>
+ <mat-form-field>
+ <input matInput id="input-AdapterDescription" [ngModelOptions]="{standalone: true}"
+ placeholder="Adapter Description" [(ngModel)]="adapter.description">
+ </mat-form-field>
+
+ <!-- <mat-form-field *ngIf="isEditable" style="width: 50%" (click)="fileInput.click();">-->
+ <!-- <input matInput placeholder="Icon" disabled (value)="fileName">-->
+ <!-- <input #fileInput type="file" style="display:none;"-->
+ <!-- (change)="handleFileInput($event.target.files)">-->
+ <!-- {{fileName}}-->
+ <!-- <button color="primary" matSuffix mat-button style="min-width: 0px">-->
+ <!-- <mat-icon>insert_drive_file</mat-icon>-->
+ <!-- </button>-->
+ <!-- </mat-form-field>-->
+
+
+ <mat-checkbox [disabled]="!isEditable" [(ngModel)]="removeDuplicates"
+ [ngModelOptions]="{standalone: true}">Remove Duplicates</mat-checkbox>
+ <mat-form-field *ngIf="removeDuplicates">
+ <input [disabled]="!isEditable" matInput id="input-removeDuplicatesTime"
+ [ngModelOptions]="{standalone: true}" placeholder="Remove Duplicates Time Window"
+ [(ngModel)]="removeDuplicatesTime">
+ </mat-form-field>
+
+ <mat-checkbox [disabled]="!isEditable" [(ngModel)]="eventRateReduction"
+ [ngModelOptions]="{standalone: true}"
+ matTooltip="Send maximum one event in the specified time window">Reduce the event rate
+ </mat-checkbox>
+ <mat-form-field *ngIf="eventRateReduction">
+ <input [disabled]="!isEditable" type="number" matInput id="input-evenRateTime"
+ [ngModelOptions]="{standalone: true}" [(ngModel)]="eventRateTime"
+ placeholder="Time Window (Milliseconds)" matTooltipPosition="above">
+ </mat-form-field>
+ <mat-form-field *ngIf="eventRateReduction">
+ <mat-label>Event Aggregation</mat-label>
+ <mat-select [(ngModel)]="eventRateMode" [ngModelOptions]="{standalone: true}">
+ <mat-option class="md-elevation-z1" style="background: white;"
+ matTooltip="Last Event in Time Window" value="none">
+ None
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <!--<mat-checkbox *ngIf="timestampPropertiesInSchema.length == 0"-->
+ <!--[disabled]="timestampPropertiesInSchema.length == 0" [(ngModel)]="saveInDataLake"-->
+ <!--[ngModelOptions]="{standalone: true}">Store in Datalake (Timestamp required)</mat-checkbox>-->
+ <!--<mat-checkbox *ngIf="timestampPropertiesInSchema.length > 0" [(ngModel)]="saveInDataLake"-->
+ <!--[ngModelOptions]="{standalone: true}">Store in Datalake</mat-checkbox>-->
+ <!--<mat-form-field *ngIf="saveInDataLake">-->
+ <!--<mat-label>Select Time Field</mat-label>-->
+ <!--<mat-select [(ngModel)]="dataLakeTimestampField" [ngModelOptions]="{standalone: true}">-->
+ <!--<mat-option class="md-elevation-z1" style="background: white;"-->
+ <!--*ngFor="let timestampField of eventSchema.eventProperties | timestampFilter"-->
+ <!--[value]="timestampField.runTimeName">-->
+ <!--{{timestampField.runTimeName}}-->
+ <!--</mat-option>-->
+ <!--</mat-select>-->
+ <!--</mat-form-field>-->
+
+ <mat-checkbox *ngIf="isSetAdapter" [(ngModel)]="adapter.stopPipeline"
+ [ngModelOptions]="{standalone: true}">Stop pipeline when replay is completed</mat-checkbox>
+
+ </div>
+ </div>
+
+ <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 [disabled]="startAdapterFormGroup.invalid || !isEditable" mat-raised-button
+ id="button-saveTemplate" color="primary" (click)="saveTemplate()" mat-button
+ style="margin-left:10px;">
+ Save as Template
+ </button>
+ <button [disabled]="startAdapterFormGroup.invalid" mat-raised-button id="button-startAdapter"
+ color="primary" (click)="startAdapter()" mat-button style="margin-left:10px;">
+ Start Adapter
+ </button>
+ </div>
+</div>
+
diff --git a/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts
new file mode 100644
index 0000000..4cab09a
--- /dev/null
+++ b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'sp-start-adapter-configuration',
+ templateUrl: './start-adapter-configuration.component.html',
+ styleUrls: ['./start-adapter-configuration.component.css']
+})
+export class StartAdapterConfigurationComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}