Bug 1457205 - Convert Job Details tab to ReactJS (#3491)

tests/ui/unit/filters.tests.js

@@ -45,19 +45,6 @@ describe('stripHtml filter', function() {
     });
 });
 
-describe('encodeURIComponent filter', function() {
-    var $filter;
-    beforeEach(angular.mock.module('treeherder'));
-    beforeEach(inject(function(_$filter_) {
-        $filter = _$filter_;
-    }));
-
-    it('encodes uri components', function() {
-        var encodeURIComponent = $filter('encodeURIComponent');
-        expect(encodeURIComponent('this/is.a?URI#Component')).toEqual('this%2Fis.a%3FURI%23Component');
-    });
-});
-
 describe('displayNumber filter', function() {
     var $filter;
     beforeEach(angular.mock.module('treeherder'));

ui/details-panel/JobDetailsTab.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular/index.es2015';
+
+import treeherder from '../js/treeherder';
+import { getPerfAnalysisUrl, getWptUrl } from "../helpers/urlHelper";
+
+export default class JobDetailsTab extends React.PureComponent {
+  render() {
+    const { jobDetails, buildernameIndex } = this.props;
+    const sortedDetails = jobDetails ? jobDetails.slice() : [];
+
+    sortedDetails.sort((a, b) => a.title.localeCompare(b.title));
+
+    return (
+      <div className="job-tabs-content">
+        <ul className="list-unstyled">
+          {sortedDetails.map((line, idx) => (
+            <li
+              className="small"
+              key={idx} // eslint-disable-line react/no-array-index-key
+            >
+              <label>{line.title ? line.title : 'Untitled data'}:</label>&nbsp;
+              {/* URL provided */}
+              {!!line.url && <a
+                title={line.title ? line.title : line.value}
+                href={line.url}
+                target="_blank"
+                rel="noopener"
+              >{line.value}</a>}
+              {line.url && line.value.endsWith('raw.log') &&
+                <span> - <a
+                  title={line.value}
+                  href={getWptUrl(line.url, jobDetails[buildernameIndex] ? jobDetails[buildernameIndex].value : undefined)}
+                >open in test results viewer</a>
+                </span>}
+              {line.url && line.value.startsWith('profile_') && line.value.endsWith('.zip') &&
+                <span> - <a
+                  title={line.value}
+                  href={getPerfAnalysisUrl(line.url)}
+                >open in perf-html.io</a>
+                </span>}
+              {/*
+                no URL (just informational)
+                If this is showing HTML from a TinderboxPrint line it should
+                have been parsed in our log parser to a url instead of getting here.
+                If it wasn't, it probably had a <br/> tag and didn't have
+                a 'title' value in the '<a>' element.
+              */}
+              {!line.url && <span>{line.value}</span>}
+            </li>))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+JobDetailsTab.propTypes = {
+  jobDetails: PropTypes.array,
+  buildernameIndex: PropTypes.number,
+};
+
+JobDetailsTab.defaultProps = {
+  jobDetails: [],
+  buildernameIndex: null,
+};
+
+treeherder.component('jobDetailsTab', react2angular(JobDetailsTab));

ui/entry-index.js

@@ -69,6 +69,7 @@ import './plugins/tabs';
 import './plugins/controller';
 import './plugins/pinboard';
 import './details-panel/JobDetailsPane';
+import './details-panel/JobDetailsTab';
 import './details-panel/FailureSummaryTab';
 import './details-panel/AutoclassifyTab';
 import './details-panel/AnnotationsTab';

ui/helpers/urlHelper.js

@@ -51,6 +51,14 @@ export const getLogViewerUrl = function getLogViewerUrl(job_id, repoName, line_n
   return line_number ? `${rv}&lineNumber=${line_number}` : rv;
 };
 
+export const getWptUrl = function getWptUrl(url, value) {
+  return `https://mozilla.github.io/wptview/#/?urls=${encodeURIComponent(url)},${encodeURIComponent(value)}`;
+};
+
+export const getPerfAnalysisUrl = function getPerfAnalysisUrl(url) {
+  return `https://perf-html.io/from-url/${encodeURIComponent(url)}`;
+};
+
 // Take the repoName, if passed in.  If not, then try to find it on the
 // URL.  If not there, then try m-i and hope for the best.  The caller may
 // not actually need a repo if they're trying to get a job by ``id``.

ui/js/filters.js

@@ -50,11 +50,6 @@ treeherder.filter('getRevisionUrl', function () {
     };
 });
 
-//http://stackoverflow.com/questions/16630471/how-can-i-invoke-encodeuricomponent-from-angularjs-template
-treeherder.filter('encodeURIComponent', function () {
-    return window.encodeURIComponent;
-});
-
 treeherder.filter('displayNumber', ['$filter', function ($filter) {
     return function (input) {
         if (isNaN(input)) {

ui/plugins/job_details/main.html

@@ -1,17 +1,4 @@
-<div class="job-tabs-content">
-  <ul class="list-unstyled">
-    <li ng-repeat="line in job_details | orderBy:'title'" class="small">
-      <label>{{line.title ? line.title : 'Untitled data'}}:</label>
-      <!-- URL provided -->
-      <a ng-if="line.url" title="{{line.title ? line.title : line.value}}" href="{{line.url}}" target="_blank" rel="noopener">{{line.value}}</a>
-      <span ng-if="line.url && line.value.endsWith('raw.log')">
-        - <a title="{{line.value}}" href="https://mozilla.github.io/wptview/#/?urls={{line.url | encodeURIComponent}},{{job_details[buildernameIndex].value | encodeURIComponent}}">open in test results viewer</a>
-      </span>
-      <span ng-if="line.url && line.value.startsWith('profile_') && line.value.endsWith('.zip')">
-        - <a title="{{line.value}}" href="https://perf-html.io/from-url/{{line.url | encodeURIComponent}}">open in perf-html.io</a>
-      </span>
-      <!-- no URL (just informational) -->
-      <span ng-if="!line.url" ng-bind-html="line.value"></span>
-    </li>
-  </ul>
-</div>
+<job-details-tab
+  job-details="job_details"
+  buildername-index="buildernameIndex"
+/>