You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/11 20:48:13 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-558] Improve layout of adapter start page
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 1f33026da05a719416e97fa233f01843fdb5ff7d
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jul 10 21:24:57 2022 +0200
[STREAMPIPES-558] Improve layout of adapter start page
---
ui/package.json | 2 +-
.../adapter-options-panel.component.html | 41 ++++++++
.../adapter-options-panel.component.scss} | 27 +++++
.../adapter-options-panel.component.ts} | 27 +++++
.../start-adapter-configuration.component.html | 116 +++++++++++----------
.../start-adapter-configuration.component.scss | 23 ++++
.../start-adapter-configuration.component.ts | 8 +-
ui/src/app/connect/connect.module.ts | 9 +-
ui/src/scss/sp/layout.scss | 5 +
9 files changed, 198 insertions(+), 60 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 5fc113135..e7efac6ea 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -75,7 +75,7 @@
"konva": "3.2.4",
"leaflet": "1.6.0",
"lodash": "4.17.21",
- "material-icons": "^0.5.3",
+ "material-icons": "^1.11.4",
"ngx-color-picker": "^11.0.0",
"ngx-echarts": "^8.0.1",
"ngx-quill": "15.0.0",
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.html b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.html
new file mode 100644
index 000000000..a8ed1d084
--- /dev/null
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.html
@@ -0,0 +1,41 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<div fxFlex="100" fxLayout="column" class="options-panel">
+ <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
+ <div class="mr-15" fxLayoutAlign="start start">
+ <mat-icon class="icon">{{optionIcon}}</mat-icon>
+ </div>
+ <div fxFlex fxLayout="column">
+ <div fxFlex="100" class="title" fxLayout="row">
+ <div fxLayoutAlign="start start" class="mr-15">
+ <mat-checkbox (change)="optionSelectedEmitter.emit($event.checked)"
+ data-cy="{{dataCy}}" class="large-checkbox">
+ </mat-checkbox>
+ </div>
+ <div fxFlex fxLayout="column">
+ <div>{{optionTitle}}</div>
+ <mat-hint class="description">{{optionDescription}}</mat-hint>
+ </div>
+ </div>
+
+ <ng-content></ng-content>
+ </div>
+ </div>
+
+</div>
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
similarity index 60%
copy from ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
copy to ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
index 58ba04bdd..c85b4819e 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
@@ -16,3 +16,30 @@
*
*/
+.options-panel {
+ border-left: 4px solid var(--color-accent);
+ border-bottom: 1px solid var(--color-bg-2);
+ border-top: 1px solid var(--color-bg-2);
+ border-right: 1px solid var(--color-bg-2);
+ padding: 8px;
+ background: var(--color-bg-1);
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.title {
+ color: var(--color-default-text);
+ font-weight: 600;
+ font-size: 14pt;
+ margin-bottom: 10px;
+}
+
+.description {
+ font-size: 11pt;
+}
+
+.icon {
+ margin-right: 10px;
+ color: var(--color-accent);
+ font-size: 22pt;
+}
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.ts
similarity index 60%
copy from ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
copy to ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.ts
index 58ba04bdd..399ff42de 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.ts
@@ -16,3 +16,30 @@
*
*/
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'sp-adapter-options-panel',
+ templateUrl: './adapter-options-panel.component.html',
+ styleUrls: ['./adapter-options-panel.component.scss']
+})
+export class SpAdapterOptionsPanelComponent {
+
+ @Input()
+ optionTitle: string;
+
+ @Input()
+ optionDescription: string;
+
+ @Input()
+ optionIcon: string;
+
+ @Input()
+ dataCy: string;
+
+ @Output()
+ optionSelectedEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+}
+
+
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.html b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.html
index f5fabf72e..0eed07f83 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.html
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.html
@@ -16,12 +16,14 @@
~
-->
-<div [formGroup]="startAdapterForm">
- <div class="assemblyOptions sp-blue-bg">
- <h4>Adapter settings</h4>
+<div [formGroup]="startAdapterForm" fxLayout="column" fxFlex="100" style="margin-top: 10px;">
+ <div class="general-panel-header">
+<!-- <div class="assemblyOptions sp-blue-bg">-->
+ <div class="content-box-title">Adapter settings</div>
</div>
- <div class="sp-blue-border padding" style="padding: 15px; margin-bottom: 2%;">
+ <div class="general-panel">
+<!-- <div class="sp-blue-border padding" style="padding: 15px;">-->
<div fxLayoutAlign="center" fxLayout="column" fxFlex="100">
<mat-form-field color="accent">
<input formControlName="adapterName"
@@ -32,59 +34,65 @@
<input matInput id="input-AdapterDescription" [ngModelOptions]="{standalone: true}"
placeholder="Adapter Description" [(ngModel)]="adapterDescription.description">
</mat-form-field>
+ </div>
+ </div>
- <mat-checkbox [(ngModel)]="removeDuplicates"
- [ngModelOptions]="{standalone: true}"
- data-cy="connect-remove-duplicates-box">Remove Duplicates
- </mat-checkbox>
- <mat-form-field *ngIf="removeDuplicates" color="accent">
- <input matInput id="input-removeDuplicatesTime"
- [ngModelOptions]="{standalone: true}" placeholder="Remove Duplicates Time Window"
- [(ngModel)]="removeDuplicatesTime"
- data-cy="connect-remove-duplicates-input">
- </mat-form-field>
+ <div fxFlex="100" fxLayout="column" class="adapter-options-section">
+ <sp-adapter-options-panel optionTitle="Remove Duplicates"
+ optionDescription="Avoid duplicated events within a certain time interval"
+ optionIcon="cleaning_services"
+ dataCy="connect-remove-duplicates-box"
+ (optionSelectedEmitter)="removeDuplicates = $event">
+ <mat-form-field *ngIf="removeDuplicates" color="accent">
+ <input matInput id="input-removeDuplicatesTime"
+ [ngModelOptions]="{standalone: true}" placeholder="Remove Duplicates Time Window"
+ [(ngModel)]="removeDuplicatesTime"
+ data-cy="connect-remove-duplicates-input">
+ </mat-form-field>
+ </sp-adapter-options-panel>
- <mat-checkbox [(ngModel)]="eventRateReduction"
- [ngModelOptions]="{standalone: true}"
- matTooltip="Send maximum one event in the specified time window"
- data-cy="connect-reduce-event-rate-box">Reduce the event rate
- </mat-checkbox>
- <mat-form-field *ngIf="eventRateReduction" color="accent">
- <input type="number" matInput id="input-evenRateTime"
- [ngModelOptions]="{standalone: true}" [(ngModel)]="eventRateTime"
- placeholder="Time Window (Milliseconds)" matTooltipPosition="above"
- data-cy="connect-reduce-event-input">
- </mat-form-field>
- <mat-form-field *ngIf="eventRateReduction" color="accent">
- <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>
- <!-- Start pipeline template to store raw events in data lake -->
- <mat-checkbox [(ngModel)]="saveInDataLake"
- (change)="findDefaultTimestamp($event)"
- [ngModelOptions]="{standalone: true}"
- data-cy="sp-store-in-datalake">
- Store in Datalake
- </mat-checkbox>
- <mat-form-field *ngIf="saveInDataLake" color="accent">
- <mat-label>Select Time Field</mat-label>
- <mat-select [(ngModel)]="dataLakeTimestampField"
- [ngModelOptions]="{standalone: true}"
- data-cy="sp-store-in-datalake-timestamp">
- <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>
- </div>
+ <sp-adapter-options-panel optionTitle="Reduce event rate"
+ optionDescription="Send maximum one event in the specified time window"
+ optionIcon="speed"
+ dataCy="connect-reduce-event-rate-box"
+ (optionSelectedEmitter)="eventRateReduction = $event">
+ <mat-form-field *ngIf="eventRateReduction" color="accent">
+ <input type="number" matInput id="input-evenRateTime"
+ [ngModelOptions]="{standalone: true}" [(ngModel)]="eventRateTime"
+ placeholder="Time Window (Milliseconds)" matTooltipPosition="above"
+ data-cy="connect-reduce-event-input">
+ </mat-form-field>
+ <mat-form-field *ngIf="eventRateReduction" color="accent">
+ <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>
+ </sp-adapter-options-panel>
+
+ <!-- Start pipeline template to store raw events in data lake -->
+ <sp-adapter-options-panel optionTitle="Persist events"
+ optionDescription="Store all events of this source in the internal data store"
+ optionIcon="save"
+ dataCy="sp-store-in-datalake"
+ (optionSelectedEmitter)="handlePersistOption($event)">
+ <mat-form-field *ngIf="saveInDataLake" color="accent">
+ <mat-label>Select Time Field</mat-label>
+ <mat-select [(ngModel)]="dataLakeTimestampField"
+ [ngModelOptions]="{standalone: true}"
+ data-cy="sp-store-in-datalake-timestamp">
+ <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>
+ </sp-adapter-options-panel>
</div>
<div fxLayoutAlign="end">
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
index 58ba04bdd..caa099f0d 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
@@ -16,3 +16,26 @@
*
*/
+.general-panel {
+ border: 2px solid var(--color-bg-3);
+ padding: 15px;
+}
+
+.general-panel-header {
+ background: var(--color-bg-2);
+ border: 2px solid var(--color-bg-3);
+ border-bottom: 0;
+ padding-left: 5px;
+ height: 50px;
+ min-height: 50px;
+}
+
+.adapter-options-section {
+ margin-top: 6px;
+}
+
+.content-box-title {
+ padding-left: 8px;
+ border-left: 4px solid var(--color-accent);
+}
+
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.ts b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.ts
index c694cb1ac..3b116cee4 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.ts
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.ts
@@ -105,8 +105,8 @@ export class StartAdapterConfigurationComponent implements OnInit {
});
}
- findDefaultTimestamp(event: MatCheckboxChange) {
- if (event.checked) {
+ findDefaultTimestamp(selected: boolean) {
+ if (selected) {
const timestampFields = this.timestampPipe.transform(this.eventSchema.eventProperties);
if (timestampFields.length > 0) {
this.dataLakeTimestampField = timestampFields[0].runtimeName;
@@ -161,4 +161,8 @@ export class StartAdapterConfigurationComponent implements OnInit {
this.goBackEmitter.emit();
}
+ handlePersistOption(selected: boolean) {
+ this.saveInDataLake = selected;
+ this.findDefaultTimestamp(selected);
+ }
}
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 5d9361aec..3b06a491b 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -17,7 +17,7 @@
*/
import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -84,6 +84,7 @@ import { SpConnectFilterToolbarComponent } from './components/filter-toolbar/fil
import { EditSchemaTransformationComponent } from './dialog/edit-event-property/components/edit-schema-transformation/edit-schema-transformation.component';
import { EditValueTransformationComponent } from './dialog/edit-event-property/components/edit-value-transformation/edit-value-transformation.component';
import { SpEpSettingsSectionComponent } from './dialog/edit-event-property/components/ep-settings-section/ep-settings-section.component';
+import { SpAdapterOptionsPanelComponent } from './components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component';
@NgModule({
imports: [
@@ -160,7 +161,8 @@ import { SpEpSettingsSectionComponent } from './dialog/edit-event-property/compo
SpEpSettingsSectionComponent,
StartAdapterConfigurationComponent,
FormatItemJsonComponent,
- SpConnectFilterToolbarComponent
+ SpConnectFilterToolbarComponent,
+ SpAdapterOptionsPanelComponent
],
providers: [
RestService,
@@ -173,7 +175,8 @@ import { SpEpSettingsSectionComponent } from './dialog/edit-event-property/compo
UnitProviderService,
TimestampPipe,
XsService
- ]
+ ],
+ schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class ConnectModule {
}
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 64ae3550b..272feb17f 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -195,3 +195,8 @@ img {
.small-select .mat-form-field-wrapper {
padding-bottom: 0;
}
+
+.large-checkbox .mat-checkbox-inner-container {
+ width: 20px;
+ height: 20px;
+}