Bug 1834970 - Embed the side-by-side job links in Perfherder alerts v…

…iew (#7712)
mozilla · Jun 29, 2023 · 8c98e98 · 8c98e98
1 parent 8805115
commit 8c98e98
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 78 deletions.
diff --git a/ui/perfherder/alerts/AlertTable.jsx b/ui/perfherder/alerts/AlertTable.jsx
@@ -6,6 +6,7 @@ import orderBy from 'lodash/orderBy';
 import {
   alertStatusMap,
   maximumVisibleAlertSummaryRows,
+  browsertimeId,
 } from '../perf-helpers/constants';
 import {
   genericErrorMessage,
@@ -67,6 +68,11 @@ export default class AlertTable extends React.Component {
           sortValue: 't_value',
           currentSort: tableSort.default,
         },
+        DebuggingInformation: {
+          name: 'Debug Tools',
+          sortValue: '',
+          currentSort: tableSort.default,
+        },
         NoiseProfile: {
           name: 'Information',
           sortValue: 'noise_profile',
@@ -355,6 +361,14 @@ export default class AlertTable extends React.Component {
                         onChangeSort={this.onChangeSort}
                       />
                     </th>
+                    {alertSummary.framework === browsertimeId && (
+                      <th className="align-bottom text-nowrap">
+                        <span>{tableConfig.DebuggingInformation.name}</span>
+                        <SortButtonDisabled
+                          column={tableConfig.DebuggingInformation}
+                        />
+                      </th>
+                    )}
                     <th className="align-bottom">
                       <TableColumnHeader
                         column={tableConfig.NoiseProfile}

diff --git a/ui/perfherder/alerts/AlertTableRow.jsx b/ui/perfherder/alerts/AlertTableRow.jsx
@@ -9,11 +9,13 @@ import {
   faUser,
   faCheck,
   faChartLine,
+  faCirclePlay,
   faFire,
   faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons';
 import { Link } from 'react-router-dom';
+import Badge from 'reactstrap/lib/Badge';
 
 import { createQueryParams } from '../../helpers/url';
 import {
@@ -23,6 +25,7 @@ import {
   formatNumber,
   getFrameworkName,
   getTimeRange,
+  getSideBySideLink,
 } from '../perf-helpers/helpers';
 import SimpleTooltip from '../../shared/SimpleTooltip';
 import {
@@ -31,6 +34,9 @@ import {
   alertBackfillResultVisual,
   backfillRetriggeredTitle,
   noiseProfiles,
+  browsertimeId,
+  browsertimeEssentialTests,
+  browsertimeBenchmarksTests,
 } from '../perf-helpers/constants';
 import { Perfdocs } from '../perf-helpers/perfdocs';
 
@@ -267,6 +273,28 @@ export default class AlertTableRow extends React.Component {
     return `./comparesubtest${createQueryParams(urlParameters)}`;
   };
 
+  buildSideBySideLink = () => {
+    const { alert, alertSummary } = this.props;
+    const platform = alert.series_signature.machine_platform;
+    const { suite } = alert.series_signature;
+    let testName = suite;
+    if (suite in browsertimeEssentialTests) {
+      testName = `essential ${suite}`;
+      if ('bytecode-cached' in alert.series_signature.tags) {
+        testName = `bytecode ${suite}`;
+      }
+    }
+    const jobUrl = getSideBySideLink(
+      alertSummary.repository,
+      alertSummary.prev_push_revision,
+      alertSummary.revision,
+      platform,
+      testName,
+    );
+
+    return jobUrl;
+  };
+
   showCriticalMagnitudeIcons(alert) {
     const alertMagnitude = Math.round(alert.amount_pct);
     const alertNewValue = alert.new_value;
@@ -360,6 +388,21 @@ export default class AlertTableRow extends React.Component {
     const noiseProfileTooltip = alert.noise_profile
       ? noiseProfiles[alert.noise_profile.replace('/', '')]
       : noiseProfiles.NA;
+    // TODO: make a side-by-side status of its own. We know that side-by-side was triggered
+    //  if only backfill bot has one of the three statuses below
+    const backfillResultStatuses = [
+      alertBackfillResultStatusMap.backfilled,
+      alertBackfillResultStatusMap.successful,
+      alertBackfillResultStatusMap.failed,
+    ];
+    const sxsTriggered =
+      alert.backfill_record &&
+      backfillResultStatuses.includes(alert.backfill_record.status);
+    const showSideBySideLink =
+      alert.series_signature.framework_id === browsertimeId &&
+      !alert.series_signature.tags.includes('interactive') &&
+      !browsertimeBenchmarksTests.includes(alert.series_signature.suite) &&
+      sxsTriggered;
 
     const backfillStatusInfo = this.getBackfillStatusInfo(alert);
     let sherlockTooltip = backfillStatusInfo && backfillStatusInfo.message;
@@ -463,6 +506,30 @@ export default class AlertTableRow extends React.Component {
             />
           </div>
         </td>
+        {alertSummary.framework === browsertimeId && (
+          <td className="table-width-md">
+            {showSideBySideLink ? (
+              <span className="text-darker-info">
+                <a
+                  href={this.buildSideBySideLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-dark button btn border p-0 border-0 bg-transparent"
+                  aria-label="side-by-side"
+                >
+                  <FontAwesomeIcon
+                    title="Open side-by-side link"
+                    icon={faCirclePlay}
+                  />
+                </a>
+              </span>
+            ) : (
+              <Badge className="mb-1" color="light">
+                None
+              </Badge>
+            )}
+          </td>
+        )}
         <td className="table-width-lg">
           <div className="information-container">
             <div className="option">

diff --git a/ui/perfherder/perf-helpers/constants.js b/ui/perfherder/perf-helpers/constants.js
@@ -204,3 +204,94 @@ export const noiseProfiles = {
 export const timeToTriage = 3;
 
 export const replicatesMaxLength = 250;
+
+export const browsertimeEssentialTests = [
+  'amazon',
+  'bing-search',
+  'cnn',
+  'fandom',
+  'google-slides',
+  'instagram',
+  'twitter',
+  'wikipedia',
+  'yahoo-mail',
+];
+
+/**
+ * Used for building the documentation links (Perfdocs) and side-by-side links.
+ * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#benchmarks
+ */
+export const browsertimeBenchmarksTests = [
+  'ares6',
+  'assorted-dom',
+  'jetstream2',
+  'matrix-react-bench',
+  '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-godot-baseline',
+  'wasm-godot-optimizing',
+  'wasm-misc',
+  'wasm-misc-baseline',
+  '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',
+];
+
+export const browsertimeId = 13;
diff --git a/ui/perfherder/perf-helpers/helpers.js b/ui/perfherder/perf-helpers/helpers.js
@@ -2,14 +2,15 @@ import moment from 'moment';
 import numeral from 'numeral';
 import queryString from 'query-string';
 
-import { getApiUrl } from '../../helpers/url';
+import { getApiUrl, getJobsUrl } from '../../helpers/url';
 import { update, processResponse } from '../../helpers/http';
 import PerfSeriesModel, {
   getSeriesName,
   getTestName,
 } from '../../models/perfSeries';
 import RepositoryModel from '../../models/repository';
 import JobModel from '../../models/job';
+import { sxsTaskName } from '../../helpers/constants';
 
 import {
   endpoints,
@@ -377,6 +378,26 @@ export const createGraphsLinks = (
   return links;
 };
 
+export const getSideBySideLink = (
+  repository,
+  baseRevision,
+  newRevision,
+  platform,
+  testName,
+) => {
+  const revisions = `${baseRevision.slice(0, 12)} ${newRevision.slice(0, 12)}`;
+
+  const jobUrl = getJobsUrl({
+    repo: repository,
+    tochange: newRevision,
+    fromchange: baseRevision,
+    searchStr: `${platform} ${testName} ${revisions} ${sxsTaskName}`,
+    group_state: 'expanded',
+  });
+
+  return jobUrl;
+};
+
 // TODO change usage of signature_hash to signature.id
 // for originalSignature and newSignature query params
 const Alert = (alertData, optionCollectionMap) => ({

diff --git a/ui/perfherder/perf-helpers/perfdocs.js b/ui/perfherder/perf-helpers/perfdocs.js
@@ -1,3 +1,5 @@
+import { browsertimeBenchmarksTests } from './constants';
+
 export const perfViews = {
   graphsView: 'graphsView',
   compareView: 'compareView',
@@ -25,83 +27,6 @@ const supportedPerfdocsFrameworks = {
   devtools: 'performance-tests-overview',
 };
 
-/**
- * TODO: remove hardcoded names once suffixes are removed from Perfdocs
- * @link https://firefox-source-docs.mozilla.org/testing/perfdocs/raptor.html#benchmarks
- */
-const browsertimeBenchmarksTests = [
-  'ares6',
-  'assorted-dom',
-  'jetstream2',
-  'matrix-react-bench',
-  '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-godot-baseline',
-  'wasm-godot-optimizing',
-  'wasm-misc',
-  'wasm-misc-baseline',
-  '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#interactive