content.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. import {Component, Fragment} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import Feature from 'sentry/components/acl/feature';
  6. import {Alert} from 'sentry/components/alert';
  7. import Breadcrumbs from 'sentry/components/breadcrumbs';
  8. import {CompactSelect} from 'sentry/components/compactSelect';
  9. import DatePageFilter from 'sentry/components/datePageFilter';
  10. import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
  11. import SearchBar from 'sentry/components/events/searchBar';
  12. import * as Layout from 'sentry/components/layouts/thirds';
  13. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  14. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  15. import TransactionNameSearchBar from 'sentry/components/performance/searchBar';
  16. import ProjectPageFilter from 'sentry/components/projectPageFilter';
  17. import {MAX_QUERY_LENGTH} from 'sentry/constants';
  18. import {t} from 'sentry/locale';
  19. import {space} from 'sentry/styles/space';
  20. import {Organization, PageFilters, Project} from 'sentry/types';
  21. import {trackAnalytics} from 'sentry/utils/analytics';
  22. import EventView from 'sentry/utils/discover/eventView';
  23. import {generateAggregateFields} from 'sentry/utils/discover/fields';
  24. import {decodeScalar} from 'sentry/utils/queryString';
  25. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  26. import withPageFilters from 'sentry/utils/withPageFilters';
  27. import {getPerformanceLandingUrl, getTransactionSearchQuery} from '../utils';
  28. import ChangedTransactions from './changedTransactions';
  29. import {TrendChangeType, TrendFunctionField, TrendView} 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 alignDropdown="left" />
  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. <Feature features={['organizations:performance-trendsv2-dev-only']}>
  288. <ListContainer>
  289. <ChangedTransactions
  290. trendChangeType={TrendChangeType.IMPROVED}
  291. previousTrendFunction={previousTrendFunction}
  292. trendView={trendView}
  293. location={location}
  294. setError={this.setError}
  295. />
  296. <ChangedTransactions
  297. trendChangeType={TrendChangeType.REGRESSION}
  298. previousTrendFunction={previousTrendFunction}
  299. trendView={trendView}
  300. location={location}
  301. setError={this.setError}
  302. />
  303. </ListContainer>
  304. </Feature>
  305. </DefaultTrends>
  306. </Layout.Main>
  307. </Layout.Body>
  308. </PageFiltersContainer>
  309. );
  310. }
  311. }
  312. type DefaultTrendsProps = {
  313. children: React.ReactNode[];
  314. eventView: EventView;
  315. location: Location;
  316. projects: Project[];
  317. };
  318. class DefaultTrends extends Component<DefaultTrendsProps> {
  319. hasPushedDefaults = false;
  320. render() {
  321. const {children, location, eventView, projects} = this.props;
  322. const queryString = decodeScalar(location.query.query);
  323. const trendParameter = getCurrentTrendParameter(
  324. location,
  325. projects,
  326. eventView.project
  327. );
  328. const conditions = new MutableSearch(queryString || '');
  329. if (queryString || this.hasPushedDefaults) {
  330. this.hasPushedDefaults = true;
  331. return <Fragment>{children}</Fragment>;
  332. }
  333. this.hasPushedDefaults = true;
  334. conditions.setFilterValues('tpm()', ['>0.01']);
  335. conditions.setFilterValues(trendParameter.column, ['>0', `<${DEFAULT_MAX_DURATION}`]);
  336. const query = conditions.formatString();
  337. eventView.query = query;
  338. browserHistory.push({
  339. pathname: location.pathname,
  340. query: {
  341. ...location.query,
  342. cursor: undefined,
  343. query: String(query).trim() || undefined,
  344. },
  345. });
  346. return null;
  347. }
  348. }
  349. const FilterActions = styled('div')`
  350. display: grid;
  351. gap: ${space(2)};
  352. margin-bottom: ${space(2)};
  353. @media (min-width: ${p => p.theme.breakpoints.small}) {
  354. grid-template-columns: repeat(3, min-content);
  355. }
  356. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  357. grid-template-columns: auto 1fr auto auto;
  358. }
  359. `;
  360. const StyledSearchBar = styled(SearchBar)`
  361. @media (min-width: ${p => p.theme.breakpoints.small}) {
  362. order: 1;
  363. grid-column: 1/5;
  364. }
  365. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  366. order: initial;
  367. grid-column: auto;
  368. }
  369. `;
  370. const StyledTransactionNameSearchBar = styled(TransactionNameSearchBar)`
  371. @media (min-width: ${p => p.theme.breakpoints.small}) {
  372. order: 1;
  373. grid-column: 1/5;
  374. }
  375. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  376. order: initial;
  377. grid-column: auto;
  378. }
  379. `;
  380. const ListContainer = styled('div')`
  381. display: grid;
  382. gap: ${space(2)};
  383. margin-bottom: ${space(2)};
  384. @media (min-width: ${p => p.theme.breakpoints.small}) {
  385. grid-template-columns: repeat(2, minmax(0, 1fr));
  386. }
  387. `;
  388. export default withPageFilters(TrendsContent);