Bug 1748465 - Add documentation links for tests suite in Performance Tab (#7354)

* Bug 1748465 - Performance Tab - Add documentation links for tests suite

* Bug 1748465 - Address change request

tests/ui/job-view/App_test.jsx

@@ -33,6 +33,7 @@ describe('App', () => {
   beforeAll(() => {
     fetchMock.get('/revision.txt', []);
     fetchMock.get(getApiUrl('/repository/'), reposFixture);
+    fetchMock.get(getApiUrl('/performance/framework/'), {});
     fetchMock.get(getApiUrl('/user/'), []);
     fetchMock.get(getApiUrl('/failureclassification/'), []);
     fetchMock.get('begin:https://treestatus.mozilla-releng.net/trees/', {

tests/ui/job-view/Filtering_test.jsx

@@ -47,6 +47,7 @@ describe('Filtering', () => {
   beforeAll(() => {
     fetchMock.reset();
     fetchMock.get('/revision.txt', []);
+    fetchMock.get(getApiUrl('/performance/framework/'), {});
     fetchMock.get(getApiUrl('/repository/'), reposFixture);
     fetchMock.get(getApiUrl('/user/'), []);
     fetchMock.get(getApiUrl('/failureclassification/'), []);

ui/job-view/App.jsx

@@ -17,10 +17,13 @@ import {
   deployedRevisionUrl,
   parseQueryParams,
   createQueryParams,
+  getApiUrl,
 } from '../helpers/url';
 import ClassificationTypeModel from '../models/classificationType';
 import FilterModel from '../models/filter';
 import RepositoryModel from '../models/repository';
+import { getData } from '../helpers/http';
+import { endpoints } from '../perfherder/perf-helpers/constants';
 
 import Notifications from './Notifications';
 import PrimaryNavBar from './headerbars/PrimaryNavBar';
@@ -98,8 +101,10 @@ class App extends React.Component {
     };
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     const { repoName } = this.state;
+    const { data } = await getData(getApiUrl(endpoints.frameworks));
+    this.setState({ frameworks: data });
 
     RepositoryModel.getList().then((repos) => {
       const newRepo = repos.find((repo) => repo.name === repoName);
@@ -332,6 +337,7 @@ class App extends React.Component {
       groupCountsExpanded,
       showShortCuts,
       pushHealthVisibility,
+      frameworks,
     } = this.state;
 
     // SplitPane will adjust the CSS height of the top component, but not the
@@ -422,6 +428,7 @@ class App extends React.Component {
                   user={user}
                   classificationTypes={classificationTypes}
                   classificationMap={classificationMap}
+                  frameworks={frameworks}
                 />
               )}
             </>

ui/job-view/details/DetailsPanel.jsx

@@ -14,6 +14,7 @@ import JobClassificationModel from '../../models/classification';
 import JobModel from '../../models/job';
 import JobLogUrlModel from '../../models/jobLogUrl';
 import PerfSeriesModel from '../../models/perfSeries';
+import { Perfdocs } from '../../perfherder/perf-helpers/perfdocs';
 
 import PinBoard from './PinBoard';
 import SummaryPanel from './summary/SummaryPanel';
@@ -109,7 +110,7 @@ class DetailsPanel extends React.Component {
   };
 
   selectJob = () => {
-    const { currentRepo, selectedJob } = this.props;
+    const { currentRepo, selectedJob, frameworks } = this.props;
     const push = this.findPush(selectedJob.push_id);
 
     this.setState(
@@ -255,6 +256,10 @@ class DetailsPanel extends React.Component {
                     }),
                   ),
                 );
+                const mappedFrameworks = {};
+                frameworks.forEach((element) => {
+                  mappedFrameworks[element.id] = element.name;
+                });
 
                 const seriesList = seriesListList
                   .map((item) => item.data)
@@ -276,6 +281,14 @@ class DetailsPanel extends React.Component {
                     measurementUnit: d.series.measurementUnit,
                     lowerIsBetter: d.series.lowerIsBetter,
                     title: d.series.name,
+                    suite: d.series.suite,
+                    options: d.series.options.join(' '),
+                    perfdocs: new Perfdocs(
+                      mappedFrameworks[d.series.frameworkId],
+                      d.series.suite,
+                      d.series.platform,
+                      d.series.name,
+                    ),
                   }));
               }
 

ui/job-view/details/tabs/PerformanceTab.jsx

@@ -112,7 +112,19 @@ class PerformanceTab extends React.PureComponent {
           </thead>
           <tbody>
             {sortedDetails.map(
-              ({ value, url, measurementUnit, lowerIsBetter, title }, idx) => (
+              (
+                {
+                  value,
+                  url,
+                  measurementUnit,
+                  lowerIsBetter,
+                  title,
+                  suite,
+                  perfdocs,
+                  options,
+                },
+                idx,
+              ) => (
                 // eslint-disable-next-line react/no-array-index-key
                 <tr key={idx}>
                   {/* Ensure the value and measurement are visually next to each
@@ -132,7 +144,22 @@ class PerformanceTab extends React.PureComponent {
                       View
                     </a>
                   </td>
-                  <td className="w-100">{title}</td>
+                  <td className="w-100">
+                    {perfdocs.hasDocumentation() ? (
+                      <div>
+                        <a
+                          href={perfdocs.documentationURL}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {`${suite} `}
+                        </a>
+                        {`${perfdocs.remainingTestName} ${options}`}
+                      </div>
+                    ) : (
+                      title
+                    )}
+                  </td>
                 </tr>
               ),
             )}

ui/perfherder/alerts/AlertTableRow.jsx

@@ -234,7 +234,12 @@ export default class AlertTableRow extends React.Component {
               className="alert-docs"
               data-testid={`alert ${alert.id} title`}
             >
-              <a data-testid="docs" href={perfdocs.documentationURL}>
+              <a
+                data-testid="docs"
+                href={perfdocs.documentationURL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 {suite}
               </a>{' '}
               {!duplicatedName && test}

ui/perfherder/compare/CompareTable.jsx

@@ -139,7 +139,13 @@ export default class CompareTable extends React.Component {
               <div className="d-flex align-items-end">
                 {hasDocumentation && testName ? (
                   <div>
-                    <a href={perfdocs.documentationURL}>{suite}</a>{' '}
+                    <a
+                      href={perfdocs.documentationURL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {suite}
+                    </a>{' '}
                     {perfdocs.remainingName}
                   </div>
                 ) : (

ui/perfherder/graphs/LegendCard.jsx

@@ -168,7 +168,15 @@ const LegendCard = ({
           {series.name}
         </Button>
         <div className="small legend-docs">
-          {hasDocumentation && <a href={perfdocs.documentationURL}>(docs)</a>}
+          {hasDocumentation && (
+            <a
+              href={perfdocs.documentationURL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              (docs)
+            </a>
+          )}
         </div>
         <Button
           color="link"

ui/perfherder/perf-helpers/perfdocs.js

@@ -12,10 +12,12 @@ const testDocumentationFrameworks = [
   'browsertime',
   'devtools',
 ];
+
 const browsertimeDocsUnavailableViews = [
   perfViews.compareView,
   perfViews.testsView,
 ];
+
 const supportedPerfdocsFrameworks = {
   talos: 'talos',
   awsy: 'awsy',
@@ -27,7 +29,7 @@ const supportedPerfdocsFrameworks = {
  * TODO: remove hardcoded names once suffixes are removed from Perfdocs
  * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#benchmarks
  */
-const browsertimeBenchmarks = [
+const browsertimeBenchmarksTests = [
   'ares6',
   'assorted-dom',
   'jetstream2',
@@ -75,10 +77,10 @@ const browsertimeBenchmarks = [
   'sunspider',
   'unity-webgl',
   'wasm-godot',
-  'wasm-godotaseline',
+  'wasm-godot-baseline',
   'wasm-godot-optimizing',
   'wasm-misc',
-  'wasm-miscaseline',
+  'wasm-misc-baseline',
   'wasm-misc-optimizing',
   'webaudio',
   'youtube-playback',
@@ -99,12 +101,23 @@ const browsertimeBenchmarks = [
   'youtube-playback-widevine-hfr',
 ];
 
-const invertedTestsNamesDevTools = {
-  'parent-process:toolbox': 'toolbox:parent-process',
-  'parent-process:target': 'target:parent-process',
-  'parent-process:reload': 'reload:parent-process',
-  'content-process:reload': 'reload:content-process',
-};
+/**
+ * TODO: remove hardcoded names once suffixes are removed from Perfdocs
+ * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#interactive
+ */
+const browsertimeInteractiveTests = [
+  'cnn-nav',
+  'facebook-nav',
+  'reddit-billgates-ama',
+  'reddit-billgates-post-1',
+  'reddit-billgates-post-2',
+];
+
+/**
+ * TODO: remove hardcoded names once suffixes are removed from Perfdocs
+ * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#custom
+ */
+const browsertimeCustomTests = ['process-switch', 'welcome'];
 
 export const removedOldTestsDevTools = [
   'total-after-gc',
@@ -129,12 +142,6 @@ export const nonDocumentedTestsDevTools = [
   'reload-webconsole:content-process',
 ];
 
-/**
- * TODO: remove hardcoded names once suffixes are removed from Perfdocs
- * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#custom
- */
-const browsertimeCustomTests = ['process-switch', 'welcome'];
-
 const baseURL = 'https://firefox-source-docs.mozilla.org/';
 
 export class Perfdocs {
@@ -148,6 +155,7 @@ export class Perfdocs {
     this.platform = platform || '';
     this.title = title || '';
     this.remainingTestName = '';
+    this.url = '';
   }
 
   get remainingName() {
@@ -158,34 +166,55 @@ export class Perfdocs {
   }
 
   get documentationURL() {
-    let url;
     const frameworkName = supportedPerfdocsFrameworks[this.framework];
     if (!frameworkName) {
-      url = baseURL.concat('testing/perfdocs/');
-      return url;
+      this.url = baseURL.concat('testing/perfdocs/');
+      return this.url;
     }
-    url =
+    this.url =
       frameworkName === 'performance-tests-overview'
         ? baseURL.concat('devtools/tests/')
         : baseURL.concat('testing/perfdocs/');
-    if (this.suite in invertedTestsNamesDevTools) {
-      this.suite = invertedTestsNamesDevTools[this.suite];
-    }
-    url = url.concat(
-      frameworkName,
-      '.html#',
-      this.suite.replace(/:|_|\s|\./g, '-').toLowerCase(),
-    );
+
+    this.url = this.url.concat(frameworkName, '.html#');
+
     if (frameworkName === 'raptor') {
-      if (browsertimeBenchmarks.includes(this.suite)) {
-        url = url.concat('-b');
-      } else if (browsertimeCustomTests.includes(this.suite)) {
-        url = url.concat('-c');
-      } else if (this.platform.includes('android')) {
-        url = url.concat('-m');
-      } else url = url.concat('-d');
+      // amazon-sec doesn't have yet documentation added
+      if (this.suite === 'amazon-sec') {
+        this.url = this.url.slice(0, -1);
+        return this.url;
+      }
+      this.url = this.updatedURLWithSuffix;
+    } else {
+      // framework is either awsy, talos or devtools
+      if (this.suite === 'about_newtab_with_snippets') {
+        // talos
+        this.suite = 'about-newtab-with-snippets';
+      }
+      this.url = this.url.concat(
+        this.suite.replace(/:|\s|\./g, '-').toLowerCase(),
+      );
     }
-    return url;
+    return this.url;
+  }
+
+  get updatedURLWithSuffix() {
+    let suffixForSuite;
+    const suiteNameBeforeDot = this.suite.split('.')[0];
+    if (browsertimeInteractiveTests.includes(suiteNameBeforeDot)) {
+      this.url = this.url.concat(suiteNameBeforeDot);
+      suffixForSuite = '-i';
+    } else {
+      this.url = this.url.concat(this.suite);
+      if (browsertimeBenchmarksTests.includes(this.suite)) {
+        suffixForSuite = '-b';
+      } else if (browsertimeCustomTests.includes(this.suite)) {
+        suffixForSuite = '-c';
+      } else if (this.platform.includes('android')) {
+        suffixForSuite = '-m';
+      } else suffixForSuite = '-d';
+    }
+    return this.url.concat(suffixForSuite);
   }
 
   hasDocumentation(perfherderView = null) {

ui/perfherder/tests/TestsTable.jsx

@@ -38,7 +38,13 @@ export default function TestsTable(props) {
         return (
           <div>
             {hasDocumentation ? (
-              <a href={perfdocs.documentationURL}>{row.suite}</a>
+              <a
+                href={perfdocs.documentationURL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {row.suite}
+              </a>
             ) : (
               <div>{row.suite}</div>
             )}