Bug 1506633 - Fix Logviewer links to original job in Treeherder (#4270)

ui/logviewer/App.jsx

@@ -52,6 +52,7 @@ class App extends React.PureComponent {
       highlight: getUrlLineNumber(),
       repoName: queryString.get('repo'),
       jobId: queryString.get('job_id'),
+      jobUrl: null,
     };
 
     this.setSelectedLine = this.setSelectedLine.bind(this);
@@ -85,7 +86,10 @@ class App extends React.PureComponent {
           const push = await resp.json();
           const { revision } = push;
 
-          this.setState({ revision });
+          this.setState({
+            revision,
+            jobUrl: getJobsUrl({ repo: repoName, revision, selectedJob: jobId }),
+          });
         });
       });
     }).catch((error) => {
@@ -169,11 +173,11 @@ class App extends React.PureComponent {
   render() {
     const {
       job, rawLogUrl, reftestUrl, jobDetails, jobError, jobExists,
-      revision, errors, highlight, jobId, repoName,
+      revision, errors, highlight, jobUrl,
     } = this.state;
     const extraFields = [{
       title: 'Revision',
-      url: getJobsUrl({ repo: repoName, revision, selectedJob: jobId }),
+      url: jobUrl,
       value: revision,
     }];
 
@@ -185,6 +189,7 @@ class App extends React.PureComponent {
           jobError={jobError}
           rawLogUrl={rawLogUrl}
           reftestUrl={reftestUrl}
+          jobUrl={jobUrl}
         />
         {job && (
           <div className="d-flex flex-column flex-fill">
@@ -195,6 +200,7 @@ class App extends React.PureComponent {
                   extraFields={extraFields}
                   revision={revision}
                   className="list-unstyled"
+                  showJobFilters={false}
                 />
                 <JobDetails jobDetails={jobDetails} />
               </div>

ui/logviewer/Navigation.jsx

@@ -9,7 +9,7 @@ const getShadingClass = result => `result-status-shading-${result}`;
 export default class Navigation extends React.PureComponent {
   render() {
     const {
-      jobExists, result, jobError, rawLogUrl, reftestUrl,
+      jobExists, result, jobError, jobUrl, rawLogUrl, reftestUrl,
     } = this.props;
     const resultStatusShading = getShadingClass(result);
 
@@ -34,6 +34,20 @@ export default class Navigation extends React.PureComponent {
                 </span>
               </span>
             )}
+          {!!jobUrl && (
+            <span>
+              <a
+                title="Open the Job in Treeherder"
+                className="nav-link btn-view-nav"
+                target="_blank"
+                rel="noopener noreferrer"
+                href={jobUrl}
+              >
+                <span className="fa fa-tree actionbtn-icon mr-1" />
+                <span>open Job</span>
+              </a>
+            </span>
+          )}
           <span>
             <a
               title="Open the raw log in a new window"
@@ -71,9 +85,11 @@ Navigation.propTypes = {
   result: PropTypes.string.isRequired,
   jobError: PropTypes.string.isRequired,
   rawLogUrl: PropTypes.string.isRequired,
+  jobUrl: PropTypes.string,
   reftestUrl: PropTypes.string,
 };
 
 Navigation.defaultProps = {
+  jobUrl: null,
   reftestUrl: null,
 };

ui/shared/JobInfo.jsx

@@ -35,7 +35,7 @@ const getTimeFields = function getTimeFields(job) {
 
 export default class JobInfo extends React.PureComponent {
   render() {
-    const { job, extraFields } = this.props;
+    const { job, extraFields, showJobFilters } = this.props;
     const jobSearchStr = getSearchStr(job);
     const timeFields = getTimeFields(job);
 
@@ -43,14 +43,21 @@ export default class JobInfo extends React.PureComponent {
       <ul id="job-info" className="list-unstyled">
         <li className="small">
           <label>Job: </label>
-          <a
-            title="Filter jobs with this unique SHA signature"
-            href={getJobSearchStrHref(job.signature)}
-          >(sig)</a>:&nbsp;
-          <a
-            title="Filter jobs containing these keywords"
-            href={getJobSearchStrHref(jobSearchStr)}
-          >{jobSearchStr}</a>
+          {showJobFilters ? (
+            <React.Fragment>
+              <a
+                title="Filter jobs with this unique SHA signature"
+                href={getJobSearchStrHref(job.signature)}
+              >(sig)</a>:&nbsp;
+              <a
+                title="Filter jobs containing these keywords"
+                href={getJobSearchStrHref(jobSearchStr)}
+              >{jobSearchStr}</a>
+            </React.Fragment>
+            ) : (
+              <span>{job.getTitle()}</span>
+            )
+          }
         </li>
         {job.taskcluster_metadata &&
           <li className="small">
@@ -98,8 +105,10 @@ JobInfo.propTypes = {
       value: PropTypes.string,
     }),
   ),
+  showJobFilters: PropTypes.bool,
 };
 
 JobInfo.defaultProps = {
   extraFields: [],
+  showJobFilters: true,
 };