Bug 1521157 - Update dataset for unit tests (#4502)

mozilla · Jan 29, 2019 · 8365550 · 8365550
1 parent c32f673
commit 8365550
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 22 deletions.
diff --git a/ui/helpers/url.js b/ui/helpers/url.js
@@ -1,5 +1,7 @@
 export const uiJobsUrlBase = '/#/jobs';
 
+export const uiPushHealthBase = '/pushhealth.html';
+
 export const bzBaseUrl = 'https://bugzilla.mozilla.org/';
 
 export const hgBaseUrl = 'https://hg.mozilla.org/';
@@ -82,6 +84,11 @@ export const getJobsUrl = function getJobsUrl(params) {
   return `${uiJobsUrlBase}${createQueryParams(params)}`;
 };
 
+// This takes a plain object, rather than a URLSearchParams object.
+export const getPushHealthUrl = function getJobsUrl(params) {
+  return `${uiPushHealthBase}${createQueryParams(params)}`;
+};
+
 export const getCompareChooserUrl = function getCompareChooserUrl(params) {
   return `perf.html#/comparechooser${createQueryParams(params)}`;
 };

diff --git a/ui/job-view/pushes/PushActionMenu.jsx b/ui/job-view/pushes/PushActionMenu.jsx
@@ -7,6 +7,7 @@ import CustomJobActions from '../CustomJobActions';
 import PushModel from '../../models/push';
 import { withPushes } from '../context/Pushes';
 import { withNotifications } from '../../shared/context/Notifications';
+import { getPushHealthUrl } from '../../helpers/url';
 
 // Trigger missing jobs is dangerous on repos other than these (see bug 1335506)
 const triggerMissingRepos = ['mozilla-inbound', 'autoland'];
@@ -229,6 +230,17 @@ class PushActionMenu extends React.PureComponent {
               Set as bottom of range
             </a>
           </li>
+          <li className="dropdown-divider" />
+          <li>
+            <a
+              className="dropdown-item"
+              href={getPushHealthUrl({ repo: repoName, revision })}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              DEMO: Push Health (fake data)
+            </a>
+          </li>
         </ul>
         {customJobActionsShowing && (
           <CustomJobActions

diff --git a/ui/push-health/Health.jsx b/ui/push-health/Health.jsx
@@ -56,7 +56,7 @@ export default class Health extends React.Component {
         <Container fluid>
           {healthData ? (
             <div className="d-flex flex-column">
-              <h2 className="text-center">
+              <h3 className="text-center">
                 <span className={`badge badge-xl mb-3 badge-${overallResult}`}>
                   <a
                     href={getJobsUrl({ repo, revision })}
@@ -67,7 +67,7 @@ export default class Health extends React.Component {
                     {repo} - {revision}
                   </a>
                 </span>
-              </h2>
+              </h3>
               <Table size="sm">
                 <tbody>
                   {healthData.metrics.map(metric => (
@@ -77,6 +77,9 @@ export default class Health extends React.Component {
                         result={metric.result}
                         value={metric.value}
                         details={metric.details}
+                        failures={metric.failures}
+                        repo={repo}
+                        revision={revision}
                       />
                     </tr>
                   ))}

diff --git a/ui/push-health/Metric.jsx b/ui/push-health/Metric.jsx
@@ -5,8 +5,10 @@ import {
   faPlusSquare,
   faMinusSquare,
 } from '@fortawesome/free-regular-svg-icons';
+import { Badge, Row, Col } from 'reactstrap';
 
 import { resultColorMap } from './helpers';
+import TestFailure from './TestFailure';
 
 export default class Metric extends React.PureComponent {
   constructor(props) {
@@ -25,41 +27,75 @@ export default class Metric extends React.PureComponent {
 
   render() {
     const { detailsShowing } = this.state;
-    const { result, name, value, details } = this.props;
+    const {
+      result,
+      name,
+      value,
+      details,
+      failures,
+      repo,
+      revision,
+    } = this.props;
     const resultColor = resultColorMap[result];
     const expandIcon = detailsShowing ? faMinusSquare : faPlusSquare;
 
     return (
       <td>
-        <div className="d-flex flex-row">
+        <Row>
           <div className={`bg-${resultColor} pr-2 mr-2`} />
-          <div>
-            <h3>
-              {name}
-              <span onClick={this.toggleDetails} className="btn btn-lg">
-                <FontAwesomeIcon icon={expandIcon} />
+          <Col>
+            <Row className="justify-content-between">
+              <div>
+                <span className="metric-name align-top font-weight-bold">
+                  {name}
+                </span>
+                <span onClick={this.toggleDetails} className="btn">
+                  <FontAwesomeIcon icon={expandIcon} />
+                </span>
+              </div>
+              <span>
+                Confidence:
+                <Badge color={resultColor} className="ml-1">
+                  {value}
+                </Badge>
               </span>
-            </h3>
+            </Row>
             {detailsShowing && (
               <React.Fragment>
-                <div>Confidence: {value}/10</div>
-                {details.map(detail => (
-                  <div key={detail} className="ml-3">
-                    {detail}
-                  </div>
-                ))}
+                {failures &&
+                  failures.map(failure => (
+                    <TestFailure
+                      key={failure.testName}
+                      failure={failure}
+                      repo={repo}
+                      revision={revision}
+                    />
+                  ))}
+                {details &&
+                  details.map(detail => (
+                    <div key={detail} className="ml-3">
+                      {detail}
+                    </div>
+                  ))}
               </React.Fragment>
             )}
-          </div>
-        </div>
+          </Col>
+        </Row>
       </td>
     );
   }
 }
 
 Metric.propTypes = {
+  repo: PropTypes.string.isRequired,
+  revision: PropTypes.string.isRequired,
   result: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.number.isRequired,
   details: PropTypes.array.isRequired,
+  failures: PropTypes.array,
+};
+
+Metric.defaultProps = {
+  failures: null,
 };
diff --git a/ui/push-health/Navigation.jsx b/ui/push-health/Navigation.jsx
@@ -12,6 +12,12 @@ export default class Navigation extends React.PureComponent {
     return (
       <Navbar dark color="dark">
         <LogoMenu menuText="Push Health" />
+        <span
+          title="This data is for UI prototyping purposes only"
+          className="text-white"
+        >
+          [---FAKE-DATA---]
+        </span>
         <Login user={user} setUser={setUser} />
       </Navbar>
     );

diff --git a/ui/push-health/TestFailure.jsx b/ui/push-health/TestFailure.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Row, Col } from 'reactstrap';
+
+import { getJobsUrl } from '../helpers/url';
+
+export default class TestFailure extends React.PureComponent {
+  render() {
+    const { failure, repo, revision } = this.props;
+    const {
+      testName,
+      jobName,
+      jobId,
+      classification,
+      failureLine,
+      confidence,
+    } = failure;
+
+    return (
+      <Col className="mt-2 mb-3 ml-2">
+        <Row className="border-bottom border-secondary justify-content-between">
+          <span className="font-weight-bold">{testName}</span>
+          <span>
+            Line confidence:
+            <Badge color="secondary" className="ml-2 mr-3">
+              {confidence}
+            </Badge>
+          </span>
+        </Row>
+        <div className="small">
+          <a
+            className="text-dark ml-3"
+            href={getJobsUrl({ selectedJob: jobId, repo, revision })}
+          >
+            {jobName}
+          </a>
+          <span className="ml-1">
+            <FontAwesomeIcon icon={faStar} />
+            {classification}
+          </span>
+        </div>
+        <Row className="small text-monospace mt-2 ml-3">{failureLine}</Row>
+      </Col>
+    );
+  }
+}
+
+TestFailure.propTypes = {
+  failure: PropTypes.object.isRequired,
+  repo: PropTypes.object.isRequired,
+  revision: PropTypes.object.isRequired,
+};
diff --git a/ui/push-health/helpers.js b/ui/push-health/helpers.js
@@ -17,9 +17,26 @@ export const healthData = {
       name: 'Tests',
       result: 'fail',
       value: 2,
-      details: [
-        'Ran some tests that did not go so well',
-        'See [foo.bar.baz/mongo/rational/fee]',
+      failures: [
+        {
+          testName: 'dom/tests/mochitest/fetch/test_fetch_cors_sw_reroute.html',
+          jobName: 'test-linux32/opt-mochitest-browser-chrome-e10s-4',
+          jobId: 223458405,
+          classification: 'intermittent',
+          failureLine:
+            'REFTEST TEST-UNEXPECTED-FAIL | file:///builds/worker/workspace/build/tests/reftest/tests/layout/reftests/border-dotted/border-dashed-no-radius.html == file:///builds/worker/workspace/build/tests/reftest/tests/layout/reftests/border-dotted/masked.html | image comparison, max difference: 255, number of differing pixels: 54468',
+          confidence: 3,
+        },
+        {
+          testName:
+            'browser/components/extensions/test/browser/test-oop-extensions/browser_ext_pageAction_context.js',
+          jobName: 'test-linux64/debug-mochitest-plain-headless-e10s-8',
+          jobId: 223458405,
+          classification: 'intermittent',
+          failureLine:
+            "raptor-main TEST-UNEXPECTED-FAIL: test 'raptor-tp6-bing-firefox' timed out loading test page: https://www.bing.com/search?q=barack+obama",
+          confidence: 4,
+        },
       ],
     },
     {
@@ -36,7 +53,7 @@ export const healthData = {
       name: 'Performance',
       result: 'pass',
       value: 10,
-      details: [],
+      details: ['Ludicrous Speed'],
     },
   ],
 };

diff --git a/ui/push-health/index.jsx b/ui/push-health/index.jsx
@@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 // Treeherder Styles
 import '../css/treeherder-navbar.css';
+import './pushhealth.css';
 
 import App from './App';
 

diff --git a/ui/push-health/pushhealth.css b/ui/push-health/pushhealth.css
@@ -0,0 +1,3 @@
+.metric-name {
+  font-size: 24px;
+}