Bug 1698569 - Add browsertime documentation links (#7234)

tests/ui/perfherder/legend_card_test.jsx

@@ -21,6 +21,7 @@ const testData = [
     signatureHash: '9c0028a9c871b51c8296485c8fc09b21fe41eec0',
     signature_id: 1647493,
     visible: true,
+    suite: 'tp5o_webext',
   },
   {
     color: ['darkorchid', '#9932cc'],
@@ -37,6 +38,7 @@ const testData = [
     signatureHash: '554cc85b904ede676c691b65bbe19911c7320718',
     signature_id: 2146210,
     visible: true,
+    suite: 'tp5o_webext',
   },
 ];
 

ui/perfherder/alerts/AlertTableRow.jsx

@@ -20,16 +20,15 @@ import {
   modifyAlert,
   formatNumber,
   getFrameworkName,
-  getSplitTestTitle,
 } from '../perf-helpers/helpers';
 import SimpleTooltip from '../../shared/SimpleTooltip';
 import {
   alertStatusMap,
   backfillRetriggeredTitle,
   phDefaultTimeRangeValue,
-  testDocumentationFrameworks,
   phTimeRanges,
 } from '../perf-helpers/constants';
+import { Perfdocs } from '../perf-helpers/perfdocs';
 
 import AlertTablePlatform from './AlertTablePlatform';
 import AlertTableTagsOptions from './AlertTableTagsOptions';
@@ -175,12 +174,10 @@ export default class AlertTableRow extends React.Component {
       textEffect = 'strike-through';
     }
     const frameworkName = getFrameworkName(frameworks, framework);
-    const hasDocumentation = testDocumentationFrameworks.includes(
-      frameworkName,
-    );
     const { title } = alert;
-    const { suite, test } = alert.series_signature;
-    const { url } = getSplitTestTitle(title, suite, frameworkName);
+    const { suite, test, machine_platform: platform } = alert.series_signature;
+    const perfdocs = new Perfdocs(frameworkName, suite, platform, title);
+    const hasDocumentation = perfdocs.hasDocumentation();
     const duplicatedName = suite === test;
     return (
       <div>
@@ -194,7 +191,7 @@ export default class AlertTableRow extends React.Component {
               className="alert-docs"
               data-testid={`alert ${alert.id} title`}
             >
-              <a data-testid="docs" href={url}>
+              <a data-testid="docs" href={perfdocs.documentationURL}>
                 {suite}
               </a>{' '}
               {!duplicatedName && test}

ui/perfherder/compare/CompareTable.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 
-import { getHashBasedId, getSplitTestTitle } from '../perf-helpers/helpers';
-import { testDocumentationFrameworks } from '../perf-helpers/constants';
+import { getHashBasedId } from '../perf-helpers/helpers';
+import { Perfdocs, perfViews } from '../perf-helpers/perfdocs';
 import { hashFunction } from '../../helpers/utils';
 import { tableSort, getNextSort, sort, sortTables } from '../perf-helpers/sort';
 import TableColumnHeader from '../shared/TableColumnHeader';
@@ -120,14 +120,8 @@ export default class CompareTable extends React.Component {
     const { data } = this.state;
     const { tableConfig } = this.state;
     const { suite } = data[0];
-    const { url, remainingTestName } = getSplitTestTitle(
-      testName,
-      suite,
-      frameworkName,
-    );
-    const hasDocumentation = testDocumentationFrameworks.includes(
-      frameworkName,
-    );
+    const perfdocs = new Perfdocs(frameworkName, suite, null, testName);
+    const hasDocumentation = perfdocs.hasDocumentation(perfViews.compareView);
     return (
       <Table
         id={getHashBasedId(testName, hashFunction)}
@@ -145,7 +139,8 @@ export default class CompareTable extends React.Component {
               <div className="d-flex align-items-end">
                 {hasDocumentation && testName ? (
                   <div>
-                    <a href={url}>{suite}</a> {remainingTestName}
+                    <a href={perfdocs.documentationURL}>{suite}</a>{' '}
+                    {perfdocs.remainingName}
                   </div>
                 ) : (
                   testName

ui/perfherder/graphs/LegendCard.jsx

@@ -4,11 +4,9 @@ import { Badge, Button, FormGroup, Input } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
-import { getFrameworkName, getSplitTestTitle } from '../perf-helpers/helpers';
-import {
-  graphColors,
-  testDocumentationFrameworks,
-} from '../perf-helpers/constants';
+import { getFrameworkName } from '../perf-helpers/helpers';
+import { graphColors } from '../perf-helpers/constants';
+import { Perfdocs } from '../perf-helpers/perfdocs';
 import GraphIcon from '../../shared/GraphIcon';
 
 const LegendCard = ({
@@ -134,9 +132,10 @@ const LegendCard = ({
   const subtitleStyle = 'p-0 mb-0 border-0 text-secondary text-left';
   const symbolType = series.symbol || ['circle', 'outline'];
 
-  const framework = getFrameworkName(frameworks, series.framework_id);
-  const { url } = getSplitTestTitle(series.name, series.suite, framework);
-  const hasDocumentation = testDocumentationFrameworks.includes(framework);
+  const { suite, platform, framework_id: frameworkId } = series;
+  const framework = getFrameworkName(frameworks, frameworkId);
+  const perfdocs = new Perfdocs(framework, suite, platform);
+  const hasDocumentation = perfdocs.hasDocumentation();
   return (
     <FormGroup check className="pl-0 border">
       <Button
@@ -168,7 +167,7 @@ const LegendCard = ({
           {series.name}
         </Button>
         <div className="small legend-docs">
-          {hasDocumentation && <a href={url}>(docs)</a>}
+          {hasDocumentation && <a href={perfdocs.documentationURL}>(docs)</a>}
         </div>
         <Button
           color="link"

ui/perfherder/perf-helpers/constants.js

@@ -129,8 +129,6 @@ export const visualMetrics = [
   'videoRecordingStart',
 ];
 
-export const testDocumentationFrameworks = ['talos', 'awsy'];
-
 export const scrollTypes = {
   prev: 'prev',
   next: 'next',

ui/perfherder/perf-helpers/helpers.js

@@ -428,30 +428,11 @@ export const addResultsLink = (taskId) => {
   return `${taskLink}${taskId}${resultsPath}`;
 };
 
-export const getTestDocumentationURL = (framework, suite) => {
-  const baseURL = 'https://firefox-source-docs.mozilla.org/testing/perfdocs/';
-  return baseURL.concat(
-    framework,
-    '.html#',
-    suite.replace(/_|\s/g, '-').toLowerCase(),
-  );
-};
-
 export const getFrameworkName = (frameworks, frameworkId) => {
   const framework = frameworks.find((item) => item.id === frameworkId);
   return framework ? framework.name : unknownFrameworkMessage;
 };
 
-export const getSplitTestTitle = (title, suite, framework) => {
-  let url;
-  let remainingTestName;
-  if (title && suite) {
-    remainingTestName = title.replace(suite, '');
-    url = getTestDocumentationURL(framework, suite);
-  }
-  return { url, remainingTestName };
-};
-
 const getPlatformInfo = (platforms) => {
   const platformInfo = [];
   platforms.forEach((platform) =>

ui/perfherder/perf-helpers/perfdocs.js

@@ -0,0 +1,155 @@
+export const perfViews = {
+  graphsView: 'graphsView',
+  compareView: 'compareView',
+  alertsView: 'alertView',
+  testsView: 'testsView',
+  fileBugMarkdown: 'fileBugMarkdown',
+};
+
+const testDocumentationFrameworks = ['talos', 'awsy', 'browsertime'];
+const browsertimeDocsUnavailableViews = [
+  perfViews.compareView,
+  perfViews.testsView,
+];
+const supportedPerfdocsFrameworks = {
+  talos: 'talos',
+  awsy: 'awsy',
+  browsertime: 'raptor',
+};
+
+/**
+ * TODO: remove hardcoded names once suffixes are removed from Perfdocs
+ * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#benchmarks
+ */
+const browsertimeBenchmarks = [
+  'ares6',
+  'assorted-dom',
+  'jetstream2',
+  'motionmark-animometer',
+  'motionmark-htmlsuite',
+  'raptor-speedometer-geckoview',
+  'raptor-youtube-playback-av1-sfr-chrome',
+  'raptor-youtube-playback-av1-sfr-fenix',
+  'raptor-youtube-playback-av1-sfr-firefox',
+  'raptor-youtube-playback-av1-sfr-geckoview',
+  'raptor-youtube-playback-h264-1080p30-firefox',
+  'raptor-youtube-playback-h264-1080p60-firefox',
+  'raptor-youtube-playback-h264-full-1080p30-firefox',
+  'raptor-youtube-playback-h264-full-1080p60-firefox',
+  'raptor-youtube-playback-h264-sfr-chrome',
+  'raptor-youtube-playback-h264-sfr-fenix',
+  'raptor-youtube-playback-h264-sfr-firefox',
+  'raptor-youtube-playback-h264-sfr-geckoview',
+  'raptor-youtube-playback-hfr-chrome',
+  'raptor-youtube-playback-hfr-fenix',
+  'raptor-youtube-playback-hfr-firefox',
+  'raptor-youtube-playback-hfr-geckoview',
+  'raptor-youtube-playback-v9-1080p30-firefox',
+  'raptor-youtube-playback-v9-1080p60-firefox',
+  'raptor-youtube-playback-v9-full-1080p30-firefox',
+  'raptor-youtube-playback-v9-full-1080p60-firefox',
+  'raptor-youtube-playback-vp9-sfr-chrome',
+  'raptor-youtube-playback-vp9-sfr-fenix',
+  'raptor-youtube-playback-vp9-sfr-firefox',
+  'raptor-youtube-playback-vp9-sfr-geckoview',
+  'raptor-youtube-playback-widevine-h264-sfr-chrome',
+  'raptor-youtube-playback-widevine-h264-sfr-fenix',
+  'raptor-youtube-playback-widevine-h264-sfr-firefox',
+  'raptor-youtube-playback-widevine-h264-sfr-geckoview',
+  'raptor-youtube-playback-widevine-hfr-chrome',
+  'raptor-youtube-playback-widevine-hfr-fenix',
+  'raptor-youtube-playback-widevine-hfr-firefox',
+  'raptor-youtube-playback-widevine-hfr-geckoview',
+  'raptor-youtube-playback-widevine-vp9-sfr-chrome',
+  'raptor-youtube-playback-widevine-vp9-sfr-fenix',
+  'raptor-youtube-playback-widevine-vp9-sfr-firefox',
+  'raptor-youtube-playback-widevine-vp9-sfr-geckoview',
+  'speedometer',
+  'stylebench',
+  'sunspider',
+  'unity-webgl',
+  'wasm-godot',
+  'wasm-godotaseline',
+  'wasm-godot-optimizing',
+  'wasm-misc',
+  'wasm-miscaseline',
+  'wasm-misc-optimizing',
+  'webaudio',
+  'youtube-playback',
+  'youtube-playback-av1-sfr',
+  'youtube-playback-h264-1080p30',
+  'youtube-playback-h264-1080p60',
+  'youtube-playback-h264-full-1080p30',
+  'youtube-playback-h264-full-1080p60',
+  'youtube-playback-h264-sfr',
+  'youtube-playback-hfr',
+  'youtube-playback-v9-1080p30',
+  'youtube-playback-v9-1080p60',
+  'youtube-playback-v9-full-1080p30',
+  'youtube-playback-v9-full-1080p60',
+  'youtube-playback-vp9-sfr',
+  'youtube-playback-widevine-h264-sfr',
+  'youtube-playback-widevine-hfr',
+  'youtube-playback-widevine-hfr',
+];
+
+/**
+ * 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/testing/perfdocs/';
+
+export class Perfdocs {
+  /**
+   * Class that provides a link where possible with
+   * detailed information about each test suite.
+   */
+  constructor(framework, suite, platform = null, title = null) {
+    this.framework = framework;
+    this.suite = suite;
+    this.platform = platform;
+    this.title = title;
+    this.url = null;
+    this.remainingTestName = null;
+  }
+
+  get remainingName() {
+    if (!this.remainingTestName) {
+      this.remainingTestName = this.title.replace(this.suite, '');
+    }
+    return this.remainingTestName;
+  }
+
+  get documentationURL() {
+    if (!this.url) {
+      const frameworkName = supportedPerfdocsFrameworks[this.framework];
+      this.url = baseURL.concat(
+        frameworkName,
+        '.html#',
+        this.suite.replace(/_|\s/g, '-').toLowerCase(),
+      );
+      if (this.framework === 'browsertime') {
+        if (browsertimeBenchmarks.includes(this.suite)) {
+          this.url = this.url.concat('-b');
+        } else if (browsertimeCustomTests.includes(this.suite)) {
+          this.url = this.url.concat('-c');
+        } else if (this.platform.includes('android')) {
+          this.url = this.url.concat('-m');
+        } else this.url = this.url.concat('-d');
+      }
+    }
+    return this.url;
+  }
+
+  hasDocumentation(perfherderView = null) {
+    if (
+      this.framework === 'browsertime' &&
+      browsertimeDocsUnavailableViews.includes(perfherderView)
+    ) {
+      return false;
+    }
+    return testDocumentationFrameworks.includes(this.framework);
+  }
+}

ui/perfherder/perf-helpers/textualSummary.js

@@ -1,8 +1,9 @@
 import numeral from 'numeral';
 import sortBy from 'lodash/sortBy';
 
-import { alertStatusMap, testDocumentationFrameworks } from './constants';
-import { getFrameworkName, getTestDocumentationURL } from './helpers';
+import { alertStatusMap } from './constants';
+import { getFrameworkName } from './helpers';
+import { Perfdocs } from './perfdocs';
 
 export default class TextualSummary {
   constructor(
@@ -81,8 +82,9 @@ export default class TextualSummary {
       this.frameworks,
       this.alertSummary.framework,
     );
-    const url = getTestDocumentationURL(frameworkName, suite);
-    const suiteName = testDocumentationFrameworks.includes(frameworkName)
+    const perfdocs = new Perfdocs(frameworkName, suite, platform);
+    const url = perfdocs.documentationURL;
+    const suiteName = perfdocs.hasDocumentation()
       ? `[${suite}](${url})`
       : suite;
     const suiteTestName = suite === test ? suiteName : `${suiteName} ${test}`;

ui/perfherder/tests/TestsTable.jsx

@@ -3,11 +3,8 @@ import PropTypes from 'prop-types';
 import { Container } from 'reactstrap';
 import ReactTable from 'react-table';
 
-import {
-  noResultsMessage,
-  testDocumentationFrameworks,
-} from '../perf-helpers/constants';
-import { getTestDocumentationURL } from '../perf-helpers/helpers';
+import { noResultsMessage } from '../perf-helpers/constants';
+import { Perfdocs, perfViews } from '../perf-helpers/perfdocs';
 
 import ItemList from './ItemList';
 
@@ -28,24 +25,24 @@ export default function TestsTable(props) {
     paddingBottom: 10,
   };
 
-  const hasDocumentation = testDocumentationFrameworks.includes(framework);
-
   const columns = [
     {
       headerStyle,
       Header: 'Suite',
       accessor: 'suite',
-      Cell: ({ row }) => (
-        <div>
-          {hasDocumentation ? (
-            <a href={getTestDocumentationURL(framework, row.suite)}>
-              {row.suite}
-            </a>
-          ) : (
-            <div>{row.suite}</div>
-          )}
-        </div>
-      ),
+      Cell: ({ row }) => {
+        const perfdocs = new Perfdocs(framework, row.suite);
+        const hasDocumentation = perfdocs.hasDocumentation(perfViews.testsView);
+        return (
+          <div>
+            {hasDocumentation ? (
+              <a href={perfdocs.documentationURL}>{row.suite}</a>
+            ) : (
+              <div>{row.suite}</div>
+            )}
+          </div>
+        );
+      },
     },
     {
       headerStyle,