content.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. import {Component, Fragment} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import type {Location} from 'history';
  5. import {Alert} from 'sentry/components/alert';
  6. import {Breadcrumbs} from 'sentry/components/breadcrumbs';
  7. import {CompactSelect} from 'sentry/components/compactSelect';
  8. import SearchBar from 'sentry/components/events/searchBar';
  9. import * as Layout from 'sentry/components/layouts/thirds';
  10. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  11. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  12. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  13. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  14. import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
  15. import TransactionNameSearchBar from 'sentry/components/performance/searchBar';
  16. import {MAX_QUERY_LENGTH} from 'sentry/constants';
  17. import {t} from 'sentry/locale';
  18. import {space} from 'sentry/styles/space';
  19. import type {Organization, PageFilters, Project} from 'sentry/types';
  20. import {trackAnalytics} from 'sentry/utils/analytics';
  21. import type EventView from 'sentry/utils/discover/eventView';
  22. import {generateAggregateFields} from 'sentry/utils/discover/fields';
  23. import {decodeScalar} from 'sentry/utils/queryString';
  24. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  25. import withPageFilters from 'sentry/utils/withPageFilters';
  26. import {getPerformanceLandingUrl, getTransactionSearchQuery} from '../utils';
  27. import ChangedTransactions from './changedTransactions';
  28. import type {TrendFunctionField, TrendView} from './types';
  29. import {TrendChangeType} from './types';
  30. import {
  31. DEFAULT_MAX_DURATION,
  32. DEFAULT_TRENDS_STATS_PERIOD,
  33. getCurrentTrendFunction,
  34. getCurrentTrendParameter,
  35. getSelectedQueryKey,
  36. modifyTransactionNameTrendsQuery,
  37. modifyTrendsViewDefaultPeriod,
  38. resetCursors,
  39. TRENDS_FUNCTIONS,
  40. TRENDS_PARAMETERS,
  41. } from './utils';
  42. type Props = {
  43. eventView: EventView;
  44. location: Location;
  45. organization: Organization;
  46. projects: Project[];
  47. selection: PageFilters;
  48. };
  49. type State = {
  50. error?: string;
  51. previousTrendFunction?: TrendFunctionField;
  52. };
  53. export const defaultTrendsSelectionDate = {
  54. start: null,
  55. end: null,
  56. utc: false,
  57. period: DEFAULT_TRENDS_STATS_PERIOD,
  58. };
  59. class TrendsContent extends Component<Props, State> {
  60. state: State = {};
  61. handleSearch = (searchQuery: string) => {
  62. const {location} = this.props;
  63. const cursors = resetCursors();
  64. browserHistory.push({
  65. pathname: location.pathname,
  66. query: {
  67. ...location.query,
  68. ...cursors,
  69. query: String(searchQuery).trim() || undefined,
  70. },
  71. });
  72. };
  73. setError = (error: string | undefined) => {
  74. this.setState({error});
  75. };
  76. handleTrendFunctionChange = (field: string) => {
  77. const {organization, location} = this.props;
  78. const offsets = {};
  79. Object.values(TrendChangeType).forEach(trendChangeType => {
  80. const queryKey = getSelectedQueryKey(trendChangeType);
  81. offsets[queryKey] = undefined;
  82. });
  83. trackAnalytics('performance_views.trends.change_function', {
  84. organization,
  85. function_name: field,
  86. });
  87. this.setState({
  88. previousTrendFunction: getCurrentTrendFunction(location).field,
  89. });
  90. const cursors = resetCursors();
  91. browserHistory.push({
  92. pathname: location.pathname,
  93. query: {
  94. ...location.query,
  95. ...offsets,
  96. ...cursors,
  97. trendFunction: field,
  98. },
  99. });
  100. };
  101. renderError() {
  102. const {error} = this.state;
  103. if (!error) {
  104. return null;
  105. }
  106. return (
  107. <Alert type="error" showIcon>
  108. {error}
  109. </Alert>
  110. );
  111. }
  112. handleParameterChange = (label: string) => {
  113. const {organization, location} = this.props;
  114. const cursors = resetCursors();
  115. trackAnalytics('performance_views.trends.change_parameter', {
  116. organization,
  117. parameter_name: label,
  118. });
  119. browserHistory.push({
  120. pathname: location.pathname,
  121. query: {
  122. ...location.query,
  123. ...cursors,
  124. trendParameter: label,
  125. },
  126. });
  127. };
  128. getFreeTextFromQuery(query: string) {
  129. const conditions = new MutableSearch(query);
  130. const transactionValues = conditions.getFilterValues('transaction');
  131. if (transactionValues.length) {
  132. return transactionValues[0];
  133. }
  134. if (conditions.freeText.length > 0) {
  135. // raw text query will be wrapped in wildcards in generatePerformanceEventView
  136. // so no need to wrap it here
  137. return conditions.freeText.join(' ');
  138. }
  139. return '';
  140. }
  141. getPerformanceLink() {
  142. const {location} = this.props;
  143. const newQuery = {
  144. ...location.query,
  145. };
  146. const query = decodeScalar(location.query.query, '');
  147. const conditions = new MutableSearch(query);
  148. // This stops errors from occurring when navigating to other views since we are appending aggregates to the trends view
  149. conditions.removeFilter('tpm()');
  150. conditions.removeFilter('confidence()');
  151. conditions.removeFilter('transaction.duration');
  152. newQuery.query = conditions.formatString();
  153. return {
  154. pathname: getPerformanceLandingUrl(this.props.organization),
  155. query: newQuery,
  156. };
  157. }
  158. render() {
  159. const {organization, eventView, location, projects} = this.props;
  160. const {previousTrendFunction} = this.state;
  161. const trendView = eventView.clone() as TrendView;
  162. modifyTrendsViewDefaultPeriod(trendView, location);
  163. if (organization.features.includes('performance-new-trends')) {
  164. modifyTransactionNameTrendsQuery(trendView);
  165. }
  166. const fields = generateAggregateFields(
  167. organization,
  168. [
  169. {
  170. field: 'absolute_correlation()',
  171. },
  172. {
  173. field: 'trend_percentage()',
  174. },
  175. {
  176. field: 'trend_difference()',
  177. },
  178. {
  179. field: 'count_percentage()',
  180. },
  181. {
  182. field: 'tpm()',
  183. },
  184. {
  185. field: 'tps()',
  186. },
  187. ],
  188. ['epm()', 'eps()']
  189. );
  190. const currentTrendFunction = getCurrentTrendFunction(location);
  191. const currentTrendParameter = getCurrentTrendParameter(
  192. location,
  193. projects,
  194. eventView.project
  195. );
  196. const query = getTransactionSearchQuery(location);
  197. return (
  198. <PageFiltersContainer
  199. defaultSelection={{
  200. datetime: defaultTrendsSelectionDate,
  201. }}
  202. >
  203. <Layout.Header>
  204. <Layout.HeaderContent>
  205. <Breadcrumbs
  206. crumbs={[
  207. {
  208. label: 'Performance',
  209. to: this.getPerformanceLink(),
  210. },
  211. {
  212. label: 'Trends',
  213. },
  214. ]}
  215. />
  216. <Layout.Title>{t('Trends')}</Layout.Title>
  217. </Layout.HeaderContent>
  218. </Layout.Header>
  219. <Layout.Body>
  220. <Layout.Main fullWidth>
  221. <DefaultTrends location={location} eventView={eventView} projects={projects}>
  222. <FilterActions>
  223. <PageFilterBar condensed>
  224. <ProjectPageFilter />
  225. <EnvironmentPageFilter />
  226. <DatePageFilter />
  227. </PageFilterBar>
  228. {organization.features.includes('performance-new-trends') ? (
  229. <StyledTransactionNameSearchBar
  230. organization={organization}
  231. eventView={trendView}
  232. onSearch={this.handleSearch}
  233. query={this.getFreeTextFromQuery(query)}
  234. />
  235. ) : (
  236. <StyledSearchBar
  237. searchSource="trends"
  238. organization={organization}
  239. projectIds={trendView.project}
  240. query={query}
  241. fields={fields}
  242. onSearch={this.handleSearch}
  243. maxQueryLength={MAX_QUERY_LENGTH}
  244. />
  245. )}
  246. <CompactSelect
  247. triggerProps={{prefix: t('Percentile')}}
  248. value={currentTrendFunction.field}
  249. options={TRENDS_FUNCTIONS.map(({label, field}) => ({
  250. value: field,
  251. label,
  252. }))}
  253. onChange={opt => this.handleTrendFunctionChange(opt.value)}
  254. />
  255. <CompactSelect
  256. triggerProps={{prefix: t('Parameter')}}
  257. value={currentTrendParameter.label}
  258. options={TRENDS_PARAMETERS.map(({label}) => ({
  259. value: label,
  260. label,
  261. }))}
  262. onChange={opt => this.handleParameterChange(opt.value)}
  263. />
  264. </FilterActions>
  265. <ListContainer>
  266. <ChangedTransactions
  267. trendChangeType={TrendChangeType.IMPROVED}
  268. previousTrendFunction={previousTrendFunction}
  269. trendView={trendView}
  270. location={location}
  271. setError={this.setError}
  272. withBreakpoint={organization.features.includes(
  273. 'performance-new-trends'
  274. )}
  275. />
  276. <ChangedTransactions
  277. trendChangeType={TrendChangeType.REGRESSION}
  278. previousTrendFunction={previousTrendFunction}
  279. trendView={trendView}
  280. location={location}
  281. setError={this.setError}
  282. withBreakpoint={organization.features.includes(
  283. 'performance-new-trends'
  284. )}
  285. />
  286. </ListContainer>
  287. </DefaultTrends>
  288. </Layout.Main>
  289. </Layout.Body>
  290. </PageFiltersContainer>
  291. );
  292. }
  293. }
  294. type DefaultTrendsProps = {
  295. children: React.ReactNode[];
  296. eventView: EventView;
  297. location: Location;
  298. projects: Project[];
  299. };
  300. class DefaultTrends extends Component<DefaultTrendsProps> {
  301. hasPushedDefaults = false;
  302. render() {
  303. const {children, location, eventView, projects} = this.props;
  304. const queryString = decodeScalar(location.query.query);
  305. const trendParameter = getCurrentTrendParameter(
  306. location,
  307. projects,
  308. eventView.project
  309. );
  310. const conditions = new MutableSearch(queryString || '');
  311. if (queryString || this.hasPushedDefaults) {
  312. this.hasPushedDefaults = true;
  313. return <Fragment>{children}</Fragment>;
  314. }
  315. this.hasPushedDefaults = true;
  316. conditions.setFilterValues('tpm()', ['>0.01']);
  317. conditions.setFilterValues(trendParameter.column, ['>0', `<${DEFAULT_MAX_DURATION}`]);
  318. const query = conditions.formatString();
  319. eventView.query = query;
  320. browserHistory.push({
  321. pathname: location.pathname,
  322. query: {
  323. ...location.query,
  324. cursor: undefined,
  325. query: String(query).trim() || undefined,
  326. },
  327. });
  328. return null;
  329. }
  330. }
  331. const FilterActions = styled('div')`
  332. display: grid;
  333. gap: ${space(2)};
  334. margin-bottom: ${space(2)};
  335. @media (min-width: ${p => p.theme.breakpoints.small}) {
  336. grid-template-columns: repeat(3, min-content);
  337. }
  338. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  339. grid-template-columns: auto 1fr auto auto;
  340. }
  341. `;
  342. const StyledSearchBar = styled(SearchBar)`
  343. @media (min-width: ${p => p.theme.breakpoints.small}) {
  344. order: 1;
  345. grid-column: 1/5;
  346. }
  347. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  348. order: initial;
  349. grid-column: auto;
  350. }
  351. `;
  352. const StyledTransactionNameSearchBar = styled(TransactionNameSearchBar)`
  353. @media (min-width: ${p => p.theme.breakpoints.small}) {
  354. order: 1;
  355. grid-column: 1/5;
  356. }
  357. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  358. order: initial;
  359. grid-column: auto;
  360. }
  361. `;
  362. const ListContainer = styled('div')`
  363. display: grid;
  364. gap: ${space(2)};
  365. margin-bottom: ${space(2)};
  366. @media (min-width: ${p => p.theme.breakpoints.small}) {
  367. grid-template-columns: repeat(2, minmax(0, 1fr));
  368. }
  369. `;
  370. export default withPageFilters(TrendsContent);