content.tsx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import {Component} from 'react';
  2. import {browserHistory, InjectedRouter} from 'react-router';
  3. import {Location} from 'history';
  4. import isEqual from 'lodash/isEqual';
  5. import {loadOrganizationTags} from 'app/actionCreators/tags';
  6. import {Client} from 'app/api';
  7. import Alert from 'app/components/alert';
  8. import Button from 'app/components/button';
  9. import GlobalSdkUpdateAlert from 'app/components/globalSdkUpdateAlert';
  10. import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
  11. import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
  12. import PageHeading from 'app/components/pageHeading';
  13. import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
  14. import {ALL_ACCESS_PROJECTS} from 'app/constants/globalSelectionHeader';
  15. import {IconFlag} from 'app/icons';
  16. import {t} from 'app/locale';
  17. import {PageContent, PageHeader} from 'app/styles/organization';
  18. import {GlobalSelection, Organization, Project} from 'app/types';
  19. import {trackAnalyticsEvent} from 'app/utils/analytics';
  20. import EventView from 'app/utils/discover/eventView';
  21. import {decodeScalar} from 'app/utils/queryString';
  22. import {
  23. QueryResults,
  24. stringifyQueryObject,
  25. tokenizeSearch,
  26. } from 'app/utils/tokenizeSearch';
  27. import withApi from 'app/utils/withApi';
  28. import withGlobalSelection from 'app/utils/withGlobalSelection';
  29. import withOrganization from 'app/utils/withOrganization';
  30. import withProjects from 'app/utils/withProjects';
  31. import LandingContent from './landing/content';
  32. import {DEFAULT_MAX_DURATION} from './trends/utils';
  33. import {DEFAULT_STATS_PERIOD, generatePerformanceEventView} from './data';
  34. import Onboarding from './onboarding';
  35. import {addRoutePerformanceContext, getPerformanceTrendsUrl} from './utils';
  36. type Props = {
  37. api: Client;
  38. organization: Organization;
  39. selection: GlobalSelection;
  40. location: Location;
  41. router: InjectedRouter;
  42. projects: Project[];
  43. loadingProjects: boolean;
  44. demoMode?: boolean;
  45. };
  46. type State = {
  47. eventView: EventView;
  48. error: string | undefined;
  49. };
  50. class PerformanceContent extends Component<Props, State> {
  51. static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): State {
  52. return {
  53. ...prevState,
  54. eventView: generatePerformanceEventView(
  55. nextProps.organization,
  56. nextProps.location,
  57. nextProps.projects
  58. ),
  59. };
  60. }
  61. state: State = {
  62. eventView: generatePerformanceEventView(
  63. this.props.organization,
  64. this.props.location,
  65. this.props.projects
  66. ),
  67. error: undefined,
  68. };
  69. componentDidMount() {
  70. const {api, organization, selection} = this.props;
  71. loadOrganizationTags(api, organization.slug, selection);
  72. addRoutePerformanceContext(selection);
  73. trackAnalyticsEvent({
  74. eventKey: 'performance_views.overview.view',
  75. eventName: 'Performance Views: Transaction overview view',
  76. organization_id: parseInt(organization.id, 10),
  77. });
  78. }
  79. componentDidUpdate(prevProps: Props) {
  80. const {api, organization, selection} = this.props;
  81. if (
  82. !isEqual(prevProps.selection.projects, selection.projects) ||
  83. !isEqual(prevProps.selection.datetime, selection.datetime)
  84. ) {
  85. loadOrganizationTags(api, organization.slug, selection);
  86. addRoutePerformanceContext(selection);
  87. }
  88. }
  89. renderError() {
  90. const {error} = this.state;
  91. if (!error) {
  92. return null;
  93. }
  94. return (
  95. <Alert type="error" icon={<IconFlag size="md" />}>
  96. {error}
  97. </Alert>
  98. );
  99. }
  100. setError = (error: string | undefined) => {
  101. this.setState({error});
  102. };
  103. handleSearch = (searchQuery: string) => {
  104. const {location, organization} = this.props;
  105. trackAnalyticsEvent({
  106. eventKey: 'performance_views.overview.search',
  107. eventName: 'Performance Views: Transaction overview search',
  108. organization_id: parseInt(organization.id, 10),
  109. });
  110. browserHistory.push({
  111. pathname: location.pathname,
  112. query: {
  113. ...location.query,
  114. cursor: undefined,
  115. query: String(searchQuery).trim() || undefined,
  116. },
  117. });
  118. };
  119. handleTrendsClick() {
  120. const {location, organization} = this.props;
  121. const newQuery = {
  122. ...location.query,
  123. };
  124. const query = decodeScalar(location.query.query, '');
  125. const conditions = tokenizeSearch(query);
  126. trackAnalyticsEvent({
  127. eventKey: 'performance_views.change_view',
  128. eventName: 'Performance Views: Change View',
  129. organization_id: parseInt(organization.id, 10),
  130. view_name: 'TRENDS',
  131. });
  132. const modifiedConditions = new QueryResults([]);
  133. if (conditions.hasTag('tpm()')) {
  134. modifiedConditions.setTagValues('tpm()', conditions.getTagValues('tpm()'));
  135. } else {
  136. modifiedConditions.setTagValues('tpm()', ['>0.01']);
  137. }
  138. if (conditions.hasTag('transaction.duration')) {
  139. modifiedConditions.setTagValues(
  140. 'transaction.duration',
  141. conditions.getTagValues('transaction.duration')
  142. );
  143. } else {
  144. modifiedConditions.setTagValues('transaction.duration', [
  145. '>0',
  146. `<${DEFAULT_MAX_DURATION}`,
  147. ]);
  148. }
  149. newQuery.query = stringifyQueryObject(modifiedConditions);
  150. browserHistory.push({
  151. pathname: getPerformanceTrendsUrl(organization),
  152. query: {...newQuery},
  153. });
  154. }
  155. shouldShowOnboarding() {
  156. const {projects, demoMode} = this.props;
  157. const {eventView} = this.state;
  158. // XXX used by getsentry to bypass onboarding for the upsell demo state.
  159. if (demoMode) {
  160. return false;
  161. }
  162. if (projects.length === 0) {
  163. return false;
  164. }
  165. // Current selection is 'my projects' or 'all projects'
  166. if (eventView.project.length === 0 || eventView.project === [ALL_ACCESS_PROJECTS]) {
  167. return (
  168. projects.filter(p => p.firstTransactionEvent === false).length === projects.length
  169. );
  170. }
  171. // Any other subset of projects.
  172. return (
  173. projects.filter(
  174. p =>
  175. eventView.project.includes(parseInt(p.id, 10)) &&
  176. p.firstTransactionEvent === false
  177. ).length === eventView.project.length
  178. );
  179. }
  180. renderBody() {
  181. const {organization, projects} = this.props;
  182. const eventView = this.state.eventView;
  183. const showOnboarding = this.shouldShowOnboarding();
  184. return (
  185. <PageContent>
  186. <LightWeightNoProjectMessage organization={organization}>
  187. <PageHeader>
  188. <PageHeading>{t('Performance')}</PageHeading>
  189. {!showOnboarding && (
  190. <Button
  191. priority="primary"
  192. data-test-id="landing-header-trends"
  193. onClick={() => this.handleTrendsClick()}
  194. >
  195. {t('View Trends')}
  196. </Button>
  197. )}
  198. </PageHeader>
  199. <GlobalSdkUpdateAlert />
  200. {this.renderError()}
  201. {showOnboarding ? (
  202. <Onboarding organization={organization} />
  203. ) : (
  204. <LandingContent
  205. eventView={eventView}
  206. projects={projects}
  207. organization={organization}
  208. setError={this.setError}
  209. handleSearch={this.handleSearch}
  210. />
  211. )}
  212. </LightWeightNoProjectMessage>
  213. </PageContent>
  214. );
  215. }
  216. render() {
  217. const {organization} = this.props;
  218. return (
  219. <SentryDocumentTitle title={t('Performance')} orgSlug={organization.slug}>
  220. <GlobalSelectionHeader
  221. defaultSelection={{
  222. datetime: {
  223. start: null,
  224. end: null,
  225. utc: false,
  226. period: DEFAULT_STATS_PERIOD,
  227. },
  228. }}
  229. >
  230. {this.renderBody()}
  231. </GlobalSelectionHeader>
  232. </SentryDocumentTitle>
  233. );
  234. }
  235. }
  236. export default withApi(
  237. withOrganization(withProjects(withGlobalSelection(PerformanceContent)))
  238. );