mgr/dashboard: Use ng-bootstrap for Popover

Fixes: https://tracker.ceph.com/issues/45753 Signed-off-by: Tiago Melo <[email protected]>
Conan-Kudo · Jun 4, 2020 · e5709c5 · e5709c5
1 parent ea23de6
commit e5709c5
Show file tree

Hide file tree

Showing 17 changed files with 30 additions and 50 deletions.
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
@@ -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
@@ -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/...ontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts b/...ontend/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ashboard/frontend/src/app/shared/components/config-option/config-option.component.spec.ts b/...ashboard/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
@@ -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
@@ -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/...d/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.spec.ts b/...d/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/...ashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts b/...ashboard/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
@@ -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
@@ -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
   });