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

@@ -5,6 +5,9 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
+    .center-content {
+      text-align: center;
+    }
     .is-error {
       font-size: 3rem;
       color: #333;
@@ -14,10 +17,9 @@
 <div *ngIf="loading" class="center">
   <mat-spinner></mat-spinner>
 </div>
-<div *ngIf="error" class="center is-error">
+<div *ngIf="error" class="center is-error .center-content">
   {{error}}
 </div>
-
 <div *ngIf="!loading && !error">
   <div class="toolbar">
     <button mat-button (click)="createNewDashboard()">New</button>

pdb-js/src/app/dashboard-page/dashboard-page.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 { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
@@ -31,8 +32,12 @@ export class DashboardPageComponent implements OnInit {
         this.dataSource = dashboardList.dashboards;
         this.loading = false;
       },
-      'error': () => {
-        this.error = "Failed to load dashboards.";
+      'error': (error: HttpErrorResponse) => {
+        if (error.status == 504){
+          this.error = "Server Unreachable";
+        }else{
+          this.error = "Failed to load dashboards";
+        }
         this.loading = false;
       }
     });

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

@@ -41,8 +41,10 @@ export class DashboardComponent implements OnInit {
       'error': (error: HttpErrorResponse) =>{
         if (error.status == 404) {
           this.error = "Not Found";
+        }else if (error.status == 504) { // gateway timeout
+          this.error = "Server Unreachable";
         }else{
-          this.error = "Failed to load dashboard.";
+          this.error = "Failed to load dashboard";
         }
       }
     });