index.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import React from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Client} from 'app/api';
  5. import NoProjectMessage from 'app/components/noProjectMessage';
  6. import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
  7. import {t} from 'app/locale';
  8. import {PageContent} from 'app/styles/organization';
  9. import {GlobalSelection, Organization, Project} from 'app/types';
  10. import EventView from 'app/utils/discover/eventView';
  11. import withApi from 'app/utils/withApi';
  12. import withGlobalSelection from 'app/utils/withGlobalSelection';
  13. import withOrganization from 'app/utils/withOrganization';
  14. import withProjects from 'app/utils/withProjects';
  15. import {generatePerformanceEventView} from '../data';
  16. import TrendsContent from './content';
  17. type Props = RouteComponentProps<{}, {}> & {
  18. api: Client;
  19. selection: GlobalSelection;
  20. organization: Organization;
  21. projects: Project[];
  22. };
  23. type State = {
  24. eventView: EventView;
  25. error?: string;
  26. };
  27. class TrendsSummary extends React.Component<Props, State> {
  28. static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): State {
  29. return {
  30. ...prevState,
  31. eventView: generatePerformanceEventView(
  32. nextProps.organization,
  33. nextProps.location,
  34. nextProps.projects,
  35. true
  36. ),
  37. };
  38. }
  39. state: State = {
  40. eventView: generatePerformanceEventView(
  41. this.props.organization,
  42. this.props.location,
  43. this.props.projects,
  44. true
  45. ),
  46. error: undefined,
  47. };
  48. getDocumentTitle(): string {
  49. return [t('Trends'), t('Performance')].join(' - ');
  50. }
  51. setError = (error: string | undefined) => {
  52. this.setState({error});
  53. };
  54. renderContent() {
  55. const {organization, location} = this.props;
  56. const {eventView} = this.state;
  57. return (
  58. <TrendsContent
  59. organization={organization}
  60. location={location}
  61. eventView={eventView}
  62. />
  63. );
  64. }
  65. render() {
  66. const {organization} = this.props;
  67. return (
  68. <SentryDocumentTitle title={this.getDocumentTitle()} orgSlug={organization.slug}>
  69. <StyledPageContent>
  70. <NoProjectMessage organization={organization}>
  71. {this.renderContent()}
  72. </NoProjectMessage>
  73. </StyledPageContent>
  74. </SentryDocumentTitle>
  75. );
  76. }
  77. }
  78. export default withOrganization(
  79. withProjects(withGlobalSelection(withApi(TrendsSummary)))
  80. );
  81. const StyledPageContent = styled(PageContent)`
  82. padding: 0;
  83. `;