andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

show error message when dashboard cannot be loaded

Browse Source
This commit is contained in:
Andreas Huber
2023-03-02 17:42:01 +01:00
parent 1bfb8a0090
commit b3509e062b
3 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-js/src/app/dashboard-page/dashboard-page.component.html
View File

@@ -6,7 +6,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.is-error { .is-error {
font-size: 2rem; font-size: 3rem;
color: #333; color: #333;
} }
</style> </style>

16
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
View File

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

16
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
View File

@@ -1,3 +1,4 @@
import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
@@ -15,6 +16,8 @@ export class DashboardComponent implements OnInit {
dashboard?: Dashboard = undefined; dashboard?: Dashboard = undefined;
error = "";
plotWidgetRenderData: PlotWidgetRenderData[] = []; plotWidgetRenderData: PlotWidgetRenderData[] = [];
constructor( constructor(
@@ -25,7 +28,8 @@ export class DashboardComponent implements OnInit {
private plotService: PlotService) {} private plotService: PlotService) {}
ngOnInit(): void { 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; this.dashboard = dashboard;
dashboard.plots.forEach(p => { dashboard.plots.forEach(p => {
@@ -33,7 +37,15 @@ export class DashboardComponent implements OnInit {
}); });
this.loadImages(0, this.plotWidgetRenderData); 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[]) { loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {