index.tsx 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import {Component} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Client} from 'sentry/api';
  5. import NoProjectMessage from 'sentry/components/noProjectMessage';
  6. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  7. import {t} from 'sentry/locale';
  8. import {PageContent} from 'sentry/styles/organization';
  9. import {Organization, PageFilters, Project} from 'sentry/types';
  10. import EventView from 'sentry/utils/discover/eventView';
  11. import withApi from 'sentry/utils/withApi';
  12. import withOrganization from 'sentry/utils/withOrganization';
  13. import withPageFilters from 'sentry/utils/withPageFilters';
  14. import withProjects from 'sentry/utils/withProjects';
  15. import {generatePerformanceEventView} from '../data';
  16. import TrendsContent from './content';
  17. type Props = RouteComponentProps<{}, {}> & {
  18. api: Client;
  19. selection: PageFilters;
  20. organization: Organization;
  21. projects: Project[];
  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.organization,
  34. nextProps.projects,
  35. {
  36. isTrends: true,
  37. }
  38. ),
  39. };
  40. }
  41. state: State = {
  42. eventView: generatePerformanceEventView(
  43. this.props.location,
  44. this.props.organization,
  45. this.props.projects,
  46. {
  47. isTrends: true,
  48. }
  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} = this.props;
  60. const {eventView} = this.state;
  61. return (
  62. <TrendsContent
  63. organization={organization}
  64. location={location}
  65. eventView={eventView}
  66. />
  67. );
  68. }
  69. render() {
  70. const {organization} = this.props;
  71. return (
  72. <SentryDocumentTitle title={this.getDocumentTitle()} orgSlug={organization.slug}>
  73. <StyledPageContent>
  74. <NoProjectMessage organization={organization}>
  75. {this.renderContent()}
  76. </NoProjectMessage>
  77. </StyledPageContent>
  78. </SentryDocumentTitle>
  79. );
  80. }
  81. }
  82. export default withOrganization(withProjects(withPageFilters(withApi(TrendsSummary))));
  83. const StyledPageContent = styled(PageContent)`
  84. padding: 0;
  85. `;