From a1fac664f5b0fa1c8b78de3440e99ee68d34f512 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Fri, 29 May 2020 19:24:58 +0000
Subject: [PATCH] mgr/dashboard: Use ng-bootstrap for Dropdown

Fixes: https://tracker.ceph.com/issues/45758
Fixes: https://tracker.ceph.com/issues/45566

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../cypress/integration/block/images.po.ts    |  6 +-
 .../cypress/integration/page-helper.po.ts     | 10 +-
 .../dashboard/frontend/src/app/app.module.ts  |  3 -
 .../src/app/ceph/block/block.module.ts        |  2 -
 .../iscsi-target-details.component.ts         |  6 +-
 .../daemon-list/daemon-list.component.spec.ts |  9 +-
 .../image-list/image-list.component.spec.ts   |  2 -
 .../ceph/block/mirroring/mirroring.module.ts  |  2 -
 .../overview/overview.component.spec.ts       |  2 -
 .../pool-list/pool-list.component.spec.ts     |  2 -
 .../rbd-configuration-list.component.spec.ts  |  4 +-
 .../block/rbd-list/rbd-list.component.spec.ts |  2 -
 .../src/app/ceph/cluster/cluster.module.ts    |  2 -
 .../host-details.component.spec.ts            |  2 -
 .../cluster/hosts/hosts.component.spec.ts     |  2 -
 .../osd/osd-list/osd-list.component.spec.ts   |  4 +-
 .../silence-list.component.spec.ts            |  2 -
 .../frontend/src/app/ceph/pool/pool.module.ts |  2 -
 .../frontend/src/app/ceph/rgw/rgw.module.ts   |  2 -
 .../login-layout.component.spec.ts            |  2 -
 .../administration.component.html             | 30 +++---
 .../dashboard-help.component.html             | 41 ++++----
 .../identity/identity.component.html          | 49 ++++------
 .../app/core/navigation/navigation.module.ts  |  4 +-
 .../navigation/navigation.component.scss      | 10 +-
 .../shared/components/components.module.ts    |  4 +-
 .../language-selector.component.html          | 23 +++--
 .../language-selector.component.ts            |  5 +-
 .../app/shared/datatable/datatable.module.ts  |  4 +-
 .../table-actions.component.html              | 60 ++++++------
 .../table-key-value.component.spec.ts         |  4 +-
 .../datatable/table/table.component.html      | 93 +++++++++----------
 .../datatable/table/table.component.scss      | 19 ----
 .../datatable/table/table.component.spec.ts   | 10 +-
 .../shared/datatable/table/table.component.ts |  8 +-
 .../mgr/dashboard/frontend/src/styles.scss    |  4 +
 36 files changed, 178 insertions(+), 258 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
index c43b838e3f0..f744920c3cd 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
@@ -51,7 +51,7 @@ export class ImagesPageHelper extends PageHelper {
 
     // click on the drop down and selects the move to trash option
     cy.get('.table-actions button.dropdown-toggle').first().click();
-    cy.get('li.move-to-trash').click();
+    cy.get('button.move-to-trash').click();
 
     cy.contains('button', 'Move Image').should('be.visible').click();
 
@@ -71,12 +71,12 @@ export class ImagesPageHelper extends PageHelper {
     cy.contains('button', 'Restore').click();
 
     // wait for pop-up to be visible (checks for title of pop-up)
-    cy.get('#name').should('be.visible');
+    cy.get('cd-modal #name').should('be.visible');
 
     // If a new name for the image is passed, it changes the name of the image
     if (newName !== undefined) {
       // click name box and send new name
-      cy.get('#name').clear().type(newName);
+      cy.get('cd-modal #name').clear().type(newName);
     }
 
     cy.contains('button', 'Restore Image').click();
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
index 2aaf901bd53..bc0bd1435c1 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
@@ -214,10 +214,10 @@ export abstract class PageHelper {
   filterTable(name: string, option: string) {
     this.waitDataTableToLoad();
 
-    cy.get('.tc_filter_name > a').click();
+    cy.get('.tc_filter_name > button').click();
     cy.contains(`.tc_filter_name .dropdown-item`, name).click();
 
-    cy.get('.tc_filter_option > a').click();
+    cy.get('.tc_filter_option > button').click();
     cy.contains(`.tc_filter_option .dropdown-item`, option).click();
   }
 
@@ -245,11 +245,11 @@ export abstract class PageHelper {
 
     // Clicks on table Delete button
     cy.get('.table-actions button.dropdown-toggle').first().click(); // open submenu
-    cy.get('li.delete a').click(); // click on "delete" menu item
+    cy.get('button.delete').click(); // click on "delete" menu item
 
     // Confirms deletion
-    cy.get('.custom-control-label').click();
-    cy.contains('button', 'Delete').click();
+    cy.get('cd-modal .custom-control-label').click();
+    cy.contains('cd-modal button', 'Delete').click();
 
     // Wait for modal to close
     cy.get('cd-modal').should('not.exist');
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts
index 350ba718f7c..fb930c95a88 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts
@@ -12,8 +12,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { JwtModule } from '@auth0/angular-jwt';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -45,7 +43,6 @@ export function jwtTokenGetter() {
     CoreModule,
     SharedModule,
     CephModule,
-    BsDropdownModule.forRoot(),
     JwtModule.forRoot({
       config: {
         tokenGetter: jwtTokenGetter
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index c1357864d5d..4aa8039ddea 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -7,7 +7,6 @@ import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
@@ -59,7 +58,6 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     FormsModule,
     ReactiveFormsModule,
     NgbNavModule,
-    BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     NgbTooltipModule,
     ModalModule.forRoot(),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
index a4b883fcb6c..e7b3b96c9c5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
@@ -280,7 +280,7 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
       const tempData = this.metadata[node.data.cdId] || {};
 
       if (node.data.cdId === 'root') {
-        this.detailTable?.toggleColumn({ target: { name: 'default', checked: true } });
+        this.detailTable?.toggleColumn({ prop: 'default', isHidden: true });
         this.data = _.map(this.settings.target_default_controls, (value, key) => {
           value = this.format(value);
           return {
@@ -300,7 +300,7 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
           });
         }
       } else if (node.data.cdId.toString().startsWith('disk_')) {
-        this.detailTable?.toggleColumn({ target: { name: 'default', checked: true } });
+        this.detailTable?.toggleColumn({ prop: 'default', isHidden: true });
         this.data = _.map(this.settings.disk_default_controls[tempData.backstore], (value, key) => {
           value = this.format(value);
           return {
@@ -326,7 +326,7 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
           }
         });
       } else {
-        this.detailTable?.toggleColumn({ target: { name: 'default', checked: false } });
+        this.detailTable?.toggleColumn({ prop: 'default', isHidden: false });
         this.data = _.map(tempData, (value, key) => {
           return {
             displayName: key,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
index 5bfd945963a..b2a511bf289 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.spec.ts
@@ -2,8 +2,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
 import { MirrorHealthColorPipe } from '../mirror-health-color.pipe';
@@ -15,12 +13,7 @@ describe('DaemonListComponent', () => {
 
   configureTestBed({
     declarations: [DaemonListComponent, MirrorHealthColorPipe],
-    imports: [
-      BrowserAnimationsModule,
-      SharedModule,
-      BsDropdownModule.forRoot(),
-      HttpClientTestingModule
-    ],
+    imports: [BrowserAnimationsModule, SharedModule, HttpClientTestingModule],
     providers: i18nProviders
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
index 207d148682f..48483693be0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -19,7 +18,6 @@ describe('ImageListComponent', () => {
     imports: [
       BrowserAnimationsModule,
       SharedModule,
-      BsDropdownModule.forRoot(),
       NgbNavModule,
       NgbProgressbarModule,
       HttpClientTestingModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
index 917de076da0..b41fe55ccd1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 
 import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { SharedModule } from '../../../shared/shared.module';
@@ -38,7 +37,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     FormsModule,
     ReactiveFormsModule,
     NgbProgressbarModule,
-    BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
     NgBootstrapFormValidationModule
   ],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
index 128a8c81195..0ef017448cd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
@@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
@@ -30,7 +29,6 @@ describe('OverviewComponent', () => {
     imports: [
       BrowserAnimationsModule,
       SharedModule,
-      BsDropdownModule.forRoot(),
       NgbNavModule,
       NgbProgressbarModule,
       HttpClientTestingModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
index 5978425b820..e5a8f36666d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
@@ -20,7 +19,6 @@ describe('PoolListComponent', () => {
     imports: [
       BrowserAnimationsModule,
       SharedModule,
-      BsDropdownModule.forRoot(),
       HttpClientTestingModule,
       RouterTestingModule,
       ToastrModule.forRoot()
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
index b349282bb8a..7bb8f2e7420 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
@@ -3,9 +3,9 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ChartsModule } from 'ng2-charts';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../../shared/components/components.module';
@@ -27,7 +27,7 @@ describe('RbdConfigurationListComponent', () => {
       NgxDatatableModule,
       RouterTestingModule,
       ComponentsModule,
-      BsDropdownModule.forRoot(),
+      NgbDropdownModule,
       ChartsModule,
       PipesModule
     ],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
index 38b6061fad1..b2cbe21a8ae 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
@@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { BehaviorSubject, of } from 'rxjs';
@@ -43,7 +42,6 @@ describe('RbdListComponent', () => {
     imports: [
       BrowserAnimationsModule,
       SharedModule,
-      BsDropdownModule.forRoot(),
       NgbNavModule,
       ModalModule.forRoot(),
       NgbTooltipModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index f597a57ace7..930db911083 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -7,7 +7,6 @@ import { NgbNavModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstra
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 
@@ -72,7 +71,6 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
-    BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     ModalModule.forRoot(),
     NgbTooltipModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts
index 60f82860549..a70ccd0b802 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts
@@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 
 import {
@@ -27,7 +26,6 @@ describe('HostDetailsComponent', () => {
     imports: [
       BrowserAnimationsModule,
       HttpClientTestingModule,
-      BsDropdownModule.forRoot(),
       NgBootstrapFormValidationModule.forRoot(),
       RouterTestingModule,
       CephModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
index 9fff78b9693..cb103afab6d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
@@ -3,7 +3,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
@@ -34,7 +33,6 @@ describe('HostsComponent', () => {
       CephSharedModule,
       SharedModule,
       HttpClientTestingModule,
-      BsDropdownModule.forRoot(),
       RouterTestingModule,
       ToastrModule.forRoot(),
       CephModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index b03e28a76c7..ea0db7a3a60 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -5,6 +5,7 @@ import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import * as _ from 'lodash';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
@@ -97,6 +98,7 @@ describe('OsdListComponent', () => {
       ToastrModule.forRoot(),
       CephModule,
       ReactiveFormsModule,
+      NgbDropdownModule,
       RouterTestingModule,
       CoreModule,
       RouterTestingModule
@@ -360,7 +362,7 @@ describe('OsdListComponent', () => {
       const tableActionElement = fixture.debugElement.query(By.directive(TableActionsComponent));
       const toClassName = TestBed.inject(TableActionsComponent).toClassName;
       const getActionClasses = (action: CdTableAction) =>
-        tableActionElement.query(By.css(`.${toClassName(action.name)} .dropdown-item`)).classes;
+        tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action.name)}`)).classes;
 
       component.tableActions.forEach((action) => {
         if (action.name === 'Create') {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.spec.ts
index e22347a8b1b..088202764fe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-list/silence-list.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
@@ -30,7 +29,6 @@ describe('SilenceListComponent', () => {
     imports: [
       BrowserAnimationsModule,
       SharedModule,
-      BsDropdownModule.forRoot(),
       ModalModule.forRoot(),
       ToastrModule.forRoot(),
       RouterTestingModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
index 4a936bf6ee8..0b81aafee05 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
@@ -5,7 +5,6 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { SharedModule } from '../../shared/shared.module';
@@ -25,7 +24,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     SharedModule,
     RouterModule,
     ReactiveFormsModule,
-    BsDropdownModule,
     NgbTooltipModule,
     BlockModule,
     NgBootstrapFormValidationModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 97066113952..00557b04d08 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -5,7 +5,6 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
@@ -42,7 +41,6 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     FormsModule,
     ReactiveFormsModule,
     PerformanceCounterModule,
-    BsDropdownModule.forRoot(),
     NgbNavModule,
     ModalModule.forRoot(),
     RouterModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts
index 46a744f21a7..bd8a5ec1db2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts
@@ -3,7 +3,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { RouterTestingModule } from '@angular/router/testing';
 import { SharedModule } from '../../../shared/shared.module';
@@ -18,7 +17,6 @@ describe('LoginLayoutComponent', () => {
       declarations: [LoginLayoutComponent],
       imports: [
         BrowserAnimationsModule,
-        BsDropdownModule.forRoot(),
         BsDatepickerModule.forRoot(),
         HttpClientTestingModule,
         RouterTestingModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
index 52d045ca645..fa4b38d167a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@@ -1,7 +1,7 @@
-<div dropdown
-     class="btn-group"
+<div ngbDropdown
+     placement="bottom-right"
      *ngIf="userPermission.read">
-  <a dropdownToggle
+  <a ngbDropdownToggle
      class="dropdown-toggle"
      i18n-title
      title="Dashboard Settings">
@@ -9,18 +9,14 @@
     <span i18n
           class="d-md-none">Dashboard Settings</span>
   </a>
-  <ul *dropdownMenu
-      class="dropdown-menu dropdown-menu-right"
-      role="menu">
-    <li *ngIf="userPermission.read">
-      <a i18n
-         class="dropdown-item"
-         routerLink="/user-management">User management</a>
-    </li>
-    <li *ngIf="configOptPermission.read">
-      <a i18n
-         class="dropdown-item"
-         routerLink="/telemetry">Telemetry configuration</a>
-    </li>
-  </ul>
+  <div ngbDropdownMenu>
+    <button ngbDropdownItem
+            *ngIf="userPermission.read"
+            routerLink="/user-management"
+            i18n>User management</button>
+    <button ngbDropdownItem
+            *ngIf="configOptPermission.read"
+            routerLink="/telemetry"
+            i18n>Telemetry configuration</button>
+  </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
index 122bcfd5943..7d092ccdd7d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -6,35 +6,26 @@
          name="token" />
 </form>
 
-<div class="btn-group"
-     dropdown>
-  <a dropdownToggle
-     class="dropdown-toggle"
+<div ngbDropdown
+     placement="bottom-right">
+  <a ngbDropdownToggle
      i18n-title
      title="Help">
     <i [ngClass]="[icons.questionCircle]"></i>
     <span i18n
           class="d-md-none">Help</span>
   </a>
-  <ul *dropdownMenu
-      class="dropdown-menu dropdown-menu-right"
-      role="menu">
-    <li>
-      <a i18n
-         class="dropdown-item"
-         [ngClass]="{'disabled': !docsUrl}"
-         href="{{ docsUrl }}"
-         target="_blank">Documentation</a>
-    </li>
-    <li>
-      <a i18n
-         class="dropdown-item"
-         (click)="goToApiDocs()">API</a>
-    </li>
-    <li>
-      <a i18n
-         class="dropdown-item"
-         (click)="openAboutModal()">About</a>
-    </li>
-  </ul>
+  <div ngbDropdownMenu>
+    <a ngbDropdownItem
+       [ngClass]="{'disabled': !docsUrl}"
+       href="{{ docsUrl }}"
+       target="_blank"
+       i18n>Documentation</a>
+    <button ngbDropdownItem
+            (click)="goToApiDocs()"
+            i18n>API</button>
+    <button ngbDropdownItem
+            (click)="openAboutModal()"
+            i18n>About</button>
+  </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
index 629a635e811..bf0f22fbb4a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
@@ -1,38 +1,27 @@
-<div dropdown
-     class="btn-group">
-  <a dropdownToggle
-     class="dropdown-toggle"
+<div ngbDropdown
+     placement="bottom-right">
+  <a ngbDropdownToggle
      i18n-title
      title="Logged in user">
     <i [ngClass]="[icons.user]"></i>
     <span i18n
           class="d-md-none">Logged in user</span>
   </a>
-  <ul *dropdownMenu
-      class="dropdown-menu dropdown-menu-right"
-      role="menu">
-    <li class="disabled"
-        role="menuitem">
-      <a i18n
-         class="dropdown-item disabled"
-         href="#">Signed in as
-      <strong>{{ username }}</strong></a>
-    </li>
+  <div ngbDropdownMenu>
+    <button ngbDropdownItem
+            disabled
+            i18n>Signed in as <strong>{{ username }}</strong></button>
     <li class="dropdown-divider"></li>
-    <li *ngIf="!sso"
-        role="menuitem">
-      <a class="dropdown-item"
-         routerLink="/user-profile/edit">
-        <i [ngClass]="[icons.lock]"></i>
-        <span i18n>Change password</span>
-      </a>
-    </li>
-    <li role="menuitem">
-      <a class="dropdown-item"
-         (click)="logout()">
-        <i [ngClass]="[icons.signOut]"></i>
-        <span i18n>Sign out</span>
-      </a>
-    </li>
-  </ul>
+    <button ngbDropdownItem
+            *ngIf="!sso"
+            routerLink="/user-profile/edit">
+      <i [ngClass]="[icons.lock]"></i>
+      <span i18n>Change password</span>
+    </button>
+    <button ngbDropdownItem
+            (click)="logout()">
+      <i [ngClass]="[icons.signOut]"></i>
+      <span i18n>Sign out</span>
+    </button>
+  </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index bee03ba03a4..ba356218350 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
 import { AppRoutingModule } from '../../app-routing.module';
@@ -23,7 +23,7 @@ import { NotificationsComponent } from './notifications/notifications.component'
     CommonModule,
     AuthModule,
     CollapseModule.forRoot(),
-    BsDropdownModule.forRoot(),
+    NgbDropdownModule,
     AppRoutingModule,
     SharedModule,
     SimplebarAngularModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index c3c0f942f6d..3075f452c7a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -55,7 +55,7 @@
     }
   }
 
-  .navbar-nav > li > .cd-navbar > [dropdown] > a,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
     color: $color-nav-links;
@@ -71,16 +71,16 @@
     color: $color-nav-links;
   }
 
-  .navbar-nav > li > .cd-navbar > [dropdown] > a:hover,
-  .navbar-nav > li > .cd-navbar > [dropdown].open > a,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a,
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
     background-color: $color-nav-links-hover;
   }
 
-  .navbar-nav > .open > .cd-navbar > [dropdown] > a,
-  .navbar-nav > .open > .cd-navbar > [dropdown] > a:hover,
+  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
+  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover,
   .navbar-nav > .open > .cd-navbar > a,
   .navbar-nav > .open > .cd-navbar > a:focus,
   .navbar-nav > .open > .cd-navbar > a:hover,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 2368cb1e231..d555e08a51c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 
 import {
   NgbAlertModule,
+  NgbDropdownModule,
   NgbPopoverModule,
   NgbProgressbarModule,
   NgbTooltipModule
@@ -12,7 +13,6 @@ import {
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { ChartsModule } from 'ng2-charts';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
@@ -55,7 +55,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     PipesModule,
     ModalModule.forRoot(),
     DirectivesModule,
-    BsDropdownModule,
+    NgbDropdownModule,
     NgBootstrapFormValidationModule,
     ClickOutsideModule,
     SimplebarAngularModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
index 8b00718bf4f..96084a40de5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
@@ -1,20 +1,19 @@
-<div dropdown
-     class="btn-group"
+<div ngbDropdown
+     placement="bottom-right"
      *ngIf="isDropdown">
-  <a dropdownToggle
-     class="dropdown-toggle"
-     data-toggle="dropdown"
+  <a ngbDropdownToggle
      i18n-title
      title="Select a Language">
     {{ supportedLanguages[selectedLanguage] }}
   </a>
-  <ul *dropdownMenu
-      class="dropdown-menu dropdown-menu-right">
-    <li *ngFor="let lang of supportedLanguages | keyvalue">
-      <a class="dropdown-item"
-         (click)="changeLanguage(lang.key)">{{ lang.value }}</a>
-    </li>
-  </ul>
+  <div ngbDropdownMenu>
+    <ng-container *ngFor="let lang of supportedLanguages | keyvalue">
+      <button ngbDropdownItem
+              (click)="changeLanguage(lang.key)">
+        {{ lang.value }}
+      </button>
+    </ng-container>
+  </div>
 </div>
 
 <select *ngIf="!isDropdown"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
index 966f9661b95..9ed9cc05de2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
@@ -16,17 +16,18 @@ export class LanguageSelectorComponent implements OnInit {
   @Input()
   isDropdown = true;
 
-  supportedLanguages: Record<string, any> = SupportedLanguages;
+  supportedLanguages: Record<string, any> = {};
   selectedLanguage: string;
 
   constructor(private localeService: BsLocaleService, private languageService: LanguageService) {}
 
   ngOnInit() {
     this.selectedLanguage = this.languageService.getLocale();
+
     this.defineUsedLanguage();
 
     this.languageService.getLanguages().subscribe((langs) => {
-      this.supportedLanguages = _.pick(this.supportedLanguages, langs) as Object;
+      this.supportedLanguages = _.pick(SupportedLanguages, langs) as Object;
     });
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
index 479f6cabc93..26aee6fce37 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { ComponentsModule } from '../components/components.module';
 import { PipesModule } from '../pipes/pipes.module';
@@ -17,7 +17,7 @@ import { TableComponent } from './table/table.component';
     CommonModule,
     NgxDatatableModule,
     FormsModule,
-    BsDropdownModule.forRoot(),
+    NgbDropdownModule,
     PipesModule,
     ComponentsModule,
     RouterModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 1f20fc29f5a..68ae24696a5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -1,5 +1,4 @@
-<div class="btn-group"
-     dropdown>
+<div class="btn-group">
   <ng-container *ngIf="getCurrentButton() as action">
     <button type="button"
             class="btn btn-{{btnColor}}"
@@ -7,33 +6,36 @@
             (click)="useClickAction(action)"
             [routerLink]="useRouterLink(action)"
             [preserveFragment]="action.preserveFragment ? '' : null">
-      <i [ngClass]="[action.icon]"></i><span>{{ action.name }}</span>
+
+      <i [ngClass]="[action.icon]"></i>
+      <span>{{ action.name }}</span>
     </button>
   </ng-container>
-  <button type="button"
-          dropdownToggle
-          *ngIf="showDropDownActions()"
-          class="btn btn-{{btnColor}} dropdown-toggle dropdown-toggle-split">
-    <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
-    <span *ngIf="!dropDownOnly"
-          class="sr-only"></span>
-  </button>
-  <ul *dropdownMenu
-      class="dropdown-menu"
-      role="menu">
-    <ng-container *ngFor="let action of dropDownActions">
-      <li role="menuitem"
-          class="{{ toClassName(action['name']) }}"
-          data-toggle="tooltip"
-          title="{{ useDisableDesc(action) }}">
-        <a class="dropdown-item"
-           (click)="useClickAction(action)"
-           [routerLink]="useRouterLink(action)"
-           [preserveFragment]="action.preserveFragment ? '' : null"
-           [ngClass]="{'disabled': disableSelectionAction(action)}">
-          <i [ngClass]="[action.icon]"></i><span>{{ action.name }}</span>
-        </a>
-      </li>
-    </ng-container>
-  </ul>
+  <div class="btn-group"
+       ngbDropdown
+       placement="bottom-right"
+       role="group"
+       aria-label="Button group with nested dropdown">
+    <button class="btn btn-{{btnColor}} dropdown-toggle-split"
+            *ngIf="showDropDownActions()"
+            ngbDropdownToggle>
+      <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
+      <span *ngIf="!dropDownOnly"
+            class="sr-only"></span>
+    </button>
+    <div class="dropdown-menu"
+         ngbDropdownMenu>
+      <ng-container *ngFor="let action of dropDownActions">
+        <button ngbDropdownItem
+                class="{{ toClassName(action['name']) }}"
+                (click)="useClickAction(action)"
+                [routerLink]="useRouterLink(action)"
+                [preserveFragment]="action.preserveFragment ? '' : null"
+                [disabled]="disableSelectionAction(action)">
+          <i [ngClass]="[action.icon]"></i>
+          <span>{{ action.name }}</span>
+        </button>
+      </ng-container>
+    </div>
+  </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index c25cb54404b..d69d6298ecd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -2,8 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../components/components.module';
@@ -25,7 +25,7 @@ describe('TableKeyValueComponent', () => {
       NgxDatatableModule,
       ComponentsModule,
       RouterTestingModule,
-      BsDropdownModule.forRoot(),
+      NgbDropdownModule,
       PipesModule
     ]
   });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index c3ac07f1512..95bb3ecf741 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -25,46 +25,40 @@
     <!-- column filters -->
     <div *ngIf="columnFilters.length !== 0"
          class="btn-group widget-toolbar">
-      <div dropdown
-           class="btn-group tc_filter_name">
-        <a dropdownToggle
-           class="btn btn-light dropdown-toggle"
-           data-toggle="dropdown">
+      <div ngbDropdown
+           placement="bottom-right"
+           class="tc_filter_name">
+        <button ngbDropdownToggle
+                class="btn btn-light">
           <i [ngClass]="[icons.large, icons.filter]"></i>
           {{ selectedFilter.column.name }}
-        </a>
-        <ul *dropdownMenu
-            class="dropdown-menu px-1"
-            role="menu">
-          <li *ngFor="let filter of columnFilters"
-              role="menuitem">
-            <a href=""
-               class="dropdown-item"
-               (click)="onSelectFilter(filter); false">{{ filter.column.name }}</a>
-          </li>
-        </ul>
+        </button>
+        <div ngbDropdownMenu>
+          <ng-container *ngFor="let filter of columnFilters">
+            <button ngbDropdownItem
+                    (click)="onSelectFilter(filter); false">{{ filter.column.name }}</button>
+          </ng-container>
+        </div>
       </div>
-      <div dropdown
-           class="btn-group tc_filter_option">
-        <a dropdownToggle
-           class="btn btn-light dropdown-toggle"
-           [class.disabled]="selectedFilter.options.length === 0"
-           data-toggle="dropdown">
-           {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
-        </a>
-        <ul *dropdownMenu
-            class="dropdown-menu px-1"
-            role="menu">
-          <li *ngFor="let option of selectedFilter.options"
-              role="menuitem">
-            <a href=""
-               class="dropdown-item"
-               (click)="onChangeFilter(selectedFilter, option); false">{{ option.formatted }}
+
+      <div ngbDropdown
+           placement="bottom-right"
+           class="tc_filter_option">
+        <button ngbDropdownToggle
+                class="btn btn-light"
+                [class.disabled]="selectedFilter.options.length === 0">
+          {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
+        </button>
+        <div ngbDropdownMenu>
+          <ng-container *ngFor="let option of selectedFilter.options">
+            <button ngbDropdownItem
+                    (click)="onChangeFilter(selectedFilter, option); false">
+              {{ option.formatted }}
               <i *ngIf="selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)"
                  [ngClass]="[icons.check]"></i>
-            </a>
-          </li>
-        </ul>
+            </button>
+          </ng-container>
+        </div>
       </div>
     </div>
     <!-- end column filters -->
@@ -74,7 +68,7 @@
          *ngIf="searchField">
       <span class="input-group-prepend">
         <span class="input-group-text">
-        <i [ngClass]="[icons.search]"></i>
+          <i [ngClass]="[icons.search]"></i>
         </span>
       </span>
       <input class="form-control"
@@ -106,31 +100,30 @@
 
     <!-- show hide columns -->
     <div class="widget-toolbar">
-      <div dropdown
-           [autoClose]="false"
-           class="dropdown tc_menuitem tc_menuitem_cluster">
-        <a dropdownToggle
-           class="btn btn-light dropdown-toggle tc_columnBtn"
-           data-toggle="dropdown">
+      <div ngbDropdown
+           autoClose="outside"
+           class="tc_menuitem">
+        <button ngbDropdownToggle
+                class="btn btn-light tc_columnBtn">
           <i [ngClass]="[icons.large, icons.table]"></i>
-        </a>
-        <ul *dropdownMenu
-            class="dropdown-menu px-3">
+        </button>
+        <div ngbDropdownMenu>
           <ng-container *ngFor="let column of columns">
-            <li *ngIf="column.name !== ''" >
-              <div class="custom-control custom-checkbox">
+            <button ngbDropdownItem
+                    *ngIf="column.name !== ''"
+                    (click)="toggleColumn(column); false;">
+              <div class="custom-control custom-checkbox py-0">
                 <input class="custom-control-input"
                        type="checkbox"
-                       (change)="toggleColumn($event)"
                        [name]="column.prop"
                        [id]="column.prop"
                        [checked]="!column.isHidden">
                 <label class="custom-control-label"
                        [for]="column.prop">{{ column.name }}</label>
               </div>
-            </li>
+            </button>
           </ng-container>
-        </ul>
+        </div>
       </div>
     </div>
     <!-- end show hide columns -->
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 4a5f9ae8a62..31209f50532 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -28,25 +28,6 @@
     }
   }
 
-  .dropdown-menu {
-    white-space: nowrap;
-    & li {
-      cursor: default;
-      & label {
-        width: 100%;
-        margin-bottom: 0;
-        padding-left: 0;
-        padding-right: 0;
-        cursor: pointer;
-        &:hover {
-          background-color: $color-table-dropdown-bg;
-        }
-        & input {
-          cursor: pointer;
-        }
-      }
-    }
-  }
   .dataTables_length > input {
     line-height: 25px;
     text-align: right;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index d5f598777fd..bfb53a6cb2f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -3,9 +3,9 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import * as _ from 'lodash';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../components/components.module';
@@ -42,7 +42,7 @@ describe('TableComponent', () => {
       FormsModule,
       ComponentsModule,
       RouterTestingModule,
-      BsDropdownModule.forRoot(),
+      NgbDropdownModule,
       PipesModule
     ]
   });
@@ -436,10 +436,8 @@ describe('TableComponent', () => {
   describe('after ngInit', () => {
     const toggleColumn = (prop: string, checked: boolean) => {
       component.toggleColumn({
-        target: {
-          name: prop,
-          checked: checked
-        }
+        prop: prop,
+        isHidden: checked
       });
     };
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 35b750d029a..b08d7a489f2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -693,11 +693,11 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     this.updateSelection.emit(_.clone(this.selection));
   }
 
-  toggleColumn($event: any) {
-    const prop: TableColumnProp = $event.target.name;
-    const hide = !$event.target.checked;
+  toggleColumn(column: CdTableColumn) {
+    const prop: TableColumnProp = column.prop;
+    const hide = !column.isHidden;
     if (hide && this.tableColumns.length === 1) {
-      $event.target.checked = true;
+      column.isHidden = true;
       return;
     }
     _.find(this.localColumns, (c: CdTableColumn) => c.prop === prop).isHidden = hide;
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index ab63ed5ae57..d89ed504a54 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -168,6 +168,10 @@ option {
 .dropdown-menu {
   min-width: 50px;
   z-index: 999999;
+
+  button.dropdown-item:focus {
+    outline: none;
+  }
 }
 .dropdown-menu > li > a {
   color: $color-dropdown-menu;
-- 
2.39.5