content.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. import {useEffect, useRef, useState} from 'react';
  2. import type {InjectedRouter} from 'react-router';
  3. import {browserHistory} from 'react-router';
  4. import * as Sentry from '@sentry/react';
  5. import type {Location} from 'history';
  6. import isEqual from 'lodash/isEqual';
  7. import {loadOrganizationTags} from 'sentry/actionCreators/tags';
  8. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  9. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  10. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  11. import {t} from 'sentry/locale';
  12. import type {PageFilters, Project} from 'sentry/types';
  13. import {trackAnalytics} from 'sentry/utils/analytics';
  14. import type {MEPState} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
  15. import {
  16. canUseMetricsData,
  17. METRIC_SEARCH_SETTING_PARAM,
  18. } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
  19. import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/performanceEventViewContext';
  20. import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
  21. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  22. import useApi from 'sentry/utils/useApi';
  23. import useOrganization from 'sentry/utils/useOrganization';
  24. import usePrevious from 'sentry/utils/usePrevious';
  25. import useProjects from 'sentry/utils/useProjects';
  26. import withPageFilters from 'sentry/utils/withPageFilters';
  27. import {getLandingDisplayFromParam} from './landing/utils';
  28. import {generatePerformanceEventView, getDefaultStatsPeriod} from './data';
  29. import {PerformanceLanding} from './landing';
  30. import {
  31. addRoutePerformanceContext,
  32. getSelectedProjectPlatforms,
  33. handleTrendsClick,
  34. } from './utils';
  35. type Props = {
  36. location: Location;
  37. router: InjectedRouter;
  38. selection: PageFilters;
  39. demoMode?: boolean;
  40. };
  41. type State = {
  42. error?: string;
  43. };
  44. function PerformanceContent({selection, location, demoMode, router}: Props) {
  45. const api = useApi();
  46. const organization = useOrganization();
  47. const {projects} = useProjects();
  48. const mounted = useRef(false);
  49. const previousDateTime = usePrevious(selection.datetime);
  50. const [state, setState] = useState<State>({error: undefined});
  51. const withStaticFilters = canUseMetricsData(organization);
  52. const eventView = generatePerformanceEventView(
  53. location,
  54. projects,
  55. {
  56. withStaticFilters,
  57. },
  58. organization
  59. );
  60. function getOnboardingProject(): Project | undefined {
  61. // XXX used by getsentry to bypass onboarding for the upsell demo state.
  62. if (demoMode) {
  63. return undefined;
  64. }
  65. if (projects.length === 0) {
  66. return undefined;
  67. }
  68. // Current selection is 'my projects' or 'all projects'
  69. if (eventView.project.length === 0 || eventView.project[0] === ALL_ACCESS_PROJECTS) {
  70. const filtered = projects.filter(p => p.firstTransactionEvent === false);
  71. if (filtered.length === projects.length) {
  72. return filtered[0];
  73. }
  74. }
  75. // Any other subset of projects.
  76. const filtered = projects.filter(
  77. p =>
  78. eventView.project.includes(parseInt(p.id, 10)) &&
  79. p.firstTransactionEvent === false
  80. );
  81. if (filtered.length === eventView.project.length) {
  82. return filtered[0];
  83. }
  84. return undefined;
  85. }
  86. const onboardingProject = getOnboardingProject();
  87. useRouteAnalyticsEventNames(
  88. 'performance_views.overview.view',
  89. 'Performance Views: Transaction overview view'
  90. );
  91. useRouteAnalyticsParams({
  92. project_platforms: getSelectedProjectPlatforms(location, projects),
  93. show_onboarding: onboardingProject !== undefined,
  94. tab: getLandingDisplayFromParam(location)?.field,
  95. });
  96. useEffect(() => {
  97. if (!mounted.current) {
  98. loadOrganizationTags(api, organization.slug, selection);
  99. addRoutePerformanceContext(selection);
  100. mounted.current = true;
  101. return;
  102. }
  103. if (!isEqual(previousDateTime, selection.datetime)) {
  104. loadOrganizationTags(api, organization.slug, selection);
  105. addRoutePerformanceContext(selection);
  106. }
  107. }, [
  108. selection.datetime,
  109. previousDateTime,
  110. selection,
  111. api,
  112. organization,
  113. onboardingProject,
  114. location,
  115. projects,
  116. ]);
  117. function setError(newError?: string) {
  118. if (
  119. typeof newError === 'object' ||
  120. (Array.isArray(newError) && typeof newError[0] === 'object')
  121. ) {
  122. Sentry.withScope(scope => {
  123. scope.setExtra('error', newError);
  124. Sentry.captureException(new Error('setError failed with error type.'));
  125. });
  126. return;
  127. }
  128. setState({...state, error: newError});
  129. }
  130. function handleSearch(searchQuery: string, currentMEPState?: MEPState) {
  131. trackAnalytics('performance_views.overview.search', {organization});
  132. browserHistory.push({
  133. pathname: location.pathname,
  134. query: {
  135. ...location.query,
  136. cursor: undefined,
  137. query: String(searchQuery).trim() || undefined,
  138. [METRIC_SEARCH_SETTING_PARAM]: currentMEPState,
  139. isDefaultQuery: false,
  140. },
  141. });
  142. }
  143. return (
  144. <SentryDocumentTitle title={t('Performance')} orgSlug={organization.slug}>
  145. <PerformanceEventViewProvider value={{eventView}}>
  146. <PageFiltersContainer
  147. defaultSelection={{
  148. datetime: {
  149. start: null,
  150. end: null,
  151. utc: false,
  152. period: getDefaultStatsPeriod(organization),
  153. },
  154. }}
  155. >
  156. <PerformanceLanding
  157. router={router}
  158. eventView={eventView}
  159. setError={setError}
  160. handleSearch={handleSearch}
  161. handleTrendsClick={() =>
  162. handleTrendsClick({
  163. location,
  164. organization,
  165. projectPlatforms: getSelectedProjectPlatforms(location, projects),
  166. })
  167. }
  168. onboardingProject={onboardingProject}
  169. organization={organization}
  170. location={location}
  171. projects={projects}
  172. selection={selection}
  173. withStaticFilters={withStaticFilters}
  174. />
  175. </PageFiltersContainer>
  176. </PerformanceEventViewProvider>
  177. </SentryDocumentTitle>
  178. );
  179. }
  180. export default withPageFilters(PerformanceContent);