mgr/dashboard: Use ng-bootstrap for Alert

Fixes: https://tracker.ceph.com/issues/45751 Signed-off-by: Tiago Melo <tmelo@suse.com>
ceph · May 28, 2020 · 8f56fae · 8f56fae
1 parent 07f9d8b
commit 8f56fae
Show file tree

Hide file tree

Showing 17 changed files with 39 additions and 52 deletions.
diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
@@ -75,6 +75,7 @@
     "@angular/platform-browser-dynamic": "9.1.6",
     "@angular/router": "9.1.6",
     "@auth0/angular-jwt": "2.1.1",
+    "@ng-bootstrap/ng-bootstrap": "6.1.0",
     "@ngx-translate/i18n-polyfill": "1.0.0",
     "@swimlane/ngx-datatable": "17.0.0",
     "@types/file-saver": "2.0.1",

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
@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 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/...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
@@ -5,14 +5,12 @@ 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 { PopoverModule } from 'ngx-bootstrap/popover';
 
 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';
@@ -30,7 +28,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
@@ -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 { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -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
@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 
 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';
@@ -78,7 +77,6 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     ModalModule.forRoot(),
-    AlertModule.forRoot(),
     TooltipModule.forRoot(),
     MgrModulesModule,
     TypeaheadModule.forRoot(),

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
@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 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 { TabsModule } from 'ngx-bootstrap/tabs';
@@ -44,7 +43,6 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     FormsModule,
     ReactiveFormsModule,
     PerformanceCounterModule,
-    AlertModule.forRoot(),
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     TooltipModule.forRoot(),

diff --git a/...d/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html b/...d/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/...gr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts b/...gr/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
@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { NgbAlertModule } 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';
@@ -44,7 +44,6 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    AlertModule.forRoot(),
     PopoverModule.forRoot(),
     ProgressbarModule.forRoot(),
     TooltipModule.forRoot(),
@@ -57,7 +56,8 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     NgBootstrapFormValidationModule,
     ClickOutsideModule,
     SimplebarAngularModule,
-    RouterModule
+    RouterModule,
+    NgbAlertModule
   ],
   declarations: [
     ViewCacheComponent,

diff --git a/...pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/...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 { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SummaryService } from '../../../shared/services/summary.service';
@@ -19,7 +19,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/...r/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html b/...r/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/...ashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts b/...ashboard/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/.../shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html b/.../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/...ared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts b/...ared/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/.../mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts b/.../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
@@ -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...');
   });