You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2024/03/26 07:52:11 UTC

(streampipes) branch dev updated: refactor(#2622): Remove custom material from add module (#2623)

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

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


The following commit(s) were added to refs/heads/dev by this push:
     new 5731b32b61 refactor(#2622): Remove custom material from add module (#2623)
5731b32b61 is described below

commit 5731b32b61be2542a283866036012cbc828b17b5
Author: Philipp Zehnder <te...@users.noreply.github.com>
AuthorDate: Tue Mar 26 08:52:05 2024 +0100

    refactor(#2622): Remove custom material from add module (#2623)
    
    * refactor(#2622): Remove custom material from add module
    
    * refactor(#2622): Remove custom material from several modules
    
    * refactor(#2622): Remove custom material from connect module
    
    * refactor(#2622): Remove custom material from core-ui and dashboard
    
    * refactor(#2622): Remove custom material from several modules
    
    * refactor(#2622): Delete directory with custom material module
---
 ui/deployment/appng5.module.mst                    |   3 -
 .../app/CustomMaterial/custom-material.module.ts   | 106 ---------------------
 ui/src/app/add/add.module.ts                       |  16 +++-
 ui/src/app/apidocs/apidocs.module.ts               |   8 +-
 .../app-asset-monitoring.module.ts                 |   9 +-
 ui/src/app/app-overview/app-overview.module.ts     |   2 -
 ui/src/app/assets/assets.module.ts                 |   2 -
 ui/src/app/configuration/configuration.module.ts   |   6 +-
 ui/src/app/connect/connect.module.ts               |  47 ++++++++-
 ui/src/app/core-ui/core-ui.module.ts               |  46 ++++++++-
 ui/src/app/dashboard/dashboard.module.ts           |  54 ++++++++++-
 ui/src/app/data-explorer/data-explorer.module.ts   |  46 ++++++++-
 ui/src/app/editor/editor.module.ts                 |  52 +++++++++-
 ui/src/app/info/info.module.ts                     |   4 +-
 ui/src/app/notifications/notifications.module.ts   |   2 -
 .../pipeline-details/pipeline-details.module.ts    |   4 +-
 ui/src/app/pipelines/pipelines.module.ts           |   6 +-
 ui/src/app/profile/profile.module.ts               |   6 +-
 18 files changed, 269 insertions(+), 150 deletions(-)

diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 64e84d35d5..da5a1d4994 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -25,8 +25,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 
-import { CustomMaterialModule } from './CustomMaterial/custom-material.module';
-
 import { CoreModule } from './core/core.module';
 import { LoginModule } from './login/login.module';
 import { HomeModule } from './home/home.module';
@@ -82,7 +80,6 @@ import * as $ from 'jquery';
         BrowserModule,
         BrowserAnimationsModule,
         CoreModule,
-        CustomMaterialModule,
         MatGridListModule,
         MatIconModule,
         FlexLayoutModule,
diff --git a/ui/src/app/CustomMaterial/custom-material.module.ts b/ui/src/app/CustomMaterial/custom-material.module.ts
deleted file mode 100644
index 474acfb773..0000000000
--- a/ui/src/app/CustomMaterial/custom-material.module.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { NgModule } from '@angular/core';
-
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSortModule } from '@angular/material/sort';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-@NgModule({
-    imports: [
-        MatButtonModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSlideToggleModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatStepperModule,
-        MatRadioModule,
-        MatTableModule,
-        MatAutocompleteModule,
-        MatExpansionModule,
-        MatExpansionModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatDividerModule,
-        MatTooltipModule,
-        MatProgressBarModule,
-        MatButtonToggleModule,
-        MatChipsModule,
-        MatSliderModule,
-    ],
-    exports: [
-        MatButtonModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSlideToggleModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatStepperModule,
-        MatRadioModule,
-        MatTableModule,
-        MatAutocompleteModule,
-        MatExpansionModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatDividerModule,
-        MatTooltipModule,
-        MatProgressBarModule,
-        MatButtonToggleModule,
-    ],
-})
-export class CustomMaterialModule {}
diff --git a/ui/src/app/add/add.module.ts b/ui/src/app/add/add.module.ts
index baef466d46..65e79d61d0 100644
--- a/ui/src/app/add/add.module.ts
+++ b/ui/src/app/add/add.module.ts
@@ -20,7 +20,6 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { FormsModule } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { CommonModule } from '@angular/common';
 import { AddComponent } from './add.component';
 import { CoreUiModule } from '../core-ui/core-ui.module';
@@ -34,16 +33,25 @@ import { PipelineElementNameFilter } from './filter/pipeline-element-name.pipe';
 import { PipelineElementInstallationStatusFilter } from './filter/pipeline-element-installation-status.pipe';
 import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '../../../projects/streampipes/shared-ui/src/lib/shared-ui.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatOptionModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
     imports: [
         CommonModule,
+        CoreUiModule,
         FormsModule,
-        MatTabsModule,
         FlexLayoutModule,
-        CoreUiModule,
-        CustomMaterialModule,
+        MatDividerModule,
+        MatOptionModule,
+        MatIconModule,
+        MatSelectModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
+        MatTabsModule,
         RouterModule.forChild([
             {
                 path: '',
diff --git a/ui/src/app/apidocs/apidocs.module.ts b/ui/src/app/apidocs/apidocs.module.ts
index 406aa0aa61..69baf36b0e 100644
--- a/ui/src/app/apidocs/apidocs.module.ts
+++ b/ui/src/app/apidocs/apidocs.module.ts
@@ -18,18 +18,12 @@
 
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { CommonModule } from '@angular/common';
 import { CoreUiModule } from '../core-ui/core-ui.module';
 import { ApidocsComponent } from './apidocs.component';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FlexLayoutModule,
-        CoreUiModule,
-        CustomMaterialModule,
-    ],
+    imports: [CommonModule, FlexLayoutModule, CoreUiModule],
     declarations: [ApidocsComponent],
     providers: [],
     exports: [ApidocsComponent],
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index bf6d2b189c..c30db9e06c 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -22,8 +22,6 @@ import { CommonModule } from '@angular/common';
 
 import { AppAssetMonitoringComponent } from './app-asset-monitoring.component';
 
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
-
 import { ViewAssetComponent } from './components/view-asset/view-asset.component';
 import { CreateAssetComponent } from './components/create-asset/create-asset.component';
 import { AddPipelineDialogComponent } from './dialog/add-pipeline/add-pipeline-dialog.component';
@@ -41,13 +39,18 @@ import { AddLinkDialogComponent } from './dialog/add-link/add-link-dialog.compon
 import { DashboardModule } from '../dashboard/dashboard.module';
 import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @NgModule({
     imports: [
         CommonModule,
         FlexLayoutModule,
-        CustomMaterialModule,
+        MatDividerModule,
         MatGridListModule,
+        MatIconModule,
+        MatTabsModule,
         MatInputModule,
         MatFormFieldModule,
         FormsModule,
diff --git a/ui/src/app/app-overview/app-overview.module.ts b/ui/src/app/app-overview/app-overview.module.ts
index 37cd31ba84..2b98e9afd6 100644
--- a/ui/src/app/app-overview/app-overview.module.ts
+++ b/ui/src/app/app-overview/app-overview.module.ts
@@ -19,7 +19,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -36,7 +35,6 @@ import { SharedUiModule } from '@streampipes/shared-ui';
     imports: [
         AppAssetMonitoringModule,
         CommonModule,
-        CustomMaterialModule,
         FlexLayoutModule,
         FormsModule,
         MatGridListModule,
diff --git a/ui/src/app/assets/assets.module.ts b/ui/src/app/assets/assets.module.ts
index dac8bb2412..8bd1c39c40 100644
--- a/ui/src/app/assets/assets.module.ts
+++ b/ui/src/app/assets/assets.module.ts
@@ -26,7 +26,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CoreUiModule } from '../core-ui/core-ui.module';
@@ -48,7 +47,6 @@ import { SpManageAssetLinksDialogComponent } from './dialog/manage-asset-links/m
 @NgModule({
     imports: [
         CommonModule,
-        CustomMaterialModule,
         FlexLayoutModule,
         MatGridListModule,
         MatButtonModule,
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
index 98a2989906..b34a1b5182 100644
--- a/ui/src/app/configuration/configuration.module.ts
+++ b/ui/src/app/configuration/configuration.module.ts
@@ -28,7 +28,6 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ConfigurationService } from './shared/configuration.service';
 
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { MessagingConfigurationComponent } from './messaging-configuration/messaging-configuration.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DatalakeConfigurationComponent } from './datalake-configuration/datalake-configuration.component';
@@ -67,11 +66,12 @@ import { SpMessagingBrokerConfigComponent } from './messaging-configuration/brok
 import { SpExtensionsServiceDetailsDialogComponent } from './dialog/extensions-service-details/extensions-service-details-dialog.component';
 import { SpEmailTemplateConfigurationComponent } from './email-configuration/email-template-configuration/email-template-configuration.component';
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @NgModule({
     imports: [
         CommonModule,
-        CustomMaterialModule,
         FlexLayoutModule,
         MatGridListModule,
         MatButtonModule,
@@ -81,6 +81,8 @@ import { CodemirrorModule } from '@ctrl/ngx-codemirror';
         MatCheckboxModule,
         MatDividerModule,
         MatTooltipModule,
+        MatTableModule,
+        MatPaginatorModule,
         FormsModule,
         DragDropModule,
         CoreUiModule,
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 45a0234069..bb3f369cda 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -27,8 +27,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { AdapterConfigurationComponent } from './components/adapter-configuration/adapter-configuration.component';
 import { EventSchemaComponent } from './components/adapter-configuration/schema-editor/event-schema/event-schema.component';
 
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
-
 import { RestService } from './services/rest.service';
 
 import { MatInputModule } from '@angular/material/input';
@@ -87,9 +85,49 @@ import { SpAdapterStartedSuccessComponent } from './dialog/adapter-started/adapt
 import { SpAdapterStartedUpdateMigrationComponent } from './dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component';
 import { SpAdapterStartedPreviewComponent } from './dialog/adapter-started/adapter-started-preview/adapter-started-preview.component';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @NgModule({
     imports: [
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatListModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSlideToggleModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatStepperModule,
+        MatRadioModule,
+        MatAutocompleteModule,
+        MatExpansionModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        MatProgressBarModule,
+        MatButtonToggleModule,
         CoreUiModule,
         FormsModule,
         ReactiveFormsModule,
@@ -97,10 +135,13 @@ import { MatDividerModule } from '@angular/material/divider';
         FlexLayoutModule,
         MatGridListModule,
         MatDividerModule,
-        CustomMaterialModule,
         MatProgressSpinnerModule,
         MatChipsModule,
         MatInputModule,
+        MatTableModule,
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
         MatFormFieldModule,
         MatSliderModule,
         MatSnackBarModule,
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 718e2347cc..f7ceb634a1 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -26,7 +26,6 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
 import { MatChipsModule } from '@angular/material/chips';
 import { MatSliderModule } from '@angular/material/slider';
@@ -84,14 +83,57 @@ import { LivePreviewLoadingComponent } from './pipeline-element-runtime-info/liv
 import { LivePreviewTableComponent } from './pipeline-element-runtime-info/live-preview-table/live-preview-table.component';
 import { LivePreviewErrorComponent } from './pipeline-element-runtime-info/live-preview-error/live-preview-error.component';
 import { FieldNamesTableComponent } from './help/field-names-table/field-names-table.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTableModule } from '@angular/material/table';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @NgModule({
     imports: [
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatStepperModule,
+        MatRadioModule,
+        MatTableModule,
+        MatExpansionModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatDividerModule,
+        MatTooltipModule,
+        MatProgressBarModule,
+        MatButtonToggleModule,
         CommonModule,
         ColorPickerModule,
         FlexLayoutModule,
         CodemirrorModule,
-        CustomMaterialModule,
         ReactiveFormsModule,
         FormsModule,
         CdkTableModule,
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
index 348e508518..4ae3027b51 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -55,14 +55,61 @@ import { StackedLineChartWidgetComponent } from './components/widgets/stacked-li
 import { EditModeService } from './services/edit-mode.service';
 import { ReloadPipelineService } from './services/reload-pipeline.service';
 import { PlatformServicesModule } from '@streampipes/platform-services';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { ServicesModule } from '../services/services.module';
 import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
 import { DashboardPanelCanDeactivateGuard } from './dashboard.can-deactivate.guard';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSliderModule } from '@angular/material/slider';
 
 @NgModule({
     imports: [
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSlideToggleModule,
+        MatToolbarModule,
+        MatStepperModule,
+        MatRadioModule,
+        MatAutocompleteModule,
+        MatExpansionModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        MatProgressBarModule,
+        MatButtonToggleModule,
+        MatChipsModule,
+        MatSliderModule,
         NgxEchartsModule.forRoot({
             /**
              * This will import all modules from echarts.
@@ -76,10 +123,13 @@ import { DashboardPanelCanDeactivateGuard } from './dashboard.can-deactivate.gua
         MatTabsModule,
         GridsterModule,
         FlexLayoutModule,
-        CustomMaterialModule,
         FormsModule,
         ColorPickerModule,
         MatGridListModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatTableModule,
+        MatButtonModule,
         NgxChartsModule,
         CdkTableModule,
         LeafletModule,
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index da87156deb..aa0b3823b9 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -36,7 +36,6 @@ import { GridsterModule } from 'angular-gridster2';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { PlatformServicesModule } from '@streampipes/platform-services';
 import { CoreUiModule } from '../core-ui/core-ui.module';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { DataExplorerDashboardGridComponent } from './components/widget-view/grid-view/data-explorer-dashboard-grid.component';
 import { DataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview.component';
 import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
@@ -91,16 +90,59 @@ import { SpTimeseriesItemConfigComponent } from './components/widgets/utils/sele
 import { SpEchartsWidgetAppearanceConfigComponent } from './components/widgets/utils/echarts-widget-appearance-config/echarts-widget-appearance-config.component';
 import { SpTimeSeriesAppearanceConfigComponent } from './components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component';
 import { SpDataZoomConfigComponent } from './components/widgets/utils/data-zoom-config/data-zoom-config.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTableModule } from '@angular/material/table';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @NgModule({
     imports: [
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        MatStepperModule,
+        MatRadioModule,
+        MatTableModule,
+        MatAutocompleteModule,
+        MatExpansionModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatDividerModule,
+        MatTooltipModule,
+        MatProgressBarModule,
+        MatButtonToggleModule,
         CommonModule,
         LeafletModule,
         CoreUiModule,
         MatTabsModule,
         GridsterModule,
         FlexLayoutModule,
-        CustomMaterialModule,
         FormsModule,
         ColorPickerModule,
         MatGridListModule,
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 763bb41126..8e647b451a 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -21,7 +21,6 @@ import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { GridsterModule } from 'angular-gridster2';
 import { MatTabsModule } from '@angular/material/tabs';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { EditorComponent } from './editor.component';
 import { PipelineElementIconStandComponent } from './components/pipeline-element-icon-stand/pipeline-element-icon-stand.component';
@@ -51,16 +50,65 @@ import { PipelineElementIconStandRowComponent } from './components/pipeline-elem
 import { PipelineElementTypeFilterPipe } from './services/pipeline-element-type-filter.pipe';
 import { PipelineElementNameFilterPipe } from './services/pipeline-element-name-filter.pipe';
 import { PipelineElementGroupFilterPipe } from './services/pipeline-element-group-filter.pipe';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTableModule } from '@angular/material/table';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSliderModule } from '@angular/material/slider';
 
 @NgModule({
     imports: [
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSlideToggleModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatStepperModule,
+        MatRadioModule,
+        MatTableModule,
+        MatAutocompleteModule,
+        MatExpansionModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatDividerModule,
+        MatTooltipModule,
+        MatProgressBarModule,
+        MatButtonToggleModule,
+        MatChipsModule,
+        MatSliderModule,
         CoreUiModule,
         CommonModule,
         MatTabsModule,
         MatListModule,
         GridsterModule,
         FlexLayoutModule,
-        CustomMaterialModule,
         FormsModule,
         MatProgressSpinnerModule,
         ReactiveFormsModule,
diff --git a/ui/src/app/info/info.module.ts b/ui/src/app/info/info.module.ts
index 775bafd416..e31210f93d 100644
--- a/ui/src/app/info/info.module.ts
+++ b/ui/src/app/info/info.module.ts
@@ -30,23 +30,23 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { InfoComponent } from './info.component';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { LicenseComponent } from './license/license.component';
 import { AboutComponent } from './about/about.component';
 import { VersionsComponent } from './versions/versions.component';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @NgModule({
     imports: [
         CommonModule,
         FlexLayoutModule,
         MatGridListModule,
+        MatTabsModule,
         MatButtonModule,
         MatIconModule,
         MatInputModule,
         MatCheckboxModule,
         MatTooltipModule,
         FormsModule,
-        CustomMaterialModule,
         MatDividerModule,
     ],
     declarations: [
diff --git a/ui/src/app/notifications/notifications.module.ts b/ui/src/app/notifications/notifications.module.ts
index fcd36816fd..93d2534818 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -20,7 +20,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { FormsModule } from '@angular/forms';
 import { NotificationsComponent } from './notifications.component';
 import { NotificationItemComponent } from './components/notification-item.component';
@@ -36,7 +35,6 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
         FlexLayoutModule,
         CommonModule,
         FlexLayoutModule,
-        CustomMaterialModule,
         FormsModule,
         PlatformServicesModule,
     ],
diff --git a/ui/src/app/pipeline-details/pipeline-details.module.ts b/ui/src/app/pipeline-details/pipeline-details.module.ts
index 0432a2b0d4..0da4e9843f 100644
--- a/ui/src/app/pipeline-details/pipeline-details.module.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.module.ts
@@ -21,7 +21,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { PipelinePreviewComponent } from './components/preview/pipeline-preview.component';
@@ -40,6 +39,7 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
 import { SpPipelineDetailsOverviewComponent } from './components/overview/pipeline-details-overview.component';
 import { SharedUiModule } from '@streampipes/shared-ui';
 import { PipelineLogsComponent } from './components/pipeline-logs/pipeline-logs.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
     imports: [
@@ -48,7 +48,7 @@ import { PipelineLogsComponent } from './components/pipeline-logs/pipeline-logs.
         FormsModule,
         MatTabsModule,
         MatButtonModule,
-        CustomMaterialModule,
+        MatIconModule,
         CommonModule,
         MatProgressSpinnerModule,
         NgxChartsModule,
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index c59ec1bc24..33a673b380 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -23,7 +23,6 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { CommonModule } from '@angular/common';
 import { PipelineOverviewComponent } from './components/pipeline-overview/pipeline-overview.component';
 import { PipelineStatusDialogComponent } from './dialog/pipeline-status/pipeline-status-dialog.component';
@@ -51,6 +50,8 @@ import { PipelineLogsComponent } from '../pipeline-details/components/pipeline-l
 import { FunctionsOverviewComponent } from './components/functions-overview/functions-overview.component';
 import { SpFunctionsMetricsComponent } from './components/functions-overview/functions-metrics/functions-metrics.component';
 import { SpFunctionsLogsComponent } from './components/functions-overview/functions-logs/functions-logs.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDividerModule } from '@angular/material/divider';
 
 @NgModule({
     imports: [
@@ -58,11 +59,12 @@ import { SpFunctionsLogsComponent } from './components/functions-overview/functi
         FormsModule,
         MatTabsModule,
         MatButtonModule,
-        CustomMaterialModule,
         CommonModule,
         MatProgressSpinnerModule,
         MatSortModule,
         MatTableModule,
+        MatTooltipModule,
+        MatDividerModule,
         CoreUiModule,
         PlatformServicesModule,
         EditorModule,
diff --git a/ui/src/app/profile/profile.module.ts b/ui/src/app/profile/profile.module.ts
index 5168f1fe16..b827fc3a94 100644
--- a/ui/src/app/profile/profile.module.ts
+++ b/ui/src/app/profile/profile.module.ts
@@ -21,7 +21,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { CommonModule } from '@angular/common';
 import { ProfileComponent } from './profile.component';
 import { TokenManagementSettingsComponent } from './components/token/token-management-settings.component';
@@ -35,16 +34,19 @@ import { ChangePasswordDialogComponent } from './dialog/change-password/change-p
 import { ChangeEmailDialogComponent } from './dialog/change-email/change-email-dialog.component';
 import { RouterLink } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
 
 @NgModule({
     imports: [
         FlexLayoutModule,
         FormsModule,
+        MatInputModule,
+        MatRadioModule,
         ReactiveFormsModule,
         MatDividerModule,
         MatTabsModule,
         MatButtonModule,
-        CustomMaterialModule,
         CommonModule,
         ClipboardModule,
         CoreUiModule,