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:12 UTC
[incubator-streampipes] branch STREAMPIPES-558 updated (633821a0f -> b294126e5)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
from 633821a0f [hotfix] Use default value for machine simulator frequency
new 1f33026da [STREAMPIPES-558] Improve layout of adapter start page
new b294126e5 [STREAMPIPES-558] Harmonize layout of connect module
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:
ui/package.json | 2 +-
.../basic-header-title/header-title.component.html | 1 +
.../basic-header-title/header-title.component.scss | 10 ++
.../basic-header-title/header-title.component.ts | 19 +++
.../basic-inner-panel.component.html} | 15 +-
.../basic-inner-panel.component.scss} | 51 +++---
.../basic-inner-panel.component.ts} | 18 +-
.../basic-view/basic-view.component.html | 18 --
.../shared-ui/src/lib/shared-ui.module.ts | 6 +
.../streampipes/shared-ui/src/public-api.ts | 4 +-
.../configuration-group.component.html | 2 +-
.../data-marketplace.component.html | 41 ++---
.../existing-adapters.component.html | 185 +++++++++++----------
.../existing-adapters.component.scss | 4 +-
.../format-configuration.component.html | 65 ++++----
.../format-item-json.component.scss | 3 +-
.../format-item/format-item.component.scss | 3 +-
.../format-list/format-list.component.html | 4 +-
.../format-list/format-list.component.scss | 16 +-
.../generic-adapter-configuration.component.html | 35 ++--
.../event-schema/event-schema.component.html | 9 +-
.../schema-editor-header.component.html | 95 ++++++-----
.../schema-editor-header.component.scss | 4 -
.../specific-adapter-configuration.component.html | 35 ++--
.../adapter-options-panel.component.html} | 22 ++-
.../adapter-options-panel.component.scss} | 47 ++----
.../adapter-options-panel.component.ts} | 29 ++--
.../start-adapter-configuration.component.html | 72 ++++----
.../start-adapter-configuration.component.scss | 1 +
.../start-adapter-configuration.component.ts | 8 +-
ui/src/app/connect/connect.module.ts | 9 +-
ui/src/scss/sp/layout.scss | 5 +
32 files changed, 445 insertions(+), 393 deletions(-)
create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
copy ui/{src/app/dashboard/components/widgets/wordcloud/wordcloud-widget.component.html => projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html} (63%)
copy ui/{src/app/profile/components/token/token-management-settings.component.scss => projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss} (63%)
copy ui/{src/app/core-ui/split-section/split-section.component.ts => projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts} (75%)
copy ui/src/app/{core-ui/split-section/split-section.component.html => connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.html} (53%)
copy ui/src/app/{profile/components/token/token-management-settings.component.scss => connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss} (67%)
copy ui/src/app/{data-explorer/components/widgets/utils/too-much-data/too-much-data.component.ts => connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.ts} (68%)
[incubator-streampipes] 01/02: [STREAMPIPES-558] Improve layout of adapter start page
Posted by ri...@apache.org.
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;
+}
[incubator-streampipes] 02/02: [STREAMPIPES-558] Harmonize layout of connect module
Posted by ri...@apache.org.
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 b294126e5b9755533219d958e2d98ce30e02bc47
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Jul 11 22:47:57 2022 +0200
[STREAMPIPES-558] Harmonize layout of connect module
---
.../basic-header-title/header-title.component.html | 1 +
.../basic-header-title/header-title.component.scss | 10 ++
.../basic-header-title/header-title.component.ts | 19 +++
.../basic-inner-panel.component.html} | 25 +--
.../basic-inner-panel.component.scss} | 26 +--
.../basic-inner-panel.component.ts} | 37 ++---
.../basic-view/basic-view.component.html | 18 --
.../shared-ui/src/lib/shared-ui.module.ts | 6 +
.../streampipes/shared-ui/src/public-api.ts | 4 +-
.../configuration-group.component.html | 2 +-
.../data-marketplace.component.html | 41 ++---
.../existing-adapters.component.html | 185 +++++++++++----------
.../existing-adapters.component.scss | 4 +-
.../format-configuration.component.html | 65 ++++----
.../format-item-json.component.scss | 3 +-
.../format-item/format-item.component.scss | 3 +-
.../format-list/format-list.component.html | 4 +-
.../format-list/format-list.component.scss | 16 +-
.../generic-adapter-configuration.component.html | 35 ++--
.../event-schema/event-schema.component.html | 9 +-
.../schema-editor-header.component.html | 95 ++++++-----
.../schema-editor-header.component.scss | 4 -
.../specific-adapter-configuration.component.html | 35 ++--
.../adapter-options-panel.component.scss | 4 +-
.../start-adapter-configuration.component.html | 142 ++++++++--------
.../start-adapter-configuration.component.scss | 22 ---
26 files changed, 409 insertions(+), 406 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
new file mode 100644
index 000000000..555c9a3ae
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
@@ -0,0 +1 @@
+<div class="header-title title-left-border" [ngStyle]="{margin: margin}">{{title}}</div>
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
new file mode 100644
index 000000000..cd54ccc20
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
@@ -0,0 +1,10 @@
+.title-left-border {
+ border-left: 4px solid var(--color-accent);
+ padding-left: 8px;
+}
+
+.header-title {
+ font-size: 20pt;
+ font-weight: bold;
+}
+
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
new file mode 100644
index 000000000..49f945e8d
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'sp-basic-header-title-component',
+ templateUrl: './header-title.component.html',
+ styleUrls: ['./header-title.component.scss']
+})
+export class SpBasicHeaderTitleComponent implements OnInit {
+
+ @Input()
+ title: string;
+
+ @Input()
+ margin = '0';
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
similarity index 54%
copy from ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
index e5923e312..5a99598bc 100644
--- a/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
@@ -16,26 +16,15 @@
~
-->
-<div style="margin-bottom: 2%;">
- <div>
- <div class="assemblyOptions sp-blue-bg">
- <h4>Basic settings</h4>
+<div fxLayout="column" fxFlex="100" class="panel-outer" [ngStyle]="{margin: outerMargin}">
+ <div class="general-panel-header" fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
+ <div fxLayout="fill" fxFlex="100">
+ <div class="content-box-title" *ngIf="showTitle">{{panelTitle}}</div>
+ <ng-content select="[header]" fxFlex></ng-content>
</div>
-
- <sp-configuration-group
- [configurationGroup]="specificAdapterForm"
- [adapterId]="adapterDescription.appId"
- [configuration]="adapterDescription.config">
- </sp-configuration-group>
-
</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="accent" mat-raised-button>Next
- </button>
+ <div class="general-panel" [ngStyle]="{padding: innerPadding}">
+ <ng-content fxFlex="100"></ng-content>
</div>
</div>
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
similarity index 76%
copy from ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
index caa099f0d..c4d52dfcf 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
@@ -16,26 +16,32 @@
*
*/
-.general-panel {
+.panel-outer {
+ margin-top: 15px;
+ margin-bottom: 15px;
border: 2px solid var(--color-bg-3);
- padding: 15px;
+}
+
+.general-panel {
+ border: 0px solid var(--color-bg-3);
}
.general-panel-header {
+ margin-top: -1px;
background: var(--color-bg-2);
- border: 2px solid var(--color-bg-3);
- border-bottom: 0;
+ border: 0px solid var(--color-bg-3);
+ border-bottom: 2px solid var(--color-bg-3);
padding-left: 5px;
height: 50px;
min-height: 50px;
-}
-
-.adapter-options-section {
- margin-top: 6px;
+ max-height: 50px;
}
.content-box-title {
- padding-left: 8px;
+ margin-left: 5px;
+ padding-left: 5px;
border-left: 4px solid var(--color-accent);
+ font-weight: 600;
+ font-size: 13pt;
+ white-space: nowrap;
}
-
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
similarity index 67%
copy from ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
index caa099f0d..9f6ed56fa 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/start-adapter-configuration.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
@@ -16,26 +16,25 @@
*
*/
-.general-panel {
- border: 2px solid var(--color-bg-3);
- padding: 15px;
-}
+import { Component, Input } from '@angular/core';
-.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;
-}
+@Component({
+ selector: 'sp-basic-inner-panel',
+ templateUrl: './basic-inner-panel.component.html',
+ styleUrls: ['./basic-inner-panel.component.scss']
+})
+export class SpBasicInnerPanelComponent {
-.adapter-options-section {
- margin-top: 6px;
-}
+ @Input()
+ panelTitle: string;
-.content-box-title {
- padding-left: 8px;
- border-left: 4px solid var(--color-accent);
-}
+ @Input()
+ showTitle = true;
+ @Input()
+ innerPadding = '15px';
+
+ @Input()
+ outerMargin = '0px';
+
+}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
index 8051bf6b7..a6cea2994 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -16,24 +16,6 @@
~
-->
-<!--
- ~ 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 fxLayout="column" class="page-container">
<div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav">
<div fxLayout="fill" fxFlex="100">
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index 1758565cf..d69664dd2 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -30,12 +30,16 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SpBasicNavTabsComponent } from './components/basic-nav-tabs/basic-nav-tabs.component';
import { MatTabsModule } from '@angular/material/tabs';
+import { SpBasicInnerPanelComponent } from './components/basic-inner-panel/basic-inner-panel.component';
+import { SpBasicHeaderTitleComponent } from './components/basic-header-title/header-title.component';
@NgModule({
declarations: [
ConfirmDialogComponent,
PanelDialogComponent,
StandardDialogComponent,
+ SpBasicInnerPanelComponent,
+ SpBasicHeaderTitleComponent,
SpBasicViewComponent,
SpBasicNavTabsComponent
],
@@ -53,6 +57,8 @@ import { MatTabsModule } from '@angular/material/tabs';
ConfirmDialogComponent,
PanelDialogComponent,
StandardDialogComponent,
+ SpBasicInnerPanelComponent,
+ SpBasicHeaderTitleComponent,
SpBasicViewComponent,
SpBasicNavTabsComponent,
]
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts
index 007b7cd99..d5e9026e9 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -26,9 +26,11 @@ export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
export * from './lib/dialog/panel-dialog/panel-dialog.component';
export * from './lib/dialog/standard-dialog/standard-dialog.component';
+export * from './lib/components/basic-header-title/header-title.component';
+export * from './lib/components/basic-inner-panel/basic-inner-panel.component';
export * from './lib/components/basic-view/basic-view.component';
-
export * from './lib/components/basic-nav-tabs/basic-nav-tabs.component';
+
export * from './lib/models/sp-navigation.model';
diff --git a/ui/src/app/connect/components/configuration-group/configuration-group.component.html b/ui/src/app/connect/components/configuration-group/configuration-group.component.html
index 2857534f2..04e5b2ba7 100644
--- a/ui/src/app/connect/components/configuration-group/configuration-group.component.html
+++ b/ui/src/app/connect/components/configuration-group/configuration-group.component.html
@@ -16,7 +16,7 @@
~
-->
-<div class="sp-blue-border padding" style="padding: 15px;">
+<div style="padding: 15px;">
<form [formGroup]="configurationGroup" fxFlex="100">
<div fxFlex="100" >
<app-static-property *ngFor="let config of configuration"
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index b08e92220..f0f19a10e 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -29,25 +29,28 @@
</div>
</div>
<div fxLayout="column" fxFlex="100">
-
- <div class="container-fluid marketplace-container" *ngIf="adapterLoadingError" fxFlex="100"
- fxLayoutAlign="center center" fxLayout="row">
- <h4>Available adapters could not be loaded. Did you start a Connect worker node?</h4>
- </div>
- <div class="container-fluid marketplace-container" *ngIf="adaptersLoading" fxFlex="100"
- fxLayoutAlign="center center" fxLayout="row">
- <mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner>
- <h4> Searching for available adapters, please wait...</h4>
- </div>
- <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError && currentFilter">
- <div fxLayout="row wrap" fxLayoutAlign="start stretch"
- class="adapter-description-container">
- <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
- class="adapter-description"
- fxFlex="33"
- (click)="selectAdapter(adapterDescription.appId)"
- *ngFor="let adapterDescription of adapterDescriptions | adapterFilter:currentFilter"
- [adapter]="adapterDescription"></sp-adapter-description>
+ <sp-basic-header-title-component title="Select Adapter" margin="20px 10px"></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="center start">
+ <div class="container-fluid marketplace-container" *ngIf="adapterLoadingError" fxFlex="100"
+ fxLayoutAlign="center center" fxLayout="row">
+ <h4>Available adapters could not be loaded. Did you start a Connect worker node?</h4>
+ </div>
+ <div class="container-fluid marketplace-container" *ngIf="adaptersLoading" fxFlex="100"
+ fxLayoutAlign="center center" fxLayout="row">
+ <mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner>
+ <h4> Searching for available adapters, please wait...</h4>
+ </div>
+ <div class="container-fluid marketplace-container"
+ *ngIf="!adaptersLoading && !adapterLoadingError && currentFilter">
+ <div fxLayout="row wrap" fxLayoutAlign="start stretch"
+ class="adapter-description-container">
+ <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
+ class="adapter-description"
+ fxFlex="33"
+ (click)="selectAdapter(adapterDescription.appId)"
+ *ngFor="let adapterDescription of adapterDescriptions | adapterFilter:currentFilter"
+ [adapter]="adapterDescription"></sp-adapter-description>
+ </div>
</div>
</div>
</div>
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index b55acba35..367efe6f2 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -15,7 +15,7 @@
~ limitations under the License.
~
-->
-<sp-basic-view [showBackLink]="false" padding="0">
+<sp-basic-view [showBackLink]="false" padding="0" fxFlex="100" fxLayout="column">
<div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
<button mat-button mat-raised-button color="accent" (click)="createNewAdapter()">
@@ -27,113 +27,124 @@
</sp-connect-filter-toolbar>
</div>
<div fxFlex="100" fxLayout="column">
- <div class="assemblyOptions sp-blue-bg mt-20" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>My adapters</h4>
- <span fxFlex></span>
- <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
- (click)="getAdaptersRunning()">
- <i class="material-icons">
- refresh
- </i>
- </button>
- </div>
- </div>
- <div class="sp-blue-border">
- <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
- <ng-container matColumnDef="start">
- <th mat-header-cell *matHeaderCellDef> Start</th>
- <td mat-cell *matCellDef="let adapter">
- <button color="accent" mat-button mat-icon-button matTooltip="Start adapter"
- matTooltipPosition="above"
- (click)="startAdapter(adapter)"
- *ngIf="(connectService.isDataStreamDescription(adapter)) && !adapter.running">
- <i class="material-icons">play_arrow</i>
- </button>
- <button color="accent" mat-button mat-icon-button matTooltip="Stop adapter"
- matTooltipPosition="above"
- (click)="stopAdapter(adapter)"
- *ngIf="(connectService.isDataStreamDescription(adapter)) && adapter.running">
- <i class="material-icons">stop</i>
+ <sp-basic-header-title-component title="My adapters" margin="20px 10px"></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
+ <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90">
+ <div header fxLayoutAlign="end center" fxFlex="100">
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+ <button mat-button mat-icon-button matTooltip="Refresh adapters" matTooltipPosition="above"
+ (click)="getAdaptersRunning()">
+ <i class="material-icons">
+ refresh
+ </i>
</button>
- </td>
- </ng-container>
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <div fxFlex="100" fxLayout="column">
+ <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
+ <ng-container matColumnDef="start">
+ <th mat-header-cell *matHeaderCellDef> Start</th>
+ <td mat-cell *matCellDef="let adapter">
+ <button color="accent" mat-button mat-icon-button matTooltip="Start adapter"
+ matTooltipPosition="above"
+ (click)="startAdapter(adapter)"
+ *ngIf="(connectService.isDataStreamDescription(adapter)) && !adapter.running">
+ <i class="material-icons">play_arrow</i>
+ </button>
+ <button color="accent" mat-button mat-icon-button matTooltip="Stop adapter"
+ matTooltipPosition="above"
+ (click)="stopAdapter(adapter)"
+ *ngIf="(connectService.isDataStreamDescription(adapter)) && adapter.running">
+ <i class="material-icons">stop</i>
+ </button>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
- <td mat-cell *matCellDef="let adapter">
- <h4 style="margin-bottom:0px;">{{adapter.name}}</h4>
- <h5>{{adapter.description != '' ? adapter.description : '-'}}</h5>
- </td>
- </ng-container>
- <ng-container matColumnDef="adapterBase">
- <th mat-header-cell *matHeaderCellDef> Adapter</th>
- <td mat-cell *matCellDef="let adapter">
- <img *ngIf="getIconUrl(adapter) && !adapter.icon" [src]="getIconUrl(adapter)"
- class="adapter-icon"/>
- <img *ngIf="adapter.icon" [src]="adapter.icon" class="adapter-icon"/>
- </td>
- </ng-container>
- <ng-container matColumnDef="adapterType">
- <th mat-header-cell *matHeaderCellDef> Type</th>
- <td mat-cell *matCellDef="let adapter">
- <div class="type-data" fxLayout="row" fxLayoutAlign="start start">
- <div fxLayout="row" fxLayoutAlign="center center">
- <mat-icon *ngIf="connectService.isDataSetDescription(adapter)" class="historic">lens
- </mat-icon>
- <mat-icon *ngIf="connectService.isDataStreamDescription(adapter)" class="real-time">lens
- </mat-icon>
- <div fxFlex="100" fxLayoutAlign="center center">
- <span *ngIf="connectService.isDataSetDescription(adapter)"> Data Set</span>
- <span *ngIf="connectService.isDataStreamDescription(adapter)"> Data Stream</span>
- </div>
- </div>
- </div>
- </td>
- </ng-container>
- <ng-container matColumnDef="lastModified">
- <th mat-header-cell *matHeaderCellDef> Created</th>
- <td mat-cell *matCellDef="let adapter">
- <h5>{{adapter.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
- </td>
- </ng-container>
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
+ <td mat-cell *matCellDef="let adapter">
+ <h4 style="margin-bottom:0px;">{{adapter.name}}</h4>
+ <h5>{{adapter.description != '' ? adapter.description : '-'}}</h5>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="adapterBase">
+ <th mat-header-cell *matHeaderCellDef> Adapter</th>
+ <td mat-cell *matCellDef="let adapter">
+ <img *ngIf="getIconUrl(adapter) && !adapter.icon" [src]="getIconUrl(adapter)"
+ class="adapter-icon"/>
+ <img *ngIf="adapter.icon" [src]="adapter.icon" class="adapter-icon"/>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="adapterType">
+ <th mat-header-cell *matHeaderCellDef> Type</th>
+ <td mat-cell *matCellDef="let adapter">
+ <div class="type-data" fxLayout="row" fxLayoutAlign="start start">
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <mat-icon *ngIf="connectService.isDataSetDescription(adapter)"
+ class="historic">
+ lens
+ </mat-icon>
+ <mat-icon *ngIf="connectService.isDataStreamDescription(adapter)"
+ class="real-time">
+ lens
+ </mat-icon>
+ <div fxFlex="100" fxLayoutAlign="center center">
+ <span *ngIf="connectService.isDataSetDescription(adapter)"> Data Set</span>
+ <span *ngIf="connectService.isDataStreamDescription(adapter)"> Data Stream</span>
+ </div>
+ </div>
+ </div>
+ </td>
+ </ng-container>
+ <ng-container matColumnDef="lastModified">
+ <th mat-header-cell *matHeaderCellDef> Created</th>
+ <td mat-cell *matCellDef="let adapter">
+ <h5>{{adapter.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef> Action</th>
- <td mat-cell *matCellDef="let adapter">
- <div fxLayout="row">
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef> Action</th>
+ <td mat-cell *matCellDef="let adapter">
+ <div fxLayout="row">
<span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
<button color="accent" mat-button mat-icon-button matTooltip="Show info"
matTooltipPosition="above" (click)="openHelpDialog(adapter)"><i
class="material-icons">help_outline</i>
</button>
</span>
- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center" *ngIf="isAdmin">
+ <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="isAdmin">
<button color="accent" mat-button mat-icon-button matTooltip="Manage permissions"
matTooltipPosition="above" (click)="showPermissionsDialog(adapter)"><i
class="material-icons">share</i>
</button>
</span>
- <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
<button color="accent" mat-button mat-icon-button matTooltip="Delete adapter"
data-cy="delete" matTooltipPosition="above" (click)="deleteAdapter(adapter)">
<i class="material-icons">delete</i>
</button>
</span>
- </div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
- </table>
- </div>
- <div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="existingAdapters.length == 0">
- <h5>(no adapters available)</h5>
+ </table>
+ </div>
+ <div fxFlex="100" fxLayoutAlign="end end">
+ <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
+ </div>
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
+ *ngIf="existingAdapters.length == 0">
+ <h5>(no adapters available)</h5>
+ </div>
+ </div>
+ </sp-basic-inner-panel>
</div>
</div>
</sp-basic-view>
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
index 61fa0a5e3..c5de02892 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
@@ -26,10 +26,10 @@
}
.mat-row:nth-child(even) {
- background-color: var(--color-bg-2);
+ background-color: var(--color-bg-1);
}
.mat-row:nth-child(odd) {
- background-color: var(--color-bg-3);
+ background-color: var(--color-bg-2);
}
.adapter-icon {
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html b/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
index 13da93850..9d48f1880 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
@@ -16,50 +16,43 @@
~
-->
-<div style="margin-bottom: 2%;">
-
- <div class="assemblyOptions sp-blue-bg">
- <h4>Select format</h4>
- </div>
- <div class="sp-blue-border padding">
+<div fxFlex="100" fxLayout="column">
+ <sp-basic-inner-panel panelTitle="Select format" outerMargin="20px 0px">
<sp-format-list fxFlex="100"
(selectedFormatEmitter)="formatSelected($event)"
[selectedFormat]="selectedFormat">
</sp-format-list>
- </div>
+ </sp-basic-inner-panel>
- <div class="assemblyOptions sp-blue-bg"
- *ngIf="selectedFormat">
- <h4>Configure format</h4>
- </div>
+ <sp-basic-inner-panel panelTitle="Configure Format" outerMargin="10px 0px" *ngIf="selectedFormat">
- <div *ngIf="selectedFormat">
- <div *ngIf="selectedFormat.config.length > 0">
- <sp-configuration-group
- [configurationGroup]="formatForm"
- [adapterId]="adapterDescription.appId"
- [configuration]="selectedFormat.config">
- </sp-configuration-group>
- </div>
+ <div *ngIf="selectedFormat">
+ <div *ngIf="selectedFormat.config.length > 0">
+ <sp-configuration-group
+ [configurationGroup]="formatForm"
+ [adapterId]="adapterDescription.appId"
+ [configuration]="selectedFormat.config">
+ </sp-configuration-group>
+ </div>
- <div *ngIf="selectedFormat.config.length === 0" class="sp-blue-border padding" style="padding: 15px;">
- <div style="text-align:center;">
- <h5 >(no further configuration needed)</h5>
+ <div *ngIf="selectedFormat.config.length === 0" style="padding: 15px;">
+ <div style="text-align:center;">
+ <h5>(no further configuration needed)</h5>
+ </div>
</div>
</div>
- </div>
-</div>
+ </sp-basic-inner-panel>
-<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()">Back</button>
- <button class="stepper-button"
- id="format-selection-next-button"
- data-cy="sp-format-selection-next-button"
- [disabled]="!formatConfigurationValid"
- (click)="clickNext()"
- color="accent" mat-raised-button>
- Next
- </button>
+ <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()">Back</button>
+ <button class="stepper-button"
+ id="format-selection-next-button"
+ data-cy="sp-format-selection-next-button"
+ [disabled]="!formatConfigurationValid"
+ (click)="clickNext()"
+ color="accent" mat-raised-button>
+ Next
+ </button>
+ </div>
</div>
-
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-item-json/format-item-json.component.scss b/ui/src/app/connect/components/new-adapter/format-configuration/format-item-json/format-item-json.component.scss
index 30123c038..2d626c461 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-item-json/format-item-json.component.scss
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-item-json/format-item-json.component.scss
@@ -42,6 +42,7 @@
.selectedItem {
opacity: 1;
- background-color: grey;
+ background-color: var(--color-accent);
+ color: var(--color-bg-2);
}
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-item/format-item.component.scss b/ui/src/app/connect/components/new-adapter/format-configuration/format-item/format-item.component.scss
index db43ef101..3aa1b93a4 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-item/format-item.component.scss
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-item/format-item.component.scss
@@ -41,5 +41,6 @@
.selectedItem {
opacity: 1;
- background-color: grey;
+ background-color: var(--color-accent);
+ color: var(--color-bg-2);
}
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.html b/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.html
index 59d46c248..81eefc039 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.html
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.html
@@ -33,9 +33,9 @@
</div>
<div fxFlex="100"
- class="assemblyOptions sp-blue-bg"
+ class="format-title"
*ngIf="selectJsonFormats">
- <h4>Select json format</h4>
+ <h4>Select JSON format</h4>
</div>
<div fxFlex="25"
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.scss b/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.scss
index 9db395a46..61c683a5d 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.scss
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-list/format-list.component.scss
@@ -17,6 +17,16 @@
*/
.fullWidth {
- width: 100%;
- height: 100%;
- }
\ No newline at end of file
+ width: 100%;
+ height: 100%;
+}
+
+.format-title {
+ margin-top: 10px;
+ margin-left: 5px;
+ padding-left: 5px;
+ border-left: 4px solid var(--color-accent);
+ font-weight: 600;
+ font-size: 13pt;
+ white-space: nowrap;
+}
diff --git a/ui/src/app/connect/components/new-adapter/generic-adapter-configuration/generic-adapter-configuration.component.html b/ui/src/app/connect/components/new-adapter/generic-adapter-configuration/generic-adapter-configuration.component.html
index 5e1418ceb..75276dd70 100644
--- a/ui/src/app/connect/components/new-adapter/generic-adapter-configuration/generic-adapter-configuration.component.html
+++ b/ui/src/app/connect/components/new-adapter/generic-adapter-configuration/generic-adapter-configuration.component.html
@@ -16,26 +16,25 @@
~
-->
-<div style="margin-bottom: 2%;">
-
- <div >
- <div class="assemblyOptions sp-blue-bg">
- <h4 >Protocol settings</h4>
+<div fxFlex="100" fxLayout="column">
+ <div fxFlex="100" fxLayout="column">
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-inner-panel panelTitle="Protocol Settings" outerMargin="20px 0px">
+ <sp-configuration-group
+ [configurationGroup]="genericAdapterForm"
+ [adapterId]="adapterDescription.appId"
+ [configuration]="protocolDescription.config">
+ </sp-configuration-group>
+ </sp-basic-inner-panel>
</div>
-
- <sp-configuration-group
- [configurationGroup]="genericAdapterForm"
- [adapterId]="adapterDescription.appId"
- [configuration]="protocolDescription.config">
- </sp-configuration-group>
</div>
-</div>
-<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)="clickNext()" color="accent" mat-raised-button>Next
- </button>
+ <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)="clickNext()" color="accent" mat-raised-button>Next
+ </button>
+ </div>
</div>
</div>
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
index 54c5fee30..1880c887b 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
@@ -19,9 +19,9 @@
<div fxLayout="row" fxLayoutAlign="center">
<div fxFlex="0 1 80%">
-
- <div class="assemblyOptions sp-blue-bg" *ngIf="!isLoading && !isError">
- <sp-schema-editor-header
+ <sp-basic-inner-panel [showTitle]="false" outerMargin="20px 0px">
+ <div header *ngIf="!isLoading && !isError" fxFlex="100">
+ <sp-schema-editor-header fxFlex="100"
[countSelected]="countSelected"
[schemaErrorHints]="schemaErrorHints"
[displayMessages]="validEventSchema"
@@ -34,7 +34,7 @@
</sp-schema-editor-header>
</div>
- <div class="sp-blue-border padding">
+ <div fxFlex="100">
<sp-loading-message *ngIf="isLoading"></sp-loading-message>
@@ -63,6 +63,7 @@
</tree-root>
</div>
</div>
+ </sp-basic-inner-panel>
</div>
<div fxFlex="0 1 50%" *ngIf="isPreviewEnabled">
<sp-event-schema-preview [eventSchema]="eventSchema"></sp-event-schema-preview>
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
index 2c3063438..88affbad6 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
@@ -16,52 +16,55 @@
~
-->
-<div fxLayout="row">
- <div fxLayoutAlign="space-between center" class="add-schema" fxFlex="0 1 100%">
- <div>
- <button color="primary"
- mat-button
- data-cy="connect-add-nested-property"
- (click)=addNestedProperty()>
- <mat-icon matTooltip="Add a Nested Property">queue</mat-icon>
- </button>
- <button color="primary"
- mat-button
- data-cy="connect-add-static-property"
- (click)="addStaticValueProperty()">
- <mat-icon matTooltip="Add a static value to event">add</mat-icon>
- </button>
- <button color="primary"
- mat-button
- data-cy="connect-add-timestamp-property"
- (click)=addTimestampProperty()
- data-cy="connect-schema-add-timestamp-btn">
- <mat-icon matTooltip="Add timestamp to event schema">access_time</mat-icon>
- </button>
- <button color="primary"
- mat-button
- (click)=guessSchema()>
- <mat-icon matTooltip="Refresh Schema">refresh</mat-icon>
- </button>
- <!-- <button color="primary" mat-button (click)=togglePreview()>-->
- <!-- <mat-icon matTooltip="Show preview of schema">play_arrow</mat-icon>-->
- <!-- </button>-->
- </div>
- <div fxLayout="row" style="align-items: center;">
- <sp-error-hint
- [errorMessages]="schemaErrorHints"
- [displayMessages]="!displayMessages">
- </sp-error-hint>
-
+<div fxLayout="row" fxFlex="100">
+ <div fxFlex fxLayoutAlign="start center" fxLayout="row">
+ <button color="accent"
+ mat-button
+ data-cy="connect-add-nested-property"
+ matTooltip="Add a Nested Property"
+ (click)=addNestedProperty()>
+ <mat-icon>queue</mat-icon>
+ <span> Add nested</span>
+ </button>
+ <button color="accent"
+ mat-button
+ data-cy="connect-add-static-property"
+ matTooltip="Add a static value to event"
+ (click)="addStaticValueProperty()">
+ <mat-icon>add</mat-icon>
+ <span> Add static value</span>
+ </button>
+ <button color="accent"
+ mat-button
+ data-cy="connect-add-timestamp-property"
+ matTooltip="Add timestamp to event schema"
+ (click)="addTimestampProperty()">
+ <mat-icon>access_time</mat-icon>
+ <span> Add timestamp</span>
+ </button>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <sp-error-hint
+ [errorMessages]="schemaErrorHints"
+ [displayMessages]="!displayMessages">
+ </sp-error-hint>
+ <button color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Refresh Schema"
+ (click)="guessSchema()">
+ <mat-icon>refresh</mat-icon>
+ </button>
- <button style="padding-right:0"
- color="primary"
- mat-button
- [disabled]="countSelected == 0"
- (click)="removeSelectedProperties()"
- data-cy="connect-schema-delete-properties-btn">
- <mat-icon matTooltip="Remove selected Properties">delete</mat-icon>
- </button>
- </div>
+ <button style="padding-right:0"
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Remove selected Properties"
+ [disabled]="countSelected == 0"
+ (click)="removeSelectedProperties()"
+ data-cy="connect-schema-delete-properties-btn">
+ <mat-icon>delete</mat-icon>
+ </button>
</div>
</div>
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.scss b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.scss
index 52bd5d68e..13cbc4aac 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.scss
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.scss
@@ -15,7 +15,3 @@
* limitations under the License.
*
*/
-
-.add-schema button {
- color: white;
-}
\ No newline at end of file
diff --git a/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html b/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html
index e5923e312..a6fc0b32d 100644
--- a/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html
+++ b/ui/src/app/connect/components/new-adapter/specific-adapter-configuration/specific-adapter-configuration.component.html
@@ -16,26 +16,23 @@
~
-->
-<div style="margin-bottom: 2%;">
- <div>
- <div class="assemblyOptions sp-blue-bg">
- <h4>Basic settings</h4>
- </div>
-
- <sp-configuration-group
- [configurationGroup]="specificAdapterForm"
- [adapterId]="adapterDescription.appId"
- [configuration]="adapterDescription.config">
- </sp-configuration-group>
-
+<div fxFlex="100" fxLayout="column">
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-inner-panel panelTitle="Basic Settings" outerMargin="20px 0px">
+ <sp-configuration-group
+ [configurationGroup]="specificAdapterForm"
+ [adapterId]="adapterDescription.appId"
+ [configuration]="adapterDescription.config">
+ </sp-configuration-group>
+ </sp-basic-inner-panel>
</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="accent" mat-raised-button>Next
- </button>
+ <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="accent" mat-raised-button>Next
+ </button>
+ </div>
</div>
</div>
diff --git a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
index c85b4819e..60e5397f5 100644
--- a/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
+++ b/ui/src/app/connect/components/new-adapter/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss
@@ -30,12 +30,12 @@
.title {
color: var(--color-default-text);
font-weight: 600;
- font-size: 14pt;
+ font-size: 13pt;
margin-bottom: 10px;
}
.description {
- font-size: 11pt;
+ font-size: 10pt;
}
.icon {
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 0eed07f83..46da68a40 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,86 +16,82 @@
~
-->
-<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="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"
- matInput id="input-AdapterName" placeholder="Adapter Name"
- data-cy="sp-adapter-name" required>
- </mat-form-field>
- <mat-form-field color="accent">
- <input matInput id="input-AdapterDescription" [ngModelOptions]="{standalone: true}"
- placeholder="Adapter Description" [(ngModel)]="adapterDescription.description">
- </mat-form-field>
+<div [formGroup]="startAdapterForm" fxLayout="column" fxFlex="100">
+ <sp-basic-inner-panel panelTitle="Adapter settings" outerMargin="20px 0px 10px 0px">
+ <div fxFlex="100">
+ <div fxLayoutAlign="center" fxLayout="column" fxFlex="100">
+ <mat-form-field color="accent">
+ <input formControlName="adapterName"
+ matInput id="input-AdapterName" placeholder="Adapter Name"
+ data-cy="sp-adapter-name" required>
+ </mat-form-field>
+ <mat-form-field color="accent">
+ <input matInput id="input-AdapterDescription" [ngModelOptions]="{standalone: true}"
+ placeholder="Adapter Description" [(ngModel)]="adapterDescription.description">
+ </mat-form-field>
+ </div>
</div>
- </div>
+ </sp-basic-inner-panel>
- <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>
+ <div fxFlex="100" fxLayout="column">
+ <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>
- <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>
+ <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>
+ <!-- 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">
+ <div fxLayoutAlign="end" style="margin-top: 10px;">
<button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
<button style="margin-left:10px;" class="mat-basic stepper-button" mat-raised-button (click)="goBack()">Back
</button>
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 caa099f0d..c2ade4c2e 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,26 +16,4 @@
*
*/
-.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);
-}