You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/15 21:54:07 UTC

[incubator-streampipes] branch STREAMPIPES-193 updated (4f8ec90 -> 8a9a740)

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

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


    from 4f8ec90  [STREAMPIPES-193] Add router to standalone dashboard
     new 83d25c5  [STREAMPIPES-193] Remove AngularJS dependencies from package.json
     new d36f6a6  [STREAMPIPES-193] Add guards
     new 57c3042  [STREAMPIPES-193] Show current router state in toolbar
     new 265fb38  [STREAMPIPES-193] Fix layout bug in pipeline details view
     add be26f97  [hotfix] some minor renamings
     add e39021b  [hotfix] Use Maven install goal to ensure rat license check on every commit
     add 6269512  [hotfix] Add missing license headers
     add 86dbbde  Merge branch 'dev' of https://github.com/apache/incubator-streampipes into dev
     add b618b85  [hotfix] updated setup.py and README.md
     add ab05ed7  [STREAMPIPES-194] remove widget icon from being rendered
     add 7970dc2  [hotfix] version update, removed point at end of description
     add 22d488f  [hotfix] change button style of pipeline element endpoint items
     add 4a16d18  [STREAMPIPES-195] add default constructur and getter/setter for rev attribute
     new 1445691  Merge branch 'dev' into STREAMPIPES-193
     new c71badc  [STREAMPIPES-193] Migrate state navigation to Angular router
     new ff779b5  [STREAMPIPES-193] Migrate loading bar, minor bug fixes to get rid of AngularJS imports
     new d393e05  [STREAMPIPES-193] Fix appearance of feedback component
     new e050d9f  [STREAMPIPES-193] Fix minor layout bug in pipeline element installation module
     new 5bfdfda  [STREAMPIPES-193] Fix notification icon in iconbar
     new 8a9a740  [STREAMPIPES-193] Migrate prebuild steps

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


Summary of changes:
 .github/workflows/build.yml                        |   2 +-
 .gitignore                                         |   6 +-
 .../streampipes/model/client/user/Element.java     |   5 +-
 .../apache/streampipes/model/client/user/User.java |   7 +
 .../rest/impl/PipelineWithUserResource.java        |   2 +
 .../org/apache/streampipes/rest/impl/User.java     |   1 +
 streampipes-wrapper-python/README.md               |  52 ++--
 streampipes-wrapper-python/setup.py                |   4 +-
 streampipes-wrapper-python/streampipes/core.py     |  24 +-
 ui/deployment/app-routing.module.mst               |  69 ++++++
 ui/deployment/app.module.mst                       |  71 ------
 ui/deployment/appng5.module.mst                    |  44 ++--
 .../base-navigation.component.mst}                 |  68 +++---
 ui/deployment/modules.yml                          |  50 ++--
 ui/deployment/prebuild.js                          |  16 +-
 ui/deployment/state.config.mst                     | 170 -------------
 ui/deployment/toolbar.controller.mst               | 267 ---------------------
 ui/deployment/version.service.mst                  |  30 ---
 ui/package.json                                    |  36 +--
 .../already-configured.can-activate.guard.ts}      |  25 +-
 .../_guards/auth.can-activate-children.guard.ts    |  58 +++++
 .../_guards/base-configured.can-activate.guard.ts  |  52 ++++
 .../configured.can-activate.guard.ts}              |  26 +-
 ui/src/app/_guards/logged-in.can-activate.guard.ts |  58 +++++
 ui/src/app/add/add.component.html                  |  14 +-
 ui/src/app/add/add.component.ts                    |   8 +
 .../endpoint-item/endpoint-item.component.html     |  10 +-
 .../endpoint-item/endpoint-item.component.ts       |   6 +-
 .../app-asset-monitoring.module.ts                 |   5 -
 ui/src/app/app-overview/app-overview.module.ts     |   5 -
 ui/src/app/app-routing.module.ts                   |  55 +++--
 .../app-transport-monitoring.module.ts             |   5 -
 ui/src/app/app.component.html                      |   2 +-
 ui/src/app/connect/connect.module.ts               |  18 +-
 .../pipeline-element-runtime-info.component.scss   |  17 ++
 ui/src/app/connect/rest.service.ts                 |   4 +-
 ui/src/app/core-model/gen/streampipes-model.ts     |  19 ++
 .../dialog/base-dialog/base-dialog.model.ts        |  18 ++
 .../confirm-dialog/confirm-dialog.component.html   |  18 ++
 .../components/toolbar/toolbar.component.html      |  72 ------
 ui/src/app/core-v2/core.module.ts                  |  70 ------
 ui/src/app/core/button/button.directive.ts         | 115 ---------
 .../components/base-navigation.component.ts        |  66 ++---
 .../components/feedback/feedback.component.html    |  13 +-
 .../components/feedback/feedback.component.ts      |   5 +-
 .../components/iconbar/iconbar.component.html      |  31 +--
 .../components/iconbar/iconbar.component.ts        |  10 +-
 .../streampipes/streampipes.component.html         |   0
 .../streampipes/streampipes.component.scss         |   0
 .../streampipes/streampipes.component.ts           |   0
 .../core/components/toolbar/toolbar.component.html |  78 ++++++
 .../components/toolbar/toolbar.component.scss}     |   3 +-
 .../components/toolbar/toolbar.component.ts        |  61 +----
 ui/src/app/core/core.module.ts                     |  69 ++++--
 ui/src/app/core/http-provider.config.ts            |  25 --
 ui/src/app/core/icon-provider.config.ts            |  45 ----
 ui/src/app/core/md-theming-provider.config.ts      |  70 ------
 ui/src/app/core/prism/nag-prism.directive.ts       |  63 -----
 ui/src/app/core/root-scope-delegate.decorator.ts   |  28 ---
 .../standalone/standalone-dashboard.component.ts   |   1 -
 .../components/widgets/table/table-config.ts       |   2 +-
 .../add-visualization-dialog.component.html        |   2 +-
 .../app/data-explorer/data-explorer.component.css  |   2 +-
 ui/src/app/data-explorer/data-explorer.module.ts   |   5 -
 .../pipeline-element-documentation.component.html  |  18 ++
 .../pipeline-element-options.component.ts          |   5 +-
 .../components/pipeline/pipeline.component.ts      |   6 +-
 .../save-pipeline/save-pipeline.component.ts       |  10 +-
 .../app/editor/services/object-provider.service.ts |   3 +-
 .../pipeline-element-recommendation.service.ts     |   3 +-
 .../editor/services/pipeline-validation.service.ts |   3 +-
 ui/src/app/home/home.component.ts                  |   7 +-
 ui/src/app/home/home.module.ts                     |  18 +-
 ui/src/app/info/about/about.component.css          |   4 +
 ui/src/app/info/about/about.component.html         |   6 +-
 ui/src/app/layout/app.controller.ts                |  40 ---
 ui/src/app/layout/layout.module.ts                 |  29 ---
 .../login/components/startup/startup.component.ts  |   8 +-
 ui/src/app/login/login.module.ts                   |  20 +-
 .../app/notifications/notifications.component.ts   |   7 +-
 ui/src/app/notifications/notifications.module.ts   |  12 +-
 .../notifications/service/notifications.service.ts |   4 +-
 .../actions/pipeline-actions.component.ts          |   6 +-
 .../pipeline-details.component.scss                |   4 +
 .../pipeline-overview.component.scss               |  19 ++
 .../pipeline-categories-dialog.component.ts        |   3 +-
 .../start-all-pipelines-dialog.component.ts        |   5 +-
 ui/src/app/pipelines/pipelines.component.html      |   2 +-
 ui/src/app/pipelines/pipelines.component.ts        |   4 +-
 ui/src/app/pipelines/pipelines.module.ts           |   3 -
 ui/src/app/services/auth.service.ts                |   9 +-
 ui/src/app/services/dialog-builder.service.ts      |  41 ----
 ui/src/app/services/notification-count-service.ts  |   4 +-
 ui/src/app/services/tour/shepherd.service.ts       |   4 +-
 ui/src/scss/main.scss                              |   4 +-
 ui/src/scss/sp/buttons.scss                        |  17 ++
 ui/src/scss/sp/feedback.ng1.scss                   |   2 -
 ui/src/scss/sp/sp-theme.scss                       |  17 ++
 98 files changed, 907 insertions(+), 1623 deletions(-)
 create mode 100644 ui/deployment/app-routing.module.mst
 delete mode 100644 ui/deployment/app.module.mst
 copy ui/{src/app/core-v2/components/base-navigation.component.ts => deployment/base-navigation.component.mst} (66%)
 delete mode 100644 ui/deployment/state.config.mst
 delete mode 100644 ui/deployment/toolbar.controller.mst
 delete mode 100644 ui/deployment/version.service.mst
 copy ui/src/app/{platform-services/apis/commons.service.ts => _guards/already-configured.can-activate.guard.ts} (62%)
 create mode 100644 ui/src/app/_guards/auth.can-activate-children.guard.ts
 create mode 100644 ui/src/app/_guards/base-configured.can-activate.guard.ts
 copy ui/src/app/{platform-services/apis/commons.service.ts => _guards/configured.can-activate.guard.ts} (63%)
 create mode 100644 ui/src/app/_guards/logged-in.can-activate.guard.ts
 delete mode 100644 ui/src/app/core-v2/components/toolbar/toolbar.component.html
 delete mode 100644 ui/src/app/core-v2/core.module.ts
 delete mode 100644 ui/src/app/core/button/button.directive.ts
 rename ui/src/app/{core-v2 => core}/components/base-navigation.component.ts (62%)
 rename ui/src/app/{core-v2 => core}/components/feedback/feedback.component.html (83%)
 rename ui/src/app/{core-v2 => core}/components/feedback/feedback.component.ts (92%)
 rename ui/src/app/{core-v2 => core}/components/iconbar/iconbar.component.html (52%)
 rename ui/src/app/{core-v2 => core}/components/iconbar/iconbar.component.ts (86%)
 rename ui/src/app/{core-v2 => core}/components/streampipes/streampipes.component.html (100%)
 rename ui/src/app/{core-v2 => core}/components/streampipes/streampipes.component.scss (100%)
 rename ui/src/app/{core-v2 => core}/components/streampipes/streampipes.component.ts (100%)
 create mode 100644 ui/src/app/core/components/toolbar/toolbar.component.html
 copy ui/src/app/{app-transport-monitoring/model/parcel-metrics-event.model.ts => core/components/toolbar/toolbar.component.scss} (91%)
 rename ui/src/app/{core-v2 => core}/components/toolbar/toolbar.component.ts (51%)
 delete mode 100644 ui/src/app/core/http-provider.config.ts
 delete mode 100644 ui/src/app/core/icon-provider.config.ts
 delete mode 100644 ui/src/app/core/md-theming-provider.config.ts
 delete mode 100644 ui/src/app/core/prism/nag-prism.directive.ts
 delete mode 100644 ui/src/app/core/root-scope-delegate.decorator.ts
 delete mode 100644 ui/src/app/layout/app.controller.ts
 delete mode 100644 ui/src/app/layout/layout.module.ts
 delete mode 100644 ui/src/app/services/dialog-builder.service.ts


[incubator-streampipes] 04/11: [STREAMPIPES-193] Fix layout bug in pipeline details view

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

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

commit 265fb3831224cd010c2a2003a776169bcec15de4
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 13 23:32:01 2020 +0200

    [STREAMPIPES-193] Fix layout bug in pipeline details view
---
 ui/src/app/core-v2/components/base-navigation.component.ts          | 2 +-
 .../components/actions/pipeline-actions.component.ts                | 6 +++---
 ui/src/app/pipeline-details/pipeline-details.component.scss         | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/core-v2/components/base-navigation.component.ts b/ui/src/app/core-v2/components/base-navigation.component.ts
index 8b2ac9a..29ac724 100644
--- a/ui/src/app/core-v2/components/base-navigation.component.ts
+++ b/ui/src/app/core-v2/components/base-navigation.component.ts
@@ -82,7 +82,7 @@ export abstract class BaseNavigationComponent {
   }
 
   onInit() {
-    this.activePage = "";
+    this.activePage = this.Router.url.replace("/", "");
     this.activePageName = this.getPageTitle(this.activePage);
     this.Router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
diff --git a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
index eff9fe6..ca6bad1 100644
--- a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
+++ b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
@@ -19,6 +19,7 @@
 import {Component, EventEmitter, Inject, Input, OnInit, Output} from "@angular/core";
 import {PipelineOperationsService} from "../../../pipelines/services/pipeline-operations.service";
 import {Pipeline} from "../../../core-model/gen/streampipes-model";
+import {Router} from "@angular/router";
 
 @Component({
     selector: 'pipeline-actions',
@@ -36,8 +37,7 @@ export class PipelineActionsComponent implements OnInit {
     reloadPipelineEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
     constructor(public pipelineOperationsService: PipelineOperationsService,
-                @Inject('$state') private $state) {
-        this.$state = $state;
+                private Router: Router) {
     }
 
     ngOnInit() {
@@ -54,7 +54,7 @@ export class PipelineActionsComponent implements OnInit {
     }
 
     switchToPipelineView() {
-        this.$state.go("streampipes.pipelines");
+        this.Router.navigate(["pipelines"]);
     }
 
     startPipeline() {
diff --git a/ui/src/app/pipeline-details/pipeline-details.component.scss b/ui/src/app/pipeline-details/pipeline-details.component.scss
index 58ba04b..a375af7 100644
--- a/ui/src/app/pipeline-details/pipeline-details.component.scss
+++ b/ui/src/app/pipeline-details/pipeline-details.component.scss
@@ -16,3 +16,7 @@
  *
  */
 
+.md-padding {
+  padding: 10px;
+}
+


[incubator-streampipes] 08/11: [STREAMPIPES-193] Fix appearance of feedback component

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

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

commit d393e0565f66ea8a692cd5d6061e4ffdcb1a12a0
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 14 19:35:37 2020 +0200

    [STREAMPIPES-193] Fix appearance of feedback component
---
 .../app-asset-monitoring.module.ts                 |  5 --
 ui/src/app/app-overview/app-overview.module.ts     |  5 --
 ui/src/app/app-routing.module.ts                   |  2 +
 .../app-transport-monitoring.module.ts             |  5 --
 ui/src/app/connect/connect.module.ts               |  1 -
 .../components/feedback/feedback.component.html    | 13 ++---
 .../components/feedback/feedback.component.ts      |  4 +-
 .../components/toolbar/toolbar.component.html      | 40 +++++++++------
 .../components/toolbar/toolbar.component.scss}     | 25 ++-------
 .../components/toolbar/toolbar.component.ts        | 60 +++-------------------
 ui/src/app/data-explorer/data-explorer.module.ts   |  5 --
 ui/src/app/home/home.component.ts                  |  7 ++-
 ui/src/app/home/home.module.ts                     | 18 +------
 ui/src/app/info/about/about.component.css          |  4 ++
 ui/src/app/info/about/about.component.html         |  6 +--
 ui/src/app/notifications/notifications.module.ts   |  5 --
 ui/src/scss/sp/feedback.ng1.scss                   |  2 -
 17 files changed, 60 insertions(+), 147 deletions(-)

diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index ec8ff58..a1260a8 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -65,11 +65,6 @@ import {streamPipesStompConfig} from "../dashboard/services/websocket.config";
         RestService,
         ShapeService,
         {
-            provide: 'RestApi',
-            useFactory: ($injector: any) => $injector.get('RestApi'),
-            deps: ['$injector'],
-        },
-        {
             provide: InjectableRxStompConfig,
             useValue: streamPipesStompConfig
         },
diff --git a/ui/src/app/app-overview/app-overview.module.ts b/ui/src/app/app-overview/app-overview.module.ts
index 03dc7f7..7976491 100644
--- a/ui/src/app/app-overview/app-overview.module.ts
+++ b/ui/src/app/app-overview/app-overview.module.ts
@@ -47,11 +47,6 @@ import { AppOverviewComponent } from './app-overview.component';
         AppOverviewComponent,
     ],
     providers: [
-        {
-            provide: 'RestApi',
-            useFactory: ($injector: any) => $injector.get('RestApi'),
-            deps: ['$injector'],
-        }
     ],
     entryComponents: [
         AppOverviewComponent
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index 03bb8d0..cc9df99 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -37,6 +37,7 @@ import {ConfiguredCanActivateGuard} from "./_guards/configured.can-activate.guar
 import {StartupComponent} from "./login/components/startup/startup.component";
 import {AlreadyConfiguredCanActivateGuard} from "./_guards/already-configured.can-activate.guard";
 import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
+import {InfoComponent} from "./info/info.component";
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
@@ -53,6 +54,7 @@ const routes: Routes = [
       { path: 'dataexplorer', component: DataExplorerComponent },
       { path: 'editor', component: EditorComponent },
       { path: 'pipelines', component: PipelinesComponent },
+      { path: 'info', component: InfoComponent },
       { path: 'pipeline-details', component: PipelineDetailsComponent }
     ], canActivateChild: [AuthCanActivateChildrenGuard] }
 ];
diff --git a/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts b/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
index 828727f..143336a 100644
--- a/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
+++ b/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
@@ -69,11 +69,6 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
     providers: [
         AppTransportMonitoringRestService,
         TimestampConverterService,
-        {
-            provide: 'RestApi',
-            useFactory: ($injector: any) => $injector.get('RestApi'),
-            deps: ['$injector'],
-        }
     ],
     entryComponents: [
         AppTransportMonitoringComponent
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 998027c..a6c6efd 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -174,7 +174,6 @@ import {TourProviderService} from "../services/tour/tour-provider.service";
         StaticPropertyUtilService,
         DataMarketplaceService,
         IconService,
-        ShepherdService,
         UnitProviderService,
         DisplayRecommendedPipe,
         TimestampPipe,
diff --git a/ui/src/app/core-v2/components/feedback/feedback.component.html b/ui/src/app/core-v2/components/feedback/feedback.component.html
index 974706a..0c6acb2 100644
--- a/ui/src/app/core-v2/components/feedback/feedback.component.html
+++ b/ui/src/app/core-v2/components/feedback/feedback.component.html
@@ -16,25 +16,26 @@
   ~
   -->
 
-<div class="feedback-container md-whiteframe-z1">
+<div class="feedback-container" (click) = "$event.stopPropagation()">
     <div fxLayout="column" fxFlex="100" *ngIf="!sendingFeedback">
         <div fxLayout="column" fxFlex="50" fxLayoutAlign="start center">
             <div class="feedback-title">We welcome your feedback!</div>
         </div>
         <div fxLayout="column" fxFlex="40" fxLayoutAlign="start center" style="margin-bottom:20px;">
-            <div class="feedback-explainer">Your feedback helps us to improve StreamPipes.<br/>
-                Features you'd like to see, bugs you've found or things you like - tell us what you think!
+            <div fxFlex="100" class="feedback-explainer">
+                <span>Your feedback helps us to improve StreamPipes.</span>
+                <span>Features you'd like to see, bugs you've found or things you like - tell us what you think!</span>
             </div>
         </div>
         <div fxLayout="column" fxFlex="40" fxLayoutAlign="start center" style="margin-bottom:20px;">
-            <mat-form-field class="md-block feedback-width-100 feedback-font-size-small">
+            <mat-form-field class="feedback-width-100 feedback-font-size-small">
                 <label>Your feedback</label>
                 <textarea matInput [(ngModel)]="feedback.feedbackText" maxlength="500" rows="5"></textarea>
             </mat-form-field>
         </div>
         <div fxLayout="column" fxFlex="40" fxLayoutAlign="end center">
             <div fxLayout="row" fxLayoutAlign="end end">
-                <button mat-button mat-raised-button class="mat-basic" (click)="closeDialog()">
+                <button mat-button mat-raised-button class="mat-basic" (click)="closeDialog()" style="margin-right:10px;">
                     Close
                 </button>
                 <button mat-button mat-raised-button color="primary" type="submit"
@@ -44,7 +45,7 @@
             </div>
         </div>
     </div>
-    <div fxLayout="column" *ngIf="sendingFeedback" class="feedback-height-100">
+    <div fxFlex="100" fxLayout="column" *ngIf="sendingFeedback" class="feedback-height-100">
         <div *ngIf="!sendingFeedbackFinished" class="feedback-height-100">
             <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxLayoutFill>
                 <mat-spinner [mode]="'indeterminate'" [diameter]="96"></mat-spinner>
diff --git a/ui/src/app/core-v2/components/feedback/feedback.component.ts b/ui/src/app/core-v2/components/feedback/feedback.component.ts
index 6ce1e40..11ebd11 100644
--- a/ui/src/app/core-v2/components/feedback/feedback.component.ts
+++ b/ui/src/app/core-v2/components/feedback/feedback.component.ts
@@ -36,7 +36,7 @@ export class FeedbackComponent implements OnInit {
     feedbackUrl = "";
     debugFeedbackUrl = "";
 
-    targetEmail = "users@streampipes.apache.org";
+    targetEmail = "dev@streampipes.apache.org";
 
     constructor() {
     }
@@ -48,6 +48,8 @@ export class FeedbackComponent implements OnInit {
 
     closeDialog() {
         this.closeFeedbackEmitter.emit();
+        this.sendingFeedback = false;
+        this.sendingFeedbackFinished = false;
     }
 
     sendMail(){
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.html b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
index 0ed1f1b..759526a 100644
--- a/ui/src/app/core-v2/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
@@ -31,24 +31,32 @@
         <span fxFlex></span>
         <div fxFlex="40" fxLayout fxLayoutAlign="end center" *ngIf="authenticated" style="height:100%;">
             <div style="height:100%;">
-                <div [ngStyle]="feedbackMenuBackground" fxLayout fxLayoutAlign="center center" style="height: 100%;">
-                <button mat-button mat-icon-button
-                        matTooltip="Feedback" matTooltipPosition="below"
-                        [ngClass]="feedbackOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" (click)="toggleFeedback()" style="min-width:0px;" layout layout-align="center center">
-                    <i [ngStyle]="feedbackMenuIconColor" class="material-icons">feedback</i>
-                </button>
+                <div [ngStyle]="feedbackOpen.menuOpen ? {'background-color': 'white'} : {'background-color': '#39b54a'}" fxLayout fxLayoutAlign="center center" style="height: 100%;">
+                    <button mat-button mat-icon-button
+                            [matMenuTriggerFor]="feedbackMenu"
+                            #feedbackOpen="matMenuTrigger"
+                            matTooltip="Feedback" matTooltipPosition="below"
+                            [ngClass]="feedbackOpen.menuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;" fxLayout fxLayoutAlign="center center">
+                        <i [ngStyle]="feedbackOpen.menuOpen ? {'color': '#39b54a'} : {'color': 'white'}" class="material-icons">feedback</i>
+                    </button>
+                </div>
+            </div>
+            <mat-menu #feedbackMenu="matMenu" style="max-width: none;" class="feedback-menu-content">
+                <feedback (closeFeedbackEmitter)="closeFeedbackWindow()"></feedback>
+            </mat-menu>
+            <div style="height:100%;">
+                <div [ngStyle]="accountMenuOpen.menuOpen ? {'background-color': 'white'} : {'background-color': '#39b54a'}" fxLayout fxLayoutAlign="center center" style="height: 100%;">
+                    <button mat-button mat-icon-button
+                            fxLayout fxLayoutAlign="center center"
+                            [ngClass]="accountMenuOpen.menuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;"
+                            [matMenuTriggerFor]="menu"
+                            #accountMenuOpen="matMenuTrigger"
+                            matTooltip="User Preferences" matTooltipPosition="below">
+                        <i [ngStyle]="accountMenuOpen.menuOpen ? {'color': '#39b54a'} : {'color': 'white'}" class="material-icons">account_circle</i>
+                    </button>
                 </div>
-                <feedback style="position:relative;left: -348px;" *ngIf="feedbackOpen" (closeFeedbackEmitter)="closeFeedbackWindow()"></feedback>
             </div>
-            <button mat-button mat-icon-button
-                    [ngClass]="accountMenuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;"
-                    [matMenuTriggerFor]="menu"
-                    matTooltip="User Preferences" matTooltipPosition="below"
-                    (menuOpened)="openMenu()" (menuClosed)="closeMenu()">
-                <i [ngStyle]="accountMenuIconColor" class="material-icons">account_circle</i>
-            </button>
-            <mat-menu #menu="matMenu" id="account" [ngStyle]="accountMenuBackground"
-                      md-position-mode="target-right target" md-offset="8 52" style="margin:inherit;height:100%;" fxLayout fxLayoutAlign="center center">
+            <mat-menu #menu="matMenu" id="account">
                 <button mat-menu-item (click)="openInfo()" style="min-width:0px;">
                     <mat-icon aria-label="Info">help</mat-icon>
                     Info
diff --git a/ui/src/app/services/dialog-builder.service.ts b/ui/src/app/core-v2/components/toolbar/toolbar.component.scss
similarity index 59%
rename from ui/src/app/services/dialog-builder.service.ts
rename to ui/src/app/core-v2/components/toolbar/toolbar.component.scss
index 711203f..61efca3 100644
--- a/ui/src/app/services/dialog-builder.service.ts
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.scss
@@ -16,26 +16,7 @@
  *
  */
 
-import * as angular from 'angular';
 
-export class DialogBuilder {
-
-    constructor() {
-
-    }
-
-    // TODO: Can't resolve
-    getDialogTemplate(controller, template) {
-        return {
-            controller: controller,
-            controllerAs: "ctrl",
-            bindToController: true,
-            template: template,
-            parent: angular.element(document.body),
-            clickOutsideToClose: false,
-            //scope: this.$scope,
-            //rootScope: this.$rootScope,
-            //preserveScope: true
-        }
-    }
-}
+::ng-deep .cdk-overlay-pane .feedback-menu-content{
+  min-width:500px;
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
index 9b2585d..f20d134 100644
--- a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
@@ -16,29 +16,22 @@
  *
  */
 
-import {Component, OnInit} from "@angular/core";
+import {Component, OnInit, ViewChild} from "@angular/core";
 import {BaseNavigationComponent} from "../base-navigation.component";
 import {Router} from "@angular/router";
 import {RestApi} from "../../../services/rest-api.service";
 import {AuthStatusService} from "../../../services/auth-status.service";
+import {MatMenuTrigger} from "@angular/material/menu";
 
 @Component({
   selector: 'toolbar',
   templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
 })
 export class ToolbarComponent extends BaseNavigationComponent implements OnInit {
 
-  feedbackOpen: boolean = false;
-  accountMenuOpen: boolean = false;
-
-  whiteColor: string = "#FFFFFF";
-  greenColor: string = "#39b54a";
-
-  accountMenuBackground: any = this.makeColor('background-color', this.greenColor);
-  accountMenuIconColor: any = this.makeColor('color', this.whiteColor);
-
-  feedbackMenuBackground: any = this.makeColor('background-color', this.greenColor);
-  feedbackMenuIconColor: any = this.makeColor('color', this.whiteColor);
+  @ViewChild('feedbackOpen') feedbackOpen: MatMenuTrigger;
+  @ViewChild('accountMenuOpen') accountMenuOpen: MatMenuTrigger;
 
   constructor(Router: Router,
               private RestApi: RestApi,
@@ -49,47 +42,10 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit
   ngOnInit(): void {
     super.onInit();
   }
-  
-  openMenu() {
-    this.accountMenuOpen = true;
-  }
-  
-  closeMenu() {
-    this.accountMenuOpen = false;
-  }
-
-  makeColor(type: string, color: string) {
-    return {[type]: color};
-  }
-
-  toggleFeedback() {
-    this.feedbackOpen = !this.feedbackOpen;
-    this.updateFeedbackColors();
-  }
 
   closeFeedbackWindow() {
-    this.updateFeedbackColors();
-    this.feedbackOpen = false;
-  }
-
-  triggerAccountMenu($mdMenu, $event) {
-    this.updateAccountColors();
-    this.accountMenuOpen = true;
-    $mdMenu.open($event)
-  }
-
-  updateAccountColors() {
-    this.accountMenuBackground = this.getNewColor('background-color', this.accountMenuBackground);
-    this.accountMenuIconColor = this.getNewColor('color', this.accountMenuIconColor);
-  }
-
-  updateFeedbackColors() {
-    this.feedbackMenuBackground = this.getNewColor('background-color', this.feedbackMenuBackground);
-    this.feedbackMenuIconColor = this.getNewColor('color', this.feedbackMenuIconColor);
-  }
-
-  getNewColor(type: string, currentColor: any) {
-    return currentColor[type] == this.greenColor ? this.makeColor(type, this.whiteColor) : this.makeColor(type, this.greenColor);
+    //this.feedbackOpen = false;
+    this.feedbackOpen.closeMenu();
   }
 
   openDocumentation() {
@@ -97,7 +53,7 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit
   };
 
   openInfo() {
-    this.Router.navigateByUrl("info");
+    this.Router.navigate(["info"]);
     this.activePage = "Info";
   }
 
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 4ccff1a..9164145 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -148,11 +148,6 @@ export const MY_NATIVE_FORMATS = {
     ResizeService,
     RefreshDashboardService,
     SemanticTypeUtilsService,
-    {
-      provide: 'RestApi',
-      useFactory: ($injector: any) => $injector.get('RestApi'),
-      deps: ['$injector']
-    },
     ElementIconText,
     {
       provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS
diff --git a/ui/src/app/home/home.component.ts b/ui/src/app/home/home.component.ts
index b4b5213..e832263 100644
--- a/ui/src/app/home/home.component.ts
+++ b/ui/src/app/home/home.component.ts
@@ -19,6 +19,7 @@
 import {Component} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {HomeService} from './home.service';
+import {Router} from "@angular/router";
 
 @Component({
     templateUrl: './home.component.html',
@@ -28,7 +29,9 @@ export class HomeComponent {
 
     serviceLinks = [];
 
-    constructor(private homeService: HomeService, private sanitizer: DomSanitizer/*, private stateService: StateService*/) {
+    constructor(private homeService: HomeService,
+                private sanitizer: DomSanitizer,
+                private Router: Router) {
         this.serviceLinks = this.homeService.getServiceLinks();
     }
 
@@ -40,7 +43,7 @@ export class HomeComponent {
         if (link.link.newWindow) {
             window.open(link.link.value);
         } else {
-            //this.stateService.go(link.link.value);
+            this.Router.navigate([link.link.value]);
         }
     }
 
diff --git a/ui/src/app/home/home.module.ts b/ui/src/app/home/home.module.ts
index 445f3c8..4e3e47d 100644
--- a/ui/src/app/home/home.module.ts
+++ b/ui/src/app/home/home.module.ts
@@ -38,23 +38,7 @@ import {RestApi} from "../services/rest-api.service";
         StatusComponent
     ],
     providers: [
-        HomeService,
-        RestApi,
-        {
-            provide: '$http',
-            useFactory: ($injector: any) => $injector.get('$http'),
-            deps: ['$injector'],
-        },
-        {
-            provide: 'apiConstants',
-            useFactory: ($injector: any) => $injector.get('apiConstants'),
-            deps: ['$injector'],
-        },
-        {
-            provide: 'AuthStatusService',
-            useFactory: ($injector: any) => $injector.get('AuthStatusService'),
-            deps: ['$injector'],
-        },
+        HomeService
     ],
     entryComponents: [
         HomeComponent
diff --git a/ui/src/app/info/about/about.component.css b/ui/src/app/info/about/about.component.css
index 9c12245..c05e1cc 100644
--- a/ui/src/app/info/about/about.component.css
+++ b/ui/src/app/info/about/about.component.css
@@ -24,4 +24,8 @@
     margin-top:20px;
     margin-left:auto;
     margin-right:auto;
+}
+
+.p-10 {
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/ui/src/app/info/about/about.component.html b/ui/src/app/info/about/about.component.html
index b3b7c87..ff653a2 100644
--- a/ui/src/app/info/about/about.component.html
+++ b/ui/src/app/info/about/about.component.html
@@ -28,7 +28,7 @@
             <div class="assemblyOptions sp-blue-bg" style="padding:5px;">
                 <h4>Resources</h4>
             </div>
-            <div class="sp-blue-border md-padding">
+            <div class="sp-blue-border p-10">
                 <ul>
                     <li>
                         <div fxLayout="row fill" fxFlex="100">
@@ -88,7 +88,7 @@
             <div class="assemblyOptions sp-blue-bg" style="padding:5px;">
                 <h4>Community & Support</h4>
             </div>
-            <div class="sp-blue-border md-padding">
+            <div class="sp-blue-border p-10">
                 <ul>
                     <li>
                         <div fxLayout="row fill" fxFlex="100">
@@ -123,7 +123,7 @@
                             </div>
                             <div fxFlex="95" fxLayoutAlign="start center">
                                 <h5>If you like
-                                    StreamPipes, give us a star at <a
+                                    StreamPipes, give us a star on <a
                                             href="https://github.com/apache/incubator-streampipes">Github</a>
                                 </h5>
                             </div>
diff --git a/ui/src/app/notifications/notifications.module.ts b/ui/src/app/notifications/notifications.module.ts
index 502e3ff..9a3f74f 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -44,11 +44,6 @@ import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@s
 	providers: [
 		NotificationsService,
 		{
-			provide: 'RestApi',
-			useFactory: ($injector: any) => $injector.get('RestApi'),
-			deps: ['$injector'],
-		},
-		{
 			provide: RxStompService,
 			useFactory: rxStompServiceFactory,
 			deps: [InjectableRxStompConfig]
diff --git a/ui/src/scss/sp/feedback.ng1.scss b/ui/src/scss/sp/feedback.ng1.scss
index 482fe1b..f8e9b96 100644
--- a/ui/src/scss/sp/feedback.ng1.scss
+++ b/ui/src/scss/sp/feedback.ng1.scss
@@ -20,9 +20,7 @@
 
 .feedback-container {
   font-size:14pt;
-  position: absolute;
   background: white;
-  width: 400px;
   height: 600px;
   z-index: 100;
   //border-left: 2px solid $sp-color-primary;


[incubator-streampipes] 09/11: [STREAMPIPES-193] Fix minor layout bug in pipeline element installation module

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

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

commit e050d9f6f797a5ae170f79d4c51f10947eb943c8
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Aug 15 07:06:50 2020 +0200

    [STREAMPIPES-193] Fix minor layout bug in pipeline element installation module
---
 ui/src/app/add/add.component.html                          | 14 +++++++++-----
 ui/src/app/add/add.component.ts                            |  8 ++++++++
 .../components/endpoint-item/endpoint-item.component.html  |  6 ++++--
 .../components/endpoint-item/endpoint-item.component.ts    |  6 ++++--
 ui/src/app/pipelines/pipelines.component.html              |  2 +-
 ui/src/app/pipelines/pipelines.component.ts                |  1 -
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/add/add.component.html b/ui/src/app/add/add.component.html
index ef57b48..58f07a9 100644
--- a/ui/src/app/add/add.component.html
+++ b/ui/src/app/add/add.component.html
@@ -36,25 +36,29 @@
     <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="page-container-padding-inner" *ngIf="endpointItemsLoadingComplete" >
         <div fxLayoutAlign="start start" fxLayout="column">
             <div fxFlex="100" fxLayout="row" style="margin-bottom:20px;">
-                <button mat-button mat-flat-button color="primary" (click)="selectAll(true)" class="mr-10">
+                <button mat-button mat-raised-button class="mat-basic mr-10" (click)="selectAll(true)">
                     <i class="material-icons">done</i>
                     &nbsp;Select all
                 </button>
-                <button mat-button mat-flat-button color="primary" (click)="selectAll(false)" class="mr-10">
+                <button mat-button mat-raised-button class="mat-basic mr-10" (click)="selectAll(false)">
                     <i class="material-icons">clear</i>
                     &nbsp;Select none
                 </button>
-                <button mat-button mat-raised-button color="primary" (click)="installSelected()" class="mr-10">
+                <button mat-button mat-raised-button color="primary"
+                        [disabled]="selectedEndpointItems.length === 0"
+                        (click)="installSelected()" class="mr-10">
                     <i class="material-icons">cloud_download</i>
                     &nbsp;Install selected
                 </button>
-                <button mat-button mat-raised-button color="primary" (click)="uninstallSelected()">
+                <button mat-button mat-raised-button color="primary"
+                        [disabled]="selectedEndpointItems.length === 0"
+                        (click)="uninstallSelected()">
                     <i class="material-icons">delete</i>
                     &nbsp;Uninstall selected
                 </button>
             </div>
         </div>
-        <div fxLayout="row wrap">
+        <div fxLayout="row wrap" style="width: 100%;">
             <endpoint-item fxFlex="33"
                            [itemSelected]="endpointItem.selected"
                            [item]="endpointItem"
diff --git a/ui/src/app/add/add.component.ts b/ui/src/app/add/add.component.ts
index 5c4659a..3e299bd 100644
--- a/ui/src/app/add/add.component.ts
+++ b/ui/src/app/add/add.component.ts
@@ -41,6 +41,8 @@ export class AddComponent implements OnInit {
 
     selectedCategoryIndex: number = 0;
 
+    selectedEndpointItems: any[] = [];
+
     constructor(private RestApi: RestApi,
                 private AddService: AddService,
                 private DialogService: DialogService,
@@ -57,10 +59,16 @@ export class AddComponent implements OnInit {
     }
 
     toggleSelected(endpointItem) {
+        if (this.selectedEndpointItems.some(item => item === endpointItem.uri)) {
+            this.selectedEndpointItems.splice(this.selectedEndpointItems.indexOf(endpointItem.uri), 1);
+        } else {
+            this.selectedEndpointItems.push(endpointItem.uri);
+        }
         endpointItem.selected = !endpointItem.selected;
     }
 
     setSelectedTab(index: number) {
+        this.selectedEndpointItems = [];
         this.selectedTab = this.availableTypes[index];
     }
 
diff --git a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
index 140e894..33897dd 100644
--- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
+++ b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
@@ -27,10 +27,12 @@
                 <span class="{{itemTypeStyle}}">{{itemTypeTitle}}</span>
             </div>
             <div fxFlex fxLayoutAlign="start end" class="ml-5">
-                <button class="small-button-add" mat-button mat-raised-button color="primary" (click)="installSingleElement(item)" *ngIf="!item.installed">
+                <button class="small-button-add" mat-button mat-raised-button color="primary"
+                        (click)="installSingleElement($event, item)" *ngIf="!item.installed">
                     <span>&nbsp;Install</span>
                 </button>
-                <button class="small-button-add-inverted" mat-button mat-raised-button (click)="uninstallSingleElement(item)" *ngIf="item.installed">
+                <button class="small-button-add-inverted" mat-button mat-raised-button
+                        (click)="uninstallSingleElement($event, item)" *ngIf="item.installed">
                     <span>&nbsp;Uninstall</span>
                 </button>
                 <div *ngIf="item.installed" style="margin-left:5px;">
diff --git a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts b/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
index e43f17d..e6c1f92 100644
--- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
+++ b/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
@@ -90,16 +90,18 @@ export class EndpointItemComponent implements OnInit {
     }
   }
 
-  installSingleElement(endpointItem) {
+  installSingleElement(event: Event, endpointItem) {
     let endpointItems = [];
     endpointItems.push(endpointItem);
     this.triggerInstallation.emit({endpointItems: endpointItems, install: true});
+    event.stopPropagation();
   }
 
-  uninstallSingleElement(endpointItem) {
+  uninstallSingleElement(event: Event, endpointItem) {
     let endpointItems = [];
     endpointItems.push(endpointItem);
     this.triggerInstallation.emit({endpointItems: endpointItems, install: false});
+    event.stopPropagation();
   }
 
   refresh(elementUri) {
diff --git a/ui/src/app/pipelines/pipelines.component.html b/ui/src/app/pipelines/pipelines.component.html
index 1cb7d42..4d8f8a6 100644
--- a/ui/src/app/pipelines/pipelines.component.html
+++ b/ui/src/app/pipelines/pipelines.component.html
@@ -31,7 +31,7 @@
         </div>
     </div>
     <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
-        <div layout="row">
+        <div fxLayout="row">
             <button class="mr-10" mat-button mat-raised-button color="primary" (click)="startAllPipelines(true)"
                        [disabled]="checkCurrentSelectionStatus(false)">Start all pipelines
             </button>
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index 6016fe0..cebc4a0 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -133,7 +133,6 @@ export class PipelinesComponent implements OnInit {
                 }
             }
         });
-
         return active;
     }
 


[incubator-streampipes] 11/11: [STREAMPIPES-193] Migrate prebuild steps

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

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

commit 8a9a740fb3b27a69c54369b8fef7e43145737242
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Aug 15 23:53:19 2020 +0200

    [STREAMPIPES-193] Migrate prebuild steps
---
 .gitignore                                         |   6 +-
 .../app-routing.module.mst}                        |  29 +--
 ui/deployment/app.module.mst                       |  71 ------
 ui/deployment/appng5.module.mst                    |   5 +-
 .../base-navigation.component.mst}                 |  50 ++--
 ui/deployment/modules.yml                          |  50 ++--
 ui/deployment/prebuild.js                          |  16 +-
 ui/deployment/state.config.mst                     | 170 -------------
 ui/deployment/toolbar.controller.mst               | 267 ---------------------
 ui/deployment/version.service.mst                  |  30 ---
 ui/src/app/app-routing.module.ts                   |  29 +--
 ui/src/app/core-v2/core.module.ts                  |  70 ------
 ui/src/app/core/button/button.directive.ts         | 115 ---------
 .../components/base-navigation.component.ts        |  48 ++--
 .../components/feedback/feedback.component.html    |   0
 .../components/feedback/feedback.component.ts      |   0
 .../components/iconbar/iconbar.component.html      |   0
 .../components/iconbar/iconbar.component.ts        |   0
 .../streampipes/streampipes.component.html         |   0
 .../streampipes/streampipes.component.scss         |   0
 .../streampipes/streampipes.component.ts           |   0
 .../components/toolbar/toolbar.component.html      |   0
 .../components/toolbar/toolbar.component.scss      |   0
 .../components/toolbar/toolbar.component.ts        |   0
 ui/src/app/core/core.module.ts                     |  69 ++++--
 ui/src/app/core/http-provider.config.ts            |  25 --
 ui/src/app/core/icon-provider.config.ts            |  45 ----
 ui/src/app/core/md-theming-provider.config.ts      |  70 ------
 ui/src/app/core/prism/nag-prism.directive.ts       |  63 -----
 ui/src/app/core/root-scope-delegate.decorator.ts   |  28 ---
 ui/src/app/layout/app.controller.ts                |  40 ---
 ui/src/app/layout/layout.module.ts                 |  29 ---
 32 files changed, 149 insertions(+), 1176 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6dfeb0f..3fec30b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -83,12 +83,10 @@ ui/src/assets/lib/apps/*
 
 
 # prebuild
-ui/src/app/app.module.ts
 ui/src/app/appng5.module.ts
-ui/src/app/core/state.config.ts
-ui/src/app/layout/toolbar.controller.ts
+ui/src/app/core/components/base-navigation.component.ts
+ui/src/app/app-routing.module.ts
 ui/src/app/home/home.service.ts
-ui/src/app/services/version/version.service.ts
 
 # compiled output
 ui/dist
diff --git a/ui/src/app/app-routing.module.ts b/ui/deployment/app-routing.module.mst
similarity index 71%
copy from ui/src/app/app-routing.module.ts
copy to ui/deployment/app-routing.module.mst
index 0bc629d..48837a7 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/deployment/app-routing.module.mst
@@ -21,15 +21,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {LoginComponent} from "./login/components/login/login.component";
 import {SetupComponent} from "./login/components/setup/setup.component";
-import {StreampipesComponent} from "./core-v2/components/streampipes/streampipes.component";
-import {EditorComponent} from "./editor/editor.component";
-import {PipelinesComponent} from "./pipelines/pipelines.component";
-import {ConnectComponent} from "./connect/connect.component";
-import {DashboardComponent} from "./dashboard/dashboard.component";
-import {DataExplorerComponent} from "./data-explorer/data-explorer.component";
-import {AppOverviewComponent} from "./app-overview/app-overview.component";
-import {AddComponent} from "./add/add.component";
-import {ConfigurationComponent} from "./configuration/configuration.component";
+import {StreampipesComponent} from "./core/components/streampipes/streampipes.component";
 import {PipelineDetailsComponent} from "./pipeline-details/pipeline-details.component";
 import {StandaloneDashboardComponent} from "./dashboard/components/standalone/standalone-dashboard.component";
 import {AuthCanActivateChildrenGuard} from "./_guards/auth.can-activate-children.guard";
@@ -40,6 +32,12 @@ import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
 import {InfoComponent} from "./info/info.component";
 import {NotificationsComponent} from "./notifications/notifications.component";
 
+{{#modulesActive}}
+{{#ng5}}
+import { {{{ng5_component}}} } from '{{{ng5_componentPath}}}';
+{{/ng5}}
+{{/modulesActive}}
+
 const routes: Routes = [
   { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
   { path: 'setup', component: SetupComponent, canActivate: [AlreadyConfiguredCanActivateGuard] },
@@ -47,15 +45,12 @@ const routes: Routes = [
   { path: 'standalone/:dashboardId', component: StandaloneDashboardComponent },
   { path: '', component: StreampipesComponent, children: [
       { path: '', component: HomeComponent, canActivate: [ConfiguredCanActivateGuard] },
-      { path: 'add', component: AddComponent },
-      { path: 'app-overview', component: AppOverviewComponent },
-      { path: 'connect', component: ConnectComponent },
-      { path: 'configuration', component: ConfigurationComponent },
-      { path: 'dashboard', component: DashboardComponent },
-      { path: 'dataexplorer', component: DataExplorerComponent },
-      { path: 'editor', component: EditorComponent },
+      {{#modulesActive}}
+      {{#ng5}}
+      { path: '{{{link}}}', component: {{{ng5_component}}} },
+      {{/ng5}}
+      {{/modulesActive}}
       { path: 'notifications', component: NotificationsComponent },
-      { path: 'pipelines', component: PipelinesComponent },
       { path: 'info', component: InfoComponent },
       { path: 'pipeline-details', component: PipelineDetailsComponent }
     ], canActivateChild: [AuthCanActivateChildrenGuard] }
diff --git a/ui/deployment/app.module.mst b/ui/deployment/app.module.mst
deleted file mode 100644
index 5865427..0000000
--- a/ui/deployment/app.module.mst
+++ /dev/null
@@ -1,71 +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.
- *
- */
-
-/*
-'use strict';
-
-import * as angular from 'angular';
-
-//import "jquery-ui";
-
-import '@uirouter/angular-hybrid';
-import 'angular-animate';
-
-import spServices from './services/services.module';
-
-import spCore from './core/core.module';
-import spLayout from './layout/layout.module';
-import { SpButtonDirective } from "./core/button/button.directive";
-import mdThemingProviderConfig from "./core/md-theming-provider.config";
-import rootScopeDelegate from "./core/root-scope-delegate.decorator";
-
-{{#modulesActive}}
-{{^ng5}}
-import {{module}} from '{{{path}}}';
-{{/ng5}}
-{{/modulesActive}}
-
-const MODULE_NAME = 'streamPipesApp';
-
-export const Ng1AppModule = angular
-    .module(MODULE_NAME, [
-        spServices,
-        spCore,
-        spLayout,
-        'ui.router',
-        'ui.router.upgrade',
-        'ngAnimate',
-        {{#modulesActive}}
-        {{^ng5}}
-        {{module}},
-        {{/ng5}}
-        {{/modulesActive}}
-    ])
-    .decorator('$rootScope', rootScopeDelegate)
-    .config(['$urlServiceProvider', ($urlService) => $urlService.deferIntercept()])
-    .run(["$rootScope", "$transitions", "RouteTransitionInterceptorService",
-        function ($rootScope, $transitions, RouteTransitionInterceptorService) {
-            $transitions.onBefore({}, transition => {
-              return RouteTransitionInterceptorService.onTransitionStarted(transition);
-            });
-            //window['loading_screen'].finish();
-    }])
-    .config(mdThemingProviderConfig)
-    .directive("spButton", ['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction', ($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) => new SpButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction)]);
-
-    */
\ No newline at end of file
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index ebde9ab..fcbcc5f 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -29,7 +29,7 @@ import { FormsModule } from '@angular/forms';
 import { CustomMaterialModule } from './CustomMaterial/custom-material.module';
 import { AuthStatusService } from './services/auth-status.service';
 
-import { CoreModule } from './core-v2/core.module';
+import { CoreModule } from './core/core.module';
 import { LoginModule } from './login/login.module';
 import { HomeModule } from './home/home.module';
 import { InfoModule } from './info/info.module';
@@ -41,6 +41,8 @@ import { AuthService } from "./services/auth.service";
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { LOADING_BAR_CONFIG } from '@ngx-loading-bar/core';
 
+import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@stomp/ng2-stompjs";
+
 {{#modulesActive}}
 {{#ng5}}
 import { {{{ng5_moduleName}}} } from '{{{path}}}';
@@ -67,6 +69,7 @@ import * as $ from 'jquery';
         AppRoutingModule,
         BrowserModule,
         BrowserAnimationsModule,
+        CoreModule,
         CustomMaterialModule,
         MatGridListModule,
         MatIconModule,
diff --git a/ui/src/app/core-v2/components/base-navigation.component.ts b/ui/deployment/base-navigation.component.mst
similarity index 75%
copy from ui/src/app/core-v2/components/base-navigation.component.ts
copy to ui/deployment/base-navigation.component.mst
index 29ac724..457c9cf 100644
--- a/ui/src/app/core-v2/components/base-navigation.component.ts
+++ b/ui/deployment/base-navigation.component.mst
@@ -32,49 +32,27 @@ export abstract class BaseNavigationComponent {
       title: 'Home',
       icon: 'home'
     },
+    {{#modulesActive}}
+    {{^admin}}
     {
-      link: 'editor',
-      title: 'Editor',
-      icon: 'dashboard'
-    },
-    {
-      link: 'pipelines',
-      title: 'Pipelines',
-      icon: 'play_arrow'
-    },
-    {
-      link: 'connect',
-      title: 'StreamPipes Connect',
-      icon: 'power'
-    },
-    {
-      link: 'dashboard',
-      title: 'Live Dashboard',
-      icon: 'insert_chart'
-    },
-    {
-      link: 'dataexplorer',
-      title: 'Data Explorer',
-      icon: 'search'
-    },
-    {
-      link: 'app-overview',
-      title: 'Apps',
-      icon: 'apps'
+        link: '{{{link}}}',
+        title: '{{{title}}}',
+        icon: '{{{icon}}}'
     },
+    {{/admin}}
+    {{/modulesActive}}
   ];
 
   admin = [
+    {{#modulesActive}}
+    {{#admin}}
     {
-      link: 'add',
-      title: 'Install Pipeline Elements',
-      icon: 'cloud_download'
-    },
-    {
-      link: 'configuration',
-      title: 'Configuration',
-      icon: 'settings'
+        link: '{{{link}}}',
+        title: '{{{title}}}',
+        icon: '{{{icon}}}'
     },
+    {{/admin}}
+    {{/modulesActive}}
   ];
 
   constructor(protected Router: Router) {
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index d8cf60f..cc3d5e3 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -19,13 +19,13 @@ spEditor:
   ng1_controller: ''
   ng5_moduleName: 'EditorModule'
   ng5_component: 'EditorComponent'
-  ng5_componentPath: '../editor/editor.component'
+  ng5_componentPath: './editor/editor.component'
   path: './editor/editor.module'
-  link: 'streampipes.editor'
+  link: 'editor'
   url: '/editor/:pipeline'
   title: 'Editor'
   description: 'editor'
-  icon: 'action:ic_dashboard_24px'
+  icon: 'dashboard'
   homeImage: '/assets/img/home/editor.png'
   admin: false
 spConnect:
@@ -33,13 +33,13 @@ spConnect:
   ng1_templateUrl: ''
   ng5_moduleName: 'ConnectModule'
   ng5_component: 'ConnectComponent'
-  ng5_componentPath: '../connect/connect.component'
+  ng5_componentPath: './connect/connect.component'
   path: './connect/connect.module'
-  link: 'streampipes.connect'
+  link: 'connect'
   url: '/connect'
   title: 'StreamPipes Connect'
   description: 'Missing Description'
-  icon: 'notification:ic_power_24px'
+  icon: 'power'
   homeImage: '/assets/img/home/editor.png'
   admin: False
 spPipelines:
@@ -47,13 +47,13 @@ spPipelines:
   ng1_templateUrl: ''
   ng5_moduleName: 'PipelinesModule'
   ng5_component: 'PipelinesComponent'
-  ng5_componentPath: '../pipelines/pipelines.component'
+  ng5_componentPath: './pipelines/pipelines.component'
   path: './pipelines/pipelines.module'
-  link: 'streampipes.pipelines'
+  link: 'pipelines'
   url: '/pipelines/:pipeline'
   title: 'Pipelines'
   description: 'Pipelines'
-  icon: 'av:ic_play_arrow_24px'
+  icon: 'play_arrow'
   homeImage: '/assets/img/home/pipelines.png'
   admin: False
 spSensors:
@@ -74,13 +74,13 @@ spAdd:
   ng1_templateUrl: ''
   ng5_moduleName: 'AddModule'
   ng5_component: 'AddComponent'
-  ng5_componentPath: '../add/add.component'
+  ng5_componentPath: './add/add.component'
   path: './add/add.module'
-  link: 'streampipes.add'
+  link: 'add'
   url: '/add'
   title: 'Install Pipeline Elements'
   description: 'The marketplace can be used to extend StreamPipes with new algorithms and data sinks'
-  icon: 'file:ic_cloud_download_24px'
+  icon: 'cloud_download'
   homeImage: '/assets/img/home/add.png'
   admin: True
 spConfiguration:
@@ -89,13 +89,13 @@ spConfiguration:
   ng1_controller: ''
   ng5_moduleName: 'ConfigurationModule'
   ng5_component: 'ConfigurationComponent'
-  ng5_componentPath: '../configuration/configuration.component'
+  ng5_componentPath: './configuration/configuration.component'
   path: './configuration/configuration.module'
-  link: 'streampipes.configuration'
+  link: 'configuration'
   url: '/configuration'
   title: 'Configuration'
   description: 'Configuration'
-  icon: 'action:ic_settings_24px'
+  icon: 'settings'
   homeImage: '/assets/img/home/configuration.png'
   admin: True
 spAppOverview:
@@ -104,13 +104,13 @@ spAppOverview:
   ng1_controller: ''
   ng5_moduleName: 'AppOverviewModule'
   ng5_component: 'AppOverviewComponent'
-  ng5_componentPath: '../app-overview/app-overview.component'
+  ng5_componentPath: './app-overview/app-overview.component'
   path: './app-overview/app-overview.module'
-  link: 'streampipes.app-overview'
+  link: 'app-overview'
   url: '/apps'
   title: 'Apps'
-  description: 'app-overview'
-  icon: 'navigation:ic_apps_24px'
+  description: 'App Overview'
+  icon: 'apps'
   homeImage: '/assets/img/home/configuration.png'
   admin: false
 spDashboard:
@@ -119,13 +119,13 @@ spDashboard:
   ng1_controller: ''
   ng5_moduleName: 'DashboardModule'
   ng5_component: 'DashboardComponent'
-  ng5_componentPath: '../dashboard/dashboard.component'
+  ng5_componentPath: './dashboard/dashboard.component'
   path: './dashboard/dashboard.module'
-  link: 'streampipes.dashboard'
+  link: 'dashboard'
   url: '/dashboard'
   title: 'Dashboard'
   description: 'The live dashboard visualizes data in real-time'
-  icon: 'editor:ic_insert_chart_24px'
+  icon: 'insert_chart'
   homeImage: '/assets/img/home/configuration.png'
   admin: false
 spDataExplorer:
@@ -134,12 +134,12 @@ spDataExplorer:
   ng1_controller: ''
   ng5_moduleName: 'DataExplorerModule'
   ng5_component: 'DataExplorerComponent'
-  ng5_componentPath: '../data-explorer/data-explorer.component'
+  ng5_componentPath: './data-explorer/data-explorer.component'
   path: './data-explorer/data-explorer.module'
-  link: 'streampipes.dataexplorer'
+  link: 'dataexplorer'
   url: '/dataexplorer'
   title: 'Data Explorer'
   description: 'data-explorer'
-  icon: 'action:ic_search_24px'
+  icon: 'search'
   homeImage: '/assets/img/home/configuration.png'
   admin: false
\ No newline at end of file
diff --git a/ui/deployment/prebuild.js b/ui/deployment/prebuild.js
index 2118827..443458d 100644
--- a/ui/deployment/prebuild.js
+++ b/ui/deployment/prebuild.js
@@ -79,23 +79,11 @@ for (let module of config.modules) {
     console.log('Active Angular ' + (modules[module]['ng5']===true?5:1) + ' Module: ' + module);
 }
 
-modulesActive.containsPipeline = function() {
-    return function(cv, render) {
-        if (render(cv).includes(":pipeline") != -1) {
-            return "params: {pipeline: null},"
-        }
-
-        return "";
-    }
-};
-
 // Create necessary JavaScript-Files from Template and move to respective Directory
-fs.writeFileSync('src/app/app.module.ts', mustache.render(fs.readFileSync('deployment/app.module.mst', 'utf8').toString(), modulesActive));
 fs.writeFileSync('src/app/appng5.module.ts', mustache.render(fs.readFileSync('deployment/appng5.module.mst', 'utf8').toString(), modulesActive));
-fs.writeFileSync('src/app/core/state.config.ts', mustache.render(fs.readFileSync('deployment/state.config.mst', 'utf8').toString(), modulesActive));
-fs.writeFileSync('src/app/layout/toolbar.controller.ts', mustache.render(fs.readFileSync('deployment/toolbar.controller.mst', 'utf8').toString(), modulesActive));
 fs.writeFileSync('src/app/home/home.service.ts', mustache.render(fs.readFileSync('deployment/home.service.mst', 'utf8').toString(), modulesActive));
-
+fs.writeFileSync('src/app/app-routing.module.ts', mustache.render(fs.readFileSync('deployment/app-routing.module.mst', 'utf8').toString(), modulesActive));
+fs.writeFileSync('src/app/core/components/base-navigation.component.ts', mustache.render(fs.readFileSync('deployment/base-navigation.component.mst', 'utf8').toString(), modulesActive));
 
 // Move Images
 fs.writeFileSync('src/assets/img/login/logo.png', fs.readFileSync(config['login']['logo']));
diff --git a/ui/deployment/state.config.mst b/ui/deployment/state.config.mst
deleted file mode 100644
index 5d5a5b0..0000000
--- a/ui/deployment/state.config.mst
+++ /dev/null
@@ -1,170 +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.
- *
- */
-
-declare const require: any;
-{{#modulesActive}}
-{{#ng5}}
-import { {{{ng5_component}}} } from '{{{ng5_componentPath}}}';
-{{/ng5}}
-{{/modulesActive}}
-import { HomeComponent } from '../home/home.component';
-import { InfoComponent } from '../info/info.component';
-import { LoginComponent } from '../login/components/login/login.component';
-import { SetupComponent } from '../login/components/setup/setup.component';
-import { StartupComponent } from '../login/components/startup/startup.component';
-import { AppContainerComponent } from '../app-container/app-container.component';
-import { StandaloneDashboardComponent } from "../dashboard/components/standalone/standalone-dashboard.component";
-import { NotificationsComponent } from "../notifications/notifications.component";
-import { PipelineDetailsComponent } from '../pipeline-details/pipeline-details.component';
-
-export default function stateConfig($stateProvider, $urlRouterProvider) {
-
-    $urlRouterProvider.otherwise($injector => {
-        var $state = $injector.get('$state');
-        $state.go('streampipes');
-    });
-
-    var spNavbar = {
-            templateUrl: '../../assets/templates/navbar.html',
-    };
-
-    var spIconBar = {
-        templateUrl: '../../assets/templates/iconbar.html',
-    };
-
-    var container = {
-        templateUrl: '../../assets/templates/streampipes.html',
-    };
-
-    $stateProvider
-        .state('streampipes', {
-            url: '/streampipes',
-            views: {
-                'container': container,
-                'spNavbar@streampipes': spNavbar,
-                'spIconBar@streampipes': spIconBar,
-                'spMain@streampipes': {
-                    component: HomeComponent
-                }
-            }
-        })
-        .state('streampipes.pipelineDetails', {
-            url: '/pipelines/:pipeline/details',
-            params: {pipeline: null},
-            views: {
-                'spMain@streampipes': {
-                    component: PipelineDetailsComponent
-                }
-            }
-        })
-        .state('login', {
-            url: '/login/:target?session',
-            params: {target: null},
-            views: {
-                'container': {
-                    component: LoginComponent
-                }
-            }
-        })
-        .state('startup', {
-            url: '/startup',
-            params: {target: null},
-            views: {
-                'container': {
-                    component: StartupComponent
-                }
-            }
-        })
-        .state('streampipes.appcontainer', {
-            url: '/appcontainer',
-            views: {
-              'spMain@streampipes': {
-                component: AppContainerComponent,
-              },
-            },
-        })
-        .state('standalone', {
-            url: '/dashboard/standalone/:dashboardId',
-            params: {dashboardId: null},
-            views: {
-                'container': {
-                    component: StandaloneDashboardComponent
-                }
-            }
-        })
-        .state('setup', {
-            url: '/setup',
-            views: {
-                'container': {
-                    component: SetupComponent
-                }
-            }
-        })
-        .state('streampipes.error', {
-            url: '/error',
-            views: {
-                'spMain@streampipes': {
-                    templateUrl: '../../assets/templates/error.html'
-                }
-            }
-        })
-        .state('streampipes.notifications', {
-            url: '/notifications',
-            views: {
-                'spMain@streampipes': {
-                    component: NotificationsComponent
-                }
-            }
-        })
-        .state('streampipes.info', {
-                    url: '/info',
-                    views: {
-                        'spMain@streampipes': {
-                            component: InfoComponent
-                        }
-                    }
-                })
-        {{#modulesActive}}
-        {{^ng5}}
-        .state('{{{link}}}', {
-            url: '{{{url}}}',
-            {{#containsPipeline}}{{ng1_templateUrl}}{{/containsPipeline}}
-            views: {
-                "spMain@streampipes": {
-                    template: require('{{{ng1_templateUrl}}}')
-                }
-            }
-        })
-        {{/ng5}}
-        {{/modulesActive}}
-        {{#modulesActive}}
-        {{#ng5}}
-        .state('{{{link}}}', {
-            url: '{{{url}}}',
-            {{#containsPipeline}}{{ng1_templateUrl}}{{/containsPipeline}}
-            views: {
-                "spMain@streampipes": {
-                    component: {{{ng5_component}}}
-                }
-            }
-        })
-        {{/ng5}}
-        {{/modulesActive}};
-};
-
-stateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
\ No newline at end of file
diff --git a/ui/deployment/toolbar.controller.mst b/ui/deployment/toolbar.controller.mst
deleted file mode 100644
index 901446b..0000000
--- a/ui/deployment/toolbar.controller.mst
+++ /dev/null
@@ -1,267 +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 { Client } from '@stomp/stompjs';
-import { NotificationCountService } from "../services/notification-count-service";
-import { NotificationItem } from "../notifications/model/notifications.model";
-
-export class ToolbarController {
-    AuthStatusService: any;
-    RestApi: any;
-    $mdSidenav: any;
-    $mdUtil: any;
-    $state: any;
-    $window: any;
-    $location: any;
-    unreadNotifications: any;
-    title: any;
-    menu: any;
-    admin: any;
-    toggleLeft: any;
-    activePage: any;
-    activePageName: any;
-
-    feedbackOpen: boolean = false;
-    accountMenuOpen: boolean = false;
-
-    whiteColor: string = "#FFFFFF";
-    greenColor: string = "#39b54a";
-
-    accountMenuBackground: any = this.makeColor('background-color', this.greenColor);
-    accountMenuIconColor: any = this.makeColor('color', this.whiteColor);
-
-    feedbackMenuBackground: any = this.makeColor('background-color', this.greenColor);
-    feedbackMenuIconColor: any = this.makeColor('color', this.whiteColor);
-
-    constructor($mdSidenav,
-                $mdUtil,
-                RestApi,
-                $state,
-                $window,
-                $location,
-                AuthStatusService,
-                $scope,
-                public NotificationCountService: NotificationCountService) {
-        this.AuthStatusService = AuthStatusService;
-        this.RestApi = RestApi;
-        this.$mdSidenav = $mdSidenav;
-        this.$mdUtil = $mdUtil;
-        this.$state = $state;
-        this.$window = $window;
-        this.$location = $location;
-
-        $scope.$on('$mdMenuClose', (event, menu) => {
-            if (menu[0].id === 'account') {
-                this.updateAccountColors();
-                this.accountMenuOpen = false;
-            }
-        });
-
-        this.unreadNotifications = [];
-        this.title = 'StreamPipes';
-
-
-        this.AuthStatusService.userInfo = {
-            Name: 'D',
-            Avatar: null
-        };
-
-        this.menu = [
-            {
-                link: 'streampipes',
-                title: 'Home',
-                icon: 'action:ic_home_24px'
-            },
-            {{#modulesActive}}
-            {{^admin}}
-            {
-                link: '{{{link}}}',
-                title: '{{{title}}}',
-                icon: '{{{icon}}}'
-            },
-            {{/admin}}
-            {{/modulesActive}}
-        ];
-
-        this.admin = [
-            {{#modulesActive}}
-            {{#admin}}
-            {
-                link: '{{{link}}}',
-                title: '{{{title}}}',
-                icon: '{{{icon}}}'
-            },
-            {{/admin}}
-            {{/modulesActive}}
-        ];
-
-    }
-
-    $onInit() {
-        this.toggleLeft = this.buildToggler('left');
-        this.activePage = this.$state.current.name;
-        this.activePageName = this.getPageTitle(this.activePage);
-        this.NotificationCountService.loadUnreadNotifications();
-        this.connectToBroker();
-    }
-
-
-    authenticated() {
-        return this.AuthStatusService.authenticated;
-    }
-
-    go(path, payload?) {
-        if (payload === undefined) {
-            this.$state.go(path);
-            this.activePage = path;
-            this.$mdSidenav('left').close();
-        } else {
-            this.$state.go(path, payload);
-            this.activePage = path;
-        }
-        this.activePageName = this.getPageTitle(this.activePage);
-    };
-
-    logout() {
-        this.RestApi.logout().then(() => {
-            this.AuthStatusService.user = undefined;
-            this.AuthStatusService.authenticated = false;
-            this.$state.go('login');
-        });
-    };
-
-    openDocumentation() {
-        this.$window.open('https://streampipes.apache.org/docs', '_blank');
-    };
-
-    openInfo() {
-        this.$state.go("streampipes.info");
-        this.activePage = "Info";
-    }
-
-    isActivePage(path) {
-        return (this.$state.current.name == path);
-    }
-
-    getListItemClassName(path) {
-        return this.isActivePage(path) ? "sp-navbar-item-selected" : "sp-navbar-item";
-    }
-
-    getIconClassName(path) {
-        return this.isActivePage(path) ? "sp-navbar-icon-selected" : "sp-navbar-icon";
-    }
-
-    getPageTitle(path) {
-        var allMenuItems = this.menu.concat(this.admin);
-        var currentTitle = 'StreamPipes';
-        allMenuItems.forEach(m => {
-            if (m.link === path) {
-                currentTitle = m.title;
-            }
-        });
-        if (path == 'streampipes.pipelineDetails') {
-            currentTitle = 'Pipeline Details';
-        } else if (path == 'streampipes.edit') {
-            currentTitle = this.menu[0].title;
-        }
-        return currentTitle;
-    }
-
-    buildToggler(navID) {
-        var debounceFn = this.$mdUtil.debounce(() => {
-            this.$mdSidenav(navID)
-                .toggle();
-        }, 300);
-        return debounceFn;
-    }
-
-    getActivePage() {
-        return this.activePage;
-    }
-
-    connectToBroker() {
-        var login = 'admin';
-        var passcode = 'admin';
-        var websocketProtocol = this.$location.protocol() === "http" ? "ws" : "wss";
-        var brokerUrl = websocketProtocol + '://' + this.$location.host() + ':' + this.$location.port() + '/streampipes/ws';
-        var inputTopic = '/topic/org.apache.streampipes.notifications.' + this.AuthStatusService.email;
-
-        let stompClient = new Client({
-            brokerURL: brokerUrl,
-            connectHeaders: {
-                login: login,
-                passcode: passcode
-            },
-            reconnectDelay: 5000
-        });
-
-        stompClient.onConnect = (frame) => {
-
-            stompClient.subscribe(inputTopic, message => {
-                this.NotificationCountService.increaseNotificationCount(JSON.parse(message.body) as NotificationItem);
-            });
-        };
-
-        stompClient.activate();
-    }
-
-    triggerAccountMenu($mdMenu, $event) {
-        this.updateAccountColors();
-        this.accountMenuOpen = true;
-        $mdMenu.open($event)
-    }
-
-    updateAccountColors() {
-        this.accountMenuBackground = this.getNewColor('background-color', this.accountMenuBackground);
-        this.accountMenuIconColor = this.getNewColor('color', this.accountMenuIconColor);
-    }
-
-    updateFeedbackColors() {
-        this.feedbackMenuBackground = this.getNewColor('background-color', this.feedbackMenuBackground);
-        this.feedbackMenuIconColor = this.getNewColor('color', this.feedbackMenuIconColor);
-    }
-
-    getNewColor(type: string, currentColor: any) {
-        return currentColor[type] == this.greenColor ? this.makeColor(type, this.whiteColor) : this.makeColor(type, this.greenColor);
-    }
-
-    makeColor(type: string, color: string) {
-        return {[type]: color};
-    }
-
-    toggleFeedback() {
-        this.feedbackOpen = !this.feedbackOpen;
-        this.updateFeedbackColors();
-    }
-
-    closeFeedbackWindow() {
-        this.updateFeedbackColors();
-        this.feedbackOpen = false;
-    }
-
-};
-
-ToolbarController.$inject = ['$mdSidenav',
-    '$mdUtil',
-    'RestApi',
-    '$state',
-    '$window',
-    '$location',
-    'AuthStatusService',
-    '$scope',
-    'NotificationCountService'];
\ No newline at end of file
diff --git a/ui/deployment/version.service.mst b/ui/deployment/version.service.mst
deleted file mode 100644
index cbec15d..0000000
--- a/ui/deployment/version.service.mst
+++ /dev/null
@@ -1,30 +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 { Injectable } from '@angular/core';
-
-@Injectable()
-export class VersionService {
-
-    constructor() {
-    }
-
-    isEnterpriseEdition() {
-        return false;
-    }
-}
\ No newline at end of file
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index 0bc629d..d14fea0 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -21,15 +21,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {LoginComponent} from "./login/components/login/login.component";
 import {SetupComponent} from "./login/components/setup/setup.component";
-import {StreampipesComponent} from "./core-v2/components/streampipes/streampipes.component";
-import {EditorComponent} from "./editor/editor.component";
-import {PipelinesComponent} from "./pipelines/pipelines.component";
-import {ConnectComponent} from "./connect/connect.component";
-import {DashboardComponent} from "./dashboard/dashboard.component";
-import {DataExplorerComponent} from "./data-explorer/data-explorer.component";
-import {AppOverviewComponent} from "./app-overview/app-overview.component";
-import {AddComponent} from "./add/add.component";
-import {ConfigurationComponent} from "./configuration/configuration.component";
+import {StreampipesComponent} from "./core/components/streampipes/streampipes.component";
 import {PipelineDetailsComponent} from "./pipeline-details/pipeline-details.component";
 import {StandaloneDashboardComponent} from "./dashboard/components/standalone/standalone-dashboard.component";
 import {AuthCanActivateChildrenGuard} from "./_guards/auth.can-activate-children.guard";
@@ -40,6 +32,15 @@ import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
 import {InfoComponent} from "./info/info.component";
 import {NotificationsComponent} from "./notifications/notifications.component";
 
+import { EditorComponent } from './editor/editor.component';
+import { PipelinesComponent } from './pipelines/pipelines.component';
+import { ConnectComponent } from './connect/connect.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { DataExplorerComponent } from './data-explorer/data-explorer.component';
+import { AppOverviewComponent } from './app-overview/app-overview.component';
+import { AddComponent } from './add/add.component';
+import { ConfigurationComponent } from './configuration/configuration.component';
+
 const routes: Routes = [
   { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
   { path: 'setup', component: SetupComponent, canActivate: [AlreadyConfiguredCanActivateGuard] },
@@ -47,15 +48,15 @@ const routes: Routes = [
   { path: 'standalone/:dashboardId', component: StandaloneDashboardComponent },
   { path: '', component: StreampipesComponent, children: [
       { path: '', component: HomeComponent, canActivate: [ConfiguredCanActivateGuard] },
-      { path: 'add', component: AddComponent },
-      { path: 'app-overview', component: AppOverviewComponent },
+      { path: 'editor', component: EditorComponent },
+      { path: 'pipelines', component: PipelinesComponent },
       { path: 'connect', component: ConnectComponent },
-      { path: 'configuration', component: ConfigurationComponent },
       { path: 'dashboard', component: DashboardComponent },
       { path: 'dataexplorer', component: DataExplorerComponent },
-      { path: 'editor', component: EditorComponent },
+      { path: 'app-overview', component: AppOverviewComponent },
+      { path: 'add', component: AddComponent },
+      { path: 'configuration', component: ConfigurationComponent },
       { path: 'notifications', component: NotificationsComponent },
-      { path: 'pipelines', component: PipelinesComponent },
       { path: 'info', component: InfoComponent },
       { path: 'pipeline-details', component: PipelineDetailsComponent }
     ], canActivateChild: [AuthCanActivateChildrenGuard] }
diff --git a/ui/src/app/core-v2/core.module.ts b/ui/src/app/core-v2/core.module.ts
deleted file mode 100644
index fe9fb0f..0000000
--- a/ui/src/app/core-v2/core.module.ts
+++ /dev/null
@@ -1,70 +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 {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} 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";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FlexLayoutModule,
-    MatGridListModule,
-    MatDividerModule,
-    MatListModule,
-    MatIconModule,
-    MatMenuModule,
-    MatBadgeModule,
-    MatButtonModule,
-    MatTooltipModule,
-    MatProgressSpinnerModule,
-    MatInputModule,
-    MatToolbarModule,
-    FormsModule,
-    RouterModule
-  ],
-  declarations: [
-    StreampipesComponent,
-    FeedbackComponent,
-    IconbarComponent,
-    ToolbarComponent
-  ],
-  providers: [],
-  entryComponents: [
-    StreampipesComponent
-  ]
-})
-export class CoreModule {
-}
\ No newline at end of file
diff --git a/ui/src/app/core/button/button.directive.ts b/ui/src/app/core/button/button.directive.ts
deleted file mode 100644
index 4cdd954..0000000
--- a/ui/src/app/core/button/button.directive.ts
+++ /dev/null
@@ -1,115 +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';
-
-export class SpButtonDirective {
-
-    $mdButtonInkRipple: any;
-    $mdTheming: any;
-    $mdAria: any;
-    $mdInteraction: any;
-    spRaised: any;
-    restrict: any;
-    transclude: any;
-    template: any;
-    replace: any;
-    postLink: any;
-
-
-    constructor($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) {
-        this.$mdButtonInkRipple = $mdButtonInkRipple;
-        this.$mdTheming = $mdTheming;
-        this.$mdAria = $mdAria;
-        this.$mdInteraction = $mdInteraction;
-        this.restrict = 'EA';
-        this.transclude = true;
-        this.replace = true;
-        this.template = this.getTemplate();
-        this.postLink = this.link;
-    }
-
-    isAnchor(attr) {
-        return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
-    }
-
-    getTemplate() {
-        return '<button class="sp-button" ng-transclude></button>';
-    }
-
-    link(scope, element, attr) {
-        this.$mdTheming(element);
-
-        if ('spButtonBlue' in attr) {
-            element.addClass('sp-button-blue');
-        }
-
-        if ('spButtonGray' in attr) {
-            element.addClass('sp-button-gray');
-        }
-
-        if ('spButtonFlat' in attr) {
-            element.addClass('sp-button-flat');
-        }
-
-        if ('spButtonIcon' in attr) {
-            element.addClass('sp-button-icon');
-        }
-
-        if ('spButtonSmallPadding' in attr) {
-            element.addClass('sp-button-small-padding');
-        }
-
-        if ('settingsBarIconButton' in attr) {
-            element.addClass('settings-bar-icon-button');
-        }
-
-        this.$mdButtonInkRipple.attach(scope, element);
-        // //
-        // // // Use async expect to support possible bindings in the button label
-        this.$mdAria.expectWithoutText(element, 'aria-label');
-
-
-        // disabling click event when disabled is true
-        element.on('click', e => {
-            if (attr.disabled === true) {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-            }
-        });
-
-        if (!element.hasClass('md-no-focus')) {
-
-            element.on('focus', () => {
-
-                // Only show the focus effect when being focused through keyboard interaction or programmatically
-                if (!this.$mdInteraction.isUserInvoked() || this.$mdInteraction.getLastInteractionType() === 'keyboard') {
-                    element.addClass('md-focused');
-                }
-
-            });
-
-            element.on('blur', function() {
-                element.removeClass('md-focused');
-            });
-        }
-
-    }
-}
-
-SpButtonDirective.$inject=['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction'];
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/base-navigation.component.ts b/ui/src/app/core/components/base-navigation.component.ts
similarity index 77%
rename from ui/src/app/core-v2/components/base-navigation.component.ts
rename to ui/src/app/core/components/base-navigation.component.ts
index 29ac724..fd2209d 100644
--- a/ui/src/app/core-v2/components/base-navigation.component.ts
+++ b/ui/src/app/core/components/base-navigation.component.ts
@@ -33,47 +33,47 @@ export abstract class BaseNavigationComponent {
       icon: 'home'
     },
     {
-      link: 'editor',
-      title: 'Editor',
-      icon: 'dashboard'
+        link: 'editor',
+        title: 'Editor',
+        icon: 'dashboard'
     },
     {
-      link: 'pipelines',
-      title: 'Pipelines',
-      icon: 'play_arrow'
+        link: 'pipelines',
+        title: 'Pipelines',
+        icon: 'play_arrow'
     },
     {
-      link: 'connect',
-      title: 'StreamPipes Connect',
-      icon: 'power'
+        link: 'connect',
+        title: 'StreamPipes Connect',
+        icon: 'power'
     },
     {
-      link: 'dashboard',
-      title: 'Live Dashboard',
-      icon: 'insert_chart'
+        link: 'dashboard',
+        title: 'Dashboard',
+        icon: 'insert_chart'
     },
     {
-      link: 'dataexplorer',
-      title: 'Data Explorer',
-      icon: 'search'
+        link: 'dataexplorer',
+        title: 'Data Explorer',
+        icon: 'search'
     },
     {
-      link: 'app-overview',
-      title: 'Apps',
-      icon: 'apps'
+        link: 'app-overview',
+        title: 'Apps',
+        icon: 'apps'
     },
   ];
 
   admin = [
     {
-      link: 'add',
-      title: 'Install Pipeline Elements',
-      icon: 'cloud_download'
+        link: 'add',
+        title: 'Install Pipeline Elements',
+        icon: 'cloud_download'
     },
     {
-      link: 'configuration',
-      title: 'Configuration',
-      icon: 'settings'
+        link: 'configuration',
+        title: 'Configuration',
+        icon: 'settings'
     },
   ];
 
diff --git a/ui/src/app/core-v2/components/feedback/feedback.component.html b/ui/src/app/core/components/feedback/feedback.component.html
similarity index 100%
rename from ui/src/app/core-v2/components/feedback/feedback.component.html
rename to ui/src/app/core/components/feedback/feedback.component.html
diff --git a/ui/src/app/core-v2/components/feedback/feedback.component.ts b/ui/src/app/core/components/feedback/feedback.component.ts
similarity index 100%
rename from ui/src/app/core-v2/components/feedback/feedback.component.ts
rename to ui/src/app/core/components/feedback/feedback.component.ts
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.html b/ui/src/app/core/components/iconbar/iconbar.component.html
similarity index 100%
rename from ui/src/app/core-v2/components/iconbar/iconbar.component.html
rename to ui/src/app/core/components/iconbar/iconbar.component.html
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts b/ui/src/app/core/components/iconbar/iconbar.component.ts
similarity index 100%
rename from ui/src/app/core-v2/components/iconbar/iconbar.component.ts
rename to ui/src/app/core/components/iconbar/iconbar.component.ts
diff --git a/ui/src/app/core-v2/components/streampipes/streampipes.component.html b/ui/src/app/core/components/streampipes/streampipes.component.html
similarity index 100%
rename from ui/src/app/core-v2/components/streampipes/streampipes.component.html
rename to ui/src/app/core/components/streampipes/streampipes.component.html
diff --git a/ui/src/app/core-v2/components/streampipes/streampipes.component.scss b/ui/src/app/core/components/streampipes/streampipes.component.scss
similarity index 100%
rename from ui/src/app/core-v2/components/streampipes/streampipes.component.scss
rename to ui/src/app/core/components/streampipes/streampipes.component.scss
diff --git a/ui/src/app/core-v2/components/streampipes/streampipes.component.ts b/ui/src/app/core/components/streampipes/streampipes.component.ts
similarity index 100%
rename from ui/src/app/core-v2/components/streampipes/streampipes.component.ts
rename to ui/src/app/core/components/streampipes/streampipes.component.ts
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.html b/ui/src/app/core/components/toolbar/toolbar.component.html
similarity index 100%
rename from ui/src/app/core-v2/components/toolbar/toolbar.component.html
rename to ui/src/app/core/components/toolbar/toolbar.component.html
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.scss b/ui/src/app/core/components/toolbar/toolbar.component.scss
similarity index 100%
rename from ui/src/app/core-v2/components/toolbar/toolbar.component.scss
rename to ui/src/app/core/components/toolbar/toolbar.component.scss
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts b/ui/src/app/core/components/toolbar/toolbar.component.ts
similarity index 100%
rename from ui/src/app/core-v2/components/toolbar/toolbar.component.ts
rename to ui/src/app/core/components/toolbar/toolbar.component.ts
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
index a3001e0..fe9fb0f 100644
--- a/ui/src/app/core/core.module.ts
+++ b/ui/src/app/core/core.module.ts
@@ -16,22 +16,55 @@
  *
  */
 
-import * as angular from 'angular';
-import 'angular-material-icons';
-import 'angular-material';
-import 'angular-loading-bar';
+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} 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 stateConfig from './state.config'
-import iconProviderConfig from './icon-provider.config'
-import httpProviderConfig from './http-provider.config'
-import nagPrism from './prism/nag-prism.directive'
-
-export default angular.module('sp.core', ['ui.router', 'ui.router.upgrade', 'ngMaterial', 'ngMdIcons', 'angular-loading-bar'])
-    .config(stateConfig)
-    .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
-        cfpLoadingBarProvider.latencyThreshold = 500;
-    }])
-    .config(iconProviderConfig)
-    .config(httpProviderConfig)
-    .directive('nagPrism', nagPrism)
-    .name;
\ No newline at end of file
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatGridListModule,
+    MatDividerModule,
+    MatListModule,
+    MatIconModule,
+    MatMenuModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+    MatInputModule,
+    MatToolbarModule,
+    FormsModule,
+    RouterModule
+  ],
+  declarations: [
+    StreampipesComponent,
+    FeedbackComponent,
+    IconbarComponent,
+    ToolbarComponent
+  ],
+  providers: [],
+  entryComponents: [
+    StreampipesComponent
+  ]
+})
+export class CoreModule {
+}
\ No newline at end of file
diff --git a/ui/src/app/core/http-provider.config.ts b/ui/src/app/core/http-provider.config.ts
deleted file mode 100644
index 03018c4..0000000
--- a/ui/src/app/core/http-provider.config.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.
- *
- */
-
-
-export default function httpProviderConfig($httpProvider) {
-	$httpProvider.defaults.withCredentials = true;
-	//$httpProvider.interceptors.push('httpInterceptor');
-};
-
-httpProviderConfig.$inject = ['$httpProvider'];
diff --git a/ui/src/app/core/icon-provider.config.ts b/ui/src/app/core/icon-provider.config.ts
deleted file mode 100644
index 1fa632b..0000000
--- a/ui/src/app/core/icon-provider.config.ts
+++ /dev/null
@@ -1,45 +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 function iconProviderConfig($mdIconProvider, apiConstants) {
-	const getServerUrl = () => {
-		return apiConstants.contextPath + apiConstants.api;
-		//return "http://localhost:8080";
-	};
-
-	$mdIconProvider
-		.iconSet('action', 'assets/img/svg/svg-sprite-action.svg', 24)
-		.iconSet('alert', 'assets/img/svg/svg-sprite-alert.svg', 24)
-		.iconSet('av', 'assets/img/svg/svg-sprite-av.svg', 24)
-		.iconSet('communication', 'assets/img/svg/svg-sprite-communication.svg', 24)
-		.iconSet('content', 'assets/img/svg/svg-sprite-content.svg', 24)
-		.iconSet('device', 'assets/img/svg/svg-sprite-device.svg', 24)
-		.iconSet('editor', 'assets/img/svg/svg-sprite-editor.svg', 24)
-		.iconSet('file', 'assets/img/svg/svg-sprite-file.svg', 24)
-		.iconSet('hardware', 'assets/img/svg/svg-sprite-hardware.svg', 24)
-		.iconSet('image', 'assets/img/svg/svg-sprite-image.svg', 24)
-		.iconSet('maps', 'assets/img/svg/svg-sprite-maps.svg', 24)
-		.iconSet('navigation', 'assets/img/svg/svg-sprite-navigation.svg', 24)
-		.iconSet('notification', 'assets/img/svg/svg-sprite-notification.svg', 24)
-		.iconSet('social', 'assets/img/svg/svg-sprite-social.svg', 24)
-		.iconSet('toggle', 'assets/img/svg/svg-sprite-toggle.svg', 24)
-		.iconSet('avatars', 'assets/img/svg/avatar-icons.svg', 24)
-		.defaultIconSet('assets/img/svg/svg-sprite-action.svg', 24);
-};
-
-iconProviderConfig.$inject = ['$mdIconProvider', 'apiConstants'];
diff --git a/ui/src/app/core/md-theming-provider.config.ts b/ui/src/app/core/md-theming-provider.config.ts
deleted file mode 100644
index 0127197..0000000
--- a/ui/src/app/core/md-theming-provider.config.ts
+++ /dev/null
@@ -1,70 +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 function mdThemingProviderConfig($mdThemingProvider) {
-
-    $mdThemingProvider.definePalette('streamPipesPrimary', {
-        '50': '304269',
-        '100': '304269',
-        '200': '304269',
-        '300': '304269',
-        '400': '304269',
-        '500': '304269',
-        '600': '304269',
-        '700': '003B3D',
-        '800': '39b54a',
-        '900': '39b54a',
-        'A100': '39b54a',
-        'A200': '39b54a',
-        'A400': '39b54a',
-        'A700': '39b54a',
-        'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
-                                            // on this palette should be dark or light
-
-        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-            '200', '300', '400', 'A100'],
-    });
-
-    $mdThemingProvider.definePalette('streamPipesAccent', {
-        '50': 'DF5A49',
-        '100': 'DF5A49',
-        '200': '007F54',
-        '300': '007F54',
-        '400': '39B54A',
-        '500': '45DA59',
-        '600': '45DA59',
-        '700': '45DA59',
-        '800': '45DA59',
-        '900': '1B1464',
-        'A100': '1B1464',
-        'A200': '1B1464',
-        'A400': '1B1464',
-        'A700': '1B1464',
-        'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
-                                            // on this palette should be dark or light
-
-        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-            '200', '300', '400', 'A100'],
-    });
-
-    $mdThemingProvider.theme('default')
-        .primaryPalette('streamPipesPrimary')
-        .accentPalette('streamPipesAccent')
-
-}
-
-mdThemingProviderConfig.$inject = ['$mdThemingProvider'];
\ No newline at end of file
diff --git a/ui/src/app/core/prism/nag-prism.directive.ts b/ui/src/app/core/prism/nag-prism.directive.ts
deleted file mode 100644
index e1ac750..0000000
--- a/ui/src/app/core/prism/nag-prism.directive.ts
+++ /dev/null
@@ -1,63 +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 Prism from 'prismjs';
-
-nagPrism.$inject = ['$compile'];
-
-
-export default function nagPrism($compile) {
-	return {
-		restrict: 'A',
-		transclude: true,
-		scope: {
-			source: '@'
-		},
-		link: function(scope, element, attrs, controller, transclude) {
-			scope.$watch('source', function(v) {
-				v = scope.escape(v);
-				element.find("code").html(v);
-
-				Prism.highlightElement(element.find("code")[0]);
-			});
-
-			scope.entityMap = {
-				"&": "&amp;",
-				"<": "&lt;",
-				">": "&gt;",
-				'"': '&quot;',
-				"'": '&#39;',
-				"/": '&#x2F;'
-			};
-
-			scope.escape = function(str) {
-				return String(str).replace(/[&<>"'\/]/g, function (s) {
-					return scope.entityMap[s];
-				});
-			}
-
-			transclude(function(clone) {
-				if (clone.html() !== undefined) {
-					element.find("code").html(clone.html());
-					$compile(element.contents())(scope.$parent);
-				}
-			});
-		},
-		template: "<code></code>"
-	};
-};
diff --git a/ui/src/app/core/root-scope-delegate.decorator.ts b/ui/src/app/core/root-scope-delegate.decorator.ts
deleted file mode 100644
index b9ef018..0000000
--- a/ui/src/app/core/root-scope-delegate.decorator.ts
+++ /dev/null
@@ -1,28 +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 function rootScopeDelegate($delegate) {
-    const originalDigest = $delegate.$digest;
-    $delegate.$digest = () => {
-        if (!$delegate.$$phase) {
-            originalDigest.call($delegate);
-        }
-    };
-    return $delegate;
-}
-
-rootScopeDelegate.$inject = ['$delegate'];
\ No newline at end of file
diff --git a/ui/src/app/layout/app.controller.ts b/ui/src/app/layout/app.controller.ts
deleted file mode 100644
index 1596604..0000000
--- a/ui/src/app/layout/app.controller.ts
+++ /dev/null
@@ -1,40 +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 class AppCtrl {
-
-    $state: any;
-
-    constructor($state) {
-        this.$state = $state;
-
-    }
-
-    go(path, payload?) {
-        if (payload === undefined) {
-            this.$state.go(path);
-        } else {
-            this.$state.go(path, payload);
-        }
-    }
-};
-
-AppCtrl.$inject = ['$state'];
-
-
diff --git a/ui/src/app/layout/layout.module.ts b/ui/src/app/layout/layout.module.ts
deleted file mode 100644
index d190639..0000000
--- a/ui/src/app/layout/layout.module.ts
+++ /dev/null
@@ -1,29 +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 ngCookies from 'angular-cookies';
-// import 'npm/angular-notification-icons';
-//
-// import {AppCtrl} from './app.controller'
-// import {ToolbarController} from "./toolbar.controller";
-//
-// export default angular.module('sp.layout', [spServices, ngCookies, 'angular-notification-icons', 'ngAnimate'])
-// 	.controller('AppCtrl', AppCtrl)
-// 	.controller('ToolbarController', ToolbarController)
-// 	.name;


[incubator-streampipes] 03/11: [STREAMPIPES-193] Show current router state in toolbar

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

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

commit 57c304282acfa8c86ebb97bffed5b20b85ef2f1e
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 13 23:04:41 2020 +0200

    [STREAMPIPES-193] Show current router state in toolbar
---
 .../core-v2/components/base-navigation.component.ts  | 20 ++++++++++++++------
 .../components/feedback/feedback.component.ts        |  1 -
 .../core-v2/components/iconbar/iconbar.component.ts  |  1 +
 .../components/toolbar/toolbar.component.html        | 12 +++++-------
 .../core-v2/components/toolbar/toolbar.component.ts  |  1 +
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/src/app/core-v2/components/base-navigation.component.ts b/ui/src/app/core-v2/components/base-navigation.component.ts
index 17070f0..8b2ac9a 100644
--- a/ui/src/app/core-v2/components/base-navigation.component.ts
+++ b/ui/src/app/core-v2/components/base-navigation.component.ts
@@ -17,8 +17,7 @@
  */
 
 
-
-import {Router} from "@angular/router";
+import {NavigationEnd, Router} from "@angular/router";
 
 export abstract class BaseNavigationComponent {
 
@@ -50,7 +49,7 @@ export abstract class BaseNavigationComponent {
     },
     {
       link: 'dashboard',
-      title: 'Dashboard',
+      title: 'Live Dashboard',
       icon: 'insert_chart'
     },
     {
@@ -82,6 +81,17 @@ export abstract class BaseNavigationComponent {
 
   }
 
+  onInit() {
+    this.activePage = "";
+    this.activePageName = this.getPageTitle(this.activePage);
+    this.Router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.activePage = event.url.replace("/", "");
+        this.activePageName = this.getPageTitle(this.activePage);
+      }
+    });
+  }
+
   getActivePage() {
     return this.activePage;
   }
@@ -94,10 +104,8 @@ export abstract class BaseNavigationComponent {
         currentTitle = m.title;
       }
     });
-    if (path == 'streampipes.pipelineDetails') {
+    if (path == 'pipeline-details') {
       currentTitle = 'Pipeline Details';
-    } else if (path == 'streampipes.edit') {
-      currentTitle = this.menu[0].title;
     }
     return currentTitle;
   }
diff --git a/ui/src/app/core-v2/components/feedback/feedback.component.ts b/ui/src/app/core-v2/components/feedback/feedback.component.ts
index ecfadab..6ce1e40 100644
--- a/ui/src/app/core-v2/components/feedback/feedback.component.ts
+++ b/ui/src/app/core-v2/components/feedback/feedback.component.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import {AppCtrl} from "../../../layout/app.controller";
 import {Component, EventEmitter, OnInit, Output} from "@angular/core";
 
 @Component({
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
index 532ccae..890d23f 100644
--- a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
@@ -38,6 +38,7 @@ export class IconbarComponent extends BaseNavigationComponent implements OnInit
   }
 
   ngOnInit(): void {
+    super.onInit();
   }
 
   connectToBroker() {
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.html b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
index b49d6c4..0ed1f1b 100644
--- a/ui/src/app/core-v2/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
@@ -19,16 +19,14 @@
 <mat-toolbar class="md-primary md-hue-2 top-nav" color="accent">
     <div class="md-toolbar-tools" style="height:50px;max-height:50px;width:100%;">
         <div fxFlex="60" fxLayout fxLayoutAlign="start center">
-            <h1 class="md-toolbar-tools" style="height:50px;max-height:50px;">
-                <div class="sp-darkblue"
-                     style="align-items:left;padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;">
-                    <img
-                            alt="icon" src="../../../../assets/img/sp/sp-logo-right-white.png" style="height:28px;">
+            <div class="md-toolbar-tools" style="height:50px;max-height:50px;" fxFlex fxLayout="row" fxLayoutAlign="start center">
+                <div class="sp-darkblue" style="padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;">
+                    <img alt="icon" src="../../../../assets/img/sp/sp-logo-right-white.png" style="height:28px;">
                 </div>
                 <div style="color:white;padding: 5px 5px;font-size:15px;margin-left:10px;">
-                    <h4 style="margin-top:18px;font-size:12pt;font-weight:bold;">{{activePageName}}</h4>
+                    <h4 style="margin-top:12px;font-size:12pt;font-weight:bold;">{{activePageName}}</h4>
                 </div>
-            </h1>
+            </div>
         </div>
         <span fxFlex></span>
         <div fxFlex="40" fxLayout fxLayoutAlign="end center" *ngIf="authenticated" style="height:100%;">
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
index bb7c276..9b2585d 100644
--- a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
@@ -47,6 +47,7 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit
   }
 
   ngOnInit(): void {
+    super.onInit();
   }
   
   openMenu() {


[incubator-streampipes] 05/11: Merge branch 'dev' into STREAMPIPES-193

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

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

commit 1445691f8a620d5fe8cc334fcddcfe209b77e074
Merge: 265fb38 4a16d18
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 13 23:32:24 2020 +0200

    Merge branch 'dev' into STREAMPIPES-193

 .github/workflows/build.yml                        |  2 +-
 .../streampipes/model/client/user/Element.java     |  5 ++-
 .../apache/streampipes/model/client/user/User.java |  7 +++
 .../org/apache/streampipes/rest/impl/User.java     |  1 +
 streampipes-wrapper-python/README.md               | 52 +++++++++++++++-------
 streampipes-wrapper-python/setup.py                |  4 +-
 streampipes-wrapper-python/streampipes/core.py     | 24 +++++-----
 ui/package.json                                    |  2 +-
 .../endpoint-item/endpoint-item.component.html     |  8 ++--
 .../pipeline-element-runtime-info.component.scss   | 17 +++++++
 ui/src/app/core-model/gen/streampipes-model.ts     | 19 ++++++++
 .../dialog/base-dialog/base-dialog.model.ts        | 18 ++++++++
 .../confirm-dialog/confirm-dialog.component.html   | 18 ++++++++
 .../components/widgets/table/table-config.ts       |  2 +-
 .../add-visualization-dialog.component.html        |  2 +-
 .../pipeline-element-documentation.component.html  | 18 ++++++++
 .../pipeline-overview.component.scss               | 19 ++++++++
 ui/src/scss/sp/buttons.scss                        | 17 +++++++
 ui/src/scss/sp/sp-theme.scss                       | 17 +++++++
 19 files changed, 214 insertions(+), 38 deletions(-)



[incubator-streampipes] 06/11: [STREAMPIPES-193] Migrate state navigation to Angular router

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

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

commit c71badc8ad3a34c633398e661f740253a547538f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 14 08:47:43 2020 +0200

    [STREAMPIPES-193] Migrate state navigation to Angular router
---
 ui/src/app/connect/connect.module.ts                    | 17 ++---------------
 .../dialog/save-pipeline/save-pipeline.component.ts     | 10 +++++-----
 ui/src/app/services/tour/shepherd.service.ts            |  4 +---
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 9fed4b0..998027c 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -97,6 +97,7 @@ import { EventPropertyRowComponent } from './schema-editor/event-property-row/ev
 import { EventSchemaPreviewComponent } from './schema-editor/event-schema-preview/event-schema-preview.component';
 import { StaticColorPickerComponent } from './static-properties/static-color-picker/static-color-picker.component';
 import {DisplayRecommendedPipe} from "./static-properties/filter/display-recommended.pipe";
+import {TourProviderService} from "../services/tour/tour-provider.service";
 
 
 @NgModule({
@@ -181,21 +182,7 @@ import {DisplayRecommendedPipe} from "./static-properties/filter/display-recomme
         StaticFileRestService,
         PropertySelectorService,
         xsService,
-        {
-            provide: '$state',
-            useFactory: ($injector: any) => $injector.get('$state'),
-            deps: ['$injector'],
-        },
-        {
-            provide: '$timeout',
-            useFactory: ($injector: any) => $injector.get('$timeout'),
-            deps: ['$injector'],
-        },
-        {
-            provide: 'TourProviderService',
-            useFactory: ($injector: any) => $injector.get('TourProviderService'),
-            deps: ['$injector'],
-        },
+        TourProviderService
     ],
     entryComponents: [ConnectComponent, AdapterStartedDialog, AdapterExportDialog, AdapterUploadDialog, EditEventPropertyComponent],
 })
diff --git a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
index f986694..b8c01d7 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import {Component, Inject, Input, OnInit} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
 import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
 import {Message, Pipeline} from "../../../core-model/gen/streampipes-model";
 import {ObjectProvider} from "../../services/object-provider.service";
@@ -24,6 +24,7 @@ import {EditorService} from "../../services/editor.service";
 import {PipelineService} from "../../../platform-services/apis/pipeline.service";
 import {ShepherdService} from "../../../services/tour/shepherd.service";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'save-pipeline',
@@ -49,7 +50,7 @@ export class SavePipelineComponent implements OnInit {
               private objectProvider: ObjectProvider,
               private pipelineService: PipelineService,
               //TransitionService,
-              @Inject("$state") private $state: any,
+              private Router: Router,
               private ShepherdService: ShepherdService) {
     this.pipelineCategories = [];
     this.updateMode = "update";
@@ -139,15 +140,14 @@ export class SavePipelineComponent implements OnInit {
       this.ShepherdService.hideCurrentStep();
     }
     if (switchTab && !this.startPipelineAfterStorage) {
-      this.$state.go("streampipes.pipelines");
+      this.Router.navigate(["pipelines"]);
     }
     if (this.startPipelineAfterStorage) {
-      this.$state.go("streampipes.pipelines", {pipeline: data.notifications[1].description});
+      this.Router.navigate(["pipelines"], { queryParams: {pipeline: data.notifications[1].description}});
     }
   }
 
   hide() {
     this.dialogRef.close();
-    //this.$mdDialog.hide();
   };
 }
\ No newline at end of file
diff --git a/ui/src/app/services/tour/shepherd.service.ts b/ui/src/app/services/tour/shepherd.service.ts
index e2846f6..a3f2cab 100644
--- a/ui/src/app/services/tour/shepherd.service.ts
+++ b/ui/src/app/services/tour/shepherd.service.ts
@@ -179,6 +179,4 @@ export class ShepherdService {
     getTimeWaitMillies() {
        return this.TourProviderService.getTime();
     }
-}
-
-ShepherdService.$inject = ['$timeout', '$state', 'TourProviderService'];
\ No newline at end of file
+}
\ No newline at end of file


[incubator-streampipes] 02/11: [STREAMPIPES-193] Add guards

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

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

commit d36f6a6abab40be260dfb890807b6de72d5aec8e
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Aug 12 23:38:39 2020 +0200

    [STREAMPIPES-193] Add guards
---
 .../already-configured.can-activate.guard.ts       | 43 ++++++++++++++++
 .../_guards/auth.can-activate-children.guard.ts    | 58 ++++++++++++++++++++++
 .../_guards/base-configured.can-activate.guard.ts  | 52 +++++++++++++++++++
 .../app/_guards/configured.can-activate.guard.ts   | 40 +++++++++++++++
 ui/src/app/_guards/logged-in.can-activate.guard.ts | 58 ++++++++++++++++++++++
 ui/src/app/app-routing.module.ts                   | 22 ++++++--
 .../login/components/startup/startup.component.ts  |  8 +--
 ui/src/app/login/login.module.ts                   | 20 ++++----
 ui/src/app/services/auth.service.ts                |  9 ++--
 9 files changed, 287 insertions(+), 23 deletions(-)

diff --git a/ui/src/app/_guards/already-configured.can-activate.guard.ts b/ui/src/app/_guards/already-configured.can-activate.guard.ts
new file mode 100644
index 0000000..f4f9512
--- /dev/null
+++ b/ui/src/app/_guards/already-configured.can-activate.guard.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Injectable} from "@angular/core";
+import {Router, UrlTree} from "@angular/router";
+import {AuthService} from "../services/auth.service";
+import {BaseConfiguredCanActivateGuard} from "./base-configured.can-activate.guard";
+
+@Injectable()
+export class AlreadyConfiguredCanActivateGuard extends BaseConfiguredCanActivateGuard {
+
+  constructor(Router: Router,
+              AuthService: AuthService) {
+    super(Router, AuthService);
+  }
+
+  onIsConfigured(): boolean | UrlTree {
+    return this.Router.parseUrl('login');
+  }
+
+  onIsUnconfigured(): boolean | UrlTree {
+    return true;
+  }
+
+
+
+
+}
\ No newline at end of file
diff --git a/ui/src/app/_guards/auth.can-activate-children.guard.ts b/ui/src/app/_guards/auth.can-activate-children.guard.ts
new file mode 100644
index 0000000..fef6239
--- /dev/null
+++ b/ui/src/app/_guards/auth.can-activate-children.guard.ts
@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Injectable} from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  CanActivateChild,
+  Router,
+  RouterStateSnapshot,
+  UrlTree
+} from "@angular/router";
+import {Observable} from "rxjs";
+import {RestApi} from "../services/rest-api.service";
+import {AuthStatusService} from "../services/auth-status.service";
+
+@Injectable()
+export class AuthCanActivateChildrenGuard implements CanActivateChild {
+
+  constructor(private RestApi: RestApi,
+              private AuthStatusService: AuthStatusService,
+              private Router: Router) {
+  }
+
+
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return new Promise((resolve) => this.RestApi.getAuthc().subscribe(response => {
+      if (response.success) {
+        this.AuthStatusService.username = response.info.authc.principal.username;
+        this.AuthStatusService.email = response.info.authc.principal.email;
+        this.AuthStatusService.authenticated = true;
+        this.AuthStatusService.token = response.token;
+        resolve(true);
+      } else {
+        this.AuthStatusService.authenticated = false;
+        let url = this.Router.parseUrl('login');
+        resolve(url);
+      }
+    }, error => {
+      let url = this.Router.parseUrl('startup');
+      resolve(url);
+    }));
+  }
+}
\ No newline at end of file
diff --git a/ui/src/app/_guards/base-configured.can-activate.guard.ts b/ui/src/app/_guards/base-configured.can-activate.guard.ts
new file mode 100644
index 0000000..1656e03
--- /dev/null
+++ b/ui/src/app/_guards/base-configured.can-activate.guard.ts
@@ -0,0 +1,52 @@
+/*
+ * 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 {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  Router,
+  RouterStateSnapshot,
+  UrlTree
+} from "@angular/router";
+import {Observable} from "rxjs";
+import {AuthService} from "../services/auth.service";
+
+export abstract class BaseConfiguredCanActivateGuard implements CanActivate {
+
+  constructor(protected Router: Router,
+              protected AuthService: AuthService) {
+
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return new Promise((resolve) => this.AuthService.checkConfiguration().subscribe((configured) => {
+      if (!configured) {
+        resolve(this.onIsUnconfigured());
+      } else {
+        resolve(this.onIsConfigured());
+      }
+    }, error => {
+      let url = this.Router.parseUrl('startup');
+      resolve(url);
+    }));
+  }
+
+  abstract onIsConfigured(): boolean | UrlTree;
+
+  abstract onIsUnconfigured(): boolean | UrlTree;
+}
\ No newline at end of file
diff --git a/ui/src/app/_guards/configured.can-activate.guard.ts b/ui/src/app/_guards/configured.can-activate.guard.ts
new file mode 100644
index 0000000..45bb001
--- /dev/null
+++ b/ui/src/app/_guards/configured.can-activate.guard.ts
@@ -0,0 +1,40 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Injectable} from "@angular/core";
+import {Router, UrlTree} from "@angular/router";
+import {AuthService} from "../services/auth.service";
+import {BaseConfiguredCanActivateGuard} from "./base-configured.can-activate.guard";
+
+@Injectable()
+export class ConfiguredCanActivateGuard extends BaseConfiguredCanActivateGuard {
+
+  constructor(Router: Router,
+              AuthService: AuthService) {
+    super(Router, AuthService)
+  }
+
+  onIsConfigured(): boolean | UrlTree {
+    return true;
+  }
+
+  onIsUnconfigured(): boolean | UrlTree {
+    return this.Router.parseUrl('setup');
+  }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/_guards/logged-in.can-activate.guard.ts b/ui/src/app/_guards/logged-in.can-activate.guard.ts
new file mode 100644
index 0000000..506f793
--- /dev/null
+++ b/ui/src/app/_guards/logged-in.can-activate.guard.ts
@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Injectable} from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  Router,
+  RouterStateSnapshot,
+  UrlTree
+} from "@angular/router";
+import {Observable} from "rxjs";
+import {AuthStatusService} from "../services/auth-status.service";
+import {RestApi} from "../services/rest-api.service";
+
+@Injectable()
+export class LoggedInCanActivateGuard implements CanActivate {
+
+  constructor(private AuthStatusService: AuthStatusService,
+              private Router: Router,
+              private RestApi: RestApi) {
+
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return new Promise((resolve) => this.RestApi.getAuthc().subscribe(response => {
+      if (response.success) {
+        this.AuthStatusService.username = response.info.authc.principal.username;
+        this.AuthStatusService.email = response.info.authc.principal.email;
+        this.AuthStatusService.authenticated = true;
+        this.AuthStatusService.token = response.token;
+        let url = this.Router.parseUrl('');
+        resolve(url);
+      } else {
+        this.AuthStatusService.authenticated = false;
+        resolve(true);
+      }
+    }, error => {
+      let url = this.Router.parseUrl('startup');
+      resolve(url);
+    }));
+  }
+}
\ No newline at end of file
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index 9aa0fe3..03bb8d0 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -32,13 +32,19 @@ import {AddComponent} from "./add/add.component";
 import {ConfigurationComponent} from "./configuration/configuration.component";
 import {PipelineDetailsComponent} from "./pipeline-details/pipeline-details.component";
 import {StandaloneDashboardComponent} from "./dashboard/components/standalone/standalone-dashboard.component";
+import {AuthCanActivateChildrenGuard} from "./_guards/auth.can-activate-children.guard";
+import {ConfiguredCanActivateGuard} from "./_guards/configured.can-activate.guard";
+import {StartupComponent} from "./login/components/startup/startup.component";
+import {AlreadyConfiguredCanActivateGuard} from "./_guards/already-configured.can-activate.guard";
+import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
 
 const routes: Routes = [
-  { path: 'login', component: LoginComponent },
-  { path: 'setup', component: SetupComponent },
+  { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
+  { path: 'setup', component: SetupComponent, canActivate: [AlreadyConfiguredCanActivateGuard] },
+  { path: 'startup', component: StartupComponent },
   { path: 'standalone/:dashboardId', component: StandaloneDashboardComponent },
   { path: '', component: StreampipesComponent, children: [
-      { path: '', component: HomeComponent },
+      { path: '', component: HomeComponent, canActivate: [ConfiguredCanActivateGuard] },
       { path: 'add', component: AddComponent },
       { path: 'app-overview', component: AppOverviewComponent },
       { path: 'connect', component: ConnectComponent },
@@ -48,11 +54,17 @@ const routes: Routes = [
       { path: 'editor', component: EditorComponent },
       { path: 'pipelines', component: PipelinesComponent },
       { path: 'pipeline-details', component: PipelineDetailsComponent }
-    ]}
+    ], canActivateChild: [AuthCanActivateChildrenGuard] }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [
+      AuthCanActivateChildrenGuard,
+      AlreadyConfiguredCanActivateGuard,
+      ConfiguredCanActivateGuard,
+      LoggedInCanActivateGuard
+  ]
 })
 export class AppRoutingModule { }
\ No newline at end of file
diff --git a/ui/src/app/login/components/startup/startup.component.ts b/ui/src/app/login/components/startup/startup.component.ts
index 40a5d8e..b6f0931 100644
--- a/ui/src/app/login/components/startup/startup.component.ts
+++ b/ui/src/app/login/components/startup/startup.component.ts
@@ -19,6 +19,7 @@
 import {AuthService} from "../../../services/auth.service";
 import {AuthStatusService} from "../../../services/auth-status.service";
 import {Component, Inject, OnInit} from "@angular/core";
+import {Router} from "@angular/router";
 
 @Component({
     selector: 'startup',
@@ -33,7 +34,7 @@ export class StartupComponent implements OnInit {
 
     constructor(private AuthService: AuthService,
                 private AuthStatusService: AuthStatusService,
-                @Inject("$state") private $state: any) {
+                private Router: Router) {
     }
 
     ngOnInit() {
@@ -41,9 +42,10 @@ export class StartupComponent implements OnInit {
     }
 
     checkStatus() {
-        this.AuthService.checkConfiguration().subscribe(() => {
+        this.AuthService.checkConfiguration().subscribe((configured) => {
             this.progress = 100;
-            this.$state.go("setup");
+            let target: string = configured ? 'login' : 'setup';
+            this.Router.navigate([target]);
         }, () => {
             this.currentStep += this.loadingIntervalInSeconds;
             this.progress = (this.currentStep / this.maxLoadingTimeInSeconds) * 100;
diff --git a/ui/src/app/login/login.module.ts b/ui/src/app/login/login.module.ts
index 50989ad..dbc6a0b 100644
--- a/ui/src/app/login/login.module.ts
+++ b/ui/src/app/login/login.module.ts
@@ -34,6 +34,8 @@ import {StartupComponent} from './components/startup/startup.component';
 import {MatDividerModule} from "@angular/material/divider";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {LoginService} from "./services/login.service";
+import {AuthStatusService} from "../services/auth-status.service";
+import {RestApi} from "../services/rest-api.service";
 
 @NgModule({
   imports: [
@@ -59,18 +61,14 @@ import {LoginService} from "./services/login.service";
   ],
   providers: [
     LoginService,
-    {
-      provide: 'AuthStatusService',
-      useFactory: ($injector: any) => $injector.get('AuthStatusService'),
-      deps: ['$injector'],
-    },
-    {
-      provide: 'RestApi',
-      useFactory: ($injector: any) => $injector.get('RestApi'),
-      deps: ['$injector'],
-    },
+    AuthStatusService,
+    RestApi
   ],
-  entryComponents: []
+  entryComponents: [
+    LoginComponent,
+    SetupComponent,
+    StartupComponent
+  ]
 })
 export class LoginModule {
 }
diff --git a/ui/src/app/services/auth.service.ts b/ui/src/app/services/auth.service.ts
index 5a28f9f..105757f 100644
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -24,20 +24,21 @@ import {Observable} from "rxjs";
 @Injectable()
 export class AuthService {
 
-    constructor(@Inject("RestApi") private RestApi: RestApi,
-                @Inject("AuthStatusService") private AuthStatusService: AuthStatusService) {
+    constructor(private RestApi: RestApi,
+                private AuthStatusService: AuthStatusService) {
     }
 
-    checkConfiguration() {
+    checkConfiguration(): Observable<boolean> {
         return Observable.create((observer) => this.RestApi.configured().subscribe(response => {
             if (response.configured) {
                 this.AuthStatusService.configured = true;
                 // TODO
                 //this.$rootScope.appConfig = response.data.appConfig;
+                observer.next(true);
             } else {
                 this.AuthStatusService.configured = false;
+                observer.next(false);
             }
-            observer.complete();
         }, error => {
             observer.error();
         }));


[incubator-streampipes] 01/11: [STREAMPIPES-193] Remove AngularJS dependencies from package.json

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

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

commit 83d25c5b39b051868f4e59c7205b9c3874239329
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Aug 12 08:58:49 2020 +0200

    [STREAMPIPES-193] Remove AngularJS dependencies from package.json
---
 ui/package.json                                    | 30 ++++------------------
 .../components/toolbar/toolbar.component.html      |  2 +-
 .../standalone/standalone-dashboard.component.ts   |  1 -
 .../app/data-explorer/data-explorer.component.css  |  2 +-
 ui/src/app/pipelines/pipelines.module.ts           |  3 ---
 ui/src/scss/main.scss                              |  1 -
 6 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index e7d1bbc..140a8ad 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -11,9 +11,10 @@
     "start": "node ./deployment/prebuild.js && ng serve",
     "watchtest": "node ./deployment/prebuild.js && karma start ./karma.conf.js --no-auto-watch --single-run",
     "test": "node ./deployment/prebuild.js && karma start ./karma.conf.js",
-    "build": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && ng build --prod",
+    "build": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && ng build --prod --stats-json",
     "build-rc": "node ./deployment/prebuild.js rel && set NODE_OPTIONS=--max-old-space-size=10192 && ng build --prod",
-    "lint": "tslint -c tslint.json 'src/**/*.ts*"
+    "lint": "tslint -c tslint.json 'src/**/*.ts*",
+    "analyze": "webpack-bundle-analyzer dist/stats.json"
   },
   "dependencies": {
     "@angular/animations": "9.0.5",
@@ -35,36 +36,15 @@
     "@ngui/datetime-picker": "0.16.2",
     "@stomp/ng2-stompjs": "7.2.0",
     "@swimlane/ngx-charts": "13.0.2",
-    "@uirouter/angular": "6.0.1",
-    "@uirouter/angular-hybrid": "10.0.1",
-    "@uirouter/angularjs": "1.0.25",
-    "@uirouter/core": "6.0.4",
-    "@uirouter/rx": "0.6.5",
-    "angular": "1.7.7",
-    "angular-animate": "1.7.7",
-    "angular-aria": "1.7.7",
-    "angular-clipboard": "1.4.2",
-    "angular-cookies": "1.7.7",
-    "angular-datatables": "0.6.2",
     "angular-gridster2": "8.3.0",
     "angular-loading-bar": "0.8.0",
-    "angular-material": "1.1.18",
     "angular-material-icons": "0.4.0",
-    "angular-messages": "1.7.7",
     "angular-notification-icons": "0.4.4",
     "angular-plotly.js": "1.5.0",
-    "angular-resource": "1.7.7",
-    "angular-route": "1.7.7",
-    "angular-rt-popup": "1.0.6",
-    "angular-sanitize": "1.7.7",
     "angular-slick-carousel": "3.1.7",
-    "angular-touch": "1.7.7",
     "angular-tree-component": "8.5.6",
-    "angular-ui-bootstrap": "0.14.3",
-    "angular-ui-sortable": "0.13.4",
     "angular-ui-tree": "2.9.0",
     "angular2-uuid": "1.1.1",
-    "angularjs-datetime-picker": "0.1.16",
     "bootstrap": "3.3.4",
     "calendar-heatmap-graph": "0.0.14",
     "codemirror": "5.55.0",
@@ -152,9 +132,9 @@
     "typescript": "3.7.5",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "webpack": "^4.41.6",
-    "webpack-bundle-analyzer": "^3.4.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.1"
+    "webpack-merge": "^4.2.1",
+    "webpack-bundle-analyzer": "^3.8.0"
   }
 }
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.html b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
index bacae80..b49d6c4 100644
--- a/ui/src/app/core-v2/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
@@ -17,7 +17,7 @@
   -->
 
 <mat-toolbar class="md-primary md-hue-2 top-nav" color="accent">
-    <div class="md-toolbar-tools" style="height:50px;max-height:50px;">
+    <div class="md-toolbar-tools" style="height:50px;max-height:50px;width:100%;">
         <div fxFlex="60" fxLayout fxLayoutAlign="start center">
             <h1 class="md-toolbar-tools" style="height:50px;max-height:50px;">
                 <div class="sp-darkblue"
diff --git a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
index 40c760b..0300e8f 100644
--- a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
+++ b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
@@ -17,7 +17,6 @@
 
 import {Component, OnInit} from "@angular/core";
 import {Dashboard} from "../../models/dashboard.model";
-import {UIRouter} from "@uirouter/core";
 import {DashboardService} from "../../services/dashboard.service";
 import {ActivatedRoute} from "@angular/router";
 
diff --git a/ui/src/app/data-explorer/data-explorer.component.css b/ui/src/app/data-explorer/data-explorer.component.css
index e7ecf3a..0b8993f 100644
--- a/ui/src/app/data-explorer/data-explorer.component.css
+++ b/ui/src/app/data-explorer/data-explorer.component.css
@@ -31,7 +31,7 @@
 
 .ribbon {
     position: absolute;
-    right: 5px; top: 5px;
+    right: 5px; top: 55px;
     z-index: 1;
     overflow: hidden;
     width: 75px; height: 75px;
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index 636fa7b..3dd1a0b 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -16,9 +16,6 @@
  *
  */
 
-import 'npm/angular-datatables';
-import 'npm/angular-sanitize';
-
 import {CategoryAlreadyInPipelinePipe} from './category-already-in-pipeline.filter';
 import {PipelineOperationsService} from "./services/pipeline-operations.service";
 import {PipelinesComponent} from "./pipelines.component";
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 1468335..f3ae3e1 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -19,7 +19,6 @@
 @import './_variables';
 
 @import '~angular-tree-component/dist/angular-tree-component.css';
-@import '~angular-material/angular-material.scss';
 //@import '~@angular/material/prebuilt-themes/indigo-pink.css';
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~slick-carousel/slick/slick-theme.css';


[incubator-streampipes] 07/11: [STREAMPIPES-193] Migrate loading bar, minor bug fixes to get rid of AngularJS imports

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

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

commit ff779b53d575380839b969b28917ccda6d01c391
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 14 09:16:09 2020 +0200

    [STREAMPIPES-193] Migrate loading bar, minor bug fixes to get rid of AngularJS imports
---
 ui/deployment/appng5.module.mst                    | 34 +++++++---------------
 ui/package.json                                    |  2 ++
 ui/src/app/app.component.html                      |  2 +-
 .../pipeline-element-options.component.ts          |  5 ++--
 .../components/pipeline/pipeline.component.ts      |  6 ++--
 .../app/editor/services/object-provider.service.ts |  3 +-
 .../pipeline-element-recommendation.service.ts     |  3 +-
 .../editor/services/pipeline-validation.service.ts |  3 +-
 .../pipeline-categories-dialog.component.ts        |  3 +-
 .../start-all-pipelines-dialog.component.ts        |  5 ++--
 ui/src/app/pipelines/pipelines.component.ts        |  3 +-
 ui/src/scss/main.scss                              |  2 --
 12 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 3cae21a..8fecff7 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -19,10 +19,8 @@
 import './app.module';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-//import { UpgradeModule } from '@angular/upgrade/static';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { FlexLayoutModule } from '@angular/flex-layout';
-//import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
 import { HttpClientModule } from '@angular/common/http';
 import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -39,7 +37,9 @@ import { AppAssetMonitoringModule } from "./app-asset-monitoring/app-asset-monit
 import { PipelineDetailsModule } from './pipeline-details/pipeline-details.module';
 import { AppTransportMonitoringModule } from "./app-transport-monitoring/app-transport-monitoring.module";
 import { NotificationCountService } from "./services/notification-count-service";
-import {AuthService} from "./services/auth.service";
+import { AuthService } from "./services/auth.service";
+import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
+import { LOADING_BAR_CONFIG } from '@ngx-loading-bar/core';
 
 {{#modulesActive}}
 {{#ng5}}
@@ -47,15 +47,15 @@ import { {{{ng5_moduleName}}} } from '{{{path}}}';
 {{/ng5}}
 {{/modulesActive}}
 
-import {ConsoleLogService} from './shared/logger/log.service';
-import {Logger} from './shared/logger/default-log.service';
+import { ConsoleLogService } from './shared/logger/log.service';
+import { Logger } from './shared/logger/default-log.service';
 import { AppContainerModule } from './app-container/app-container.module';
 import { NotificationModule } from './notifications/notifications.module';
 
-import {AppComponent} from './app.component';
-import {AppRoutingModule} from './app-routing.module';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
 
-import {ServicesModule} from "./services/services.module";
+import { ServicesModule } from "./services/services.module";
 
 import * as $ from 'jquery';
 
@@ -67,15 +67,14 @@ import * as $ from 'jquery';
         AppRoutingModule,
         BrowserModule,
         BrowserAnimationsModule,
-        //UpgradeModule,
         CustomMaterialModule,
         MatGridListModule,
         MatIconModule,
         FlexLayoutModule,
         HttpClientModule,
         FormsModule,
-        //UIRouterUpgradeModule.forRoot(),
         LoginModule,
+        LoadingBarHttpClientModule,
         HomeModule,
         ConfigurationModule,
         InfoModule,
@@ -94,20 +93,9 @@ import * as $ from 'jquery';
     providers: [
         AuthStatusService,
         AuthService,
-        /*
-        {
-          provide: '$stateParams',
-          useFactory: ($injector: any) => $injector.get('$stateParams'),
-          deps: ['$injector']
-        },
-        {
-          provide: '$state',
-          useFactory: ($injector: any) => $injector.get('$state'),
-          deps: ['$injector']
-        },
-        */
         NotificationCountService,
-        {provide: Logger, useClass: ConsoleLogService}
+        { provide: Logger, useClass: ConsoleLogService },
+        { provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 }},
     ],
     bootstrap: [AppComponent]
 })
diff --git a/ui/package.json b/ui/package.json
index c570684..a2c11f6 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -34,6 +34,8 @@
     "@danielmoncada/angular-datetime-picker": "9.2.0",
     "@fortawesome/fontawesome-free": "5.12.1",
     "@ngui/datetime-picker": "0.16.2",
+    "@ngx-loading-bar/core": "5.1.0",
+    "@ngx-loading-bar/http-client": "5.1.0",
     "@stomp/ng2-stompjs": "7.2.0",
     "@swimlane/ngx-charts": "13.0.2",
     "angular-gridster2": "8.3.0",
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 19615f1..04cce49 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -15,5 +15,5 @@
   ~ limitations under the License.
   ~
   -->
-
+<ngx-loading-bar [color]="'rgb(27, 20, 100)'"></ngx-loading-bar>
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index ef118e9..3a3ff5d 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import {JsplumbBridge} from "../../services/jsplumb-bridge.service";
 import {JsplumbService} from "../../services/jsplumb.service";
 import {PipelineValidationService} from "../../services/pipeline-validation.service";
@@ -35,6 +34,7 @@ import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
 import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
 import {CompatibleElementsComponent} from "../../dialog/compatible-elements/compatible-elements.component";
 import {Tuple2} from "../../../core-model/base/Tuple2";
+import { cloneDeep } from "lodash";
 
 @Component({
   selector: 'pipeline-element-options',
@@ -138,7 +138,8 @@ export class PipelineElementOptionsComponent implements OnInit{
   }
 
   initRecs(elementId) {
-    var currentPipeline = this.ObjectProvider.makePipeline(angular.copy(this.rawPipelineModel));
+
+    var currentPipeline = this.ObjectProvider.makePipeline(cloneDeep(this.rawPipelineModel));
     this.EditorService.recommendPipelineElement(currentPipeline).subscribe((result) => {
       if (result.success) {
         this.possibleElements = this.PipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements);
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index bcd6fd8..e0f76d4 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -16,8 +16,6 @@
  *
  */
 
-import * as angular from "angular";
-
 import {PipelineValidationService} from "../../services/pipeline-validation.service";
 import {JsplumbService} from "../../services/jsplumb.service";
 import {PipelineEditorService} from "../../services/pipeline-editor.service";
@@ -236,7 +234,7 @@ export class PipelineComponent implements OnInit {
 
   handleDeleteOption(pipelineElement: PipelineElementConfig) {
     this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom);
-    angular.forEach(this.rawPipelineModel, pe => {
+    this.rawPipelineModel.forEach(pe => {
       if (pe.payload.dom == pipelineElement.payload.dom) {
         pe.settings.disabled = true;
       }
@@ -339,7 +337,7 @@ export class PipelineComponent implements OnInit {
 
   isCustomOutput(pe) {
     var custom = false;
-    angular.forEach(pe.payload.outputStrategies, strategy => {
+    pe.payload.outputStrategies.forEach(strategy => {
       if (strategy instanceof CustomOutputStrategy) {
         custom = true;
       }
diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts
index 3386c05..16e2597 100644
--- a/ui/src/app/editor/services/object-provider.service.ts
+++ b/ui/src/app/editor/services/object-provider.service.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import {Injectable} from "@angular/core";
 import {RestApi} from "../../services/rest-api.service";
 import {JsplumbBridge} from "./jsplumb-bridge.service";
@@ -60,7 +59,7 @@ export class ObjectProvider {
 
     findElement(elementId, rawPipelineModel: PipelineElementConfig[]): PipelineElementConfig {
         let result = {} as PipelineElementConfig;
-        angular.forEach(rawPipelineModel, pe => {
+        rawPipelineModel.forEach(pe => {
             if (pe.payload.dom === elementId) {
                 result = pe;
             }
diff --git a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
index 4738fad..3696e3e 100644
--- a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
+++ b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import {Injectable} from "@angular/core";
 import {EditorService} from "./editor.service";
 import {PipelineElementUnion} from "../model/editor.model";
@@ -34,7 +33,7 @@ export class PipelineElementRecommendationService {
 
     collectPossibleElements(allElements: PipelineElementUnion[], possibleElements: PipelineElementRecommendation[]) {
         var possibleElementConfigs = [];
-        angular.forEach(possibleElements, pe => {
+        possibleElements.forEach(pe => {
             possibleElementConfigs.push(this.getPipelineElementContents(allElements, pe.elementId)[0]);
         })
         return possibleElementConfigs;
diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts
index ea335e9..9095115 100644
--- a/ui/src/app/editor/services/pipeline-validation.service.ts
+++ b/ui/src/app/editor/services/pipeline-validation.service.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import * as dagre from 'dagre';
 import {JsplumbBridge} from "./jsplumb-bridge.service";
 import {Injectable} from "@angular/core";
@@ -114,7 +113,7 @@ export class PipelineValidationService {
 
     isInAssembly(rawPipelineModel: PipelineElementConfig[], type) {
         var isElementInAssembly = false;
-        angular.forEach(rawPipelineModel, pe => {
+        rawPipelineModel.forEach(pe => {
             if (pe.type === type && !pe.settings.disabled) {
                 isElementInAssembly = true;
             }
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
index 14ca150..8a90900 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import {Component, Input, OnInit} from "@angular/core";
 import {Pipeline, PipelineCategory} from "../../../core-model/gen/streampipes-model";
 import {PipelineService} from "../../../platform-services/apis/pipeline.service";
@@ -95,7 +94,7 @@ export class PipelineCategoriesDialogComponent implements OnInit {
 
     findPipeline(pipelineId) {
         var matchedPipeline = {};
-        angular.forEach(this.pipelines, function (pipeline) {
+        this.pipelines.forEach(pipeline => {
             if (pipeline._id == pipelineId) {
                 matchedPipeline = pipeline;
             }
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
index 9e012e0..d3ad53e 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import {Component, Input, OnInit} from "@angular/core";
 import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
 import {Pipeline} from "../../../core-model/gen/streampipes-model";
@@ -78,7 +77,7 @@ export class StartAllPipelinesDialogComponent implements OnInit {
     }
 
     getPipelinesToModify() {
-        angular.forEach(this.pipelines, pipeline => {
+        this.pipelines.forEach(pipeline => {
             if (pipeline.running != this.action && this.hasCategory(pipeline)) {
                 this.pipelinesToModify.push(pipeline);
             }
@@ -89,7 +88,7 @@ export class StartAllPipelinesDialogComponent implements OnInit {
         var categoryPresent = false;
         if (!this.activeCategory) return true;
         else {
-            angular.forEach(pipeline.pipelineCategories, category => {
+            pipeline.pipelineCategories.forEach(category => {
                 if (category == this.activeCategory) {
                     categoryPresent = true;
                 }
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index 530c56d..6016fe0 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -16,7 +16,6 @@
  *
  */
 
-import * as angular from 'angular';
 import * as FileSaver from 'file-saver';
 import {Component, Inject, OnInit} from "@angular/core";
 import {PipelineService} from "../platform-services/apis/pipeline.service";
@@ -127,7 +126,7 @@ export class PipelinesComponent implements OnInit {
 
     checkCurrentSelectionStatus(status) {
         var active = true;
-        angular.forEach(this.pipelines, pipeline => {
+        this.pipelines.forEach(pipeline => {
             if (!this.activeCategoryId || pipeline.pipelineCategories.some(pc => pc === this.activeCategoryId)) {
                 if (pipeline.running == status) {
                     active = false;
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index f3ae3e1..15d42ab 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -23,11 +23,9 @@
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~slick-carousel/slick/slick-theme.css';
 @import '~slick-carousel/slick/slick.css';
-@import '~datatables.net-dt/css/jquery.dataTables.css';
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import '~angular-notification-icons/dist/angular-notification-icons.min.css';
 @import '~angular-ui-tree/dist/angular-ui-tree.min.css';
-@import '~angularjs-datetime-picker/angularjs-datetime-picker.css';
 @import '~jsplumb/dist/css/jsplumb.css';
 @import '~ng-prettyjson/dist/ng-prettyjson.min.css';
 @import '~prismjs/themes/prism.css';


[incubator-streampipes] 10/11: [STREAMPIPES-193] Fix notification icon in iconbar

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

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

commit 5bfdfdafad2dfc5f128ed9a526de03fcb8f6527a
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Aug 15 22:40:01 2020 +0200

    [STREAMPIPES-193] Fix notification icon in iconbar
---
 .../rest/impl/PipelineWithUserResource.java        |  2 ++
 ui/deployment/appng5.module.mst                    |  5 ++++
 ui/package.json                                    |  2 ++
 ui/src/app/app-routing.module.ts                   |  2 ++
 ui/src/app/connect/rest.service.ts                 |  4 ++-
 .../components/iconbar/iconbar.component.html      | 31 +++++++++++-----------
 .../components/iconbar/iconbar.component.ts        |  9 ++++---
 ui/src/app/core-v2/core.module.ts                  |  6 ++---
 .../app/notifications/notifications.component.ts   |  7 ++---
 ui/src/app/notifications/notifications.module.ts   |  7 +----
 .../notifications/service/notifications.service.ts |  4 ++-
 ui/src/app/services/notification-count-service.ts  |  4 +--
 ui/src/scss/main.scss                              |  1 +
 13 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
index 1df1824..44d1e9f 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
@@ -159,6 +159,8 @@ public class PipelineWithUserResource extends AbstractRestInterface implements I
         pipeline.setRunning(false);
         pipeline.setCreatedByUser(username);
         pipeline.setCreatedAt(new Date().getTime());
+        pipeline.getSepas().forEach(processor -> processor.setCorrespondingUser(username));
+        pipeline.getActions().forEach(action -> action.setCorrespondingUser(username));
         //userService.addOwnPipeline(username, pipeline);
         Operations.storePipeline(pipeline);
         SuccessMessage message = Notifications.success("Pipeline stored");
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 8fecff7..ebde9ab 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -96,6 +96,11 @@ import * as $ from 'jquery';
         NotificationCountService,
         { provide: Logger, useClass: ConsoleLogService },
         { provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 }},
+        {
+        			provide: RxStompService,
+        			useFactory: rxStompServiceFactory,
+        			deps: [InjectableRxStompConfig]
+        }
     ],
     bootstrap: [AppComponent]
 })
diff --git a/ui/package.json b/ui/package.json
index a2c11f6..8e4362a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -38,6 +38,7 @@
     "@ngx-loading-bar/http-client": "5.1.0",
     "@stomp/ng2-stompjs": "7.2.0",
     "@swimlane/ngx-charts": "13.0.2",
+    "angular-datatables": "9.0.2",
     "angular-gridster2": "8.3.0",
     "angular-loading-bar": "0.8.0",
     "angular-material-icons": "0.4.0",
@@ -52,6 +53,7 @@
     "codemirror": "5.55.0",
     "core-js": "2.5.3",
     "dagre": "0.8.4",
+    "datatables.net-dt": "1.10.21",
     "datatables.net": "1.10.20",
     "fast-json-patch": "2.1.0",
     "file-saver": "1.3.8",
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index cc9df99..0bc629d 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -38,6 +38,7 @@ import {StartupComponent} from "./login/components/startup/startup.component";
 import {AlreadyConfiguredCanActivateGuard} from "./_guards/already-configured.can-activate.guard";
 import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
 import {InfoComponent} from "./info/info.component";
+import {NotificationsComponent} from "./notifications/notifications.component";
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
@@ -53,6 +54,7 @@ const routes: Routes = [
       { path: 'dashboard', component: DashboardComponent },
       { path: 'dataexplorer', component: DataExplorerComponent },
       { path: 'editor', component: EditorComponent },
+      { path: 'notifications', component: NotificationsComponent },
       { path: 'pipelines', component: PipelinesComponent },
       { path: 'info', component: InfoComponent },
       { path: 'pipeline-details', component: PipelineDetailsComponent }
diff --git a/ui/src/app/connect/rest.service.ts b/ui/src/app/connect/rest.service.ts
index d156808..a836f91 100644
--- a/ui/src/app/connect/rest.service.ts
+++ b/ui/src/app/connect/rest.service.ts
@@ -101,7 +101,9 @@ export class RestService {
     }
 
     getRuntimeInfo(sourceDescription): Observable<any> {
-        return this.http.post(this.makeUserDependentBaseUrl() + "/pipeline-element/runtime", sourceDescription);
+        return this.http.post(this.makeUserDependentBaseUrl() + "/pipeline-element/runtime", sourceDescription, {
+            headers: { ignoreLoadingBar: '' }
+        });
     }
 
     makeUserDependentBaseUrl() {
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.html b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
index e48e05a..4185019 100644
--- a/ui/src/app/core-v2/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
@@ -18,29 +18,30 @@
 
 <div style="padding-top:0px;">
     <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected': 'sp-navbar-item'"
-                  *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
-        <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}" matTooltipPosition="right">
+         *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
+        <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)"
+                matTooltip="{{item.title}}" matTooltipPosition="right">
             <mat-icon [ngClass]="item.link === activePage ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'">
                 {{item.icon}}
             </mat-icon>
         </button>
     </div>
-    <div  [ngClass]="'streampipes.notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'">
-<!--        <notification-icon count='toolbarCtrl.NotificationCountService.unreadNotificationCount'>-->
-<!--            <md-button class="md-icon-button button-margin-iconbar" ng-click="go('streampipes.notifications')">-->
-<!--                <md-icon md-svg-icon="communication:ic_chat_24px" aria-label="Notifications"-->
-<!--                         ng-class="{'sp-navbar-icon-selected' : 'streampipes.notifications' === activePage, 'sp-navbar-icon': 'streampipes.notifications' !== activePage}"></md-icon>-->
-<!--                <md-tooltip md-direction="right">-->
-<!--                    Notifications-->
-<!--                </md-tooltip>-->
-<!--            </md-button>-->
-<!--        </notification-icon>-->
+    <div [ngClass]="'notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
+         style="padding-top:5px;padding-bottom:5px;">
+        <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar"
+                (click)="go('notifications')"
+                matTooltip="Notifications" matTooltipPosition="right">
+            <mat-icon [matBadge]="NotificationCountService.unreadNotificationCount" [matBadgeHidden]="NotificationCountService.unreadNotificationCount == 0" [ngClass]="'notifications' === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">chat
+            </mat-icon>
+        </button>
     </div>
     <mat-divider style="border-top-color:white;"></mat-divider>
     <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
-                  *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
-        <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}">
-            <mat-icon [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
+         *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
+        <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)"
+                matTooltip="{{item.title}}">
+            <mat-icon
+                    [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
         </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
index 890d23f..39328db 100644
--- a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
@@ -30,22 +30,25 @@ import {NotificationCountService} from "../../../services/notification-count-ser
 })
 export class IconbarComponent extends BaseNavigationComponent implements OnInit {
 
+  unreadNotifications: number = 0;
 
   constructor(Router: Router,
               private AuthStatusService: AuthStatusService,
-              private NotificationCountService: NotificationCountService) {
+              public NotificationCountService: NotificationCountService) {
     super(Router);
   }
 
   ngOnInit(): void {
     super.onInit();
+    this.connectToBroker();
+    this.NotificationCountService.loadUnreadNotifications();
   }
 
   connectToBroker() {
     var login = 'admin';
     var passcode = 'admin';
-    var websocketProtocol = window.location.protocol === "http" ? "ws" : "wss";
-    var brokerUrl = websocketProtocol + '://' + window.location.host + ':' + window.location.port + '/streampipes/ws';
+    var websocketProtocol = window.location.protocol === "http:" ? "ws" : "wss";
+    var brokerUrl = websocketProtocol + '://' + window.location.hostname + ':' + window.location.port + '/streampipes/ws';
     var inputTopic = '/topic/org.apache.streampipes.notifications.' + this.AuthStatusService.email;
 
     let stompClient = new Client({
diff --git a/ui/src/app/core-v2/core.module.ts b/ui/src/app/core-v2/core.module.ts
index 3d1cbe5..fe9fb0f 100644
--- a/ui/src/app/core-v2/core.module.ts
+++ b/ui/src/app/core-v2/core.module.ts
@@ -35,6 +35,7 @@ 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";
 
 @NgModule({
   imports: [
@@ -45,6 +46,7 @@ import {MatMenuModule} from "@angular/material/menu";
     MatListModule,
     MatIconModule,
     MatMenuModule,
+    MatBadgeModule,
     MatButtonModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
@@ -59,9 +61,7 @@ import {MatMenuModule} from "@angular/material/menu";
     IconbarComponent,
     ToolbarComponent
   ],
-  providers: [
-
-  ],
+  providers: [],
   entryComponents: [
     StreampipesComponent
   ]
diff --git a/ui/src/app/notifications/notifications.component.ts b/ui/src/app/notifications/notifications.component.ts
index b3e2c49..8a5194d 100644
--- a/ui/src/app/notifications/notifications.component.ts
+++ b/ui/src/app/notifications/notifications.component.ts
@@ -27,6 +27,7 @@ import {RxStompService} from "@stomp/ng2-stompjs";
 import {AuthStatusService} from "../services/auth-status.service";
 import {NotificationUtils} from "./utils/notifications.utils";
 import {NotificationCountService} from "../services/notification-count-service";
+import {FreeTextStaticProperty, Pipeline} from "../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'notifications',
@@ -112,14 +113,14 @@ export class NotificationsComponent implements OnInit, OnDestroy {
         });
     }
 
-    filterForNotifications(pipelines: any) {
+    filterForNotifications(pipelines: Pipeline[]) {
         pipelines.forEach(pipeline => {
            let notificationActions = pipeline.actions.filter(sink => sink.appId === NotificationsComponent.NOTIFICATIONS_APP_ID);
              notificationActions.forEach(notificationAction => {
                 let notificationName = notificationAction
                     .staticProperties
-                    .filter(sp => sp.properties.internalName === NotificationsComponent.NOTIFICATION_TITLE_KEY)
-                    .map(sp => sp.properties.value)[0];
+                    .filter(sp => sp.internalName === NotificationsComponent.NOTIFICATION_TITLE_KEY)
+                    .map(sp => (sp as FreeTextStaticProperty).value)[0];
                 let pipelineName = pipeline.name;
                 this.existingNotifications.push({notificationTitle: notificationName,
                     pipelineName: pipelineName, pipelineId: pipeline._id, notificationId: NotificationUtils.makeNotificationId(pipeline._id, notificationName)});
diff --git a/ui/src/app/notifications/notifications.module.ts b/ui/src/app/notifications/notifications.module.ts
index 9a3f74f..3c119c8 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -42,12 +42,7 @@ import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@s
 		NotificationItemComponent
 	],
 	providers: [
-		NotificationsService,
-		{
-			provide: RxStompService,
-			useFactory: rxStompServiceFactory,
-			deps: [InjectableRxStompConfig]
-		}
+		NotificationsService
 	],
 	exports: [
 		NotificationsComponent
diff --git a/ui/src/app/notifications/service/notifications.service.ts b/ui/src/app/notifications/service/notifications.service.ts
index 7208363..024c447 100644
--- a/ui/src/app/notifications/service/notifications.service.ts
+++ b/ui/src/app/notifications/service/notifications.service.ts
@@ -50,7 +50,9 @@ export class NotificationsService {
     }
 
     updateNotification(notificationItem: NotificationItem): Observable<any> {
-        return this.http.put(this.notificationUrl + "/" + notificationItem._id, notificationItem);
+        return this.http.put(this.notificationUrl + "/" + notificationItem._id, notificationItem, {
+            headers: { ignoreLoadingBar: '' }
+        });
     }
 
     private get baseUrl() {
diff --git a/ui/src/app/services/notification-count-service.ts b/ui/src/app/services/notification-count-service.ts
index c4b2c5b..d5092ad 100644
--- a/ui/src/app/services/notification-count-service.ts
+++ b/ui/src/app/services/notification-count-service.ts
@@ -61,6 +61,4 @@ export class NotificationCountService {
         let vizName = notificationTitle.replace(/\\s/g, '-');
         return pipelineId + '-' + vizName;
     }
-}
-
-NotificationCountService.$inject = ['RestApi'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 15d42ab..ab73bae 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -20,6 +20,7 @@
 
 @import '~angular-tree-component/dist/angular-tree-component.css';
 //@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import '~datatables.net-dt/css/jquery.dataTables.css';
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~slick-carousel/slick/slick-theme.css';
 @import '~slick-carousel/slick/slick.css';