Bug 1625998 - Filter failed builds/linting for parent push (#6243)

tests/ui/push-health/JobListMetric_test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, waitForElement } from '@testing-library/react';
+
+import pushHealth from '../mock/push_health';
+import JobListMetric from '../../../ui/push-health/JobListMetric';
+
+const repoName = 'autoland';
+const { builds } = pushHealth.metrics;
+
+describe('JobListMetric', () => {
+  const testJobListMetric = (builds, showParentMatches) => (
+    <JobListMetric
+      data={builds}
+      repo={repoName}
+      revision="abc"
+      expanded
+      setExpanded={() => {}}
+      showParentMatches={showParentMatches}
+    />
+  );
+
+  test('should show the build symbol', async () => {
+    const { getByText } = render(testJobListMetric(builds, true));
+
+    expect(await waitForElement(() => getByText('arm64'))).toBeInTheDocument();
+  });
+
+  test('should not show the build symbol if hiding parent matches', async () => {
+    const { getByText, queryByText } = render(testJobListMetric(builds, false));
+
+    expect(queryByText('arm64')).not.toBeInTheDocument();
+    expect(
+      getByText('All failed Builds also failed in Parent Push'),
+    ).toBeInTheDocument();
+  });
+});

ui/push-health/Health.jsx

@@ -320,6 +320,7 @@ export default class Health extends React.PureComponent {
                   revision={revision}
                   expanded={lintingExpanded}
                   setExpanded={this.setExpanded}
+                  showParentMatches={showParentMatches}
                 />
               </Row>
               <Row>
@@ -329,6 +330,7 @@ export default class Health extends React.PureComponent {
                   revision={revision}
                   expanded={buildsExpanded}
                   setExpanded={this.setExpanded}
+                  showParentMatches={showParentMatches}
                 />
               </Row>
               <Row>

ui/push-health/Job.jsx

@@ -47,7 +47,11 @@ class Job extends PureComponent {
                   color="lightgray"
                 />
               )}
-              {!!failedInParent && <Badge color="info">Failed in parent</Badge>}
+              {!!failedInParent && (
+                <Badge color="info" className="ml-1">
+                  Failed in parent
+                </Badge>
+              )}
             </span>
           }
           tooltipText={

ui/push-health/JobListMetric.jsx

@@ -4,11 +4,24 @@ import { Row } from 'reactstrap';
 
 import Metric from './Metric';
 import Job from './Job';
+import { filterJobs } from './helpers';
 
 export default class JobListMetric extends React.PureComponent {
   render() {
-    const { data, repo, revision, expanded, setExpanded } = this.props;
+    const {
+      data,
+      repo,
+      revision,
+      expanded,
+      setExpanded,
+      showParentMatches,
+    } = this.props;
     const { name, result, details } = data;
+    const jobs = filterJobs(details, showParentMatches);
+    const msgForZeroJobs =
+      details.length && !jobs.length
+        ? `All failed ${name} also failed in Parent Push`
+        : `All ${name} passed`;
 
     return (
       <Metric
@@ -18,14 +31,14 @@ export default class JobListMetric extends React.PureComponent {
         setExpanded={setExpanded}
       >
         <div>
-          {details.length ? (
-            details.map(job => (
+          {jobs.length ? (
+            jobs.map(job => (
               <Row key={job.id} className="mt-2">
                 <Job job={job} repo={repo} revision={revision} />
               </Row>
             ))
           ) : (
-            <div>All {name} passed</div>
+            <div>{msgForZeroJobs}</div>
           )}
         </div>
       </Metric>
@@ -39,4 +52,5 @@ JobListMetric.propTypes = {
   revision: PropTypes.string.isRequired,
   setExpanded: PropTypes.func.isRequired,
   expanded: PropTypes.bool.isRequired,
+  showParentMatches: PropTypes.bool.isRequired,
 };

ui/push-health/helpers.js

@@ -19,3 +19,7 @@ export const filterTests = (tests, searchStr, showParentMatches) => {
     ),
   );
 };
+
+export const filterJobs = (jobs, showParentMatches) => {
+  return jobs.filter(job => job.failedInParent === showParentMatches);
+};