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 2022/04/17 09:43:37 UTC

[incubator-streampipes] branch dev updated: [STREAMPIPES-531] Extract dialog services to shared-ui library

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

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


The following commit(s) were added to refs/heads/dev by this push:
     new 7f7e1d447 [STREAMPIPES-531] Extract dialog services to shared-ui library
     new bda06337f Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
7f7e1d447 is described below

commit 7f7e1d4479b896a40e506af030ee12b7d9856db1
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Apr 17 11:42:37 2022 +0200

    [STREAMPIPES-531] Extract dialog services to shared-ui library
---
 ui/.gitignore                                      |   1 +
 ui/angular.json                                    |  31 ++++
 ui/package.json                                    |  24 ++-
 ui/projects/streampipes/shared-ui/.browserslistrc  |  16 ++
 ui/projects/streampipes/shared-ui/README.md        |  24 +++
 ui/projects/streampipes/shared-ui/karma.conf.js    |  44 +++++
 ui/projects/streampipes/shared-ui/ng-package.json  |   7 +
 ui/projects/streampipes/shared-ui/package.json     |  15 ++
 .../dialog/base-dialog/base-dialog.component.ts    |   2 +-
 .../lib}/dialog/base-dialog/base-dialog.config.ts  |   0
 .../lib}/dialog/base-dialog/base-dialog.model.ts   |   0
 .../lib}/dialog/base-dialog/base-dialog.service.ts |   4 +-
 .../src/lib}/dialog/base-dialog/dialog-ref.ts      |   0
 .../confirm-dialog/confirm-dialog.component.html   |   0
 .../confirm-dialog/confirm-dialog.component.scss   |   4 +-
 .../confirm-dialog/confirm-dialog.component.ts     |   0
 .../panel-dialog/panel-dialog.component.html       |   2 +-
 .../panel-dialog/panel-dialog.component.scss       |   2 +-
 .../dialog/panel-dialog/panel-dialog.component.ts  |   0
 .../dialog/panel-dialog/panel-dialog.config.ts     |   0
 .../standard-dialog/standard-dialog.component.html |   0
 .../standard-dialog/standard-dialog.component.scss |   2 +-
 .../standard-dialog/standard-dialog.component.ts   |   0
 .../standard-dialog/standard-dialog.config.ts      |   0
 .../shared-ui/src/lib/shared-ui.module.ts          |  26 +++
 .../streampipes/shared-ui/src/public-api.ts        |  16 ++
 ui/projects/streampipes/shared-ui/src/test.ts      |  27 +++
 .../streampipes/shared-ui/tsconfig.lib.json        |  20 ++
 .../streampipes/shared-ui/tsconfig.lib.prod.json   |  10 +
 .../streampipes/shared-ui/tsconfig.spec.json       |  17 ++
 ui/src/app/add/add.component.ts                    |   4 +-
 ui/src/app/add/add.module.ts                       |  59 +++---
 .../endpoint-item/endpoint-item.component.ts       |   3 +-
 .../dialogs/add-endpoint/add-endpoint.component.ts |   2 +-
 .../endpoint-installation.component.ts             |   2 +-
 .../create-asset/create-asset.component.ts         |   3 +-
 .../dialog/add-link/add-link-dialog.component.ts   |   2 +-
 .../add-pipeline/add-pipeline-dialog.component.ts  |   2 +-
 .../save-dashboard-dialog.component.ts             |   2 +-
 .../datalake-configuration.component.ts            |   4 +-
 .../delete-datalake-index-dialog.component.ts      |   2 +-
 .../abstract-security-principal-config.ts          |   5 +-
 .../edit-group-dialog.component.ts                 |   2 +-
 .../edit-user-dialog/edit-user-dialog.component.ts |   2 +-
 .../user-group-configuration.component.ts          |   3 +-
 .../adapter-description.component.ts               |   3 +-
 .../data-marketplace/data-marketplace.component.ts |   2 +-
 .../existing-adapters.component.ts                 |   4 +-
 .../start-adapter-configuration.component.ts       |   7 +-
 .../adapter-export-dialog.component.ts             |   2 +-
 .../adapter-started-dialog.component.ts            |   2 +-
 .../adapter-upload-dialog.component.ts             |   2 +-
 .../delete-adapter-dialog.component.ts             |   2 +-
 ui/src/app/core-ui/core-ui.module.ts               |  13 +-
 .../object-permission-dialog.component.ts          |   2 +-
 .../overview/dashboard-overview.component.ts       |   3 +-
 .../components/panel/dashboard-panel.component.ts  |   4 +-
 .../widget/dashboard-widget.component.ts           |   3 +-
 .../add-visualization-dialog.component.ts          |   4 +-
 .../edit-dashboard-dialog.component.ts             |   2 +-
 .../data-explorer-dashboard-overview.component.ts  |   3 +-
 ui/src/app/data-explorer/data-explorer.module.ts   | 202 ++++++++++-----------
 ...ata-explorer-edit-data-view-dialog.component.ts |   2 +-
 .../data-explorer/services/widget-type.service.ts  |   4 +-
 .../pipeline-assembly.component.ts                 |   4 +-
 .../pipeline-element-options.component.ts          |   3 +-
 .../components/pipeline/pipeline.component.ts      |   4 +-
 .../compatible-elements.component.ts               |   2 +-
 .../editor/dialog/customize/customize.component.ts |   2 +-
 ui/src/app/editor/dialog/help/help.component.ts    |   2 +-
 .../matching-error/matching-error.component.ts     |   2 +-
 .../missing-elements-for-tutorial.component.ts     |   2 +-
 .../pipeline-element-discovery.component.ts        |   2 +-
 .../save-pipeline/save-pipeline.component.ts       |   2 +-
 .../dialog/welcome-tour/welcome-tour.component.ts  |   2 +-
 ui/src/app/editor/editor.component.ts              |   5 +-
 ui/src/app/editor/services/editor.service.ts       |   3 +-
 .../file-overview/file-overview.component.ts       |   2 +-
 .../file-upload/file-upload-dialog.component.ts    |   2 +-
 ui/src/app/files/files.component.ts                |   3 +-
 .../delete-pipeline-dialog.component.ts            |   2 +-
 .../import-pipeline-dialog.component.ts            |   2 +-
 .../pipeline-categories-dialog.component.ts        |   2 +-
 .../pipeline-notifications.component.ts            |   2 +-
 .../pipeline-status-dialog.component.ts            |   2 +-
 .../start-all-pipelines-dialog.component.ts        |   2 +-
 ui/src/app/pipelines/pipelines.component.ts        |   4 +-
 ui/src/app/pipelines/pipelines.module.ts           |  66 +++----
 .../services/pipeline-operations.service.ts        |   4 +-
 .../general/general-profile-settings.component.ts  |  11 +-
 .../change-email/change-email-dialog.component.ts  |   2 +-
 .../change-password-dialog.component.ts            |   2 +-
 ui/tsconfig.json                                   |   3 +
 ui/webpack.partial.base.js                         |   5 +-
 94 files changed, 516 insertions(+), 292 deletions(-)

diff --git a/ui/.gitignore b/ui/.gitignore
index fbb4ee59b..fa7611034 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -41,6 +41,7 @@ webpack.partial.dev.js
 # dependencies
 /node_modules
 projects/streampipes/platform-services/node_modules
+projects/streampipes/shared-ui/node_modules
 
 
 # IDEs and editors
diff --git a/ui/angular.json b/ui/angular.json
index ed8d7dceb..afd010d1d 100644
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -140,6 +140,37 @@
           }
         }
       }
+    },
+    "@streampipes/shared-ui": {
+      "projectType": "library",
+      "root": "projects/streampipes/shared-ui",
+      "sourceRoot": "projects/streampipes/shared-ui/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/streampipes/shared-ui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/streampipes/shared-ui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/streampipes/shared-ui/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/streampipes/shared-ui/src/test.ts",
+            "tsConfig": "projects/streampipes/shared-ui/tsconfig.spec.json",
+            "karmaConfig": "projects/streampipes/shared-ui/karma.conf.js"
+          }
+        }
+      }
     }
   },
   "defaultProject": "app"
diff --git a/ui/package.json b/ui/package.json
index 18ad18031..e4eb1535e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -8,21 +8,27 @@
     "url": "https://github.com/apache/incubator-streampipes"
   },
   "scripts": {
-    "build-platform-services": "ng build @streampipes/platform-services && npm install @streampipes/platform-services@file:./dist/streampipes/platform-services --no-save",
-    "start": "node ./deployment/prebuild.js && npm run build-platform-services && ng serve",
-    "test": "node ./deployment/prebuild.js && npm run build-platform-services && ng test",
-    "start-plain": "npm run build-platform-services && ng serve",
-    "build-plain": "set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-platform-services && ng build --configuration production",
+    "build-libs": "ng build @streampipes/shared-ui && ng build @streampipes/platform-services",
+    "install-libs": "npm install @streampipes/shared-ui@file:./dist/streampipes/shared-ui @streampipes/platform-services@file:./dist/streampipes/platform-services --no-save",
+    "build-libraries": "npm run build-libs && npm run install-libs",
+    "start": "node ./deployment/prebuild.js && npm run build-libraries && ng serve",
+    "test": "node ./deployment/prebuild.js && npm run build-libraries && ng test",
+    "start-plain": "npm run build-libraries && ng serve",
+    "build-plain": "set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-libraries && ng build --configuration production",
     "run-prebuild-script": "node ./deployment/prebuild.js",
-    "build": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-platform-services && ng build --configuration production",
-    "build-dev": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-platform-services && ng build",
-    "build-rc": "node ./deployment/prebuild.js rel && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-platform-services && ng build --configuration production",
+    "build": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-libraries && ng build --configuration production",
+    "build-dev": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-libraries && ng build",
+    "build-rc": "node ./deployment/prebuild.js rel && set NODE_OPTIONS=--max-old-space-size=10192 && npm run build-libraries && ng build --configuration production",
     "lint": "tslint -c tslint.json 'src/**/*.ts*",
     "analyze": "webpack-bundle-analyzer dist/stats.json",
     "test-cypress-open": "cypress open",
     "test-cypress-smoke": "npx cypress run --spec 'cypress/tests/**/*.smoke.spec.ts'",
     "test-cypress-all": "npx cypress run --spec 'cypress/tests/**/*.spec.ts'"
   },
+  "peerDependencies": {
+    "@streampipes/platform-services": "0.0.1",
+    "@streampipes/shared-ui": "0.0.1"
+  },
   "dependencies": {
     "@angular-architects/module-federation": "^14.0.1",
     "@angular/animations": "^13.3.0",
@@ -131,7 +137,7 @@
     "tslint": "~6.1.0",
     "tslint-config-prettier": "^1.15.0",
     "typescript": "4.6.2",
-    "webpack": "^5.58.1",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.0",
     "webpack-merge": "^5.8.0"
   }
diff --git a/ui/projects/streampipes/shared-ui/.browserslistrc b/ui/projects/streampipes/shared-ui/.browserslistrc
new file mode 100644
index 000000000..4f9ac2698
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/ui/projects/streampipes/shared-ui/README.md b/ui/projects/streampipes/shared-ui/README.md
new file mode 100644
index 000000000..539fde74d
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/README.md
@@ -0,0 +1,24 @@
+# SharedUi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project shared-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project shared-ui`.
+> Note: Don't forget to add `--project shared-ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build shared-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build shared-ui`, go to the dist folder `cd dist/shared-ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test shared-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/ui/projects/streampipes/shared-ui/karma.conf.js b/ui/projects/streampipes/shared-ui/karma.conf.js
new file mode 100644
index 000000000..4358433bd
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/streampipes/shared-ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/ui/projects/streampipes/shared-ui/ng-package.json b/ui/projects/streampipes/shared-ui/ng-package.json
new file mode 100644
index 000000000..e5d8e8315
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/streampipes/shared-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/ui/projects/streampipes/shared-ui/package.json b/ui/projects/streampipes/shared-ui/package.json
new file mode 100644
index 000000000..95c747714
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@streampipes/shared-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/animations": "^13.3.0",
+    "@angular/common": "^13.3.0",
+    "@angular/core": "^13.3.0",
+    "@angular/material": "^13.3.0",
+    "@angular/cdk": "^13.3.0",
+    "rxjs": "^6.6.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.component.ts
similarity index 98%
rename from ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.component.ts
index 06199db02..f8fadb958 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.component.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.component.ts
@@ -46,7 +46,7 @@ export abstract class BaseDialogComponent<T> {
 
   }
 
-  attach() {
+  attach(): any {
     const c = this.portal.attach(this.selectedPortal);
     return c.instance;
   }
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.config.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/base-dialog/base-dialog.config.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.config.ts
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.model.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/base-dialog/base-dialog.model.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.model.ts
diff --git a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.service.ts
similarity index 95%
rename from ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.service.ts
index a1e456b51..31bc2157d 100644
--- a/ui/src/app/core-ui/dialog/base-dialog/base-dialog.service.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/base-dialog.service.ts
@@ -91,11 +91,11 @@ export class DialogService {
   }
 
   getPanel(panelType: PanelType): ComponentType<BaseDialogComponentUnion> {
-    return panelType == PanelType.SLIDE_IN_PANEL ? PanelDialogComponent : StandardDialogComponent;
+    return panelType === PanelType.SLIDE_IN_PANEL ? PanelDialogComponent : StandardDialogComponent;
   }
 
   getConfig(panelType: PanelType): BaseDialogConfig {
-    return panelType == PanelType.SLIDE_IN_PANEL ? new PanelDialogConfig() :
+    return panelType === PanelType.SLIDE_IN_PANEL ? new PanelDialogConfig() :
         new StandardDialogConfig();
   }
 
diff --git a/ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/dialog-ref.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/base-dialog/dialog-ref.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/base-dialog/dialog-ref.ts
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.html
similarity index 100%
rename from ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.html
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
similarity index 93%
rename from ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
index 43a827937..eeee6bd8a 100644
--- a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
@@ -16,8 +16,8 @@
  *
  */
 
-@import '../../../../scss/sp/sp-dialog';
+@import '../../../../../../../src/scss/sp/sp-dialog';
 
 .footer {
   margin-top:20px;
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.ts
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.html
similarity index 99%
rename from ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.html
index 7da417177..165ccdf05 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.html
@@ -26,4 +26,4 @@
     <div class="dialog-panel-content">
         <ng-template cdkPortalOutlet #portal></ng-template>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss
similarity index 96%
rename from ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss
index 2f4115a42..a5bb35d00 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss
@@ -16,7 +16,7 @@
  *
  */
 
-@import 'src/scss/sp/colors';
+@import '../../../../../../../src/scss/sp/colors';
 
 app-dialog-container {
   width: 100%;
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.ts
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.config.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.config.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.config.ts
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.html
similarity index 100%
rename from ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.html
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.html
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss
similarity index 96%
rename from ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss
index 11590d4a2..1efe8a457 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss
@@ -16,7 +16,7 @@
  *
  */
 
-@import 'src/scss/sp/colors';
+@import '../../../../../../../src/scss/sp/colors';
 
 standard-dialog-container {
   width: 100%;
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.ts
diff --git a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.config.ts
similarity index 100%
rename from ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.config.ts
rename to ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.config.ts
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
new file mode 100644
index 000000000..a5672d731
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';
+import { PanelDialogComponent } from './dialog/panel-dialog/panel-dialog.component';
+import { StandardDialogComponent } from './dialog/standard-dialog/standard-dialog.component';
+import { CommonModule } from "@angular/common";
+import { PortalModule } from "@angular/cdk/portal";
+import { MatButtonModule } from "@angular/material/button";
+import { OverlayModule } from "@angular/cdk/overlay";
+
+@NgModule({
+  declarations: [
+    ConfirmDialogComponent,
+    PanelDialogComponent,
+    StandardDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    PortalModule,
+    MatButtonModule,
+    OverlayModule
+  ],
+  exports: [
+    ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent
+  ]
+})
+export class SharedUiModule { }
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts
new file mode 100644
index 000000000..e84997fcc
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -0,0 +1,16 @@
+/*
+ * Public API Surface of shared-ui
+ */
+
+export * from './lib/shared-ui.module';
+
+export * from './lib/dialog/base-dialog/base-dialog.model';
+// export * from './lib/dialog/base-dialog/base-dialog.component';
+export * from './lib/dialog/base-dialog/base-dialog.service';
+export * from './lib/dialog/base-dialog/dialog-ref';
+
+export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
+export * from './lib/dialog/panel-dialog/panel-dialog.component';
+export * from './lib/dialog/standard-dialog/standard-dialog.component';
+
+
diff --git a/ui/projects/streampipes/shared-ui/src/test.ts b/ui/projects/streampipes/shared-ui/src/test.ts
new file mode 100644
index 000000000..bcca659d3
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/test.ts
@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/ui/projects/streampipes/shared-ui/tsconfig.lib.json b/ui/projects/streampipes/shared-ui/tsconfig.lib.json
new file mode 100644
index 000000000..a7141c543
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/tsconfig.lib.json
@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/ui/projects/streampipes/shared-ui/tsconfig.lib.prod.json b/ui/projects/streampipes/shared-ui/tsconfig.lib.prod.json
new file mode 100644
index 000000000..06de549e1
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/tsconfig.lib.prod.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
diff --git a/ui/projects/streampipes/shared-ui/tsconfig.spec.json b/ui/projects/streampipes/shared-ui/tsconfig.spec.json
new file mode 100644
index 000000000..85392ee8f
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/tsconfig.spec.json
@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/ui/src/app/add/add.component.ts b/ui/src/app/add/add.component.ts
index 29301ff63..7df4a35fa 100644
--- a/ui/src/app/add/add.component.ts
+++ b/ui/src/app/add/add.component.ts
@@ -19,9 +19,7 @@
 import { RestApi } from '../services/rest-api.service';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { AddService } from './services/add.service';
-import { DialogRef } from '../core-ui/dialog/base-dialog/dialog-ref';
-import { PanelType } from '../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogRef, DialogService, PanelType } from '@streampipes/shared-ui';
 import { AddEndpointComponent } from './dialogs/add-endpoint/add-endpoint.component';
 import { EndpointInstallationComponent } from './dialogs/endpoint-installation/endpoint-installation.component';
 import { ExtensionsServiceEndpointItem } from '@streampipes/platform-services';
diff --git a/ui/src/app/add/add.module.ts b/ui/src/app/add/add.module.ts
index e5e3fbfe1..176ee2d97 100644
--- a/ui/src/app/add/add.module.ts
+++ b/ui/src/app/add/add.module.ts
@@ -34,36 +34,37 @@ import { EndpointInstallationComponent } from './dialogs/endpoint-installation/e
 import { PipelineElementNameFilter } from './filter/pipeline-element-name.pipe';
 import { PipelineElementInstallationStatusFilter } from './filter/pipeline-element-installation-status.pipe';
 
+
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        MatTabsModule,
-        FlexLayoutModule,
-        CoreUiModule,
-        CustomMaterialModule,
-        MatProgressSpinnerModule
-    ],
-    declarations: [
-        AddComponent,
-        AddEndpointComponent,
-        EndpointInstallationComponent,
-        EndpointItemComponent,
-        OrderByPipe,
-        PipelineElementNameFilter,
-        PipelineElementInstallationStatusFilter,
-        PipelineElementTypeFilter
-    ],
-    providers: [
-        AddService,
-        OrderByPipe,
-        PipelineElementInstallationStatusFilter,
-        PipelineElementNameFilter,
-        PipelineElementTypeFilter
-    ],
-    exports: [
-        AddComponent
-    ]
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatTabsModule,
+    FlexLayoutModule,
+    CoreUiModule,
+    CustomMaterialModule,
+    MatProgressSpinnerModule,
+  ],
+  declarations: [
+    AddComponent,
+    AddEndpointComponent,
+    EndpointInstallationComponent,
+    EndpointItemComponent,
+    OrderByPipe,
+    PipelineElementNameFilter,
+    PipelineElementInstallationStatusFilter,
+    PipelineElementTypeFilter
+  ],
+  providers: [
+    AddService,
+    OrderByPipe,
+    PipelineElementInstallationStatusFilter,
+    PipelineElementNameFilter,
+    PipelineElementTypeFilter
+  ],
+  exports: [
+    AddComponent
+  ]
 })
 export class AddModule {
 
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 bcc993230..0b15e0eed 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
@@ -23,8 +23,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ExtensionsServiceEndpointItem, PipelineElementEndpointService } from '@streampipes/platform-services';
 import { AppConstants } from '../../../services/app.constants';
 import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permission-dialog/object-permission-dialog.component';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'sp-endpoint-item',
diff --git a/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.ts b/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.ts
index 561a1cdfc..5976d4aee 100644
--- a/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.ts
+++ b/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { AddService } from '../../services/add.service';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'sp-add-endpoint-dialog',
diff --git a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts b/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
index 7b583535e..c52945ff7 100644
--- a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
+++ b/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { PipelineElementEndpointService } from '@streampipes/platform-services';
 
 @Component({
diff --git a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
index 4111fbd1e..b53ce8e80 100644
--- a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
@@ -23,8 +23,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ShapeService } from '../../services/shape.service';
 import { SelectedVisualizationData } from '../../model/selected-visualization-data.model';
 import { SaveDashboardDialogComponent } from '../../dialog/save-dashboard/save-dashboard-dialog.component';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
 import { RestService } from '../../services/rest.service';
 import { AddLinkDialogComponent } from '../../dialog/add-link/add-link-dialog.component';
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
index 89b5c9a7c..faa1e44de 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/add-link/add-link-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { ShapeService } from '../../services/shape.service';
 import { HyperlinkConfig } from '../../model/selected-visualization-data.model';
 
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
index 5803c06b6..dd0855ddd 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
@@ -21,7 +21,7 @@ import { RestApi } from '../../../services/rest-api.service';
 import { RestService } from '../../services/rest.service';
 import { ElementIconText } from '../../../services/get-element-icon-text.service';
 import { SelectedVisualizationData } from '../../model/selected-visualization-data.model';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { DataLakeMeasure, DatalakeRestService, DataViewDataExplorerService } from '@streampipes/platform-services';
 import { zip } from 'rxjs';
 
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
index dde758745..e8323ca5b 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
@@ -20,7 +20,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { RestService } from '../../services/rest.service';
 import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
 import { ImageInfo } from '../../model/image-info.model';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import Konva from 'konva';
 import Stage = Konva.Stage;
 
diff --git a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
index f0d11f591..7f6986d6a 100644
--- a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
+++ b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
@@ -30,9 +30,7 @@ import {
 } from '@streampipes/platform-services';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { DialogRef } from '../../core-ui/dialog/base-dialog/dialog-ref';
-import { PanelType } from '../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogRef, DialogService, PanelType } from '@streampipes/shared-ui';
 import { DeleteDatalakeIndexComponent } from '../dialog/delete-datalake-index/delete-datalake-index-dialog.component';
 
 @Component({
diff --git a/ui/src/app/configuration/dialog/delete-datalake-index/delete-datalake-index-dialog.component.ts b/ui/src/app/configuration/dialog/delete-datalake-index/delete-datalake-index-dialog.component.ts
index 4bb905e60..0ae089770 100644
--- a/ui/src/app/configuration/dialog/delete-datalake-index/delete-datalake-index-dialog.component.ts
+++ b/ui/src/app/configuration/dialog/delete-datalake-index/delete-datalake-index-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { DatalakeRestService } from '@streampipes/platform-services';
 
 @Component({
diff --git a/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts b/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
index f35c94ab9..436012478 100644
--- a/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
+++ b/ui/src/app/configuration/security-configuration/abstract-security-principal-config.ts
@@ -20,10 +20,9 @@ import { Directive, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { UserService, ServiceAccount, UserAccount } from '@streampipes/platform-services';
+import { ServiceAccount, UserAccount, UserService } from '@streampipes/platform-services';
 import { Observable } from 'rxjs';
-import { PanelType } from '../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { EditUserDialogComponent } from './edit-user-dialog/edit-user-dialog.component';
 
 @Directive()
diff --git a/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.ts b/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.ts
index 73112e738..e8e18e444 100644
--- a/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.ts
+++ b/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.ts
@@ -19,7 +19,7 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { Group, Role, UserGroupService } from '@streampipes/platform-services';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { RoleDescription } from '../../../_models/auth.model';
 import { AvailableRolesService } from '../../../services/available-roles.service';
diff --git a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
index 109ef9a2e..175bcbf13 100644
--- a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
+++ b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import {
   Group,
   Role,
diff --git a/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.ts b/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.ts
index 5cd6f64a8..d5d0a678f 100644
--- a/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.ts
+++ b/ui/src/app/configuration/security-configuration/user-group-configuration/user-group-configuration.component.ts
@@ -21,8 +21,7 @@ import { Group, UserGroupService } from '@streampipes/platform-services';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 import { EditGroupDialogComponent } from '../edit-group-dialog/edit-group-dialog.component';
 
 @Component({
diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
index 97b9f003a..55519630d 100644
--- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
@@ -22,8 +22,7 @@ import { DataMarketplaceService } from '../../../services/data-marketplace.servi
 import { AdapterExportDialog } from '../../../dialog/adapter-export/adapter-export-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { AdapterDescription } from '@streampipes/platform-services';
-import { PanelType } from '../../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'sp-adapter-description',
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
index d5e64630a..a49adcd4f 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
@@ -22,7 +22,7 @@ import { ShepherdService } from '../../../services/tour/shepherd.service';
 import { ConnectService } from '../../services/connect.service';
 import { FilterPipe } from '../../filter/filter.pipe';
 import { AdapterDescriptionUnion } from '@streampipes/platform-services';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'sp-data-marketplace',
diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts
index 2219f3205..6b3f42eb0 100644
--- a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.ts
@@ -21,9 +21,7 @@ import { AdapterDescriptionUnion, PipelineElementService } from '@streampipes/pl
 import { MatTableDataSource } from '@angular/material/table';
 import { ConnectService } from '../../../services/connect.service';
 import { DataMarketplaceService } from '../../../services/data-marketplace.service';
-import { DialogRef } from '../../../../core-ui/dialog/base-dialog/dialog-ref';
-import { PanelType } from '../../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogRef, PanelType, DialogService } from '@streampipes/shared-ui';
 import { DeleteAdapterDialogComponent } from '../../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
diff --git a/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts
index 211c41da4..5c59ac060 100644
--- a/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts
+++ b/ui/src/app/connect/components/start-adapter-configuration/start-adapter-configuration.component.ts
@@ -29,12 +29,11 @@ import {
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
 import { AdapterStartedDialog } from '../../dialog/adapter-started/adapter-started-dialog.component';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 import { ShepherdService } from '../../../services/tour/shepherd.service';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
 import { ConnectService } from '../../services/connect.service';
-import { TimestampPipe } from "../../filter/timestamp.pipe";
-import { MatCheckboxChange } from "@angular/material/checkbox";
+import { TimestampPipe } from '../../filter/timestamp.pipe';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
   selector: 'sp-start-adapter-configuration',
diff --git a/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts
index 302eba1b9..c263bfaff 100644
--- a/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts
+++ b/ui/src/app/connect/dialog/adapter-export/adapter-export-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, Input } from '@angular/core';
 import { AdapterDescriptionUnion } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'sp-dialog-adapter-started-dialog',
diff --git a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
index 91f3c7c6d..e4c3e67fe 100644
--- a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
@@ -28,7 +28,7 @@ import {
   SpecificAdapterSetDescription,
   PipelineTemplateService,
 } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { PipelineInvocationBuilder } from '../../../core-services/template/PipelineInvocationBuilder';
 
 
diff --git a/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
index dbd724708..e13da3044 100644
--- a/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
+++ b/ui/src/app/connect/dialog/adapter-upload/adapter-upload-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { RestService } from '../../services/rest.service';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'sp-dialog-adapter-started-dialog',
diff --git a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
index 8ae4f19f2..ce05016f6 100644
--- a/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
+++ b/ui/src/app/connect/dialog/delete-adapter-dialog/delete-adapter-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, Input } from '@angular/core';
 import { AdapterDescriptionUnion } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { DataMarketplaceService } from '../../services/data-marketplace.service';
 
 @Component({
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index aed2bfa03..22c3f4801 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -44,12 +44,8 @@ import { PolygonLabelingService } from './image/services/PolygonLabeling.service
 import { ReactLabelingService } from './image/services/ReactLabeling.service';
 import { CocoFormatService } from './image/services/CocoFormat.service';
 import { LabelingModeService } from './image/services/LabelingMode.service';
-import { StandardDialogComponent } from './dialog/standard-dialog/standard-dialog.component';
-import { PanelDialogComponent } from './dialog/panel-dialog/panel-dialog.component';
-import { DialogService } from './dialog/base-dialog/base-dialog.service';
 import { PortalModule } from '@angular/cdk/portal';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';
 import { StaticAnyInput } from './static-properties/static-any-input/static-any-input.component';
 import { StaticPropertyComponent } from './static-properties/static-property.component';
 import { StaticFreeInputComponent } from './static-properties/static-free-input/static-free-input.component';
@@ -85,6 +81,7 @@ import { StaticRuntimeResolvableTreeInputComponent } from './static-properties/s
 import { MatTreeModule } from '@angular/material/tree';
 import { PlatformServicesModule } from '@streampipes/platform-services';
 import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar-preview/image-bar-preview.component';
+import { SharedUiModule } from '@streampipes/shared-ui';
 
 @NgModule({
   imports: [
@@ -109,13 +106,13 @@ import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar
     MatTreeModule,
     PlatformServicesModule,
     PortalModule,
+    SharedUiModule,
     OverlayModule,
     QuillModule.forRoot(),
     MatTreeModule
   ],
   declarations: [
     ConfigureLabelsComponent,
-    ConfirmDialogComponent,
     DisplayRecommendedPipe,
     ImageBarPreviewComponent,
     ImageComponent,
@@ -126,8 +123,6 @@ import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar
     ImageAnnotationsComponent,
     ImageViewerComponent,
     ObjectPermissionDialogComponent,
-    StandardDialogComponent,
-    PanelDialogComponent,
     SplitSectionComponent,
     StaticAnyInput,
     StaticPropertyComponent,
@@ -160,7 +155,6 @@ import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar
     BrushLabelingService,
     CocoFormatService,
     LabelingModeService,
-    DialogService,
     RuntimeResolvableService,
   ],
   exports: [
@@ -168,9 +162,6 @@ import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar
     ImageComponent,
     ImageLabelingComponent,
     SelectLabelComponent,
-    StandardDialogComponent,
-    PanelDialogComponent,
-    ConfirmDialogComponent,
     StaticAnyInput,
     StaticPropertyComponent,
     StaticFreeInputComponent,
diff --git a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
index 671834569..bd6b3e70c 100644
--- a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
+++ b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { DialogRef } from '../dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import {
   PermissionsService,
diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
index 66fb7d595..86387fc5e 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
@@ -25,8 +25,7 @@ import { EditDashboardDialogComponent } from '../../dialogs/edit-dashboard/edit-
 import { Tuple2 } from '../../../core-model/base/Tuple2';
 import { Router } from '@angular/router';
 import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permission-dialog/object-permission-dialog.component';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 import { UserRole } from '../../../_enums/user-role.enum';
 import { AuthService } from '../../../services/auth.service';
 import { UserPrivilege } from '../../../_enums/user-privilege.enum';
diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
index 422fd6247..4ca676d3a 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
@@ -22,9 +22,7 @@ import { forkJoin, Observable, Subscription } from 'rxjs';
 import { AddVisualizationDialogComponent } from '../../dialogs/add-widget/add-visualization-dialog.component';
 import { DashboardService } from '../../services/dashboard.service';
 import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
-
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 @Component({
     selector: 'dashboard-panel',
     templateUrl: './dashboard-panel.component.html',
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
index 05a114b52..35213ac13 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
@@ -27,8 +27,7 @@ import {
   Pipeline,
   PipelineService
 } from '@streampipes/platform-services';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { EditModeService } from '../../services/edit-mode.service';
 import { ReloadPipelineService } from '../../services/reload-pipeline.service';
 import { zip } from 'rxjs';
diff --git a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
index 2f6b97726..2b65f4725 100644
--- a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
+++ b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
@@ -36,8 +36,8 @@ import {
   PipelineService
 } from '@streampipes/platform-services';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
-import { zip } from "rxjs";
+import { DialogRef } from '@streampipes/shared-ui';
+import { zip } from 'rxjs';
 
 @Component({
   selector: 'add-visualization-dialog-component',
diff --git a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
index 6113662ca..26be5b47f 100644
--- a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
+++ b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
@@ -19,7 +19,7 @@
 import { Component, Input } from '@angular/core';
 import { DashboardService } from '../../services/dashboard.service';
 import { Dashboard } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'edit-dashboard-dialog-component',
diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
index 68975d7a6..d35d4ad59 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
@@ -21,8 +21,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { DataExplorerEditDataViewDialogComponent } from '../../dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
 import { DataViewDataExplorerService, Dashboard } from '@streampipes/platform-services';
 import { Tuple2 } from '../../../core-model/base/Tuple2';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permission-dialog/object-permission-dialog.component';
 import { UserRole } from '../../../_enums/user-role.enum';
 import { AuthService } from '../../../services/auth.service';
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 88824a816..79819b3e0 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -95,12 +95,11 @@ import { SelectPropertyComponent } from './components/widgets/utils/select-prope
 import { DataExplorerVisualisationSettingsComponent } from './components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component';
 import { GroupSelectionPanelComponent } from './components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component';
 import { WidgetDirective } from './components/widget/widget.directive';
-import { WidgetTypeService } from './services/widget-type.service';
 import { CorrelationWidgetConfigComponent } from './components/widgets/correlation-chart/config/correlation-chart-widget-config.component';
 import { TimeSelectionService } from './services/time-selection.service';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { TooMuchDataComponent } from './components/widgets/utils/too-much-data/too-much-data.component';
-import { SpValueHeatmapComponent } from "./components/widgets/distribution-chart/value-heatmap/value-heatmap.component";
+import { SpValueHeatmapComponent } from './components/widgets/distribution-chart/value-heatmap/value-heatmap.component';
 
 export const MY_NATIVE_FORMATS = {
   fullPickerInput: {
@@ -120,106 +119,105 @@ export const MY_NATIVE_FORMATS = {
 
 
 @NgModule({
-    imports: [
-        CommonModule,
-        LeafletModule,
-        CoreUiModule,
-        MatTabsModule,
-        GridsterModule,
-        FlexLayoutModule,
-        CustomMaterialModule,
-        FormsModule,
-        ColorPickerModule,
-        MatGridListModule,
-        NgxChartsModule,
-        CdkTableModule,
-        MatSnackBarModule,
-        MatProgressSpinnerModule,
-        ReactiveFormsModule,
-        CoreUiModule,
-        OwlDateTimeModule,
-        OwlNativeDateTimeModule,
-        PlotlyViaWindowModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        MatSliderModule,
-        MatSlideToggleModule,
-        MatChipsModule,
-        PlatformServicesModule,
-        NgxEchartsModule.forRoot({
-            /**
-             * This will import all modules from echarts.
-             * If you only need custom modules,
-             * please refer to [Custom Build] section.
-             */
-            echarts: () => import('echarts'),
-        }),
-    ],
-    declarations: [
-        AggregateConfigurationComponent,
-        DataDownloadDialog,
-        DataExplorerComponent,
-        DataExplorerDashboardGridComponent,
-        DataExplorerDashboardOverviewComponent,
-        DataExplorerDashboardPanelComponent,
-        DataExplorerDashboardWidgetComponent,
-        DataExplorerDesignerPanelComponent,
-        DataExplorerEditDataViewDialogComponent,
-        DataExplorerWidgetAppearanceSettingsComponent,
-        DataExplorerWidgetDataSettingsComponent,
-        CorrelationChartWidgetComponent,
-        CorrelationWidgetConfigComponent,
-        FieldSelectionPanelComponent,
-        FieldSelectionComponent,
-        FilterSelectionPanelComponent,
-        GroupConfigurationComponent,
-        ImageWidgetComponent,
-        ImageWidgetConfigComponent,
-        IndicatorChartWidgetComponent,
-        IndicatorWidgetConfigComponent,
-        TimeSeriesChartWidgetComponent,
-        TimeSeriesChartWidgetConfigComponent,
-        LoadDataSpinnerComponent,
-        NoDataInDateRangeComponent,
-        DistributionChartWidgetComponent,
-        DistributionWidgetConfigComponent,
-        SelectPropertiesComponent,
-        SelectColorPropertiesComponent,
-        SelectPropertyComponent,
-        SpValueHeatmapComponent,
-        TableWidgetComponent,
-        TableWidgetConfigComponent,
-        MapWidgetConfigComponent,
-        MapWidgetComponent,
-        HeatmapWidgetConfigComponent,
-        HeatmapWidgetComponent,
-        TimeRangeSelectorComponent,
-        DataExplorerVisualisationSettingsComponent,
-        GroupSelectionPanelComponent,
-        DataExplorerVisualisationSettingsComponent,
-        WidgetDirective,
-        TooMuchDataComponent,
-    ],
-    providers: [
-        DatalakeRestService,
-        SharedDatalakeRestService,
-        DataExplorerFieldProviderService,
-        DataViewDataExplorerService,
-        DataViewQueryGeneratorService,
-        ResizeService,
-        ColorService,
-        RefreshDashboardService,
-        SemanticTypeUtilsService,
-        TimeSelectionService,
-        WidgetConfigurationService,
-        WidgetTypeService,
-        {
-            provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS
-        }
-    ],
-    exports: [
-        DataExplorerComponent
-    ]
+  imports: [
+    CommonModule,
+    LeafletModule,
+    CoreUiModule,
+    MatTabsModule,
+    GridsterModule,
+    FlexLayoutModule,
+    CustomMaterialModule,
+    FormsModule,
+    ColorPickerModule,
+    MatGridListModule,
+    NgxChartsModule,
+    CdkTableModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    ReactiveFormsModule,
+    CoreUiModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
+    PlotlyViaWindowModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatChipsModule,
+    PlatformServicesModule,
+    NgxEchartsModule.forRoot({
+      /**
+       * This will import all modules from echarts.
+       * If you only need custom modules,
+       * please refer to [Custom Build] section.
+       */
+      echarts: () => import('echarts'),
+    }),
+  ],
+  declarations: [
+    AggregateConfigurationComponent,
+    DataDownloadDialog,
+    DataExplorerComponent,
+    DataExplorerDashboardGridComponent,
+    DataExplorerDashboardOverviewComponent,
+    DataExplorerDashboardPanelComponent,
+    DataExplorerDashboardWidgetComponent,
+    DataExplorerDesignerPanelComponent,
+    DataExplorerEditDataViewDialogComponent,
+    DataExplorerWidgetAppearanceSettingsComponent,
+    DataExplorerWidgetDataSettingsComponent,
+    CorrelationChartWidgetComponent,
+    CorrelationWidgetConfigComponent,
+    FieldSelectionPanelComponent,
+    FieldSelectionComponent,
+    FilterSelectionPanelComponent,
+    GroupConfigurationComponent,
+    ImageWidgetComponent,
+    ImageWidgetConfigComponent,
+    IndicatorChartWidgetComponent,
+    IndicatorWidgetConfigComponent,
+    TimeSeriesChartWidgetComponent,
+    TimeSeriesChartWidgetConfigComponent,
+    LoadDataSpinnerComponent,
+    NoDataInDateRangeComponent,
+    DistributionChartWidgetComponent,
+    DistributionWidgetConfigComponent,
+    SelectPropertiesComponent,
+    SelectColorPropertiesComponent,
+    SelectPropertyComponent,
+    SpValueHeatmapComponent,
+    TableWidgetComponent,
+    TableWidgetConfigComponent,
+    MapWidgetConfigComponent,
+    MapWidgetComponent,
+    HeatmapWidgetConfigComponent,
+    HeatmapWidgetComponent,
+    TimeRangeSelectorComponent,
+    DataExplorerVisualisationSettingsComponent,
+    GroupSelectionPanelComponent,
+    DataExplorerVisualisationSettingsComponent,
+    WidgetDirective,
+    TooMuchDataComponent,
+  ],
+  providers: [
+    DatalakeRestService,
+    SharedDatalakeRestService,
+    DataExplorerFieldProviderService,
+    DataViewDataExplorerService,
+    DataViewQueryGeneratorService,
+    ResizeService,
+    ColorService,
+    RefreshDashboardService,
+    SemanticTypeUtilsService,
+    TimeSelectionService,
+    WidgetConfigurationService,
+    {
+      provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS
+    }
+  ],
+  exports: [
+    DataExplorerComponent
+  ]
 })
 export class DataExplorerModule {
 
diff --git a/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.ts b/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.ts
index a70d7a6d9..1af1ab8a8 100644
--- a/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.ts
+++ b/ui/src/app/data-explorer/dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { DataViewDataExplorerService, Dashboard } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'sp-data-explorer-edit-data-view-dialog-component',
diff --git a/ui/src/app/data-explorer/services/widget-type.service.ts b/ui/src/app/data-explorer/services/widget-type.service.ts
index 0df8e8cdc..973f87668 100644
--- a/ui/src/app/data-explorer/services/widget-type.service.ts
+++ b/ui/src/app/data-explorer/services/widget-type.service.ts
@@ -20,7 +20,9 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { WidgetTypeChangeMessage } from '../models/dataview-dashboard.model';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class WidgetTypeService {
 
   public widgetTypeChangeSubject: Subject<WidgetTypeChangeMessage> = new Subject<WidgetTypeChangeMessage>();
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
index 7f3f1893d..3be8ef433 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -34,10 +34,8 @@ import { JsplumbService } from '../../services/jsplumb.service';
 import { ShepherdService } from '../../../services/tour/shepherd.service';
 import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
 import { ObjectProvider } from '../../services/object-provider.service';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
+import { DialogService, PanelType, ConfirmDialogComponent } from '@streampipes/shared-ui';
 import { SavePipelineComponent } from '../../dialog/save-pipeline/save-pipeline.component';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
-import { ConfirmDialogComponent } from '../../../core-ui/dialog/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { EditorService } from '../../services/editor.service';
 import { PipelineCanvasMetadata, PipelineCanvasMetadataService, PipelineService } from '@streampipes/platform-services';
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 f342f7f3f..46e5cbe92 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
@@ -35,8 +35,7 @@ import {
   WildcardTopicDefinition
 } from '@streampipes/platform-services';
 import { EditorService } from '../../services/editor.service';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { CompatibleElementsComponent } from '../../dialog/compatible-elements/compatible-elements.component';
 import { cloneDeep } from 'lodash';
 import { Subscription } from 'rxjs';
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index 79fe561aa..bcc269025 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -43,11 +43,9 @@ import {
 } from '@streampipes/platform-services';
 import { ObjectProvider } from '../../services/object-provider.service';
 import { CustomizeComponent } from '../../dialog/customize/customize.component';
-import { PanelType } from '../../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType, ConfirmDialogComponent } from '@streampipes/shared-ui';
 import { EditorService } from '../../services/editor.service';
 import { MatchingErrorComponent } from '../../dialog/matching-error/matching-error.component';
-import { ConfirmDialogComponent } from '../../../core-ui/dialog/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { forkJoin } from 'rxjs';
 import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
index 925f24624..9c7a88e14 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
+++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { JsplumbService } from '../../services/jsplumb.service';
 import { DataProcessorInvocation } from '@streampipes/platform-services';
 import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
diff --git a/ui/src/app/editor/dialog/customize/customize.component.ts b/ui/src/app/editor/dialog/customize/customize.component.ts
index badb8a4b1..1dfd77244 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor/dialog/customize/customize.component.ts
@@ -22,7 +22,7 @@ import {
   PipelineElementConfig,
   PipelineElementConfigurationStatus
 } from '../../model/editor.model';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { JsplumbService } from '../../services/jsplumb.service';
 import {
   DataProcessorInvocation, DataSinkInvocation,
diff --git a/ui/src/app/editor/dialog/help/help.component.ts b/ui/src/app/editor/dialog/help/help.component.ts
index 970220279..41196b4ee 100644
--- a/ui/src/app/editor/dialog/help/help.component.ts
+++ b/ui/src/app/editor/dialog/help/help.component.ts
@@ -19,7 +19,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PipelineElementUnion } from '../../model/editor.model';
 import { PipelineElementService, SpDataStream } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { PipelineElementTypeUtils } from '../../utils/editor.utils';
 
 @Component({
diff --git a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
index fdb84e2dc..d0ab5f37e 100644
--- a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
+++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { Notification } from '@streampipes/platform-services';
 
 @Component({
diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
index b26c11e9a..fe05455aa 100644
--- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
+++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
   selector: 'missing-elements-for-tutorial',
diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
index af4bd596f..513b08d02 100644
--- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { JsplumbService } from '../../services/jsplumb.service';
 import {
   DataProcessorInvocation,
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 d2774a3de..8c522bf22 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
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { Message, Pipeline, PipelineCanvasMetadata, PipelineService, PipelineCanvasMetadataService } from '@streampipes/platform-services';
 import { ObjectProvider } from '../../services/object-provider.service';
 import { EditorService } from '../../services/editor.service';
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
index 1ee7ec9e1..14bc15fd4 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { ShepherdService } from '../../../services/tour/shepherd.service';
 import { Component, Input, OnInit } from '@angular/core';
 import { AppConstants } from '../../../services/app.constants';
diff --git a/ui/src/app/editor/editor.component.ts b/ui/src/app/editor/editor.component.ts
index 3c856f609..76caa68e6 100644
--- a/ui/src/app/editor/editor.component.ts
+++ b/ui/src/app/editor/editor.component.ts
@@ -20,15 +20,14 @@ import { Component, OnInit } from '@angular/core';
 import { EditorService } from './services/editor.service';
 import { DataSourceDescription, PipelineElementService, SpDataStream } from '@streampipes/platform-services';
 import { PipelineElementConfig, PipelineElementUnion } from './model/editor.model';
-import { PanelType } from '../core-ui/dialog/base-dialog/base-dialog.model';
+import { PanelType, DialogService } from '@streampipes/shared-ui';
 import { WelcomeTourComponent } from './dialog/welcome-tour/welcome-tour.component';
-import { DialogService } from '../core-ui/dialog/base-dialog/base-dialog.service';
 import { MissingElementsForTutorialComponent } from './dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component';
 import { ShepherdService } from '../services/tour/shepherd.service';
 import { ActivatedRoute } from '@angular/router';
 import { AuthService } from '../services/auth.service';
 import { zip } from 'rxjs';
-import { AppConstants } from "../services/app.constants";
+import { AppConstants } from '../services/app.constants';
 
 @Component({
   selector: 'editor',
diff --git a/ui/src/app/editor/services/editor.service.ts b/ui/src/app/editor/services/editor.service.ts
index 659b08109..fcde9add1 100644
--- a/ui/src/app/editor/services/editor.service.ts
+++ b/ui/src/app/editor/services/editor.service.ts
@@ -33,8 +33,7 @@ import {
 } from '@streampipes/platform-services';
 import { Observable, Subject } from 'rxjs';
 import { PeCategory, PipelineElementConfig, PipelineElementUnion } from '../model/editor.model';
-import { PanelType } from '../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { HelpComponent } from '../dialog/help/help.component';
 import { map } from 'rxjs/operators';
 
diff --git a/ui/src/app/files/components/file-overview/file-overview.component.ts b/ui/src/app/files/components/file-overview/file-overview.component.ts
index bffabb93f..35f87a092 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.ts
+++ b/ui/src/app/files/components/file-overview/file-overview.component.ts
@@ -20,7 +20,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { FilesService, FileMetadata } from '@streampipes/platform-services';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
-import { ConfirmDialogComponent } from '../../../core-ui/dialog/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogComponent } from '@streampipes/shared-ui';
 import { MatDialog } from '@angular/material/dialog';
 
 @Component({
diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
index 79c927831..d3a9e42e6 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import { FilesService } from '@streampipes/platform-services';
 
diff --git a/ui/src/app/files/files.component.ts b/ui/src/app/files/files.component.ts
index dcd0d9aa3..bee4a335c 100644
--- a/ui/src/app/files/files.component.ts
+++ b/ui/src/app/files/files.component.ts
@@ -17,8 +17,7 @@
  */
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { PanelType } from '../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../core-ui/dialog/base-dialog/base-dialog.service';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { FileUploadDialogComponent } from './dialog/file-upload/file-upload-dialog.component';
 
 @Component({
diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
index 345dd2fa8..f812584a0 100644
--- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, Input } from '@angular/core';
 import { Pipeline, PipelineService } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'sp-delete-pipeline-dialog',
diff --git a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
index 484d39325..9e9626dc1 100644
--- a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component } from '@angular/core';
 import { Pipeline, PipelineService } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { forkJoin } from 'rxjs';
 
 @Component({
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 85ee49aab..c39745262 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
@@ -18,7 +18,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { Pipeline, PipelineCategory, PipelineService } from '@streampipes/platform-services';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 
 @Component({
     selector: 'sp-pipeline-categories-dialog',
diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
index 13818ef55..dbdde3e7f 100644
--- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { Pipeline, PipelineService } from '@streampipes/platform-services';
 import { Component, Input, OnInit } from '@angular/core';
 
diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
index 4cdfc3b69..d4b0d8c8c 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { PipelineOperationStatus, PipelineService } from '@streampipes/platform-services';
 import { Component, Input, OnInit } from '@angular/core';
 import { PipelineAction } from '../../model/pipeline-model';
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 50de9142c..82b9c89f1 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
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import { Pipeline, PipelineService } from '@streampipes/platform-services';
 
 @Component({
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index 3bbddbff8..316810dbf 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -19,10 +19,8 @@
 import * as FileSaver from 'file-saver';
 import { Component, OnInit } from '@angular/core';
 import { Pipeline, PipelineCategory, PipelineService } from '@streampipes/platform-services';
-import { DialogService } from '../core-ui/dialog/base-dialog/base-dialog.service';
-import { PanelType } from '../core-ui/dialog/base-dialog/base-dialog.model';
+import { DialogService, PanelType, DialogRef } from '@streampipes/shared-ui';
 import { ImportPipelineDialogComponent } from './dialog/import-pipeline/import-pipeline-dialog.component';
-import { DialogRef } from '../core-ui/dialog/base-dialog/dialog-ref';
 import { StartAllPipelinesDialogComponent } from './dialog/start-all-pipelines/start-all-pipelines-dialog.component';
 import { PipelineCategoriesDialogComponent } from './dialog/pipeline-categories/pipeline-categories-dialog.component';
 import { zip } from 'rxjs';
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index 3f3a93197..0049362d5 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -41,39 +41,39 @@ import { CoreUiModule } from '../core-ui/core-ui.module';
 import { PlatformServicesModule } from '@streampipes/platform-services';
 
 @NgModule({
-    imports: [
-        FlexLayoutModule,
-        FormsModule,
-        MatTabsModule,
-        MatButtonModule,
-        CustomMaterialModule,
-        CommonModule,
-        MatProgressSpinnerModule,
-        MatSortModule,
-        MatTableModule,
-        CoreUiModule,
-        PlatformServicesModule,
-    ],
-    declarations: [
-        DeletePipelineDialogComponent,
-        ImportPipelineDialogComponent,
-        PipelinesComponent,
-        PipelineCategoriesDialogComponent,
-        PipelineNotificationsComponent,
-        PipelineOverviewComponent,
-        PipelineStatusDialogComponent,
-        StartAllPipelinesDialogComponent,
-        PipelineInCategoryPipe,
-        CategoryAlreadyInPipelinePipe
-    ],
-    providers: [
-        PipelineOperationsService,
-        CategoryAlreadyInPipelinePipe,
-        PipelineInCategoryPipe
-    ],
-    exports: [
-        PipelinesComponent
-    ]
+  imports: [
+    FlexLayoutModule,
+    FormsModule,
+    MatTabsModule,
+    MatButtonModule,
+    CustomMaterialModule,
+    CommonModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
+    MatTableModule,
+    CoreUiModule,
+    PlatformServicesModule,
+  ],
+  declarations: [
+    DeletePipelineDialogComponent,
+    ImportPipelineDialogComponent,
+    PipelinesComponent,
+    PipelineCategoriesDialogComponent,
+    PipelineNotificationsComponent,
+    PipelineOverviewComponent,
+    PipelineStatusDialogComponent,
+    StartAllPipelinesDialogComponent,
+    PipelineInCategoryPipe,
+    CategoryAlreadyInPipelinePipe
+  ],
+  providers: [
+    PipelineOperationsService,
+    CategoryAlreadyInPipelinePipe,
+    PipelineInCategoryPipe
+  ],
+  exports: [
+    PipelinesComponent
+  ]
 })
 export class PipelinesModule {
 
diff --git a/ui/src/app/pipelines/services/pipeline-operations.service.ts b/ui/src/app/pipelines/services/pipeline-operations.service.ts
index 1e9ed7cf5..0135fcab8 100644
--- a/ui/src/app/pipelines/services/pipeline-operations.service.ts
+++ b/ui/src/app/pipelines/services/pipeline-operations.service.ts
@@ -19,11 +19,9 @@
 import { ShepherdService } from '../../services/tour/shepherd.service';
 import { EventEmitter, Injectable } from '@angular/core';
 import { Pipeline, PipelineService } from '@streampipes/platform-services';
-import { PanelType } from '../../core-ui/dialog/base-dialog/base-dialog.model';
-import { DialogService } from '../../core-ui/dialog/base-dialog/base-dialog.service';
+import { PanelType, DialogService, DialogRef } from '@streampipes/shared-ui';
 import { PipelineStatusDialogComponent } from '../dialog/pipeline-status/pipeline-status-dialog.component';
 import { DeletePipelineDialogComponent } from '../dialog/delete-pipeline/delete-pipeline-dialog.component';
-import { DialogRef } from '../../core-ui/dialog/base-dialog/dialog-ref';
 import { Router } from '@angular/router';
 import { PipelineAction } from '../model/pipeline-model';
 import { PipelineNotificationsComponent } from '../dialog/pipeline-notifications/pipeline-notifications.component';
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.ts b/ui/src/app/profile/components/general/general-profile-settings.component.ts
index 17aad392d..5b3138926 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.ts
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.ts
@@ -22,13 +22,10 @@ import { BasicProfileSettings } from '../basic-profile-settings';
 import { AppConstants } from '../../../services/app.constants';
 import { AuthService } from '../../../services/auth.service';
 import { JwtTokenStorageService } from '../../../services/jwt-token-storage.service';
-import { EditUserDialogComponent } from "../../../configuration/security-configuration/edit-user-dialog/edit-user-dialog.component";
-import { PanelType } from "../../../core-ui/dialog/base-dialog/base-dialog.model";
-import { DialogService } from "../../../core-ui/dialog/base-dialog/base-dialog.service";
-import { DialogRef } from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import { ChangeEmailDialogComponent } from "../../dialog/change-email/change-email-dialog.component";
-import { ChangePasswordDialogComponent } from "../../dialog/change-password/change-password-dialog.component";
-import { Router } from "@angular/router";
+import { DialogRef, DialogService, PanelType } from '@streampipes/shared-ui';
+import { ChangeEmailDialogComponent } from '../../dialog/change-email/change-email-dialog.component';
+import { ChangePasswordDialogComponent } from '../../dialog/change-password/change-password-dialog.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'general-profile-settings',
diff --git a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
index fdd51cc28..df185e5f9 100644
--- a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
+++ b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import {
   AbstractControl,
   FormBuilder,
diff --git a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
index a64944b15..77b2c77dd 100644
--- a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
+++ b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { DialogRef } from '../../../core-ui/dialog/base-dialog/dialog-ref';
+import { DialogRef } from '@streampipes/shared-ui';
 import {
   AbstractControl,
   FormBuilder,
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 6c1302828..adf3a71f2 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -4,6 +4,9 @@
     "paths": {
       "@streampipes/platform-services": [
         "dist/streampipes/platform-services"
+      ],
+      "@streampipes/shared-ui": [
+        "dist/streampipes/shared-ui"
       ]
     },
     "downlevelIteration": true,
diff --git a/ui/webpack.partial.base.js b/ui/webpack.partial.base.js
index 80a231e90..e75b14b90 100644
--- a/ui/webpack.partial.base.js
+++ b/ui/webpack.partial.base.js
@@ -64,8 +64,9 @@ module.exports = {
                 "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' , eager: true},
                 "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' , eager: true},
                 "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' , eager: true},
-                //"@streampipes/platform-services": {singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true},
-
+                "@angular/cdk": { singleton: true, strictVersion: true, requiredVersion: 'auto' , eager: true},
+                "@streampipes/shared-ui": { singleton: true, strictVersion: true, eager: true},
+                "@streampipes/platform-services": { singleton: true, strictVersion: true, eager: true},
                 ...sharedMappings.getDescriptors()
             })