You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2022/02/02 16:16:53 UTC

[incubator-streampipes] 03/03: [hotfix] Add platform service module to pipeline elements

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

zehnder pushed a commit to branch experimental-module-federation-494-philipp
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit df7f9f238d34e83a73fa10a06c4a03c946428b5f
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Feb 2 17:14:34 2022 +0100

    [hotfix] Add platform service module to pipeline elements
---
 .../output-strategy/base/BaseOutputStrategy.ts     |  11 ++--
 .../output-strategy/output-strategy.component.ts   |   6 +-
 .../property-selection.component.ts                |  12 ++--
 .../user-defined-output.component.ts               |   2 +-
 .../pipeline-assembly.component.ts                 |   4 +-
 .../pipeline-element-documentation.component.ts    |   8 +--
 .../pipeline-element-icon-stand.component.ts       |  50 +++++++--------
 .../pipeline-element-options.component.ts          |   6 +-
 .../pipeline-element-preview.component.ts          |   6 +-
 .../pipeline-element-template-config.component.ts  |  16 ++---
 .../pipeline-element-template-generator.ts         |  16 ++---
 .../components/pipeline/pipeline.component.ts      |   1 -
 ui/src/app/editor/constants/editor.constants.ts    |  10 +--
 .../compatible-elements.component.ts               |  34 +++++-----
 .../editor/dialog/customize/customize.component.ts |   5 +-
 ui/src/app/editor/dialog/help/help.component.ts    |  45 +++++++------
 .../missing-elements-for-tutorial.component.ts     |  12 ++--
 .../pipeline-element-discovery.component.ts        |   2 +-
 .../save-pipeline/save-pipeline.component.ts       |  70 ++++++++++-----------
 .../dialog/welcome-tour/welcome-tour.component.ts  |  26 ++++----
 ui/src/app/editor/editor.module.ts                 |   2 +
 .../filter/enabled-pipeline-element.filter.ts      |   6 +-
 ui/src/app/editor/model/editor.model.ts            |  33 +++++-----
 ui/src/app/editor/model/jsplumb.model.ts           |  12 ++--
 ui/src/app/editor/services/editor.service.ts       |   6 +-
 .../app/editor/services/jsplumb-config.service.ts  |   4 +-
 ui/src/app/editor/services/jsplumb.service.ts      |  17 ++---
 .../services/pipeline-positioning.service.ts       |   2 +-
 .../app/editor/services/pipeline-style.service.ts  |   6 +-
 .../editor/services/pipeline-validation.service.ts |   2 +-
 ui/src/app/editor/utils/editor.utils.ts            |  14 ++---
 ui/src/app/editor/utils/style-sanitizer.ts         |  10 +--
 .../actions/pipeline-actions.component.ts          |   3 +-
 .../components/edit/quickedit.component.ts         |  28 ++++-----
 .../elements/pipeline-elements-row.component.ts    |  10 +--
 .../elements/pipeline-elements.component.ts        |   8 +--
 .../components/model/pipeline-details.model.ts     |   2 +-
 .../monitoring/pipeline-monitoring.component.ts    |   2 +-
 .../pipeline-element-statistics.component.ts       |  13 ++--
 .../components/status/pipeline-status.component.ts |   5 +-
 .../pipeline-details/pipeline-details.component.ts |   6 +-
 .../pipeline-details/pipeline-details.module.ts    |  44 ++++++-------
 .../category-already-in-pipeline.filter.ts         |   6 +-
 .../pipeline-overview.component.ts                 |   2 +-
 .../delete-pipeline-dialog.component.ts            |   3 +-
 .../import-pipeline-dialog.component.ts            |   2 +-
 .../pipeline-categories-dialog.component.ts        |   8 +--
 .../pipeline-notifications.component.ts            |   3 +-
 .../start-all-pipelines-dialog.component.ts        |   3 +-
 ui/src/app/pipelines/pipeline-category.filter.ts   |   6 +-
 ui/src/app/pipelines/pipelines.component.ts        |   4 +-
 ui/src/app/pipelines/pipelines.module.ts           |   4 +-
 .../services/pipeline-operations.service.ts        |   3 +-
 ui/src/assets/img/sp/favicon.ico                   | Bin 0 -> 1150 bytes
 54 files changed, 304 insertions(+), 317 deletions(-)

diff --git a/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts b/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
index 933e444..9271ef5 100644
--- a/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
+++ b/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
@@ -16,14 +16,15 @@
  *
  */
 
-import { Input, Directive } from "@angular/core";
-import {FormGroup} from "@angular/forms";
+import { Input, Directive } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import {
   DataProcessorInvocation,
   OutputStrategy
-} from "../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+} from '@streampipes/platform-services';
 
 @Directive()
+// tslint:disable-next-line:directive-class-suffix
 export abstract class BaseOutputStrategy<T extends OutputStrategy> {
 
   @Input()
@@ -37,9 +38,9 @@ export abstract class BaseOutputStrategy<T extends OutputStrategy> {
 
   @Input()
   restrictedEditMode: boolean;
-  
+
   constructor() {
 
   }
-  
+
 }
diff --git a/ui/src/app/editor/components/output-strategy/output-strategy.component.ts b/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
index d918f08..e2229ad 100644
--- a/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
+++ b/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {DataProcessorInvocation, OutputStrategy} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {FormGroup} from "@angular/forms";
+import { Component, Input, OnInit } from '@angular/core';
+import { DataProcessorInvocation, OutputStrategy } from '@streampipes/platform-services';
+import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'output-strategy',
diff --git a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
index 3ca484a..b3623c4 100644
--- a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
+++ b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
@@ -16,19 +16,19 @@
  *
  */
 
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
   CustomOutputStrategy,
   EventPropertyNested,
   EventPropertyUnion
-} from "../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+} from '@streampipes/platform-services';
 
 @Component({
   selector: 'property-selection',
   templateUrl: './property-selection.component.html',
   styleUrls: ['./property-selection.component.scss']
 })
-export class PropertySelectionComponent {
+export class PropertySelectionComponent implements OnInit {
 
   @Input()
   outputStrategy: CustomOutputStrategy;
@@ -45,7 +45,7 @@ export class PropertySelectionComponent {
   @Output()
   validateForm: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  isNestedProperty: boolean
+  isNestedProperty: boolean;
 
   ngOnInit() {
     this.isNestedProperty = this.eventProperty instanceof EventPropertyNested;
@@ -67,11 +67,11 @@ export class PropertySelectionComponent {
   add(runtimeId) {
     this.outputStrategy.selectedPropertyKeys.push(runtimeId);
     // This is needed to trigger update of scope
-    this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => {return true;});
+    this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => true);
   }
 
   remove(runtimeId) {
-    this.outputStrategy.selectedPropertyKeys =  this.outputStrategy.selectedPropertyKeys.filter(el => { return el != runtimeId; });
+    this.outputStrategy.selectedPropertyKeys =  this.outputStrategy.selectedPropertyKeys.filter(el => el !== runtimeId);
   }
 
   triggerFormValidation() {
diff --git a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
index 5c6da36..b66303a 100644
--- a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
+++ b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
@@ -93,7 +93,7 @@ export class UserDefinedOutputStrategyComponent extends BaseOutputStrategy<UserD
   }
 
   checkFormValidity() {
-    if (!this.outputStrategy.eventProperties || this.outputStrategy.eventProperties.length == 0) {
+    if (!this.outputStrategy.eventProperties || this.outputStrategy.eventProperties.length === 0) {
       this.parentForm.controls['output-strategy'].setErrors({});
     } else {
       this.parentForm.controls['output-strategy'].setErrors(undefined);
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
index dbcd41a..7c2fcfb 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -40,14 +40,12 @@ import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.s
 import { ConfirmDialogComponent } from '../../../core-ui/dialog/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { EditorService } from '../../services/editor.service';
-import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
+import { PipelineService, PipelineCanvasMetadataService, PipelineCanvasMetadata } from '@streampipes/platform-services';
 import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
 import Panzoom, { PanzoomObject } from '@panzoom/panzoom';
 import { PipelineElementDraggedService } from '../../services/pipeline-element-dragged.service';
 import { PipelineComponent } from '../pipeline/pipeline.component';
-import { PipelineCanvasMetadata } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
 import { forkJoin } from 'rxjs';
-import { PipelineCanvasMetadataService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-canvas-metadata.service';
 import { PipelineElementDiscoveryComponent } from '../../dialog/pipeline-element-discovery/pipeline-element-discovery.component';
 
 
diff --git a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
index 6011ab1..bbe039d 100644
--- a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {PipelineElementService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-element.service";
+import { Component, Input, OnInit } from '@angular/core';
+import { PipelineElementService } from '@streampipes/platform-services';
 
 @Component({
   selector: 'pipeline-element-documentation',
@@ -35,12 +35,12 @@ export class PipelineElementDocumentationComponent implements OnInit {
   documentationMarkdown: any;
   error: any;
 
-  constructor(private PipelineElementService: PipelineElementService) {
+  constructor(private pipelineElementService: PipelineElementService) {
 
   }
 
   ngOnInit(): void {
-    this.PipelineElementService.getDocumentation(this.appId).subscribe(msg => {
+    this.pipelineElementService.getDocumentation(this.appId).subscribe(msg => {
       this.error = false;
       this.documentationMarkdown = msg;
     }, error => {
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
index 866ffa0..5abe418 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -16,16 +16,16 @@
  *
  */
 
-import {Component, Input, OnInit,} from "@angular/core";
-import {RestApi} from "../../../services/rest-api.service";
+import { AfterViewInit, Component, Input, OnInit, } from '@angular/core';
+import { RestApi } from '../../../services/rest-api.service';
 import {
     PipelineElementIdentifier,
     PipelineElementType,
     PipelineElementUnion
-} from "../../model/editor.model";
-import {PipelineElementTypeUtils} from "../../utils/editor.utils";
-import {EditorService} from "../../services/editor.service";
-import {zip} from "rxjs";
+} from '../../model/editor.model';
+import { PipelineElementTypeUtils } from '../../utils/editor.utils';
+import { EditorService } from '../../services/editor.service';
+import { zip } from 'rxjs';
 
 
 @Component({
@@ -33,14 +33,14 @@ import {zip} from "rxjs";
     templateUrl: './pipeline-element-icon-stand.component.html',
     styleUrls: ['./pipeline-element-icon-stand.component.scss']
 })
-export class PipelineElementIconStandComponent implements OnInit {
+export class PipelineElementIconStandComponent implements OnInit, AfterViewInit {
 
 
     _currentElements: PipelineElementUnion[];
 
     currentlyFilteredElements: PipelineElementUnion[];
 
-    elementFilter: string = "";
+    elementFilter = '';
     allCategories: any = [];
     currentCategories: any = [];
     selectedOptions: any = [];
@@ -50,8 +50,8 @@ export class PipelineElementIconStandComponent implements OnInit {
 
     currentElementName: string;
 
-    constructor(private RestApi: RestApi,
-                private EditorService: EditorService) {
+    constructor(private restApi: RestApi,
+                private editorService: EditorService) {
 
     }
 
@@ -64,7 +64,7 @@ export class PipelineElementIconStandComponent implements OnInit {
     }
 
     openHelpDialog(pipelineElement) {
-        this.EditorService.openHelpDialog(pipelineElement);
+        this.editorService.openHelpDialog(pipelineElement);
     }
 
     updateMouseOver(elementAppId: string) {
@@ -72,9 +72,9 @@ export class PipelineElementIconStandComponent implements OnInit {
     }
 
     loadOptions() {
-        zip(this.EditorService.getEpCategories(),
-            this.EditorService.getEpaCategories(),
-            this.EditorService.getEcCategories()).subscribe((results) => {
+        zip(this.editorService.getEpCategories(),
+            this.editorService.getEpaCategories(),
+            this.editorService.getEcCategories()).subscribe((results) => {
                 this.allCategories[PipelineElementType.DataStream] = results[0];
                 this.allCategories[PipelineElementType.DataSet] = results[0];
                 this.allCategories[PipelineElementType.DataProcessor] = results[1];
@@ -82,17 +82,17 @@ export class PipelineElementIconStandComponent implements OnInit {
                 this.currentCategories = this.allCategories[0];
                 this.selectedOptions = [...this.currentCategories];
             });
-    };
+    }
 
     applyFilter() {
         this.currentlyFilteredElements = this.currentElements.filter(el => {
             return this.matchesText(el) && this.matchesCategory(el);
-        })
+        });
         this.makeDraggable();
     }
 
     matchesText(el: PipelineElementUnion): boolean {
-        return this.elementFilter === "" || el.name.toLowerCase().includes(this.elementFilter.toLowerCase());
+        return this.elementFilter === '' || el.name.toLowerCase().includes(this.elementFilter.toLowerCase());
     }
 
     matchesCategory(el: PipelineElementUnion): boolean {
@@ -130,7 +130,7 @@ export class PipelineElementIconStandComponent implements OnInit {
 
     @Input()
     set activeType(value: PipelineElementIdentifier) {
-        let activeType = PipelineElementTypeUtils.fromClassName(value);
+        const activeType = PipelineElementTypeUtils.fromClassName(value);
         this._activeType = activeType;
         if (this.allCategories.length > 0) {
             this.currentCategories = this.allCategories[this._activeType];
@@ -139,13 +139,13 @@ export class PipelineElementIconStandComponent implements OnInit {
         this.activeCssClass = this.makeActiveCssClass(activeType);
         setTimeout(() => {
             this.makeDraggable();
-        })
-    };
+        });
+    }
 
     @Input()
     set currentElements(value: PipelineElementUnion[]) {
         this._currentElements = value;
-        this.elementFilter = "";
+        this.elementFilter = '';
         this.currentlyFilteredElements = this._currentElements;
     }
 
@@ -159,19 +159,19 @@ export class PipelineElementIconStandComponent implements OnInit {
 
     makeDraggable() {
        setTimeout(() => {
-           (<any>$('.draggable-icon')).draggable({
+           ($('.draggable-icon') as any).draggable({
                revert: 'invalid',
                helper: 'clone',
                stack: '.draggable-icon',
-               start: function (el, ui) {
+               start (el, ui) {
                    ui.helper.appendTo('#content');
                    $('#outerAssemblyArea').css('border', '3px dashed #39b54a');
                },
-               stop: function (el, ui) {
+               stop (el, ui) {
                    $('#outerAssemblyArea').css('border', '3px solid rgb(156, 156, 156)');
                }
            });
        });
-    };
+    }
 
 }
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index 58be3b4..f342f7f 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -141,8 +141,10 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
     const currentPipeline = this.objectProvider.makePipeline(clonedModel);
     this.editorService.recommendPipelineElement(currentPipeline, pipelineElementDomId).subscribe((result) => {
       if (result.success) {
-        this.possibleElements = cloneDeep(this.pipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements));
-        this.recommendedElements = cloneDeep(this.pipelineElementRecommendationService.populateRecommendedList(this.allElements, result.recommendedElements));
+        this.possibleElements =
+            cloneDeep(this.pipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements));
+        this.recommendedElements =
+            cloneDeep(this.pipelineElementRecommendationService.populateRecommendedList(this.allElements, result.recommendedElements));
         this.recommendationsAvailable = true;
       }
     });
diff --git a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
index 1d68604..e4501f8 100644
--- a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component, Input, OnDestroy, OnInit} from "@angular/core";
-import {EditorService} from "../../services/editor.service";
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { EditorService } from '../../services/editor.service';
 
 @Component({
   selector: 'pipeline-element-preview',
@@ -34,7 +34,7 @@ export class PipelineElementPreviewComponent implements OnInit, OnDestroy {
 
   runtimeData: ReadonlyMap<string, unknown>;
 
-  runtimeDataError: boolean = false;
+  runtimeDataError = false;
   timer: any;
 
   constructor(private editorService: EditorService) {
diff --git a/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-config.component.ts b/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-config.component.ts
index 0b64b16..a9e3064 100644
--- a/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-config.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-config.component.ts
@@ -16,13 +16,13 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {InvocablePipelineElementUnion} from "../../model/editor.model";
+import { Component, Input, OnInit } from '@angular/core';
+import { InvocablePipelineElementUnion } from '../../model/editor.model';
 import {
   PipelineElementTemplate,
   StaticPropertyUnion
-} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {PipelineElementTemplateGenerator} from "./pipeline-element-template-generator";
+} from '@streampipes/platform-services';
+import { PipelineElementTemplateGenerator } from './pipeline-element-template-generator';
 
 @Component({
   selector: 'pipeline-element-template-config',
@@ -45,7 +45,7 @@ export class PipelineElementTemplateConfigComponent implements OnInit {
     this.template.basePipelineElementAppId = this.cachedPipelineElement.appId;
     this.cachedPipelineElement.staticProperties.forEach(sp => {
       this.templateConfigs.set(sp.internalName, this.makeTemplateValue(sp));
-    })
+    });
   }
 
   handleSelection(sp: StaticPropertyUnion) {
@@ -57,7 +57,7 @@ export class PipelineElementTemplateConfigComponent implements OnInit {
   }
 
   makeTemplateValue(sp: StaticPropertyUnion) {
-    let config: any = {};
+    const config: any = {};
     config.displayed = false;
     config.editable = false;
     config.value = new PipelineElementTemplateGenerator(sp).toTemplateValue();
@@ -65,13 +65,13 @@ export class PipelineElementTemplateConfigComponent implements OnInit {
   }
 
   toggleViewPermission(sp: StaticPropertyUnion) {
-    let config: any = this.templateConfigs.get(sp.internalName);
+    const config: any = this.templateConfigs.get(sp.internalName);
     config.displayed = ! config.displayed;
     this.templateConfigs.set(sp.internalName, config);
   }
 
   toggleEditPermission(sp: StaticPropertyUnion) {
-    let config: any = this.templateConfigs.get(sp.internalName);
+    const config: any = this.templateConfigs.get(sp.internalName);
     config.editable = ! config.editable;
     this.templateConfigs.set(sp.internalName, config);
   }
diff --git a/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-generator.ts b/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-generator.ts
index 67ecfa9..72366e3 100644
--- a/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-generator.ts
+++ b/ui/src/app/editor/components/pipeline-element-template-config/pipeline-element-template-generator.ts
@@ -23,12 +23,12 @@ import {
   ColorPickerStaticProperty,
   FileStaticProperty,
   FreeTextStaticProperty,
-  OneOfStaticProperty, Pipeline,
+  OneOfStaticProperty,
   SecretStaticProperty,
   StaticPropertyAlternative,
   StaticPropertyAlternatives, StaticPropertyGroup,
   StaticPropertyUnion
-} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+} from '@streampipes/platform-services';
 
 export class PipelineElementTemplateGenerator {
 
@@ -40,7 +40,7 @@ export class PipelineElementTemplateGenerator {
     if (this.sp instanceof FreeTextStaticProperty) {
       return this.sp.value;
     } else if (this.sp instanceof OneOfStaticProperty) {
-      return this.sp.options.find(o => o.selected) ? this.sp.options.find(o => o.selected).name : "";
+      return this.sp.options.find(o => o.selected) ? this.sp.options.find(o => o.selected).name : '';
     } else if (this.sp instanceof ColorPickerStaticProperty) {
       return this.sp.selectedColor;
     } else if (this.sp instanceof SecretStaticProperty) {
@@ -70,21 +70,21 @@ export class PipelineElementTemplateGenerator {
   }
 
   addEntry(sp: StaticPropertyUnion) {
-    let entry = {};
+    const entry = {};
     entry[sp.internalName] = new PipelineElementTemplateGenerator(sp).toTemplateValue();
     return entry;
   }
 
-  addListEntry(staticProperties: Array<StaticPropertyUnion>) {
-    let values = [];
+  addListEntry(staticProperties: StaticPropertyUnion[]) {
+    const values = [];
     staticProperties.forEach(sp => {
       values.push(this.addEntry(sp));
     });
     return values;
   }
 
-  addNestedEntry(staticProperties: Array<StaticPropertyUnion>) {
-    let entry = {};
+  addNestedEntry(staticProperties: StaticPropertyUnion[]) {
+    const entry = {};
     staticProperties.forEach(sp => {
       entry[sp.internalName] = new PipelineElementTemplateGenerator(sp).toTemplateValue();
     });
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index bdcacc7..4508749 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -366,7 +366,6 @@ export class PipelineComponent implements OnInit, OnDestroy {
   currentConnectionValid(pe: PipelineElementConfig,
                          targetEdges: PipelineEdgeValidation[]) {
     const entity = pe.payload as InvocablePipelineElementUnion;
-    //return entity.streamRequirements.length === targetEdges.length && targetEdges.every(e => e.status.validationStatusType === 'COMPLETE');
     return targetEdges.every(e => e.status.validationStatusType === 'COMPLETE');
   }
 
diff --git a/ui/src/app/editor/constants/editor.constants.ts b/ui/src/app/editor/constants/editor.constants.ts
index 947423e..bfac71a 100644
--- a/ui/src/app/editor/constants/editor.constants.ts
+++ b/ui/src/app/editor/constants/editor.constants.ts
@@ -18,8 +18,8 @@
 
 export class EditorConstants {
 
-  static readonly DATA_STREAM_IDENTIFIER = "org.apache.streampipes.model.SpDataStream";
-  static readonly DATA_SET_IDENTIFIER = "org.apache.streampipes.model.SpDataSet";
-  static readonly DATA_PROCESSOR_IDENTIFIER = "org.apache.streampipes.model.graph.DataProcessorInvocation";
-  static readonly DATA_SINK_IDENTIFIER = "org.apache.streampipes.model.graph.DataSinkInvocation";
-}
\ No newline at end of file
+  static readonly DATA_STREAM_IDENTIFIER = 'org.apache.streampipes.model.SpDataStream';
+  static readonly DATA_SET_IDENTIFIER = 'org.apache.streampipes.model.SpDataSet';
+  static readonly DATA_PROCESSOR_IDENTIFIER = 'org.apache.streampipes.model.graph.DataProcessorInvocation';
+  static readonly DATA_SINK_IDENTIFIER = 'org.apache.streampipes.model.graph.DataSinkInvocation';
+}
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
index 8893063..925f246 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
+++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
@@ -16,18 +16,18 @@
  *
  */
 
-import {Component, Input} from "@angular/core";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import {JsplumbService} from "../../services/jsplumb.service";
-import {DataProcessorInvocation} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {PipelineElementConfig, PipelineElementUnion} from "../../model/editor.model";
+import { Component, Input, OnInit } from '@angular/core';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { JsplumbService } from '../../services/jsplumb.service';
+import { DataProcessorInvocation } from '@streampipes/platform-services';
+import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
 
 @Component({
   selector: 'compatible-elements',
   templateUrl: './compatible-elements.component.html',
   styleUrls: ['./compatible-elements.component.scss']
 })
-export class CompatibleElementsComponent {
+export class CompatibleElementsComponent implements OnInit {
 
   @Input()
   rawPipelineModel: PipelineElementConfig[];
@@ -43,14 +43,14 @@ export class CompatibleElementsComponent {
 
   constructor(private dialogRef: DialogRef<CompatibleElementsComponent>,
               private JsPlumbService: JsplumbService) {
-    //this.ElementIconText = ElementIconText;
+    // this.ElementIconText = ElementIconText;
   }
 
   ngOnInit() {
     this.possibleElements.sort((a, b) => a.name.localeCompare(b.name));
     this.possibleElements.forEach(pe => {
       this.styles.push(this.makeStandardStyle());
-    })
+    });
   }
 
   create(possibleElement) {
@@ -59,13 +59,13 @@ export class CompatibleElementsComponent {
   }
 
   iconText(elementId) {
-    //return this.ElementIconText.getElementIconText(elementId);
+    // return this.ElementIconText.getElementIconText(elementId);
   }
 
   hide() {
-    //this.$mdDialog.hide();
+    // this.$mdDialog.hide();
     this.dialogRef.close();
-  };
+  }
 
   isDataProcessor(possibleElement: PipelineElementUnion) {
     return possibleElement instanceof DataProcessorInvocation;
@@ -73,16 +73,16 @@ export class CompatibleElementsComponent {
 
   makeStandardStyle() {
     return {
-      background: "var(--color-bg-dialog)",
-      cursor: "auto"
-    }
+      background: 'var(--color-bg-dialog)',
+      cursor: 'auto'
+    };
   }
 
   makeHoverStyle() {
     return {
-      background: "var(--color-bg-1)",
-      cursor: "pointer"
-    }
+      background: 'var(--color-bg-1)',
+      cursor: 'pointer'
+    };
   }
 
   changeStyle(index: number, hover: boolean) {
diff --git a/ui/src/app/editor/dialog/customize/customize.component.ts b/ui/src/app/editor/dialog/customize/customize.component.ts
index bb8e2fb..badb8a4 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor/dialog/customize/customize.component.ts
@@ -25,7 +25,7 @@ import {
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
 import { JsplumbService } from '../../services/jsplumb.service';
 import {
-  DataProcessorInvocation,
+  DataProcessorInvocation, DataSinkInvocation,
   EventSchema,
   PipelineElementTemplate,
   PipelineElementTemplateConfig,
@@ -199,7 +199,8 @@ export class CustomizeComponent implements OnInit, AfterViewInit {
           this.cachedPipelineElement = pe as InvocablePipelineElementUnion;
         });
       } else {
-        this.pipelineElementTemplateService.getConfiguredDataSinkForTemplate(event.value._id, this.cachedPipelineElement)
+        this.pipelineElementTemplateService.getConfiguredDataSinkForTemplate(event.value._id,
+            this.cachedPipelineElement as DataSinkInvocation)
             .subscribe(pe => {
           this.cachedPipelineElement = pe as InvocablePipelineElementUnion;
         });
diff --git a/ui/src/app/editor/dialog/help/help.component.ts b/ui/src/app/editor/dialog/help/help.component.ts
index 1cca25c..9702202 100644
--- a/ui/src/app/editor/dialog/help/help.component.ts
+++ b/ui/src/app/editor/dialog/help/help.component.ts
@@ -16,26 +16,25 @@
  *
  */
 
-import {Component, Input} from "@angular/core";
-import {PipelineElementUnion} from "../../model/editor.model";
-import {PipelineElementService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-element.service";
-import {SpDataStream} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import {PipelineElementTypeUtils} from "../../utils/editor.utils";
+import { Component, Input, OnInit } from '@angular/core';
+import { PipelineElementUnion } from '../../model/editor.model';
+import { PipelineElementService, SpDataStream } from '@streampipes/platform-services';
+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 {
+export class HelpComponent implements OnInit {
 
   selectedTab = 0;
   pollingActive: boolean;
 
-  selectedIndex: number = 0;
+  selectedIndex = 0;
 
-  nsPrefix = "http://www.w3.org/2001/XMLSchema#";
+  nsPrefix = 'http://www.w3.org/2001/XMLSchema#';
   availableTabs = [
     {
       title: 'Fields',
@@ -60,8 +59,8 @@ export class HelpComponent {
   @Input()
   pipelineElement: PipelineElementUnion;
 
-  constructor(private PipelineElementService: PipelineElementService,
-              private DialogRef: DialogRef<HelpComponent>) {
+  constructor(private pipelineElementService: PipelineElementService,
+              private dialogRef: DialogRef<HelpComponent>) {
     this.pollingActive = true;
   }
 
@@ -77,37 +76,37 @@ export class HelpComponent {
 
   getFriendlyRuntimeType(runtimeType) {
     if (this.isNumber(runtimeType)) {
-      return "Number";
+      return 'Number';
     } else if (this.isBoolean(runtimeType)) {
-      return "Boolean";
+      return 'Boolean';
     } else {
-      return "Text";
+      return 'Text';
     }
   }
 
   isNumber(runtimeType) {
-    return (runtimeType == (this.nsPrefix + "float")) ||
-        (runtimeType == (this.nsPrefix + "integer")) ||
-        (runtimeType == (this.nsPrefix + "long")) ||
-        (runtimeType == (this.nsPrefix + "double"));
+    return (runtimeType === (this.nsPrefix + 'float')) ||
+        (runtimeType === (this.nsPrefix + 'integer')) ||
+        (runtimeType === (this.nsPrefix + 'long')) ||
+        (runtimeType === (this.nsPrefix + 'double'));
   }
 
   isBoolean(runtimeType) {
-    return runtimeType == this.nsPrefix + "boolean";
+    return runtimeType === this.nsPrefix + 'boolean';
   }
 
   close() {
     this.pollingActive = false;
     setTimeout(() => {
-      this.DialogRef.close();
+      this.dialogRef.close();
     });
   }
 
 
   filterTab(tab) {
-    let type = PipelineElementTypeUtils.fromType(this.pipelineElement);
-    let cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
-    return tab.targets.indexOf(cssShortHand) != -1;
+    const type = PipelineElementTypeUtils.fromType(this.pipelineElement);
+    const cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
+    return tab.targets.indexOf(cssShortHand) !== -1;
   }
 
 
diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
index ffe176c..b26c11e 100644
--- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
+++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component, Input} from "@angular/core";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
+import { Component, Input } from '@angular/core';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
 
 @Component({
   selector: 'missing-elements-for-tutorial',
@@ -30,11 +30,11 @@ export class MissingElementsForTutorialComponent {
   @Input()
   missingElementsForTutorial: any[];
 
-  constructor(private DialogRef: DialogRef<MissingElementsForTutorialComponent>) {
+  constructor(private dialogRef: DialogRef<MissingElementsForTutorialComponent>) {
 
   }
 
   close() {
-    this.DialogRef.close();
-  };
-}
\ No newline at end of file
+    this.dialogRef.close();
+  }
+}
diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
index 1a8cbda..af4bd59 100644
--- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
@@ -24,7 +24,7 @@ import {
   DataSinkInvocation,
   SpDataSet,
   SpDataStream
-} from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+} from '@streampipes/platform-services';
 import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
 
 @Component({
diff --git a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
index 1e7b2e2..7b8d05d 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
@@ -16,16 +16,14 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import {Message, Pipeline, PipelineCanvasMetadata} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {ObjectProvider} from "../../services/object-provider.service";
-import {EditorService} from "../../services/editor.service";
-import {PipelineService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service";
-import {ShepherdService} from "../../../services/tour/shepherd.service";
-import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {Router} from "@angular/router";
-import {PipelineCanvasMetadataService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-canvas-metadata.service";
+import { Component, Input, OnInit } from '@angular/core';
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { Message, Pipeline, PipelineCanvasMetadata, PipelineService, PipelineCanvasMetadataService } from '@streampipes/platform-services';
+import { ObjectProvider } from '../../services/object-provider.service';
+import { EditorService } from '../../services/editor.service';
+import { ShepherdService } from '../../../services/tour/shepherd.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'save-pipeline',
@@ -52,11 +50,11 @@ export class SavePipelineComponent implements OnInit {
   @Input()
   pipelineCanvasMetadata: PipelineCanvasMetadata;
 
-  saving: boolean = false;
-  saved: boolean = false;
+  saving = false;
+  saved = false;
 
-  storageError: boolean = false;
-  errorMessage: string = '';
+  storageError = false;
+  errorMessage = '';
 
   currentPipelineName: string;
 
@@ -64,11 +62,11 @@ export class SavePipelineComponent implements OnInit {
               private dialogRef: DialogRef<SavePipelineComponent>,
               private objectProvider: ObjectProvider,
               private pipelineService: PipelineService,
-              private Router: Router,
-              private ShepherdService: ShepherdService,
+              private router: Router,
+              private shepherdService: ShepherdService,
               private pipelineCanvasService: PipelineCanvasMetadataService) {
     this.pipelineCategories = [];
-    this.updateMode = "update";
+    this.updateMode = 'update';
   }
 
   ngOnInit() {
@@ -77,29 +75,29 @@ export class SavePipelineComponent implements OnInit {
       this.currentPipelineName = this.pipeline.name;
     }
 
-    this.submitPipelineForm.addControl("pipelineName", new FormControl(this.pipeline.name,
+    this.submitPipelineForm.addControl('pipelineName', new FormControl(this.pipeline.name,
         [Validators.required,
-          Validators.maxLength(40)]))
-    this.submitPipelineForm.addControl("pipelineDescription", new FormControl(this.pipeline.description,
-        [Validators.maxLength(80)]))
+          Validators.maxLength(40)]));
+    this.submitPipelineForm.addControl('pipelineDescription', new FormControl(this.pipeline.description,
+        [Validators.maxLength(80)]));
 
-    this.submitPipelineForm.controls["pipelineName"].valueChanges.subscribe(value => {
+    this.submitPipelineForm.controls['pipelineName'].valueChanges.subscribe(value => {
       this.pipeline.name = value;
     });
 
-    this.submitPipelineForm.controls["pipelineDescription"].valueChanges.subscribe(value => {
+    this.submitPipelineForm.controls['pipelineDescription'].valueChanges.subscribe(value => {
       this.pipeline.description = value;
     });
 
-    if (this.ShepherdService.isTourActive()) {
-      this.ShepherdService.trigger("enter-pipeline-name");
+    if (this.shepherdService.isTourActive()) {
+      this.shepherdService.trigger('enter-pipeline-name');
     }
 
   }
 
   triggerTutorial() {
-    if (this.ShepherdService.isTourActive()) {
-      this.ShepherdService.trigger("save-pipeline-dialog");
+    if (this.shepherdService.isTourActive()) {
+      this.shepherdService.trigger('save-pipeline-dialog');
     }
   }
 
@@ -112,12 +110,12 @@ export class SavePipelineComponent implements OnInit {
     this.pipelineService.getPipelineCategories().subscribe(pipelineCategories => {
       this.pipelineCategories = pipelineCategories;
     });
-  };
+  }
 
 
   savePipeline(switchTab) {
     let storageRequest;
-    let updateMode = this.currentModifiedPipelineId && this.updateMode === 'update';
+    const updateMode = this.currentModifiedPipelineId && this.updateMode === 'update';
 
     if (updateMode) {
       storageRequest = this.pipelineService.updatePipeline(this.pipeline);
@@ -129,7 +127,7 @@ export class SavePipelineComponent implements OnInit {
     storageRequest
         .subscribe(statusMessage => {
           if (statusMessage.success) {
-            let pipelineId: string = statusMessage.notifications[1].description;
+            const pipelineId: string = statusMessage.notifications[1].description;
             this.storePipelineCanvasMetadata(pipelineId, updateMode);
             this.afterStorage(statusMessage, switchTab, pipelineId);
           } else {
@@ -138,7 +136,7 @@ export class SavePipelineComponent implements OnInit {
         }, data => {
           this.displayErrors();
         });
-  };
+  }
 
   storePipelineCanvasMetadata(pipelineId: string,
                               updateMode: boolean) {
@@ -159,18 +157,18 @@ export class SavePipelineComponent implements OnInit {
     this.hide();
     this.editorService.makePipelineAssemblyEmpty(true);
     this.editorService.removePipelineFromCache().subscribe();
-    if (this.ShepherdService.isTourActive()) {
-      this.ShepherdService.hideCurrentStep();
+    if (this.shepherdService.isTourActive()) {
+      this.shepherdService.hideCurrentStep();
     }
     if (switchTab && !this.startPipelineAfterStorage) {
-      this.Router.navigate(["pipelines"]);
+      this.router.navigate(['pipelines']);
     }
     if (this.startPipelineAfterStorage) {
-      this.Router.navigate(["pipelines"], { queryParams: {pipeline: pipelineId}});
+      this.router.navigate(['pipelines'], { queryParams: {pipeline: pipelineId}});
     }
   }
 
   hide() {
     this.dialogRef.close();
-  };
+  }
 }
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
index 044bae6..70a5dfb 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
@@ -16,13 +16,13 @@
  *
  */
 
-import { DialogRef } from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import { ShepherdService } from "../../../services/tour/shepherd.service";
-import { Component, Input, OnInit } from "@angular/core";
-import { AppConstants } from "../../../services/app.constants";
-import { AuthService } from "../../../services/auth.service";
-import { UserAccount, UserInfo } from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model-client";
-import { ProfileService } from "../../../profile/profile.service";
+import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { ShepherdService } from '../../../services/tour/shepherd.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { AppConstants } from '../../../services/app.constants';
+import { AuthService } from '../../../services/auth.service';
+import { UserAccount, UserInfo } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model-client';
+import { ProfileService } from '../../../profile/profile.service';
 
 @Component({
   selector: 'welcome-tour',
@@ -37,20 +37,20 @@ export class WelcomeTourComponent implements OnInit {
   currentUser: UserAccount;
 
   constructor(private authService: AuthService,
-              private DialogRef: DialogRef<WelcomeTourComponent>,
-              private profileService : ProfileService,
-              private ShepherdService: ShepherdService,
+              private dialogRef: DialogRef<WelcomeTourComponent>,
+              private profileService: ProfileService,
+              private shepherdService: ShepherdService,
               public appConstants: AppConstants) {
   }
 
   ngOnInit(): void {
     this.profileService.getUserProfile(this.userInfo.username).subscribe(data => {
       this.currentUser = data;
-    })
+    });
   }
 
   startCreatePipelineTour() {
-    this.ShepherdService.startCreatePipelineTour();
+    this.shepherdService.startCreatePipelineTour();
     this.close();
   }
 
@@ -63,7 +63,7 @@ export class WelcomeTourComponent implements OnInit {
   }
 
   close() {
-    this.DialogRef.close();
+    this.dialogRef.close();
   }
 
 }
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 8725e3a..8caf08e 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -66,6 +66,7 @@ import { JsplumbFactoryService } from './services/jsplumb-factory.service';
 import { PipelineElementPreviewComponent } from './components/pipeline-element-preview/pipeline-element-preview.component';
 import { PipelineElementDiscoveryComponent } from './dialog/pipeline-element-discovery/pipeline-element-discovery.component';
 import { PipelineStyleService } from './services/pipeline-style.service';
+import { PlatformServicesModule } from '@streampipes/platform-services';
 
 @NgModule({
   imports: [
@@ -83,6 +84,7 @@ import { PipelineStyleService } from './services/pipeline-style.service';
     MatProgressSpinnerModule,
     ShowdownModule,
     ReactiveFormsModule,
+    PlatformServicesModule,
   ],
   declarations: [
     CompatibleElementsComponent,
diff --git a/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts b/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
index c9630e6..36b1a5d 100644
--- a/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
+++ b/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Pipe, PipeTransform} from "@angular/core";
-import {PipelineElementConfig} from "../model/editor.model";
+import { Pipe, PipeTransform } from '@angular/core';
+import { PipelineElementConfig } from '../model/editor.model';
 
 @Pipe({
   name: 'enabledPipelineElement',
@@ -28,6 +28,6 @@ export class EnabledPipelineElementFilter implements PipeTransform {
     if (!items) {
       return items;
     }
-    return items.filter(item => item.settings.disabled == undefined || !item.settings.disabled);
+    return items.filter(item => item.settings.disabled === undefined || !item.settings.disabled);
   }
 }
diff --git a/ui/src/app/editor/model/editor.model.ts b/ui/src/app/editor/model/editor.model.ts
index 3b71a39..8cc5059 100644
--- a/ui/src/app/editor/model/editor.model.ts
+++ b/ui/src/app/editor/model/editor.model.ts
@@ -21,13 +21,12 @@ import {
   DataSinkInvocation,
   SpDataSet,
   SpDataStream
-} from "../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {InjectionToken} from "@angular/core";
-import {EditorConstants} from "../constants/editor.constants";
+} from '@streampipes/platform-services';
+import { InjectionToken } from '@angular/core';
 
-export type PipelineElementHolder = {
-  [key: string]: Array<PipelineElementUnion>;
-};
+export interface PipelineElementHolder {
+  [key: string]: PipelineElementUnion[];
+}
 
 export interface PipelineElementPosition {
   x: number;
@@ -41,7 +40,7 @@ export enum PipelineElementConfigurationStatus {
 }
 
 export interface PipelineElementConfig {
-  type: string,
+  type: string;
   settings: {
     openCustomize: boolean,
     preview: boolean,
@@ -54,15 +53,15 @@ export interface PipelineElementConfig {
       x: number,
       y: number
     }
-  },
-  payload: PipelineElementUnion
+  };
+  payload: PipelineElementUnion;
 }
 
 export interface PipelineElementRecommendationLayout {
   skewStyle: any;
   unskewStyle: any;
   unskewStyleLabel: any;
-  type: string
+  type: string;
 }
 
 export enum PipelineElementType {
@@ -73,9 +72,9 @@ export enum PipelineElementType {
 }
 
 export interface TabsModel {
-  title: string,
-  type: PipelineElementIdentifier,
-  shorthand: string
+  title: string;
+  type: PipelineElementIdentifier;
+  shorthand: string;
 }
 
 export type PipelineElementUnion =
@@ -88,7 +87,7 @@ export type InvocablePipelineElementUnion = DataProcessorInvocation | DataSinkIn
 
 export const PIPELINE_ELEMENT_TOKEN = new InjectionToken<{}>('pipelineElement');
 
-export type PipelineElementIdentifier = "org.apache.streampipes.model.SpDataStream"
-    | "org.apache.streampipes.model.SpDataSet"
-    | "org.apache.streampipes.model.graph.DataProcessorInvocation"
-    | "org.apache.streampipes.model.graph.DataSinkInvocation";
+export type PipelineElementIdentifier = 'org.apache.streampipes.model.SpDataStream'
+    | 'org.apache.streampipes.model.SpDataSet'
+    | 'org.apache.streampipes.model.graph.DataProcessorInvocation'
+    | 'org.apache.streampipes.model.graph.DataSinkInvocation';
diff --git a/ui/src/app/editor/model/jsplumb.model.ts b/ui/src/app/editor/model/jsplumb.model.ts
index 3d9dddc..4b46941 100644
--- a/ui/src/app/editor/model/jsplumb.model.ts
+++ b/ui/src/app/editor/model/jsplumb.model.ts
@@ -17,10 +17,10 @@
  */
 
 export interface JsplumbSettings {
-  dotRadius: number,
-  lineWidth: number,
-  arrowWidth: number,
-  arrowLength: number,
-  arrowLineWidth: number,
-  curviness: number
+  dotRadius: number;
+  lineWidth: number;
+  arrowWidth: number;
+  arrowLength: number;
+  arrowLineWidth: number;
+  curviness: number;
 }
diff --git a/ui/src/app/editor/services/editor.service.ts b/ui/src/app/editor/services/editor.service.ts
index c6e58dc..7611431 100644
--- a/ui/src/app/editor/services/editor.service.ts
+++ b/ui/src/app/editor/services/editor.service.ts
@@ -28,10 +28,10 @@ import {
   PipelineModificationMessage,
   PipelinePreviewModel,
   SpDataSet,
-  SpDataStream
-} from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+  SpDataStream,
+  PlatformServicesCommons
+} from '@streampipes/platform-services';
 import { Observable, Subject } from 'rxjs';
-import { PlatformServicesCommons } from '../../../../projects/streampipes/platform-services/src/lib/apis/commons.service';
 import { PipelineElementConfig, 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';
diff --git a/ui/src/app/editor/services/jsplumb-config.service.ts b/ui/src/app/editor/services/jsplumb-config.service.ts
index d6a2c16..f43742b 100644
--- a/ui/src/app/editor/services/jsplumb-config.service.ts
+++ b/ui/src/app/editor/services/jsplumb-config.service.ts
@@ -19,8 +19,8 @@
 import { Injectable } from '@angular/core';
 import { JsplumbSettings } from '../model/jsplumb.model';
 import { BezierConnector } from '@jsplumb/connector-bezier';
-import { ArrowOverlay, EndpointTypeDescriptor } from '@jsplumb/core';
-import { ArrowOverlayOptions } from "@jsplumb/common";
+import { EndpointTypeDescriptor } from '@jsplumb/core';
+import { ArrowOverlayOptions } from '@jsplumb/common';
 
 @Injectable()
 export class JsplumbConfigService {
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index c95460b..94040bb 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -143,15 +143,9 @@ export class JsplumbService {
       jsplumbConfig.streamEndpointOptions : jsplumbConfig.sepaEndpointOptions;
     let sourceEndPoint;
     const selectedEndpoints = jsplumbBridge.selectEndpoints({source: sourceElement});
-    if (selectedEndpoints.length > 0) {
-      if (!(selectedEndpoints.get(0).isFull())) {
-        sourceEndPoint = jsplumbBridge.selectEndpoints({source: sourceElement}).get(0);
-      } else {
-        sourceEndPoint = jsplumbBridge.addEndpoint(sourceElement, options);
-      }
-    } else {
-      sourceEndPoint = jsplumbBridge.addEndpoint(sourceElement, options);
-    }
+    sourceEndPoint = selectedEndpoints.length > 0 ? !(selectedEndpoints.get(0).isFull()) ?
+        jsplumbBridge.selectEndpoints({source: sourceElement}).get(0) :
+        jsplumbBridge.addEndpoint(sourceElement, options) : jsplumbBridge.addEndpoint(sourceElement, options);
 
     const targetElement = document.getElementById(targetElementId);
     const targetEndPoint = jsplumbBridge.selectEndpoints({target: targetElement}).get(0);
@@ -191,7 +185,8 @@ export class JsplumbService {
       connectable,
       openCustomize: !(pipelineElement as any).configured,
       preview: isPreview,
-      completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet || isPreview || isCompleted) ? PipelineElementConfigurationStatus.OK : PipelineElementConfigurationStatus.INCOMPLETE,
+      completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet ||
+          isPreview || isCompleted) ? PipelineElementConfigurationStatus.OK : PipelineElementConfigurationStatus.INCOMPLETE,
       disabled: false,
       loadingStatus: false,
       displaySettings,
@@ -220,7 +215,7 @@ export class JsplumbService {
       }
       return clonedPe;
     } else {
-      const clonedPe = DataSinkInvocation.fromData(pipelineElement, new DataSinkInvocation());
+      const clonedPe = DataSinkInvocation.fromData(pipelineElement as DataSinkInvocation, new DataSinkInvocation());
       if (newElementId) {
         this.updateElementIds(clonedPe, newElementId);
       }
diff --git a/ui/src/app/editor/services/pipeline-positioning.service.ts b/ui/src/app/editor/services/pipeline-positioning.service.ts
index b4adab7..478dc1f 100644
--- a/ui/src/app/editor/services/pipeline-positioning.service.ts
+++ b/ui/src/app/editor/services/pipeline-positioning.service.ts
@@ -131,7 +131,7 @@ export class PipelinePositioningService {
     const jsPlumbBridge = this.jsplumbFactoryService.getJsplumbBridge(previewConfig);
     const g = new dagre.graphlib.Graph();
     g.setGraph({rankdir: 'LR', ranksep: previewConfig ? '50' : '100'});
-    g.setDefaultEdgeLabel(function () {
+    g.setDefaultEdgeLabel(() => {
       return {};
     });
     const nodes = $(canvasId).find(nodeIdentifier).get();
diff --git a/ui/src/app/editor/services/pipeline-style.service.ts b/ui/src/app/editor/services/pipeline-style.service.ts
index 895d577..42a14f3 100644
--- a/ui/src/app/editor/services/pipeline-style.service.ts
+++ b/ui/src/app/editor/services/pipeline-style.service.ts
@@ -18,10 +18,10 @@
 
 import { Injectable } from '@angular/core';
 import { JsplumbConfigService } from './jsplumb-config.service';
-import { EdgeValidationStatus, PipelineEdgeValidation } from '../../core-model/gen/streampipes-model';
-import { ArrowOverlay, Endpoint } from '@jsplumb/core';
+import { EdgeValidationStatus, PipelineEdgeValidation } from '@streampipes/platform-services';
+import { Endpoint } from '@jsplumb/core';
 import { JsplumbFactoryService } from './jsplumb-factory.service';
-import { PipelineElementConfig, PipelineElementConfigurationStatus } from "../model/editor.model";
+import { PipelineElementConfig, PipelineElementConfigurationStatus } from '../model/editor.model';
 
 @Injectable()
 export class PipelineStyleService {
diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts
index fa7a9fd..779b83e 100644
--- a/ui/src/app/editor/services/pipeline-validation.service.ts
+++ b/ui/src/app/editor/services/pipeline-validation.service.ts
@@ -147,7 +147,7 @@ export class PipelineValidationService {
     makeGraph(rawPipelineModel: PipelineElementConfig[], jsplumbBridge: JsplumbBridge) {
         const g = new dagre.graphlib.Graph();
         g.setGraph({rankdir: 'LR'});
-        g.setDefaultEdgeLabel(function () {
+        g.setDefaultEdgeLabel(() => {
             return {};
         });
         const nodes = $('#assembly').find('div[id^=\'jsplumb\']').get();
diff --git a/ui/src/app/editor/utils/editor.utils.ts b/ui/src/app/editor/utils/editor.utils.ts
index 3f3b9bf..ccd0691 100644
--- a/ui/src/app/editor/utils/editor.utils.ts
+++ b/ui/src/app/editor/utils/editor.utils.ts
@@ -16,18 +16,18 @@
  *
  */
 
-import {EditorConstants} from "../constants/editor.constants";
+import { EditorConstants } from '../constants/editor.constants';
 import {
   PipelineElementIdentifier,
   PipelineElementType,
   PipelineElementUnion
-} from "../model/editor.model";
+} from '../model/editor.model';
 import {
   DataProcessorInvocation,
   DataSinkInvocation,
   SpDataSet,
   SpDataStream
-} from "../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+} from '@streampipes/platform-services';
 
 export class PipelineElementTypeUtils {
 
@@ -57,13 +57,13 @@ export class PipelineElementTypeUtils {
 
   static toCssShortHand(elementType: PipelineElementType) {
     if (PipelineElementType.DataStream === elementType) {
-      return "stream";
+      return 'stream';
     } else if (PipelineElementType.DataSet === elementType) {
-      return "set";
+      return 'set';
     } else if (PipelineElementType.DataProcessor === elementType) {
-      return "sepa";
+      return 'sepa';
     } else {
-      return "action";
+      return 'action';
     }
   }
 
diff --git a/ui/src/app/editor/utils/style-sanitizer.ts b/ui/src/app/editor/utils/style-sanitizer.ts
index 39c945a..3e7e3db 100644
--- a/ui/src/app/editor/utils/style-sanitizer.ts
+++ b/ui/src/app/editor/utils/style-sanitizer.ts
@@ -16,17 +16,17 @@
  *
  */
 
-import {Pipe, PipeTransform} from '@angular/core';
-import {DomSanitizer, SafeStyle} from "@angular/platform-browser";
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 @Pipe({name: 'safeCss'})
 export class SafeCss implements PipeTransform {
 
-  constructor(private DomSanitizer: DomSanitizer) {
+  constructor(private domSanitizer: DomSanitizer) {
 
   }
 
   transform(value: any): SafeStyle {
-    return this.DomSanitizer.bypassSecurityTrustStyle(value);
+    return this.domSanitizer.bypassSecurityTrustStyle(value);
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
index 9e95aa4..20f1f3d 100644
--- a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
+++ b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
@@ -18,10 +18,9 @@
 
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { PipelineOperationsService } from '../../../pipelines/services/pipeline-operations.service';
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Pipeline } from '@streampipes/platform-services';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
-import { UserRole } from '../../../_enums/user-role.enum';
 import { UserPrivilege } from '../../../_enums/user-privilege.enum';
 
 @Component({
diff --git a/ui/src/app/pipeline-details/components/edit/quickedit.component.ts b/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
index a4f77b4..15877ec 100644
--- a/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
+++ b/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
@@ -24,22 +24,22 @@ import {
     Input,
     OnInit,
     Output
-} from "@angular/core";
-import {PipelineService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service";
+} from '@angular/core';
 import {
+    PipelineService,
     DataProcessorInvocation,
     DataSinkInvocation,
     EventSchema,
     Pipeline
-} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {PipelineElementUnion} from "../../../editor/model/editor.model";
-import {FormBuilder, FormGroup} from "@angular/forms";
+} from '@streampipes/platform-services';
+import { PipelineElementUnion } from '../../../editor/model/editor.model';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'quick-edit',
     templateUrl: './quickedit.component.html',
 })
-export class QuickEditComponent implements OnInit, AfterViewInit{
+export class QuickEditComponent implements OnInit, AfterViewInit {
 
     @Input()
     pipeline: Pipeline;
@@ -53,12 +53,12 @@ export class QuickEditComponent implements OnInit, AfterViewInit{
 
     parentForm: FormGroup;
     formValid: boolean;
-    viewInitialized: boolean = false;
+    viewInitialized = false;
 
-    isInvocable: boolean = false;
-    isDataProcessor: boolean = false;
+    isInvocable = false;
+    isDataProcessor = false;
 
-    pipelineUpdating: boolean = false;
+    pipelineUpdating = false;
 
     constructor(private pipelineService: PipelineService,
                 private fb: FormBuilder,
@@ -70,9 +70,9 @@ export class QuickEditComponent implements OnInit, AfterViewInit{
         this.parentForm = this.fb.group({
         });
 
-        this.parentForm.statusChanges.subscribe((status)=>{
+        this.parentForm.statusChanges.subscribe((status) => {
             this.formValid = this.viewInitialized && this.parentForm.valid;
-        })
+        });
     }
 
     ngAfterViewInit(): void {
@@ -99,7 +99,7 @@ export class QuickEditComponent implements OnInit, AfterViewInit{
     }
 
     updateDataProcessor() {
-        let dataProcessors: DataProcessorInvocation[] = [];
+        const dataProcessors: DataProcessorInvocation[] = [];
         this.pipeline.sepas.forEach(p => {
            if (p.dom === this._selectedElement.dom) {
                dataProcessors.push(this._selectedElement as DataProcessorInvocation);
@@ -111,7 +111,7 @@ export class QuickEditComponent implements OnInit, AfterViewInit{
     }
 
     updateDataSink() {
-        let dataSinks: DataSinkInvocation[] = [];
+        const dataSinks: DataSinkInvocation[] = [];
         this.pipeline.actions.forEach(p => {
             if (p.dom === this._selectedElement.dom) {
                 dataSinks.push(this._selectedElement as DataSinkInvocation);
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
index d010efa..184c137 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
@@ -16,10 +16,10 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {PipelineElementUnion} from "../../../editor/model/editor.model";
-import {Pipeline} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {PipelineElementTypeUtils} from "../../../editor/utils/editor.utils";
+import { Component, Input, OnInit } from '@angular/core';
+import { PipelineElementUnion } from '../../../editor/model/editor.model';
+import { Pipeline } from '@streampipes/platform-services';
+import { PipelineElementTypeUtils } from '../../../editor/utils/editor.utils';
 
 @Component({
     selector: 'pipeline-elements-row',
@@ -33,7 +33,7 @@ export class PipelineElementsRowComponent implements OnInit {
     pipeline: Pipeline;
 
     @Input()
-    showDescription: boolean = true;
+    showDescription = true;
 
     _element: PipelineElementUnion;
 
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
index 3f62442..b6f1b76 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import {Component, Input} from "@angular/core";
-import {PipelineElementUnion} from "../../../editor/model/editor.model";
-import {Pipeline} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, Input } from '@angular/core';
+import { PipelineElementUnion } from '../../../editor/model/editor.model';
+import { Pipeline } from '@streampipes/platform-services';
 
 @Component({
   selector: 'pipeline-elements',
@@ -30,7 +30,7 @@ export class PipelineElementsComponent {
   pipeline: Pipeline;
 
   @Input()
-  selectedElement: PipelineElementUnion
+  selectedElement: PipelineElementUnion;
 
   constructor() {
 
diff --git a/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts b/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
index ea6782d..ec264a3 100644
--- a/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
+++ b/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
@@ -19,4 +19,4 @@
 export interface HistoricalMonitoringData {
   name: string;
   value: number;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
index 0b6d86f..ea83eda 100644
--- a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
@@ -23,7 +23,7 @@ import {
   PipelineMonitoringInfo,
   SpDataSet, SpDataStream
 } from '@streampipes/platform-services';
-import { PipelineMonitoringService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-monitoring.service';
+import { PipelineMonitoringService } from '@streampipes/platform-services';
 import { PipelineOperationsService } from '../../../pipelines/services/pipeline-operations.service';
 import { AuthService } from '../../../services/auth.service';
 import { UserPrivilege } from '../../../_enums/user-privilege.enum';
diff --git a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
index 6b5ffaf..58656bb 100644
--- a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import {
   DataProcessorInvocation, DataSinkInvocation,
@@ -80,16 +80,21 @@ export class PipelineElementStatisticsComponent implements OnInit {
   ngOnInit(): void {
     this.producedMessagesAvailable = this.pipelineElementMonitoringInfo.producedMessageInfoExists;
     this.consumedMessagesFirstStreamAvailable = this.pipelineElementMonitoringInfo.consumedMessageInfoExists;
-    this.consumedMessagesSecondStreamAvailable = this.pipelineElementMonitoringInfo.consumedMessageInfoExists && this.pipelineElementMonitoringInfo.consumedMessagesInfos.length > 1;
+    this.consumedMessagesSecondStreamAvailable =
+        this.pipelineElementMonitoringInfo.consumedMessageInfoExists && this.pipelineElementMonitoringInfo.consumedMessagesInfos.length > 1;
   }
 
   updateMonitoringInfo() {
     if (this.pipelineElementMonitoringInfo.consumedMessageInfoExists) {
       const consumedMessages = this.pipelineElementMonitoringInfo.consumedMessagesInfos;
       this.consumedMessagesFirstInputStream = consumedMessages[0].consumedMessagesSincePipelineStart + ' / ' + consumedMessages[0].lag;
-      this.consumedMessagesSecondInputStream = consumedMessages.length > 1 ? consumedMessages[1].consumedMessagesSincePipelineStart + ' / ' + consumedMessages[1].lag : this.notAvailable;
+      this.consumedMessagesSecondInputStream =
+          consumedMessages.length > 1 ? consumedMessages[1].consumedMessagesSincePipelineStart +
+              ' / ' + consumedMessages[1].lag : this.notAvailable;
       this.consumedMessagesFirstStreamBandColor = consumedMessages[0].lag > 10 ? this.warningBandColor : this.okBandColor;
-      this.consumedMessagesSecondStreamBandColor = (consumedMessages.length > 1 ? (consumedMessages[1].lag > 10 ? this.warningBandColor : this.okBandColor) : this.deactivatedBandColor);
+      this.consumedMessagesSecondStreamBandColor =
+          (consumedMessages.length > 1 ? (consumedMessages[1].lag > 10 ? this.warningBandColor : this.okBandColor) :
+              this.deactivatedBandColor);
 
       const consumedMessage = {'count': consumedMessages[0].consumedMessagesSincePipelineStart};
       this.makeHistoricData(consumedMessage, this.consumedMessagesFirstStreamLastValue, this.historicFirstConsumedInputValues);
diff --git a/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts b/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
index f99def5..56eb2db 100644
--- a/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
+++ b/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
@@ -16,9 +16,8 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {PipelineService} from "../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service";
-import {Pipeline, PipelineStatusMessage} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, Input, OnInit } from '@angular/core';
+import { Pipeline, PipelineStatusMessage, PipelineService } from '@streampipes/platform-services';
 
 @Component({
     selector: 'pipeline-status',
diff --git a/ui/src/app/pipeline-details/pipeline-details.component.ts b/ui/src/app/pipeline-details/pipeline-details.component.ts
index 392db40..9350874 100644
--- a/ui/src/app/pipeline-details/pipeline-details.component.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.component.ts
@@ -16,13 +16,11 @@
  *
  */
 
-import { Component, Inject, OnInit } from '@angular/core';
-import { PipelineService } from '../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
-import { Pipeline } from '../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Component, OnInit } from '@angular/core';
+import { Pipeline, PipelineService } from '@streampipes/platform-services';
 import { PipelineElementUnion } from '../editor/model/editor.model';
 import { ActivatedRoute } from '@angular/router';
 import { AuthService } from '../services/auth.service';
-import { UserRole } from '../_enums/user-role.enum';
 import { UserPrivilege } from '../_enums/user-privilege.enum';
 
 @Component({
diff --git a/ui/src/app/pipeline-details/pipeline-details.module.ts b/ui/src/app/pipeline-details/pipeline-details.module.ts
index f1dfbb2..e798733 100644
--- a/ui/src/app/pipeline-details/pipeline-details.module.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.module.ts
@@ -16,28 +16,29 @@
  *
  */
 
-import {NgModule} from "@angular/core";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {MatTabsModule} from "@angular/material/tabs";
-import {MatButtonModule} from "@angular/material/button";
-import {CustomMaterialModule} from "../CustomMaterial/custom-material.module";
-import {CommonModule} from "@angular/common";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
-import {PipelineDetailsComponent} from "./pipeline-details.component";
-import {PipelinePreviewComponent} from "./components/preview/pipeline-preview.component";
-import {EditorModule} from "../editor/editor.module";
-import {PipelineActionsComponent} from "./components/actions/pipeline-actions.component";
-import {PipelineStatusComponent} from "./components/status/pipeline-status.component";
-import {PipelineElementsComponent} from "./components/elements/pipeline-elements.component";
-import {PipelineElementsRowComponent} from "./components/elements/pipeline-elements-row.component";
-import {QuickEditComponent} from "./components/edit/quickedit.component";
-import {CoreUiModule} from "../core-ui/core-ui.module";
-import {PipelineMonitoringComponent} from "./components/monitoring/pipeline-monitoring.component";
-import {PipelineElementStatisticsComponent} from "./components/monitoring/statistics/pipeline-element-statistics.component";
-import {NgxChartsModule} from "@swimlane/ngx-charts";
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
+import { CommonModule } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { PipelineDetailsComponent } from './pipeline-details.component';
+import { PipelinePreviewComponent } from './components/preview/pipeline-preview.component';
+import { EditorModule } from '../editor/editor.module';
+import { PipelineActionsComponent } from './components/actions/pipeline-actions.component';
+import { PipelineStatusComponent } from './components/status/pipeline-status.component';
+import { PipelineElementsComponent } from './components/elements/pipeline-elements.component';
+import { PipelineElementsRowComponent } from './components/elements/pipeline-elements-row.component';
+import { QuickEditComponent } from './components/edit/quickedit.component';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { PipelineMonitoringComponent } from './components/monitoring/pipeline-monitoring.component';
+import { PipelineElementStatisticsComponent } from './components/monitoring/statistics/pipeline-element-statistics.component';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { BarchartWidgetComponent } from './components/monitoring/widget/barchart/barchart-widget.component';
 import { StatusWidgetComponent } from './components/monitoring/widget/status/status-widget.component';
+import { PlatformServicesModule } from '@streampipes/platform-services';
 
 @NgModule({
   imports: [
@@ -52,7 +53,8 @@ import { StatusWidgetComponent } from './components/monitoring/widget/status/sta
     NgxChartsModule,
     EditorModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    PlatformServicesModule
   ],
   declarations: [
     PipelineActionsComponent,
diff --git a/ui/src/app/pipelines/category-already-in-pipeline.filter.ts b/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
index dab9c14..6f44912 100644
--- a/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
+++ b/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Pipe, PipeTransform} from "@angular/core";
-import {Pipeline} from "../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Pipe, PipeTransform } from '@angular/core';
+import { Pipeline } from '@streampipes/platform-services';
 
 @Pipe({
 	name: 'categoryAlreadyInPipelineFilter',
@@ -30,4 +30,4 @@ export class CategoryAlreadyInPipelinePipe implements PipeTransform {
 			return !pipeline.pipelineCategories || !(pipeline.pipelineCategories.some(pc => pc === categoryId));
 		});
 	}
-};
+}
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
index d833f8e..a9a5446 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Pipeline } from '@streampipes/platform-services';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { PipelineOperationsService } from '../../services/pipeline-operations.service';
 import { MatTableDataSource } from '@angular/material/table';
diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
index 425e01e..345dd2f 100644
--- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
@@ -17,8 +17,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
-import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
+import { Pipeline, PipelineService } from '@streampipes/platform-services';
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
 
 @Component({
diff --git a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
index e95bb4a..12a8401 100644
--- a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
@@ -20,7 +20,7 @@ import { Component } from '@angular/core';
 import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
 import { forkJoin } from 'rxjs';
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Pipeline } from '@streampipes/platform-services';
 
 @Component({
     selector: 'sp-import-pipeline-dialog',
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
index a7bf803..85ee49a 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
@@ -17,8 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { Pipeline, PipelineCategory } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
-import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
+import { Pipeline, PipelineCategory, PipelineService } from '@streampipes/platform-services';
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
 
 @Component({
@@ -45,17 +44,12 @@ export class PipelineCategoriesDialogComponent implements OnInit {
     @Input()
     systemPipelines: Pipeline[];
 
-    // getPipelineCategories;
-
     constructor(private pipelineService: PipelineService,
                 private dialogRef: DialogRef<PipelineCategoriesDialogComponent>) {
         this.addSelected = false;
         this.addPipelineToCategorySelected = [];
         this.categoryDetailsVisible = [];
         this.selectedPipelineId = '';
-        // this.getPipelineCategories = getPipelineCategories;
-        // this.refreshPipelines = refreshPipelines;
-
     }
 
     ngOnInit() {
diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
index 2c9bb9c..13818ef 100644
--- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
@@ -17,9 +17,8 @@
  */
 
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Pipeline, PipelineService } from '@streampipes/platform-services';
 import { Component, Input, OnInit } from '@angular/core';
-import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
 
 
 @Component({
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
index a1b4eae..50de914 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
@@ -18,8 +18,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
-import { Pipeline } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
-import { PipelineService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
+import { Pipeline, PipelineService } from '@streampipes/platform-services';
 
 @Component({
   selector: 'sp-start-all-pipelines-dialog',
diff --git a/ui/src/app/pipelines/pipeline-category.filter.ts b/ui/src/app/pipelines/pipeline-category.filter.ts
index fd6678a..7117126 100644
--- a/ui/src/app/pipelines/pipeline-category.filter.ts
+++ b/ui/src/app/pipelines/pipeline-category.filter.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Pipe, PipeTransform} from "@angular/core";
-import {Pipeline} from "../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Pipe, PipeTransform } from '@angular/core';
+import { Pipeline } from '@streampipes/platform-services';
 
 @Pipe({
 	name: 'pipelineInCategoryFilter',
@@ -30,4 +30,4 @@ export class PipelineInCategoryPipe implements PipeTransform {
 			return pipeline.pipelineCategories && pipeline.pipelineCategories.some(pc => pc === categoryId);
 		});
 	}
-};
+}
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index c958d4f..3bbddbf 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -18,8 +18,7 @@
 
 import * as FileSaver from 'file-saver';
 import { Component, OnInit } from '@angular/core';
-import { PipelineService } from '../../../projects/streampipes/platform-services/src/lib/apis/pipeline.service';
-import { Pipeline, PipelineCategory } from '../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Pipeline, PipelineCategory, PipelineService } from '@streampipes/platform-services';
 import { DialogService } from '../core-ui/dialog/base-dialog/base-dialog.service';
 import { PanelType } from '../core-ui/dialog/base-dialog/base-dialog.model';
 import { ImportPipelineDialogComponent } from './dialog/import-pipeline/import-pipeline-dialog.component';
@@ -29,7 +28,6 @@ import { PipelineCategoriesDialogComponent } from './dialog/pipeline-categories/
 import { zip } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { AuthService } from '../services/auth.service';
-import { UserRole } from '../_enums/user-role.enum';
 import { UserPrivilege } from '../_enums/user-privilege.enum';
 
 @Component({
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index 5a207a9..c8cc8ff 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -38,6 +38,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { PipelineNotificationsComponent } from './dialog/pipeline-notifications/pipeline-notifications.component';
 import { CoreUiModule } from '../core-ui/core-ui.module';
+import { PlatformServicesModule } from '@streampipes/platform-services';
 
 @NgModule({
   imports: [
@@ -50,7 +51,8 @@ import { CoreUiModule } from '../core-ui/core-ui.module';
     MatProgressSpinnerModule,
     MatSortModule,
     MatTableModule,
-    CoreUiModule
+    CoreUiModule,
+    PlatformServicesModule,
   ],
   declarations: [
     DeletePipelineDialogComponent,
diff --git a/ui/src/app/pipelines/services/pipeline-operations.service.ts b/ui/src/app/pipelines/services/pipeline-operations.service.ts
index d53abca..1e9ed7c 100644
--- a/ui/src/app/pipelines/services/pipeline-operations.service.ts
+++ b/ui/src/app/pipelines/services/pipeline-operations.service.ts
@@ -18,11 +18,10 @@
 
 import { ShepherdService } from '../../services/tour/shepherd.service';
 import { EventEmitter, Injectable } from '@angular/core';
-import { PipelineService } from '@streampipes/platform-services';
+import { Pipeline, PipelineService } from '@streampipes/platform-services';
 import { PanelType } from '../../core-ui/dialog/base-dialog/base-dialog.model';
 import { DialogService } from '../../core-ui/dialog/base-dialog/base-dialog.service';
 import { PipelineStatusDialogComponent } from '../dialog/pipeline-status/pipeline-status-dialog.component';
-import { Pipeline } from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
 import { DeletePipelineDialogComponent } from '../dialog/delete-pipeline/delete-pipeline-dialog.component';
 import { DialogRef } from '../../core-ui/dialog/base-dialog/dialog-ref';
 import { Router } from '@angular/router';
diff --git a/ui/src/assets/img/sp/favicon.ico b/ui/src/assets/img/sp/favicon.ico
new file mode 100644
index 0000000..c0dc763
Binary files /dev/null and b/ui/src/assets/img/sp/favicon.ico differ