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

@@ -1,18 +1,27 @@
 <style>
-    .spinner {
+    .center {
-    position: absolute;
+      position: absolute;
-    top: 50%;
+      top: 50%;
-    left: 50%;
+      left: 50%;
-    transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
-  }
+    }
+    .is-error {
+      font-size: 2rem;
+      color: #333;
+    }
 </style>
-<div class="toolbar">
+
-  <button mat-button (click)="createNewDashboard()">New</button>
+<div *ngIf="loading" class="center">
-</div>
-<div *ngIf="loading" class="spinner">
   <mat-spinner></mat-spinner>
 </div>
-<div *ngIf="!loading">
+<div *ngIf="error" class="center is-error">
+  {{error}}
+</div>
+
+<div *ngIf="!loading && !error">
+  <div class="toolbar">
+    <button mat-button (click)="createNewDashboard()">New</button>
+  </div>
   <table mat-table [dataSource]="dataSource" >
 
     <!-- Name Column -->

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

@@ -13,6 +13,7 @@ export class DashboardPageComponent implements OnInit {
   displayedColumns: string[] = ['name', 'description'];
   dataSource: Dashboard[] = [];
   loading = true;
+  error = "";
 
   constructor(public dialog: MatDialog, private dashboardService: DashboardService){
 
@@ -25,9 +26,15 @@ export class DashboardPageComponent implements OnInit {
   refreshTable(){
 
     this.loading = true;
-    this.dashboardService.getDashboards().subscribe((dashboardList: DashboardList) => {
+    this.dashboardService.getDashboards().subscribe({
-      this.dataSource = dashboardList.dashboards;
+      'next':(dashboardList: DashboardList) => {
-      this.loading = false;
+        this.dataSource = dashboardList.dashboards;
+        this.loading = false;
+      },
+      'error': () => {
+        this.error = "Failed to load dashboards.";
+        this.loading = false;
+      }
     });
   }