PCF-491 Add links to the existing CompareView to try PerfCompare (#8170)

* Add message for the soft launch of PerfCompare in Compare View

* Address comments

ui/perfherder/compare/CompareSelectorView.jsx

@@ -136,6 +136,13 @@ export default class CompareSelectorView extends React.Component {
                 )}
               </Col>
             </Row>
+            <Row className="justify-content-center">
+              <Alert color="info">
+                The <a href="https://perf.compare/">PerfCompare</a> application
+                has been officially launched. We encourage you to utilize this
+                new tool for future comparisons.
+              </Alert>
+            </Row>
             <Row className="justify-content-center">
               {showWarning && (
                 <Alert color="warning">

ui/perfherder/compare/CompareTableView.jsx

@@ -29,6 +29,50 @@ import RevisionInformation from '../../shared/RevisionInformation';
 import CompareTableControls from './CompareTableControls';
 import NoiseTable from './NoiseTable';
 
+export const getPerfCompareCompareBaseURL = function getOldCompareWithBaseViewURL(
+  originalProject,
+  originalRevision,
+  newProject,
+  newRevision,
+  framework,
+) {
+  return `https://perf.compare/compare-results?baseRev=${originalRevision}&baseRepo=${originalProject}&newRev=${newRevision}&newRepo=${newProject}&framework=${framework}`;
+};
+
+export const getPerfCompareCompareBaseSubtestsURL = function getPerfCompareCompareBaseSubtestsURL(
+  originalProject,
+  originalRevision,
+  newProject,
+  newRevision,
+  framework,
+  originalSignature,
+  newSignature,
+) {
+  return `https://perf.compare/subtests-compare-results?baseRev=${originalRevision}&baseRepo=${originalProject}&newRev=${newRevision}&newRepo=${newProject}&framework=${framework}&baseParentSignature=${originalSignature}&newParentSignature=${newSignature}`;
+};
+
+export const getPerfCompareCompareOvertimeURL = function getPerfCompareCompareOvertimeURL(
+  originalProject,
+  newProject,
+  newRevision,
+  framework,
+  timeRange,
+) {
+  return `https://perf.compare/compare-over-time-results?baseRepo=${originalProject}&selectedTimeRange=${timeRange}&newRev=${newRevision}&newRepo=${newProject}&framework=${framework}`;
+};
+
+export const getPerfCompareCompareOvertimeSubtestsURL = function getPerfCompareCompareOvertimeSubtestsURL(
+  originalProject,
+  newProject,
+  newRevision,
+  framework,
+  timeRange,
+  originalSignature,
+  newSignature,
+) {
+  return `https://perf.compare/subtests-compare-over-time-results?baseRepo=${originalProject}&newRev=${newRevision}&newRepo=${newProject}&framework=${framework}&selectedTimeRange=${timeRange}&baseParentSignature=${originalSignature}&newParentSignature=${newSignature}`;
+};
+
 export default class CompareTableView extends React.Component {
   constructor(props) {
     super(props);
@@ -216,6 +260,8 @@ export default class CompareTableView extends React.Component {
       originalResultSet,
       newResultSet,
       pageTitle,
+      originalSignature,
+      newSignature,
     } = this.props.validated;
 
     const { filterByFramework, hasSubtests, frameworks, projects } = this.props;
@@ -266,6 +312,47 @@ export default class CompareTableView extends React.Component {
       });
     }
 
+    let perfCompareURL;
+    if (originalRevision) {
+      // compare with base url
+      perfCompareURL = hasSubtests
+        ? getPerfCompareCompareBaseSubtestsURL(
+            originalProject,
+            originalRevision,
+            newProject,
+            newRevision,
+            framework.id,
+            originalSignature,
+            newSignature,
+          )
+        : getPerfCompareCompareBaseURL(
+            originalProject,
+            originalRevision,
+            newProject,
+            newRevision,
+            framework.id,
+          );
+    } else if (timeRange) {
+      // compareOverTime URL
+      perfCompareURL = hasSubtests
+        ? getPerfCompareCompareOvertimeSubtestsURL(
+            originalProject,
+            newProject,
+            newRevision,
+            framework.id,
+            timeRange.value,
+            originalSignature,
+            newSignature,
+          )
+        : getPerfCompareCompareOvertimeURL(
+            originalProject,
+            newProject,
+            newRevision,
+            framework.id,
+            timeRange.value,
+          );
+    }
+
     return (
       <Container fluid className="max-width-default">
         {loading && !failureMessages.length && <LoadingSpinner />}
@@ -274,6 +361,20 @@ export default class CompareTableView extends React.Component {
           message={genericErrorMessage}
         >
           <React.Fragment>
+            <Row className="justify-content-center">
+              <Alert color="info">
+                Try out the same comparison{' '}
+                <a
+                  href={perfCompareURL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  with our new PerfCompare tool
+                </a>
+                !
+              </Alert>
+            </Row>
+
             {hasSubtests && (
               <Link
                 to={{