chore: fix dashboard deployment (#7632)

* Fixes that the dashboard deployment fails due to incorrect dependencies with AngularFire.
* Upgrades to the latest AngularFire version with a new API for the Realtime Database.
* Less code duplication for different panels in the dashboard.

Author: devversion

tools/dashboard/package.json

@@ -22,10 +22,10 @@
     "@angular/platform-browser-dynamic": "^4.4.4",
     "@angular/router": "^4.4.4",
     "@swimlane/ngx-charts": "^6.0.0",
-    "angularfire2": "^4.0.0-rc.1",
+    "angularfire2": "^5.0.0-rc.2",
     "core-js": "^2.4.1",
     "d3": "^4.9.1",
-    "firebase": "^4.1.3",
+    "firebase": "^4.5.0",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.12"
   },

tools/dashboard/src/app/coverage-chart/coverage-chart.html

@@ -14,4 +14,7 @@
   [autoScale]="true">
 </ngx-charts-line-chart>
 
-<mat-spinner *ngIf="!chartData.length" class="coverage-chart-loading"></mat-spinner>
+<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+             [diameter]="50"
+             [strokeWidth]="5">
+</mat-spinner>

tools/dashboard/src/app/coverage-chart/coverage-chart.scss

@@ -1,20 +0,0 @@
-$coverage-chart-loading-size: 50px;
-
-:host {
-  display: block;
-  position: relative;
-
-  height: 400px;
-  width: 100%;
-  max-width: 700px;
-}
-
-.coverage-chart-loading {
-  position: absolute;
-
-  top: calc(50% - #{$coverage-chart-loading-size});
-  left: calc(50% - #{$coverage-chart-loading-size});
-
-  height: $coverage-chart-loading-size;
-  width: $coverage-chart-loading-size;
-}

tools/dashboard/src/app/coverage-chart/coverage-chart.ts

@@ -6,7 +6,10 @@ import {NgxChartResult} from '../ngx-definitions';
   selector: 'coverage-chart',
   templateUrl: './coverage-chart.html',
   styleUrls: ['./coverage-chart.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'dashboard-panel'
+  }
 })
 export class CoverageChart {
 

tools/dashboard/src/app/dashboard-app.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
+import {AngularFireDatabase} from 'angularfire2/database';
+import {Observable} from 'rxjs/Observable';
 
 // This import is only used to define a generic type. The current TypeScript version incorrectly
 // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
@@ -14,14 +15,14 @@ import {PayloadResult, CoverageResult} from './data-definitions';
 export class DashboardApp {
 
   /** Observable that emits all payload results from Firebase. */
-  payloads: FirebaseListObservable<PayloadResult[]>;
+  payloads: Observable<PayloadResult[]>;
 
   /** Observable that emits all coverage reports from Firebase. */
-  coverage: FirebaseListObservable<CoverageResult[]>;
+  coverage: Observable<CoverageResult[]>;
 
   constructor(database: AngularFireDatabase) {
-    this.payloads = database.list(`payloads`);
-    this.coverage = database.list(`coverage-reports`);
+    this.payloads = database.list(`payloads`).valueChanges();
+    this.coverage = database.list(`coverage-reports`).valueChanges();
   }
 }
 

tools/dashboard/src/app/payload-chart/payload-chart.html

@@ -14,4 +14,7 @@
   [autoScale]="true">
 </ngx-charts-line-chart>
 
-<mat-spinner *ngIf="!chartData.length" class="payload-chart-loading"></mat-spinner>
+<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+             [diameter]="50"
+             [strokeWidth]="5">
+</mat-spinner>

tools/dashboard/src/app/payload-chart/payload-chart.scss

@@ -1,20 +0,0 @@
-$payload-chart-loading-size: 50px;
-
-:host {
-  display: block;
-  position: relative;
-
-  height: 400px;
-  width: 100%;
-  max-width: 700px;
-}
-
-.payload-chart-loading {
-  position: absolute;
-
-  top: calc(50% - #{$payload-chart-loading-size});
-  left: calc(50% - #{$payload-chart-loading-size});
-
-  height: $payload-chart-loading-size;
-  width: $payload-chart-loading-size;
-}

tools/dashboard/src/app/payload-chart/payload-chart.ts

@@ -6,7 +6,10 @@ import {NgxChartItem, NgxChartResult} from '../ngx-definitions';
   selector: 'payload-chart',
   templateUrl: './payload-chart.html',
   styleUrls: ['./payload-chart.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'dashboard-panel'
+  }
 })
 export class PayloadChart {
 

tools/dashboard/src/styles.scss

@@ -1,5 +1,26 @@
+$panel-loading-indicator-diameter: 50px;
+
 body, html {
   margin: 0;
   font-family: Roboto, Arial, sans-serif;
   min-height: 100vh;
 }
+
+.panel-loading-indicator {
+  position: absolute;
+
+  top: calc(50% - #{$panel-loading-indicator-diameter});
+  left: calc(50% - #{$panel-loading-indicator-diameter});
+
+  height: $panel-loading-indicator-diameter;
+  width: $panel-loading-indicator-diameter;
+}
+
+.dashboard-panel {
+  display: block;
+  position: relative;
+
+  height: 400px;
+  width: 100%;
+  max-width: 700px;
+}