feat(perf-views) Add release markers to duration breakdown (#18484)

Add release markers to the release breakdown chart. This will help with
diagnosing performance changes related to releases.

I've moved decodeScalar() out of the eventsv2 views directory as it is
used in other view paths as well.

Author: markstory

src/sentry/static/sentry/app/utils/discover/eventView.tsx

@@ -13,7 +13,8 @@ import {SavedQuery, NewQuery, SelectValue, User} from 'app/types';
 import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams';
 import {COL_WIDTH_UNDEFINED} from 'app/components/gridEditable';
 import {TableColumn, TableColumnSort} from 'app/views/eventsV2/table/types';
-import {decodeColumnOrder, decodeScalar} from 'app/views/eventsV2/utils';
+import {decodeColumnOrder} from 'app/views/eventsV2/utils';
+import {decodeScalar} from 'app/utils/queryString';
 
 import {
   Sort,

src/sentry/static/sentry/app/utils/queryString.tsx

@@ -56,7 +56,23 @@ export function appendTagCondition(
   return currentQuery;
 }
 
+export function decodeScalar(
+  value: string[] | string | undefined | null
+): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  const unwrapped =
+    Array.isArray(value) && value.length > 0
+      ? value[0]
+      : isString(value)
+      ? value
+      : undefined;
+  return isString(unwrapped) ? unwrapped : undefined;
+}
+
 export default {
+  decodeScalar,
   formatQueryString,
   addQueryParamsToExistingUrl,
   appendTagCondition,

src/sentry/static/sentry/app/views/eventsV2/landing.tsx

@@ -25,9 +25,10 @@ import localStorage from 'app/utils/localStorage';
 import space from 'app/styles/space';
 import withOrganization from 'app/utils/withOrganization';
 import EventView from 'app/utils/discover/eventView';
+import {decodeScalar} from 'app/utils/queryString';
 
 import {DEFAULT_EVENT_VIEW} from './data';
-import {getPrebuiltQueries, decodeScalar} from './utils';
+import {getPrebuiltQueries} from './utils';
 import QueryList from './queryList';
 import backgroundSpace from '../../../images/spot/background-space.svg';
 

src/sentry/static/sentry/app/views/eventsV2/utils.tsx

@@ -1,5 +1,4 @@
 import Papa from 'papaparse';
-import isString from 'lodash/isString';
 import {Location, Query} from 'history';
 import {browserHistory} from 'react-router';
 
@@ -121,21 +120,6 @@ export function getPrebuiltQueries(organization: Organization) {
   return views;
 }
 
-export function decodeScalar(
-  value: string[] | string | undefined | null
-): string | undefined {
-  if (!value) {
-    return undefined;
-  }
-  const unwrapped =
-    Array.isArray(value) && value.length > 0
-      ? value[0]
-      : isString(value)
-      ? value
-      : undefined;
-  return isString(unwrapped) ? unwrapped : undefined;
-}
-
 export function downloadAsCsv(tableData, columnOrder, filename) {
   const {data} = tableData;
   const headings = columnOrder.map(column => column.name);

src/sentry/static/sentry/app/views/performance/data.tsx

@@ -3,7 +3,7 @@ import {Location} from 'history';
 import {t} from 'app/locale';
 import {NewQuery} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
-import {decodeScalar} from 'app/views/eventsV2/utils';
+import {decodeScalar} from 'app/utils/queryString';
 import {stringifyQueryObject} from 'app/utils/tokenizeSearch';
 
 export const DEFAULT_STATS_PERIOD = '24h';

src/sentry/static/sentry/app/views/performance/table.tsx

@@ -14,7 +14,7 @@ import EventView, {MetaType, EventData} from 'app/utils/discover/eventView';
 import SortLink from 'app/views/eventsV2/sortLink';
 import {TableData, TableDataRow, TableColumn} from 'app/views/eventsV2/table/types';
 import HeaderCell from 'app/views/eventsV2/table/headerCell';
-import {decodeScalar} from 'app/views/eventsV2/utils';
+import {decodeScalar} from 'app/utils/queryString';
 import withProjects from 'app/utils/withProjects';
 import SearchBar from 'app/components/searchBar';
 import DiscoverQuery from 'app/utils/discover/discoverQuery';

src/sentry/static/sentry/app/views/performance/transactionSummary/durationChart.tsx

@@ -10,12 +10,14 @@ import ChartZoom from 'app/components/charts/chartZoom';
 import ErrorPanel from 'app/components/charts/components/errorPanel';
 import TransparentLoadingMask from 'app/components/charts/components/transparentLoadingMask';
 import TransitionChart from 'app/components/charts/transitionChart';
+import ReleaseSeries from 'app/components/charts/releaseSeries';
 import {AREA_COLORS, getInterval} from 'app/components/charts/utils';
 import {IconWarning} from 'app/icons';
 import EventsRequest from 'app/views/events/utils/eventsRequest';
 import {getUtcToLocalDateObject} from 'app/utils/dates';
 import EventView from 'app/utils/discover/eventView';
 import withApi from 'app/utils/withApi';
+import {decodeScalar} from 'app/utils/queryString';
 import theme from 'app/utils/theme';
 import {getDuration} from 'app/utils/formatters';
 
@@ -61,6 +63,7 @@ class DurationChart extends React.Component<Props> {
       : undefined;
 
     const end = this.props.end ? getUtcToLocalDateObject(this.props.end) : undefined;
+    const utc = decodeScalar(router.location.query.utc);
 
     const legend = {
       right: 16,
@@ -152,24 +155,28 @@ class DurationChart extends React.Component<Props> {
                   : [];
 
                 return (
-                  <TransitionChart loading={loading} reloading={reloading}>
-                    <TransparentLoadingMask visible={reloading} />
-                    <AreaChart
-                      {...zoomRenderProps}
-                      legend={legend}
-                      series={series}
-                      seriesOptions={{
-                        showSymbol: false,
-                      }}
-                      tooltip={tooltip}
-                      grid={{
-                        left: '24px',
-                        right: '24px',
-                        top: '32px',
-                        bottom: '12px',
-                      }}
-                    />
-                  </TransitionChart>
+                  <ReleaseSeries utc={utc} api={api} projects={project}>
+                    {({releaseSeries}) => (
+                      <TransitionChart loading={loading} reloading={reloading}>
+                        <TransparentLoadingMask visible={reloading} />
+                        <AreaChart
+                          {...zoomRenderProps}
+                          legend={legend}
+                          series={[...series, ...releaseSeries]}
+                          seriesOptions={{
+                            showSymbol: false,
+                          }}
+                          tooltip={tooltip}
+                          grid={{
+                            left: '24px',
+                            right: '24px',
+                            top: '32px',
+                            bottom: '12px',
+                          }}
+                        />
+                      </TransitionChart>
+                    )}
+                  </ReleaseSeries>
                 );
               }}
             </EventsRequest>

src/sentry/static/sentry/app/views/performance/transactionSummary/index.tsx

@@ -15,7 +15,7 @@ import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
 import {PageContent} from 'app/styles/organization';
 import EventView, {isAPIPayloadSimilar} from 'app/utils/discover/eventView';
-import {decodeScalar} from 'app/views/eventsV2/utils';
+import {decodeScalar} from 'app/utils/queryString';
 import {stringifyQueryObject} from 'app/utils/tokenizeSearch';
 import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
 import withApi from 'app/utils/withApi';

tests/js/spec/utils/queryString.spec.js

@@ -70,3 +70,19 @@ describe('appendTagCondition', function() {
     expect(result).toEqual('user.name:"jill jones"');
   });
 });
+
+describe('decodeScalar()', function() {
+  it('unwraps array values', function() {
+    expect(utils.decodeScalar(['one', 'two'])).toEqual('one');
+  });
+
+  it('handles strings', function() {
+    expect(utils.decodeScalar('one')).toEqual('one');
+  });
+
+  it('handles falsey values', function() {
+    expect(utils.decodeScalar(undefined)).toBeUndefined();
+    expect(utils.decodeScalar(false)).toBeUndefined();
+    expect(utils.decodeScalar('')).toBeUndefined();
+  });
+});