How to remove or disable the components under left drawer(side menu) in custom cockpit application

,
4

Hi Mohan,

you can keep the modules and instead just filter out the nodes in the navigation.
Note that a users who know the right URL may still be able to access these views.

You can override the NavigatorService with a custom implementation, by defining the following service:

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { AppStateService, NavigatorService, Permissions } from '@c8y/ngx-components';
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class CustomNaivgationService extends NavigatorService {

    constructor(rootInjector: Injector, router: Router, appState: AppStateService, permissions: Permissions) {
        super(rootInjector, router);
        this.items$ = combineLatest([this.items$, appState.currentUser]).pipe(map(([items, user]) => {
            if (!user) {
                return [];
            }

            if (permissions.hasRole('ROLE_TENANT_ADMIN')) {
                return items;
            }

            const filteredItems = items.filter(item => item.label !== 'Data explorer');
            return filteredItems;
        }))
    }

}

And provide it in your AppModule in the providers array:

@NgModule({
  imports: [
    // Upgrade module must be the first
    UpgradeModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(),
    NgRouterModule.forRoot([...UPGRADE_ROUTES], { enableTracing: false, useHash: true }),
    CoreModule.forRoot(),
    ReportsModule,
    NgUpgradeModule,
    AssetsNavigatorModule,
    DashboardUpgradeModule,
    CockpitDashboardModule,
    SensorPhoneModule,
    ReportDashboardModule,
    BinaryFileDownloadModule,
    SearchModule,
    SubAssetsModule,
    ChildDevicesModule,
    CockpitConfigModule,
    DatapointLibraryModule.forRoot(),
    WidgetsModule,
  ],
  providers: [
    {
      provide: NavigatorService,
      useClass: CustomNaivgationService
    }
  ]
})
export class AppModule extends HybridAppModule {
  constructor(protected upgrade: NgUpgradeModule) {
    super();
  }
}

This sample CustomNaivgationService filters out the Data explorer navigator node in case the user does not have the ROLE_TENANT_ADMIN permission.

Regards,
Tristan

1 Like