Bug 1617622 - add job details and link to treeherder job view (#6545)

ui/helpers/url.js

@@ -115,7 +115,7 @@ export const getJobsUrl = function getJobsUrl(params) {
 };
 
 // This takes a plain object, rather than a URLSearchParams object.
-export const getPushHealthUrl = function getJobsUrl(params) {
+export const getPushHealthUrl = function getPushHealthUrl(params) {
   return `${uiPushHealthBase}${createQueryParams(params)}`;
 };
 

ui/infra-compare/InfraCompare.jsx

@@ -64,26 +64,28 @@ class InfraCompareView extends React.PureComponent {
   getDisplayResults = (origResultsMap, newResultsMap, tableNames) => {
     let compareResults = new Map();
     tableNames.forEach((jobName) => {
-      jobName = jobName.replace(/-\d+$/, '');
-      const oldResults = origResultsMap.filter(
+      const originalResults = origResultsMap.filter(
         (job) => job.job_type__name.replace(/-\d+$/, '') === jobName,
       );
       const newResults = newResultsMap.filter(
         (job) => job.job_type__name.replace(/-\d+$/, '') === jobName,
       );
-      const cmap = getCounterMap(jobName, oldResults, newResults);
+      const cmap = getCounterMap(jobName, originalResults, newResults);
+      cmap.originalJobs = new Map();
+      cmap.newJobs = new Map();
+      originalResults.forEach((job) => {
+        if (cmap.originalJobs.has(job.job_type__name))
+          cmap.originalJobs.get(job.job_type__name).push(job.duration);
+        else cmap.originalJobs.set(job.job_type__name, [job.duration]);
+      });
+      newResults.forEach((job) => {
+        if (cmap.newJobs.has(job.job_type__name))
+          cmap.newJobs.get(job.job_type__name).push(job.duration);
+        else cmap.newJobs.set(job.job_type__name, [job.duration]);
+      });
       if (!cmap.isEmpty) {
         if (compareResults.has(cmap.platform)) {
-          let found = false;
-          const compareResult = compareResults.get(cmap.platform);
-          compareResult.forEach((result) => {
-            if (result.suite === cmap.suite) {
-              found = true;
-            }
-          });
-          if (!found) {
           compareResults.get(cmap.platform).push(cmap);
-          }
         } else {
           compareResults.set(cmap.platform, [cmap]);
         }

ui/infra-compare/InfraCompareTable.jsx

@@ -2,19 +2,27 @@ import React from 'react';
 import { Table } from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import { getJobsUrl } from '../helpers/url';
+import { hashFunction } from '../helpers/utils';
+
 import InfraCompareTableRow from './InfraCompareTableRow';
+import { getHashBasedId } from './helpers';
 
 export default class InfraCompareTable extends React.PureComponent {
   render() {
-    const { data, key } = this.props;
+    const {
+      data,
+      platform,
+      validated: { originalProject, newProject, originalRevision, newRevision },
+    } = this.props;
 
     return (
       <Table
-        id={key}
+        id={platform}
         aria-label="Comparison table"
         sz="small"
         className="compare-table mb-0 px-0"
-        key={key}
+        key={platform}
         innerRef={(el) => {
           this.header = el;
         }}
@@ -22,12 +30,36 @@ export default class InfraCompareTable extends React.PureComponent {
         <thead>
           <tr className="subtest-header bg-lightgray">
             <th className="3text-left, table-width-lg">
-              <span>{data[0].platform}</span>
+              <span>{platform}</span>
+            </th>
+            <th className="table-width-sm">
+              <a
+                href={getJobsUrl({
+                  repo: originalProject,
+                  revision: originalRevision,
+                  searchStr: platform,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                sec(Base)
+              </a>
             </th>
-            <th className="table-width-sm">sec(Base)</th>
             {/* empty for less than/greater than data  */}
             <th className="table-width-sm" aria-label="Comparison" />
-            <th className="table-width-sm">sec(New)</th>
+            <th className="table-width-sm">
+              <a
+                href={getJobsUrl({
+                  repo: newProject,
+                  revision: newRevision,
+                  searchStr: platform,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                sec(Base)
+              </a>
+            </th>
             <th className="table-width-sm">fails(Base)</th>
             {/* empty for less than/greater than data  */}
             <th className="table-width-sm" aria-label="Comparison" />
@@ -41,7 +73,11 @@ export default class InfraCompareTable extends React.PureComponent {
         {data.map((suiteResults) => (
           <tbody>
             <InfraCompareTableRow
-              key={suiteResults.suite}
+              hashkey={getHashBasedId(
+                suiteResults.suite,
+                hashFunction,
+                suiteResults.platform,
+              )}
               rowLevelResults={suiteResults}
               {...this.props}
             />

ui/infra-compare/InfraCompareTableControls.jsx

@@ -128,7 +128,11 @@ export default class CompareTableControls extends React.Component {
 
         {results.size > 0 ? (
           Array.from(results).map(([platform, data]) => (
-            <InfraCompareTable key={platform} data={data} />
+            <InfraCompareTable
+              platform={platform}
+              data={data}
+              {...this.props}
+            />
           ))
         ) : (
           <p className="lead text-center">No results to show</p>

ui/infra-compare/InfraCompareTableRow.jsx

@@ -1,29 +1,103 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+
+import { getJobsUrl } from '../helpers/url';
 
 export default class InfraCompareTableRow extends React.PureComponent {
   render() {
     const {
+      hashkey,
       rowLevelResults: {
         suite,
+        platform,
         originalValue,
         newValue,
         originalFailures,
         newFailures,
         originalDataPoints,
         newDataPoints,
+        newJobs,
+        originalJobs,
       },
+      validated: { originalProject, newProject, originalRevision, newRevision },
     } = this.props;
 
     return (
       <tr color="danger">
         <th className="text-left">{suite}</th>
-        <td>{originalValue}</td>
+        <td>
+          <span
+            style={{ textDecoration: 'underline', color: 'blue' }}
+            id={`originalValue${hashkey}`}
+          >
+            {originalValue}
+          </span>
+          <UncontrolledTooltip
+            placement="top"
+            target={`originalValue${hashkey}`}
+            autohide={false}
+          >
+            {originalJobs.size > 0 ? (
+              Array.from(originalJobs).map(([jobName, durations]) => (
+                <p>
+                  {jobName}: {durations.join(', ')}
+                </p>
+              ))
+            ) : (
+              <p className="lead text-center">No jobs to show</p>
+            )}
+            <a
+              href={getJobsUrl({
+                repo: originalProject,
+                revision: originalRevision,
+                searchStr: `${platform} ${suite}`,
+              })}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Go to treeherder Job View
+            </a>
+          </UncontrolledTooltip>
+        </td>
         <td>
           {originalValue < newValue && <span>&lt;</span>}
           {originalValue > newValue && <span>&gt;</span>}
         </td>
-        <td>{newValue}</td>
+        <td>
+          <span
+            style={{ textDecoration: 'underline', color: 'blue' }}
+            id={`newValue${hashkey}`}
+          >
+            {newValue}
+          </span>
+        </td>
+        <UncontrolledTooltip
+          placement="top"
+          target={`newValue${hashkey}`}
+          autohide={false}
+        >
+          {newJobs.size > 0 ? (
+            Array.from(newJobs).map(([jobName, duration]) => (
+              <p>
+                {jobName}: {duration.join(', ')}
+              </p>
+            ))
+          ) : (
+            <p className="lead text-center">No jobs to show</p>
+          )}
+          <a
+            href={getJobsUrl({
+              repo: newProject,
+              revision: newRevision,
+              searchStr: `${platform} ${suite}`,
+            })}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Go to treeherder Job View
+          </a>
+        </UncontrolledTooltip>
         <td>{originalFailures}</td>
         <td>
           {originalFailures < newFailures && <span>&lt;</span>}
@@ -44,4 +118,5 @@ export default class InfraCompareTableRow extends React.PureComponent {
 InfraCompareTableRow.propTypes = {
   user: PropTypes.shape({}).isRequired,
   rowLevelResults: PropTypes.shape({}).isRequired,
+  validated: PropTypes.shape({}).isRequired,
 };

ui/infra-compare/InfraCompareTableView.jsx

@@ -103,7 +103,7 @@ export default class InfraCompareTableView extends React.Component {
     }
 
     const tableNames = [
-      ...new Set(data.map((item) => item.job_type__name)),
+      ...new Set(data.map((item) => item.job_type__name.replace(/-\d+$/, ''))),
     ].sort();
 
     const text = originalRevision

ui/infra-compare/helpers.js

@@ -2,6 +2,17 @@ export const calcPercentOf = function calcPercentOf(a, b) {
   return b ? (100 * a) / b : 0;
 };
 
+export const getHashBasedId = function getHashBasedId(
+  suiteName,
+  hashFunction,
+  platformName,
+) {
+  const tableSection = platformName === null ? 'header' : 'row';
+  const hashValue = hashFunction(`${suiteName}${platformName}`);
+
+  return `table-${tableSection}-${hashValue}`;
+};
+
 export const containsText = (string, text) => {
   const words = text
     .split(' ')