Allow configuring which backend to fetch

mozilla-frontend-infra · Feb 2, 2018 · a4db7cd · a4db7cd
1 parent 6992a44
commit a4db7cd
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 24 deletions.
diff --git a/.neutrinorc.js b/.neutrinorc.js
@@ -1,3 +1,10 @@
+const acceptedExternalEnvs = ['BACKEND'];
+
+// Set environment variables to their default values if not defined
+Object
+  .keys(acceptedExternalEnvs)
+.forEach(env => !(env in process.env) && (process.env[env] = acceptedExternalEnvs[env]));
+
 module.exports = {
   use: [
     [
@@ -75,7 +82,8 @@ module.exports = {
         },
         style: {
           loaders: ['postcss-loader']
-        }
+        },
+        env: Object.keys(acceptedExternalEnvs),
       }
     ],
     '@neutrinojs/mocha'

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "build": "neutrino build",
     "start": "neutrino start",
+    "start:local": "BACKEND=http://localhost:3000 neutrino start",
     "lint": "neutrino lint",
     "test": "neutrino test"
   },

diff --git a/src/crashes/beta.js b/src/crashes/beta.js
@@ -8,6 +8,7 @@ import cx from 'classnames';
 import find from 'lodash/fp/find';
 import sumBy from 'lodash/fp/sumBy';
 import Dashboard from './../dashboard';
+import SETTINGS from '../settings';
 
 const rateRange = [0, 5.5];
 const colorScale = scaleOrdinal(schemeCategory10);
@@ -40,9 +41,9 @@ export default class FirefoxBeta extends React.Component {
     }
     // parallel
     const raw = await Promise.all([
-      fetch('/api/crashes/beta/builds'),
-      fetch('/api/release/history?tailVersion=6&major=1'),
-      fetch('/api/release/calendar'),
+      fetch(`${SETTINGS.backend}/api/crashes/beta/builds`),
+      fetch(`${SETTINGS.backend}/api/release/history?tailVersion=6&major=1`),
+      fetch(`${SETTINGS.backend}/api/release/calendar`),
     ]);
     const [crashes, history, calendar] = await Promise.all(raw.map(buffer => buffer.json()));
     crashes.forEach(({ builds }) => {

diff --git a/src/crashes/firefox-ut.js b/src/crashes/firefox-ut.js
@@ -5,6 +5,7 @@ import MG from 'metrics-graphics';
 import moment from 'moment';
 import Graphic from '../graphic';
 import Score from '../score';
+import SETTINGS from '../settings';
 
 export default class FirefoxUtCrashes extends React.Component {
   state = {
@@ -18,15 +19,13 @@ export default class FirefoxUtCrashes extends React.Component {
   }
 
   async fetch() {
-    const crashes = await (await fetch('/api/crashes')).json();
+    const crashes = await (await fetch(`${SETTINGS.backend}/api/crashes`)).json();
     const data = MG.convert.date(crashes, 'date');
-    const releases = await (await fetch('/api/release/history?tailVersion=5')).json();
-    const markers = releases.map((entry) => {
-      return {
-        date: moment(entry.date, 'YYYY MM DD').toDate(),
-        label: entry.version,
-      };
-    });
+    const releases = await (await fetch(`${SETTINGS.backend}/api/release/history?tailVersion=5`)).json();
+    const markers = releases.map(entry => ({
+      date: moment(entry.date, 'YYYY MM DD').toDate(),
+      label: entry.version,
+    }));
     markers.push({
       date: moment('2016-04-01', 'YYYY MM DD').toDate(),
       label: 'Aggregate Start',

diff --git a/src/crashes/xp.js b/src/crashes/xp.js
@@ -3,10 +3,11 @@
 import 'babel-polyfill';
 import React from 'react';
 import MG from 'metrics-graphics';
+import SETTINGS from '../settings';
 
 export default class XpCrashes extends React.Component {
   async componentDidMount() {
-    const crashes = await (await fetch('/api/crashes/xp')).json();
+    const crashes = await (await fetch(`${SETTINGS.backend}/api/crashes/xp`)).json();
     crashes[0] = MG.convert.date(crashes[0], 'date');
     crashes[1] = MG.convert.date(crashes[1], 'date');
     crashes[2] = MG.convert.date(crashes[2], 'date');

diff --git a/src/quantum/benchmark.js b/src/quantum/benchmark.js
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { maxBy, minBy } from 'lodash/fp';
 import { curveLinear, line, scaleTime, scaleLinear, format, timeFormat } from 'd3';
 import Widget from './widget';
+import SETTINGS from './../settings';
 
 const tickCount = 5;
 const noise = 1000 * 60 * 60 * 12;
@@ -22,8 +23,8 @@ export default class BenchmarkWidget extends React.Component {
   async fetch() {
     const id = this.props.id;
     try {
-      const evolution = await (await fetch(`/api/perf/benchmark/${id}`)).json();
-      this.setState({ evolution: evolution });
+      const evolution = await (await fetch(`${SETTINGS.backend}/api/perf/benchmark/${id}`)).json();
+      this.setState({ evolution });
     } catch (e) {
       this.setState({ error: true });
     }

diff --git a/src/quantum/channel-metric.js b/src/quantum/channel-metric.js
@@ -16,6 +16,7 @@ import {
 } from 'd3';
 import { stringify } from 'query-string';
 import Dashboard from './../dashboard';
+import SETTINGS from '../settings';
 
 const tickCount = 5;
 
@@ -37,7 +38,7 @@ export default class ChannelMetric extends React.Component {
   async fetch() {
     const query = this.props.query;
     try {
-      const raw = await fetch(`/api/perf/version-evolutions?${stringify(query)}`);
+      const raw = await fetch(`${SETTINGS.backend}/api/perf/version-evolutions?${stringify(query)}`);
       const evolutions = await raw.json();
       this.setState({ evolutions });
     } catch (e) {

diff --git a/src/quantum/flow.js b/src/quantum/flow.js
@@ -6,6 +6,7 @@ import cx from 'classnames';
 // import moment from 'moment';
 import { curveLinear, line, scaleTime, scaleLinear, format, timeFormat, area } from 'd3';
 import Widget from './widget';
+import SETTINGS from '../settings';
 
 const tickCount = 4;
 
@@ -19,7 +20,7 @@ export default class FlowWidget extends React.Component {
   viewport: [0, 0];
 
   async fetch() {
-    const burnup = await (await fetch('/api/bz/burnup')).json();
+    const burnup = await (await fetch(`${SETTINGS.backend}/api/bz/burnup`)).json();
     this.setState({ burnup });
   }
 

diff --git a/src/quantum/index.js b/src/quantum/index.js
@@ -11,6 +11,7 @@ import Benchmark from './benchmark';
 import Countdown from './countdown';
 import Flow from './flow';
 import TelemetryContainer from '../telemetry/graph';
+import SETTINGS from '../settings';
 
 const apzBugs = {
   1376525: {
@@ -52,14 +53,14 @@ export default class QuantumIndex extends React.Component {
   };
 
   async fetchNotes() {
-    const notes = await (await fetch('/api/perf/notes')).json();
+    const notes = await (await fetch(`${SETTINGS.backend}/api/perf/notes`)).json();
     this.setState({ notes });
     this.fetchApzStatus();
   }
 
   async fetchApzStatus() {
     const bugQuery = stringify({ ids: Object.keys(apzBugs) });
-    const apzStatus = await (await fetch(`/api/bz/status?${bugQuery}`)).json();
+    const apzStatus = await (await fetch(`${SETTINGS.backend}/api/bz/status?${bugQuery}`)).json();
     this.setState({ apzStatus });
   }
 

diff --git a/src/quantum/perfherder.js b/src/quantum/perfherder.js
@@ -8,6 +8,7 @@ import moment from 'moment';
 import { curveLinear, line, scaleTime, scaleLinear, format, timeFormat, area, timeMonth } from 'd3';
 import { stringify } from 'query-string';
 import Widget from './widget';
+import SETTINGS from '../settings';
 
 const tickCount = 4;
 
@@ -32,7 +33,7 @@ export default class PerfherderWidget extends React.Component {
       framework: framework,
     });
     try {
-      const evolutions = await (await fetch(`/api/perf/herder?${query}`)).json();
+      const evolutions = await (await fetch(`${SETTINGS.backend}/api/perf/herder?${query}`)).json();
       this.setState({
         evolutions: evolutions,
         signatures: splitSignatures,

diff --git a/src/regressions.js b/src/regressions.js
@@ -3,10 +3,11 @@
 import 'babel-polyfill';
 import React from 'react';
 import MG from 'metrics-graphics';
+import SETTINGS from './settings';
 
 export default class Regressions extends React.Component {
   async componentDidMount() {
-    const regressions = await (await fetch('/api/bz/regressions/missed')).json();
+    const regressions = await (await fetch(`${SETTINGS.backend}/api/bz/regressions/missed`)).json();
     const legend = regressions.map(entry => entry.count);
     MG.data_graphic({
       title: 'Number of Unevaluated Regressions Shipped',

diff --git a/src/settings.js b/src/settings.js
@@ -0,0 +1,5 @@
+const SETTINGS = {
+  backend: process.env.BACKEND || 'https://health.graphics',
+};
+
+export default SETTINGS;
diff --git a/src/status/index.js b/src/status/index.js
@@ -9,6 +9,7 @@ import sortBy from 'lodash/fp/sortBy';
 import reverse from 'lodash/fp/reverse';
 import flow from 'lodash/fp/flow';
 import Dashboard from '../dashboard';
+import SETTINGS from '../settings';
 
 const Table = ({ title, rows }) => {
   const headers = ['firefox', 'chrome', 'ie', 'safari'].map((platform) => {
@@ -106,8 +107,8 @@ export default class Status extends React.Component {
   }
 
   async fetchStatus() {
-    const popular = await (await fetch('/api/status/chrome/popular')).json();
-    const caniuse = await (await fetch('/api/status/caniuse')).json();
+    const popular = await (await fetch(`${SETTINGS.backend}/api/status/chrome/popular`)).json();
+    const caniuse = await (await fetch(`${SETTINGS.backend}/api/status/caniuse`)).json();
     this.setState({ popular, caniuse });
   }
 

diff --git a/src/telemetry/graph.js b/src/telemetry/graph.js
@@ -2,6 +2,7 @@
 import MG from 'metrics-graphics';
 import PropTypes from 'prop-types';
 import React from 'react';
+import SETTINGS from '../settings';
 
 export default class TelemetryContainer extends React.Component {
   async componentDidMount() {
@@ -11,7 +12,7 @@ export default class TelemetryContainer extends React.Component {
 
   async fetchPlotGraph(id) {
     const { graphData, telemetryUrl } = await (
-      await fetch(`/api/perf/telemetry/${id}`)).json();
+      await fetch(`${SETTINGS.backend}/api/perf/telemetry/${id}`)).json();
     if (!this.graphTitleLink) {
       return;
     }