Get firebase logging working

package.json

@@ -49,6 +49,7 @@
     "@material-ui/lab": "^4.0.0-alpha.13",
     "@tensorflow/tfjs": "^1.1.2",
     "axios": "^0.19.0",
+    "firebase": "^6.3.5",
     "lodash": "^4.17.11",
     "mobx": "^5.9.4",
     "mobx-react": "^5.4.4",

src/core/api.ts

@@ -13,24 +13,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import axios from 'axios';
+import * as firebase from 'firebase';
+import { LogEvent } from './logging';
 
-export interface HelloResponseData {
-  hello: string;
-}
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  databaseURL: 'https://bach-cococo.firebaseio.com',
+  projectId: 'bach-cococo',
+  messagingSenderId: '427475510875',
+  appId: '1:427475510875:web:cd7d8ee2b33b3feb',
+};
 
 class APIManager {
-  api = axios.create({
-    baseURL: process.env.API_SERVER,
-    // Critical for the CORS request to a gLinux-based inference server
-    withCredentials: true,
-  });
-
-  // Dummy API request to the experimental inference server
-  async getHello(name = 'world') {
-    const params = { name };
-    const response = await this.api.get('/hello', { params });
-    return response.data as HelloResponseData;
+  app = firebase.initializeApp(firebaseConfig);
+
+  writeLogEvent(sessionId: string, logEvent: LogEvent) {
+    firebase
+      .database()
+      .ref(`logs/${sessionId}/${logEvent.timestamp}`)
+      .set(logEvent);
   }
 }
 

src/core/feature-flags.ts

@@ -14,23 +14,35 @@ limitations under the License.
 ==============================================================================*/
 
 import queryString from 'query-string';
-import { observable, computed } from 'mobx';
+import { computed, observable } from 'mobx';
 
 export type Variant = 'a' | 'b';
 
+export type Logging = 'console' | 'firebase' | 'sheets';
+
 export class FeatureFlags {
   @observable readonly variant: Variant = 'a';
-
   @computed get baseline() {
     return this.variant === 'b';
   }
 
+  @observable readonly logging: Logging = 'console';
+  @computed get firebaseLogging() {
+    return this.logging === 'firebase';
+  }
+  @computed get sheetsLogging() {
+    return this.logging === 'sheets';
+  }
+
   constructor() {
     const parsed = queryString.parse(window.location.search);
-    const { variant } = parsed;
+    const { variant, logging } = parsed;
     if (variant === 'b') {
       this.variant = variant;
     }
+    if (logging === 'firebase' || logging === 'sheets') {
+      this.logging = logging;
+    }
   }
 }
 

src/core/logging.ts

@@ -1,4 +1,20 @@
-import { observable } from 'mobx';
+/* Copyright 2019 Google LLC. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import api from './api';
+import featureFlags from './feature-flags';
 
 export const enum Events {
   // Generic Events
@@ -46,32 +62,43 @@ export const enum Events {
 export interface LogEvent {
   event: Events;
   timestamp: number;
-  payload: any;
+  payload?: any;
 }
 
 export class LoggingService {
   private logEvents: LogEvent[] = [];
+  private sessionId = this.getDateString();
 
   logEvent(event: Events, payload: any = undefined) {
-    const logEvent = {
+    const logEvent: LogEvent = {
       event,
       timestamp: Date.now(),
-      payload,
     };
-    console.log(event, logEvent);
 
-    this.logToGoogleForm(logEvent);
+    if (payload !== undefined) {
+      logEvent.payload = payload;
+    }
+
+    console.log(event, logEvent);
     this.logEvents.push(logEvent);
+
+    if (featureFlags.firebaseLogging) {
+      api.writeLogEvent(this.sessionId, logEvent);
+    }
+    if (featureFlags.sheetsLogging) {
+      this.logToGoogleForm(logEvent);
+    }
   }
 
   private logToGoogleForm(logEvent) {
     (<HTMLTextAreaElement>(
       document.getElementById('submitbox')
     )).value = JSON.stringify(logEvent);
-    var form = <HTMLFormElement>document.getElementById('form');
+    const form = <HTMLFormElement>document.getElementById('form');
     form.submit();
     console.log('logged to googleform');
   }
+
   private getDateString() {
     const now = new Date();
     const year = now.getFullYear();