Bug 1593869 - Land UI code in preparation for Taskcluster migration

I do not know why I suggested landing the complete PR #5604.
I wanted the UI code to be landed in advance so we can notice any edges cases
on the day before the downtime. This change only includes the UI changes from
the original PR.

.neutrinorc.js

@@ -149,7 +149,7 @@ module.exports = {
         // to help prevent unknowingly regressing the bundle size (bug 1384255).
         neutrino.config.performance
           .hints('error')
-          .maxAssetSize(1.5 * 1024 * 1024)
+          .maxAssetSize(1.7 * 1024 * 1024)
           .maxEntrypointSize(2 * 1024 * 1024);
       }
     },

ui/helpers/url.js

@@ -1,6 +1,7 @@
 // NB: Treeherder sets a Content-Security-Policy header in production, so when
 // adding new domains *for use by fetch()*, update the `connect-src` directive:
 // https://github.com/mozilla/treeherder/blob/master/treeherder/middleware.py
+import tcLibUrls from 'taskcluster-lib-urls';
 
 export const uiJobsUrlBase = '/#/jobs';
 
@@ -31,10 +32,18 @@ export const repoEndpoint = '/repository/';
 
 export const perfSummaryEndpoint = 'performance/summary/';
 
-export const getRunnableJobsURL = function getRunnableJobsURL(decisionTask) {
+export const getRunnableJobsURL = function getRunnableJobsURL(
+  decisionTask,
+  rootUrl,
+) {
   const { id, run } = decisionTask;
+  const tcUrl = tcLibUrls.withRootUrl(rootUrl);
 
-  return `https://queue.taskcluster.net/v1/task/${id}/runs/${run}/artifacts/public/runnable-jobs.json`;
+  return tcUrl.api(
+    'queue',
+    'v1',
+    `/task/${id}/runs/${run}/artifacts/public/runnable-jobs.json`,
+  );
 };
 
 export const getUserSessionUrl = function getUserSessionUrl(oidcProvider) {
@@ -61,8 +70,8 @@ export const getBugUrl = function getBugUrl(bug_id) {
   return `${bzBaseUrl}show_bug.cgi?id=${bug_id}`;
 };
 
-export const getInspectTaskUrl = function getInspectTaskUrl(taskId) {
-  return `https://tools.taskcluster.net/tasks/${taskId}`;
+export const getInspectTaskUrl = function getInspectTaskUrl(taskId, rootUrl) {
+  return tcLibUrls.ui(rootUrl, `tasks/${taskId}`);
 };
 
 export const getReftestUrl = function getReftestUrl(logUrl) {

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

@@ -529,7 +529,10 @@ class ActionBar extends React.PureComponent {
                         target="_blank"
                         rel="noopener noreferrer"
                         className="dropdown-item pl-4"
-                        href={getInspectTaskUrl(selectedJobFull.task_id)}
+                        href={getInspectTaskUrl(
+                          selectedJobFull.task_id,
+                          currentRepo.tc_root_url,
+                        )}
                       >
                         Inspect Task
                       </a>

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

@@ -71,7 +71,11 @@ class SummaryPanel extends React.PureComponent {
               />
             )}
             <StatusPanel selectedJobFull={selectedJobFull} />
-            <JobInfo job={selectedJobFull} extraFields={logStatus} />
+            <JobInfo
+              job={selectedJobFull}
+              extraFields={logStatus}
+              currentRepo={currentRepo}
+            />
           </ul>
         </div>
       </div>

ui/job-view/pushes/Push.jsx

@@ -328,7 +328,7 @@ class Push extends React.PureComponent {
     const { push, notify, decisionTaskMap, currentRepo } = this.props;
 
     try {
-      const jobList = await RunnableJobModel.getList(currentRepo.name, {
+      const jobList = await RunnableJobModel.getList(currentRepo, {
         decisionTask: decisionTaskMap[push.id],
         push_id: push.id,
       });
@@ -375,7 +375,7 @@ class Push extends React.PureComponent {
 
     try {
       notify('Fetching runnable jobs... This could take a while...');
-      let fuzzyJobList = await RunnableJobModel.getList(currentRepo.name, {
+      let fuzzyJobList = await RunnableJobModel.getList(currentRepo, {
         decisionTask: decisionTaskMap[push.id],
       });
       fuzzyJobList = [

ui/logviewer/App.jsx

@@ -13,6 +13,7 @@ import PushModel from '../models/push';
 import TextLogStepModel from '../models/textLogStep';
 import JobDetails from '../shared/JobDetails';
 import JobInfo from '../shared/JobInfo';
+import RepositoryModel from '../models/repository';
 
 import Navigation from './Navigation';
 import ErrorLines from './ErrorLines';
@@ -54,6 +55,7 @@ class App extends React.PureComponent {
       repoName: queryString.get('repo'),
       jobId: queryString.get('job_id'),
       jobUrl: null,
+      currentRepo: null,
     };
   }
 
@@ -90,14 +92,23 @@ class App extends React.PureComponent {
               const push = await resp.json();
               const { revision } = push;
 
-              this.setState({
-                revision,
-                jobUrl: getJobsUrl({
-                  repo: repoName,
+              this.setState(
+                {
                   revision,
-                  selectedJob: jobId,
-                }),
-              });
+                  jobUrl: getJobsUrl({
+                    repo: repoName,
+                    revision,
+                    selectedJob: jobId,
+                  }),
+                },
+                async () => {
+                  RepositoryModel.getList().then(repos => {
+                    const newRepo = repos.find(repo => repo.name === repoName);
+
+                    this.setState({ currentRepo: newRepo });
+                  });
+                },
+              );
             });
           },
         );
@@ -183,6 +194,7 @@ class App extends React.PureComponent {
       errors,
       highlight,
       jobUrl,
+      currentRepo,
     } = this.state;
     const extraFields = [
       {
@@ -212,6 +224,7 @@ class App extends React.PureComponent {
                   revision={revision}
                   className="list-unstyled"
                   showJobFilters={false}
+                  currentRepo={currentRepo}
                 />
                 <JobDetails jobDetails={jobDetails} />
               </div>

ui/models/runnableJob.js

@@ -7,9 +7,9 @@ export default class RunnableJobModel {
     Object.assign(this, data);
   }
 
-  static async getList(repoName, params) {
+  static async getList(repo, params) {
     const { push_id, decisionTask } = params;
-    const uri = getRunnableJobsURL(decisionTask);
+    const uri = getRunnableJobsURL(decisionTask, repo.tc_root_url);
     const rawJobs = await fetch(uri).then(response => response.json());
 
     return Object.entries(rawJobs).map(([key, value]) =>

ui/shared/JobInfo.jsx

@@ -31,7 +31,7 @@ const getTimeFields = function getTimeFields(job) {
 
 export default class JobInfo extends React.PureComponent {
   render() {
-    const { job, extraFields, showJobFilters } = this.props;
+    const { job, extraFields, showJobFilters, currentRepo } = this.props;
     const {
       signature,
       title,
@@ -67,12 +67,12 @@ export default class JobInfo extends React.PureComponent {
             <span>{title}</span>
           )}
         </li>
-        {task_id && (
+        {task_id && currentRepo && (
           <li className="small">
             <strong>Task: </strong>
             <a
               id="taskInfo"
-              href={getInspectTaskUrl(task_id)}
+              href={getInspectTaskUrl(task_id, currentRepo.tc_root_url)}
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -121,9 +121,11 @@ JobInfo.propTypes = {
     }),
   ),
   showJobFilters: PropTypes.bool,
+  currentRepo: PropTypes.shape({}),
 };
 
 JobInfo.defaultProps = {
   extraFields: [],
   showJobFilters: true,
+  currentRepo: null,
 };