Revise the notification service

Use ngx-toastr (drop matSnackBar) to gain support
for displaying multiple notifications at once.

Change-Id: I57fe084a6d0380eebd14a30d58404afb45e168f4
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>
Signed-off-by: Lott, Christopher (cl778h) <cl778h@att.com>

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index 691098a..0e61323 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -28,6 +28,7 @@ Version 1.0.5, 2 July 2019
 * Update E2 manager client to spec version 20190630
 * Add configuration-driven mock of E2 getNodebIdList
 * Revise front-end components to use prefix 'rd'
+* Revise the notification service to display multiple notifications
 
 Version 1.0.4, 27 June 2019
 ---------------------------

diff --git a/webapp-frontend/angular.json b/webapp-frontend/angular.json
index 772f750..77bd4a8 100644 (file)
--- a/webapp-frontend/angular.json
+++ b/webapp-frontend/angular.json
@@ -10,7 +10,7 @@
       "prefix": "rd",
       "schematics": {
         "@schematics/angular:component": {
-            "styleext": "scss"
+          "styleext": "scss"
             }
         },
       "architect": {
@@ -27,14 +27,15 @@
               "src/assets"
             ],
             "styles": [
-                "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
-                "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
-                "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
-                "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
-                "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
-                "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
-                "node_modules/material-design-icons/iconfont/material-icons.css",
-                "src/styles.scss"
+              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
+              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+              "node_modules/material-design-icons/iconfont/material-icons.css",
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": [
             "node_modules/chart.js/dist/Chart.js",

diff --git a/webapp-frontend/package-lock.json b/webapp-frontend/package-lock.json
index 41a73c8..6165c8c 100644 (file)
--- a/webapp-frontend/package-lock.json
+++ b/webapp-frontend/package-lock.json
@@ -228,9 +228,9 @@
       }
     },
     "@angular/animations": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.0.3.tgz",
-      "integrity": "sha512-9zciJ4YRR0bodFSYgsgXdYMz8wKKyVjch7XZADGkWubXT8mGuwlpdPMlQ6n9Cwj8Ebu0u52WxMeQsX76K9RlYA==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.1.0.tgz",
+      "integrity": "sha512-v1paXrWQGsD+E4QBpwNUZ8dPj8hEn0b2kDVzYX6l/e9flUX6W2BWYx+BRuC4QBnNtTV9jiGsHT8FmQq/WztgWw==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -6346,9 +6346,9 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz",
-      "integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -7371,6 +7371,14 @@
       "resolved": "https://registry.npmjs.org/ng2-completer/-/ng2-completer-2.0.8.tgz",
       "integrity": "sha512-WzxJ4u3vAHsfBUaFCloEBoirPZrnDabtWEKyDok7dtjhS1ZvcbwQ4asdXuDO0hZ0T1QC66U/PwLhKfkG501hVg=="
     },
+    "ngx-toastr": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-10.0.4.tgz",
+      "integrity": "sha512-iN+zr2Msae5wV334c1dytRhSYNdUz467jwv1NE91lMmllsMkpUzZlu8VdFCeTFt+/R4TWzz19xBRqhpp+OAuVA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

diff --git a/webapp-frontend/package.json b/webapp-frontend/package.json
index f961df2..ede4c64 100644 (file)
--- a/webapp-frontend/package.json
+++ b/webapp-frontend/package.json
@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.0.3",
+    "@angular/animations": "^8.1.0",
     "@angular/cdk": "^7.3.7",
     "@angular/common": "^8.0.3",
     "@angular/compiler": "^8.0.3",
@@ -32,6 +32,7 @@
     "material-design-icons": "^3.0.1",
     "ng2-charts": "^1.6.0",
     "ng2-completer": "^2.0.8",
+    "ngx-toastr": "^10.0.4",
     "rxjs": "6.5.2",
     "rxjs-compat": "6.3.3",
     "tslib": "^1.10.0",

diff --git a/webapp-frontend/src/app/rd.module.ts b/webapp-frontend/src/app/rd.module.ts
index f45072c..0e4595c 100644 (file)
--- a/webapp-frontend/src/app/rd.module.ts
+++ b/webapp-frontend/src/app/rd.module.ts
@@ -63,6 +63,7 @@ import { StatCardComponent } from './ui/stat-card/stat-card.component';
 import { StatsComponent } from './stats/stats.component';
 import { UiService } from './services/ui/ui.service';
 import { UserComponent } from './admin/user.component';
+import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
   declarations: [
@@ -122,6 +123,7 @@ import { UserComponent } from './admin/user.component';
     MDBBootstrapModule.forRoot(),
     RdRoutingModule,
     ReactiveFormsModule,
+    ToastrModule.forRoot()
   ],
   exports: [
     FormsModule,

diff --git a/webapp-frontend/src/app/services/ui/notification.service.ts b/webapp-frontend/src/app/services/ui/notification.service.ts
index 6477125..df4f03e 100644 (file)
--- a/webapp-frontend/src/app/services/ui/notification.service.ts
+++ b/webapp-frontend/src/app/services/ui/notification.service.ts
@@ -19,43 +19,40 @@
  */
 
 import { Injectable } from '@angular/core';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
+import { ToastrService } from 'ngx-toastr';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NotificationService {
 
-  constructor(public snackBar: MatSnackBar) { }
+  constructor(public toastr: ToastrService) { }
 
-  successConfig: MatSnackBarConfig = {
-    duration: 10000,
-    horizontalPosition: 'right',
-    verticalPosition: 'top'
+  successConfig = {
+    timeOut: 10000,
+    closeButton: true
   };
 
-  warningConfig: MatSnackBarConfig = {
-    horizontalPosition: 'right',
-    verticalPosition: 'top'
+  warningConfig = {
+    disableTimeOut: true,
+    closeButton: true
   };
 
-  errorConfig: MatSnackBarConfig = {
-    horizontalPosition: 'right',
-    verticalPosition: 'top'
+  errorConfig = {
+    disableTimeOut: true,
+    closeButton: true
   };
 
   success(msg: string) {
-    this.successConfig['panelClass'] = ['notification', 'success', 'default'];
-    this.snackBar.open(msg, '', this.successConfig);
+    this.toastr.success(msg, '', this.successConfig);
   }
 
   warn(msg: string) {
-    this.warningConfig['panelClass'] = ['notification', 'warn', 'default'];
-    this.snackBar.open(msg, 'Dismiss', this.warningConfig);
+    this.toastr.warning(msg, '', this.warningConfig);
   }
 
   error(msg: string) {
-    this.errorConfig['panelClass'] = ['notification', 'error', 'default'];
-    this.snackBar.open(msg, 'Dismiss', this.errorConfig);
+    this.toastr.error(msg, '', this.errorConfig);
   }
+
 }

diff --git a/webapp-frontend/src/styles.scss b/webapp-frontend/src/styles.scss
index aceca45..7f1a0b8 100644 (file)
--- a/webapp-frontend/src/styles.scss
+++ b/webapp-frontend/src/styles.scss
@@ -2,6 +2,7 @@
 
 @import '~bootstrap/dist/css/bootstrap.min.css';
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
 /* for sidenav to take a whole page */
 html, body { 
     margin: 0;
@@ -15,24 +16,3 @@ html, body {
   text-align: center;
   font-size: 20px;
 }
-
-snack-bar-container.success.default {
-  background-color: #5cb85c;
-  color: #fff;
-}
-
-snack-bar-container.warn.default {
-  background-color: #f99157;
-  color: #fff;
-}
-
-snack-bar-container.error.default {
-  background-color: #fc7169;
-  color: #fff;
-}
-
-
-snack-bar-container.notification simple-snack-bar {
-  font-size: 18px !important;
-  font-weight: bold;
-}
\ No newline at end of file