Merge d5f6baa into 331cdbc

.neutrinorc.js

@@ -8,7 +8,7 @@ const mqpacker = require('css-mqpacker');
 
 const acceptedExternalEnvs = {
   BACKEND: 'BACKEND' in process.env ?
-    process.env.BACKEND : 'https://firefox-health-backend.herokuapp.com'
+    process.env.BACKEND : 'https://firefox-health-backend-pr-46.herokuapp.com'
 };
 
 // Set environment variables to their default values if not defined

app.json

@@ -6,7 +6,7 @@
     "GAUTH_JSON": {
       "required": true
     },
-    "BACKEND": "https://firefox-health-backend.herokuapp.com",
+    "BACKEND": "https://firefox-health-backend-pr-46.herokuapp.com",
     "NPM_CONFIG_PRODUCTION": "false"
   },
   "formation": {

src/utils/BackendClient/NimbledroidApiHandler.js

@@ -1,8 +1,10 @@
 import fetchJson from '../fetchJson';
 
-const renameProduct = product => (
-  product === 'klar' ? 'GV' : 'WV'
-);
+const PRODUCT_KEYS = {
+  'org.mozilla.klar': 'GV',
+  'org.mozilla.focus': 'WV',
+  'com.chrome.beta': 'ChromeBeta',
+};
 
 const matchUrl = profileName => profileName
   .replace(/.*(http[s]?:\/\/w*\.?.*?)[/]?[)]/, (match, firstMatch) => firstMatch);
@@ -12,7 +14,7 @@ const matchShorterUrl = url => url
 
 const transformedDataForMetrisGraphics = (nimbledroidData) => {
   const metricsGraphicsData = nimbledroidData.reduce((result, elem) => {
-    const product = renameProduct(elem.package_id.replace('org.mozilla.', ''));
+    const product = PRODUCT_KEYS[elem.package_id];
     if (!result[product]) {
       result[product] = {};
     }
@@ -86,30 +88,33 @@ const mergeProductsData = (productsData) => {
   return mergedData;
 };
 
-class NimbledroidApiHandler {
-  products = ['focus', 'klar'];
+let ENDPOINT;
 
-  constructor(backendUrl) {
-    this.nimbledroidApiUrl = `${backendUrl}/api/android/nimbledroid`;
-  }
+const productUrl = product => `${ENDPOINT}?product=${product}`;
 
-  // No clean way to have interfaces on Javascript
-  getData() {
-    return this.fetchProducts();
-  }
+const fetchProductData = async (product) => {
+  const url = productUrl(product);
+  const productData = await fetchJson(url);
+  return transformedDataForMetrisGraphics(productData);
+};
 
-  productUrl(product) {
-    return `${this.nimbledroidApiUrl}?product=${product}`;
+// XXX: There's a strong coupling of data fetching from the API and
+//      data transformation for UI purposes (e.g. mergeProducts data)
+class NimbledroidApiHandler {
+  constructor(backendUrl) {
+    ENDPOINT = `${backendUrl}/api/android/nimbledroid`;
   }
 
-  async fetchProductData(product) {
-    const productData = await fetchJson(this.productUrl(product));
-    return transformedDataForMetrisGraphics(productData);
+  // No clean way to have interfaces on Javascript
+  getData({ products }) {
+    return this.fetchProducts(products);
   }
 
-  async fetchProducts() {
+  // e.g. org.mozilla.klar, com.chrome.beta
+  async fetchProducts(products) {
     const productsData = await Promise.all(
-      this.products.map(async product => this.fetchProductData(product)));
+      products.map(async product => fetchProductData(product)),
+    );
     return mergeProductsData(productsData);
   }
 }

src/utils/BackendClient/index.js

@@ -10,8 +10,8 @@ class BackendClient {
     };
   }
 
-  getData(apiName) {
-    return this.handlers[apiName].getData();
+  getData(apiName, parameters) {
+    return this.handlers[apiName].getData(parameters);
   }
 }
 

src/utils/nimbledroid/index.jsx

@@ -1,10 +1,16 @@
-const percentageSymbol = (GV, WV, targetRatio) => ((GV < (targetRatio * WV)) ? '+' : '');
+const TARGET1 = 'GV';
+const TARGET2 = 'WV';
 
-const ratioWithTarget = (GV, WV, targetRatio) => GV / (targetRatio * WV);
+const percentageSymbol = (target1, target2, targetRatio) =>
+  ((target1 < (targetRatio * target2)) ? '+' : '');
+
+const ratioWithTarget = (target1, target2, targetRatio) => target1 / (targetRatio * target2);
 
 export const sortSitesByTargetRatio = (a, b) => {
-  const aRatio = a.GV / a.WV;
-  const bRatio = b.GV / b.WV;
+  const aRatio = a[TARGET1] / a[TARGET2];
+  const bRatio = b[TARGET1] / b[TARGET2];
+  console.log(aRatio);
+  console.log(bRatio);
   return bRatio - aRatio;
 };
 
@@ -28,11 +34,11 @@ const statusColor = (ratio, targetRatio) => {
   return { smileyFace, widgetColor };
 };
 
-export const siteMetrics = (GV, WV, targetRatio) => {
-  const ratio = ratioWithTarget(GV, WV, targetRatio);
+export const siteMetrics = (target1, target2, targetRatio) => {
+  const ratio = ratioWithTarget(target1, target2, targetRatio);
   return {
     ratio,
-    symbol: percentageSymbol(GV, WV, targetRatio),
+    symbol: percentageSymbol(target1, target2, targetRatio),
     color: statusColor(ratio, targetRatio).widgetColor,
   };
 };
@@ -73,13 +79,13 @@ export const generateSitesTableContent = (nimbledroidData, targetRatio) => {
     green: 0,
   };
   const tableContent = sites.map(({
-    title, url, GV, WV,
+    title, url, GV, WV, ChromeBeta,
   }) => {
     const { ratio, symbol, color } = siteMetrics(GV, WV, targetRatio);
     count[color] += 1;
     // This matches the format expected by the SummaryTable component
     return {
-      dataPoints: [GV, WV],
+      dataPoints: [GV, WV, ChromeBeta],
       statusColor: color,
       summary: `${symbol}${((1 - ratio) * 100).toFixed(2)}%`,
       title: {

src/views/Android/SitesTable.jsx

@@ -20,7 +20,7 @@ const SitesTable = ({ nimbledroidData, targetRatio }) => {
       </GenericErrorBoundary>
       <div className="aligned-center">
         <SummaryTable
-          header={['GeckoView', 'WebView', '% from target']}
+          header={['GeckoView', 'WebView', 'Chrome beta', '% from target']}
           content={tableContent}
         />
       </div>

src/views/Android/index.jsx

@@ -26,7 +26,14 @@ export default class Android extends Component {
 
   async fetchAndroidData() {
     try {
-      const nimbledroidData = await this.client.getData('nimbledroid');
+      const nimbledroidData = await this.client.getData(
+        'nimbledroid',
+        { products: [
+          'org.mozilla.klar',
+          'org.mozilla.focus',
+          'com.chrome.beta',
+        ] },
+      );
       this.setState({ nimbledroidData });
     } catch (e) {
       if (e.message === 'Failed to fetch') {