Show a button in the Action Bar to allow opening the resource use profiles in the Firefox Profiler with a single click. (#8872)

Author: fqueze

ui/job-view/details/DetailsPanel.jsx

@@ -389,6 +389,7 @@ class DetailsPanel extends React.Component {
               classificationMap={classificationMap}
               jobLogUrls={jobLogUrls}
               logParseStatus={logParseStatus}
+              jobDetails={jobDetails}
               jobDetailLoading={jobDetailLoading}
               latestClassification={
                 classifications.length

ui/job-view/details/summary/ActionBar.jsx

@@ -16,6 +16,7 @@ import {
   faThumbtack,
   faTimesCircle,
   faCrosshairs,
+  faGaugeHigh,
 } from '@fortawesome/free-solid-svg-icons';
 
 import {
@@ -32,7 +33,11 @@ import {
   confirmFailure,
   findJobInstance,
 } from '../../../helpers/job';
-import { getInspectTaskUrl, getReftestUrl } from '../../../helpers/url';
+import {
+  getInspectTaskUrl,
+  getReftestUrl,
+  getPerfAnalysisUrl,
+} from '../../../helpers/url';
 import JobModel from '../../../models/job';
 import TaskclusterModel from '../../../models/taskcluster';
 import CustomJobActions from '../../CustomJobActions';
@@ -307,11 +312,17 @@ class ActionBar extends React.PureComponent {
       selectedJobFull,
       logViewerUrl,
       logViewerFullUrl,
+      jobDetails,
       jobLogUrls,
       pinJob,
       currentRepo,
     } = this.props;
     const { customJobActionsShowing } = this.state;
+    const resourceUsageProfile = jobDetails.find((artifact) =>
+      ['profile_build_resources.json', 'profile_resource-usage.json'].includes(
+        artifact.value,
+      ),
+    );
 
     return (
       <div id="actionbar">
@@ -342,6 +353,21 @@ class ActionBar extends React.PureComponent {
                 <FontAwesomeIcon icon={faRedo} title="Retrigger job" />
               </Button>
             </li>
+            {resourceUsageProfile &&
+              // not shown at the same time as the reftest analyzer to avoid running out of space.
+              !isReftest(selectedJobFull) && (
+                <li>
+                  <a
+                    title="Show the resource usage profile in the Firefox Profiler"
+                    className="actionbar-nav-btn btn"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={getPerfAnalysisUrl(resourceUsageProfile.url)}
+                  >
+                    <FontAwesomeIcon icon={faGaugeHigh} />
+                  </a>
+                </li>
+              )}
             {isReftest(selectedJobFull) &&
               jobLogUrls.map((jobLogUrl) => (
                 <li key={`reftest-${jobLogUrl.id}`}>

ui/job-view/details/summary/SummaryPanel.jsx

@@ -16,6 +16,7 @@ class SummaryPanel extends React.PureComponent {
       latestClassification,
       bugs,
       jobLogUrls,
+      jobDetails,
       jobDetailLoading,
       logViewerUrl,
       logViewerFullUrl,
@@ -46,6 +47,7 @@ class SummaryPanel extends React.PureComponent {
           logParseStatus={logParseStatus}
           currentRepo={currentRepo}
           isTryRepo={currentRepo.is_try_repo}
+          jobDetails={jobDetails}
           logViewerUrl={logViewerUrl}
           logViewerFullUrl={logViewerFullUrl}
           jobLogUrls={jobLogUrls}
@@ -96,6 +98,11 @@ SummaryPanel.propTypes = {
   selectedJobFull: PropTypes.shape({}).isRequired,
   latestClassification: PropTypes.shape({}),
   jobLogUrls: PropTypes.arrayOf(PropTypes.shape({})),
+  jobDetails: PropTypes.arrayOf({
+    url: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
   jobDetailLoading: PropTypes.bool,
   logParseStatus: PropTypes.string,
   logViewerUrl: PropTypes.string,
@@ -105,6 +112,7 @@ SummaryPanel.propTypes = {
 SummaryPanel.defaultProps = {
   latestClassification: null,
   jobLogUrls: [],
+  jobDetails: [],
   jobDetailLoading: false,
   logParseStatus: 'pending',
   logViewerUrl: null,