feat(dashboard-render): improve dashboard loading logic and enhance error handling for filters

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/dashboard/dashboard-render/dashboard-render.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid pr-2 pl-2 pt-2">
-  <div *ngIf="dashboard" class="d-flex justify-content-between align-items-center mb-2">
+  <div *ngIf="dashboard?.name" class="d-flex justify-content-between align-items-center mb-2">
     <h5 class="card-title mb-0 label-header">{{dashboard.name}}
     </h5>
     <div class="header-elements d-flex justify-content-end align-items-center">
@@ -17,9 +17,9 @@ <h5 class="card-title mb-0 label-header">{{dashboard.name}}
   </div>
 </div>
 <div class="w-100 h-100 mb-3">
-  <gridster [options]="options" style="background-color: #f1f1f1;z-index: 0; margin-bottom: 15px">
+  <gridster *ngIf="(layout$ | async) as layout" [options]="options" style="background-color: #f1f1f1;z-index: 0; margin-bottom: 15px">
     <gridster-item #gridsterItem
-                   *ngFor="let item of layout$ | async; trackBy: trackByFn; let index = index" [item]="item.grid"
+                   *ngFor="let item of layout; trackBy: trackByFn; let index = index" [item]="item.grid"
                    (mouseenter)="activeTimeGridster=item.visualization.id"
                    [ngStyle]="{'z-index':(activeTimeGridster===item.visualization.id?100:0)+''}">
                     <app-utm-viewer [building]="false"
@@ -36,7 +36,7 @@ <h5 class="card-title mb-0 label-header">{{dashboard.name}}
   <div style="height: 15px"></div>
 </div>
 
-<div *ngIf="!loadingVisualizations"
+<div *ngIf="loadingVisualizations"
      class="dashboard-loader d-flex justify-content-start align-content-center w-100 h-100">
   <app-utm-spinner [height]="'110px'" [loading]="!loadingVisualizations" [width]="'110px'"
                    label="Loading dashboard"

frontend/src/app/dashboard/dashboard-render/dashboard-render.component.ts

@@ -73,18 +73,31 @@ export class DashboardRenderComponent implements OnInit, OnDestroy, AfterViewIni
   }
 
   ngOnInit() {
+
     document.body.classList.add('overflow-hidden');
     this.loadingVisualizations = true;
-    this.layout$ = this.activatedRoute.data
-      .pipe(
-        tap((visualizations) => {
-          this.dashboard = this.layoutService.dashboard;
-          this.filters = this.dashboard && this.dashboard.filters ? JSON.parse(this.dashboard.filters) : [];
-          this.loadingVisualizations = false;
-        }),
-        map(data => data.response)
+
+    this.layout$ = this.activatedRoute.data.pipe(
+      map(data => {
+        const response = data && data.response ? data.response : [];
+
+        this.dashboard = this.layoutService.dashboard ? this.layoutService.dashboard : null;
+
+        try {
+          this.filters = this.dashboard && this.dashboard.filters
+            ? JSON.parse(this.dashboard.filters)
+            : [];
+        } catch {
+          this.filters = [];
+        }
+
+        this.loadingVisualizations = false;
+
+        return response;
+      })
     );
 
+
     this.dashboardBehavior.$filterDashboard.subscribe(dashboardFilter => {
       if (dashboardFilter) {
         mergeParams(dashboardFilter.filter, this.filtersValues).then(newFilters => {