mgr/dashboard: Use ng-bootstrap for Popover

Fixes: https://tracker.ceph.com/issues/45753
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts
index 31d1698ba1d96150ec62993c70cf6a8685b17b1e..138bcd72d2f60934b590e41345c508e160252ff2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts
@@ -52,7 +52,7 @@ export class PoolPageHelper extends PageHelper {
       return;
     }
     cy.get('.float-left.mr-2.select-menu-edit').click();
-    cy.get('.popover-content.popover-body').should('be.visible');
+    cy.get('.popover-body').should('be.visible');
     apps.forEach((app) => cy.get('.select-menu-item-content').contains(app).click());
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
index 6960bb3b225b6af4d97c11a4dafe55bf6cebf3de..20bbac20fba00faf0a491ba524fe5a52213559d8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
 
+import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+
 @Component({
   selector: 'cd-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor() {}
+  constructor(config: NgbPopoverConfig) {
+    config.autoClose = 'outside';
+    config.container = 'body';
+    config.placement = 'bottom';
+  }
 }

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 b9837ee1cfe005b6e77e2dea08b562876921f92c..d784ed12e4c4eb708f2d401ee7ec0ba928af165c 100644 (file)
--- 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
@@ -7,7 +7,6 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ChartsModule } from 'ng2-charts';
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { TableComponent } from '../../../shared/datatable/table/table.component';
@@ -33,8 +32,7 @@ describe('RbdConfigurationListComponent', () => {
       AlertModule,
       BsDropdownModule.forRoot(),
       ChartsModule,
-      PipesModule,
-      PopoverModule
+      PipesModule
     ],
     declarations: [RbdConfigurationListComponent, TableComponent],
     providers: [FormatterService, RbdConfigurationService, i18nProviders]

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
index 60134defb3342da0507998e22b4193b02a41e238..7b746b10d4fe6b7937dbc3afea932891912a08c6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
@@ -2,9 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { ChartsModule } from 'ng2-charts';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 
 import { SharedModule } from '../../shared/shared.module';
 import { CephSharedModule } from '../shared/ceph-shared.module';
@@ -26,7 +25,7 @@ import { OsdSummaryPipe } from './osd-summary.pipe';
     SharedModule,
     ChartsModule,
     RouterModule,
-    PopoverModule.forRoot()
+    NgbPopoverModule
   ],
 
   declarations: [

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index 84ce11fb23cbdf1651f6e313d47cd119ff5508ed..3d90eb1cc5f6196373434f412d7e3924fba839e1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -27,13 +27,8 @@
         </ng-template>
         <div class="info-card-content-clickable"
              [ngStyle]="healthData.health.status | healthColor"
-             [popover]="healthChecks"
-             triggers=""
-             #healthChecksTarget="bs-popover"
-             placement="bottom"
-             container="body"
-             containerClass="info-card-popover-cluster-status"
-             (click)="healthChecksTarget.toggle()">
+             [ngbPopover]="healthChecks"
+             popoverClass="info-card-popover-cluster-status">
           {{ healthData.health.status }}
         </div>
       </ng-container>
@@ -117,7 +112,8 @@
       {{ healthData.iscsi_daemons.up + healthData.iscsi_daemons.down }} total
       <span class="card-text-line-break"></span>
       {{ healthData.iscsi_daemons.up }} up,
-      <span [ngClass]="{'card-text-error': healthData.iscsi_daemons.down > 0}">{{ healthData.iscsi_daemons.down }} down</span>
+      <span [ngClass]="{'card-text-error': healthData.iscsi_daemons.down > 0}">{{ healthData.iscsi_daemons.down }}
+        down</span>
     </cd-info-card>
   </cd-info-group>
 
@@ -221,7 +217,6 @@
                   i18n-cardTitle
                   class="cd-capacity-card order-md-5 order-lg-3 order-xl-5"
                   contentClass="content-chart"
-                  (click)="pgStatusTarget.toggle()"
                   *ngIf="healthData.pg_info">
       <ng-template #pgStatus>
         <ng-container *ngTemplateOutlet="logsLink"></ng-container>
@@ -232,10 +227,7 @@
         </ul>
       </ng-template>
       <div class="pg-status-popover-wrapper">
-        <div [popover]="pgStatus"
-             triggers=""
-             #pgStatusTarget="bs-popover"
-             placement="bottom">
+        <div [ngbPopover]="pgStatus">
           <cd-health-pie [data]="healthData"
                          [config]="pgStatusChartConfig"
                          (prepareFn)="preparePgStatus($event[0], $event[1])">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index 8d2f928220c7a3bf145896fe6238b4857d5c7908..6728b41d3a184d26271baf8f76689616f0c28467 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import * as _ from 'lodash';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { of } from 'rxjs';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -49,7 +48,7 @@ describe('HealthComponent', () => {
   let fakeFeatureTogglesService: jasmine.Spy;
 
   configureTestBed({
-    imports: [SharedModule, HttpClientTestingModule, PopoverModule.forRoot()],
+    imports: [SharedModule, HttpClientTestingModule],
     declarations: [
       HealthComponent,
       HealthPieComponent,

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 566b33c59960d3f0eebc644e86e1477600ae9108..6e15ba7ac9338b41f9417e5a4388b4ef0dea9280 100644 (file)
--- 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
@@ -6,7 +6,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
@@ -24,7 +23,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     CephSharedModule,
     CommonModule,
     NgbNavModule,
-    PopoverModule.forRoot(),
     SharedModule,
     RouterModule,
     ReactiveFormsModule,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
index a4244149c4c5af913492f5eea3fd3cd8d24ddb60..6c6b0ac5b94553404366a58e647b084e7d0ed00e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
@@ -7,7 +7,6 @@ import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { SharedModule } from '../../shared/shared.module';
@@ -27,7 +26,6 @@ import { UserTabsComponent } from './user-tabs/user-tabs.component';
     ButtonsModule.forRoot(),
     CommonModule,
     FormsModule,
-    PopoverModule.forRoot(),
     ReactiveFormsModule,
     SharedModule,
     NgbNavModule,

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 7e2e0a627750d68c701162de6f6ad800aca3c440..6f0637473954a698a0f91995115bfda2249d0a9c 100644 (file)
--- 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
@@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
 
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
@@ -26,7 +25,6 @@ import { NotificationsComponent } from './notifications/notifications.component'
     AuthModule,
     CollapseModule.forRoot(),
     BsDropdownModule.forRoot(),
-    PopoverModule.forRoot(),
     TooltipModule.forRoot(),
     AppRoutingModule,
     SharedModule,

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 db8b6364e29df9d9e772c59ac538ddd53f87eba7..25398e567e97fe343188aeb55821323d091ed16a 100644 (file)
--- 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
@@ -3,13 +3,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { ChartsModule } from 'ng2-charts';
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { SimplebarAngularModule } from 'simplebar-angular';
@@ -45,7 +45,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     FormsModule,
     ReactiveFormsModule,
     AlertModule.forRoot(),
-    PopoverModule.forRoot(),
+    NgbPopoverModule,
     ProgressbarModule.forRoot(),
     TooltipModule.forRoot(),
     ChartsModule,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.spec.ts
index b5510c6649f28d9e36c61ab5dff550ce6e38bd3c..be2db94354241e65b83fff49241821c9385558ea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.spec.ts
@@ -2,8 +2,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import * as _ from 'lodash';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { of as observableOf } from 'rxjs';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
@@ -20,7 +20,7 @@ describe('ConfigOptionComponent', () => {
 
   configureTestBed({
     declarations: [ConfigOptionComponent, HelperComponent],
-    imports: [PopoverModule.forRoot(), ReactiveFormsModule, HttpClientTestingModule],
+    imports: [NgbPopoverModule, ReactiveFormsModule, HttpClientTestingModule],
     providers: [ConfigurationService]
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
index 1a09436c0de3aacb35cbffbf03a902de182ca11e..f7bc12b5be8b24c478779ac3e1cc6a37351f25a1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
@@ -6,9 +6,6 @@
 </ng-template>
 <i [ngClass]="[icons.questionCircle]"
    aria-hidden="true"
-   [popover]="popoverTpl"
-   placement="bottom"
-   container="body"
-   (click)="$event.preventDefault();"
-   [outsideClick]="true">
+   [ngbPopover]="popoverTpl"
+   (click)="$event.preventDefault();">
 </i>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.spec.ts
index c0506ce008a13f4e8ea6601198499f1e96fbadb8..37adf93a3f2d85372b92f7bbf94d7019ce43c640 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { HelperComponent } from './helper.component';
@@ -10,7 +10,7 @@ describe('HelperComponent', () => {
   let fixture: ComponentFixture<HelperComponent>;
 
   configureTestBed({
-    imports: [PopoverModule.forRoot()],
+    imports: [NgbPopoverModule],
     declarations: [HelperComponent]
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
index 2611962627c3b1e716266787caa39c994301a7d6..9bc198d34a91e7320d6c798b272d9c1554f13b3f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { ClickOutsideModule } from 'ng-click-outside';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ToastrModule } from 'ngx-toastr';
 import { SimplebarAngularModule } from 'simplebar-angular';
@@ -32,7 +31,6 @@ describe('NotificationsSidebarComponent', () => {
     imports: [
       HttpClientTestingModule,
       PipesModule,
-      PopoverModule.forRoot(),
       ProgressbarModule.forRoot(),
       RouterTestingModule,
       ToastrModule.forRoot(),

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
index adbf5a223a9e7f8f37744ac1e7a145c8e97f1bc4..683140cb7e56bc3afc775299432790948be52c55 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { I18n } from '@ngx-translate/i18n-polyfill';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -16,7 +16,7 @@ describe('SelectBadgesComponent', () => {
 
   configureTestBed({
     declarations: [SelectBadgesComponent, SelectComponent],
-    imports: [PopoverModule.forRoot(), TooltipModule, ReactiveFormsModule],
+    imports: [NgbPopoverModule, TooltipModule, ReactiveFormsModule],
     providers: i18nProviders
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
index 95df5bbc93dcaa4c078080c7fae9f569d828f4e4..7d520b4174a8d3b9e817ba9d292ca31d4e6ea4eb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
@@ -62,10 +62,7 @@
 
 <a class="select-menu-edit float-left"
    [ngClass]="elemClass"
-   [popover]="popTemplate"
-   placement="bottom"
-   container="body"
-   outsideClick="true"
+   [ngbPopover]="popTemplate"
    *ngIf="options.length > 0">
   <ng-content></ng-content>
 </a>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
index 1538512f7e68b1e1b5335c98a58e251f18ae4218..c4c5a8b01c51806d1022aae9be907cc89ed69c86 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -20,7 +20,7 @@ describe('SelectComponent', () => {
 
   configureTestBed({
     declarations: [SelectComponent],
-    imports: [PopoverModule.forRoot(), TooltipModule, ReactiveFormsModule],
+    imports: [NgbPopoverModule, TooltipModule, ReactiveFormsModule],
     providers: i18nProviders
   });