ceph · yuriw · Jul 22, 2019 · Apr 2, 2019
diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst
@@ -214,7 +214,7 @@ Example:
     import { Component } from '@angular/core';
     import { Router } from '@angular/router';
 
-    import { ToastsManager } from 'ng2-toastr';
+    import { ToastrManager } from 'ngx-toastr';
 
     import { Credentials } from '../../../shared/models/credentials.model';
     import { HostService } from './services/host.service';
@@ -257,7 +257,7 @@ or removed to/from a set of items (e.g.: 'Add permission' to a user vs. 'Create
 
 In order to enforce the use of this wording, a service ``ActionLabelsI18n`` has
 been created, which provides translated labels for use in UI elements.
-    
+
 Frontend branding
 ~~~~~~~~~~~~~~~~~
 
@@ -1462,7 +1462,7 @@ decorators that can be used to add more information:
 
 * ``@EndpointDoc()`` for documentation of endpoints. It has four optional arguments
   (explained below): ``description``, ``group``, ``parameters`` and``responses``.
-* ``@ControllerDoc()`` for documentation of controller or group associated with 
+* ``@ControllerDoc()`` for documentation of controller or group associated with
   the endpoints. It only takes the two first arguments: ``description`` and``group``.
 
 
@@ -1471,7 +1471,7 @@ decorators that can be used to add more information:
 
 ``group``: By default, an endpoint is grouped together with other endpoints
 within the same controller class. ``group`` is a string that can be used to
-assign an endpoint or all endpoints in a class to another controller or a 
+assign an endpoint or all endpoints in a class to another controller or a
 conceived group name.
 
 
@@ -1505,7 +1505,7 @@ for nested parameters).
       'item2': (str, 'Description of item2', True),  # item2 is optional
       'item3': (str, 'Description of item3', True, 'foo'),  # item3 is optional with 'foo' as default value
   }, 'Description of my_dictionary')})
- 
+
 If the parameter is a ``list`` of primitive types, the type should be
 surrounded with square brackets.
 

diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json
@@ -21,8 +21,8 @@
               "src/favicon.ico"
             ],
             "styles": [
+              "node_modules/ngx-toastr/toastr.css",
               "node_modules/bootstrap/dist/css/bootstrap.css",
-              "node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
               "node_modules/fork-awesome/css/fork-awesome.css",
               "node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css",
               "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

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
@@ -77,9 +77,9 @@
     "moment": "2.24.0",
     "ng-block-ui": "2.1.1",
     "ng2-charts": "1.6.0",
-    "ng2-toastr": "zzakir/ng2-toastr#0eafd72",
     "ng2-tree": "2.0.0-rc.11",
     "ngx-bootstrap": "3.2.0",
+    "ngx-toastr": "10.0.2",
     "rxjs": "6.4.0",
     "rxjs-compat": "6.4.0",
     "tslib": "1.9.3",

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.component.spec.ts
@@ -2,8 +2,6 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
-
 import { configureTestBed } from '../testing/unit-test-helper';
 import { AppComponent } from './app.component';
 import { AuthStorageService } from './shared/services/auth-storage.service';
@@ -13,7 +11,7 @@ describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
 
   configureTestBed({
-    imports: [RouterTestingModule, ToastModule.forRoot()],
+    imports: [RouterTestingModule],
     declarations: [AppComponent],
     schemas: [NO_ERRORS_SCHEMA],
     providers: [AuthStorageService]

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,7 +1,6 @@
-import { Component, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToastsManager } from 'ng2-toastr';
 import { TooltipConfig } from 'ngx-bootstrap/tooltip';
 
 import { AuthStorageService } from './shared/services/auth-storage.service';
@@ -23,14 +22,7 @@ import { AuthStorageService } from './shared/services/auth-storage.service';
 export class AppComponent {
   title = 'cd';
 
-  constructor(
-    private authStorageService: AuthStorageService,
-    private router: Router,
-    public toastr: ToastsManager,
-    private vcr: ViewContainerRef
-  ) {
-    this.toastr.setRootViewContainerRef(this.vcr);
-  }
+  constructor(private authStorageService: AuthStorageService, private router: Router) {}
 
   isLoginActive() {
     return this.router.url === '/login' || !this.authStorageService.isLoggedIn();

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts
@@ -7,10 +7,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { JwtModule } from '@auth0/angular-jwt';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { BlockUIModule } from 'ng-block-ui';
-import { ToastModule, ToastOptions } from 'ng2-toastr/ng2-toastr';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ToastrModule } from 'ngx-toastr';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -21,13 +21,6 @@ import { ApiInterceptorService } from './shared/services/api-interceptor.service
 import { JsErrorHandler } from './shared/services/js-error-handler.service';
 import { SharedModule } from './shared/shared.module';
 
-export class CustomOption extends ToastOptions {
-  animate = 'flyRight';
-  newestOnTop = true;
-  showCloseButton = true;
-  enableHTML = true;
-}
-
 export function jwtTokenGetter() {
   return localStorage.getItem('access_token');
 }
@@ -41,7 +34,11 @@ registerLocaleData(LocaleHelper.getLocaleData(), LocaleHelper.getLocale());
     BlockUIModule.forRoot(),
     BrowserModule,
     BrowserAnimationsModule,
-    ToastModule.forRoot(),
+    ToastrModule.forRoot({
+      positionClass: 'toast-top-right',
+      preventDuplicates: true,
+      enableHtml: true
+    }),
     AppRoutingModule,
     CoreModule,
     SharedModule,
@@ -66,10 +63,6 @@ registerLocaleData(LocaleHelper.getLocaleData(), LocaleHelper.getLocale());
       useClass: ApiInterceptorService,
       multi: true
     },
-    {
-      provide: ToastOptions,
-      useClass: CustomOption
-    },
     i18nProviders,
     I18n
   ],

diff --git a/...pp/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts b/...pp/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts
@@ -8,8 +8,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { BsModalRef } from 'ngx-bootstrap/modal';
+import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { Permission } from '../../../shared/models/permissions';
@@ -31,7 +31,7 @@ describe('IscsiTargetDiscoveryModalComponent', () => {
       HttpClientTestingModule,
       ReactiveFormsModule,
       SharedModule,
-      ToastModule.forRoot(),
+      ToastrModule.forRoot(),
       RouterTestingModule
     ],
     providers: [i18nProviders, BsModalRef]

diff --git a/...shboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.spec.ts b/...shboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.spec.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
+import { ToastrModule } from 'ngx-toastr';
 
 import { ActivatedRouteStub } from '../../../../testing/activated-route-stub';
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -130,7 +130,7 @@ describe('IscsiTargetFormComponent', () => {
         ReactiveFormsModule,
         HttpClientTestingModule,
         RouterTestingModule,
-        ToastModule.forRoot()
+        ToastrModule.forRoot()
       ],
       providers: [
         i18nProviders,

diff --git a/...shboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.spec.ts b/...shboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.spec.ts
@@ -3,9 +3,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { TreeModule } from 'ng2-tree';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ToastrModule } from 'ngx-toastr';
 import { BehaviorSubject, of } from 'rxjs';
 
 import {
@@ -40,7 +40,7 @@ describe('IscsiTargetListComponent', () => {
       SharedModule,
       TabsModule.forRoot(),
       TreeModule,
-      ToastModule.forRoot()
+      ToastrModule.forRoot()
     ],
     declarations: [IscsiTargetListComponent, IscsiTabsComponent, IscsiTargetDetailsComponent],
     providers: [TaskListService, i18nProviders]

diff --git a/...d/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts b/...d/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.spec.ts
@@ -2,10 +2,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -34,7 +34,7 @@ describe('OverviewComponent', () => {
       ProgressbarModule.forRoot(),
       HttpClientTestingModule,
       RouterTestingModule,
-      ToastModule.forRoot()
+      ToastrModule.forRoot()
     ],
     providers: i18nProviders
   });

diff --git a/.../src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.spec.ts b/.../src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.spec.ts
@@ -3,8 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
 import {
@@ -31,7 +31,7 @@ describe('PoolEditModeModalComponent', () => {
       ReactiveFormsModule,
       RouterTestingModule,
       SharedModule,
-      ToastModule.forRoot()
+      ToastrModule.forRoot()
     ],
     providers: [BsModalRef, BsModalService, i18nProviders]
   });

diff --git a/.../src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.spec.ts b/.../src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.spec.ts
@@ -3,8 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
 import {
@@ -32,7 +32,7 @@ describe('PoolEditPeerModalComponent', () => {
       ReactiveFormsModule,
       RouterTestingModule,
       SharedModule,
-      ToastModule.forRoot()
+      ToastrModule.forRoot()
     ],
     providers: [BsModalRef, BsModalService, i18nProviders]
   });

diff --git a/...mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts b/...mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.spec.ts
@@ -2,10 +2,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -25,7 +25,7 @@ describe('PoolListComponent', () => {
       ProgressbarModule.forRoot(),
       HttpClientTestingModule,
       RouterTestingModule,
-      ToastModule.forRoot()
+      ToastrModule.forRoot()
     ],
     providers: i18nProviders
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
-import { ToastModule } from 'ng2-toastr';
+import { ToastrModule } from 'ngx-toastr';
 
 import { By } from '@angular/platform-browser';
 import { ActivatedRouteStub } from '../../../../testing/activated-route-stub';
@@ -26,7 +26,7 @@ describe('RbdFormComponent', () => {
       HttpClientTestingModule,
       ReactiveFormsModule,
       RouterTestingModule,
-      ToastModule.forRoot(),
+      ToastrModule.forRoot(),
       SharedModule,
       TooltipModule
     ],

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-images/rbd-images.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-images/rbd-images.component.spec.ts
@@ -2,9 +2,9 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { TaskListService } from '../../../shared/services/task-list.service';
@@ -34,7 +34,7 @@ describe('RbdImagesComponent', () => {
       RouterTestingModule,
       SharedModule,
       TabsModule.forRoot(),
-      ToastModule.forRoot(),
+      ToastrModule.forRoot(),
       TooltipModule.forRoot()
     ],
     providers: [TaskListService, i18nProviders]

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,12 +3,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToastModule } from 'ng2-toastr';
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { ToastrModule } from 'ngx-toastr';
 import { BehaviorSubject, of } from 'rxjs';
 
 import {
@@ -47,7 +47,7 @@ describe('RbdListComponent', () => {
       TabsModule.forRoot(),
       ModalModule.forRoot(),
       TooltipModule.forRoot(),
-      ToastModule.forRoot(),
+      ToastrModule.forRoot(),
       AlertModule.forRoot(),
       RouterTestingModule,
       HttpClientTestingModule