mgr/dashboard: Use ng-bootstrap for Alert

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

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 b15b69a6c3331a8dc95ab7767f14dc3aa3ad16dc..f56595584795b6c14ae7ed5c99794512ebf814ec 100644 (file)
--- 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 } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
@@ -43,7 +42,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     ProgressbarModule.forRoot(),
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
-    AlertModule.forRoot(),
     TooltipModule.forRoot(),
     NgBootstrapFormValidationModule
   ],

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 d784ed12e4c4eb708f2d401ee7ec0ba928af165c..b349282bb8a7925d64db4836bff2e3a1cd41776a 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
@@ -5,13 +5,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ChartsModule } from 'ng2-charts';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
-import { TableComponent } from '../../../shared/datatable/table/table.component';
-
 import { ComponentsModule } from '../../../shared/components/components.module';
+import { TableComponent } from '../../../shared/datatable/table/table.component';
 import { RbdConfigurationEntry } from '../../../shared/models/configuration';
 import { PipesModule } from '../../../shared/pipes/pipes.module';
 import { FormatterService } from '../../../shared/services/formatter.service';
@@ -29,7 +27,6 @@ describe('RbdConfigurationListComponent', () => {
       NgxDatatableModule,
       RouterTestingModule,
       ComponentsModule,
-      AlertModule,
       BsDropdownModule.forRoot(),
       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 31860211dbc2c9ddc45f36653155f8cd6d5bd881..2a425a7b08cbf920221644b41650f728d1150f66 100644 (file)
--- 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 } from '@ng-bootstrap/ng-bootstrap';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -50,7 +49,6 @@ describe('RbdListComponent', () => {
       ModalModule.forRoot(),
       TooltipModule.forRoot(),
       ToastrModule.forRoot(),
-      AlertModule.forRoot(),
       RouterTestingModule,
       HttpClientTestingModule
     ],

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 45a620aff1e39766f1369b2a3f2048f0ef706a76..ab71ef5bc666d95e62da39ab36a2c89763c62f3c 100644 (file)
--- 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
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router';
 import { NgbNavModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
@@ -77,7 +76,6 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     ModalModule.forRoot(),
-    AlertModule.forRoot(),
     TooltipModule.forRoot(),
     MgrModulesModule,
     NgbTypeaheadModule,

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 0429da0f53dd325f4a91fbdba40410390ef84e34..26371d7df3315a38f52f7aab8a4e04bfb8699e4c 100644 (file)
--- 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 } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -44,7 +43,6 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     FormsModule,
     ReactiveFormsModule,
     PerformanceCounterModule,
-    AlertModule.forRoot(),
     BsDropdownModule.forRoot(),
     NgbNavModule,
     TooltipModule.forRoot(),

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
index f216ac6d6b80b30f06dbb6d0c4610d618a283866..17b4f1863d53d09bf2050e6d8e18a92085430ad6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
@@ -1,4 +1,5 @@
-<alert type="{{ bootstrapClass }}">
+<ngb-alert type="{{ bootstrapClass }}"
+           [dismissible]="false">
   <table>
     <ng-container *ngIf="size === 'normal'; else slim">
       <tr>
@@ -33,7 +34,7 @@
       </tr>
     </ng-template>
   </table>
-</alert>
+</ngb-alert>
 
 <ng-template #content>
   <ng-content></ng-content>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
index 2692712a74dbdaad91042117e47a5acbbcb43f08..d1ed14d57a22f6f2a085f552fd3efc7d2ce7d6f2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AlertComponent, AlertConfig } from 'ngx-bootstrap/alert';
+
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { AlertPanelComponent } from './alert-panel.component';
@@ -9,8 +10,9 @@ describe('AlertPanelComponent', () => {
   let fixture: ComponentFixture<AlertPanelComponent>;
 
   configureTestBed({
-    declarations: [AlertPanelComponent, AlertComponent],
-    providers: [AlertConfig, i18nProviders]
+    declarations: [AlertPanelComponent],
+    imports: [NgbAlertModule],
+    providers: [i18nProviders]
   });
 
   beforeEach(() => {

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 25398e567e97fe343188aeb55821323d091ed16a..592a36b70b4b0b832d8d4959c6e4a01a6c097ebc 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,11 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbAlertModule, 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 { ProgressbarModule } from 'ngx-bootstrap/progressbar';
@@ -44,7 +43,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    AlertModule.forRoot(),
+    NgbAlertModule,
     NgbPopoverModule,
     ProgressbarModule.forRoot(),
     TooltipModule.forRoot(),

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
index 7ac23f5695e1238239caababdf11ea36a7664b8e..0568fc5806abe51136fc7c2cd237993480b63d69 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 import { of } from 'rxjs';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -20,7 +20,7 @@ describe('GrafanaComponent', () => {
 
   configureTestBed({
     declarations: [GrafanaComponent, AlertPanelComponent, LoadingPanelComponent],
-    imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule, FormsModule],
+    imports: [NgbAlertModule, HttpClientTestingModule, RouterTestingModule, FormsModule],
     providers: [CephReleaseNamePipe, SettingsService, SummaryService, i18nProviders]
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
index 785f08606b73acb41c429d0f21f925d2b43cc8c2..35726cfbd9986aa123c26dc52964139f953e8735 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
@@ -1,8 +1,9 @@
-<alert type="info">
+<ngb-alert type="info"
+           [dismissible]="false">
   <strong>
     <i [ngClass]="[icons.spinner, icons.spin]"
        aria-hidden="true"
        class="mr-2"></i>
   </strong>
   <ng-content></ng-content>
-</alert>
+</ngb-alert>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
index 3bdb0799001a610f6253d587087ef54a7d924e1c..4ed5c4c57bf601364aa9cdabb86eacb3d2396836 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { LoadingPanelComponent } from './loading-panel.component';
@@ -11,7 +11,7 @@ describe('LoadingPanelComponent', () => {
 
   configureTestBed({
     declarations: [LoadingPanelComponent],
-    imports: [AlertModule.forRoot()]
+    imports: [NgbAlertModule]
   });
 
   beforeEach(() => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
index 36615164bd62f1c2e40393f5babc1cba6e664239..111f3c68fb5314549c926da138c10a348f3e67a8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
@@ -1,14 +1,13 @@
-<alert class="no-margin-bottom"
-       type="{{ alertType }}"
-       *ngIf="expirationDays != null && expirationDays <= pwdExpirationSettings.pwdExpirationWarning1"
-       [dismissible]="true"
-       (onClose)="close($event)">
+<ngb-alert class="no-margin-bottom"
+           type="{{ alertType }}"
+           *ngIf="expirationDays != null && expirationDays <= pwdExpirationSettings.pwdExpirationWarning1"
+           (close)="close($event)">
   <div *ngIf="expirationDays === 0"
        i18n>Your password will expire in <strong>less than 1</strong> day. Click
-  <a routerLink="/user-profile/edit"
-     class="alert-link">here</a> to change it now.</div>
+    <a routerLink="/user-profile/edit"
+       class="alert-link">here</a> to change it now.</div>
   <div *ngIf="expirationDays > 0"
        i18n>Your password will expire in <strong>{{ expirationDays }}</strong> day(s). Click
   <a routerLink="/user-profile/edit"
      class="alert-link">here</a> to change it now.</div>
-</alert>
+</ngb-alert>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
index eb26601963a7e9961936000ebeabcc6f95fb9d51..07c9a8a4d8ea1c612f2b25ead09c808146c2a516 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
@@ -4,12 +4,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 import { of as observableOf } from 'rxjs';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
-
 import { configureTestBed } from '../../../../testing/unit-test-helper';
-
 import { SettingsService } from '../../api/settings.service';
 import { AuthStorageService } from '../../services/auth-storage.service';
 import { PwdExpirationNotificationComponent } from './pwd-expiration-notification.component';
@@ -27,11 +25,7 @@ describe('PwdExpirationNotificationComponent', () => {
 
   configureTestBed({
     declarations: [PwdExpirationNotificationComponent, FakeComponent],
-    imports: [
-      AlertModule.forRoot(),
-      HttpClientTestingModule,
-      RouterTestingModule.withRoutes(routes)
-    ],
+    imports: [NgbAlertModule, HttpClientTestingModule, RouterTestingModule.withRoutes(routes)],
     providers: [SettingsService, AuthStorageService]
   });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
index ba33678a77a4620d058d56c140fed4a572961f6f..1e76f40d98d2c22b41b65fb2140a85c4bd0fe02e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { AlertPanelComponent } from '../alert-panel/alert-panel.component';
@@ -12,7 +12,7 @@ describe('ViewCacheComponent', () => {
 
   configureTestBed({
     declarations: [ViewCacheComponent, AlertPanelComponent],
-    imports: [AlertModule.forRoot()]
+    imports: [NgbAlertModule]
   });
 
   beforeEach(() => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
index e396ecb4cb6dac2a3146e7f46e68eabf8657b1bb..8f0875a4f318ef5656c67a76fb7da6bdfa12fbf2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed, i18nProviders } from '../../../testing/unit-test-helper';
 import { CdForm } from '../forms/cd-form';
@@ -28,7 +28,7 @@ describe('FormLoadingDirective', () => {
 
   configureTestBed({
     declarations: [TestComponent],
-    imports: [AlertModule.forRoot(), SharedModule],
+    imports: [SharedModule, NgbAlertModule],
     providers: [i18nProviders]
   });
 
@@ -50,7 +50,7 @@ describe('FormLoadingDirective', () => {
   it('should show loading component by default', () => {
     expectShown(0, 0, 1);
 
-    const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel alert');
+    const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel ngb-alert');
     expect(alert.textContent).toBe('Loading form data...');
   });