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/01 21:08:37 UTC

[incubator-streampipes] branch experimental-module-federation updated: [WIP] Add platform-service to core-ui module

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

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


The following commit(s) were added to refs/heads/experimental-module-federation by this push:
     new 8901f82  [WIP] Add platform-service to core-ui module
8901f82 is described below

commit 8901f82b561c5d63d9e34576df4bbf731323fdc9
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Feb 1 22:08:24 2022 +0100

    [WIP] Add platform-service to core-ui module
---
 ui/src/app/constants/constants.module.ts           | 25 --------
 ui/src/app/constants/general.constants.ts          | 24 --------
 ui/src/app/core-model/base/Tuple2.ts               |  2 +-
 ui/src/app/core-model/coco/Category.ts             |  1 -
 ui/src/app/core-model/coco/Image.ts                | 10 +--
 .../core-model/measurement-unit/MeasurementUnit.ts |  2 +-
 .../datalake/datalake-rest.service.ts              |  1 -
 .../semantic-type/semantic-type-utils.service.ts   |  2 +-
 .../template/PipelineInvocationBuilder.ts          |  2 +-
 ui/src/app/core-ui/core-ui.module.ts               | 17 +++--
 .../dialog/base-dialog/base-dialog.component.ts    | 12 ++--
 .../dialog/base-dialog/base-dialog.config.ts       |  6 +-
 .../dialog/base-dialog/base-dialog.model.ts        | 10 +--
 .../dialog/base-dialog/base-dialog.service.ts      | 34 +++++-----
 .../app/core-ui/dialog/base-dialog/dialog-ref.ts   | 14 ++---
 .../confirm-dialog/confirm-dialog.component.ts     |  4 +-
 .../dialog/panel-dialog/panel-dialog.component.ts  | 28 ++++-----
 .../dialog/panel-dialog/panel-dialog.config.ts     | 18 +++---
 .../standard-dialog/standard-dialog.component.ts   | 10 +--
 .../standard-dialog/standard-dialog.config.ts      | 20 +++---
 .../image-annotations.component.ts                 |  2 +-
 .../image-labeling/image-labeling.component.ts     |  4 +-
 .../image/image-viewer/image-viewer.component.ts   |  3 +-
 ui/src/app/core-ui/image/image.component.ts        |  2 +-
 .../image/services/BrushLabeling.service.ts        |  2 +-
 .../image/services/PolygonLabeling.service.ts      |  2 +-
 .../image/services/ReactLabeling.service.ts        |  2 +-
 ui/src/app/core-ui/image/services/color.service.ts |  2 +
 ui/src/app/core-ui/image/util/color.util.ts        | 14 +++--
 .../classification/imageClassification.ts          | 10 ++-
 .../configure-labels/configure-labels.component.ts |  2 +-
 .../label-list-item/label-list-item.component.ts   |  2 +-
 .../select-label/select-label.component.ts         |  2 +-
 .../app/core-ui/labels/services/label.service.ts   |  3 +-
 .../object-permission-dialog.component.ts          | 10 +--
 .../pipeline-started-status.component.ts           |  2 +-
 .../split-section/split-section.component.ts       |  2 +-
 .../base/abstract-static-property.ts               |  2 +-
 .../base/abstract-validated-static-property.ts     | 14 ++---
 .../filter/display-recommended.pipe.ts             |  2 +-
 .../core-ui/static-properties/input.validator.ts   | 14 ++---
 .../static-any-input/static-any-input.component.ts |  8 +--
 .../static-code-input.component.ts                 |  2 +-
 .../static-collection.component.ts                 |  2 +-
 .../static-file-input.component.ts                 |  3 +-
 .../static-free-input.component.ts                 | 10 +--
 .../static-group/static-group.component.ts         | 12 ++--
 .../static-mapping-nary.component.ts               | 28 ++++-----
 .../static-mapping-unary.component.ts              | 14 ++---
 .../static-mapping/static-mapping.ts               | 21 +++----
 .../static-one-of-input.component.ts               |  2 +-
 .../static-property-util.service.ts                | 72 +++++++++-------------
 ...tatic-runtime-resolvable-any-input.component.ts |  6 +-
 .../base-runtime-resolvable-input.ts               |  6 +-
 .../base-runtime-resolvable-selection-input.ts     |  6 +-
 .../runtime-resolvable.service.ts                  |  7 +--
 ...tic-runtime-resolvable-oneof-input.component.ts |  2 +-
 .../static-tree-input.component.ts                 |  2 +-
 .../static-secret-input.component.ts               | 22 ++++---
 .../static-slide-toggle.component.ts               |  4 +-
 .../core/components/feedback/feedback.component.ts | 18 +++---
 ui/src/app/core/core.module.ts                     | 42 ++++++-------
 .../monitoring/pipeline-monitoring.component.ts    |  3 +-
 .../pipeline-element-statistics.component.ts       | 54 ++++++++--------
 .../widget/barchart/barchart-widget.component.html |  0
 .../widget/barchart/barchart-widget.component.scss |  0
 .../widget/barchart/barchart-widget.component.ts   |  8 +--
 .../widget/status/status-widget.component.css      |  0
 .../widget/status/status-widget.component.html     |  0
 .../widget/status/status-widget.component.ts       | 12 ++--
 .../pipeline-details/pipeline-details.module.ts    |  8 ++-
 71 files changed, 325 insertions(+), 389 deletions(-)

diff --git a/ui/src/app/constants/constants.module.ts b/ui/src/app/constants/constants.module.ts
deleted file mode 100644
index b915957..0000000
--- a/ui/src/app/constants/constants.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import * as angular from 'angular';
-
-import apiConstants from './general.constants'
-
-export default angular.module('sp.constants', [])
-	.constant("apiConstants", apiConstants)
-	.name;
\ No newline at end of file
diff --git a/ui/src/app/constants/general.constants.ts b/ui/src/app/constants/general.constants.ts
deleted file mode 100644
index 9a76d54..0000000
--- a/ui/src/app/constants/general.constants.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-export default {
-    url: "http://localhost",
-    port: "8080",
-    contextPath: "/streampipes-backend",
-    api: "/api/v2"
-}
\ No newline at end of file
diff --git a/ui/src/app/core-model/base/Tuple2.ts b/ui/src/app/core-model/base/Tuple2.ts
index ba85988..66a522c 100644
--- a/ui/src/app/core-model/base/Tuple2.ts
+++ b/ui/src/app/core-model/base/Tuple2.ts
@@ -18,4 +18,4 @@
 export interface Tuple2<A, B> {
     a: A;
     b: B;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-model/coco/Category.ts b/ui/src/app/core-model/coco/Category.ts
index 43ee600..f066776 100644
--- a/ui/src/app/core-model/coco/Category.ts
+++ b/ui/src/app/core-model/coco/Category.ts
@@ -18,7 +18,6 @@
 
 export class Category {
 
-
   constructor(id: number, name: string, supercategory: string, label_name: string) {
     this.id = id;
     this.name = name;
diff --git a/ui/src/app/core-model/coco/Image.ts b/ui/src/app/core-model/coco/Image.ts
index e6b5c5f..51aeee3 100644
--- a/ui/src/app/core-model/coco/Image.ts
+++ b/ui/src/app/core-model/coco/Image.ts
@@ -17,12 +17,12 @@
  */
 
 export class Image {
-  id: Number;
-  width: Number;
-  height: Number;
+  id: number;
+  width: number;
+  height: number;
   file_name: Date;
-  license: Number;
+  license: number;
   flickr_url: Date;
   coco_url: Date;
   date_captured: Date;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-model/measurement-unit/MeasurementUnit.ts b/ui/src/app/core-model/measurement-unit/MeasurementUnit.ts
index 5d25a5e..7cfa1d8 100644
--- a/ui/src/app/core-model/measurement-unit/MeasurementUnit.ts
+++ b/ui/src/app/core-model/measurement-unit/MeasurementUnit.ts
@@ -27,4 +27,4 @@ export interface MeasurementUnit {
 export interface MeasurementUnitMultiplier {
     offset: number;
     multiplier: number;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-services/datalake/datalake-rest.service.ts b/ui/src/app/core-services/datalake/datalake-rest.service.ts
index 04819a6..f42a896 100644
--- a/ui/src/app/core-services/datalake/datalake-rest.service.ts
+++ b/ui/src/app/core-services/datalake/datalake-rest.service.ts
@@ -19,7 +19,6 @@
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-// import { DataLakeMeasure, SpQueryResult } from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
 import { map } from 'rxjs/operators';
 import { DatalakeQueryParameters, DataLakeMeasure, SpQueryResult } from '@streampipes/platform-services';
 
diff --git a/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts b/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
index d4ddb9a..ca4020c 100644
--- a/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
+++ b/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
@@ -17,7 +17,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { EventProperty } from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { EventProperty } from '@streampipes/platform-services';
 
 @Injectable()
 export class SemanticTypeUtilsService {
diff --git a/ui/src/app/core-services/template/PipelineInvocationBuilder.ts b/ui/src/app/core-services/template/PipelineInvocationBuilder.ts
index d4ede34..57c094a 100644
--- a/ui/src/app/core-services/template/PipelineInvocationBuilder.ts
+++ b/ui/src/app/core-services/template/PipelineInvocationBuilder.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  *
  */
-import { FreeTextStaticProperty, MappingPropertyUnary, PipelineTemplateInvocation } from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { FreeTextStaticProperty, MappingPropertyUnary, PipelineTemplateInvocation } from '@streampipes/platform-services';
 
 export class PipelineInvocationBuilder {
 
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 6f1feab..3c999cc 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -73,9 +73,7 @@ import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { ConfigureLabelsComponent } from './labels/components/configure-labels/configure-labels.component';
 import { LabelListItemComponent } from './labels/components/label-list-item/label-list-item.component';
-import { StatusWidgetComponent } from './widget/status/status-widget.component';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { BarchartWidgetComponent } from './widget/barchart/barchart-widget.component';
 import { ErrorHintComponent } from './error-hint/error-hint.component';
 import { AddToCollectionComponent } from './static-properties/static-collection/add-to-collection/add-to-collection.component';
 import { PipelineStartedStatusComponent } from './pipeline/pipeline-started-status/pipeline-started-status.component';
@@ -84,7 +82,10 @@ import { ObjectPermissionDialogComponent } from './object-permission-dialog/obje
 import { StaticSlideToggleComponent } from './static-properties/static-slide-toggle/static-slide-toggle.component';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { StaticRuntimeResolvableTreeInputComponent } from './static-properties/static-runtime-resolvable-tree-input/static-tree-input.component';
-import { MatTreeModule } from "@angular/material/tree";
+import { MatTreeModule } from '@angular/material/tree';
+import { PlatformServicesModule } from '@streampipes/platform-services';
+import { BarchartWidgetComponent } from '../pipeline-details/components/monitoring/widget/barchart/barchart-widget.component';
+import { StatusWidgetComponent } from '../pipeline-details/components/monitoring/widget/status/status-widget.component';
 
 @NgModule({
   imports: [
@@ -107,13 +108,13 @@ import { MatTreeModule } from "@angular/material/tree";
     MatSlideToggleModule,
     MatChipsModule,
     MatTreeModule,
+    PlatformServicesModule,
     PortalModule,
     OverlayModule,
     QuillModule.forRoot(),
     MatTreeModule
   ],
   declarations: [
-    BarchartWidgetComponent,
     ConfigureLabelsComponent,
     ConfirmDialogComponent,
     DisplayRecommendedPipe,
@@ -145,11 +146,10 @@ import { MatTreeModule } from "@angular/material/tree";
     StaticRuntimeResolvableOneOfInputComponent,
     StaticRuntimeResolvableTreeInputComponent,
     StaticSlideToggleComponent,
-    StatusWidgetComponent,
     LabelListItemComponent,
     ErrorHintComponent,
     AddToCollectionComponent,
-    PipelineStartedStatusComponent
+    PipelineStartedStatusComponent,
   ],
   providers: [
     MatDatepickerModule,
@@ -189,11 +189,10 @@ import { MatTreeModule } from "@angular/material/tree";
     StaticRuntimeResolvableOneOfInputComponent,
     StaticSlideToggleComponent,
     ImageViewerComponent,
-    StatusWidgetComponent,
-    BarchartWidgetComponent,
     ErrorHintComponent,
     PipelineStartedStatusComponent,
-    SplitSectionComponent
+    SplitSectionComponent,
+
   ]
 })
 export class CoreUiModule {
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts
index 42ca2da..06199db0 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts
+++ b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts
@@ -16,23 +16,23 @@
  *
  */
 
-import { EventEmitter, Input, Output, ViewChild, Directive } from "@angular/core";
-import {CdkPortalOutlet, ComponentPortal, Portal} from "@angular/cdk/portal";
-import {DialogRef} from "./dialog-ref";
+import { EventEmitter, Input, Output, ViewChild, Directive } from '@angular/core';
+import { CdkPortalOutlet, ComponentPortal, Portal } from '@angular/cdk/portal';
+import { DialogRef } from './dialog-ref';
 
 @Directive()
 export abstract class BaseDialogComponent<T> {
 
   @Input()
-  dialogTitle = "";
+  dialogTitle = '';
 
   @Input()
   comp: ComponentPortal<T>;
 
   @Output()
-  containerEvent = new EventEmitter<{ key: "CLOSE" }>();
+  containerEvent = new EventEmitter<{ key: 'CLOSE' }>();
 
-  @ViewChild("portal", {read: CdkPortalOutlet, static: true})
+  @ViewChild('portal', {read: CdkPortalOutlet, static: true})
   portal: CdkPortalOutlet;
 
   @Input()
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts
index a6b43cf..b7a96b5 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts
+++ b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts
@@ -16,11 +16,11 @@
  *
  */
 
-import {Overlay} from "@angular/cdk/overlay";
+import { Overlay } from '@angular/cdk/overlay';
 
 export interface BaseDialogConfig {
 
   getPosition(overlay: Overlay);
 
-  getOverlayConfig(config: any, positionStrategy: any)
-}
\ No newline at end of file
+  getOverlayConfig(config: any, positionStrategy: any);
+}
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts
index 25f37e0..d9c4c42 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts
+++ b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {PanelDialogComponent} from "../panel-dialog/panel-dialog.component";
-import {StandardDialogComponent} from "../standard-dialog/standard-dialog.component";
+import { PanelDialogComponent } from '../panel-dialog/panel-dialog.component';
+import { StandardDialogComponent } from '../standard-dialog/standard-dialog.component';
 
 export type BaseDialogComponentUnion = PanelDialogComponent<unknown> | StandardDialogComponent<unknown>;
 
@@ -36,6 +36,6 @@ export interface DialogConfig {
 }
 
 export interface DialogPanelConfig {
-  maxWidth: string,
-  height: string,
-}
\ No newline at end of file
+  maxWidth: string;
+  height: string;
+}
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts
index aea358f..a1e456b 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts
+++ b/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts
@@ -16,20 +16,20 @@
  *
  */
 
-import {ComponentType, Overlay, OverlayRef} from "@angular/cdk/overlay";
-import {ComponentRef, Injectable, Injector} from "@angular/core";
-import {DialogRef} from "./dialog-ref";
-import {ComponentPortal, PortalInjector} from "@angular/cdk/portal";
-import {BaseDialogComponent} from "./base-dialog.component";
-import {BaseDialogComponentUnion, DialogConfig, PanelType} from "./base-dialog.model";
-import {PanelDialogComponent} from "../panel-dialog/panel-dialog.component";
-import {StandardDialogComponent} from "../standard-dialog/standard-dialog.component";
-import {BaseDialogConfig} from "./base-dialog.config";
-import {PanelDialogConfig} from "../panel-dialog/panel-dialog.config";
-import {StandardDialogConfig} from "../standard-dialog/standard-dialog.config";
+import { ComponentType, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentRef, Injectable, Injector } from '@angular/core';
+import { DialogRef } from './dialog-ref';
+import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { BaseDialogComponent } from './base-dialog.component';
+import { BaseDialogComponentUnion, DialogConfig, PanelType } from './base-dialog.model';
+import { PanelDialogComponent } from '../panel-dialog/panel-dialog.component';
+import { StandardDialogComponent } from '../standard-dialog/standard-dialog.component';
+import { BaseDialogConfig } from './base-dialog.config';
+import { PanelDialogConfig } from '../panel-dialog/panel-dialog.config';
+import { StandardDialogConfig } from '../standard-dialog/standard-dialog.config';
 
 @Injectable({
-  providedIn: "root"
+  providedIn: 'root'
 })
 export class DialogService {
 
@@ -39,7 +39,7 @@ export class DialogService {
 
   public open<T>(component: ComponentType<T>,
                  config?: DialogConfig): DialogRef<T> {
-    config = config || {width: "60vw", title: "", panelType: PanelType.SLIDE_IN_PANEL};
+    config = config || {width: '60vw', title: '', panelType: PanelType.SLIDE_IN_PANEL};
 
     const positionStrategy = this.getPositionStrategy(config.panelType);
     const panelConfig: BaseDialogConfig = this.getConfig(config.panelType);
@@ -59,7 +59,7 @@ export class DialogService {
     if (config.data) {
       Object.keys(config.data).forEach(key => {
         dialogRef.componentInstance[key] = config.data[key];
-      })
+      });
     }
 
     this.applyDialogProperties(panelDialogContainerRef, overlay, config);
@@ -77,7 +77,7 @@ export class DialogService {
                                 overlayRef: OverlayRef,
                                 config: DialogConfig) {
     panelDialogComponentRef.instance.containerEvent.subscribe(e => {
-      if (e.key === "CLOSE") {
+      if (e.key === 'CLOSE') {
         overlayRef.dispose();
       }
     });
@@ -88,7 +88,7 @@ export class DialogService {
 
   getPositionStrategy(panelType: PanelType) {
     return this.getConfig(panelType).getPosition(this.overlay);
-  };
+  }
 
   getPanel(panelType: PanelType): ComponentType<BaseDialogComponentUnion> {
     return panelType == PanelType.SLIDE_IN_PANEL ? PanelDialogComponent : StandardDialogComponent;
@@ -99,4 +99,4 @@ export class DialogService {
         new StandardDialogConfig();
   }
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts b/ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts
index 10cd8b6..74869aa 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts
+++ b/ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts
@@ -16,12 +16,12 @@
  *
  */
 
-import {ComponentRef} from "@angular/core";
-import {OverlayRef} from "@angular/cdk/overlay";
-import {Observable, Subject} from "rxjs";
-import {BaseDialogComponentUnion} from "./base-dialog.model";
-import {OverlaySizeConfig} from "@angular/cdk/overlay/overlay-ref";
-import {OverlayConfig} from "@angular/cdk/overlay/overlay-config";
+import { ComponentRef } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Observable, Subject } from 'rxjs';
+import { BaseDialogComponentUnion } from './base-dialog.model';
+import { OverlaySizeConfig } from '@angular/cdk/overlay/overlay-ref';
+import { OverlayConfig } from '@angular/cdk/overlay/overlay-config';
 
 export class DialogRef<T> {
   private _componentInstance: ComponentRef<T>;
@@ -56,4 +56,4 @@ export class DialogRef<T> {
   public currentConfig(): OverlayConfig {
     return this.overlayRef.getConfig();
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
index 4f0e5a9..32eb313 100644
--- a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 
 @Component({
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts
index 470add9..c75eeeb 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts
@@ -24,12 +24,12 @@ import {
   OnInit,
   Output,
   ViewEncapsulation
-} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-import {BaseDialogComponent} from "../base-dialog/base-dialog.component";
+} from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { BaseDialogComponent } from '../base-dialog/base-dialog.component';
 
 @Component({
-  selector: "app-dialog-container",
+  selector: 'app-dialog-container',
   templateUrl: './panel-dialog.component.html',
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./panel-dialog.component.scss'],
@@ -48,26 +48,26 @@ import {BaseDialogComponent} from "../base-dialog/base-dialog.component";
 })
 export class PanelDialogComponent<T> extends BaseDialogComponent<T> implements OnInit {
 
-  @HostBinding('@flyInOut') slideDown = 'in';
-
-  @HostListener('@flyInOut.done', ['$event']) startDrawerHandler(event: any): void {
-    if (event.toState === "out") {
-      this.containerEvent.emit({key: "CLOSE"});
-    }
+  constructor() {
+    super();
   }
 
+  @HostBinding('@flyInOut') slideDown = 'in';
+
   @Output()
   animationStateChanged = new EventEmitter<AnimationEvent>();
 
-  constructor() {
-    super();
+  @HostListener('@flyInOut.done', ['$event']) startDrawerHandler(event: any): void {
+    if (event.toState === 'out') {
+      this.containerEvent.emit({key: 'CLOSE'});
+    }
   }
 
   ngOnInit() {
   }
 
   closeDialog() {
-    this.slideDown = "out";
+    this.slideDown = 'out';
   }
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts
index 3a0d479..268b4ec 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {BaseDialogConfig} from "../base-dialog/base-dialog.config";
-import {Overlay} from "@angular/cdk/overlay";
+import { BaseDialogConfig } from '../base-dialog/base-dialog.config';
+import { Overlay } from '@angular/cdk/overlay';
 
 export class PanelDialogConfig implements BaseDialogConfig {
 
@@ -25,20 +25,18 @@ export class PanelDialogConfig implements BaseDialogConfig {
     return overlay
         .position()
         .global()
-        .top("0")
-        .right("0");
+        .top('0')
+        .right('0');
   }
 
   getOverlayConfig(config: any, positionStrategy: any) {
     return {
       hasBackdrop: true,
       positionStrategy,
-      panelClass: "dialog-container",
+      panelClass: 'dialog-container',
       width: config.width,
-      maxWidth: "90vw",
-      height: "100vh",
+      maxWidth: '90vw',
+      height: '100vh',
     };
   }
-
-
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts
index 2f54cd2..63a302e 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts
+++ b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts
@@ -16,11 +16,11 @@
  *
  */
 
-import {Component, OnInit, ViewEncapsulation} from "@angular/core";
-import {BaseDialogComponent} from "../base-dialog/base-dialog.component";
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { BaseDialogComponent } from '../base-dialog/base-dialog.component';
 
 @Component({
-  selector: "standard-dialog-container",
+  selector: 'standard-dialog-container',
   templateUrl: './standard-dialog.component.html',
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./standard-dialog.component.scss']
@@ -35,7 +35,7 @@ export class StandardDialogComponent<T> extends BaseDialogComponent<T> implement
   }
 
   closeDialog() {
-    this.containerEvent.emit({key: "CLOSE"});
+    this.containerEvent.emit({key: 'CLOSE'});
   }
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts
index 35ffccc..6594dd4 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts
+++ b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts
@@ -16,16 +16,16 @@
  *
  */
 
-import {BaseDialogConfig} from "../base-dialog/base-dialog.config";
-import {DialogPanelConfig} from "../base-dialog/base-dialog.model";
-import {Overlay} from "@angular/cdk/overlay";
+import { BaseDialogConfig } from '../base-dialog/base-dialog.config';
+import { DialogPanelConfig } from '../base-dialog/base-dialog.model';
+import { Overlay } from '@angular/cdk/overlay';
 
 export class StandardDialogConfig implements BaseDialogConfig {
 
   getConfig(): DialogPanelConfig {
-    let config: DialogPanelConfig = {} as DialogPanelConfig;
-    config.maxWidth = "90vw";
-    config.height = "50vh";
+    const config: DialogPanelConfig = {} as DialogPanelConfig;
+    config.maxWidth = '90vw';
+    config.height = '50vh';
     return config;
   }
 
@@ -41,9 +41,9 @@ export class StandardDialogConfig implements BaseDialogConfig {
     return {
       hasBackdrop: true,
       positionStrategy,
-      panelClass: "dialog-container",
+      panelClass: 'dialog-container',
       width: config.width,
-      maxWidth: "90vw",
-    }
+      maxWidth: '90vw',
+    };
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
index d1534c6..9e3f56d 100644
--- a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
+++ b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Annotation } from '../../../../core-model/coco/Annotation';
-import { Label } from '../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 
 @Component({
   selector: 'sp-image-annotations',
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
index 83e0e91..52c3748 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
@@ -31,7 +31,7 @@ import { CocoFormatService } from '../services/CocoFormat.service';
 import { LabelingModeService } from '../services/LabelingMode.service';
 import { PolygonLabelingService } from '../services/PolygonLabeling.service';
 import { ReactLabelingService } from '../services/ReactLabeling.service';
-import { Label } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 import { LabelService } from '../../labels/services/label.service';
 
 @Component({
@@ -45,7 +45,7 @@ export class ImageLabelingComponent implements OnInit {
   public labels;
   public selectedLabel: Label;
 
-  public _imagesRoutes
+  public _imagesRoutes;
   @Input()
   set imagesRoutes(routes) {
    this._imagesRoutes = routes;
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
index 0a279b9..21bebca 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
@@ -15,8 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
-import { DatalakeRestService } from '../../../core-services/datalake/datalake-rest.service';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'sp-image-viewer',
diff --git a/ui/src/app/core-ui/image/image.component.ts b/ui/src/app/core-ui/image/image.component.ts
index c2ed1fa..cd98eb0 100644
--- a/ui/src/app/core-ui/image/image.component.ts
+++ b/ui/src/app/core-ui/image/image.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { SpQueryResult } from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { SpQueryResult } from '@streampipes/platform-services';
 
 @Component({
   selector: 'sp-image',
diff --git a/ui/src/app/core-ui/image/services/BrushLabeling.service.ts b/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
index 9fd6115..6badfeb 100644
--- a/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
@@ -21,7 +21,7 @@ import { Annotation } from '../../../core-model/coco/Annotation';
 import { ICoordinates } from '../model/coordinates';
 import { ColorService } from './color.service';
 import { LabelingModeService } from './LabelingMode.service';
-import { Label } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 
 @Injectable()
 export class BrushLabelingService {
diff --git a/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts b/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
index c4cfe5a..86d048d 100644
--- a/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
@@ -21,7 +21,7 @@ import { Annotation } from '../../../core-model/coco/Annotation';
 import { ICoordinates } from '../model/coordinates';
 import { ColorService } from './color.service';
 import { LabelingModeService } from './LabelingMode.service';
-import { Label } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 
 @Injectable()
 export class PolygonLabelingService {
diff --git a/ui/src/app/core-ui/image/services/ReactLabeling.service.ts b/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
index 2babdcd..c6b27c3 100644
--- a/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
@@ -21,7 +21,7 @@ import { Annotation } from '../../../core-model/coco/Annotation';
 import { ICoordinates } from '../model/coordinates';
 import { ColorService } from './color.service';
 import { LabelingModeService } from './LabelingMode.service';
-import { Label } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 
 @Injectable()
 export class ReactLabelingService {
diff --git a/ui/src/app/core-ui/image/services/color.service.ts b/ui/src/app/core-ui/image/services/color.service.ts
index 4ee5583..c9d411f 100644
--- a/ui/src/app/core-ui/image/services/color.service.ts
+++ b/ui/src/app/core-ui/image/services/color.service.ts
@@ -23,10 +23,12 @@ export class ColorService {
    getColor(str) {
     let hash = 0;
     for (let i = 0; i < str.length; i++) {
+        // tslint:disable-next-line:no-bitwise
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
     }
     let colour = '#';
     for (let i = 0; i < 3; i++) {
+        // tslint:disable-next-line:no-bitwise
       const value = (hash >> (i * 8)) & 0xFF;
       colour += ('00' + value.toString(16)).substr(-2);
     }
diff --git a/ui/src/app/core-ui/image/util/color.util.ts b/ui/src/app/core-ui/image/util/color.util.ts
index 65c4526..b4ee993 100644
--- a/ui/src/app/core-ui/image/util/color.util.ts
+++ b/ui/src/app/core-ui/image/util/color.util.ts
@@ -18,16 +18,18 @@
 export class ColorUtil {
 
   static getColor(label) {
-    var hash = 0;
-    for (var i = 0; i < label.length; i++) {
+    let hash = 0;
+    for (let i = 0; i < label.length; i++) {
+      // tslint:disable-next-line:no-bitwise
       hash = label.charCodeAt(i) + ((hash << 5) - hash);
     }
-    var colour = '#';
-    for (var i = 0; i < 3; i++) {
-      var value = (hash >> (i * 8)) & 0xFF;
+    let colour = '#';
+    for (let i = 0; i < 3; i++) {
+      // tslint:disable-next-line:no-bitwise
+      const value = (hash >> (i * 8)) & 0xFF;
       colour += ('00' + value.toString(16)).substr(-2);
     }
     return colour;
   }
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/imageLabeler/classification/imageClassification.ts b/ui/src/app/core-ui/imageLabeler/classification/imageClassification.ts
index f580aa3..79d379e 100644
--- a/ui/src/app/core-ui/imageLabeler/classification/imageClassification.ts
+++ b/ui/src/app/core-ui/imageLabeler/classification/imageClassification.ts
@@ -15,19 +15,18 @@
  * limitations under the License.
  */
 
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ImageClassification {
 
   private classes: string[];
-  public saved: boolean = true;
+  public saved = true;
   private src;
 
   newImage(src) {
     this.saved = true;
     this.src = src;
-    //TODO get class from backend
     this.classes = [];
   }
 
@@ -42,12 +41,11 @@ export class ImageClassification {
 
   removeClass(clazz) {
     this.saved = false;
-    this.classes = this.classes.filter(c => c != clazz);
+    this.classes = this.classes.filter(c => c !== clazz);
   }
 
   save(): boolean {
-    //todo: save  in backend
     this.saved = true;
     return true;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
index 1e8202b..4d45394 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -19,7 +19,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ColorService } from '../../../image/services/color.service';
 import { LabelService } from '../../services/label.service';
-import { Category, Label } from '../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Category, Label } from '@streampipes/platform-services';
 
 @Component({
   selector: 'sp-configure-labels',
diff --git a/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts
index 3c6114f..332a19e 100644
--- a/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts
+++ b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Label } from '../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Label } from '@streampipes/platform-services';
 import { LabelService } from '../../services/label.service';
 
 @Component({
diff --git a/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
index 4dd1c4f..8c2fa5f 100644
--- a/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
+++ b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
 import { ColorService } from '../../../image/services/color.service';
-import { Category, Label } from '../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { Category, Label } from '@streampipes/platform-services';
 import { LabelService } from '../../services/label.service';
 
 @Component({
diff --git a/ui/src/app/core-ui/labels/services/label.service.ts b/ui/src/app/core-ui/labels/services/label.service.ts
index 9720761..76778dc 100644
--- a/ui/src/app/core-ui/labels/services/label.service.ts
+++ b/ui/src/app/core-ui/labels/services/label.service.ts
@@ -17,8 +17,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Category, Label } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
-import { PlatformServicesCommons } from '../../../../../projects/streampipes/platform-services/src/lib/apis/commons.service';
+import { Category, Label, PlatformServicesCommons } from '@streampipes/platform-services';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
 
diff --git a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
index 7b04239..6718345 100644
--- a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
+++ b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
@@ -20,18 +20,18 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { DialogRef } from '../dialog/base-dialog/dialog-ref';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { PermissionsService } from '../../../../projects/streampipes/platform-services/src/lib/apis/permissions.service';
 import {
+  PermissionsService,
   Group,
   Permission,
   PermissionEntry,
   ServiceAccount,
-  UserAccount
-} from '../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model-client';
-import { UserService } from '../../../../projects/streampipes/platform-services/src/lib/apis/user.service';
+  UserAccount,
+  UserService,
+  UserGroupService
+} from '@streampipes/platform-services';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { Observable, zip } from 'rxjs';
-import { UserGroupService } from '../../../../projects/streampipes/platform-services/src/lib/apis/user-group.service';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { map, startWith } from 'rxjs/operators';
 
diff --git a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.ts b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.ts
index f73b6eb..54658da 100644
--- a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.ts
+++ b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { PipelineOperationStatus } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { PipelineOperationStatus } from '@streampipes/platform-services';
 import { PipelineAction } from '../../../pipelines/model/pipeline-model';
 
 @Component({
diff --git a/ui/src/app/core-ui/split-section/split-section.component.ts b/ui/src/app/core-ui/split-section/split-section.component.ts
index 7e66956..651802d 100644
--- a/ui/src/app/core-ui/split-section/split-section.component.ts
+++ b/ui/src/app/core-ui/split-section/split-section.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'sp-split-section',
diff --git a/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts b/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
index c1f8087..fa1e74a 100644
--- a/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
+++ b/ui/src/app/core-ui/static-properties/base/abstract-static-property.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { EventSchema, StaticProperty, StaticPropertyUnion } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { EventSchema, StaticProperty, StaticPropertyUnion } from '@streampipes/platform-services';
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
diff --git a/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts b/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts
index cacbdcc..1076be8 100644
--- a/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts
+++ b/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts
@@ -16,16 +16,16 @@
  *
  */
 
-import {StaticProperty} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {AbstractStaticPropertyRenderer} from "./abstract-static-property";
-import {FormControl, ValidatorFn} from "@angular/forms";
-import {Directive, OnDestroy} from "@angular/core";
+import { StaticProperty } from '@streampipes/platform-services';
+import { AbstractStaticPropertyRenderer } from './abstract-static-property';
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { Directive, OnDestroy } from '@angular/core';
 
 @Directive()
 export abstract class AbstractValidatedStaticPropertyRenderer<T extends StaticProperty>
     extends AbstractStaticPropertyRenderer<T> implements OnDestroy {
 
-  errorMessage = "Please enter a value";
+  errorMessage = 'Please enter a value';
   fieldValid: boolean;
 
   constructor() {
@@ -37,9 +37,9 @@ export abstract class AbstractValidatedStaticPropertyRenderer<T extends StaticPr
      this.onValueChange(value);
     });
     this.parentForm.controls[this.fieldName].statusChanges.subscribe(status => {
-      this.fieldValid = status === "VALID";
+      this.fieldValid = status === 'VALID';
       this.onStatusChange(status);
-    })
+    });
   }
 
   addValidator(defaultValue: any, validators: ValidatorFn | ValidatorFn[]) {
diff --git a/ui/src/app/core-ui/static-properties/filter/display-recommended.pipe.ts b/ui/src/app/core-ui/static-properties/filter/display-recommended.pipe.ts
index 4b7b8be..5128d60 100644
--- a/ui/src/app/core-ui/static-properties/filter/display-recommended.pipe.ts
+++ b/ui/src/app/core-ui/static-properties/filter/display-recommended.pipe.ts
@@ -17,7 +17,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { EventPropertyUnion } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { EventPropertyUnion } from '@streampipes/platform-services';
 
 @Pipe({name: 'displayRecommendedPipe'})
 export class DisplayRecommendedPipe implements PipeTransform {
diff --git a/ui/src/app/core-ui/static-properties/input.validator.ts b/ui/src/app/core-ui/static-properties/input.validator.ts
index 2077d0e..797ccb4 100644
--- a/ui/src/app/core-ui/static-properties/input.validator.ts
+++ b/ui/src/app/core-ui/static-properties/input.validator.ts
@@ -16,30 +16,28 @@
  *
  */
 
-import {AbstractControl} from '@angular/forms';
+import { AbstractControl } from '@angular/forms';
 
 export function ValidateUrl(control: AbstractControl) {
-  if(control.value == null){
+  if (control.value == null) {
     return { validUrl: true };
-  }
-  else if (!control.value.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g)) {
+  } else if (!control.value.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g)) {
     return { validUrl: true };
   }
   return null;
 }
 
 export function ValidateNumber(control: AbstractControl) {
-  if(control.value == null){
+  if (control.value == null) {
     return { validUrl: true };
-  }
-  else if (isNaN(control.value)) {
+  } else if (isNaN(control.value)) {
     return { validUrl: true };
   }
   return null;
 }
 
 export function ValidateString(control: AbstractControl) {
-  if(control.value == null){
+  if (control.value == null) {
     return { validUrl: true };
   }
   return null;
diff --git a/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.ts b/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.ts
index 65d553a..cbda98b 100644
--- a/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
-import {AnyStaticProperty} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AbstractStaticPropertyRenderer } from '../base/abstract-static-property';
+import { AnyStaticProperty } from '@streampipes/platform-services';
 
 @Component({
   selector: 'app-static-any-input',
@@ -27,7 +27,7 @@ import {AnyStaticProperty} from "../../../../../projects/streampipes/platform-se
 })
 export class StaticAnyInput extends AbstractStaticPropertyRenderer<AnyStaticProperty> implements OnInit {
 
-  @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
+  @Output() inputEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
 
   ngOnInit() {
diff --git a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.ts b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.ts
index e3e41f5..a6962da 100644
--- a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { CodeInputStaticProperty } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { CodeInputStaticProperty } from '@streampipes/platform-services';
 import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
 import { AfterViewInit, Component, OnInit } from '@angular/core';
 
diff --git a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
index a80cef6..9ff45ac 100644
--- a/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-collection/static-collection.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { CollectionStaticProperty, StaticPropertyUnion } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { CollectionStaticProperty, StaticPropertyUnion } from '@streampipes/platform-services';
 import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
 
 
diff --git a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts
index 77333ca..8a3269e 100644
--- a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts
@@ -18,8 +18,7 @@
 
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
-import { FileStaticProperty, FileMetadata } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
-import { FilesService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/files.service';
+import { FilesService, FileStaticProperty, FileMetadata } from '@streampipes/platform-services';
 import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
 import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
 import { FormControl, ValidatorFn, Validators } from '@angular/forms';
diff --git a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts
index acd6844..15eff2f 100644
--- a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts
@@ -20,7 +20,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ValidatorFn, Validators } from '@angular/forms';
 import { StaticPropertyUtilService } from '../static-property-util.service';
 import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
-import { FreeTextStaticProperty } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { FreeTextStaticProperty } from '@streampipes/platform-services';
 import { XsService } from '../../../NS/xs.service';
 import { ValidateNumber, ValidateString, ValidateUrl } from '../input.validator';
 import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
@@ -65,7 +65,7 @@ export class StaticFreeInputComponent
   }
 
   collectValidators() {
-    let validators: ValidatorFn[] = [];
+    const validators: ValidatorFn[] = [];
     validators.push(Validators.required);
     if (this.xsService.isNumber(this.staticProperty.requiredDatatype) ||
       this.xsService.isNumber(this.staticProperty.requiredDomainProperty)) {
@@ -83,7 +83,7 @@ export class StaticFreeInputComponent
   }
 
   emitUpdate() {
-    let valid = (this.staticProperty.value != undefined && this.staticProperty.value !== '');
+    const valid = (this.staticProperty.value !== undefined && this.staticProperty.value !== '');
     this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
   }
 
@@ -97,9 +97,9 @@ export class StaticFreeInputComponent
   }
 
   applyPlaceholder(runtimeName) {
-    let valueToInsert = '#' + runtimeName + '#';
+    const valueToInsert = '#' + runtimeName + '#';
     if (this.quillEditorComponent) {
-      let currentIndex = this.quillEditorComponent.quillEditor.selection.savedRange.index;
+      const currentIndex = this.quillEditorComponent.quillEditor.selection.savedRange.index;
       this.quillEditorComponent.quillEditor.insertText(currentIndex, valueToInsert, 'user');
     } else {
       this.parentForm.controls[this.fieldName].setValue(this.parentForm.controls[this.fieldName].value + ' ' + valueToInsert);
diff --git a/ui/src/app/core-ui/static-properties/static-group/static-group.component.ts b/ui/src/app/core-ui/static-properties/static-group/static-group.component.ts
index 3bbf270..f4bffef 100644
--- a/ui/src/app/core-ui/static-properties/static-group/static-group.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-group/static-group.component.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
-import {StaticPropertyGroup} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AbstractStaticPropertyRenderer } from '../base/abstract-static-property';
+import { StaticPropertyGroup } from '@streampipes/platform-services';
 
 @Component({
     selector: 'app-static-group',
@@ -28,12 +28,12 @@ import {StaticPropertyGroup} from "../../../../../projects/streampipes/platform-
 export class StaticGroupComponent
     extends AbstractStaticPropertyRenderer<StaticPropertyGroup> implements OnInit {
 
-    @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
+    @Output() inputEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-    private hasInput: Boolean;
+    private hasInput: boolean;
 
     ngOnInit() {
-        //console.log(this.staticProperty);
+        // console.log(this.staticProperty);
     }
 
 }
diff --git a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.ts b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.ts
index 544b7b3..a64a527 100644
--- a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.ts
@@ -16,11 +16,9 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {StaticPropertyUtilService} from '../static-property-util.service';
-import {StaticMappingComponent} from "../static-mapping/static-mapping";
-import {PropertySelectorService} from "../../../services/property-selector.service";
-import {EventProperty, MappingPropertyNary} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { StaticMappingComponent } from '../static-mapping/static-mapping';
+import { MappingPropertyNary } from '@streampipes/platform-services';
 
 
 @Component({
@@ -30,33 +28,33 @@ import {EventProperty, MappingPropertyNary} from "../../../../../projects/stream
 })
 export class StaticMappingNaryComponent extends StaticMappingComponent<MappingPropertyNary> implements OnInit {
 
-    @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
+    @Output() inputEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-    constructor(){
+    constructor() {
         super();
     }
 
     ngOnInit() {
         this.extractPossibleSelections();
-        //this.availableProperties.forEach(ep => ep.propertySelector = this.firstStreamPropertySelector + ep.runtimeName);
+        // this.availableProperties.forEach(ep => ep.propertySelector = this.firstStreamPropertySelector + ep.runtimeName);
         if (!this.staticProperty.selectedProperties) {
             this.selectNone();
         } else {
             this.availableProperties.forEach(ep => {
                 if (this.staticProperty.selectedProperties.indexOf(ep.propertySelector) > -1) {
-                    ep["checked"] = true;
+                    ep['checked'] = true;
                 }
-            })
+            });
         }
         this.inputEmitter.emit(true);
     }
 
     selectOption(property: any, $event) {
-        if (property["checked"]) {
+        if (property['checked']) {
             this.addProperty(property);
         } else {
             this.staticProperty.selectedProperties.splice(this.staticProperty.selectedProperties.indexOf(this.makeSelector(property)), 1);
-            property["checked"] = false;
+            property['checked'] = false;
         }
     }
 
@@ -73,15 +71,15 @@ export class StaticMappingNaryComponent extends StaticMappingComponent<MappingPr
     selectAll() {
         this.selectNone();
         this.availableProperties.forEach(ep => {
-            ep["checked"] = true;
+            ep['checked'] = true;
             this.addProperty(ep);
-        })
+        });
     }
 
     selectNone() {
         this.staticProperty.selectedProperties = [];
         this.availableProperties.forEach(ep => {
-            ep["checked"] = false;
+            ep['checked'] = false;
         });
     }
 
diff --git a/ui/src/app/core-ui/static-properties/static-mapping-unary/static-mapping-unary.component.ts b/ui/src/app/core-ui/static-properties/static-mapping-unary/static-mapping-unary.component.ts
index d35bbd2..3a0be04 100644
--- a/ui/src/app/core-ui/static-properties/static-mapping-unary/static-mapping-unary.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-mapping-unary/static-mapping-unary.component.ts
@@ -16,12 +16,10 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {Validators} from '@angular/forms';
-import {StaticPropertyUtilService} from '../static-property-util.service';
-import {PropertySelectorService} from "../../../services/property-selector.service";
-import {StaticMappingComponent} from "../static-mapping/static-mapping";
-import {MappingPropertyUnary} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { StaticMappingComponent } from '../static-mapping/static-mapping';
+import { MappingPropertyUnary } from '@streampipes/platform-services';
 
 @Component({
     selector: 'app-static-mapping-unary',
@@ -30,9 +28,9 @@ import {MappingPropertyUnary} from "../../../../../projects/streampipes/platform
 })
 export class StaticMappingUnaryComponent extends StaticMappingComponent<MappingPropertyUnary> implements OnInit {
 
-    @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
+    @Output() inputEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-    constructor(){
+    constructor() {
         super();
     }
 
diff --git a/ui/src/app/core-ui/static-properties/static-mapping/static-mapping.ts b/ui/src/app/core-ui/static-properties/static-mapping/static-mapping.ts
index 3a3e791..9c3c880 100644
--- a/ui/src/app/core-ui/static-properties/static-mapping/static-mapping.ts
+++ b/ui/src/app/core-ui/static-properties/static-mapping/static-mapping.ts
@@ -16,8 +16,6 @@
  *
  */
 
-import {StaticPropertyUtilService} from "../static-property-util.service";
-import {PropertySelectorService} from "../../../services/property-selector.service";
 import {
   EventProperty,
   EventPropertyList,
@@ -25,22 +23,21 @@ import {
   EventPropertyPrimitive,
   EventPropertyUnion,
   MappingProperty
-} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validated-static-property";
-import {Directive} from "@angular/core";
-import {ConfigurationInfo} from "../../../connect/model/ConfigurationInfo";
+} from '@streampipes/platform-services';
+import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
+import { Directive } from '@angular/core';
 
 
 @Directive()
 export abstract class StaticMappingComponent<T extends MappingProperty>
     extends AbstractValidatedStaticPropertyRenderer<T> {
 
-    protected firstStreamPropertySelector: string = "s0::";
-    protected secondStreamPropertySelector: string = "s1::";
+    protected firstStreamPropertySelector = 's0::';
+    protected secondStreamPropertySelector = 's1::';
 
-    availableProperties: Array<any> = [];
+    availableProperties: any[] = [];
 
-    constructor(){
+    constructor() {
         super();
     }
 
@@ -52,8 +49,8 @@ export abstract class StaticMappingComponent<T extends MappingProperty>
 
     extractPossibleSelections(): void {
         this.eventSchemas.forEach((schema, index) => {
-            let streamIdentifier = index == 0 ? this.firstStreamPropertySelector : this.secondStreamPropertySelector;
-            let streamProperties = schema
+            const streamIdentifier = index === 0 ? this.firstStreamPropertySelector : this.secondStreamPropertySelector;
+            const streamProperties = schema
                 .eventProperties
                 .filter(ep => this.isInSelection(ep, streamIdentifier))
                 .map(ep => this.cloneEp(ep));
diff --git a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
index f1eb81f..0982cda 100644
--- a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { AbstractStaticPropertyRenderer } from '../base/abstract-static-property';
-import { OneOfStaticProperty } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { OneOfStaticProperty } from '@streampipes/platform-services';
 
 @Component({
   selector: 'sp-static-one-of-input',
diff --git a/ui/src/app/core-ui/static-properties/static-property-util.service.ts b/ui/src/app/core-ui/static-properties/static-property-util.service.ts
index b833cd9..8c4f40f 100644
--- a/ui/src/app/core-ui/static-properties/static-property-util.service.ts
+++ b/ui/src/app/core-ui/static-properties/static-property-util.service.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 import {
   AnyStaticProperty,
   CollectionStaticProperty,
@@ -34,107 +34,95 @@ import {
   StaticPropertyAlternative,
   StaticPropertyAlternatives,
   StaticPropertyGroup
-} from "../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
+} from '@streampipes/platform-services';
 
 @Injectable()
-export class StaticPropertyUtilService{
+export class StaticPropertyUtilService {
 
     public clone(val: StaticProperty) {
         let clone;
-        let id = 'urn:streampipes.org:spi::' + this.generateID(6);
+        const id = 'urn:streampipes.org:spi::' + this.generateID(6);
         if (val instanceof FreeTextStaticProperty) {
             clone = new FreeTextStaticProperty();
             clone.elementId = id;
             clone.value = val.value;
             clone.requiredDomainProperty = val.requiredDomainProperty;
-        }
-        else if (val instanceof FileStaticProperty) {
+        } else if (val instanceof FileStaticProperty) {
             clone = new FileStaticProperty();
             clone.elementId = id;
             clone.endpointUrl = val.endpointUrl;
             clone.locationPath = val.locationPath;
-        }
-        else if (val instanceof MappingPropertyUnary) {
+        } else if (val instanceof MappingPropertyUnary) {
             clone = new MappingPropertyUnary();
             clone.elementId = id;
             clone.requirementSelector = val.requirementSelector;
             clone.mapsFromOptions = val.mapsFromOptions;
             clone.propertyScope = val.propertyScope;
             clone.selectedProperty = val.selectedProperty;
-        }
-        else if (val instanceof MappingPropertyNary) {
+        } else if (val instanceof MappingPropertyNary) {
             clone = new MappingPropertyNary();
             clone.elementId = id;
             clone.requirementSelector = val.requirementSelector;
             clone.mapsFromOptions = val.mapsFromOptions;
             clone.propertyScope = val.propertyScope;
             clone.selectedProperties = val.selectedProperties;
-        }
-        else if (val instanceof SecretStaticProperty) {
+        } else if (val instanceof SecretStaticProperty) {
             clone = new SecretStaticProperty();
             clone.elementId = id;
             clone.value = val.value;
             clone.encrypted = val.encrypted;
-        }
-        else if (val instanceof ColorPickerStaticProperty) {
+        } else if (val instanceof ColorPickerStaticProperty) {
             clone = new ColorPickerStaticProperty();
             clone.id = id;
             clone.selectedProperty = val.selectedColor;
-        }
-        else if (val instanceof StaticPropertyGroup) {
+        } else if (val instanceof StaticPropertyGroup) {
             clone = new StaticPropertyGroup();
             clone.elementId = id;
             clone.staticProperties = val.staticProperties.map(elem => this.clone(elem));
             clone.showLabel = val.showLabel;
             clone.horizontalRendering = val.horizontalRendering;
-          }
-        else if (val instanceof StaticPropertyAlternatives) {
+          } else if (val instanceof StaticPropertyAlternatives) {
             clone = new StaticPropertyAlternatives();
             clone.elementId = id;
             clone.alternatives = val.alternatives.map(elem => this.clone(elem));
-        }
-        else if (val instanceof StaticPropertyAlternative) {
+        } else if (val instanceof StaticPropertyAlternative) {
             clone = new StaticPropertyAlternative();
             clone.elementId = id;
             clone.selected = val.selected;
             clone.staticProperty = this.clone(val.staticProperty);
-        }
-        else if (val instanceof CollectionStaticProperty) {
+        } else if (val instanceof CollectionStaticProperty) {
             clone = new CollectionStaticProperty();
             clone.elementId = id;
             clone.staticPropertyTemplate = this.clone(val.staticPropertyTemplate);
             clone.members = val.members.map(elem => this.clone(elem));
             clone.memberType = val.memberType;
-        }
-        //SelectionStaticProperty
-        else if (val instanceof RuntimeResolvableAnyStaticProperty ||  val instanceof RuntimeResolvableOneOfStaticProperty){
+        } else if (val instanceof RuntimeResolvableAnyStaticProperty ||  val instanceof RuntimeResolvableOneOfStaticProperty) {
             val instanceof RuntimeResolvableAnyStaticProperty ? clone = new RuntimeResolvableAnyStaticProperty() :
               clone = new RuntimeResolvableOneOfStaticProperty();
 
             clone.elementId = id;
             clone.dependsOn = val.dependsOn;
-            //clone.value = val.value;
-            //clone.requiredDomainProperty = val.requiredDomainProperty;
+            // clone.value = val.value;
+            // clone.requiredDomainProperty = val.requiredDomainProperty;
             clone.options = val.options.map(option => this.cloneOption(option));
             clone.horizontalRendering = val.horizontalRendering;
-        }
-        else if (val instanceof AnyStaticProperty || val instanceof OneOfStaticProperty){
+        } else if (val instanceof AnyStaticProperty || val instanceof OneOfStaticProperty) {
             val instanceof AnyStaticProperty ? clone = new AnyStaticProperty() : clone = new OneOfStaticProperty();
 
             clone.elementId = id;
-            //clone.value = val.value;
-            //clone.requiredDomainProperty = val.requiredDomainProperty;
+            // clone.value = val.value;
+            // clone.requiredDomainProperty = val.requiredDomainProperty;
             clone.options = val.options.map(option => this.cloneOption(option));
             clone.horizontalRendering = val.horizontalRendering;
         }
         clone = this.copyStaticPropertyProperty(val, clone);
-        clone["@class"] = val["@class"];
+        clone['@class'] = val['@class'];
         return clone;
     }
 
     private copyStaticPropertyProperty(src: StaticProperty, dst: StaticProperty): StaticProperty {
         dst.label = src.label;
-        //dst.elementName = src.elementName;
+        // dst.elementName = src.elementName;
         dst.description = src.description;
         dst.internalName = src.internalName;
         dst.index = src.index;
@@ -142,10 +130,10 @@ export class StaticPropertyUtilService{
     }
 
     private cloneOption(val: Option) {
-        let clone = new Option();
+        const clone = new Option();
         clone['@class']  = 'org.apache.streampipes.model.staticproperty.Option';
         clone.elementId = 'urn:streampipes.org:spi::' + this.generateID(6);
-        //clone.elementName = val.elementName;
+        // clone.elementName = val.elementName;
         clone.name = val.name;
         clone.internalName = val.internalName;
         clone.selected = val.selected;
@@ -153,26 +141,26 @@ export class StaticPropertyUtilService{
     }
 
     private generateID(length): string {
-        let chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        var result = '';
-        for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
+        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = length; i > 0; --i) { result += chars[Math.round(Math.random() * (chars.length - 1))]; }
         return result;
     }
 
 
     public asFreeTextStaticProperty(val: StaticProperty): FreeTextStaticProperty {
-        return <FreeTextStaticProperty> val;
+        return val as FreeTextStaticProperty;
     }
 
     public asColorPickerStaticProperty(val: StaticProperty): ColorPickerStaticProperty {
-        return <ColorPickerStaticProperty> val;
+        return val as ColorPickerStaticProperty;
     }
 
     public asSecretStaticProperty(val: StaticProperty): SecretStaticProperty {
-        return <SecretStaticProperty> val;
+        return val as SecretStaticProperty;
     }
 
     public asCollectionProperty(val: StaticProperty): CollectionStaticProperty {
-        return <CollectionStaticProperty> val;
+        return val as CollectionStaticProperty;
     }
 }
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
index 63a9388..b24bc7a 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { RuntimeResolvableAnyStaticProperty, StaticPropertyUnion } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { RuntimeResolvableAnyStaticProperty, StaticPropertyUnion } from '@streampipes/platform-services';
 import { RuntimeResolvableService } from '../static-runtime-resolvable-input/runtime-resolvable.service';
 import { BaseRuntimeResolvableSelectionInput } from '../static-runtime-resolvable-input/base-runtime-resolvable-selection-input';
 
@@ -26,7 +26,9 @@ import { BaseRuntimeResolvableSelectionInput } from '../static-runtime-resolvabl
     templateUrl: './static-runtime-resolvable-any-input.component.html',
     styleUrls: ['./static-runtime-resolvable-any-input.component.css']
 })
-export class StaticRuntimeResolvableAnyInputComponent extends BaseRuntimeResolvableSelectionInput<RuntimeResolvableAnyStaticProperty> implements OnInit {
+export class StaticRuntimeResolvableAnyInputComponent
+    extends BaseRuntimeResolvableSelectionInput<RuntimeResolvableAnyStaticProperty>
+    implements OnInit {
 
     constructor(runtimeResolvableService: RuntimeResolvableService) {
         super(runtimeResolvableService);
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-input.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-input.ts
index ff25f9e..229beba 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-input.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-input.ts
@@ -25,14 +25,16 @@ import {
   RuntimeResolvableTreeInputStaticProperty,
   StaticProperty,
   StaticPropertyUnion
-} from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+} from '@streampipes/platform-services';
 import { RuntimeResolvableService } from './runtime-resolvable.service';
 import { Observable } from 'rxjs';
 import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
 
 @Directive()
-export abstract class BaseRuntimeResolvableInput<T extends RuntimeResolvableAnyStaticProperty | RuntimeResolvableOneOfStaticProperty | RuntimeResolvableTreeInputStaticProperty>
+// tslint:disable-next-line:directive-class-suffix
+export abstract class BaseRuntimeResolvableInput<T
+    extends RuntimeResolvableAnyStaticProperty | RuntimeResolvableOneOfStaticProperty | RuntimeResolvableTreeInputStaticProperty>
   extends AbstractStaticPropertyRenderer<T>
   implements OnChanges {
 
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-selection-input.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-selection-input.ts
index adca642..cf9d719 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-selection-input.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/base-runtime-resolvable-selection-input.ts
@@ -19,12 +19,14 @@
 import {
   RuntimeResolvableAnyStaticProperty,
   RuntimeResolvableOneOfStaticProperty
-} from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+} from '@streampipes/platform-services';
 import { Directive } from '@angular/core';
 import { BaseRuntimeResolvableInput } from './base-runtime-resolvable-input';
 
 @Directive()
-export abstract class BaseRuntimeResolvableSelectionInput<T extends RuntimeResolvableAnyStaticProperty | RuntimeResolvableOneOfStaticProperty>
+// tslint:disable-next-line:directive-class-suffix
+export abstract class BaseRuntimeResolvableSelectionInput<T
+    extends RuntimeResolvableAnyStaticProperty | RuntimeResolvableOneOfStaticProperty>
   extends BaseRuntimeResolvableInput<T> {
 
 
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/runtime-resolvable.service.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/runtime-resolvable.service.ts
index 7381b98..09db85e 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/runtime-resolvable.service.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-input/runtime-resolvable.service.ts
@@ -17,10 +17,9 @@
  */
 
 import { Observable } from 'rxjs';
-import { RuntimeOptionsRequest, RuntimeOptionsResponse } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { RuntimeOptionsRequest, RuntimeOptionsResponse, PlatformServicesCommons } from '@streampipes/platform-services';
 import { map } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
-import { PlatformServicesCommons } from '../../../../../projects/streampipes/platform-services/src/lib/apis/commons.service';
 import { Injectable } from '@angular/core';
 
 @Injectable()
@@ -28,10 +27,10 @@ export class RuntimeResolvableService {
 
   constructor(private http: HttpClient,
               private platformServicesCommons: PlatformServicesCommons) {
-
   }
 
-  fetchRemoteOptionsForAdapter(resolvableOptionsParameterRequest: RuntimeOptionsRequest, adapterId: string): Observable<RuntimeOptionsResponse> {
+  fetchRemoteOptionsForAdapter(resolvableOptionsParameterRequest: RuntimeOptionsRequest,
+                               adapterId: string): Observable<RuntimeOptionsResponse> {
     const url: string = '/streampipes-backend/api/v2/connect/'
       + 'master/resolvable/'
       + encodeURIComponent(adapterId)
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
index 5e79124..a6c12b1 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnChanges, OnInit } from '@angular/core';
-import { RuntimeResolvableOneOfStaticProperty, StaticPropertyUnion } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { RuntimeResolvableOneOfStaticProperty, StaticPropertyUnion } from '@streampipes/platform-services';
 import { RuntimeResolvableService } from '../static-runtime-resolvable-input/runtime-resolvable.service';
 import { BaseRuntimeResolvableSelectionInput } from '../static-runtime-resolvable-input/base-runtime-resolvable-selection-input';
 
diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
index e36b71f..3be9378 100644
--- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
@@ -22,7 +22,7 @@ import {
   RuntimeResolvableTreeInputStaticProperty,
   StaticPropertyUnion,
   TreeInputNode
-} from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+} from '@streampipes/platform-services';
 import { RuntimeResolvableService } from '../static-runtime-resolvable-input/runtime-resolvable.service';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
diff --git a/ui/src/app/core-ui/static-properties/static-secret-input/static-secret-input.component.ts b/ui/src/app/core-ui/static-properties/static-secret-input/static-secret-input.component.ts
index 2249a14..56304f7 100644
--- a/ui/src/app/core-ui/static-properties/static-secret-input/static-secret-input.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-secret-input/static-secret-input.component.ts
@@ -16,12 +16,12 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {Validators} from '@angular/forms';
-import {StaticPropertyUtilService} from '../static-property-util.service';
-import {ConfigurationInfo} from "../../../connect/model/ConfigurationInfo";
-import {SecretStaticProperty} from "../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validated-static-property";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { StaticPropertyUtilService } from '../static-property-util.service';
+import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
+import { SecretStaticProperty } from '@streampipes/platform-services';
+import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
 
 @Component({
     selector: 'app-static-secret-input',
@@ -31,7 +31,7 @@ import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validate
 export class StaticSecretInputComponent
     extends AbstractValidatedStaticPropertyRenderer<SecretStaticProperty> implements OnInit {
 
-    constructor(public staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService) {
         super();
     }
 
@@ -44,7 +44,11 @@ export class StaticSecretInputComponent
 
 
     emitUpdate() {
-        this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, this.staticPropertyUtil.asFreeTextStaticProperty(this.staticProperty).value && this.staticPropertyUtil.asFreeTextStaticProperty(this.staticProperty).value !== ""));
+        this.updateEmitter.emit(
+            new ConfigurationInfo(
+                this.staticProperty.internalName,
+                this.staticPropertyUtil.asFreeTextStaticProperty(this.staticProperty).value &&
+                            this.staticPropertyUtil.asFreeTextStaticProperty(this.staticProperty).value !== ''));
     }
 
     onStatusChange(status: any) {
@@ -52,7 +56,7 @@ export class StaticSecretInputComponent
 
     onValueChange(value: any) {
         this.staticProperty.value = value;
-        this.staticProperty.encrypted=false;
+        this.staticProperty.encrypted = false;
     }
 
 }
diff --git a/ui/src/app/core-ui/static-properties/static-slide-toggle/static-slide-toggle.component.ts b/ui/src/app/core-ui/static-properties/static-slide-toggle/static-slide-toggle.component.ts
index ccc38c8..6685ded 100644
--- a/ui/src/app/core-ui/static-properties/static-slide-toggle/static-slide-toggle.component.ts
+++ b/ui/src/app/core-ui/static-properties/static-slide-toggle/static-slide-toggle.component.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
-import { SlideToggleStaticProperty } from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+import { SlideToggleStaticProperty } from '@streampipes/platform-services';
 import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property';
 import { Validators } from '@angular/forms';
 
diff --git a/ui/src/app/core/components/feedback/feedback.component.ts b/ui/src/app/core/components/feedback/feedback.component.ts
index 5bf00d6..e27e46a 100644
--- a/ui/src/app/core/components/feedback/feedback.component.ts
+++ b/ui/src/app/core/components/feedback/feedback.component.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Component, EventEmitter, OnInit, Output} from "@angular/core";
-import {AppConstants} from "../../../services/app.constants";
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AppConstants } from '../../../services/app.constants';
 
 @Component({
     selector: 'feedback',
@@ -30,12 +30,12 @@ export class FeedbackComponent implements OnInit {
 
     feedback: any = {};
 
-    sendingFeedback: boolean = false;
-    sendingFeedbackFinished: boolean = false;
+    sendingFeedback = false;
+    sendingFeedbackFinished = false;
 
     // deactivate direct feedback for Apache transition
-    feedbackUrl = "";
-    debugFeedbackUrl = "";
+    feedbackUrl = '';
+    debugFeedbackUrl = '';
 
     targetEmail: string;
 
@@ -54,9 +54,9 @@ export class FeedbackComponent implements OnInit {
         this.sendingFeedbackFinished = false;
     }
 
-    sendMail(){
+    sendMail() {
         this.sendingFeedback = true;
-        window.open("mailto:"+ this.targetEmail + "?subject=" +"[USER-FEEDBACK]" +"&body=" +this.feedback.feedbackText, "_self");
+        window.open('mailto:' + this.targetEmail + '?subject=' + '[USER-FEEDBACK]' + '&body=' + this.feedback.feedbackText, '_self');
         this.sendingFeedbackFinished = true;
-    };
+    }
 }
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
index 9dd2c72..b003bc4 100644
--- a/ui/src/app/core/core.module.ts
+++ b/ui/src/app/core/core.module.ts
@@ -16,27 +16,27 @@
  *
  */
 
-import {NgModule} from '@angular/core';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatIconModule} from '@angular/material/icon';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {CommonModule} from '@angular/common';
-import {StreampipesComponent} from "./components/streampipes/streampipes.component";
-import {FeedbackComponent} from "./components/feedback/feedback.component";
-import {MatButtonModule} from "@angular/material/button";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
-import {MatInputModule} from "@angular/material/input";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {RouterModule} from "@angular/router";
-import {ToolbarComponent} from "./components/toolbar/toolbar.component";
-import {MatToolbarModule} from "@angular/material/toolbar";
-import {MatTooltipModule} from "@angular/material/tooltip";
-import {IconbarComponent} from "./components/iconbar/iconbar.component";
-import {MatDividerModule} from '@angular/material/divider';
-import {MatListModule} from "@angular/material/list";
-import {MatMenuModule} from "@angular/material/menu";
-import {MatBadgeModule} from "@angular/material/badge";
-import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import { NgModule } from '@angular/core';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { CommonModule } from '@angular/common';
+import { StreampipesComponent } from './components/streampipes/streampipes.component';
+import { FeedbackComponent } from './components/feedback/feedback.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IconbarComponent } from './components/iconbar/iconbar.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @NgModule({
   imports: [
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 a2ff602..0b6d86f 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
@@ -22,11 +22,10 @@ import {
   Pipeline, PipelineElementMonitoringInfo,
   PipelineMonitoringInfo,
   SpDataSet, SpDataStream
-} from '../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model';
+} from '@streampipes/platform-services';
 import { PipelineMonitoringService } from '../../../../../projects/streampipes/platform-services/src/lib/apis/pipeline-monitoring.service';
 import { PipelineOperationsService } from '../../../pipelines/services/pipeline-operations.service';
 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/monitoring/statistics/pipeline-element-statistics.component.ts b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
index 396bbf5..6b5ffaf 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,14 +16,14 @@
  *
  */
 
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 import {
   DataProcessorInvocation, DataSinkInvocation,
   Pipeline,
   PipelineElementMonitoringInfo, SpDataSet, SpDataStream,
-} from "../../../../../../projects/streampipes/platform-services/src/lib/model/gen/streampipes-model";
-import {HistoricalMonitoringData} from "../../model/pipeline-details.model";
+} from '@streampipes/platform-services';
+import { HistoricalMonitoringData } from '../../model/pipeline-details.model';
 
 @Component({
   selector: 'pipeline-element-statistics',
@@ -41,37 +41,37 @@ export class PipelineElementStatisticsComponent implements OnInit {
   _pipelineElementMonitoringInfo: PipelineElementMonitoringInfo;
 
   currentPipelineElement: SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation;
-  consumedMessagesFirstInputStream: string = "";
-  consumedMessagesSecondInputStream: string = "";
+  consumedMessagesFirstInputStream = '';
+  consumedMessagesSecondInputStream = '';
 
-  producedMessages: string | number = "";
+  producedMessages: string | number = '';
 
-  cardColor: string = "rgb(27, 20, 100)";
-  deactivatedCardColor: string = "rgb(241,241,241)";
+  cardColor = 'rgb(27, 20, 100)';
+  deactivatedCardColor = 'rgb(241,241,241)';
 
-  textColor: string = "rgb(208,208,208)";
-  deactivatedTextColor: string = "rgb(205,205,205)";
+  textColor = 'rgb(208,208,208)';
+  deactivatedTextColor = 'rgb(205,205,205)';
 
-  bandColor: string = "rgb(27, 20, 100)";
-  deactivatedBandColor: string = "rgb(241,241,241)";
-  okBandColor: string = "rgb(11,186,0)";
-  warningBandColor: string = "rgb(253,144,0)";
+  bandColor = 'rgb(27, 20, 100)';
+  deactivatedBandColor = 'rgb(241,241,241)';
+  okBandColor = 'rgb(11,186,0)';
+  warningBandColor = 'rgb(253,144,0)';
 
-  chartBackgroundColor: string = "rgb(27, 20, 100)";
-  chartTextColor: string = "rgb(208,208,208)";
+  chartBackgroundColor = 'rgb(27, 20, 100)';
+  chartTextColor = 'rgb(208,208,208)';
 
   consumedMessagesFirstStreamBandColor: string;
   consumedMessagesSecondStreamBandColor: string;
 
-  notAvailable: string = "-";
+  notAvailable = '-';
 
   historicFirstConsumedInputValues: HistoricalMonitoringData[] = [];
   historicSecondConsumedInputValues: HistoricalMonitoringData[] = [];
   historicProducedOutputValues: HistoricalMonitoringData[] = [];
 
-  consumedMessagesFirstStreamLastValue: number = -1;
-  consumedMessagesSecondStreamLastValue: number = -1;
-  producedMessageOutputLastValue: number = -1;
+  consumedMessagesFirstStreamLastValue = -1;
+  consumedMessagesSecondStreamLastValue = -1;
+  producedMessageOutputLastValue = -1;
 
   consumedMessagesFirstStreamAvailable = false;
   consumedMessagesSecondStreamAvailable = false;
@@ -85,13 +85,13 @@ export class PipelineElementStatisticsComponent implements OnInit {
 
   updateMonitoringInfo() {
     if (this.pipelineElementMonitoringInfo.consumedMessageInfoExists) {
-      let 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;
+      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.consumedMessagesFirstStreamBandColor = consumedMessages[0].lag > 10 ? this.warningBandColor : this.okBandColor;
       this.consumedMessagesSecondStreamBandColor = (consumedMessages.length > 1 ? (consumedMessages[1].lag > 10 ? this.warningBandColor : this.okBandColor) : this.deactivatedBandColor);
 
-      let consumedMessage = {"count": consumedMessages[0].consumedMessagesSincePipelineStart};
+      const consumedMessage = {'count': consumedMessages[0].consumedMessagesSincePipelineStart};
       this.makeHistoricData(consumedMessage, this.consumedMessagesFirstStreamLastValue, this.historicFirstConsumedInputValues);
       this.consumedMessagesFirstStreamLastValue = consumedMessages[0].consumedMessagesSincePipelineStart;
       this.historicFirstConsumedInputValues = [].concat(this.historicFirstConsumedInputValues);
@@ -109,7 +109,7 @@ export class PipelineElementStatisticsComponent implements OnInit {
     }
     if (this.pipelineElementMonitoringInfo.producedMessageInfoExists) {
       this.producedMessages = this.pipelineElementMonitoringInfo.producedMessagesInfo.totalProducedMessagesSincePipelineStart;
-      let producedMessage = {"count": this.producedMessages};
+      const producedMessage = {'count': this.producedMessages};
       this.makeHistoricData(producedMessage, this.producedMessageOutputLastValue, this.historicProducedOutputValues);
       this.producedMessageOutputLastValue = producedMessage.count;
       this.historicProducedOutputValues = [].concat(this.historicProducedOutputValues);
@@ -120,14 +120,14 @@ export class PipelineElementStatisticsComponent implements OnInit {
 
   makeHistoricData(consumedMessage: any, lastValue: number, historicData: HistoricalMonitoringData[]) {
     if (lastValue > -1) {
-      let entry: HistoricalMonitoringData = {"name": new Date().toLocaleTimeString(), value: (consumedMessage.count - lastValue)};
+      const entry: HistoricalMonitoringData = {'name': new Date().toLocaleTimeString(), value: (consumedMessage.count - lastValue)};
       historicData.push(entry);
     }
     if (historicData.length > 10) {
       historicData.shift();
     } else {
       for (let i = 0; i < (10 - historicData.length); i++) {
-        historicData.unshift({"name": i.toString(), "value": 0});
+        historicData.unshift({'name': i.toString(), 'value': 0});
       }
     }
   }
diff --git a/ui/src/app/core-ui/widget/barchart/barchart-widget.component.html b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html
similarity index 100%
rename from ui/src/app/core-ui/widget/barchart/barchart-widget.component.html
rename to ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html
diff --git a/ui/src/app/core-ui/widget/barchart/barchart-widget.component.scss b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss
similarity index 100%
rename from ui/src/app/core-ui/widget/barchart/barchart-widget.component.scss
rename to ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss
diff --git a/ui/src/app/core-ui/widget/barchart/barchart-widget.component.ts b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
similarity index 91%
rename from ui/src/app/core-ui/widget/barchart/barchart-widget.component.ts
rename to ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
index 01c0860..f9ef2ad 100644
--- a/ui/src/app/core-ui/widget/barchart/barchart-widget.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'sp-barchart-widget',
@@ -28,10 +28,10 @@ export class BarchartWidgetComponent implements OnInit {
   _data = [];
 
   @Input()
-  backgroundColor = "#cccccc";
+  backgroundColor = '#cccccc';
 
   @Input()
-  textColor = "#1b1464";
+  textColor = '#1b1464';
 
   colorScheme = {
     domain: ['#1b1464']
@@ -49,4 +49,4 @@ export class BarchartWidgetComponent implements OnInit {
   get data() {
     return this._data;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/widget/status/status-widget.component.css b/ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.css
similarity index 100%
rename from ui/src/app/core-ui/widget/status/status-widget.component.css
rename to ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.css
diff --git a/ui/src/app/core-ui/widget/status/status-widget.component.html b/ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.html
similarity index 100%
rename from ui/src/app/core-ui/widget/status/status-widget.component.html
rename to ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.html
diff --git a/ui/src/app/core-ui/widget/status/status-widget.component.ts b/ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.ts
similarity index 84%
rename from ui/src/app/core-ui/widget/status/status-widget.component.ts
rename to ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.ts
index b639d4c..3e6a743 100644
--- a/ui/src/app/core-ui/widget/status/status-widget.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/widget/status/status-widget.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'sp-status-widget',
@@ -25,9 +25,9 @@ import {Component, Input, OnInit} from '@angular/core';
 })
 export class StatusWidgetComponent implements OnInit {
 
-    @Input() color: string = "rgb(156, 156, 156)";
-    @Input() bandColor: string = "rgb(27, 20, 100)";
-    @Input() textColor: string = "rgb(96,96,96)";
+    @Input() color = 'rgb(156, 156, 156)';
+    @Input() bandColor = 'rgb(27, 20, 100)';
+    @Input() textColor = 'rgb(96,96,96)';
 
     _label: string;
     _statusValue: string;
@@ -56,7 +56,7 @@ export class StatusWidgetComponent implements OnInit {
 
     updateChartData() {
         this.chartData = [];
-        this.chartData = [{"name": this._label, "value": this._statusValue}];
+        this.chartData = [{'name': this._label, 'value': this._statusValue}];
     }
 
     getBackground() {
@@ -64,4 +64,4 @@ export class StatusWidgetComponent implements OnInit {
     }
 
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/pipeline-details/pipeline-details.module.ts b/ui/src/app/pipeline-details/pipeline-details.module.ts
index 478a0d4..f1dfbb2 100644
--- a/ui/src/app/pipeline-details/pipeline-details.module.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.module.ts
@@ -36,6 +36,8 @@ 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';
 
 @NgModule({
   imports: [
@@ -61,7 +63,9 @@ import {NgxChartsModule} from "@swimlane/ngx-charts";
     PipelineMonitoringComponent,
     PipelineStatusComponent,
     PipelinePreviewComponent,
-    QuickEditComponent
+    QuickEditComponent,
+    StatusWidgetComponent,
+    BarchartWidgetComponent
   ],
   providers: [],
   exports: [
@@ -76,4 +80,4 @@ export class PipelineDetailsModule {
   constructor() {
   }
 
-}
\ No newline at end of file
+}