Add snackbar UI to display notifications.

Test: go/vtslab-schedule-dev/redirect/20180920t150955-dot-vtslab-schedule-dev
Bug: 74575555
Change-Id: Id4d0b249c4eaf6fc95224bd112a571bae6400903

9 files changed, 48 insertions, 29 deletions

diff --git a/gae/frontend/src/app/app.module.ts b/gae/frontend/src/app/app.module.ts
index e3e8a1c..f383cf5 100644
--- a/gae/frontend/src/app/app.module.ts
+++ b/gae/frontend/src/app/app.module.ts
@@ -23,6 +23,7 @@ import { RouterModule, Routes } from '@angular/router';
 // Angular Material modules
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 
@@ -54,12 +55,14 @@ const appRoutes: Routes = [
   imports: [
     MatPaginatorModule,
     MatProgressSpinnerModule,
+    MatSnackBarModule,
     MatTableModule,
     MatTabsModule,
   ],
   exports: [
     MatPaginatorModule,
     MatProgressSpinnerModule,
+    MatSnackBarModule,
     MatTableModule,
     MatTabsModule,
   ]
diff --git a/gae/frontend/src/app/menu/build/build.component.ts b/gae/frontend/src/app/menu/build/build.component.ts
index a40d78d..c584f80 100644
--- a/gae/frontend/src/app/menu/build/build.component.ts
+++ b/gae/frontend/src/app/menu/build/build.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, PageEvent } from '@angular/material';
+import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material';
 
 import { Build } from '../../model/build';
 import { BuildService } from './build.service';
@@ -39,8 +39,9 @@ export class BuildComponent extends MenuBaseClass implements OnInit {
   dataSource = new MatTableDataSource<Build>();
   pageEvent: PageEvent;
 
-  constructor(private buildService: BuildService) {
-    super();
+  constructor(private buildService: BuildService,
+              public snackBar: MatSnackBar) {
+    super(snackBar);
   }
 
   ngOnInit(): void {
@@ -73,7 +74,7 @@ export class BuildComponent extends MenuBaseClass implements OnInit {
             const total = length + offset;
             if (response.has_next) {
               if (length !== this.pageSize) {
-                console.log('Received unexpected number of entities.');
+                this.showSnackbar('Received unexpected number of entities.');
               } else if (this.count <= total) {
                 this.getCount();
               }
@@ -95,7 +96,7 @@ export class BuildComponent extends MenuBaseClass implements OnInit {
           }
           this.dataSource.data = response.builds;
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
diff --git a/gae/frontend/src/app/menu/dashboard/dashboard.component.ts b/gae/frontend/src/app/menu/dashboard/dashboard.component.ts
index 8094303..57ea988 100644
--- a/gae/frontend/src/app/menu/dashboard/dashboard.component.ts
+++ b/gae/frontend/src/app/menu/dashboard/dashboard.component.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material';
 
 /** Component that handles dashboard. */
 @Component({
@@ -22,4 +23,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
+  constructor(public snackBar: MatSnackBar) {
+    this.snackBar.dismiss();
+  }
 }
diff --git a/gae/frontend/src/app/menu/device/device.component.ts b/gae/frontend/src/app/menu/device/device.component.ts
index 412eee2..890b84c 100644
--- a/gae/frontend/src/app/menu/device/device.component.ts
+++ b/gae/frontend/src/app/menu/device/device.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, PageEvent } from '@angular/material';
+import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material';
 
 import { Device } from '../../model/device';
 import { DeviceService } from './device.service';
@@ -43,8 +43,9 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
   deviceStatusEnum = DeviceStatus;
   schedulingStatusEnum = SchedulingStatus;
 
-  constructor(private deviceService: DeviceService) {
-    super();
+  constructor(private deviceService: DeviceService,
+              public snackBar: MatSnackBar) {
+    super(snackBar);
   }
 
   ngOnInit(): void {
@@ -77,7 +78,7 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
             const total = length + offset;
             if (response.has_next) {
               if (length !== this.pageSize) {
-                console.log('Received unexpected number of entities.');
+                this.showSnackbar('Received unexpected number of entities.');
               } else if (this.count <= total) {
                 this.getCount();
               }
@@ -99,7 +100,7 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
           }
           this.dataSource.data = response.devices;
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
diff --git a/gae/frontend/src/app/menu/job/job.component.ts b/gae/frontend/src/app/menu/job/job.component.ts
index 035ac05..901ff03 100644
--- a/gae/frontend/src/app/menu/job/job.component.ts
+++ b/gae/frontend/src/app/menu/job/job.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, PageEvent, Sort } from '@angular/material';
+import { MatSnackBar, MatTableDataSource, PageEvent, Sort } from '@angular/material';
 
 import { FilterCondition } from '../../model/filter_condition';
 import { FilterItem } from '../../model/filter_item';
@@ -70,8 +70,9 @@ export class JobComponent extends MenuBaseClass implements OnInit {
   sort = '';
   sortDirection = '';
 
-  constructor(private jobService: JobService) {
-    super();
+  constructor(private jobService: JobService,
+              public snackBar: MatSnackBar) {
+    super(snackBar);
   }
 
   ngOnInit(): void {
@@ -109,7 +110,7 @@ export class JobComponent extends MenuBaseClass implements OnInit {
             const total = length + offset;
             if (response.has_next) {
               if (length !== this.pageSize) {
-                console.log('Received unexpected number of entities.');
+                this.showSnackbar('Received unexpected number of entities.');
               } else if (this.count <= total) {
                 this.getCount();
               }
@@ -131,7 +132,7 @@ export class JobComponent extends MenuBaseClass implements OnInit {
           }
           this.dataSource.data = response.jobs;
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
@@ -159,7 +160,7 @@ export class JobComponent extends MenuBaseClass implements OnInit {
           const stats_24hrs = this.buildStatisticsData('24 Hours', jobs_24hrs);
           this.statDataSource.data = [stats_24hrs, stats_72hrs];
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
diff --git a/gae/frontend/src/app/menu/lab/lab.component.ts b/gae/frontend/src/app/menu/lab/lab.component.ts
index 38992d2..83fe3a1 100644
--- a/gae/frontend/src/app/menu/lab/lab.component.ts
+++ b/gae/frontend/src/app/menu/lab/lab.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import {MatTableDataSource, PageEvent} from '@angular/material';
+import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material';
 
 import { Host } from '../../model/host';
 import { Lab } from '../../model/lab';
@@ -47,8 +47,9 @@ export class LabComponent extends MenuBaseClass implements OnInit {
   labCount = -1;
   labPageIndex = 0;
 
-  constructor(private labService: LabService) {
-    super();
+  constructor(private labService: LabService,
+              public snackBar: MatSnackBar) {
+    super(snackBar);
   }
 
   labDataSource = new MatTableDataSource<Lab>();
@@ -77,7 +78,7 @@ export class LabComponent extends MenuBaseClass implements OnInit {
             this.setLabs(response.labs);
           }
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
diff --git a/gae/frontend/src/app/menu/menu_base.ts b/gae/frontend/src/app/menu/menu_base.ts
index ab120ee..8d568b0 100644
--- a/gae/frontend/src/app/menu/menu_base.ts
+++ b/gae/frontend/src/app/menu/menu_base.ts
@@ -17,6 +17,7 @@
 /** This class defines and/or implements the common properties and methods
  * used among menus.
  */
+import { MatSnackBar } from '@angular/material';
 import moment from 'moment-timezone';
 
 
@@ -28,7 +29,8 @@ export abstract class MenuBaseClass {
   pageSize = 100;
   pageIndex = 0;
 
-  protected constructor() {
+  protected constructor(public snackBar: MatSnackBar) {
+    this.snackBar.dismiss();
   }
 
   /** Returns an Observable which handles a response of count API.
@@ -42,7 +44,7 @@ export abstract class MenuBaseClass {
           operation(response);
         }
       },
-      error: (error) => console.log(`[${error.status}] ${error.name}`)
+      error: (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
     };
   }
 
@@ -50,4 +52,10 @@ export abstract class MenuBaseClass {
     return (moment.tz(timeString, 'YYYY-MM-DDThh:mm:ss', 'UTC').isValid() ?
       moment.tz(timeString, 'YYYY-MM-DDThh:mm:ss', 'UTC').fromNow() : timeString);
   }
+
+  /** Displays a snackbar notification. */
+  showSnackbar(message = 'Error', duration = 5000) {
+    this.loading = false;
+    this.snackBar.open(message, 'DISMISS', {duration});
+  }
 }
diff --git a/gae/frontend/src/app/menu/schedule/schedule.component.ts b/gae/frontend/src/app/menu/schedule/schedule.component.ts
index ff320c3..23f79d3 100644
--- a/gae/frontend/src/app/menu/schedule/schedule.component.ts
+++ b/gae/frontend/src/app/menu/schedule/schedule.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, PageEvent } from '@angular/material';
+import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material';
 
 import { MenuBaseClass } from '../menu_base';
 import { Schedule } from '../../model/schedule';
@@ -44,8 +44,9 @@ export class ScheduleComponent extends MenuBaseClass implements OnInit {
   dataSource = new MatTableDataSource<Schedule>();
   pageEvent: PageEvent;
 
-  constructor(private scheduleService: ScheduleService) {
-    super();
+  constructor(private scheduleService: ScheduleService,
+              public snackBar: MatSnackBar) {
+    super(snackBar);
   }
 
   ngOnInit(): void {
@@ -78,7 +79,7 @@ export class ScheduleComponent extends MenuBaseClass implements OnInit {
             const total = length + offset;
             if (response.has_next) {
               if (length !== this.pageSize) {
-                console.log('Received unexpected number of entities.');
+                this.showSnackbar('Received unexpected number of entities.');
               } else if (this.count <= total) {
                 this.getCount();
               }
@@ -100,7 +101,7 @@ export class ScheduleComponent extends MenuBaseClass implements OnInit {
           }
           this.dataSource.data = response.schedules;
         },
-        (error) => console.log(`[${error.status}] ${error.name}`)
+        (error) => this.showSnackbar(`[${error.status}] ${error.name}`)
       );
   }
 
diff --git a/gae/frontend/src/app/shared/servicebase.ts b/gae/frontend/src/app/shared/servicebase.ts
index 94a4f67..9eaecf8 100644
--- a/gae/frontend/src/app/shared/servicebase.ts
+++ b/gae/frontend/src/app/shared/servicebase.ts
@@ -32,8 +32,7 @@ export class ServiceBase {
         `body was: ${error.error}`);
     }
     // return an observable with a user-facing error message
-    return throwError(
-      'Something bad happened; please try again later.');
+    return throwError(error);
   }
   public getCount(filterInfo: string): Observable<number> {
     const url = this.url + 'count';