Address feedback

armenzg · Jul 26, 2018 · 57c5d8a · 57c5d8a
1 parent 476570c
commit 57c5d8a
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 162 deletions.
diff --git a/src/components/NimbledroidGraph/index.jsx b/src/components/NimbledroidGraph/index.jsx
@@ -4,34 +4,29 @@ import PropTypes from 'prop-types';
 import MetricsGraphics from 'react-metrics-graphics';
 
 class NimbledroidGraph extends Component {
-  constructor(props) {
-    super(props);
-    this.legendTarget = null;
-  }
-
   render() {
     const { profile, targetRatio } = this.props;
     const labels = Object.keys(profile.data);
     const data = labels.map(product => profile.data[product]);
     const target = targetRatio * profile.WV;
 
     return (
-      <div>
-        <div className='legend' ref={ele => this.legendTarget = ele} />
-        <MetricsGraphics
-          width={800}
-          data={data}
-          x_accessor='date'
-          y_accessor='value'
-          legend={labels}
-          legend_target={this.legendTarget}
-          interpolate={curveLinear}
-          baselines={[{
-            value: target,
-            label: 'Target',
-          }]}
-        />
-      </div>
+      <MetricsGraphics
+        full_width
+        height={600}
+        data={data}
+        x_accessor='date'
+        y_accessor='value'
+        legend={labels}
+        legend_target={this.legendTarget}
+        aggregate_rollover
+        interpolate={curveLinear}
+        right={100}
+        baselines={[{
+          value: target,
+          label: 'Target',
+        }]}
+      />
     );
   }
 }

diff --git a/src/components/StatusWidget/Title.jsx b/src/components/StatusWidget/Title.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+
+const Title = ({ enrich, hyperlink, text, tooltip }) => {
+  const className = enrich ? 'enrich' : '';
+  const span = <span className={className}>{text}</span>;
+  return (hyperlink) ?
+    <a href={hyperlink} title={tooltip || hyperlink}>{span}</a> : span;
+};
+
+Title.propTypes = ({
+  enrich: PropTypes.bool,
+  hyperlink: PropTypes.string,
+  text: PropTypes.string.isRequired,
+  tooltip: PropTypes.string,
+});
+
+export default Title;
diff --git a/src/components/StatusWidget/index.jsx b/src/components/StatusWidget/index.jsx
@@ -1,28 +1,20 @@
 import PropTypes from 'prop-types';
+import Title from './Title';
 
 const StatusWidget = ({
   children, extraInfo,
   title,
-  summary, uid,
+  summary, statusColor, uid,
 }) => {
-  const { bgColor, emphasis, hyperlink, text, tooltip } = title;
-  let $title = '';
-  if (hyperlink) {
-    $title = <a href={hyperlink} title={tooltip}>{text}</a>;
-  } else {
-    $title = <span>{text}</span>;
-  }
-  if (emphasis) {
-    $title = <span style={{ fontWeight: 'bold', fontSize: '1em' }}>{$title}</span>;
-  }
+  const { bgColor } = title;
 
   return (
     <div>
       <div
         key={uid || title.text}
-        className={`status-widget status-${bgColor} padded`}
+        className={`status-widget status-${statusColor} padded`}
       >
-        {$title}
+        <Title {...title} />
         {summary && <span>{summary}</span>}
       </div>
       {children && <div>{children}</div>}
@@ -34,13 +26,8 @@ const StatusWidget = ({
 StatusWidget.propTypes = ({
   children: PropTypes.shape({}),
   extraInfo: PropTypes.string,
-  title: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    bgColor: PropTypes.string,
-    emphasis: PropTypes.bool,
-    hyperlink: PropTypes.string,
-    tooltip: PropTypes.string,
-  }).isRequired,
+  statusColor: PropTypes.string.isRequired,
+  title: PropTypes.shape().isRequired,
   summary: PropTypes.string,
   uid: PropTypes.string,
 });

diff --git a/src/components/SummaryTable/index.jsx b/src/components/SummaryTable/index.jsx
@@ -4,15 +4,16 @@ import StatusWidget from '../../components/StatusWidget';
 
 const SummaryTable = ({ content, header }) => {
   const $rows = content.map(({
-    title,
     dataPoints = [],
+    title,
+    statusColor,
     summary,
     uid,
   }) => {
     return (
       <tr key={uid}>
         <td className='title-container'>
-          <StatusWidget title={title} />
+          <StatusWidget statusColor={statusColor} title={title} />
         </td>
         {dataPoints.map((datum, index) => (
           <td key={index}>{datum}</td>

diff --git a/src/index.css b/src/index.css
@@ -193,10 +193,10 @@ svg path {
   }
 }
 
-svg {
+/* svg {
   height: 100%;
   width: 100%;
-}
+} */
 .graphic-details,
 .graphic-timeline {
   display: flex;
@@ -1060,6 +1060,11 @@ svg {
 .status-widget {
   display: flex;
   justify-content: space-between;
+  white-space: nowrap;
+  .enrich {
+    font-size: 1em;
+    font-weight: bold;
+  }
 }
 
 .summary-table {
@@ -1070,13 +1075,21 @@ svg {
     padding: 0 0 0 0.7em;
   }
   .title-container {
-    max-width: 360px;
+    max-width: 480px;
     overflow: hidden;
     padding: 0;
     text-align: left;
   }
 }
 
+.sites-table {
+  width: 800px;
+}
+.sites-overview {
+   margin: 1em auto 2em auto;
+   width: 480px;
+}
+
 .status-red {
   background-color: var(--newCoral);
 }
@@ -1095,3 +1108,13 @@ svg {
 .aligned-center {
   margin: 0px auto;
 }
+
+.error-message {
+  color: 'red';
+}
+
+.android-view {
+  background-color: white;
+  color: black;
+  padding: 1em;
+}
diff --git a/src/utils/BackendClient/NimbledroidApiHandler.js b/src/utils/BackendClient/NimbledroidApiHandler.js
@@ -5,7 +5,7 @@ const renameProduct = product => (
 );
 
 const matchUrl = profileName => profileName
-  .replace(/.*http[s]?:\/\/w*\.?(.*?)[/]?[)]/, (match, firstMatch) => firstMatch);
+  .replace(/.*(http[s]?:\/\/w*\.?.*?)[/]?[)]/, (match, firstMatch) => firstMatch);
 
 const matchDomain = url => url
   .replace(/([a-zA-Z0-9].*\.[a-z0-9]{1,61})\/.*/, (match, firstMatch) => firstMatch);

diff --git a/src/utils/nimbledroid/index.jsx b/src/utils/nimbledroid/index.jsx
@@ -38,7 +38,66 @@ const statusColor = (ratio, targetRatio) => {
 
 export const siteMetrics = (GV, WV, targetRatio) => {
   const ratio = ratioWithTarget(GV, WV, targetRatio);
-  const symbol = percentageSymbol(GV, WV, targetRatio);
-  const color = statusColor(ratio, targetRatio).widgetColor;
-  return { ratio, symbol, color };
+  return {
+    ratio,
+    symbol: percentageSymbol(GV, WV, targetRatio),
+    color: statusColor(ratio, targetRatio).widgetColor,
+  };
+};
+
+const generateSitesSummary = (count, numSites) => (
+  [
+    {
+      title: {
+        text: 'GeckoView > 20% slower than WebView',
+      },
+      statusColor: 'red',
+      summary: `${count.red}/${numSites}`,
+    },
+    {
+      title: {
+        text: 'GeckoView > 0% and <= 20% slower than WebView',
+      },
+      statusColor: 'yellow',
+      summary: `${count.yellow}/${numSites}`,
+    },
+    {
+      title: {
+        text: 'GeckoView <= 0% (i.e. faster than) WebView',
+      },
+      statusColor: 'green',
+      summary: `${count.green}/${numSites}`,
+    },
+  ]
+);
+
+export const generateSitesTableContent = (nimbledroidData, targetRatio) => {
+  const numSites = Object.keys(nimbledroidData).length;
+  const sites = (numSites > 0) ?
+    Object.values(nimbledroidData).sort(sortSitesByTargetRatio) : [];
+  const count = {
+    red: 0,
+    yellow: 0,
+    green: 0,
+  };
+  const tableContent = sites.map(({ title, url, GV, WV }) => {
+    const { ratio, symbol, color } = siteMetrics(GV, WV, targetRatio);
+    count[color] += 1;
+    // This matches the format expected by the SummaryTable component
+    return {
+      dataPoints: [GV, WV],
+      statusColor: color,
+      summary: `${symbol}${((1 - ratio) * 100).toFixed(2)}%`,
+      title: {
+        text: url,
+        hyperlink: `android/graph?site=${url}`,
+        tooltip: url,
+      },
+      uid: url,
+    };
+  });
+  return {
+    tableContent,
+    summary: generateSitesSummary(count, numSites),
+  };
 };
diff --git a/src/views/Android/SiteDrillDown.jsx b/src/views/Android/SiteDrillDown.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { siteMetrics } from '../../utils/nimbledroid';
+import GenericErrorBoundary from '../../components/genericErrorBoundary';
+import NimbledroidGraph from '../../components/NimbledroidGraph';
+import StatusWidget from '../../components/StatusWidget';
+
+const SiteDrillDown = ({ nimbledroidData, site, targetRatio }) => {
+  const { ratio, symbol, color } = siteMetrics(
+    nimbledroidData[site].GV,
+    nimbledroidData[site].WV,
+    targetRatio);
+  return (
+    <GenericErrorBoundary>
+      <StatusWidget
+        extraInfo='Target: GeckoView <= WebView + 20%'
+        statusColor={color}
+        title={{
+          enrich: true,
+          text: site,
+          hyperlink: site,
+        }}
+      >
+        <NimbledroidGraph
+          profile={nimbledroidData[site]}
+          targetRatio={targetRatio}
+        />
+      </StatusWidget>
+    </GenericErrorBoundary>
+  );
+};
+
+SiteDrillDown.propTypes = ({
+  nimbledroidData: PropTypes.shape({
+    GV: PropTypes.string.isRequired,
+    WV: PropTypes.string.isRequired,
+  }).isRequired,
+  site: PropTypes.string.isRequired,
+  targetRatio: PropTypes.number.isRequired,
+});
+
+export default SiteDrillDown;
diff --git a/src/views/Android/SitesTable.jsx b/src/views/Android/SitesTable.jsx
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import {
+  generateSitesTableContent,
+  siteMetrics,
+  sortSitesByTargetRatio,
+} from '../../utils/nimbledroid';
+import GenericErrorBoundary from '../../components/genericErrorBoundary';
+
+import SummaryTable from '../../components/SummaryTable';
+import StatusWidget from '../../components/StatusWidget';
+
+const SitesTable = ({ nimbledroidData, targetRatio }) => {
+  const { tableContent, summary } = generateSitesTableContent(nimbledroidData, targetRatio);
+  return (
+    <div className='aligned-center sites-table'>
+      <GenericErrorBoundary>
+        <div className='sites-overview'>
+          {summary.map(s => (<StatusWidget key={s.title.text} {...s} />
+          ))}
+        </div>
+      </GenericErrorBoundary>
+      <div className='aligned-center'>
+        <SummaryTable
+          header={['GeckoView', 'WebView', '% from target']}
+          content={tableContent}
+        />
+      </div>
+    </div>
+  );
+};
+
+SitesTable.propTypes = {
+  nimbledroidData: PropTypes.shape({}),
+  targetRatio: PropTypes.number.isRequired,
+};
+
+export default SitesTable;