index.tsx 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import {Component} from 'react';
  2. import {Location} from 'history';
  3. import {Client} from 'sentry/api';
  4. import * as Layout from 'sentry/components/layouts/thirds';
  5. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  6. import {t} from 'sentry/locale';
  7. import {Organization, PageFilters, Project} from 'sentry/types';
  8. import EventView from 'sentry/utils/discover/eventView';
  9. import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
  10. import withApi from 'sentry/utils/withApi';
  11. import withOrganization from 'sentry/utils/withOrganization';
  12. import withPageFilters from 'sentry/utils/withPageFilters';
  13. import withProjects from 'sentry/utils/withProjects';
  14. import {generatePerformanceEventView} from '../data';
  15. import TrendsContent from './content';
  16. type Props = {
  17. api: Client;
  18. location: Location;
  19. organization: Organization;
  20. projects: Project[];
  21. selection: PageFilters;
  22. };
  23. type State = {
  24. eventView: EventView;
  25. error?: string;
  26. };
  27. class TrendsSummary extends Component<Props, State> {
  28. static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): State {
  29. return {
  30. ...prevState,
  31. eventView: generatePerformanceEventView(
  32. nextProps.location,
  33. nextProps.projects,
  34. {
  35. isTrends: true,
  36. },
  37. nextProps.organization
  38. ),
  39. };
  40. }
  41. state: State = {
  42. eventView: generatePerformanceEventView(
  43. this.props.location,
  44. this.props.projects,
  45. {
  46. isTrends: true,
  47. },
  48. this.props.organization
  49. ),
  50. error: undefined,
  51. };
  52. getDocumentTitle(): string {
  53. return [t('Trends'), t('Performance')].join(' — ');
  54. }
  55. setError = (error: string | undefined) => {
  56. this.setState({error});
  57. };
  58. renderContent() {
  59. const {organization, location, projects} = this.props;
  60. const {eventView} = this.state;
  61. return (
  62. <TrendsContent
  63. organization={organization}
  64. location={location}
  65. eventView={eventView}
  66. projects={projects}
  67. />
  68. );
  69. }
  70. render() {
  71. const {organization, location} = this.props;
  72. return (
  73. <SentryDocumentTitle title={this.getDocumentTitle()} orgSlug={organization.slug}>
  74. <Layout.Page>
  75. <MetricsCardinalityProvider
  76. sendOutcomeAnalytics
  77. organization={organization}
  78. location={location}
  79. >
  80. {this.renderContent()}
  81. </MetricsCardinalityProvider>
  82. </Layout.Page>
  83. </SentryDocumentTitle>
  84. );
  85. }
  86. }
  87. export default withOrganization(withProjects(withPageFilters(withApi(TrendsSummary))));