From 8f573d0dc7c4ee97569d0f74083e764a5555d8ea Mon Sep 17 00:00:00 2001
From: sagIoTPower <christof.strack@softwareag.com>
Date: Sat, 23 Dec 2023 10:12:57 +0100
Subject: [PATCH] changing stopping and starting of subscriptions

---
 .../broker-configuration.component.html       |   2 +-
 .../broker-configuration.component.ts         |   3 +-
 .../shared/broker-configuration.service.ts    |  60 ++-
 .../add-extension.component.ts                |  18 +-
 .../src/extension/grid/extension.component.ts |   4 +
 .../edit/edit-substitution-modal.component.ts |  20 +-
 .../src/mapping/grid/mapping.component.html   |   2 +-
 .../src/mapping/grid/mapping.component.ts     |   2 +-
 .../mapping/import-modal/import.component.ts  |  10 +-
 .../mapping-type/mapping-type.component.ts    |   4 +
 .../overwrite-substitution-modal.component.ts |   4 +
 .../step-main/mapping-stepper.component.ts    |  88 ++---
 .../step-one/mapping-properties.component.ts  |   4 +
 .../step-three/mapping-testing.component.ts   |   4 +
 .../monitoring/grid/monitoring.component.html |   2 +-
 .../monitoring/shared/monitoring.service.ts   |   6 +-
 .../src/shared/camel-case.pipe.ts             |  30 ++
 .../src/shared/capitazilze-case.pipe.ts       |  26 ++
 .../confirmation-modal.component.ts           |   4 +
 dynamic-mapping-ui/src/shared/index.ts        |   3 +-
 .../src/shared/shared.module.ts               |   6 +-
 .../src/shared/shared.service.ts              | 364 +-----------------
 .../grid/testing.component.html               |   2 +-
 .../testing-devices/grid/testing.component.ts |   2 +-
 24 files changed, 190 insertions(+), 480 deletions(-)
 create mode 100644 dynamic-mapping-ui/src/shared/camel-case.pipe.ts
 create mode 100644 dynamic-mapping-ui/src/shared/capitazilze-case.pipe.ts

diff --git a/dynamic-mapping-ui/src/configuration/broker-configuration.component.html b/dynamic-mapping-ui/src/configuration/broker-configuration.component.html
index 072da288..19d5d72e 100644
--- a/dynamic-mapping-ui/src/configuration/broker-configuration.component.html
+++ b/dynamic-mapping-ui/src/configuration/broker-configuration.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>Dynamic Mapping</c8y-title>
+<c8y-title>Broker Configuration</c8y-title>
 <c8y-action-bar-item [placement]="'right'">
   <button
     class="btn btn-link"
diff --git a/dynamic-mapping-ui/src/configuration/broker-configuration.component.ts b/dynamic-mapping-ui/src/configuration/broker-configuration.component.ts
index dedb16ef..41010394 100644
--- a/dynamic-mapping-ui/src/configuration/broker-configuration.component.ts
+++ b/dynamic-mapping-ui/src/configuration/broker-configuration.component.ts
@@ -81,6 +81,7 @@ export class BrokerConfigurationComponent implements OnInit {
     await this.loadData();
     this.statusLogs$ = this.brokerConfigurationService.getStatusLogs();
     this.feature = await this.sharedService.getFeatures();
+    this.brokerConfigurationService.startConnectorStatusSubscriptions();
   }
 
   public async refresh() {
@@ -271,6 +272,6 @@ export class BrokerConfigurationComponent implements OnInit {
   }
 
   ngOnDestroy(): void {
-    console.log("Stop subscriptions");
+    this.brokerConfigurationService.stopConnectorStatusSubscriptions();
   }
 }
diff --git a/dynamic-mapping-ui/src/configuration/shared/broker-configuration.service.ts b/dynamic-mapping-ui/src/configuration/shared/broker-configuration.service.ts
index 9929d616..d8ad28af 100644
--- a/dynamic-mapping-ui/src/configuration/shared/broker-configuration.service.ts
+++ b/dynamic-mapping-ui/src/configuration/shared/broker-configuration.service.ts
@@ -22,14 +22,11 @@ import { Injectable } from "@angular/core";
 import {
   EventService,
   FetchClient,
-  IdentityService,
   IEvent,
-  IExternalIdentity,
   IFetchResponse,
   Realtime,
 } from "@c8y/client";
 import {
-  AGENT_ID,
   BASE_URL,
   CONNECTOR_FRAGMENT,
   Extension,
@@ -38,35 +35,36 @@ import {
   PATH_EXTENSION_ENDPOINT,
   PATH_OPERATION_ENDPOINT,
   PATH_STATUS_CONNECTORS_ENDPOINT,
+  SharedService,
 } from "../../shared";
 
 import { BehaviorSubject, merge, Observable, Subject } from "rxjs";
+import { filter, map, scan, switchMap, withLatestFrom } from "rxjs/operators";
 import {
-  filter,
-  map,
-  scan,
-  switchMap,
-  withLatestFrom,
-} from "rxjs/operators";
-import { ConnectorConfiguration, ConnectorSpecification, ConnectorStatusEvent, Feature, Operation, ServiceConfiguration, ConnectorStatus, StatusEventTypes } from "./configuration.model";
+  ConnectorConfiguration,
+  ConnectorSpecification,
+  ConnectorStatus,
+  ConnectorStatusEvent,
+  Operation,
+  ServiceConfiguration,
+  StatusEventTypes,
+} from "./configuration.model";
 
 @Injectable({ providedIn: "root" })
 export class BrokerConfigurationService {
   constructor(
     private client: FetchClient,
-    private identity: IdentityService,
-    private eventService: EventService
+    private eventService: EventService,
+    private sharedService: SharedService
   ) {
     this.realtime = new Realtime(this.client);
-    this.startConnectorStatusSubscriptions();
+    this.initializeConnectorLogsRealtime();
     //console.log("Constructor:BrokerConfigurationService");
   }
 
-  private _agentId: Promise<string>;
   private _connectorConfigurations: ConnectorConfiguration[];
   private _serviceConfiguration: ServiceConfiguration;
   private _connectorSpecifications: ConnectorSpecification[];
-  private _feature: Promise<Feature>;
   private realtime: Realtime;
   private statusLogs$: Observable<any[]>;
   private subscriptionEvents: any;
@@ -84,27 +82,11 @@ export class BrokerConfigurationService {
 
   public resetCache() {
     console.log("resetCache() :BrokerConfigurationService");
-    this._feature = undefined;
     this._connectorConfigurations = undefined;
     this._connectorSpecifications = undefined;
     this._serviceConfiguration = undefined;
   }
 
-  async getDynamicMappingServiceAgent(): Promise<string> {
-    if (!this._agentId) {
-      const identity: IExternalIdentity = {
-        type: "c8y_Serial",
-        externalId: AGENT_ID,
-      };
-      const { data, res } = await this.identity.detail(identity);
-      if (res.status < 300) {
-        const agentId = data.managedObject.id.toString();
-        this._agentId = Promise.resolve(agentId);
-      }
-    }
-    return this._agentId;
-  }
-
   async updateConnectorConfiguration(
     configuration: ConnectorConfiguration
   ): Promise<IFetchResponse> {
@@ -249,8 +231,8 @@ export class BrokerConfigurationService {
   }
 
   async startConnectorStatusCheck(): Promise<void> {
-    const agentId = await this.getDynamicMappingServiceAgent();
-    console.log("Started subscription:", agentId);
+    const agentId = await this.sharedService.getDynamicMappingServiceAgent();
+    console.log("Started subscriptions:", agentId);
 
     // subscribe to event stream
     this.subscriptionEvents = this.realtime.subscribe(
@@ -282,8 +264,8 @@ export class BrokerConfigurationService {
     this.statusLogEventType = eventType;
   }
 
-  async startConnectorLogsRealtime(): Promise<void> {
-    const agentId = await this.getDynamicMappingServiceAgent();
+  async initializeConnectorLogsRealtime(): Promise<void> {
+    const agentId = await this.sharedService.getDynamicMappingServiceAgent();
     console.log("Agent Id", agentId);
 
     const sourceList$ = this.filterTrigger$.pipe(
@@ -332,11 +314,15 @@ export class BrokerConfigurationService {
   }
 
   public startConnectorStatusSubscriptions() {
-    this.startConnectorLogsRealtime();
     this.startConnectorStatusCheck();
   }
-  public stopConnectorStatusSubscriptions() {
+  
+  public async stopConnectorStatusSubscriptions() {
+    const agentId = await this.sharedService.getDynamicMappingServiceAgent();
+    console.log("Stop subscriptions:", agentId);
     this.realtime.unsubscribe(this.subscriptionEvents);
+    // this.mergeFilterTrigger$.complete();
+    // this.incomingRealtime$.complete();
   }
 
   public runOperation(op: Operation, parameter?: any): Promise<IFetchResponse> {
diff --git a/dynamic-mapping-ui/src/extension/extension-modal/add-extension.component.ts b/dynamic-mapping-ui/src/extension/extension-modal/add-extension.component.ts
index bf721c91..387d259a 100644
--- a/dynamic-mapping-ui/src/extension/extension-modal/add-extension.component.ts
+++ b/dynamic-mapping-ui/src/extension/extension-modal/add-extension.component.ts
@@ -18,8 +18,13 @@
  *
  * @authors Christof Strack
  */
-import { Component, ViewChild, ViewEncapsulation } from "@angular/core";
-import { ApplicationService, IApplication, IManagedObject, IManagedObjectBinary } from "@c8y/client";
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
+import {
+  ApplicationService,
+  IApplication,
+  IManagedObject,
+  IManagedObjectBinary,
+} from "@c8y/client";
 import {
   AlertService,
   DropAreaComponent,
@@ -35,8 +40,7 @@ import { ExtensionService } from "../share/extension.service";
   styleUrls: ["./add-extension.component.style.css"],
   encapsulation: ViewEncapsulation.None,
 })
-export class AddExtensionComponent {
-
+export class AddExtensionComponent implements OnInit {
   @ViewChild(DropAreaComponent) dropAreaComponent;
 
   isLoading: boolean;
@@ -53,6 +57,12 @@ export class AddExtensionComponent {
     private applicationService: ApplicationService
   ) {}
 
+  ngOnInit(): void {}
+  
+  ngOnDestroy(): void {
+    this.closeSubject.complete();
+  }
+
   get progress(): BehaviorSubject<number> {
     return this.extensionService.progress;
   }
diff --git a/dynamic-mapping-ui/src/extension/grid/extension.component.ts b/dynamic-mapping-ui/src/extension/grid/extension.component.ts
index 9b404845..2883a685 100644
--- a/dynamic-mapping-ui/src/extension/grid/extension.component.ts
+++ b/dynamic-mapping-ui/src/extension/grid/extension.component.ts
@@ -83,4 +83,8 @@ export class ExtensionComponent implements OnInit {
       modalRef.hide();
     });
   }
+
+  ngOnDestroy(): void {
+    this.reload$.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.ts b/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.ts
index 109323cb..ff6d2f2d 100644
--- a/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.ts
+++ b/dynamic-mapping-ui/src/mapping/edit/edit-substitution-modal.component.ts
@@ -267,20 +267,8 @@ export class EditSubstitutionComponent implements OnInit {
     //console.log("Evaluation", d0,d1,d2,d3, this.templateModel.currentSubstitution)
     return r;
   }
-}
 
-// Showing modal:
-
-// import { BsModalService } from "ngx-bootstrap/modal";
-// import { ModalLabels } from "@c8y/ngx-components";
-
-// constructor(
-//  public bsModalService: BsModalService,
-// ) {}
-
-// showModal() {
-//  const modalRef = this.bsModalService.show(MyModalComponent);
-//  modalRef.content.closeSubject.subscribe(result => {
-//    console.log('results:', result);
-//  });
-// }
+  ngOnDestroy(): void {
+    this.disabled$.complete();
+  }
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/mapping/grid/mapping.component.html b/dynamic-mapping-ui/src/mapping/grid/mapping.component.html
index caff5c18..2fbc860c 100644
--- a/dynamic-mapping-ui/src/mapping/grid/mapping.component.html
+++ b/dynamic-mapping-ui/src/mapping/grid/mapping.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title translate>Dynamic Mapping</c8y-title>
+<c8y-title translate>Mapping {{stepperConfiguration.direction | capitalCase}}</c8y-title>
 <!-- <mapping-help src="../../shared/help/help-mapping.html"></mapping-help> -->
 <!-- <mapping-help src="/apps/mqtt-mapping/assets/help/help-mapping.html"></mapping-help> -->
 <!-- <mapping-help src="."></mapping-help> -->
diff --git a/dynamic-mapping-ui/src/mapping/grid/mapping.component.ts b/dynamic-mapping-ui/src/mapping/grid/mapping.component.ts
index ca500fec..c8016943 100644
--- a/dynamic-mapping-ui/src/mapping/grid/mapping.component.ts
+++ b/dynamic-mapping-ui/src/mapping/grid/mapping.component.ts
@@ -49,7 +49,7 @@ import {
   SAMPLE_TEMPLATES_C8Y,
   SnoopStatus,
   getExternalTemplate,
-  uuidCustom
+  uuidCustom, CamelCasePipe
 } from "../../shared";
 
 import { Router } from "@angular/router";
diff --git a/dynamic-mapping-ui/src/mapping/import-modal/import.component.ts b/dynamic-mapping-ui/src/mapping/import-modal/import.component.ts
index 189965c2..41098265 100644
--- a/dynamic-mapping-ui/src/mapping/import-modal/import.component.ts
+++ b/dynamic-mapping-ui/src/mapping/import-modal/import.component.ts
@@ -18,7 +18,7 @@
  *
  * @authors Christof Strack
  */
-import { Component, ViewChild, ViewEncapsulation } from "@angular/core";
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import {
   AlertService,
   DropAreaComponent,
@@ -34,7 +34,7 @@ import { uuidCustom, Mapping } from "../../shared";
   styleUrls: ["./import.component.style.css"],
   encapsulation: ViewEncapsulation.None,
 })
-export class ImportMappingsComponent {
+export class ImportMappingsComponent implements OnInit {
   @ViewChild(DropAreaComponent) dropAreaComponent;
   private importCanceled: boolean = false;
   progress$: BehaviorSubject<number> = new BehaviorSubject<number>(null);
@@ -49,6 +49,8 @@ export class ImportMappingsComponent {
     private alertService: AlertService
   ) {}
 
+  ngOnInit(): void {}
+
   onFileDroppedEvent(event) {
     if (event && event.length > 0) {
       const file = event[0].file;
@@ -96,4 +98,8 @@ export class ImportMappingsComponent {
   private cancelFileUpload() {
     this.importCanceled = true;
   }
+
+  ngOnDestroy() {
+    this.progress$.unsubscribe();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.ts b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.ts
index 79b1f16a..3ff144ef 100644
--- a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.ts
+++ b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.ts
@@ -79,4 +79,8 @@ export class MappingTypeComponent implements OnInit {
     this.closeSubject.next(this.mappingType);
     this.closeSubject.complete();
   }
+
+  ngOnDestroy() {
+    this.closeSubject.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/overwrite/overwrite-substitution-modal.component.ts b/dynamic-mapping-ui/src/mapping/overwrite/overwrite-substitution-modal.component.ts
index 1fea2f2f..b98bae4b 100644
--- a/dynamic-mapping-ui/src/mapping/overwrite/overwrite-substitution-modal.component.ts
+++ b/dynamic-mapping-ui/src/mapping/overwrite/overwrite-substitution-modal.component.ts
@@ -92,4 +92,8 @@ export class OverwriteSubstitutionModalComponent implements OnInit {
     this.closeSubject.next(false);
     this.closeSubject.complete();
   }
+
+  ngOnDestroy() {
+    this.closeSubject.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.ts b/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.ts
index d74e3e8c..0a5447c8 100644
--- a/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.ts
+++ b/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.ts
@@ -39,7 +39,11 @@ import { BrokerConfigurationService } from "../../configuration";
 import {
   API,
   COLOR_HIGHLIGHTED,
-  Direction, Extension, Mapping, MappingSubstitution, RepairStrategy,
+  Direction,
+  Extension,
+  Mapping,
+  MappingSubstitution,
+  RepairStrategy,
   SAMPLE_TEMPLATES_C8Y,
   SnoopStatus,
   getExternalTemplate,
@@ -51,7 +55,17 @@ import { MappingService } from "../core/mapping.service";
 import { EditSubstitutionComponent } from "../edit/edit-substitution-modal.component";
 import { C8YRequest } from "../processor/prosessor.model";
 import { ValidationError } from "../shared/mapping.model";
-import { countDeviceIdentifiers, definesDeviceIdentifier, expandC8YTemplate, expandExternalTemplate, isDisabled, isWildcardTopic, reduceSourceTemplate, reduceTargetTemplate, splitTopicExcludingSeparator } from "../shared/util";
+import {
+  countDeviceIdentifiers,
+  definesDeviceIdentifier,
+  expandC8YTemplate,
+  expandExternalTemplate,
+  isDisabled,
+  isWildcardTopic,
+  reduceSourceTemplate,
+  reduceTargetTemplate,
+  splitTopicExcludingSeparator,
+} from "../shared/util";
 import { SnoopingModalComponent } from "../snooping/snooping-modal.component";
 import { EditorMode, StepperConfiguration } from "./stepper-model";
 import { SubstitutionRendererComponent } from "./substitution/substitution-renderer.component";
@@ -101,7 +115,6 @@ export class MappingStepperComponent implements OnInit {
   countDeviceIdentifers$: BehaviorSubject<number> = new BehaviorSubject<number>(
     0
   );
-  selectedResult$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   propertyFormly: FormGroup = new FormGroup({});
   sourceSystem: string;
   targetSystem: string;
@@ -143,7 +156,7 @@ export class MappingStepperComponent implements OnInit {
       this.mapping.direction == Direction.OUTBOUND ? "Cumulocity" : "Broker";
     this.templateModel = {
       stepperConfiguration: this.stepperConfiguration,
-      mapping: this.mapping
+      mapping: this.mapping,
     };
 
     this.substitutionModel = {
@@ -407,9 +420,7 @@ export class MappingStepperComponent implements OnInit {
   }
 
   public onSelectedPathSourceChanged(path: string) {
-    this.substitutionFormly
-      .get("pathSource")
-      .setValue(path);
+    this.substitutionFormly.get("pathSource").setValue(path);
   }
 
   public onEditorSourceInitialized(state: string) {
@@ -430,9 +441,7 @@ export class MappingStepperComponent implements OnInit {
         msgTxt: "",
         severity: "text-info",
       };
-      this.substitutionFormly
-        .get("pathSource")
-        .setErrors(null);
+      this.substitutionFormly.get("pathSource").setErrors(null);
 
       let r: JSON = await this.mappingService.evaluateExpression(
         this.editorSource?.get(),
@@ -444,14 +453,12 @@ export class MappingStepperComponent implements OnInit {
       };
 
       if (
-        this.substitutionModel.sourceExpression.resultType ==
-          "Array" &&
+        this.substitutionModel.sourceExpression.resultType == "Array" &&
         !this.substitutionModel.expandArray
       ) {
         this.substitutionModel.sourceExpression.msgTxt =
           'Current expression extracts an array. Consider to use the option "Expand as array" if you want to create multiple measurements, alarms, events or devices, i.e. "multi-device" or "multi-value"';
-        this.substitutionModel.sourceExpression.severity =
-          "text-warning";
+        this.substitutionModel.sourceExpression.severity = "text-warning";
       }
     } catch (error) {
       console.log("Error evaluating source expression: ", error);
@@ -468,11 +475,9 @@ export class MappingStepperComponent implements OnInit {
 
   isSubstitutionValid() {
     const r1 =
-      this.substitutionModel.sourceExpression.severity !=
-      "text-danger";
+      this.substitutionModel.sourceExpression.severity != "text-danger";
     const r2 =
-      this.substitutionModel.targetExpression.severity !=
-      "text-danger";
+      this.substitutionModel.targetExpression.severity != "text-danger";
     const r3 = this.substitutionModel.pathSource != "";
     const r4 = this.substitutionModel.pathTarget != "";
     let result = r1 && r2 && r3 && r4;
@@ -480,9 +485,7 @@ export class MappingStepperComponent implements OnInit {
   }
 
   public onSelectedPathTargetChanged(path: string) {
-    this.substitutionFormly
-      .get("pathTarget")
-      .setValue(path);
+    this.substitutionFormly.get("pathTarget").setValue(path);
   }
 
   public async updateTargetExpressionResult(path: string) {
@@ -491,9 +494,7 @@ export class MappingStepperComponent implements OnInit {
         msgTxt: "",
         severity: "text-info",
       };
-      this.substitutionFormly
-        .get("pathTarget")
-        .setErrors(null);
+      this.substitutionFormly.get("pathTarget").setErrors(null);
       let r: JSON = await this.mappingService.evaluateExpression(
         this.editorTarget?.get(),
         path
@@ -514,13 +515,11 @@ export class MappingStepperComponent implements OnInit {
           ` is resolved using the external Id ` +
           this.mapping.externalIdType +
           ` defined in the previous step.`;
-        this.substitutionModel.targetExpression.severity =
-          "text-info";
+        this.substitutionModel.targetExpression.severity = "text-info";
       } else if (path == "$") {
         this.substitutionModel.targetExpression.msgTxt = `By specifying "$" you selected the root of the target 
         template and this rersults in merging the source expression with the target template.`;
-        this.substitutionModel.targetExpression.severity =
-          "text-warning";
+        this.substitutionModel.targetExpression.severity = "text-warning";
       }
     } catch (error) {
       console.log("Error evaluating target expression: ", error);
@@ -807,8 +806,7 @@ export class MappingStepperComponent implements OnInit {
   public onAddSubstitution() {
     if (this.isSubstitutionValid()) {
       this.substitutionModel.expandArray = false;
-      this.substitutionModel.repairStrategy =
-        RepairStrategy.DEFAULT;
+      this.substitutionModel.repairStrategy = RepairStrategy.DEFAULT;
       this.substitutionModel.resolve2ExternalId = false;
       this.addSubstitution(this.substitutionModel);
       this.selectedSubstitution = -1;
@@ -844,10 +842,8 @@ export class MappingStepperComponent implements OnInit {
         stepperConfiguration: this.stepperConfiguration,
       };
       if (
-        this.substitutionModel.sourceExpression?.severity !=
-          "text-danger" &&
-        this.substitutionModel.targetExpression?.severity !=
-          "text-danger"
+        this.substitutionModel.sourceExpression?.severity != "text-danger" &&
+        this.substitutionModel.targetExpression?.severity != "text-danger"
       ) {
         initialState.substitution.pathSource =
           this.substitutionModel.pathSource;
@@ -861,10 +857,8 @@ export class MappingStepperComponent implements OnInit {
         console.log("Mapping after edit:", editedSub);
         if (editedSub) {
           this.mapping.substitutions[selected] = editedSub;
-          this.substitutionModel.pathSource =
-            editedSub.pathSource;
-          this.substitutionModel.pathTarget =
-            editedSub.pathTarget;
+          this.substitutionModel.pathSource = editedSub.pathSource;
+          this.substitutionModel.pathTarget = editedSub.pathTarget;
         }
       });
       this.countDeviceIdentifers$.next(countDeviceIdentifiers(this.mapping));
@@ -904,20 +898,20 @@ export class MappingStepperComponent implements OnInit {
   public onSelectSubstitution(selected: number) {
     if (selected < this.mapping.substitutions.length && selected > -1) {
       this.selectedSubstitution = selected;
-      this.substitutionModel = _.clone(
-        this.mapping.substitutions[selected]
-      );
+      this.substitutionModel = _.clone(this.mapping.substitutions[selected]);
       this.substitutionModel.stepperConfiguration = this.stepperConfiguration;
-      this.editorSource?.setSelectionToPath(
-        this.substitutionModel.pathSource
-      );
-      this.editorTarget.setSelectionToPath(
-        this.substitutionModel.pathTarget
-      );
+      this.editorSource?.setSelectionToPath(this.substitutionModel.pathSource);
+      this.editorTarget.setSelectionToPath(this.substitutionModel.pathTarget);
     }
   }
 
   public onTemplateChanged(templateTarget: any): void {
     this.editorTarget.set(templateTarget);
   }
+
+  ngOnDestroy() {
+    this.countDeviceIdentifers$.complete();
+    this.extensionEvents$.complete();
+    this.onDestroy$.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/step-one/mapping-properties.component.ts b/dynamic-mapping-ui/src/mapping/step-one/mapping-properties.component.ts
index 7dc16a28..6d7d3411 100644
--- a/dynamic-mapping-ui/src/mapping/step-one/mapping-properties.component.ts
+++ b/dynamic-mapping-ui/src/mapping/step-one/mapping-properties.component.ts
@@ -421,4 +421,8 @@ export class MappingStepPropertiesComponent implements OnInit {
       this.targetTemplateChanged.emit(getExternalTemplate(this.mapping));
     }
   }
+
+  ngOnDestroy() {
+    this.selectedResult$.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/mapping/step-three/mapping-testing.component.ts b/dynamic-mapping-ui/src/mapping/step-three/mapping-testing.component.ts
index 12a50638..092123d3 100644
--- a/dynamic-mapping-ui/src/mapping/step-three/mapping-testing.component.ts
+++ b/dynamic-mapping-ui/src/mapping/step-three/mapping-testing.component.ts
@@ -220,4 +220,8 @@ export class MappingStepTestingComponent implements OnInit {
       this.testingModel.errorMsg = undefined;
     }
   }
+
+  ngOnDestroy() {
+    this.selectedResult$.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html b/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html
index a8199a47..ec136252 100644
--- a/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html
+++ b/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title translate>Dynamic Mapping</c8y-title>
+<c8y-title translate>Mapping Monitoring</c8y-title>
 <c8y-action-bar-item [placement]="'right'">
   <button
     class="btn btn-link"
diff --git a/dynamic-mapping-ui/src/monitoring/shared/monitoring.service.ts b/dynamic-mapping-ui/src/monitoring/shared/monitoring.service.ts
index ee8e65bd..79d94e2e 100644
--- a/dynamic-mapping-ui/src/monitoring/shared/monitoring.service.ts
+++ b/dynamic-mapping-ui/src/monitoring/shared/monitoring.service.ts
@@ -21,7 +21,7 @@
 import { Injectable } from "@angular/core";
 import { FetchClient, InventoryService, Realtime } from "@c8y/client";
 import { BehaviorSubject, Observable } from "rxjs";
-import { MAPPING_FRAGMENT, MappingStatus } from "../../shared";
+import { MAPPING_FRAGMENT, MappingStatus, SharedService } from "../../shared";
 import { BrokerConfigurationService } from "../../configuration";
 
 @Injectable({ providedIn: "root" })
@@ -29,7 +29,7 @@ export class MonitoringService {
   constructor(
     private client: FetchClient,
     private inventory: InventoryService,
-    private brokerConfigurationService: BrokerConfigurationService
+    private sharedService: SharedService
   ) {
     this.realtime = new Realtime(this.client);
   }
@@ -43,7 +43,7 @@ export class MonitoringService {
 
   async subscribeMonitoringChannel(): Promise<object> {
     const agentId =
-      await this.brokerConfigurationService.getDynamicMappingServiceAgent();
+      await this.sharedService.getDynamicMappingServiceAgent();
     console.log("Start subscription for monitoring:", agentId);
 
     let { data, res } = await this.inventory.detail(agentId);
diff --git a/dynamic-mapping-ui/src/shared/camel-case.pipe.ts b/dynamic-mapping-ui/src/shared/camel-case.pipe.ts
new file mode 100644
index 00000000..20f816f4
--- /dev/null
+++ b/dynamic-mapping-ui/src/shared/camel-case.pipe.ts
@@ -0,0 +1,30 @@
+// camel-case.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'camelCase'
+})
+export class CamelCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) {
+      return value;
+    }
+
+    // Split the string into an array of words
+    const words = value.split(' ');
+
+    // Convert each word to lowercase and capitalize the first letter
+    const camelCaseWords = words.map((word, index) => {
+      if (index === 0) {
+        return word.toLowerCase();
+      } else {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      }
+    });
+
+    // Join the words back into a single string
+    const camelCaseString = camelCaseWords.join('');
+
+    return camelCaseString;
+  }
+}
diff --git a/dynamic-mapping-ui/src/shared/capitazilze-case.pipe.ts b/dynamic-mapping-ui/src/shared/capitazilze-case.pipe.ts
new file mode 100644
index 00000000..3eaced78
--- /dev/null
+++ b/dynamic-mapping-ui/src/shared/capitazilze-case.pipe.ts
@@ -0,0 +1,26 @@
+// camel-case.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'capitalCase'
+})
+export class CapitalizeCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) {
+      return value;
+    }
+
+    // Split the string into an array of words
+    const words = value.split(' ');
+
+    // Convert each word to lowercase and capitalize the first letter
+    const camelCaseWords = words.map((word, index) => {
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    });
+
+    // Join the words back into a single string
+    const camelCaseString = camelCaseWords.join('');
+
+    return camelCaseString;
+  }
+}
diff --git a/dynamic-mapping-ui/src/shared/confirmation/confirmation-modal.component.ts b/dynamic-mapping-ui/src/shared/confirmation/confirmation-modal.component.ts
index ee7d7ec2..68b6a864 100644
--- a/dynamic-mapping-ui/src/shared/confirmation/confirmation-modal.component.ts
+++ b/dynamic-mapping-ui/src/shared/confirmation/confirmation-modal.component.ts
@@ -71,4 +71,8 @@ export class ConfirmationModalComponent implements OnInit {
     this.closeSubject.next(false);
     this.closeSubject.complete();
   }
+
+  ngOnDestroy() {
+    this.closeSubject.complete();
+  }
 }
diff --git a/dynamic-mapping-ui/src/shared/index.ts b/dynamic-mapping-ui/src/shared/index.ts
index 4e6c2e56..d781964c 100644
--- a/dynamic-mapping-ui/src/shared/index.ts
+++ b/dynamic-mapping-ui/src/shared/index.ts
@@ -7,4 +7,5 @@ export * from './navigation.factory';
 export * from './shared.service';
 export * from './tab.factory';
 export * from "./overview.guard";
-export * from "./admin.guard";
\ No newline at end of file
+export * from "./admin.guard";
+export * from "./camel-case.pipe";
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/shared/shared.module.ts b/dynamic-mapping-ui/src/shared/shared.module.ts
index 7726b487..9542cd05 100644
--- a/dynamic-mapping-ui/src/shared/shared.module.ts
+++ b/dynamic-mapping-ui/src/shared/shared.module.ts
@@ -24,11 +24,13 @@ import { JsonEditor2Component } from "./editor2/jsoneditor2.component";
 import { BsDatepickerModule } from "ngx-bootstrap/datepicker";
 import { PaginationModule } from "ngx-bootstrap/pagination";
 import { ConfirmationModalComponent } from "./confirmation/confirmation-modal.component";
+import { CamelCasePipe } from "./camel-case.pipe";
+import { CapitalizeCasePipe } from "./capitazilze-case.pipe";
 
 @NgModule({
-  declarations: [JsonEditor2Component, ConfirmationModalComponent],
+  declarations: [JsonEditor2Component, ConfirmationModalComponent, CamelCasePipe,CapitalizeCasePipe],
   imports: [CoreModule, BsDatepickerModule, PaginationModule],
-  exports: [JsonEditor2Component, ConfirmationModalComponent],
+  exports: [JsonEditor2Component, ConfirmationModalComponent, CamelCasePipe, CapitalizeCasePipe],
   providers: [],
 })
 export class SharedModule {}
diff --git a/dynamic-mapping-ui/src/shared/shared.service.ts b/dynamic-mapping-ui/src/shared/shared.service.ts
index a38ac2da..8528ab83 100644
--- a/dynamic-mapping-ui/src/shared/shared.service.ts
+++ b/dynamic-mapping-ui/src/shared/shared.service.ts
@@ -20,77 +20,29 @@
  */
 import { Injectable } from "@angular/core";
 import {
-  EventService,
   FetchClient,
   IdentityService,
-  IEvent,
-  IExternalIdentity,
-  IFetchResponse,
-  Realtime,
+  IExternalIdentity
 } from "@c8y/client";
 import {
   AGENT_ID,
   BASE_URL,
-  CONNECTOR_FRAGMENT,
-  Extension,
-  PATH_CONFIGURATION_CONNECTION_ENDPOINT,
-  PATH_CONFIGURATION_SERVICE_ENDPOINT,
-  PATH_EXTENSION_ENDPOINT,
-  PATH_FEATURE_ENDPOINT,
-  PATH_OPERATION_ENDPOINT,
-  PATH_STATUS_CONNECTORS_ENDPOINT,
+  PATH_FEATURE_ENDPOINT
 } from ".";
 
-import { BehaviorSubject, merge, Observable, Subject } from "rxjs";
-import {
-  filter,
-  map,
-  scan,
-  switchMap,
-  tap,
-  withLatestFrom,
-} from "rxjs/operators";
-import { ConnectorConfiguration, ConnectorSpecification, ConnectorStatusEvent, Feature, Operation, ServiceConfiguration, ConnectorStatus, StatusEventTypes } from "../configuration/shared/configuration.model";
+import { Feature } from "../configuration/shared/configuration.model";
 
 @Injectable({ providedIn: "root" })
 export class SharedService {
   constructor(
     private client: FetchClient,
     private identity: IdentityService,
-    private eventService: EventService
   ) {
-    this.realtime = new Realtime(this.client);
-    this.startConnectorStatusSubscriptions();
-    //console.log("Constructor:BrokerConfigurationService");
   }
 
   private _agentId: Promise<string>;
-  private _connectorConfigurations: ConnectorConfiguration[];
-  private _serviceConfiguration: ServiceConfiguration;
-  private _connectorSpecifications: ConnectorSpecification[];
   private _feature: Promise<Feature>;
-  private realtime: Realtime;
-  private statusLogs$: Observable<any[]>;
-  private subscriptionEvents: any;
-  private statusLogEventType: string =
-    StatusEventTypes.STATUS_CONNECTOR_EVENT_TYPE;
-  private filterTrigger$: BehaviorSubject<string> = new BehaviorSubject(
-    StatusEventTypes.STATUS_CONNECTOR_EVENT_TYPE
-  );
-  private mergeFilterTrigger$: Subject<any> = new Subject();
-  private incomingRealtime$: Subject<IEvent> = new Subject();
-
-  public getStatusLogs(): Observable<any[]> {
-    return this.statusLogs$;
-  }
 
-  public resetCache() {
-    console.log("resetCache() :BrokerConfigurationService");
-    this._feature = undefined;
-    this._connectorConfigurations = undefined;
-    this._connectorSpecifications = undefined;
-    this._serviceConfiguration = undefined;
-  }
 
   async getDynamicMappingServiceAgent(): Promise<string> {
     if (!this._agentId) {
@@ -107,149 +59,6 @@ export class SharedService {
     return this._agentId;
   }
 
-  async updateConnectorConfiguration(
-    configuration: ConnectorConfiguration
-  ): Promise<IFetchResponse> {
-    this._connectorConfigurations = undefined;
-    return this.client.fetch(
-      `${BASE_URL}/${PATH_CONFIGURATION_CONNECTION_ENDPOINT}/instance/${configuration.ident}`,
-      {
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify(configuration),
-        method: "PUT",
-      }
-    );
-  }
-
-  async createConnectorConfiguration(
-    configuration: ConnectorConfiguration
-  ): Promise<IFetchResponse> {
-    this._connectorConfigurations = undefined;
-    return this.client.fetch(
-      `${BASE_URL}/${PATH_CONFIGURATION_CONNECTION_ENDPOINT}/instance`,
-      {
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify(configuration),
-        method: "POST",
-      }
-    );
-  }
-
-  async deleteConnectorConfiguration(ident: String): Promise<IFetchResponse> {
-    this._connectorConfigurations = undefined;
-    return this.client.fetch(
-      `${BASE_URL}/${PATH_CONFIGURATION_CONNECTION_ENDPOINT}/instance/${ident}`,
-      {
-        headers: {
-          accept: "application/json",
-          "content-type": "application/json",
-        },
-        method: "DELETE",
-      }
-    );
-  }
-
-  async getConnectorConfigurations(): Promise<ConnectorConfiguration[]> {
-    if (!this._connectorConfigurations) {
-      //console.log("Load getConnectorConfigurations()")
-      const response = await this.client.fetch(
-        `${BASE_URL}/${PATH_CONFIGURATION_CONNECTION_ENDPOINT}/instances`,
-        {
-          headers: {
-            accept: "application/json",
-          },
-          method: "GET",
-        }
-      );
-      this._connectorConfigurations = await response.json();
-    }
-    return this._connectorConfigurations;
-  }
-
-  async getConnectorConfigurationsWithStatus(): Promise<
-    ConnectorConfiguration[]
-  > {
-    const configurations: ConnectorConfiguration[] =
-      await this.getConnectorConfigurations();
-    let connectorStatus = undefined;
-    for (let index = 0; index < configurations.length; index++) {
-      const conf = configurations[index];
-      if (!connectorStatus) {
-        connectorStatus = await this.getConnectorStatus();
-      }
-      if (!conf["status$"]) {
-        const status = connectorStatus[conf.ident]
-          ? connectorStatus[conf.ident].status
-          : ConnectorStatus.UNKNOWN;
-        conf["status$"] = new BehaviorSubject<string>(status);
-      }
-    }
-    return this._connectorConfigurations;
-  }
-
-  async getConnectorSpecifications(): Promise<ConnectorSpecification[]> {
-    if (!this._connectorSpecifications) {
-      const response = await this.client.fetch(
-        `${BASE_URL}/${PATH_CONFIGURATION_CONNECTION_ENDPOINT}/specifications`,
-        {
-          headers: {
-            accept: "application/json",
-          },
-          method: "GET",
-        }
-      );
-      this._connectorSpecifications = await response.json();
-    }
-    return this._connectorSpecifications;
-  }
-
-  async getServiceConfiguration(): Promise<ServiceConfiguration> {
-    if (!this._serviceConfiguration) {
-      const response = await this.client.fetch(
-        `${BASE_URL}/${PATH_CONFIGURATION_SERVICE_ENDPOINT}`,
-        {
-          headers: {
-            accept: "application/json",
-          },
-          method: "GET",
-        }
-      );
-      this._serviceConfiguration = await response.json();
-    }
-
-    return this._serviceConfiguration;
-  }
-
-  async updateServiceConfiguration(
-    configuration: ServiceConfiguration
-  ): Promise<IFetchResponse> {
-    return this.client.fetch(
-      `${BASE_URL}/${PATH_CONFIGURATION_SERVICE_ENDPOINT}`,
-      {
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify(configuration),
-        method: "POST",
-      }
-    );
-  }
-
-  async getConnectorStatus(): Promise<ConnectorStatus> {
-    const response = await this.client.fetch(
-      `${BASE_URL}/${PATH_STATUS_CONNECTORS_ENDPOINT}`,
-      {
-        method: "GET",
-      }
-    );
-    const result = await response.json();
-    return result;
-  }
-
   async getFeatures(): Promise<Feature> {
     if (!this._feature) {
       const response = await this.client.fetch(
@@ -262,171 +71,4 @@ export class SharedService {
     }
     return this._feature;
   }
-
-  async startConnectorStatusCheck(): Promise<void> {
-    const agentId = await this.getDynamicMappingServiceAgent();
-    console.log("Started subscription:", agentId);
-
-    // subscribe to event stream
-    this.subscriptionEvents = this.realtime.subscribe(
-      `/events/${agentId}`,
-      this.updateConnectorStatus
-    );
-  }
-
-  private updateConnectorStatus = (p: object) => {
-    let payload = p["data"]["data"];
-    if (payload.type == this.statusLogEventType) {
-      payload[CONNECTOR_FRAGMENT].type = payload.type;
-      this.incomingRealtime$.next(payload);
-    }
-
-    if (payload.type == StatusEventTypes.STATUS_CONNECTOR_EVENT_TYPE) {
-      let statusLog: ConnectorStatusEvent = payload[CONNECTOR_FRAGMENT];
-      this._connectorConfigurations.forEach((cc) => {
-        if (statusLog["connectorIdent"] == cc.ident) {
-          cc["status$"].next(statusLog.status);
-        }
-      });
-    }
-  };
-
-  public updateStatusLogs(eventType: string) {
-    this.filterTrigger$.next(eventType);
-    this.mergeFilterTrigger$.next([{ type: "reset" }]);
-    this.statusLogEventType = eventType;
-  }
-
-  async startConnectorLogsRealtime(): Promise<void> {
-    const agentId = await this.getDynamicMappingServiceAgent();
-    console.log("Agent Id", agentId);
-
-    const sourceList$ = this.filterTrigger$.pipe(
-      //tap((x) => console.log("Trigger", x)),
-      switchMap((type) =>
-        this.eventService.list({
-          pageSize: 5,
-          withTotalPages: true,
-          type: type,
-          source: agentId,
-        })
-      ),
-      map((data) => data.data),
-      map((events) =>
-        events.map((event) => {
-          event[CONNECTOR_FRAGMENT].type = event.type;
-          return event[CONNECTOR_FRAGMENT];
-        })
-      )
-      //tap((x) => console.log("Reload", x))
-    );
-
-    const sourceRealtime$ = this.incomingRealtime$.pipe(
-      filter((event) => event.type == this.statusLogEventType),
-      map((event) => [event[CONNECTOR_FRAGMENT]])
-    );
-
-    this.statusLogs$ = merge(
-      sourceList$,
-      sourceRealtime$,
-      this.mergeFilterTrigger$
-    ).pipe(
-      withLatestFrom(this.filterTrigger$),
-      scan((acc, [val, filterEventsType]) => {
-        // acc = acc.filter((event) => event.type == filterEventsType);
-        if (val[0].type == "reset") {
-          console.log("Reset loaded logs!");
-          acc = [];
-        } else {
-          acc = val.concat(acc);
-        }
-        const sortedAcc = acc.slice(0, 9);
-        return sortedAcc;
-      }, [])
-    );
-  }
-
-  public startConnectorStatusSubscriptions() {
-    this.startConnectorLogsRealtime();
-    this.startConnectorStatusCheck();
-  }
-  public stopConnectorStatusSubscriptions() {
-    this.realtime.unsubscribe(this.subscriptionEvents);
-  }
-
-  public runOperation(op: Operation, parameter?: any): Promise<IFetchResponse> {
-    this._connectorConfigurations = undefined;
-    let body: any = {
-      operation: op,
-    };
-    if (parameter) {
-      body = {
-        ...body,
-        parameter: parameter,
-      };
-    }
-    return this.client.fetch(`${BASE_URL}/${PATH_OPERATION_ENDPOINT}`, {
-      headers: {
-        "content-type": "application/json",
-      },
-      body: JSON.stringify(body),
-      method: "POST",
-    });
-  }
-
-  async getProcessorExtensions(): Promise<Object> {
-    const response: IFetchResponse = await this.client.fetch(
-      `${BASE_URL}/${PATH_EXTENSION_ENDPOINT}`,
-      {
-        headers: {
-          accept: "application/json",
-          "content-type": "application/json",
-        },
-        method: "GET",
-      }
-    );
-
-    if (response.status != 200) {
-      return undefined;
-    }
-    return response.json();
-  }
-
-  async getProcessorExtension(name: string): Promise<Extension> {
-    const response: IFetchResponse = await this.client.fetch(
-      `${BASE_URL}/${PATH_EXTENSION_ENDPOINT}/${name}`,
-      {
-        headers: {
-          accept: "application/json",
-          "content-type": "application/json",
-        },
-        method: "GET",
-      }
-    );
-
-    if (response.status != 200) {
-      return undefined;
-    }
-    //let result =  (await response.json()) as string[];
-    return response.json();
-  }
-
-  async deleteProcessorExtension(name: string): Promise<string> {
-    const response: IFetchResponse = await this.client.fetch(
-      `${BASE_URL}/${PATH_EXTENSION_ENDPOINT}/${name}`,
-      {
-        headers: {
-          accept: "application/json",
-          "content-type": "application/json",
-        },
-        method: "DELETE",
-      }
-    );
-
-    if (response.status != 200) {
-      return undefined;
-    }
-    //let result =  (await response.json()) as string[];
-    return response.json();
-  }
 }
diff --git a/dynamic-mapping-ui/src/testing-devices/grid/testing.component.html b/dynamic-mapping-ui/src/testing-devices/grid/testing.component.html
index 3bc930a8..8eee688a 100644
--- a/dynamic-mapping-ui/src/testing-devices/grid/testing.component.html
+++ b/dynamic-mapping-ui/src/testing-devices/grid/testing.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>Dynamic Mapping</c8y-title>
+<c8y-title>Test Devices</c8y-title>
 
 <div class="card">
   <div class="card-block">
diff --git a/dynamic-mapping-ui/src/testing-devices/grid/testing.component.ts b/dynamic-mapping-ui/src/testing-devices/grid/testing.component.ts
index ba5d2c6c..b880e946 100644
--- a/dynamic-mapping-ui/src/testing-devices/grid/testing.component.ts
+++ b/dynamic-mapping-ui/src/testing-devices/grid/testing.component.ts
@@ -46,7 +46,7 @@ export class TestingComponent {
   loadingItemsLabel: string = "Loading managed objects…";
 
   displayOptions: DisplayOptions = {
-    bordered: true,
+    bordered: false,
     striped: true,
     filter: true,
     gridHeader: true,