From 35a6ed25facffb0524309678e8e5b72b21588104 Mon Sep 17 00:00:00 2001
From: ck-c8y <christof.strack@cumulocity.com>
Date: Thu, 9 Jan 2025 13:13:48 +0100
Subject: [PATCH] change navigation

---
 .../service-configuration.component.html      |   7 +-
 .../src/dynamic-mapping.module.ts             |   3 -
 .../grid/extension-grid.component.html        |   2 +-
 .../src/mapping-tree/mapping-tree.factory.ts  |  92 +++++++++++++++
 .../src/mapping-tree/tree-tab.factory.ts      |  43 -------
 .../src/mapping-tree/tree.component.html      |   2 +-
 .../src/mapping-tree/tree.module.ts           |   6 +-
 .../src/monitoring/chart/chart.component.html |   4 +-
 .../src/monitoring/chart/chart.component.ts   |   2 +-
 .../mapping-service-event.component.html      |   2 +-
 .../monitoring/grid/monitoring.component.html |   2 +-
 .../monitoring-navigation.factory.ts          | 109 ++++++++++++++++++
 .../src/monitoring/monitoring-tab.factory.ts  |  61 ----------
 .../src/monitoring/monitoring.module.ts       |   6 +-
 dynamic-mapping-ui/src/shared/index.ts        |   1 -
 .../src/shared/misc/mapping-tab.factory.ts    |  97 ----------------
 .../grid/testing.component.html               |   2 +-
 .../testing-device/test-navigation.factory.ts |  93 +++++++++++++++
 .../src/testing-device/testing.module.ts      |  11 +-
 19 files changed, 315 insertions(+), 230 deletions(-)
 create mode 100644 dynamic-mapping-ui/src/mapping-tree/mapping-tree.factory.ts
 delete mode 100644 dynamic-mapping-ui/src/mapping-tree/tree-tab.factory.ts
 create mode 100644 dynamic-mapping-ui/src/monitoring/monitoring-navigation.factory.ts
 delete mode 100644 dynamic-mapping-ui/src/monitoring/monitoring-tab.factory.ts
 delete mode 100644 dynamic-mapping-ui/src/shared/misc/mapping-tab.factory.ts
 create mode 100644 dynamic-mapping-ui/src/testing-device/test-navigation.factory.ts

diff --git a/dynamic-mapping-ui/src/configuration/service-configuration.component.html b/dynamic-mapping-ui/src/configuration/service-configuration.component.html
index 39442c3c8..a11d19d62 100644
--- a/dynamic-mapping-ui/src/configuration/service-configuration.component.html
+++ b/dynamic-mapping-ui/src/configuration/service-configuration.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>Configuration</c8y-title>
+<c8y-title>Service configuration</c8y-title>
 <c8y-action-bar-item [placement]="'right'">
   <button
     class="btn btn-link"
@@ -42,11 +42,6 @@
 </c8y-action-bar-item>
 
 <div class="card card--fullpage">
-  <div class="card-header p-l-32 separator j-c-between">
-    <h4 class="card-title">
-      {{ 'Service configuration' | translate }}
-    </h4>
-  </div>
   <div class="card-block">
     <form [formGroup]="serviceForm">
       <div class="col-lg-8 col-lg-offset-2">
diff --git a/dynamic-mapping-ui/src/dynamic-mapping.module.ts b/dynamic-mapping-ui/src/dynamic-mapping.module.ts
index dec865fdb..51fe8cd9b 100644
--- a/dynamic-mapping-ui/src/dynamic-mapping.module.ts
+++ b/dynamic-mapping-ui/src/dynamic-mapping.module.ts
@@ -39,9 +39,7 @@ import { FormlyPresetModule } from '@ngx-formly/core/preset';
 
 import {
   MappingNavigationFactory,
-  MappingTabFactory,
   OverviewGuard,
-  SharedModule,
 } from './shared';
 import { TestingModule } from './testing-device/testing.module';
 import './shared/styles/shared.css';
@@ -74,7 +72,6 @@ import { LandingModule } from './landing/landing.module';
     OverviewGuard,
     BsModalService,
     hookNavigator(MappingNavigationFactory),
-    hookTab(MappingTabFactory),
   ],
 })
 export class DynamicMappingModule {
diff --git a/dynamic-mapping-ui/src/extension/grid/extension-grid.component.html b/dynamic-mapping-ui/src/extension/grid/extension-grid.component.html
index 88dced885..839b251f9 100644
--- a/dynamic-mapping-ui/src/extension/grid/extension-grid.component.html
+++ b/dynamic-mapping-ui/src/extension/grid/extension-grid.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>{{ 'Configuration' | translate }}</c8y-title>
+<c8y-title>{{ 'Processor extension' | translate }}</c8y-title>
 
 <c8y-breadcrumb>
   <!-- <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Processor' | translate"></c8y-breadcrumb-item> -->
diff --git a/dynamic-mapping-ui/src/mapping-tree/mapping-tree.factory.ts b/dynamic-mapping-ui/src/mapping-tree/mapping-tree.factory.ts
new file mode 100644
index 000000000..a639da639
--- /dev/null
+++ b/dynamic-mapping-ui/src/mapping-tree/mapping-tree.factory.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+ * and/or its subsidiaries and/or its affiliates and/or their licensors.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed 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.
+ *
+ * @authors Christof Strack
+ */
+
+import { Injectable } from '@angular/core';
+import { ApplicationService } from '@c8y/client';
+import * as _ from 'lodash';
+import {
+  AlertService,
+  AppStateService,
+  gettext,
+  NavigatorNode,
+  NavigatorNodeFactory
+} from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+import { NODE2, SharedService } from '../shared';
+
+@Injectable()
+export class MappingTreeNavigationFactory implements NavigatorNodeFactory {
+  private static readonly APPLICATION_DYNAMIC_MAPPING_SERVICE =
+    'dynamic-mapping-service';
+
+  appName: string;
+  isStandaloneApp: boolean = false;
+  staticNodes = {
+    treegMappingNode: new NavigatorNode({
+      parent: gettext('Monitoring'),
+      label: gettext('Hierarchy mapping'),
+      icon: 'monitoring',
+      path: `sag-ps-pkg-dynamic-mapping/${NODE2}/tree`,
+      priority: 500,
+      preventDuplicates: true
+    }),
+  } as const;
+
+  constructor(
+    private applicationService: ApplicationService,
+    private alertService: AlertService,
+    private sharedService: SharedService,
+    private appStateService: AppStateService,
+    public router: Router
+  ) {
+    this.appStateService.currentApplication.subscribe((cur) => {
+      this.isStandaloneApp =
+        _.has(cur?.manifest, 'isPackage') || _.has(cur?.manifest, 'blueprint');
+      this.appName = cur.name;
+    });
+  }
+
+  async get() {
+    const feature: any = await this.sharedService.getFeatures();
+    let navs;
+    let copyStaticNodesPlugin;
+
+    copyStaticNodesPlugin = _.clone(this.staticNodes);
+    if (!feature?.outputMappingEnabled) {
+      delete copyStaticNodesPlugin.mappingOutboundNode;
+      delete copyStaticNodesPlugin.subscriptionOutboundNode;
+    }
+    navs = Object.values(copyStaticNodesPlugin) as NavigatorNode[];
+
+    return this.applicationService
+      .isAvailable(MappingTreeNavigationFactory.APPLICATION_DYNAMIC_MAPPING_SERVICE)
+      .then((data) => {
+        if (!data.data || !feature) {
+          this.alertService.danger(
+            'Microservice:dynamic-mapping-service not subscribed. Please subscribe this service before using the mapping editor!'
+          );
+          console.error('dynamic-mapping-service microservice not subscribed!');
+          return [];
+        }
+        return navs;
+      });
+  }
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/mapping-tree/tree-tab.factory.ts b/dynamic-mapping-ui/src/mapping-tree/tree-tab.factory.ts
deleted file mode 100644
index 3cac0c83f..000000000
--- a/dynamic-mapping-ui/src/mapping-tree/tree-tab.factory.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
- * and/or its subsidiaries and/or its affiliates and/or their licensors.
- *
- * SPDX-License-Identifier: Apache-2.0
- *
- * Licensed 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.
- *
- * @authors Christof Strack
- */
-import { Injectable } from '@angular/core';
-import { TabFactory, Tab } from '@c8y/ngx-components';
-import { Router } from '@angular/router';
-import { NODE2 } from '../shared';
-@Injectable()
-export class TreeTabFactory implements TabFactory {
-  constructor(public router: Router) {}
-
-  async get() {
-    // console.log("MonitoringTabFactory",this.router.url, this.router.url.match(/sag-ps-pkg-dynamic-mapping/g));
-    const tabs: Tab[] = [];
-    if (this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node2/g)) {
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE2}/tree`,
-        priority: 600,
-        label: 'Hierarchy inbound mapping',
-        icon: 'hierarchy',
-        orientation: 'horizontal'
-      } as Tab);
-    }
-    return tabs;
-  }
-}
diff --git a/dynamic-mapping-ui/src/mapping-tree/tree.component.html b/dynamic-mapping-ui/src/mapping-tree/tree.component.html
index 7958641b3..a205c05f3 100644
--- a/dynamic-mapping-ui/src/mapping-tree/tree.component.html
+++ b/dynamic-mapping-ui/src/mapping-tree/tree.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>Monitoring</c8y-title>
+<c8y-title>Hierachy mapping</c8y-title>
 <c8y-action-bar-item placement="right">
   <button
     class="btn btn-link"
diff --git a/dynamic-mapping-ui/src/mapping-tree/tree.module.ts b/dynamic-mapping-ui/src/mapping-tree/tree.module.ts
index 20fcb12f3..27a168c19 100644
--- a/dynamic-mapping-ui/src/mapping-tree/tree.module.ts
+++ b/dynamic-mapping-ui/src/mapping-tree/tree.module.ts
@@ -19,11 +19,11 @@
  * @authors Christof Strack
  */
 import { NgModule } from '@angular/core';
-import { CoreModule, hookRoute, hookTab } from '@c8y/ngx-components';
+import { CoreModule, hookNavigator, hookRoute } from '@c8y/ngx-components';
 import { MappingTreeComponent } from './tree.component';
 import { NODE2, SharedModule } from '../shared';
-import { TreeTabFactory } from './tree-tab.factory';
 import { treeResolver } from './utils';
+import { MappingTreeNavigationFactory } from './mapping-tree.factory';
 
 @NgModule({
   declarations: [MappingTreeComponent],
@@ -35,7 +35,7 @@ import { treeResolver } from './utils';
       component: MappingTreeComponent,
       resolve: { mappingTree: treeResolver }
     }),
-    hookTab(TreeTabFactory)
+    hookNavigator(MappingTreeNavigationFactory), 
   ]
 })
 export class MappingTreeModule {}
diff --git a/dynamic-mapping-ui/src/monitoring/chart/chart.component.html b/dynamic-mapping-ui/src/monitoring/chart/chart.component.html
index c18a3c0e5..112f6aeb7 100644
--- a/dynamic-mapping-ui/src/monitoring/chart/chart.component.html
+++ b/dynamic-mapping-ui/src/monitoring/chart/chart.component.html
@@ -19,11 +19,11 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title translate>Monitoring</c8y-title>
+<c8y-title translate>Chart processed</c8y-title>
 
 <div class="card">
   <div class="card-header p-l-32">
-    <h4 class="card-title">Messages processed by mappings</h4>
+    <h4 class="card-title">Messages processed</h4>
   </div>
   <div class="card-block">
     <div class="col-lg-10 col-lg-offset-1">
diff --git a/dynamic-mapping-ui/src/monitoring/chart/chart.component.ts b/dynamic-mapping-ui/src/monitoring/chart/chart.component.ts
index 0c21e7335..597a14cfa 100644
--- a/dynamic-mapping-ui/src/monitoring/chart/chart.component.ts
+++ b/dynamic-mapping-ui/src/monitoring/chart/chart.component.ts
@@ -137,7 +137,7 @@ export class MonitoringChartComponent implements OnInit, OnDestroy {
     this.echartOptions = {
       title: {
         show: false,
-        text: 'Messages processed by mappings',
+        text: 'Messages processed',
         textStyle: {
           color: this.textColor,
           fontFamily: this.fontFamily,
diff --git a/dynamic-mapping-ui/src/monitoring/event/mapping-service-event.component.html b/dynamic-mapping-ui/src/monitoring/event/mapping-service-event.component.html
index 872a0f5f3..e571c7c55 100644
--- a/dynamic-mapping-ui/src/monitoring/event/mapping-service-event.component.html
+++ b/dynamic-mapping-ui/src/monitoring/event/mapping-service-event.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title translate>Monitoring</c8y-title>
+<c8y-title translate>Service events</c8y-title>
 <c8y-action-bar-item [placement]="'left'" itemClass="navbar-form hidden-xs">
   <c8y-form-group class="p-l-12">
     <div class="d-flex">
diff --git a/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html b/dynamic-mapping-ui/src/monitoring/grid/monitoring.component.html
index 5974ee54f..2ca171c5e 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>Monitoring</c8y-title>
+<c8y-title translate>Statistic processed</c8y-title>
 <c8y-action-bar-item [placement]="'right'">
   <button class="btn btn-link" title="{{ 'Reset monitoring' | translate }}" (click)="resetStatusMapping()">
     <i c8yIcon="reset"></i>
diff --git a/dynamic-mapping-ui/src/monitoring/monitoring-navigation.factory.ts b/dynamic-mapping-ui/src/monitoring/monitoring-navigation.factory.ts
new file mode 100644
index 000000000..455dc0b70
--- /dev/null
+++ b/dynamic-mapping-ui/src/monitoring/monitoring-navigation.factory.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+ * and/or its subsidiaries and/or its affiliates and/or their licensors.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed 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.
+ *
+ * @authors Christof Strack
+ */
+
+import { Injectable } from '@angular/core';
+import { ApplicationService } from '@c8y/client';
+import * as _ from 'lodash';
+import {
+  AlertService,
+  AppStateService,
+  gettext,
+  NavigatorNode,
+  NavigatorNodeFactory
+} from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+import {  NODE2, SharedService } from '../shared';
+
+@Injectable()
+export class MonitoringNavigationFactory implements NavigatorNodeFactory {
+  private static readonly APPLICATION_DYNAMIC_MAPPING_SERVICE =
+    'dynamic-mapping-service';
+
+  appName: string;
+  isStandaloneApp: boolean = false;
+  staticNodes = {
+    monitoringMappingNode: new NavigatorNode({
+      parent: gettext('Monitoring'),
+      label: gettext('Statistic processed'),
+      icon: 'monitoring',
+      path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/grid`,
+      priority: 500,
+      preventDuplicates: true
+    }),
+    monitoringChartNode: new NavigatorNode({
+      parent: gettext('Monitoring'),
+      label: gettext('Chart processed'),
+      icon: 'pie-chart',
+      path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/chart`,
+      priority: 500,
+      preventDuplicates: true
+    }),
+    monitoringMappingEventsNode: new NavigatorNode({
+      parent: gettext('Monitoring'),
+      label: gettext('Service events'),
+      icon: 'logs',
+      path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/serviceEvent`,
+      priority: 500,
+      preventDuplicates: true
+    }),
+
+  } as const;
+
+  constructor(
+    private applicationService: ApplicationService,
+    private alertService: AlertService,
+    private sharedService: SharedService,
+    private appStateService: AppStateService,
+    public router: Router
+  ) {
+    this.appStateService.currentApplication.subscribe((cur) => {
+      this.isStandaloneApp =
+        _.has(cur?.manifest, 'isPackage') || _.has(cur?.manifest, 'blueprint');
+      this.appName = cur.name;
+    });
+  }
+
+  async get() {
+    const feature: any = await this.sharedService.getFeatures();
+    let navs;
+    let copyStaticNodesPlugin;
+
+    copyStaticNodesPlugin = _.clone(this.staticNodes);
+    if (!feature?.outputMappingEnabled) {
+      delete copyStaticNodesPlugin.mappingOutboundNode;
+      delete copyStaticNodesPlugin.subscriptionOutboundNode;
+    }
+    navs = Object.values(copyStaticNodesPlugin) as NavigatorNode[];
+
+    return this.applicationService
+      .isAvailable(MonitoringNavigationFactory.APPLICATION_DYNAMIC_MAPPING_SERVICE)
+      .then((data) => {
+        if (!data.data || !feature) {
+          this.alertService.danger(
+            'Microservice:dynamic-mapping-service not subscribed. Please subscribe this service before using the mapping editor!'
+          );
+          console.error('dynamic-mapping-service microservice not subscribed!');
+          return [];
+        }
+        return navs;
+      });
+  }
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/monitoring/monitoring-tab.factory.ts b/dynamic-mapping-ui/src/monitoring/monitoring-tab.factory.ts
deleted file mode 100644
index dc2245924..000000000
--- a/dynamic-mapping-ui/src/monitoring/monitoring-tab.factory.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
- * and/or its subsidiaries and/or its affiliates and/or their licensors.
- *
- * SPDX-License-Identifier: Apache-2.0
- *
- * Licensed 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.
- *
- * @authors Christof Strack
- */
-import { Injectable } from '@angular/core';
-import { TabFactory, Tab } from '@c8y/ngx-components';
-import { Router } from '@angular/router';
-import { NODE2 } from '../shared/mapping/util';
-@Injectable()
-export class MonitoringTabFactory implements TabFactory {
-  constructor(
-    public router: Router
-  ) {}
-
-  async get() {
-    // console.log("MonitoringTabFactory",this.router.url, this.router.url.match(/sag-ps-pkg-dynamic-mapping/g));
-    const tabs: Tab[] = [];
-	// const re = new RegExp(String.raw`sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/grid`, 'g');
-    if (this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node2/g)) {
-	// if (this.router.url.match(re)) {
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/grid`,
-        priority: 810,
-        label: 'Monitoring mapping',
-        icon: 'monitoring',
-        orientation: 'horizontal'
-      } as Tab);
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/chart`,
-        priority: 800,
-        label: 'Monitoring chart',
-        icon: 'pie-chart',
-        orientation: 'horizontal'
-      } as Tab);
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/serviceEvent`,
-        priority: 790,
-        label: 'Mapping service events',
-        icon: 'logs',
-        orientation: 'horizontal'
-      } as Tab);
-    }
-    return tabs;
-  }
-}
diff --git a/dynamic-mapping-ui/src/monitoring/monitoring.module.ts b/dynamic-mapping-ui/src/monitoring/monitoring.module.ts
index 6c9ec76b4..7e090dbe0 100644
--- a/dynamic-mapping-ui/src/monitoring/monitoring.module.ts
+++ b/dynamic-mapping-ui/src/monitoring/monitoring.module.ts
@@ -20,20 +20,20 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CoreModule, hookRoute, hookTab } from '@c8y/ngx-components';
+import { CoreModule, hookNavigator, hookRoute, hookTab } from '@c8y/ngx-components';
 import { MonitoringComponent } from './grid/monitoring.component';
 import { IdRendererComponent } from './renderer/id-cell.renderer.component';
 import { ServiceConfigurationModule } from '../configuration';
 import { NumberRendererComponent } from './renderer/number.renderer.component';
 import { DirectionRendererComponent } from './renderer/direction.renderer.component';
 import { MonitoringChartComponent } from './chart/chart.component';
-import { MonitoringTabFactory } from './monitoring-tab.factory';
 import { NODE2 } from '../shared/mapping/util';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { MappingServiceEventComponent } from './event/mapping-service-event.component';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { SharedModule } from '../shared';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { MonitoringNavigationFactory } from './monitoring-navigation.factory';
 
 @NgModule({
   declarations: [
@@ -68,7 +68,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse';
       path: `sag-ps-pkg-dynamic-mapping/${NODE2}/monitoring/serviceEvent`,
       component: MappingServiceEventComponent
     }),
-    hookTab(MonitoringTabFactory)
+    hookNavigator(MonitoringNavigationFactory),
   ]
 })
 export class MonitoringModule {}
diff --git a/dynamic-mapping-ui/src/shared/index.ts b/dynamic-mapping-ui/src/shared/index.ts
index 19c270ec0..d56eace59 100644
--- a/dynamic-mapping-ui/src/shared/index.ts
+++ b/dynamic-mapping-ui/src/shared/index.ts
@@ -17,7 +17,6 @@ export * from './misc/camel-case.pipe';
 export * from './misc/capitalize-case.pipe';
 export * from './misc/filter-json.pipe';
 export * from './misc/format-string.pipe';
-export * from './misc/mapping-tab.factory';
 export * from './misc/navigation.factory';
 export * from './misc/overview.guard';
 export * from './service/shared.model';
diff --git a/dynamic-mapping-ui/src/shared/misc/mapping-tab.factory.ts b/dynamic-mapping-ui/src/shared/misc/mapping-tab.factory.ts
deleted file mode 100644
index d591c8971..000000000
--- a/dynamic-mapping-ui/src/shared/misc/mapping-tab.factory.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
- * and/or its subsidiaries and/or its affiliates and/or their licensors.
- *
- * SPDX-License-Identifier: Apache-2.0
- *
- * Licensed 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.
- *
- * @authors Christof Strack
- */
-import { Injectable } from '@angular/core';
-import { TabFactory, Tab } from '@c8y/ngx-components';
-import { Router } from '@angular/router';
-import { SharedService } from '../service/shared.service';
-import { NODE1, NODE2, NODE3 } from '../mapping/util';
-@Injectable()
-export class MappingTabFactory implements TabFactory {
-  constructor(
-    public router: Router,
-    private sharedService: SharedService
-  ) { }
-
-  async get() {
-    // console.log('MappingTabFactory',this.router.url, this.router.url.match(/sag-ps-pkg-dynamic-mapping/g));
-    const feature = await this.sharedService.getFeatures();
-
-    const tabs: Tab[] = [];
-    if (this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node1/g)) {
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE1}/mappings/inbound`,
-        priority: 930,
-        label: 'Inbound mapping',
-        icon: 'swipe-right',
-        orientation: 'horizontal'
-      } as Tab);
-
-      // if (feature?.outputMappingEnabled) {
-      //   tabs.push({
-      //     path: `sag-ps-pkg-dynamic-mapping/${NODE1}/mappings/outbound`,
-      //     priority: 920,
-      //     label: 'Outbound mapping',
-      //     icon: 'swipe-left',
-      //     orientation: 'horizontal'
-      //   } as Tab);
-      //   tabs.push({
-      //     path: `sag-ps-pkg-dynamic-mapping/${NODE1}/mappings/subscriptionOutbound`,
-      //     priority: 915,
-      //     label: 'Subscription outbound mapping',
-      //     icon: 'mail',
-      //     orientation: 'horizontal'
-      //   } as Tab);
-      // }
-    } else if (this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node2/g)) {
-      tabs.push({
-        path: `sag-ps-pkg-dynamic-mapping/${NODE2}/testing`,
-        priority: 700,
-        label: 'Test device',
-        icon: 'reflector-bulb',
-        orientation: 'horizontal'
-      } as Tab);
-    }
-    //  else if (this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node3\/extension/g) || this.router.url.match(/sag-ps-pkg-dynamic-mapping\/node3\/serviceConfiguration/g)) {
-    //   tabs.push({
-    //     path: `sag-ps-pkg-dynamic-mapping/${NODE3}/connectorConfiguration`,
-    //     priority: 910,
-    //     label: 'Connector',
-    //     icon: 'connected',
-    //     orientation: 'horizontal'
-    //   } as Tab);
-    //   tabs.push({
-    //     path: `sag-ps-pkg-dynamic-mapping/${NODE3}/serviceConfiguration`,
-    //     priority: 500,
-    //     label: 'Service configuration',
-    //     icon: 'cog',
-    //     orientation: 'horizontal'
-    //   } as Tab);
-    //   tabs.push({
-    //     path: `sag-ps-pkg-dynamic-mapping/${NODE3}/extension`,
-    //     priority: 400,
-    //     label: 'Processor extension',
-    //     icon: 'extension',
-    //     orientation: 'horizontal'
-    //   } as Tab);
-    // }
-    return tabs;
-  }
-}
diff --git a/dynamic-mapping-ui/src/testing-device/grid/testing.component.html b/dynamic-mapping-ui/src/testing-device/grid/testing.component.html
index 2fbd5bbc3..636eb18c8 100644
--- a/dynamic-mapping-ui/src/testing-device/grid/testing.component.html
+++ b/dynamic-mapping-ui/src/testing-device/grid/testing.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-title>Monitoring</c8y-title>
+<c8y-title>Test device</c8y-title>
 
 <div class="card">
   <div class="card-block">
diff --git a/dynamic-mapping-ui/src/testing-device/test-navigation.factory.ts b/dynamic-mapping-ui/src/testing-device/test-navigation.factory.ts
new file mode 100644
index 000000000..b4ee6af20
--- /dev/null
+++ b/dynamic-mapping-ui/src/testing-device/test-navigation.factory.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+ * and/or its subsidiaries and/or its affiliates and/or their licensors.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed 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.
+ *
+ * @authors Christof Strack
+ */
+
+import { Injectable } from '@angular/core';
+import { ApplicationService } from '@c8y/client';
+import * as _ from 'lodash';
+import {
+  AlertService,
+  AppStateService,
+  gettext,
+  NavigatorNode,
+  NavigatorNodeFactory
+} from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+import { NODE2, SharedService } from '../shared';
+
+@Injectable()
+export class TestNavigationFactory implements NavigatorNodeFactory {
+  private static readonly APPLICATION_DYNAMIC_MAPPING_SERVICE =
+    'dynamic-mapping-service';
+
+  appName: string;
+  isStandaloneApp: boolean = false;
+  staticNodes = {
+    monitoringMappingNode: new NavigatorNode({
+      parent: gettext('Monitoring'),
+      label: gettext('Test device'),
+      icon: 'reflector-bulb',
+      path: `sag-ps-pkg-dynamic-mapping/${NODE2}/testing`,
+      priority: 500,
+      preventDuplicates: true
+    }),
+
+  } as const;
+
+  constructor(
+    private applicationService: ApplicationService,
+    private alertService: AlertService,
+    private sharedService: SharedService,
+    private appStateService: AppStateService,
+    public router: Router
+  ) {
+    this.appStateService.currentApplication.subscribe((cur) => {
+      this.isStandaloneApp =
+        _.has(cur?.manifest, 'isPackage') || _.has(cur?.manifest, 'blueprint');
+      this.appName = cur.name;
+    });
+  }
+
+  async get() {
+    const feature: any = await this.sharedService.getFeatures();
+    let navs;
+    let copyStaticNodesPlugin;
+
+    copyStaticNodesPlugin = _.clone(this.staticNodes);
+    if (!feature?.outputMappingEnabled) {
+      delete copyStaticNodesPlugin.mappingOutboundNode;
+      delete copyStaticNodesPlugin.subscriptionOutboundNode;
+    }
+    navs = Object.values(copyStaticNodesPlugin) as NavigatorNode[];
+
+    return this.applicationService
+      .isAvailable(TestNavigationFactory.APPLICATION_DYNAMIC_MAPPING_SERVICE)
+      .then((data) => {
+        if (!data.data || !feature) {
+          this.alertService.danger(
+            'Microservice:dynamic-mapping-service not subscribed. Please subscribe this service before using the mapping editor!'
+          );
+          console.error('dynamic-mapping-service microservice not subscribed!');
+          return [];
+        }
+        return navs;
+      });
+  }
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/testing-device/testing.module.ts b/dynamic-mapping-ui/src/testing-device/testing.module.ts
index c5678d7ad..f2721a8b1 100644
--- a/dynamic-mapping-ui/src/testing-device/testing.module.ts
+++ b/dynamic-mapping-ui/src/testing-device/testing.module.ts
@@ -20,10 +20,10 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CoreModule, hookRoute } from '@c8y/ngx-components';
+import { CoreModule, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { NODE2, SharedModule } from '../shared';
 import { TestingComponent } from './grid/testing.component';
-import { SharedModule } from '../shared';
-import { NODE2 } from '../shared/mapping/util';
+import { TestNavigationFactory } from './test-navigation.factory';
 
 @NgModule({
   declarations: [
@@ -35,7 +35,8 @@ import { NODE2 } from '../shared/mapping/util';
     hookRoute({
       path: `sag-ps-pkg-dynamic-mapping/${NODE2}/testing`,
       component: TestingComponent
-    })
+    }),
+    hookNavigator(TestNavigationFactory),
   ]
 })
-export class TestingModule {}
+export class TestingModule { }