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

@@ -17,7 +17,8 @@
       "tsconfig": "tsconfig.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "theme.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

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"
   },

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 }}

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`);
+  }
+}
+

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]

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;
+}

tools/dashboard/src/environments/environment.prod.ts

@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
 export const environment = {
-  production: true
+  production: true,
+  firebase: firebaseConfig
 };

tools/dashboard/src/environments/environment.ts

@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
 export const environment = {
-  production: false
+  production: false,
+  firebase: firebaseConfig
 };

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'
+};

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;
+}

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);