Show 'open in Firefox Profiler' links in failure summary lines referencing profile artifacts. (#8871)

Author: fqueze

ui/job-view/details/tabs/TabsPanel.jsx

@@ -225,6 +225,7 @@ class TabsPanel extends React.Component {
             <FailureSummaryTab
               selectedJob={selectedJobFull}
               jobLogUrls={jobLogUrls}
+              jobDetails={jobDetails}
               logParseStatus={logParseStatus}
               logViewerFullUrl={logViewerFullUrl}
               addBug={addBug}

ui/shared/JobArtifacts.jsx

@@ -81,6 +81,8 @@ export default class JobArtifacts extends React.PureComponent {
                         <a
                           title={line.value}
                           href={getPerfAnalysisUrl(line.url)}
+                          target="_blank"
+                          rel="noreferrer"
                         >
                           open in Firefox Profiler
                         </a>
@@ -97,10 +99,9 @@ export default class JobArtifacts extends React.PureComponent {
 
 JobArtifacts.propTypes = {
   jobDetails: PropTypes.arrayOf({
-    contentType: PropTypes.string.isRequired,
-    expires: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    storageType: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
   }),
   jobArtifactsLoading: PropTypes.bool,
   repoName: PropTypes.string.isRequired,

ui/shared/tabs/failureSummary/FailureSummaryTab.jsx

@@ -168,6 +168,7 @@ class FailureSummaryTab extends React.Component {
   render() {
     const {
       jobLogUrls,
+      jobDetails,
       logParseStatus,
       logViewerFullUrl,
       selectedJob,
@@ -236,6 +237,7 @@ class FailureSummaryTab extends React.Component {
               addBug={addBug}
               currentRepo={currentRepo}
               developerMode={developerMode}
+              jobDetails={jobDetails}
             />
           ))}
 
@@ -356,6 +358,11 @@ FailureSummaryTab.propTypes = {
     url: PropTypes.string.isRequired,
     parse_status: PropTypes.string.isRequired,
   }),
+  jobDetails: PropTypes.arrayOf({
+    url: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
   logParseStatus: PropTypes.string,
   logViewerFullUrl: PropTypes.string,
   currentRepo: PropTypes.shape({}).isRequired,
@@ -366,6 +373,7 @@ FailureSummaryTab.propTypes = {
 
 FailureSummaryTab.defaultProps = {
   jobLogUrls: [],
+  jobDetails: [],
   logParseStatus: 'pending',
   logViewerFullUrl: null,
   addBug: null,

ui/shared/tabs/failureSummary/SuggestionsListItem.jsx

@@ -16,6 +16,7 @@ import { isReftest } from '../../../helpers/job';
 import {
   createQueryParams,
   getLogViewerUrl,
+  getPerfAnalysisUrl,
   parseQueryParams,
 } from '../../../helpers/url';
 
@@ -51,6 +52,7 @@ export default class SuggestionsListItem extends React.Component {
       toggleBugFiler,
       toggleInternalIssueFiler,
       selectedJob,
+      jobDetails,
       addBug,
       currentRepo,
       developerMode,
@@ -141,6 +143,31 @@ export default class SuggestionsListItem extends React.Component {
     }
     const filterTestPath = suggestion.search.match(/([a-z_\-0-9]+[/])+/gi);
 
+    let line = [suggestion.search];
+    const hasProfile = suggestion.search.match(
+      /profile uploaded in (profile_.*\.js\.json)/,
+    );
+    if (hasProfile) {
+      const artifact = jobDetails.find(
+        (artifact) => artifact.value === hasProfile[1],
+      );
+      if (artifact) {
+        const [begin, end] = suggestion.search.split(hasProfile[0]);
+        line = [
+          begin,
+          <a
+            title="open in Firefox Profiler"
+            href={getPerfAnalysisUrl(artifact.url)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            open {artifact.value} in the Firefox Profiler
+          </a>,
+          end,
+        ];
+      }
+    }
+
     return (
       <li>
         <div>
@@ -188,7 +215,7 @@ export default class SuggestionsListItem extends React.Component {
                 </Button>
               )}
 
-              <span className="align-middle">{suggestion.search} </span>
+              <span className="align-middle">{line} </span>
               <Clipboard
                 description=" text of error line"
                 text={suggestion.search}
@@ -246,6 +273,11 @@ export default class SuggestionsListItem extends React.Component {
 SuggestionsListItem.propTypes = {
   selectedJob: PropTypes.shape({}).isRequired,
   suggestion: PropTypes.shape({}).isRequired,
+  jobDetails: PropTypes.arrayOf({
+    url: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }).isRequired,
   toggleBugFiler: PropTypes.func.isRequired,
   toggleInternalIssueFiler: PropTypes.func.isRequired,
   developerMode: PropTypes.bool.isRequired,