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 2020/08/24 12:42:00 UTC

[incubator-streampipes] branch dev updated: [STREAMPIPES-206] Reorganize connect module according to layout of other modules

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

riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new f74a60c  [STREAMPIPES-206] Reorganize connect module according to layout of other modules
f74a60c is described below

commit f74a60c44d5f0ed156d4b5e8c49ecd6fb3ba47da
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Aug 24 14:41:46 2020 +0200

    [STREAMPIPES-206] Reorganize connect module according to layout of other modules
---
 .../adapter-description.component.css              |   0
 .../adapter-description.component.html             |   0
 .../adapter-description.component.ts               |  12 +-
 .../data-marketplace.component.css                 | 166 ++++----
 .../data-marketplace.component.html                | 214 +++++-----
 .../data-marketplace/data-marketplace.component.ts | 468 ++++++++++-----------
 .../file-management/file-management.component.css  |   0
 .../file-management/file-management.component.html |   0
 .../file-management/file-management.component.ts   |   2 +-
 .../format-component/format.component.css          |   0
 .../format-component/format.component.html         |   0
 .../format-component/format.component.ts           |   4 +-
 .../connect/{ => components}/format-form/csv.ts    |   0
 .../format-form/format-form.component.css          |   0
 .../format-form/format-form.component.html         |   0
 .../format-form/format-form.component.ts           |   2 +-
 .../connect/{ => components}/format-form/format.ts |   0
 .../connect/{ => components}/format-form/json.ts   |   0
 .../format-list.component.css                      |   0
 .../format-list.component.html                     |   0
 .../format-list-component/format-list.component.ts |   2 +-
 .../new-adapter/new-adapter.component.css          |   0
 .../new-adapter/new-adapter.component.html         |   0
 .../new-adapter/new-adapter.component.ts           |  42 +-
 .../pipeline-element-runtime-info.component.html   |   0
 .../pipeline-element-runtime-info.component.scss   |   0
 .../pipeline-element-runtime-info.component.ts     |   4 +-
 .../event-property-row.component.css               |   0
 .../event-property-row.component.html              |   0
 .../event-property-row.component.ts                |   4 +-
 .../event-schema-preview.component.css             |   0
 .../event-schema-preview.component.html            |   0
 .../event-schema-preview.component.ts              |   2 +-
 .../event-schema/event-schema.component.css        |   0
 .../event-schema/event-schema.component.html       |   0
 .../event-schema/event-schema.component.ts         |   6 +-
 ui/src/app/connect/connect.module.ts               |  46 +-
 .../adapter-upload-dialog.component.scss           |  20 -
 .../adapter-export-dialog.component.scss           |   2 +-
 .../adapter-export-dialog.component.ts             |   0
 .../adapter-export/adapter-export-dialog.html      |   0
 .../adapter-started-dialog.component.html}         |  20 +-
 .../adapter-started-dialog.component.scss}         |   1 +
 .../adapter-started-dialog.component.ts            |  46 +-
 .../adapter-upload-dialog.component.scss}          |   2 +
 .../adapter-upload-dialog.component.ts             |   2 +-
 .../adapter-upload/adapter-upload-dialog.html      |   0
 .../edit-data-type/edit-data-type.component.ts     |   2 +-
 .../edit-event-property-primitive.component.ts     |   2 +-
 .../edit-unit-transformation.component.ts          |   4 +-
 .../edit-event-property.component.ts               |   2 +-
 .../{data-marketplace => filter}/filter.pipe.ts    |   0
 .../component/adapter-started-dialog.component.css |  33 --
 .../app/connect/{ => services}/connect.service.ts  |  90 ++--
 .../data-marketplace.service.ts                    |   2 +-
 .../data-type.service.ts                           |   0
 .../service => services}/filerest.service.ts       |   2 +-
 .../{new-adapter => services}/icon.service.ts      |  80 ++--
 ui/src/app/connect/{ => services}/rest.service.ts  |   6 +-
 .../transformation-rule.service.spec.ts            |   4 +-
 .../{ => services}/transformation-rule.service.ts  |   6 +-
 .../unit-provider.service.ts                       |   0
 62 files changed, 625 insertions(+), 675 deletions(-)

diff --git a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.css b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.css
similarity index 100%
rename from ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.css
rename to ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.css
diff --git a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.html b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
similarity index 100%
rename from ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.html
rename to ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
diff --git a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
similarity index 89%
rename from ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts
rename to ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
index 3075082..56f41f6 100644
--- a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
@@ -17,13 +17,13 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {ConnectService} from '../../connect.service';
-import {DataMarketplaceService} from "../data-marketplace.service";
-import {AdapterExportDialog} from '../adapter-export/adapter-export-dialog.component';
+import {ConnectService} from '../../../services/connect.service';
+import {DataMarketplaceService} from "../../../services/data-marketplace.service";
+import {AdapterExportDialog} from '../../../dialog/adapter-export/adapter-export-dialog.component';
 import {MatDialog} from '@angular/material/dialog';
-import {AdapterDescription} from "../../../core-model/gen/streampipes-model";
-import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
-import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {AdapterDescription} from "../../../../core-model/gen/streampipes-model";
+import {PanelType} from "../../../../core-ui/dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../../../core-ui/dialog/base-dialog/base-dialog.service";
 
 @Component({
   selector: 'sp-adapter-description',
diff --git a/ui/src/app/connect/data-marketplace/data-marketplace.component.css b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.css
similarity index 95%
rename from ui/src/app/connect/data-marketplace/data-marketplace.component.css
rename to ui/src/app/connect/components/data-marketplace/data-marketplace.component.css
index 633aaf0..c36e18b 100644
--- a/ui/src/app/connect/data-marketplace/data-marketplace.component.css
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.css
@@ -1,84 +1,84 @@
-/*
- * 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.
- *
- */
-
-.adapter-description-container {
-  width: 100%;
-}
-
-.adapter-description {
-  padding: 15px;
-}
-.data-marketplace-container {
-  padding-bottom: 10px;
-}
-
-.marketplace-container {
-  width:100%;
-  padding: 20px;
-}
-
-.page-container-connect {
-  min-height: calc(100vh - 70px);
-}
-
-.pl-5 {
-  padding-left:5px;
-}
-
-.box {
-  width: 200px; height: 300px;
-  position: relative;
-  border: 1px solid #BBB;
-  background: #EEE;
-}
-
-#categoryFilter {
-  margin-top: 20px;
-}
-
-.fixed-height {
-  height: 50px;
-}
-
-.form-style {
-  margin: 0px 5px 0px 0px;
-}
-
-.icon-style {
-  margin: 15px 4px 0px 0px;
-  color:rgb(27, 20, 100);
-}
-
-.data-marketplace-options {
-  padding:0px;
-  background-color:#f6f6f6;
-  border-bottom: 1px solid #cccccc;
-}
-
-.data-marketplace-options-item {
-  display: inline;
-  margin-right: 10px;
-}
-
-::ng-deep .mat-select-panel {
-  background: #fff;
-}
-
-::ng-deep .mat-select-panel:not([class*=mat-elevation-z]) {
-  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+/*
+ * 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.
+ *
+ */
+
+.adapter-description-container {
+  width: 100%;
+}
+
+.adapter-description {
+  padding: 15px;
+}
+.data-marketplace-container {
+  padding-bottom: 10px;
+}
+
+.marketplace-container {
+  width:100%;
+  padding: 20px;
+}
+
+.page-container-connect {
+  min-height: calc(100vh - 70px);
+}
+
+.pl-5 {
+  padding-left:5px;
+}
+
+.box {
+  width: 200px; height: 300px;
+  position: relative;
+  border: 1px solid #BBB;
+  background: #EEE;
+}
+
+#categoryFilter {
+  margin-top: 20px;
+}
+
+.fixed-height {
+  height: 50px;
+}
+
+.form-style {
+  margin: 0px 5px 0px 0px;
+}
+
+.icon-style {
+  margin: 15px 4px 0px 0px;
+  color:rgb(27, 20, 100);
+}
+
+.data-marketplace-options {
+  padding:0px;
+  background-color:#f6f6f6;
+  border-bottom: 1px solid #cccccc;
+}
+
+.data-marketplace-options-item {
+  display: inline;
+  margin-right: 10px;
+}
+
+::ng-deep .mat-select-panel {
+  background: #fff;
+}
+
+::ng-deep .mat-select-panel:not([class*=mat-elevation-z]) {
+  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
similarity index 98%
rename from ui/src/app/connect/data-marketplace/data-marketplace.component.html
rename to ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index a4a686e..0548d92 100644
--- a/ui/src/app/connect/data-marketplace/data-marketplace.component.html
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -1,108 +1,108 @@
-<!--
-  ~ 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" fxFlex="100" class="page-container page-container-padding page-container-connect">
-    <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;">
-        <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid #ccc">
-            <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)">
-                <mat-tab label="Data Marketplace">
-                </mat-tab>
-                <mat-tab id="all-adapters" label="All Adapters">
-                </mat-tab>
-                <mat-tab id="uploaded-files" label="Files">
-                </mat-tab>
-            </mat-tab-group>
-        </div>
-        <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center" style="padding-left:10px;padding-right:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc"
-            *ngIf="selectedIndex === 0 && newAdapterFromDescription === undefined">
-            <button mat-icon-button id="startAdapterTutorial3" (click)="startAdapterTutorial3()" matTooltip="Tutorial: Generic Adapter">
-                <mat-icon color="primary">school</mat-icon>
-            </button>
-        </div>
-    </div>
-
-    <div fxLayout="row" class="fixed-height data-marketplace-options">
-
-        <div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center" fxLayout="row">
-            <mat-icon color="primary">search</mat-icon>
-            <mat-form-field class="form-style">
-                <input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)"
-                    name="something">
-            </mat-form-field>
-        </div>
-        <div class="data-marketplace-options-item">
-            <mat-form-field>
-                <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)">
-                    <mat-option *ngFor="let type of adapterTypes" [value]="type">
-                        {{type}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </div>
-        <div class="data-marketplace-options-item">
-            <mat-form-field>
-                <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)">
-                    <mat-option *ngFor="let category of adapterCategories" [value]="category.code">
-                        {{category.label}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </div>
-        <span fxFlex></span>
-
-        <mat-icon class="icon-style" matTooltip="Download All Adapter Templates" (click)="downloadAllAdapterTemplates()" style="margin-right: 15px; cursor: pointer;">cloud_download</mat-icon>
-        <mat-icon class="icon-style" matTooltip="Upload Adapter Templates" (click)="uploadAdapterTemplates()" style="margin-right: 15px; cursor: pointer;">cloud_upload</mat-icon>
-
-    </div>
-    <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 StreamPipes 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"></mat-spinner>
-        <h4>&nbsp;&nbsp;Searching for available adapters, please wait...</h4>
-    </div>
-    <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError">
-        <div *ngIf="selectedIndex === 0">
-
-            <div *ngIf="newAdapterFromDescription===undefined" fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-description-container">
-                <sp-adapter-description attr.id="{{adapterDescription.name.replace(' ', '_')}}" class="adapter-description"
-                    fxFlex="33" (click)="selectAdapter(adapterDescription)" *ngFor="let adapterDescription of filteredAdapterDescriptions | filter:filterTerm"
-                    [adapter]="adapterDescription" (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
-            </div>
-
-
-            <div class="new-adapter-container" fxFlex="100" fxLayout="row" fxLayoutAlign="start start" *ngIf="newAdapterFromDescription!==undefined">
-                <sp-new-adapter fxFlex="100" (removeSelectionEmitter)="removeSelection($event)" [adapter]="newAdapterFromDescription"
-                    (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-new-adapter>
-            </div>
-
-        </div>
-        <div *ngIf="selectedIndex === 1">
-            <div fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-container">
-                <sp-adapter-description class="adapter-description" fxFlex="33" *ngFor="let adapter of filteredAdapters | filter:filterTerm"
-                    [adapter]="adapter" (createTemplateEmitter)="templateFromRunningAdapter(adapter)"
-                    (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
-            </div>
-        </div>
-        <div *ngIf="selectedIndex === 2">
-            <div fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-container">
-                <sp-file-management fxFlex="100" fxLayout="column"></sp-file-management>
-            </div>
-        </div>
-    </div>
+<!--
+  ~ 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" fxFlex="100" class="page-container page-container-padding page-container-connect">
+    <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;">
+        <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid #ccc">
+            <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)">
+                <mat-tab label="Data Marketplace">
+                </mat-tab>
+                <mat-tab id="all-adapters" label="All Adapters">
+                </mat-tab>
+                <mat-tab id="uploaded-files" label="Files">
+                </mat-tab>
+            </mat-tab-group>
+        </div>
+        <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center" style="padding-left:10px;padding-right:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc"
+            *ngIf="selectedIndex === 0 && newAdapterFromDescription === undefined">
+            <button mat-icon-button id="startAdapterTutorial3" (click)="startAdapterTutorial3()" matTooltip="Tutorial: Generic Adapter">
+                <mat-icon color="primary">school</mat-icon>
+            </button>
+        </div>
+    </div>
+
+    <div fxLayout="row" class="fixed-height data-marketplace-options">
+
+        <div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center" fxLayout="row">
+            <mat-icon color="primary">search</mat-icon>
+            <mat-form-field class="form-style">
+                <input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)"
+                    name="something">
+            </mat-form-field>
+        </div>
+        <div class="data-marketplace-options-item">
+            <mat-form-field>
+                <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)">
+                    <mat-option *ngFor="let type of adapterTypes" [value]="type">
+                        {{type}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div class="data-marketplace-options-item">
+            <mat-form-field>
+                <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)">
+                    <mat-option *ngFor="let category of adapterCategories" [value]="category.code">
+                        {{category.label}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <span fxFlex></span>
+
+        <mat-icon class="icon-style" matTooltip="Download All Adapter Templates" (click)="downloadAllAdapterTemplates()" style="margin-right: 15px; cursor: pointer;">cloud_download</mat-icon>
+        <mat-icon class="icon-style" matTooltip="Upload Adapter Templates" (click)="uploadAdapterTemplates()" style="margin-right: 15px; cursor: pointer;">cloud_upload</mat-icon>
+
+    </div>
+    <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 StreamPipes 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"></mat-spinner>
+        <h4>&nbsp;&nbsp;Searching for available adapters, please wait...</h4>
+    </div>
+    <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError">
+        <div *ngIf="selectedIndex === 0">
+
+            <div *ngIf="newAdapterFromDescription===undefined" fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-description-container">
+                <sp-adapter-description attr.id="{{adapterDescription.name.replace(' ', '_')}}" class="adapter-description"
+                    fxFlex="33" (click)="selectAdapter(adapterDescription)" *ngFor="let adapterDescription of filteredAdapterDescriptions | filter:filterTerm"
+                    [adapter]="adapterDescription" (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
+            </div>
+
+
+            <div class="new-adapter-container" fxFlex="100" fxLayout="row" fxLayoutAlign="start start" *ngIf="newAdapterFromDescription!==undefined">
+                <sp-new-adapter fxFlex="100" (removeSelectionEmitter)="removeSelection($event)" [adapter]="newAdapterFromDescription"
+                    (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-new-adapter>
+            </div>
+
+        </div>
+        <div *ngIf="selectedIndex === 1">
+            <div fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-container">
+                <sp-adapter-description class="adapter-description" fxFlex="33" *ngFor="let adapter of filteredAdapters | filter:filterTerm"
+                    [adapter]="adapter" (createTemplateEmitter)="templateFromRunningAdapter(adapter)"
+                    (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
+            </div>
+        </div>
+        <div *ngIf="selectedIndex === 2">
+            <div fxLayout="row wrap" fxLayoutAlign="start stretch" class="adapter-container">
+                <sp-file-management fxFlex="100" fxLayout="column"></sp-file-management>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/connect/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
similarity index 92%
rename from ui/src/app/connect/data-marketplace/data-marketplace.component.ts
rename to ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
index 8f506da..ee30a9a 100644
--- a/ui/src/app/connect/data-marketplace/data-marketplace.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
@@ -1,234 +1,234 @@
-/*
- * 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.
- *
- */
-
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {DataMarketplaceService} from './data-marketplace.service';
-import {ShepherdService} from "../../services/tour/shepherd.service";
-import {ConnectService} from '../connect.service';
-import {FilterPipe} from './filter.pipe';
-import {AdapterUploadDialog} from './adapter-upload/adapter-upload-dialog.component';
-import {
-  AdapterDescription,
-  AdapterDescriptionUnion,
-  AdapterSetDescription,
-  AdapterStreamDescription,
-  EventSchema,
-  SpDataSet,
-  SpDataStream
-} from "../../core-model/gen/streampipes-model";
-import {PanelType} from "../../core-ui/dialog/base-dialog/base-dialog.model";
-import {DialogService} from "../../core-ui/dialog/base-dialog/base-dialog.service";
-
-@Component({
-    selector: 'sp-data-marketplace',
-    templateUrl: './data-marketplace.component.html',
-    styleUrls: ['./data-marketplace.component.css']
-})
-export class DataMarketplaceComponent implements OnInit {
-    adapterDescriptions: AdapterDescriptionUnion[];
-    newAdapterFromDescription: AdapterDescriptionUnion;
-    filteredAdapterDescriptions: AdapterDescriptionUnion[];
-    adapters: AdapterDescriptionUnion[];
-    filteredAdapters: AdapterDescriptionUnion[];
-    visibleAdapters: AdapterDescriptionUnion[];
-
-    @Output()
-    selectAdapterEmitter: EventEmitter<AdapterDescriptionUnion> = new EventEmitter<AdapterDescriptionUnion>();
-
-    selectedIndex: number = 0;
-    filterTerm: string = "";
-    pipe: FilterPipe = new FilterPipe();
-    adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
-    selectedType: string = "All types";
-
-    adapterCategories: any;
-    selectedCategory: any = "All";
-
-    adaptersLoading: boolean = true;
-    adapterLoadingError: boolean = false;
-
-    constructor(private dataMarketplaceService: DataMarketplaceService,
-                private ShepherdService: ShepherdService,
-                private connectService: ConnectService,
-                private dialogService: DialogService) {
-    }
-
-    ngOnInit() {
-        this.updateDescriptionsAndRunningAdatpers();
-        this.loadAvailableTypeCategories();
-        this.visibleAdapters = this.adapters;
-    }
-
-    loadAvailableTypeCategories() {
-        this.dataMarketplaceService.getAdapterCategories().subscribe(res => {
-            this.adapterCategories = res;
-            this.adapterCategories.unshift({label: "All categories", description: "", code: "All"});
-        });
-    }
-
-    updateDescriptionsAndRunningAdatpers() {
-        this.getAdapterDescriptions();
-        this.getAdaptersRunning();
-    }
-
-    getAdapterDescriptions(): void {
-        this.adaptersLoading = true;
-        this.adapterDescriptions = [];
-
-        this.dataMarketplaceService
-            .getGenericAndSpecificAdapterDescriptions()
-            .subscribe((allAdapters) => {
-                this.adapterDescriptions = this.adapterDescriptions.concat(allAdapters[0]);
-                this.adapterDescriptions = this.adapterDescriptions.concat(allAdapters[1]);
-                this.adapterDescriptions
-                    .sort((a, b) => a.name.localeCompare(b.name));
-                this.filteredAdapterDescriptions = this.adapterDescriptions;
-                this.adaptersLoading = false;
-            }, error => {
-                this.adaptersLoading = false;
-                this.adapterLoadingError = true;
-            });
-
-        this.dataMarketplaceService.getAdapterTemplates().subscribe(adapterTemplates => {
-            adapterTemplates.forEach(function (adapterTemplate) {
-                (adapterTemplate as any).isTemplate = true;
-            });
-
-            this.adapterDescriptions = this.adapterDescriptions.concat(adapterTemplates);
-            this.adapterDescriptions
-                .sort((a, b) => a.name.localeCompare(b.name));
-            this.filteredAdapterDescriptions = this.adapterDescriptions;
-        });
-    }
-
-    getAdaptersRunning(): void {
-        this.dataMarketplaceService.getAdapters().subscribe(adapters => {
-            this.adapters = adapters;
-            this.filteredAdapters = this.adapters;
-        });
-    }
-
-    selectedIndexChange(index: number) {
-        this.selectedIndex = index;
-    }
-
-    startAdapterTutorial() {
-        this.ShepherdService.startAdapterTour();
-    }
-
-    startAdapterTutorial2() {
-        this.ShepherdService.startAdapterTour2();
-    }
-
-    startAdapterTutorial3() {
-        this.ShepherdService.startAdapterTour3();
-    }
-
-    selectAdapter(adapterDescription: AdapterDescriptionUnion) {
-        this.newAdapterFromDescription = this.dataMarketplaceService.cloneAdapterDescription(adapterDescription);
-        (this.newAdapterFromDescription as any).templateTitle = this.newAdapterFromDescription.name;
-        this.newAdapterFromDescription.name = "";
-        this.newAdapterFromDescription.description = "";
-        if (this.newAdapterFromDescription instanceof AdapterStreamDescription) {
-            this.newAdapterFromDescription.dataStream = new SpDataStream();
-            this.newAdapterFromDescription.dataStream["@class"] = "org.apache.streampipes.model.SpDataStream";
-            this.newAdapterFromDescription.dataStream.eventSchema = new EventSchema();
-            this.newAdapterFromDescription.dataStream.eventSchema["@class"] = "org.apache.streampipes.model.schema.EventSchema";
-        }
-        if (this.newAdapterFromDescription instanceof AdapterSetDescription) {
-            this.newAdapterFromDescription.dataSet = new SpDataSet();
-            this.newAdapterFromDescription.dataSet["@class"] = "org.apache.streampipes.model.SpDataSet";
-            this.newAdapterFromDescription.dataSet.eventSchema = new EventSchema();
-            this.newAdapterFromDescription.dataSet.eventSchema["@class"] = "org.apache.streampipes.model.schema.EventSchema";
-        }
-        this.ShepherdService.trigger("select-adapter");
-    }
-
-    templateFromRunningAdapter(adapter: AdapterDescriptionUnion) {
-        this.selectedIndexChange(0);
-        this.selectAdapter(adapter);
-
-    }
-
-    removeSelection() {
-        this.newAdapterFromDescription = undefined;
-    }
-
-    updateFilterTerm(inputValue) {
-        this.filterTerm = inputValue;
-    }
-
-    downloadAllAdapterTemplates() {
-        var adapterTemplates: AdapterDescription[] = [];
-        this.adapterDescriptions.forEach(function (adapterTemplate) {
-            if ((adapterTemplate as any).isTemplate) {
-                delete adapterTemplate['userName'];
-                adapterTemplates.push(adapterTemplate);
-            }
-        });
-
-        let data = "data:text/json;charset=utf-8," +encodeURIComponent(JSON.stringify(adapterTemplates, null, 2));
-        let downloader = document.createElement('a');
-
-        downloader.setAttribute('href', data);
-        downloader.setAttribute('download', 'all-adapter-templates.json');
-        downloader.click();
-    }
-
-    uploadAdapterTemplates() {
-        let dialogRef = this.dialogService.open(AdapterUploadDialog,{
-            panelType: PanelType.STANDARD_PANEL,
-            title: "Upload adapter templates",
-            width: "50vw"
-        });
-
-        dialogRef.afterClosed().subscribe(result => {
-            this.getAdapterDescriptions()
-        });
-    }
-
-    filterAdapter(event) {
-        let filteredAdapterTypes = this.filterAdapterType(this.adapterDescriptions);
-        let filteredAdapterTemplateTypes = this.filterAdapterType(this.adapters);
-
-        let filteredAdapterCategories = this.filterAdapterCategory(filteredAdapterTypes);
-        let filteredAdapterTemplateCategories = this.filterAdapterCategory(filteredAdapterTemplateTypes);
-
-        this.filteredAdapterDescriptions = filteredAdapterCategories;
-        this.filteredAdapters = filteredAdapterTemplateCategories;
-    }
-
-    filterAdapterCategory(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
-        if (this.selectedCategory == this.adapterCategories[0].code) {
-            return currentElements;
-        } else {
-            return currentElements.filter(adapterDescription => adapterDescription.category.indexOf(this.selectedCategory) != -1);
-        }
-    }
-
-    filterAdapterType(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
-        if (this.selectedType == this.adapterTypes[0]) {
-            return currentElements;
-        } else if (this.selectedType == this.adapterTypes[1]) {
-            return currentElements.filter(adapterDescription => this.connectService.isDataSetDescription(adapterDescription));
-        } else if (this.selectedType == this.adapterTypes[2]) {
-            return currentElements.filter(adapterDescription => !this.connectService.isDataSetDescription(adapterDescription));
-        }
-    }
-
-}
+/*
+ * 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.
+ *
+ */
+
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {DataMarketplaceService} from '../../services/data-marketplace.service';
+import {ShepherdService} from "../../../services/tour/shepherd.service";
+import {ConnectService} from '../../services/connect.service';
+import {FilterPipe} from '../../filter/filter.pipe';
+import {AdapterUploadDialog} from '../../dialog/adapter-upload/adapter-upload-dialog.component';
+import {
+  AdapterDescription,
+  AdapterDescriptionUnion,
+  AdapterSetDescription,
+  AdapterStreamDescription,
+  EventSchema,
+  SpDataSet,
+  SpDataStream
+} from "../../../core-model/gen/streampipes-model";
+import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+
+@Component({
+    selector: 'sp-data-marketplace',
+    templateUrl: './data-marketplace.component.html',
+    styleUrls: ['./data-marketplace.component.css']
+})
+export class DataMarketplaceComponent implements OnInit {
+    adapterDescriptions: AdapterDescriptionUnion[];
+    newAdapterFromDescription: AdapterDescriptionUnion;
+    filteredAdapterDescriptions: AdapterDescriptionUnion[];
+    adapters: AdapterDescriptionUnion[];
+    filteredAdapters: AdapterDescriptionUnion[];
+    visibleAdapters: AdapterDescriptionUnion[];
+
+    @Output()
+    selectAdapterEmitter: EventEmitter<AdapterDescriptionUnion> = new EventEmitter<AdapterDescriptionUnion>();
+
+    selectedIndex: number = 0;
+    filterTerm: string = "";
+    pipe: FilterPipe = new FilterPipe();
+    adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
+    selectedType: string = "All types";
+
+    adapterCategories: any;
+    selectedCategory: any = "All";
+
+    adaptersLoading: boolean = true;
+    adapterLoadingError: boolean = false;
+
+    constructor(private dataMarketplaceService: DataMarketplaceService,
+                private ShepherdService: ShepherdService,
+                private connectService: ConnectService,
+                private dialogService: DialogService) {
+    }
+
+    ngOnInit() {
+        this.updateDescriptionsAndRunningAdatpers();
+        this.loadAvailableTypeCategories();
+        this.visibleAdapters = this.adapters;
+    }
+
+    loadAvailableTypeCategories() {
+        this.dataMarketplaceService.getAdapterCategories().subscribe(res => {
+            this.adapterCategories = res;
+            this.adapterCategories.unshift({label: "All categories", description: "", code: "All"});
+        });
+    }
+
+    updateDescriptionsAndRunningAdatpers() {
+        this.getAdapterDescriptions();
+        this.getAdaptersRunning();
+    }
+
+    getAdapterDescriptions(): void {
+        this.adaptersLoading = true;
+        this.adapterDescriptions = [];
+
+        this.dataMarketplaceService
+            .getGenericAndSpecificAdapterDescriptions()
+            .subscribe((allAdapters) => {
+                this.adapterDescriptions = this.adapterDescriptions.concat(allAdapters[0]);
+                this.adapterDescriptions = this.adapterDescriptions.concat(allAdapters[1]);
+                this.adapterDescriptions
+                    .sort((a, b) => a.name.localeCompare(b.name));
+                this.filteredAdapterDescriptions = this.adapterDescriptions;
+                this.adaptersLoading = false;
+            }, error => {
+                this.adaptersLoading = false;
+                this.adapterLoadingError = true;
+            });
+
+        this.dataMarketplaceService.getAdapterTemplates().subscribe(adapterTemplates => {
+            adapterTemplates.forEach(function (adapterTemplate) {
+                (adapterTemplate as any).isTemplate = true;
+            });
+
+            this.adapterDescriptions = this.adapterDescriptions.concat(adapterTemplates);
+            this.adapterDescriptions
+                .sort((a, b) => a.name.localeCompare(b.name));
+            this.filteredAdapterDescriptions = this.adapterDescriptions;
+        });
+    }
+
+    getAdaptersRunning(): void {
+        this.dataMarketplaceService.getAdapters().subscribe(adapters => {
+            this.adapters = adapters;
+            this.filteredAdapters = this.adapters;
+        });
+    }
+
+    selectedIndexChange(index: number) {
+        this.selectedIndex = index;
+    }
+
+    startAdapterTutorial() {
+        this.ShepherdService.startAdapterTour();
+    }
+
+    startAdapterTutorial2() {
+        this.ShepherdService.startAdapterTour2();
+    }
+
+    startAdapterTutorial3() {
+        this.ShepherdService.startAdapterTour3();
+    }
+
+    selectAdapter(adapterDescription: AdapterDescriptionUnion) {
+        this.newAdapterFromDescription = this.dataMarketplaceService.cloneAdapterDescription(adapterDescription);
+        (this.newAdapterFromDescription as any).templateTitle = this.newAdapterFromDescription.name;
+        this.newAdapterFromDescription.name = "";
+        this.newAdapterFromDescription.description = "";
+        if (this.newAdapterFromDescription instanceof AdapterStreamDescription) {
+            this.newAdapterFromDescription.dataStream = new SpDataStream();
+            this.newAdapterFromDescription.dataStream["@class"] = "org.apache.streampipes.model.SpDataStream";
+            this.newAdapterFromDescription.dataStream.eventSchema = new EventSchema();
+            this.newAdapterFromDescription.dataStream.eventSchema["@class"] = "org.apache.streampipes.model.schema.EventSchema";
+        }
+        if (this.newAdapterFromDescription instanceof AdapterSetDescription) {
+            this.newAdapterFromDescription.dataSet = new SpDataSet();
+            this.newAdapterFromDescription.dataSet["@class"] = "org.apache.streampipes.model.SpDataSet";
+            this.newAdapterFromDescription.dataSet.eventSchema = new EventSchema();
+            this.newAdapterFromDescription.dataSet.eventSchema["@class"] = "org.apache.streampipes.model.schema.EventSchema";
+        }
+        this.ShepherdService.trigger("select-adapter");
+    }
+
+    templateFromRunningAdapter(adapter: AdapterDescriptionUnion) {
+        this.selectedIndexChange(0);
+        this.selectAdapter(adapter);
+
+    }
+
+    removeSelection() {
+        this.newAdapterFromDescription = undefined;
+    }
+
+    updateFilterTerm(inputValue) {
+        this.filterTerm = inputValue;
+    }
+
+    downloadAllAdapterTemplates() {
+        var adapterTemplates: AdapterDescription[] = [];
+        this.adapterDescriptions.forEach(function (adapterTemplate) {
+            if ((adapterTemplate as any).isTemplate) {
+                delete adapterTemplate['userName'];
+                adapterTemplates.push(adapterTemplate);
+            }
+        });
+
+        let data = "data:text/json;charset=utf-8," +encodeURIComponent(JSON.stringify(adapterTemplates, null, 2));
+        let downloader = document.createElement('a');
+
+        downloader.setAttribute('href', data);
+        downloader.setAttribute('download', 'all-adapter-templates.json');
+        downloader.click();
+    }
+
+    uploadAdapterTemplates() {
+        let dialogRef = this.dialogService.open(AdapterUploadDialog,{
+            panelType: PanelType.STANDARD_PANEL,
+            title: "Upload adapter templates",
+            width: "50vw"
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+            this.getAdapterDescriptions()
+        });
+    }
+
+    filterAdapter(event) {
+        let filteredAdapterTypes = this.filterAdapterType(this.adapterDescriptions);
+        let filteredAdapterTemplateTypes = this.filterAdapterType(this.adapters);
+
+        let filteredAdapterCategories = this.filterAdapterCategory(filteredAdapterTypes);
+        let filteredAdapterTemplateCategories = this.filterAdapterCategory(filteredAdapterTemplateTypes);
+
+        this.filteredAdapterDescriptions = filteredAdapterCategories;
+        this.filteredAdapters = filteredAdapterTemplateCategories;
+    }
+
+    filterAdapterCategory(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
+        if (this.selectedCategory == this.adapterCategories[0].code) {
+            return currentElements;
+        } else {
+            return currentElements.filter(adapterDescription => adapterDescription.category.indexOf(this.selectedCategory) != -1);
+        }
+    }
+
+    filterAdapterType(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
+        if (this.selectedType == this.adapterTypes[0]) {
+            return currentElements;
+        } else if (this.selectedType == this.adapterTypes[1]) {
+            return currentElements.filter(adapterDescription => this.connectService.isDataSetDescription(adapterDescription));
+        } else if (this.selectedType == this.adapterTypes[2]) {
+            return currentElements.filter(adapterDescription => !this.connectService.isDataSetDescription(adapterDescription));
+        }
+    }
+
+}
diff --git a/ui/src/app/connect/file-management/file-management.component.css b/ui/src/app/connect/components/file-management/file-management.component.css
similarity index 100%
copy from ui/src/app/connect/file-management/file-management.component.css
copy to ui/src/app/connect/components/file-management/file-management.component.css
diff --git a/ui/src/app/connect/file-management/file-management.component.html b/ui/src/app/connect/components/file-management/file-management.component.html
similarity index 100%
rename from ui/src/app/connect/file-management/file-management.component.html
rename to ui/src/app/connect/components/file-management/file-management.component.html
diff --git a/ui/src/app/connect/file-management/file-management.component.ts b/ui/src/app/connect/components/file-management/file-management.component.ts
similarity index 97%
rename from ui/src/app/connect/file-management/file-management.component.ts
rename to ui/src/app/connect/components/file-management/file-management.component.ts
index e1d024b..8315740 100644
--- a/ui/src/app/connect/file-management/file-management.component.ts
+++ b/ui/src/app/connect/components/file-management/file-management.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, OnInit} from '@angular/core';
-import {FileRestService} from './service/filerest.service';
+import {FileRestService} from '../../services/filerest.service';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Component({
diff --git a/ui/src/app/connect/format-component/format.component.css b/ui/src/app/connect/components/format-component/format.component.css
similarity index 100%
rename from ui/src/app/connect/format-component/format.component.css
rename to ui/src/app/connect/components/format-component/format.component.css
diff --git a/ui/src/app/connect/format-component/format.component.html b/ui/src/app/connect/components/format-component/format.component.html
similarity index 100%
rename from ui/src/app/connect/format-component/format.component.html
rename to ui/src/app/connect/components/format-component/format.component.html
diff --git a/ui/src/app/connect/format-component/format.component.ts b/ui/src/app/connect/components/format-component/format.component.ts
similarity index 93%
rename from ui/src/app/connect/format-component/format.component.ts
rename to ui/src/app/connect/components/format-component/format.component.ts
index 858bbf2..a93345b 100644
--- a/ui/src/app/connect/format-component/format.component.ts
+++ b/ui/src/app/connect/components/format-component/format.component.ts
@@ -17,8 +17,8 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {ShepherdService} from '../../services/tour/shepherd.service';
-import {FormatDescription} from "../../core-model/gen/streampipes-model";
+import {ShepherdService} from '../../../services/tour/shepherd.service';
+import {FormatDescription} from "../../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'app-format',
diff --git a/ui/src/app/connect/format-form/csv.ts b/ui/src/app/connect/components/format-form/csv.ts
similarity index 100%
rename from ui/src/app/connect/format-form/csv.ts
rename to ui/src/app/connect/components/format-form/csv.ts
diff --git a/ui/src/app/connect/format-form/format-form.component.css b/ui/src/app/connect/components/format-form/format-form.component.css
similarity index 100%
rename from ui/src/app/connect/format-form/format-form.component.css
rename to ui/src/app/connect/components/format-form/format-form.component.css
diff --git a/ui/src/app/connect/format-form/format-form.component.html b/ui/src/app/connect/components/format-form/format-form.component.html
similarity index 100%
rename from ui/src/app/connect/format-form/format-form.component.html
rename to ui/src/app/connect/components/format-form/format-form.component.html
diff --git a/ui/src/app/connect/format-form/format-form.component.ts b/ui/src/app/connect/components/format-form/format-form.component.ts
similarity index 97%
rename from ui/src/app/connect/format-form/format-form.component.ts
rename to ui/src/app/connect/components/format-form/format-form.component.ts
index f55137c..b361564 100644
--- a/ui/src/app/connect/format-form/format-form.component.ts
+++ b/ui/src/app/connect/components/format-form/format-form.component.ts
@@ -18,7 +18,7 @@
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {isUndefined} from 'util';
-import {FormatDescription} from "../../core-model/gen/streampipes-model";
+import {FormatDescription} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-format-form',
diff --git a/ui/src/app/connect/format-form/format.ts b/ui/src/app/connect/components/format-form/format.ts
similarity index 100%
rename from ui/src/app/connect/format-form/format.ts
rename to ui/src/app/connect/components/format-form/format.ts
diff --git a/ui/src/app/connect/format-form/json.ts b/ui/src/app/connect/components/format-form/json.ts
similarity index 100%
rename from ui/src/app/connect/format-form/json.ts
rename to ui/src/app/connect/components/format-form/json.ts
diff --git a/ui/src/app/connect/format-list-component/format-list.component.css b/ui/src/app/connect/components/format-list-component/format-list.component.css
similarity index 100%
rename from ui/src/app/connect/format-list-component/format-list.component.css
rename to ui/src/app/connect/components/format-list-component/format-list.component.css
diff --git a/ui/src/app/connect/format-list-component/format-list.component.html b/ui/src/app/connect/components/format-list-component/format-list.component.html
similarity index 100%
rename from ui/src/app/connect/format-list-component/format-list.component.html
rename to ui/src/app/connect/components/format-list-component/format-list.component.html
diff --git a/ui/src/app/connect/format-list-component/format-list.component.ts b/ui/src/app/connect/components/format-list-component/format-list.component.ts
similarity index 95%
rename from ui/src/app/connect/format-list-component/format-list.component.ts
rename to ui/src/app/connect/components/format-list-component/format-list.component.ts
index b48bf96..549a2bf 100644
--- a/ui/src/app/connect/format-list-component/format-list.component.ts
+++ b/ui/src/app/connect/components/format-list-component/format-list.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {FormatDescription} from "../../core-model/gen/streampipes-model";
+import {FormatDescription} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-format-list',
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.css b/ui/src/app/connect/components/new-adapter/new-adapter.component.css
similarity index 100%
rename from ui/src/app/connect/new-adapter/new-adapter.component.css
rename to ui/src/app/connect/components/new-adapter/new-adapter.component.css
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
similarity index 100%
rename from ui/src/app/connect/new-adapter/new-adapter.component.html
rename to ui/src/app/connect/components/new-adapter/new-adapter.component.html
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.ts b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
similarity index 90%
rename from ui/src/app/connect/new-adapter/new-adapter.component.ts
rename to ui/src/app/connect/components/new-adapter/new-adapter.component.ts
index 6e72e6a..2e00cc5 100644
--- a/ui/src/app/connect/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.ts
@@ -42,17 +42,20 @@ import {
   SpecificAdapterSetDescription,
   SpecificAdapterStreamDescription,
   TransformationRuleDescriptionUnion
-} from '../../core-model/gen/streampipes-model';
-import {ShepherdService} from '../../services/tour/shepherd.service';
-import {Logger} from '../../shared/logger/default-log.service';
-import {ConnectService} from '../connect.service';
-import {TimestampPipe} from '../filter/timestamp.pipe';
-import {ConfigurationInfo} from '../model/ConfigurationInfo';
-import {RestService} from '../rest.service';
+} from '../../../core-model/gen/streampipes-model';
+import {ShepherdService} from '../../../services/tour/shepherd.service';
+import {Logger} from '../../../shared/logger/default-log.service';
+import {ConnectService} from '../../services/connect.service';
+import {TimestampPipe} from '../../filter/timestamp.pipe';
+import {ConfigurationInfo} from '../../model/ConfigurationInfo';
+import {RestService} from '../../services/rest.service';
 import {EventSchemaComponent} from '../schema-editor/event-schema/event-schema.component';
-import {TransformationRuleService} from '../transformation-rule.service';
-import {AdapterStartedDialog} from './component/adapter-started-dialog.component';
-import {IconService} from './icon.service';
+import {TransformationRuleService} from '../../services/transformation-rule.service';
+import {AdapterStartedDialog} from '../../dialog/adapter-started/adapter-started-dialog.component';
+import {IconService} from '../../services/icon.service';
+import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {AdapterUploadDialog} from "../../dialog/adapter-upload/adapter-upload-dialog.component";
+import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
 
 @Component({
     selector: 'sp-new-adapter',
@@ -127,7 +130,7 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
         private logger: Logger,
         private restService: RestService,
         private transformationRuleService: TransformationRuleService,
-        public dialog: MatDialog,
+        private dialogService: DialogService,
         private ShepherdService: ShepherdService,
         private connectService: ConnectService,
         private _formBuilder: FormBuilder,
@@ -232,15 +235,16 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
             this.adapter.rules.push(eventRate);
         }
 
-        const dialogRef = this.dialog.open(AdapterStartedDialog, {
-            width: '70%',
+        let dialogRef = this.dialogService.open(AdapterStartedDialog,{
+            panelType: PanelType.STANDARD_PANEL,
+            title: "Adapter generation",
+            width: "70vw",
             data: {
-                adapter: this.adapter,
-                storeAsTemplate,
-                saveInDataLake: this.saveInDataLake,
-                dataLakeTimestampField: this.dataLakeTimestampField
-            },
-            panelClass: 'sp-no-padding-dialog'
+                "adapter": this.adapter,
+                "storeAsTemplate": storeAsTemplate,
+                "saveInDataLake": this.saveInDataLake,
+                "dataLakeTimestampField": this.dataLakeTimestampField
+            }
         });
 
         this.ShepherdService.trigger('button-startAdapter');
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
similarity index 100%
rename from ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
rename to ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
similarity index 100%
rename from ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss
rename to ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.ts
similarity index 94%
rename from ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
rename to ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.ts
index 80093a4..2481972 100644
--- a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
+++ b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.ts
@@ -17,8 +17,8 @@
  */
 
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {EventPropertyUnion, SpDataStream} from "../../../../core-model/gen/streampipes-model";
-import {RestService} from "../../../rest.service";
+import {EventPropertyUnion, SpDataStream} from "../../../core-model/gen/streampipes-model";
+import {RestService} from "../../services/rest.service";
 
 @Component({
   selector: 'pipeline-element-runtime-info',
diff --git a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.css b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.css
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.css
rename to ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.css
diff --git a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.html b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.html
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.html
rename to ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.html
diff --git a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.ts
similarity index 97%
rename from ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts
rename to ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.ts
index 679c50b..fbdb1bf 100644
--- a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts
+++ b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.ts
@@ -27,8 +27,8 @@ import {
   EventPropertyPrimitive,
   EventPropertyUnion,
   EventSchema
-} from "../../../core-model/gen/streampipes-model";
-import {EditEventPropertyComponent} from '../../dialog/edit-event-property/edit-event-property.component';
+} from "../../../../core-model/gen/streampipes-model";
+import {EditEventPropertyComponent} from '../../../dialog/edit-event-property/edit-event-property.component';
 
 @Component({
     selector: 'event-property-row',
diff --git a/ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.css b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.css
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.css
rename to ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.css
diff --git a/ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.html b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.html
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.html
rename to ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.html
diff --git a/ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.ts b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
similarity index 93%
rename from ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.ts
rename to ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
index 671942d..bf2c933 100644
--- a/ui/src/app/connect/schema-editor/event-schema-preview/event-schema-preview.component.ts
+++ b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Input} from "@angular/core";
-import {EventSchema} from "../../../core-model/gen/streampipes-model";
+import {EventSchema} from "../../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-event-schema-preview',
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.css b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.css
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-schema/event-schema.component.css
rename to ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.css
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html
similarity index 100%
rename from ui/src/app/connect/schema-editor/event-schema/event-schema.component.html
rename to ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
similarity index 97%
rename from ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
rename to ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
index da7b58d..e452edb 100644
--- a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
+++ b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
@@ -25,10 +25,10 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import {RestService} from '../../rest.service';
+import {RestService} from '../../../services/rest.service';
 import {ITreeOptions, TreeComponent} from 'angular-tree-component';
 import {UUID} from 'angular2-uuid';
-import {DataTypesService} from '../data-type.service';
+import {DataTypesService} from '../../../services/data-type.service';
 import {
   AdapterDescription,
   EventProperty,
@@ -37,7 +37,7 @@ import {
   EventSchema,
   GuessSchema,
   Notification
-} from "../../../core-model/gen/streampipes-model";
+} from "../../../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'app-event-schema',
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index dd6cd78..ff2e1d8 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -26,39 +26,39 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {ConnectComponent} from './connect.component';
-import {NewAdapterComponent} from './new-adapter/new-adapter.component';
+import {NewAdapterComponent} from './components/new-adapter/new-adapter.component';
 
-import {FormatFormComponent} from './format-form/format-form.component';
+import {FormatFormComponent} from './components/format-form/format-form.component';
 
 import {EditEventPropertyPrimitiveComponent} from './dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component';
-import {EventSchemaComponent} from './schema-editor/event-schema/event-schema.component';
+import {EventSchemaComponent} from './components/schema-editor/event-schema/event-schema.component';
 
 import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
 
-import {RestService} from './rest.service';
+import {RestService} from './services/rest.service';
 
 import {MatInputModule} from '@angular/material/input';
 import {DragulaModule} from 'ng2-dragula';
-import {AdapterStartedDialog} from './new-adapter/component/adapter-started-dialog.component';
-import {DataTypesService} from './schema-editor/data-type.service';
+import {AdapterStartedDialog} from './dialog/adapter-started/adapter-started-dialog.component';
+import {DataTypesService} from './services/data-type.service';
 import {StaticPropertyUtilService} from '../core-ui/static-properties/static-property-util.service';
-import {TransformationRuleService} from './transformation-rule.service';
-import {ConnectService} from './connect.service';
-import {AdapterDescriptionComponent} from './data-marketplace/adapter-description/adapter-description.component';
-import {DataMarketplaceComponent} from './data-marketplace/data-marketplace.component';
-import {DataMarketplaceService} from './data-marketplace/data-marketplace.service';
-import {FileManagementComponent} from './file-management/file-management.component';
-import {FileRestService} from './file-management/service/filerest.service';
-import {FormatComponent} from './format-component/format.component';
-import {FormatListComponent} from './format-list-component/format-list.component';
-import {IconService} from './new-adapter/icon.service';
-import {UnitProviderService} from './schema-editor/unit-provider.service';
+import {TransformationRuleService} from './services/transformation-rule.service';
+import {ConnectService} from './services/connect.service';
+import {AdapterDescriptionComponent} from './components/data-marketplace/adapter-description/adapter-description.component';
+import {DataMarketplaceComponent} from './components/data-marketplace/data-marketplace.component';
+import {DataMarketplaceService} from './services/data-marketplace.service';
+import {FileManagementComponent} from './components/file-management/file-management.component';
+import {FileRestService} from './services/filerest.service';
+import {FormatComponent} from './components/format-component/format.component';
+import {FormatListComponent} from './components/format-list-component/format-list.component';
+import {IconService} from './services/icon.service';
+import {UnitProviderService} from './services/unit-provider.service';
 
 
-import {FilterPipe} from './data-marketplace/filter.pipe';
+import {FilterPipe} from './filter/filter.pipe';
 import {PlatformServicesModule} from '../platform-services/platform.module';
-import {AdapterExportDialog} from './data-marketplace/adapter-export/adapter-export-dialog.component';
-import {AdapterUploadDialog} from './data-marketplace/adapter-upload/adapter-upload-dialog.component';
+import {AdapterExportDialog} from './dialog/adapter-export/adapter-export-dialog.component';
+import {AdapterUploadDialog} from './dialog/adapter-upload/adapter-upload-dialog.component';
 import {EditEventPropertyListComponent} from './dialog/edit-event-property/components/edit-event-property-list/edit-event-property-list.component';
 import {TimestampPipe} from './filter/timestamp.pipe';
 import {MatChipsModule} from '@angular/material/chips';
@@ -70,9 +70,9 @@ import {EditDataTypeComponent} from './dialog/edit-event-property/components/edi
 import {EditTimestampPropertyComponent} from './dialog/edit-event-property/components/edit-timestamp-property/edit-timestamp-property.component';
 import {EditUnitTransformationComponent} from './dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component';
 import {EditEventPropertyComponent} from './dialog/edit-event-property/edit-event-property.component';
-import {PipelineElementRuntimeInfoComponent} from './new-adapter/component/runtime-info/pipeline-element-runtime-info.component';
-import {EventPropertyRowComponent} from './schema-editor/event-property-row/event-property-row.component';
-import {EventSchemaPreviewComponent} from './schema-editor/event-schema-preview/event-schema-preview.component';
+import {PipelineElementRuntimeInfoComponent} from './components/runtime-info/pipeline-element-runtime-info.component';
+import {EventPropertyRowComponent} from './components/schema-editor/event-property-row/event-property-row.component';
+import {EventSchemaPreviewComponent} from './components/schema-editor/event-schema-preview/event-schema-preview.component';
 import {TourProviderService} from "../services/tour/tour-provider.service";
 import {CoreUiModule} from "../core-ui/core-ui.module";
 
diff --git a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.scss b/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.scss
deleted file mode 100644
index c66dcae..0000000
--- a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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.
- *
- */
-
-@import '../../../../scss/sp/sp-dialog.scss';
-
diff --git a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.scss b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.scss
similarity index 95%
rename from ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.scss
rename to ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.scss
index ae9a8e7..4e3de8e 100644
--- a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.scss
+++ b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.scss
@@ -16,7 +16,7 @@
  *
  */
 
-@import '../../../../scss/sp/sp-dialog.scss';
+@import 'src/scss/sp/sp-dialog';
 
 .code-container {
     position: relative;
diff --git a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts
similarity index 100%
rename from ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
rename to ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts
diff --git a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.html b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.html
similarity index 100%
rename from ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.html
rename to ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.html
diff --git a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
similarity index 85%
rename from ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
rename to ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
index e15927b..65210e0 100644
--- a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
+++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
@@ -16,18 +16,8 @@
   ~
   -->
 
-<div class="md-dialog" style="height: 80vh;">
-    <div class="md-toolbar">
-        <div class="md-toolbar-tools">
-            <h2>Adapter Generation</h2>
-            <span fxFlex></span>
-            <button  mat-icon-button (click)="onCloseConfirm()">
-                <i class="material-icons">close</i>
-            </button>
-        </div>
-    </div>
-
-    <div class="md-dialog-content" style="height: 60vh;">
+<div class="sp-dialog-container">
+    <div class="sp-dialog-content p-15">
         <div fxLayout="column" *ngIf="!adapterInstalled">
             <div fxLayoutAlign="center" >
                 <mat-spinner fxLayoutAlign="center" style="margin: 10px 0 5px 0" >Loading</mat-spinner>
@@ -67,11 +57,9 @@
             </div>
         </div>
     </div>
-
-
-    <div class="md-dialog-actions">
+    <mat-divider></mat-divider>
+    <div class="sp-dialog-actions actions-align-right">
         <button id="confirm_adapter_started_button" class="mat-basic" mat-raised-button (click)="onCloseConfirm()">Close
         </button>
     </div>
-
 </div>
\ No newline at end of file
diff --git a/ui/src/app/connect/file-management/file-management.component.css b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.scss
similarity index 96%
copy from ui/src/app/connect/file-management/file-management.component.css
copy to ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.scss
index 58ba04b..d25ee74 100644
--- a/ui/src/app/connect/file-management/file-management.component.css
+++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.scss
@@ -16,3 +16,4 @@
  *
  */
 
+@import 'src/scss/sp/sp-dialog';
\ No newline at end of file
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
similarity index 81%
rename from ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
rename to ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
index 985f0b5..9c301ba 100644
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
@@ -16,23 +16,22 @@
  *
  */
 
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {Component, Inject, Input} from '@angular/core';
 import {ShepherdService} from '../../../services/tour/shepherd.service';
-import {RestService} from "../../rest.service";
+import {RestService} from "../../services/rest.service";
 import {
-  FreeTextStaticProperty,
-  GenericAdapterSetDescription,
-  MappingPropertyUnary,
-  Message,
-  SpDataStream,
-  SpecificAdapterSetDescription
+    AdapterDescriptionUnion,
+    GenericAdapterSetDescription,
+    Message,
+    SpDataStream,
+    SpecificAdapterSetDescription
 } from "../../../core-model/gen/streampipes-model";
+import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
 
 @Component({
     selector: 'sp-dialog-adapter-started-dialog',
-    templateUrl: './dialog-adapter-started.html',
-    styleUrls: ['./adapter-started-dialog.component.css'],
+    templateUrl: './adapter-started-dialog.component.html',
+    styleUrls: ['./adapter-started-dialog.component.scss'],
 })
 export class AdapterStartedDialog {
 
@@ -44,12 +43,21 @@ export class AdapterStartedDialog {
     public isSetAdapter: boolean = false;
     public isTemplate: boolean = false;
 
-    private saveInDataLake: boolean;
+    @Input()
+    storeAsTemplate: boolean;
+
+    @Input()
+    adapter: AdapterDescriptionUnion;
+
+    @Input()
+    saveInDataLake: boolean;
+
+    @Input()
+    dataLakeTimestampField: string;
 
     constructor(
-        public dialogRef: MatDialogRef<AdapterStartedDialog>,
+        public dialogRef: DialogRef<AdapterStartedDialog>,
         private restService: RestService,
-        @Inject(MAT_DIALOG_DATA) public data: any,
         private ShepherdService: ShepherdService) { }
 
     ngOnInit() {
@@ -57,9 +65,9 @@ export class AdapterStartedDialog {
     }
 
     startAdapter() {
-        if (this.data.storeAsTemplate) {
+        if (this.storeAsTemplate) {
 
-            this.restService.addAdapterTemplate(this.data.adapter).subscribe(x => {
+            this.restService.addAdapterTemplate(this.adapter).subscribe(x => {
                 this.adapterStatus = x as Message;
                 this.isTemplate = true;
                 this.adapterInstalled = true;
@@ -67,8 +75,8 @@ export class AdapterStartedDialog {
 
         } else {
 
-            var newAdapter = this.data.adapter;
-            this.restService.addAdapter(this.data.adapter).subscribe(x => {
+            var newAdapter = this.adapter;
+            this.restService.addAdapter(this.adapter).subscribe(x => {
                 this.adapterInstalled = true;
                 this.adapterStatus = x;
                 if (x.success) {
@@ -83,7 +91,7 @@ export class AdapterStartedDialog {
                         });
                     }
 
-                    if (this.data.saveInDataLake) {
+                    if (this.saveInDataLake) {
                         // TODO pipeline templates are currently not working, this should be changed to use the new UI model
                         // const templateName = "org.apache.streampipes.manager.template.instances.DataLakePipelineTemplate";
                         // x.notifications[0].title
diff --git a/ui/src/app/connect/file-management/file-management.component.css b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.scss
similarity index 95%
rename from ui/src/app/connect/file-management/file-management.component.css
rename to ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.scss
index 58ba04b..1848127 100644
--- a/ui/src/app/connect/file-management/file-management.component.css
+++ b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.scss
@@ -16,3 +16,5 @@
  *
  */
 
+@import 'src/scss/sp/sp-dialog';
+
diff --git a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
similarity index 97%
rename from ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
rename to ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
index 99cf732..e969102 100644
--- a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
+++ b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component} from '@angular/core';
-import {RestService} from "../../rest.service";
+import {RestService} from "../../services/rest.service";
 import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
 
 @Component({
diff --git a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.html b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.html
similarity index 100%
rename from ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.html
rename to ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.html
diff --git a/ui/src/app/connect/dialog/edit-event-property/components/edit-data-type/edit-data-type.component.ts b/ui/src/app/connect/dialog/edit-event-property/components/edit-data-type/edit-data-type.component.ts
index 9520cac..aa494d1 100644
--- a/ui/src/app/connect/dialog/edit-event-property/components/edit-data-type/edit-data-type.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/components/edit-data-type/edit-data-type.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {DataTypesService} from '../../../../schema-editor/data-type.service';
+import {DataTypesService} from '../../../../services/data-type.service';
 
 @Component({
   selector: 'sp-edit-data-type',
diff --git a/ui/src/app/connect/dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component.ts b/ui/src/app/connect/dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component.ts
index ba10210..3aa08cb 100644
--- a/ui/src/app/connect/dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/components/edit-event-property-primitive/edit-event-property-primitive.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Input, OnInit} from '@angular/core';
-import {DataTypesService} from '../../../../schema-editor/data-type.service';
+import {DataTypesService} from '../../../../services/data-type.service';
 
 @Component({
   selector: 'sp-edit-event-property-primitive',
diff --git a/ui/src/app/connect/dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component.ts b/ui/src/app/connect/dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component.ts
index 640bf15..54cb4ec 100644
--- a/ui/src/app/connect/dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/components/edit-unit-transformation/edit-unit-transformation.component.ts
@@ -21,8 +21,8 @@ import {FormBuilder, FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {UnitDescription} from '../../../../model/UnitDescription';
-import {RestService} from '../../../../rest.service';
-import {UnitProviderService} from '../../../../schema-editor/unit-provider.service';
+import {RestService} from '../../../../services/rest.service';
+import {UnitProviderService} from '../../../../services/unit-provider.service';
 
 @Component({
   selector: 'sp-edit-unit-transformation',
diff --git a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
index e6f9a54..950b24f 100644
--- a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
@@ -26,7 +26,7 @@ import {
   EventPropertyUnion
 } from '../../../core-model/gen/streampipes-model';
 import {SemanticTypeUtilsService} from '../../../core-services/semantic-type/semantic-type-utils.service';
-import {DataTypesService} from '../../schema-editor/data-type.service';
+import {DataTypesService} from '../../services/data-type.service';
 
 
 @Component({
diff --git a/ui/src/app/connect/data-marketplace/filter.pipe.ts b/ui/src/app/connect/filter/filter.pipe.ts
similarity index 100%
rename from ui/src/app/connect/data-marketplace/filter.pipe.ts
rename to ui/src/app/connect/filter/filter.pipe.ts
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.css b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.css
deleted file mode 100644
index fd396f8..0000000
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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.
- *
- */
-
-.md-toolbar {
-    box-sizing: border-box;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    position: relative;
-    z-index: 2;
-    font-size: 20px;
-    min-height: 64px;
-    width: 100%;
-}
\ No newline at end of file
diff --git a/ui/src/app/connect/connect.service.ts b/ui/src/app/connect/services/connect.service.ts
similarity index 95%
rename from ui/src/app/connect/connect.service.ts
rename to ui/src/app/connect/services/connect.service.ts
index 6ec7c99..af8cc42 100644
--- a/ui/src/app/connect/connect.service.ts
+++ b/ui/src/app/connect/services/connect.service.ts
@@ -1,45 +1,45 @@
-/*
- * 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.
- *
- */
-
-import {Injectable} from '@angular/core';
-import {
-  AdapterDescription,
-  GenericAdapterSetDescription,
-  GenericAdapterStreamDescription,
-  SpecificAdapterSetDescription,
-  SpecificAdapterStreamDescription
-} from '../core-model/gen/streampipes-model';
-
-@Injectable()
-export class ConnectService {
-  isDataStreamDescription(adapter: AdapterDescription): boolean {
-      return adapter instanceof SpecificAdapterStreamDescription || adapter instanceof GenericAdapterStreamDescription;
-  }
-
-  isDataSetDescription(adapter: AdapterDescription): boolean {
-      return adapter instanceof SpecificAdapterSetDescription || adapter instanceof GenericAdapterSetDescription;
-  }
-
-  isGenericDescription(adapter: AdapterDescription): boolean {
-      return adapter instanceof GenericAdapterSetDescription || adapter instanceof GenericAdapterStreamDescription;
-  }
-
-  isSpecificDescription(adapter: AdapterDescription): boolean {
-      return adapter instanceof SpecificAdapterSetDescription || adapter instanceof SpecificAdapterStreamDescription;
-  }
-}
+/*
+ * 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.
+ *
+ */
+
+import {Injectable} from '@angular/core';
+import {
+  AdapterDescription,
+  GenericAdapterSetDescription,
+  GenericAdapterStreamDescription,
+  SpecificAdapterSetDescription,
+  SpecificAdapterStreamDescription
+} from '../../core-model/gen/streampipes-model';
+
+@Injectable()
+export class ConnectService {
+  isDataStreamDescription(adapter: AdapterDescription): boolean {
+      return adapter instanceof SpecificAdapterStreamDescription || adapter instanceof GenericAdapterStreamDescription;
+  }
+
+  isDataSetDescription(adapter: AdapterDescription): boolean {
+      return adapter instanceof SpecificAdapterSetDescription || adapter instanceof GenericAdapterSetDescription;
+  }
+
+  isGenericDescription(adapter: AdapterDescription): boolean {
+      return adapter instanceof GenericAdapterSetDescription || adapter instanceof GenericAdapterStreamDescription;
+  }
+
+  isSpecificDescription(adapter: AdapterDescription): boolean {
+      return adapter instanceof SpecificAdapterSetDescription || adapter instanceof SpecificAdapterStreamDescription;
+  }
+}
diff --git a/ui/src/app/connect/data-marketplace/data-marketplace.service.ts b/ui/src/app/connect/services/data-marketplace.service.ts
similarity index 99%
rename from ui/src/app/connect/data-marketplace/data-marketplace.service.ts
rename to ui/src/app/connect/services/data-marketplace.service.ts
index fa62ad3..710b11d 100644
--- a/ui/src/app/connect/data-marketplace/data-marketplace.service.ts
+++ b/ui/src/app/connect/services/data-marketplace.service.ts
@@ -20,7 +20,7 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {map} from 'rxjs/operators';
 import {AuthStatusService} from '../../services/auth-status.service';
-import {ConnectService} from '../connect.service';
+import {ConnectService} from './connect.service';
 import {
   AdapterDescription,
   AdapterDescriptionList,
diff --git a/ui/src/app/connect/schema-editor/data-type.service.ts b/ui/src/app/connect/services/data-type.service.ts
similarity index 100%
rename from ui/src/app/connect/schema-editor/data-type.service.ts
rename to ui/src/app/connect/services/data-type.service.ts
diff --git a/ui/src/app/connect/file-management/service/filerest.service.ts b/ui/src/app/connect/services/filerest.service.ts
similarity index 96%
rename from ui/src/app/connect/file-management/service/filerest.service.ts
rename to ui/src/app/connect/services/filerest.service.ts
index f5bcd24..fbb799a 100644
--- a/ui/src/app/connect/file-management/service/filerest.service.ts
+++ b/ui/src/app/connect/services/filerest.service.ts
@@ -20,7 +20,7 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {HttpClient, HttpRequest} from '@angular/common/http';
-import {AuthStatusService} from '../../../services/auth-status.service';
+import {AuthStatusService} from '../../services/auth-status.service';
 
 
 @Injectable()
diff --git a/ui/src/app/connect/new-adapter/icon.service.ts b/ui/src/app/connect/services/icon.service.ts
similarity index 96%
rename from ui/src/app/connect/new-adapter/icon.service.ts
rename to ui/src/app/connect/services/icon.service.ts
index 5693a11..82f3e78 100644
--- a/ui/src/app/connect/new-adapter/icon.service.ts
+++ b/ui/src/app/connect/services/icon.service.ts
@@ -1,40 +1,40 @@
-/*
- * 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.
- *
- */
-
-import {Injectable} from '@angular/core';
-
-@Injectable()
-export class IconService {
-
-  constructor(
-  ) {}
-
-     getBase64(file: File) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = error => reject(error);
-        });
-    }
-
-  toBase64(file: File) {
-      return this.getBase64(file);
-  }
-
-}
+/*
+ * 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.
+ *
+ */
+
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class IconService {
+
+  constructor(
+  ) {}
+
+     getBase64(file: File) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
+    }
+
+  toBase64(file: File) {
+      return this.getBase64(file);
+  }
+
+}
diff --git a/ui/src/app/connect/rest.service.ts b/ui/src/app/connect/services/rest.service.ts
similarity index 96%
rename from ui/src/app/connect/rest.service.ts
rename to ui/src/app/connect/services/rest.service.ts
index 0c3c08a..3ab5dfd 100644
--- a/ui/src/app/connect/rest.service.ts
+++ b/ui/src/app/connect/services/rest.service.ts
@@ -24,8 +24,8 @@ import {from, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
 
-import {AuthStatusService} from '../services/auth-status.service';
-import {UnitDescription} from './model/UnitDescription';
+import {AuthStatusService} from '../../services/auth-status.service';
+import {UnitDescription} from '../model/UnitDescription';
 import {
     AdapterDescription,
     DataSourceDescription,
@@ -33,7 +33,7 @@ import {
     GuessSchema,
     Message,
     ProtocolDescriptionList
-} from "../core-model/gen/streampipes-model";
+} from "../../core-model/gen/streampipes-model";
 
 @Injectable()
 export class RestService {
diff --git a/ui/src/app/connect/transformation-rule.service.spec.ts b/ui/src/app/connect/services/transformation-rule.service.spec.ts
similarity index 99%
rename from ui/src/app/connect/transformation-rule.service.spec.ts
rename to ui/src/app/connect/services/transformation-rule.service.spec.ts
index acaae9a..0cfab81 100644
--- a/ui/src/app/connect/transformation-rule.service.spec.ts
+++ b/ui/src/app/connect/services/transformation-rule.service.spec.ts
@@ -19,14 +19,14 @@
 import {getTestBed, TestBed} from '@angular/core/testing';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {TransformationRuleService} from './transformation-rule.service';
-import {Logger} from '../shared/logger/default-log.service';
+import {Logger} from '../../shared/logger/default-log.service';
 import {
     CreateNestedRuleDescription,
     DeleteRuleDescription,
     EventPropertyNested,
     EventPropertyPrimitive,
     EventPropertyUnion, EventSchema, MoveRuleDescription, RenameRuleDescription
-} from "../core-model/gen/streampipes-model";
+} from "../../core-model/gen/streampipes-model";
 
 describe('TransformationRuleService', () => {
 
diff --git a/ui/src/app/connect/transformation-rule.service.ts b/ui/src/app/connect/services/transformation-rule.service.ts
similarity index 98%
rename from ui/src/app/connect/transformation-rule.service.ts
rename to ui/src/app/connect/services/transformation-rule.service.ts
index 081985d..30696c5 100644
--- a/ui/src/app/connect/transformation-rule.service.ts
+++ b/ui/src/app/connect/services/transformation-rule.service.ts
@@ -32,9 +32,9 @@ import {
     TimestampTranfsformationRuleDescription,
     TransformationRuleDescriptionUnion,
     UnitTransformRuleDescription
-} from '../core-model/gen/streampipes-model';
-import {Logger} from '../shared/logger/default-log.service';
-import {TimestampTransformationRuleMode} from './model/TimestampTransformationRuleMode';
+} from '../../core-model/gen/streampipes-model';
+import {Logger} from '../../shared/logger/default-log.service';
+import {TimestampTransformationRuleMode} from '../model/TimestampTransformationRuleMode';
 
 @Injectable()
 export class TransformationRuleService {
diff --git a/ui/src/app/connect/schema-editor/unit-provider.service.ts b/ui/src/app/connect/services/unit-provider.service.ts
similarity index 100%
rename from ui/src/app/connect/schema-editor/unit-provider.service.ts
rename to ui/src/app/connect/services/unit-provider.service.ts