From 135c1df62e5b4e773acf5f31666197fabdfc3244 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Mon, 19 Jun 2017 18:30:17 +0200
Subject: [PATCH] build: firebase integration for dashboard (#5182)

* build: firebase integration for dashboard

* As part of the initial dashboard setup, this installs Angular Fire and Angular Material in the dashboard.
* For testing purposes the list of all payload results will be printed right now.

* Address feedback
---
 tools/dashboard/.angular-cli.json                |  3 ++-
 tools/dashboard/package.json                     |  3 +++
 tools/dashboard/src/app/dashboard-app.html       |  7 ++++++-
 tools/dashboard/src/app/dashboard-app.ts         | 13 ++++++++++++-
 tools/dashboard/src/app/dashboard-module.ts      | 16 +++++++++++++++-
 tools/dashboard/src/app/data-definitions.ts      | 14 ++++++++++++++
 .../src/environments/environment.prod.ts         |  5 ++++-
 tools/dashboard/src/environments/environment.ts  |  5 ++++-
 tools/dashboard/src/environments/firebase.ts     |  7 +++++++
 tools/dashboard/src/styles.css                   |  5 ++++-
 tools/dashboard/src/theme.scss                   | 10 ++++++++++
 11 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 tools/dashboard/src/app/data-definitions.ts
 create mode 100644 tools/dashboard/src/environments/firebase.ts
 create mode 100644 tools/dashboard/src/theme.scss

diff --git a/tools/dashboard/.angular-cli.json b/tools/dashboard/.angular-cli.json
index fbf7a67a925..50c2d2e47c3 100644
--- a/tools/dashboard/.angular-cli.json
+++ b/tools/dashboard/.angular-cli.json
@@ -17,7 +17,8 @@
       "tsconfig": "tsconfig.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "theme.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
diff --git a/tools/dashboard/package.json b/tools/dashboard/package.json
index 2a17ada9f4f..260fcef43a7 100644
--- a/tools/dashboard/package.json
+++ b/tools/dashboard/package.json
@@ -16,10 +16,13 @@
     "@angular/core": "^4.2.2",
     "@angular/forms": "^4.2.2",
     "@angular/http": "^4.2.2",
+    "@angular/material": "github:angular/material2-builds",
     "@angular/platform-browser": "^4.2.2",
     "@angular/platform-browser-dynamic": "^4.2.2",
     "@angular/router": "^4.2.2",
+    "angularfire2": "^4.0.0-rc.1",
     "core-js": "^2.4.1",
+    "firebase": "^4.1.2",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.12"
   },
diff --git a/tools/dashboard/src/app/dashboard-app.html b/tools/dashboard/src/app/dashboard-app.html
index 57453e92c56..6e581607a9f 100644
--- a/tools/dashboard/src/app/dashboard-app.html
+++ b/tools/dashboard/src/app/dashboard-app.html
@@ -1 +1,6 @@
-<h1>Angular Material - Board</h1>
+<md-toolbar color="primary">
+  <span>Angular Material - Board</span>
+</md-toolbar>
+
+<p>Payload Test Data</p>
+{{ payloads | async | json }}
diff --git a/tools/dashboard/src/app/dashboard-app.ts b/tools/dashboard/src/app/dashboard-app.ts
index b359bc1b33e..904cfd21c09 100644
--- a/tools/dashboard/src/app/dashboard-app.ts
+++ b/tools/dashboard/src/app/dashboard-app.ts
@@ -1,8 +1,19 @@
 import {Component} from '@angular/core';
+import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
+import {PayloadResult} from './data-definitions';
 
 @Component({
   selector: 'dashboard-app',
   templateUrl: './dashboard-app.html',
   styleUrls: ['./dashboard-app.css']
 })
-export class DashboardApp {}
+export class DashboardApp {
+
+  /** Observable that emits all payload results from Firebase. */
+  payloads: FirebaseListObservable<PayloadResult[]>;
+
+  constructor(database: AngularFireDatabase) {
+    this.payloads = database.list(`payloads`);
+  }
+}
+
diff --git a/tools/dashboard/src/app/dashboard-module.ts b/tools/dashboard/src/app/dashboard-module.ts
index be219dc5e17..4d3b60556ab 100644
--- a/tools/dashboard/src/app/dashboard-module.ts
+++ b/tools/dashboard/src/app/dashboard-module.ts
@@ -1,13 +1,27 @@
 import {BrowserModule} from '@angular/platform-browser';
+import {AngularFireModule} from 'angularfire2';
+import {AngularFireDatabaseModule} from 'angularfire2/database';
 import {NgModule} from '@angular/core';
 import {DashboardApp} from './dashboard-app';
+import {environment} from '../environments/environment';
+import {MdToolbarModule} from '@angular/material';
+
+@NgModule({
+  exports: [
+    MdToolbarModule
+  ]
+})
+export class DashboardMaterialModule {}
 
 @NgModule({
   declarations: [
     DashboardApp
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireDatabaseModule,
+    DashboardMaterialModule
   ],
   providers: [],
   bootstrap: [DashboardApp]
diff --git a/tools/dashboard/src/app/data-definitions.ts b/tools/dashboard/src/app/data-definitions.ts
new file mode 100644
index 00000000000..e74b87744c9
--- /dev/null
+++ b/tools/dashboard/src/app/data-definitions.ts
@@ -0,0 +1,14 @@
+/** Interface that describes the payload results from the Firebase database. */
+export interface PayloadResult {
+  timestamp: number;
+  // Material bundles
+  material_umd: string;
+  material_umd_minified_uglify: string;
+  material_fesm_2015: string;
+  material_fesm_2014: string;
+  // CDK bundles
+  cdk_umd: string;
+  cdk_umd_minified_uglify: string;
+  cdk_fesm_2015: string;
+  cdk_fesm_2014: string;
+}
diff --git a/tools/dashboard/src/environments/environment.prod.ts b/tools/dashboard/src/environments/environment.prod.ts
index 3612073bc31..64f3e56d9ca 100644
--- a/tools/dashboard/src/environments/environment.prod.ts
+++ b/tools/dashboard/src/environments/environment.prod.ts
@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
 export const environment = {
-  production: true
+  production: true,
+  firebase: firebaseConfig
 };
diff --git a/tools/dashboard/src/environments/environment.ts b/tools/dashboard/src/environments/environment.ts
index ffe8aed7664..1cc366a6a76 100644
--- a/tools/dashboard/src/environments/environment.ts
+++ b/tools/dashboard/src/environments/environment.ts
@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
 export const environment = {
-  production: false
+  production: false,
+  firebase: firebaseConfig
 };
diff --git a/tools/dashboard/src/environments/firebase.ts b/tools/dashboard/src/environments/firebase.ts
new file mode 100644
index 00000000000..7323df1eaf9
--- /dev/null
+++ b/tools/dashboard/src/environments/firebase.ts
@@ -0,0 +1,7 @@
+/** Shared Firebase configuration that will be used in every environment. */
+export const firebaseConfig = {
+  apiKey: 'AIzaSyCbDnV4udMgMciQ3Sva88Ji1udOIPltDAA',
+  authDomain: 'material2-board.firebaseapp.com',
+  databaseURL: 'https://material2-board.firebaseio.com',
+  projectId: 'material2-board'
+};
diff --git a/tools/dashboard/src/styles.css b/tools/dashboard/src/styles.css
index 90d4ee0072c..4f236538007 100644
--- a/tools/dashboard/src/styles.css
+++ b/tools/dashboard/src/styles.css
@@ -1 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+body, html {
+  margin: 0;
+  font-family: Roboto, Arial, sans-serif;
+}
diff --git a/tools/dashboard/src/theme.scss b/tools/dashboard/src/theme.scss
new file mode 100644
index 00000000000..2e01b0d5832
--- /dev/null
+++ b/tools/dashboard/src/theme.scss
@@ -0,0 +1,10 @@
+@import '~@angular/material/_theming';
+
+$dashboard-primary: mat-palette($mat-blue);
+$dashboard-accent: mat-palette($mat-grey);
+$dashboard-light-theme: mat-light-theme($dashboard-primary, $dashboard-accent);
+
+@include mat-core();
+
+// Only include the theme of the components that are used.
+@include mat-toolbar-theme($dashboard-light-theme);