show error message when dashboard cannot be loaded

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -4,20 +4,32 @@
     height: 100%;
     
   }
-  .spinner {
+  .center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .center-content {
+    text-align: center;
+  }
+  .is-error {
+    font-size: 3rem;
+    color: #333;
+  }
 
   .content {
     padding: 0.5em;
   }
 </style>
-<div *ngIf="dashboard === undefined" class="spinner">
+
+<div *ngIf="dashboard === undefined && !error" class="center">
   <mat-spinner></mat-spinner>
 </div>
+<div *ngIf="error" class="center center-content">
+  <div class="is-error">{{error}}</div>
+  <div>Try another <a [routerLink]="['/dashboard']">dashboard</a>.</div>
+</div>
 <div *ngIf="dashboard !== undefined" class="content">
   <div class="toolbar">
     <button mat-button  (click)="addText()">Add Text</button>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -1,3 +1,4 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
@@ -15,6 +16,8 @@ export class DashboardComponent implements OnInit {
 
   dashboard?: Dashboard = undefined;
 
+  error = "";
+
   plotWidgetRenderData: PlotWidgetRenderData[] = [];
 
   constructor(
@@ -25,7 +28,8 @@ export class DashboardComponent implements OnInit {
     private plotService: PlotService) {}
 
   ngOnInit(): void {
-      this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe((dashboard: Dashboard) => {
+      this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe({
+        'next':(dashboard: Dashboard) => {
         this.dashboard = dashboard;
 
         dashboard.plots.forEach(p => {
@@ -33,7 +37,15 @@ export class DashboardComponent implements OnInit {
         });
 
         this.loadImages(0, this.plotWidgetRenderData);
-      });
+      },
+      'error': (error: HttpErrorResponse) =>{
+        if (error.status == 404) {
+          this.error = "Not Found";
+        }else{
+          this.error = "Failed to load dashboard.";
+        }
+      }
+    });
   }
 
   loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {