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:14 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-558] Harmonize layout of connect module
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);
-}