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/06/14 13:14:42 UTC

[incubator-streampipes] branch STREAMPIPES-145 updated (cd2cd03 -> 4bb7253)

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

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


    from cd2cd03  [STREAMPIPES-145] Migrate pipeline cache
     new 6ae26c1  [STREAMPIPES-145] Migrate help dialog
     new b9db613  [STREAMPIPES-145] Fix bug in cache handling of pipeline elements
     new 4bb7253  [STREAMPIPES-145] Migrate pipeline element documentation module

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 ui/deployment/app.module.mst                       |   7 +-
 ui/package.json                                    |   5 +-
 ui/src/app/connect/connect.module.ts               |   7 +-
 .../component/adapter-started-dialog.component.ts  |  35 ------
 .../component/dialog-adapter-started.html          |  31 +-----
 .../pipeline-element-runtime-info.component.html   |  47 ++++++++
 .../pipeline-element-runtime-info.component.scss}  |   0
 .../pipeline-element-runtime-info.component.ts     | 101 ++++++++++++++++++
 .../standard-dialog/standard-dialog.component.html |   2 +-
 .../standard-dialog/standard-dialog.component.scss |  10 +-
 .../pipeline-assembly.component.ts                 |   2 +-
 .../pipeline-element-documentation.component.html  |   6 ++
 .../pipeline-element-documentation.component.scss} |   0
 .../pipeline-element-documentation.component.ts}   |  37 ++++---
 .../pipeline-element-icon-stand.component.html     |   2 +-
 .../pipeline-element-icon-stand.component.ts       |   6 +-
 .../pipeline-element-options.component.html        |   2 +-
 .../pipeline-element-options.component.ts          |   5 +-
 .../app/editor-v2/dialog/help/help.component.html  |  71 +++++++++++++
 .../dialog/help/help.component.scss}               |   1 +
 ui/src/app/editor-v2/dialog/help/help.component.ts | 118 +++++++++++++++++++++
 ui/src/app/editor-v2/editor.module.ts              |  10 +-
 ui/src/app/editor-v2/services/editor.service.ts    |  24 +++--
 ui/src/app/editor/editor.module.ts                 |   3 +-
 .../app/platform-services/apis/commons.service.ts  |   4 +
 .../apis/pipeline-element.service.ts               |   8 ++
 ui/src/scss/sp/sp-dialog.scss                      |   4 +
 27 files changed, 438 insertions(+), 110 deletions(-)
 create mode 100644 ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
 copy ui/src/app/{editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss => connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss} (100%)
 create mode 100644 ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
 create mode 100644 ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.html
 copy ui/src/app/editor-v2/{editor.component.css => components/pipeline-element-documentation/pipeline-element-documentation.component.scss} (100%)
 copy ui/src/app/{data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.ts => editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.ts} (53%)
 create mode 100644 ui/src/app/editor-v2/dialog/help/help.component.html
 copy ui/src/app/{app-container/view/view.component.css => editor-v2/dialog/help/help.component.scss} (94%)
 create mode 100644 ui/src/app/editor-v2/dialog/help/help.component.ts


[incubator-streampipes] 02/03: [STREAMPIPES-145] Fix bug in cache handling of pipeline elements

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit b9db613cec04077b2b9b5c43044721a2e0e7575c
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 13:59:24 2020 +0200

    [STREAMPIPES-145] Fix bug in cache handling of pipeline elements
---
 .../pipeline-element-options/pipeline-element-options.component.ts     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
index 21c32e9..d1aa338 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -101,8 +101,7 @@ export class PipelineElementOptionsComponent implements OnInit{
         this.initRecs(this.pipelineElement.payload.dom);
       }
     });
-    let pipelineElementType = PipelineElementTypeUtils.fromType(this.pipelineElement.payload);
-    this.pipelineElementCssType = PipelineElementTypeUtils.toCssShortHand(pipelineElementType);
+    this.pipelineElementCssType = this.pipelineElement.type;
 
     if (this.pipelineElement.type === 'stream') {
       this.initRecs(this.pipelineElement.payload.dom);


[incubator-streampipes] 03/03: [STREAMPIPES-145] Migrate pipeline element documentation module

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 4bb7253aac65d95f41edbb95fc0b57c394da812a
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 15:14:27 2020 +0200

    [STREAMPIPES-145] Migrate pipeline element documentation module
---
 ui/package.json                                    |  5 +-
 .../standard-dialog/standard-dialog.component.html |  2 +-
 .../standard-dialog/standard-dialog.component.scss | 10 +++-
 .../pipeline-element-documentation.component.html  |  6 +++
 .../pipeline-element-documentation.component.scss} | 25 +--------
 .../pipeline-element-documentation.component.ts}   | 36 +++++++++----
 .../app/editor-v2/dialog/help/help.component.html  | 61 +++++++++++-----------
 ui/src/app/editor-v2/editor.module.ts              |  8 ++-
 ui/src/app/editor/editor.module.ts                 |  3 +-
 .../app/platform-services/apis/commons.service.ts  |  4 ++
 .../apis/pipeline-element.service.ts               |  8 +++
 ui/src/scss/sp/sp-dialog.scss                      |  4 ++
 12 files changed, 99 insertions(+), 73 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 195fcba..808e590 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -46,7 +46,6 @@
     "angular-datatables": "0.6.2",
     "angular-gridster2": "8.3.0",
     "angular-loading-bar": "0.8.0",
-    "angular-markdown-directive": "0.3.1",
     "angular-material": "1.1.18",
     "angular-material-icons": "0.4.0",
     "angular-messages": "1.7.7",
@@ -89,7 +88,7 @@
     "@danielmoncada/angular-datetime-picker": "9.2.0",
     "moment": "2.24.0",
     "ng-prettyjson": "0.1.8",
-    "ng-showdown": "1.1.0",
+    "ngx-showdown": "5.1.0",
     "ng-simple-slideshow": "1.2.9",
     "ng2-charts": "2.0.3",
     "ng2-dragula": "1.5.0",
@@ -101,6 +100,7 @@
     "rxjs": "6.3.3",
     "rxjs-compat": "6.3.3",
     "shepherd.js": "2.4.0",
+    "showdown": "1.9.1",
     "slick-carousel": "1.6.0",
     "systemjs": "0.21.6",
     "tslib": "1.11.1",
@@ -120,6 +120,7 @@
     "@types/leaflet": "^1.5.9",
     "@types/node": "^12.11.1",
     "@types/rx": "^4.1.1",
+    "@types/showdown": "1.9.3",
     "codelyzer": "^5.1.2",
     "copy-webpack-plugin": "^5.0.2",
     "compression-webpack-plugin": "^3.0.0",
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html
index 5a1edd0..7da4171 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html
+++ b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html
@@ -16,7 +16,7 @@
   ~
   -->
 
-<div fxFlex="100" fxLayout="column">
+<div class="dialog-panel">
     <div class="dialog-panel-header">
         <span class="dialog-title">{{ dialogTitle }}</span>
         <button mat-button mat-icon-button (click)="close()">
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
index 1f5afb9..3fe1d06 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
+++ b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
@@ -24,6 +24,12 @@ standard-dialog-container {
   box-shadow: -7px 0px 5px -5px #5d5d5d;
 }
 
+.dialog-panel {
+  height: 80vh;
+  display: grid;
+  grid-template-rows: 50px auto;
+}
+
 .dialog-panel-header {
   display: flex;
   justify-content: space-between;
@@ -35,8 +41,8 @@ standard-dialog-container {
 }
 
 .dialog-panel-content {
-  flex: 1 1 100%;
-  background: white;
+  height: 100%;
+  overflow-y:auto;
 }
 
 .dialog-title {
diff --git a/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.html b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.html
new file mode 100644
index 0000000..26a0945
--- /dev/null
+++ b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.html
@@ -0,0 +1,6 @@
+<p showdown="{{documentationMarkdown}}" *ngIf="documentationMarkdown && !error" [ngClass]="useStyling ? 'note' : ''">
+
+</p>
+<p *ngIf="error" ng-class="useStyling ? 'note' : ''">
+    (no documentation available)
+</p>
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
similarity index 76%
copy from ui/src/scss/sp/sp-dialog.scss
copy to ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
index dab562b..41ecef0 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
@@ -1,4 +1,4 @@
-/*!
+/*
  * 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.
@@ -14,25 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- */
-
-.sp-dialog-container {
-  display: grid;
-  height: 100%;
-  grid-template-rows: auto 10px 60px;
-
-}
-
-.sp-dialog-content {
-  margin: 0px;
-  overflow-y:auto;
-  flex: 1 1 auto;
-}
-
-.sp-dialog-actions {
-  padding: 10px;
-}
-
-.p-15 {
-  padding: 15px;
-}
\ No newline at end of file
+ */
\ No newline at end of file
diff --git a/ui/src/app/platform-services/apis/commons.service.ts b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
similarity index 50%
copy from ui/src/app/platform-services/apis/commons.service.ts
copy to ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
index 2c38292..42271ce 100644
--- a/ui/src/app/platform-services/apis/commons.service.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
@@ -16,23 +16,37 @@
  *
  */
 
-import {AuthStatusService} from "../../services/auth-status.service";
-import {Injectable} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
+import {PipelineElementService} from "../../../platform-services/apis/pipeline-element.service";
 
-@Injectable()
-export class PlatformServicesCommons {
+@Component({
+  selector: 'pipeline-element-documentation',
+  templateUrl: './pipeline-element-documentation.component.html',
+  styleUrls: ['./pipeline-element-documentation.component.scss']
+})
+export class PipelineElementDocumentationComponent implements OnInit {
 
-  constructor(private authStatusService: AuthStatusService) {
+  @Input()
+  appId: string;
 
-  }
+  @Input()
+  useStyling: boolean;
+
+  documentationMarkdown: any;
+  error: any;
+
+  constructor(private PipelineElementService: PipelineElementService) {
 
-  get basePath(): string {
-    return '/streampipes-backend';
   }
 
-  authUserBasePath() {
-    return this.basePath + '/api/v2/users/' + this.authStatusService.email;
+  ngOnInit(): void {
+    this.PipelineElementService.getDocumentation(this.appId).subscribe(msg => {
+      this.error = false;
+      this.documentationMarkdown = msg;
+    }, error => {
+      this.error = true;
+    });
   }
 
-}
 
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.html b/ui/src/app/editor-v2/dialog/help/help.component.html
index 8c3db13..42de2af 100644
--- a/ui/src/app/editor-v2/dialog/help/help.component.html
+++ b/ui/src/app/editor-v2/dialog/help/help.component.html
@@ -27,42 +27,43 @@
             <mat-tab *ngFor="let tab of tabs" label="{{tab.title}}">
             </mat-tab>
         </mat-tab-group>
+        <div style="margin-top:15px;">
+            <div *ngIf="selectedIndex == 0 && streamMode">
+                <h5>Field Names</h5>
 
-        <div *ngIf="selectedIndex == 0 && streamMode">
-            <h5>Field Names</h5>
-
-            <div>
-                <table class="dataTable row-border hover">
-                    <thead>
-                    <tr>
-                        <th>Field Name</th>
-                        <th>Description</th>
-                        <th>Runtime Name</th>
-                        <th>Type</th>
-                    </tr>
-                    </thead>
-                    <tbody id="preview-data-rows-id">
-                    <tr *ngFor="let property of pipelineElement.eventSchema.eventProperties">
-                        <td>{{property.label ? property.label : "(n/a)"}}</td>
-                        <td>{{property.description ? property.description : "(n/a)"}}</td>
-                        <td>{{property.runtimeName}}</td>
-                        <td>{{getFriendlyRuntimeType(property.runtimeType)}}</td>
-                    </tr>
-                    </tbody>
-                </table>
+                <div>
+                    <table class="dataTable row-border hover">
+                        <thead>
+                        <tr>
+                            <th>Field Name</th>
+                            <th>Description</th>
+                            <th>Runtime Name</th>
+                            <th>Type</th>
+                        </tr>
+                        </thead>
+                        <tbody id="preview-data-rows-id">
+                        <tr *ngFor="let property of pipelineElement.eventSchema.eventProperties">
+                            <td>{{property.label ? property.label : "(n/a)"}}</td>
+                            <td>{{property.description ? property.description : "(n/a)"}}</td>
+                            <td>{{property.runtimeName}}</td>
+                            <td>{{getFriendlyRuntimeType(property.runtimeType)}}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
-        <div *ngIf="selectedIndex == 1 && streamMode">
-            <div>
-                <pipeline-element-runtime-info [streamDescription]="pipelineElement" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
+            <div *ngIf="selectedIndex == 1 && streamMode">
+                <div>
+                    <pipeline-element-runtime-info [streamDescription]="pipelineElement" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
+                </div>
+            </div>
+            <div *ngIf="selectedTab == 2 || !(streamMode)">
+                <pipeline-element-documentation [useStyling]="false" [appId]="pipelineElement.appId"></pipeline-element-documentation>
             </div>
         </div>
-<!--        <div *ngIf="selectedTab == 'documentation'">-->
-<!--            <pipeline-element-documentation use-styling="false" app-id="ctrl.pipelineElement.appId"></pipeline-element-documentation>-->
-<!--        </div>-->
     </div>
     <mat-divider></mat-divider>
-    <div class="sp-dialog-actions">
+    <div class="sp-dialog-actions actions-align-right">
         <button mat-button mat-raised-button class="mat-basic" (click)="close()">
             Close
         </button>
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index fc7844f..522b7b2 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -53,6 +53,8 @@ import {PipelineElementRecommendationComponent} from "./components/pipeline-elem
 import {CompatibleElementsComponent} from "./dialog/compatible-elements/compatible-elements.component";
 import {MatListModule} from "@angular/material/list";
 import {HelpComponent} from "./dialog/help/help.component";
+import {PipelineElementDocumentationComponent} from "./components/pipeline-element-documentation/pipeline-element-documentation.component";
+import { ShowdownModule } from 'ngx-showdown';
 
 @NgModule({
     imports: [
@@ -67,7 +69,8 @@ import {HelpComponent} from "./dialog/help/help.component";
         CustomMaterialModule,
         FormsModule,
         ConnectModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        ShowdownModule
     ],
     declarations: [
         CompatibleElementsComponent,
@@ -75,8 +78,9 @@ import {HelpComponent} from "./dialog/help/help.component";
         EditorComponent,
         HelpComponent,
         PipelineAssemblyComponent,
-        PipelineElementIconStandComponent,
         PipelineElementComponent,
+        PipelineElementDocumentationComponent,
+        PipelineElementIconStandComponent,
         PipelineElementOptionsComponent,
         PipelineElementRecommendationComponent,
         PipelineComponent,
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 81df33b..a80db0d 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -28,7 +28,6 @@ import 'npm/bootstrap';
 import 'npm/angular-trix';
 import 'npm/angular-datatables';
 import 'npm/angular-sanitize';
-import 'npm/ng-showdown';
 
 import {EditorCtrl} from './editor.controller';
 import myDataBind from './my-data-bind.directive';
@@ -76,7 +75,7 @@ import {CodeEditorDirective} from "./components/code/code-editor.directive";
 import {UserDefinedOutputComponent} from "./components/userdefinedoutput/user-defined-output.component";
 
 
-export default angular.module('sp.editor', [spServices, 'ngSanitize', 'angularTrix', 'ngAnimate', 'datatables', 'ng-showdown'])
+export default angular.module('sp.editor', [spServices, 'ngSanitize', 'angularTrix', 'ngAnimate', 'datatables'])
     .controller('EditorCtrl', EditorCtrl)
     .directive('myDataBind', myDataBind)
     .directive('imageBind', imageBind)
diff --git a/ui/src/app/platform-services/apis/commons.service.ts b/ui/src/app/platform-services/apis/commons.service.ts
index 2c38292..c4781ba 100644
--- a/ui/src/app/platform-services/apis/commons.service.ts
+++ b/ui/src/app/platform-services/apis/commons.service.ts
@@ -34,5 +34,9 @@ export class PlatformServicesCommons {
     return this.basePath + '/api/v2/users/' + this.authStatusService.email;
   }
 
+  get unauthenticatedBasePath() {
+    return this.basePath + '/api/v2';
+  }
+
 }
 
diff --git a/ui/src/app/platform-services/apis/pipeline-element.service.ts b/ui/src/app/platform-services/apis/pipeline-element.service.ts
index 0463376..c95712e 100644
--- a/ui/src/app/platform-services/apis/pipeline-element.service.ts
+++ b/ui/src/app/platform-services/apis/pipeline-element.service.ts
@@ -52,6 +52,13 @@ export class PipelineElementService {
     })
   }
 
+  getDocumentation(appId) {
+    return this.http.get(this.platformServicesCommons.unauthenticatedBasePath
+        + "/pe/"
+        + appId
+        + "/assets/documentation", {responseType: 'text'});
+  }
+
   private get dataProcessorsUrl(): string {
     return this.platformServicesCommons.authUserBasePath() + '/sepas'
   }
@@ -63,4 +70,5 @@ export class PipelineElementService {
   private get dataSinksUrl(): string {
     return this.platformServicesCommons.authUserBasePath() + '/actions'
   }
+
 }
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss
index dab562b..d0bdea3 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/scss/sp/sp-dialog.scss
@@ -33,6 +33,10 @@
   padding: 10px;
 }
 
+.actions-align-right {
+  margin-left: auto;
+}
+
 .p-15 {
   padding: 15px;
 }
\ No newline at end of file


[incubator-streampipes] 01/03: [STREAMPIPES-145] Migrate help dialog

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 6ae26c108c3627a5218b79d8971b5704b03a307b
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 13:51:19 2020 +0200

    [STREAMPIPES-145] Migrate help dialog
---
 ui/deployment/app.module.mst                       |   7 +-
 ui/src/app/connect/connect.module.ts               |   7 +-
 .../component/adapter-started-dialog.component.ts  |  35 ------
 .../component/dialog-adapter-started.html          |  31 +-----
 .../pipeline-element-runtime-info.component.html   |  47 ++++++++
 .../pipeline-element-runtime-info.component.scss   |   0
 .../pipeline-element-runtime-info.component.ts     | 101 ++++++++++++++++++
 .../pipeline-assembly.component.ts                 |   2 +-
 .../pipeline-element-icon-stand.component.html     |   2 +-
 .../pipeline-element-icon-stand.component.ts       |   6 +-
 .../pipeline-element-options.component.html        |   2 +-
 .../pipeline-element-options.component.ts          |   2 +-
 .../app/editor-v2/dialog/help/help.component.html  |  70 ++++++++++++
 .../app/editor-v2/dialog/help/help.component.scss  |  19 ++++
 ui/src/app/editor-v2/dialog/help/help.component.ts | 118 +++++++++++++++++++++
 ui/src/app/editor-v2/editor.module.ts              |   2 +
 ui/src/app/editor-v2/services/editor.service.ts    |  24 +++--
 17 files changed, 392 insertions(+), 83 deletions(-)

diff --git a/ui/deployment/app.module.mst b/ui/deployment/app.module.mst
index e407f60..ce11ee8 100644
--- a/ui/deployment/app.module.mst
+++ b/ui/deployment/app.module.mst
@@ -63,14 +63,11 @@ export const Ng1AppModule = angular
     ])
     .decorator('$rootScope', rootScopeDelegate)
     .config(['$urlServiceProvider', ($urlService) => $urlService.deferIntercept()])
-    .run(["$rootScope", "$transitions", "TransitionService", "RouteTransitionInterceptorService",
-        function ($rootScope, $transitions, TransitionService, RouteTransitionInterceptorService) {
+    .run(["$rootScope", "$transitions", "RouteTransitionInterceptorService",
+        function ($rootScope, $transitions, RouteTransitionInterceptorService) {
             $transitions.onBefore({}, transition => {
               return RouteTransitionInterceptorService.onTransitionStarted(transition);
             });
-            $transitions.onStart({}, transition => {
-                return TransitionService.onTransitionStarted(transition);
-            });
             //window['loading_screen'].finish();
     }])
     .config(mdThemingProviderConfig)
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index c9c1b97..57aa9fd 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -94,6 +94,7 @@ import {EventPropertyRowComponent} from "./schema-editor/event-property-row/even
 import {PropertySelectorService} from "../services/property-selector.service";
 import {StaticColorPickerComponent} from "./static-properties/static-color-picker/static-color-picker.component";
 import {ColorPickerModule} from "ngx-color-picker";
+import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
 
 
 @NgModule({
@@ -115,7 +116,8 @@ import {ColorPickerModule} from "ngx-color-picker";
     ],
     exports: [
         StaticPropertyComponent,
-        SelectStaticPropertiesComponent
+        SelectStaticPropertiesComponent,
+        PipelineElementRuntimeInfoComponent
     ],
     declarations: [
         NewAdapterComponent,
@@ -157,7 +159,8 @@ import {ColorPickerModule} from "ngx-color-picker";
         StaticGroupComponent,
         StaticAlternativesComponent,
         StaticCollectionComponent,
-        StaticColorPickerComponent
+        StaticColorPickerComponent,
+        PipelineElementRuntimeInfoComponent
     ],
     providers: [
         RestService,
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
index 9fd4a3c..a25f0cf 100644
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
@@ -22,7 +22,6 @@ import {ShepherdService} from '../../../services/tour/shepherd.service';
 import {RestService} from "../../rest.service";
 import {PipelineTemplateService} from '../../../platform-services/apis/pipeline-template.service';
 import {
-    EventPropertyUnion,
     FreeTextStaticProperty,
     GenericAdapterSetDescription,
     MappingPropertyUnary,
@@ -83,7 +82,6 @@ export class AdapterStartedDialog {
                         this.restService.getSourceDetails(x.notifications[0].title).subscribe(x => {
                             this.streamDescription = x.spDataStreams[0];
                             this.pollingActive = true;
-                            this.getLatestRuntimeInfo();
                         });
                     }
 
@@ -114,40 +112,7 @@ export class AdapterStartedDialog {
         }
     }
 
-    getLatestRuntimeInfo() {
-        this.restService.getRuntimeInfo(this.streamDescription).subscribe(data => {
-            if (!(Object.keys(data).length === 0 && data.constructor === Object)) {
-                this.runtimeData = data;
-            }
-
-            if (this.pollingActive) {
-                setTimeout(() => {
-                    this.getLatestRuntimeInfo();
-                }, 1000);
-            }
-        });
-    }
-
-    isPropertyType(property: EventPropertyUnion, type) {
-      return property.domainProperties !== undefined && property.domainProperties.length === 1 &&
-        property.domainProperties[0] === type;
-    }
-
-    isImage(property) {
-        return this.isPropertyType(property, 'https://image.com');
-    }
 
-    isTimestamp(property) {
-      return this.isPropertyType(property, 'http://schema.org/DateTime');
-    }
-
-    hasNoDomainProperty(property) {
-        if (this.isTimestamp(property) || this.isImage(property)) {
-            return false;
-        } else {
-            return true;
-        }
-    }
 
     onCloseConfirm() {
         this.pollingActive = false;
diff --git a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html b/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
index 9c1bced..e15927b 100644
--- a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
+++ b/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
@@ -57,35 +57,10 @@
                     </div>
                 </div>
 
-                <div *ngIf="runtimeData === undefined && !isSetAdapter && !isTemplate">
-                    <div fxLayout="column">
-                        <div fxLayoutAlign="center" >
-                            <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin: 10px 0 5px 0" >Loading</mat-spinner>
-                        </div>
-                        <div fxLayoutAlign="center">
-                            <h3>Gathering data for live preview...</h3>
-                        </div>
-                    </div>
-                </div>
-                <div *ngIf="runtimeData !== undefined">
-                    <p>Here is a preview of your data:</p>
-                    <table class="dataTable row-border hover">
-                        <thead>
-                        <tr>
-                            <th>Runtime Name</th>
-                            <th>Value</th>
-                        </tr>
-                        </thead>
-                        <tbody id="preview-data-rows-id">
-                        <tr *ngFor="let property of streamDescription.eventSchema.eventProperties">
-                            <td>{{property.runtimeName}}</td>
-                            <td *ngIf="isImage(property)"> <img src="data:image/png;base64,{{runtimeData[property.properties.runtimeName]}}" style="max-width: 150px;" /> </td>
-                            <td *ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>
-                            <td *ngIf="hasNoDomainProperty(property)">{{runtimeData[property.runtimeName]}}</td>
-                        </tr>
-                        </tbody>
-                    </table>
+                <div *ngIf="!isSetAdapter && !isTemplate">
+                    <pipeline-element-runtime-info [streamDescription]="streamDescription" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
                 </div>
+
             </div>
             <div *ngIf="!adapterStatus.success">
                 Something went wrong during the adapter installation.
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
new file mode 100644
index 0000000..074bc0a
--- /dev/null
+++ b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
@@ -0,0 +1,47 @@
+<!--
+  ~ 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 *ngIf="!runtimeData">
+    <div fxLayout="column">
+        <div fxLayoutAlign="center" >
+            <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin: 10px 0 5px 0" >Loading</mat-spinner>
+        </div>
+        <div fxLayoutAlign="center">
+            <h3>Gathering data for live preview...</h3>
+        </div>
+    </div>
+</div>
+<div *ngIf="runtimeData">
+    <p>Here is a preview of your data:</p>
+    <table class="dataTable row-border hover">
+        <thead>
+        <tr>
+            <th>Runtime Name</th>
+            <th>Value</th>
+        </tr>
+        </thead>
+        <tbody id="preview-data-rows-id">
+        <tr *ngFor="let property of streamDescription.eventSchema.eventProperties">
+            <td>{{property.runtimeName}}</td>
+            <td *ngIf="isImage(property)"> <img src="data:image/png;base64,{{runtimeData[property.properties.runtimeName]}}" style="max-width: 150px;" /> </td>
+            <td *ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>
+            <td *ngIf="hasNoDomainProperty(property)">{{runtimeData[property.runtimeName]}}</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
new file mode 100644
index 0000000..80093a4
--- /dev/null
+++ b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
@@ -0,0 +1,101 @@
+/*
+ * 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, Input, OnDestroy, OnInit} from '@angular/core';
+import {EventPropertyUnion, SpDataStream} from "../../../../core-model/gen/streampipes-model";
+import {RestService} from "../../../rest.service";
+
+@Component({
+  selector: 'pipeline-element-runtime-info',
+  templateUrl: './pipeline-element-runtime-info.component.html',
+  styleUrls: ['./pipeline-element-runtime-info.component.scss'],
+})
+export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy {
+
+  @Input()
+  streamDescription: SpDataStream;
+
+  _pollingActive: boolean;
+
+  runtimeData: any;
+  timer: any;
+
+  constructor(private RestService: RestService) {
+
+  }
+
+  ngOnInit(): void {
+    this.checkPollingStart();
+  }
+
+  checkPollingStart() {
+    if (this._pollingActive) {
+      this.getLatestRuntimeInfo();
+    }
+  }
+
+  getLatestRuntimeInfo() {
+    this.RestService.getRuntimeInfo(this.streamDescription).subscribe(data => {
+      if (!(Object.keys(data).length === 0 && data.constructor === Object)) {
+        this.runtimeData = data;
+      }
+
+      if (this._pollingActive) {
+          this.timer = setTimeout(() => {
+            this.getLatestRuntimeInfo();
+          }, 1000);
+      }
+    });
+  }
+
+  isPropertyType(property: EventPropertyUnion, type) {
+    return property.domainProperties !== undefined && property.domainProperties.length === 1 &&
+        property.domainProperties[0] === type;
+  }
+
+  isImage(property) {
+    return this.isPropertyType(property, 'https://image.com');
+  }
+
+  isTimestamp(property) {
+    return this.isPropertyType(property, 'http://schema.org/DateTime');
+  }
+
+  hasNoDomainProperty(property) {
+    if (this.isTimestamp(property) || this.isImage(property)) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  @Input()
+  set pollingActive(pollingActive: boolean) {
+    this._pollingActive = pollingActive;
+    this.checkPollingStart();
+  }
+
+  get pollingActive(): boolean {
+    return this._pollingActive;
+  }
+
+  ngOnDestroy(): void {
+    this.pollingActive = false;
+    clearTimeout(this.timer);
+  }
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
index 4559321..384b7ec 100644
--- a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -71,7 +71,7 @@ export class PipelineAssemblyComponent implements OnInit {
     constructor(private JsplumbBridge: JsplumbBridge,
                 private PipelinePositioningService: PipelinePositioningService,
                 private ObjectProvider: ObjectProvider,
-                private EditorService: EditorService,
+                public EditorService: EditorService,
                 public PipelineValidationService: PipelineValidationService,
                 private RestApi: RestApi,
                 private JsplumbService: JsplumbService,
diff --git a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index bdfac01..046042e 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -86,7 +86,7 @@
             <span style="display:block;width:100%;height:100%;position:absolute; top:0; left:0;"
                   *ngIf="currentElementName===element.name">
                 <span class="help-button-icon-stand" style="z-index:10"><md-button
-                        ng-click="openHelpDialog(element)"
+                        (click)="openHelpDialog(element)"
                         class="md-icon-button"
                         style="margin:0px;font-size:20px;">?</md-button>
                 </span>
diff --git a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
index b18627b..2b1f788 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -21,6 +21,7 @@ import * as angular from "angular";
 import {RestApi} from "../../../services/rest-api.service";
 import {PipelineElementType, PipelineElementUnion} from "../../model/editor.model";
 import {PipelineElementTypeUtils} from "../../utils/editor.utils";
+import {EditorService} from "../../services/editor.service";
 
 
 @Component({
@@ -42,7 +43,8 @@ export class PipelineElementIconStandComponent implements OnInit {
 
     currentElementName: string;
 
-    constructor(private RestApi: RestApi) {
+    constructor(private RestApi: RestApi,
+                private EditorService: EditorService) {
 
     }
 
@@ -55,7 +57,7 @@ export class PipelineElementIconStandComponent implements OnInit {
     }
 
     openHelpDialog(pipelineElement) {
-        //this.EditorDialogManager.openHelpDialog(pipelineElement);
+        this.EditorService.openHelpDialog(pipelineElement);
     }
 
     updateMouseOver(elementAppId: string) {
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
index 33581c2..3f346a2 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
@@ -55,7 +55,7 @@
     </span>
     <span class="options-button help-button" style="z-index:10">
         <button matTooltip="Help" [matTooltipPosition]="'below'"
-                mat-button mat-icon-button ng-click="openHelpDialog()">?
+                mat-button mat-icon-button (click)="openHelpDialog()">?
             </button>
     </span>
     <div class="editor-pe-info" [ngClass]="'pe-info-' + pipelineElementCssType">
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
index 4c1709d..21c32e9 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -129,7 +129,7 @@ export class PipelineElementOptionsComponent implements OnInit{
   }
 
   openHelpDialog() {
-    //this.EditorDialogManager.openHelpDialog(this.pipelineElement.payload);
+    this.EditorService.openHelpDialog(this.pipelineElement.payload);
   }
 
   openCustomizeStreamDialog() {
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.html b/ui/src/app/editor-v2/dialog/help/help.component.html
new file mode 100644
index 0000000..8c3db13
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.html
@@ -0,0 +1,70 @@
+<!--
+  ~ 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 class="sp-dialog-container">
+    <div class="sp-dialog-content p-15">
+        <h4>{{pipelineElement.name}}</h4>
+        <p>
+            {{pipelineElement.description}}
+        </p>
+
+        <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndex=$event">
+            <mat-tab *ngFor="let tab of tabs" label="{{tab.title}}">
+            </mat-tab>
+        </mat-tab-group>
+
+        <div *ngIf="selectedIndex == 0 && streamMode">
+            <h5>Field Names</h5>
+
+            <div>
+                <table class="dataTable row-border hover">
+                    <thead>
+                    <tr>
+                        <th>Field Name</th>
+                        <th>Description</th>
+                        <th>Runtime Name</th>
+                        <th>Type</th>
+                    </tr>
+                    </thead>
+                    <tbody id="preview-data-rows-id">
+                    <tr *ngFor="let property of pipelineElement.eventSchema.eventProperties">
+                        <td>{{property.label ? property.label : "(n/a)"}}</td>
+                        <td>{{property.description ? property.description : "(n/a)"}}</td>
+                        <td>{{property.runtimeName}}</td>
+                        <td>{{getFriendlyRuntimeType(property.runtimeType)}}</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div *ngIf="selectedIndex == 1 && streamMode">
+            <div>
+                <pipeline-element-runtime-info [streamDescription]="pipelineElement" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
+            </div>
+        </div>
+<!--        <div *ngIf="selectedTab == 'documentation'">-->
+<!--            <pipeline-element-documentation use-styling="false" app-id="ctrl.pipelineElement.appId"></pipeline-element-documentation>-->
+<!--        </div>-->
+    </div>
+    <mat-divider></mat-divider>
+    <div class="sp-dialog-actions">
+        <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+            Close
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.scss b/ui/src/app/editor-v2/dialog/help/help.component.scss
new file mode 100644
index 0000000..0a776e5
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.scss
@@ -0,0 +1,19 @@
+/*
+ * 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';
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.ts b/ui/src/app/editor-v2/dialog/help/help.component.ts
new file mode 100644
index 0000000..1a77f95
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.ts
@@ -0,0 +1,118 @@
+/*
+ * 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, Input} from "@angular/core";
+import {PipelineElementUnion} from "../../model/editor.model";
+import {PipelineElementService} from "../../../platform-services/apis/pipeline-element.service";
+import {
+  DataProcessorInvocation,
+  SpDataSet,
+  SpDataStream
+} from "../../../core-model/gen/streampipes-model";
+import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
+import {PipelineElementTypeUtils} from "../../utils/editor.utils";
+
+@Component({
+  selector: 'pipeline-element-help',
+  templateUrl: './help.component.html',
+  styleUrls: ['./help.component.scss']
+})
+export class HelpComponent {
+
+  selectedTab = 0;
+  pollingActive: boolean;
+
+  selectedIndex: number = 0;
+
+  nsPrefix = "http://www.w3.org/2001/XMLSchema#";
+  availableTabs = [
+    {
+      title: 'Fields',
+      type: 'fields',
+      targets: ['set', 'stream']
+    },
+    {
+      title: 'Values',
+      type: 'values',
+      targets: ['set', 'stream']
+    },
+    {
+      title: 'Documentation',
+      type: 'documentation',
+      targets: ['set', 'stream', 'sepa', 'action']
+    }
+  ];
+
+  tabs: any[] = [];
+  streamMode: boolean;
+
+  @Input()
+  pipelineElement: PipelineElementUnion;
+
+  constructor(private PipelineElementService: PipelineElementService,
+              private DialogRef: DialogRef<HelpComponent>) {
+    this.pollingActive = true;
+  }
+
+  ngOnInit() {
+    if (this.pipelineElement instanceof SpDataStream) {
+      this.tabs = this.availableTabs;
+      this.streamMode = true;
+    } else {
+      this.tabs.push(this.availableTabs[2]);
+      this.streamMode = false;
+    }
+  }
+
+  getFriendlyRuntimeType(runtimeType) {
+    if (this.isNumber(runtimeType)) {
+      return "Number";
+    } else if (this.isBoolean(runtimeType)) {
+      return "Boolean";
+    } else {
+      return "Text";
+    }
+  }
+
+  isNumber(runtimeType) {
+    return (runtimeType == (this.nsPrefix + "float")) ||
+        (runtimeType == (this.nsPrefix + "integer")) ||
+        (runtimeType == (this.nsPrefix + "long")) ||
+        (runtimeType == (this.nsPrefix + "double"));
+  }
+
+  isBoolean(runtimeType) {
+    return runtimeType == this.nsPrefix + "boolean";
+  }
+
+  close() {
+    this.pollingActive = false;
+    setTimeout(() => {
+      this.DialogRef.close();
+    });
+  }
+
+
+  filterTab(tab) {
+    let type = PipelineElementTypeUtils.fromType(this.pipelineElement);
+    let cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
+    return tab.targets.indexOf(cssShortHand) != -1;
+  }
+
+
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index f5c5a74..fc7844f 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -52,6 +52,7 @@ import {SavePipelineComponent} from "./dialog/save-pipeline/save-pipeline.compon
 import {PipelineElementRecommendationComponent} from "./components/pipeline-element-recommendation/pipeline-element-recommendation.component";
 import {CompatibleElementsComponent} from "./dialog/compatible-elements/compatible-elements.component";
 import {MatListModule} from "@angular/material/list";
+import {HelpComponent} from "./dialog/help/help.component";
 
 @NgModule({
     imports: [
@@ -72,6 +73,7 @@ import {MatListModule} from "@angular/material/list";
         CompatibleElementsComponent,
         CustomizeComponent,
         EditorComponent,
+        HelpComponent,
         PipelineAssemblyComponent,
         PipelineElementIconStandComponent,
         PipelineElementComponent,
diff --git a/ui/src/app/editor-v2/services/editor.service.ts b/ui/src/app/editor-v2/services/editor.service.ts
index ab054b5..c6be960 100644
--- a/ui/src/app/editor-v2/services/editor.service.ts
+++ b/ui/src/app/editor-v2/services/editor.service.ts
@@ -18,14 +18,16 @@
 
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
-import {AuthStatusService} from "../../services/auth-status.service";
-import {TsonLdSerializerService} from "../../platform-services/tsonld-serializer.service";
 import {
-    DataProcessorInvocation, PipelineElementRecommendationMessage,
+    PipelineElementRecommendationMessage,
     PipelineModificationMessage
 } from "../../core-model/gen/streampipes-model";
 import {Observable, Subject} from "rxjs";
 import {PlatformServicesCommons} from "../../platform-services/apis/commons.service";
+import {PipelineElementUnion} from "../model/editor.model";
+import {PanelType} from "../../core-ui/dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../core-ui/dialog/base-dialog/base-dialog.service";
+import {HelpComponent} from "../dialog/help/help.component";
 
 @Injectable()
 export class EditorService {
@@ -37,7 +39,8 @@ export class EditorService {
     pipelineAssemblyEmpty: boolean = true;
 
     constructor(private http: HttpClient,
-                private platformServicesCommons: PlatformServicesCommons) {
+                private platformServicesCommons: PlatformServicesCommons,
+                private DialogService: DialogService) {
     }
 
     recommendPipelineElement(pipeline): Observable<PipelineElementRecommendationMessage> {
@@ -76,7 +79,14 @@ export class EditorService {
         this.pipelineAssemblyEmpty = status;
     }
 
-
-
-
+    openHelpDialog(pipelineElement: PipelineElementUnion) {
+        this.DialogService.open(HelpComponent,{
+            panelType: PanelType.STANDARD_PANEL,
+            title: pipelineElement.name,
+            width: "70vw",
+            data: {
+                "pipelineElement": pipelineElement
+            }
+        });
+    }
 }
\ No newline at end of file