homepage.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import {browserHistory, InjectedRouter} from 'react-router';
  2. import {Location} from 'history';
  3. import {Client} from 'sentry/api';
  4. import AsyncComponent from 'sentry/components/asyncComponent';
  5. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  6. import {
  7. getDatetimeFromState,
  8. normalizeDateTimeString,
  9. } from 'sentry/components/organizations/pageFilters/parse';
  10. import {getPageFilterStorage} from 'sentry/components/organizations/pageFilters/persistence';
  11. import {Organization, PageFilters, SavedQuery} from 'sentry/types';
  12. import EventView from 'sentry/utils/discover/eventView';
  13. import withApi from 'sentry/utils/withApi';
  14. import withOrganization from 'sentry/utils/withOrganization';
  15. import withPageFilters from 'sentry/utils/withPageFilters';
  16. import {Results} from './results';
  17. type Props = {
  18. api: Client;
  19. loading: boolean;
  20. location: Location;
  21. organization: Organization;
  22. router: InjectedRouter;
  23. selection: PageFilters;
  24. setSavedQuery: (savedQuery: SavedQuery) => void;
  25. };
  26. type HomepageQueryState = AsyncComponent['state'] & {
  27. savedQuery?: SavedQuery | null;
  28. };
  29. class HomepageQueryAPI extends AsyncComponent<Props, HomepageQueryState> {
  30. shouldReload = true;
  31. componentDidUpdate(_, prevState) {
  32. const hasFetchedSavedQuery = !prevState.savedQuery && this.state.savedQuery;
  33. const hasInitiallyLoaded = prevState.loading && !this.state.loading;
  34. const sidebarClicked = this.state.savedQuery && this.props.location.search === '';
  35. const hasValidEventViewInURL = EventView.fromLocation(this.props.location).isValid();
  36. if (
  37. this.state.savedQuery &&
  38. ((hasInitiallyLoaded && hasFetchedSavedQuery && !hasValidEventViewInURL) ||
  39. sidebarClicked)
  40. ) {
  41. const eventView = EventView.fromSavedQuery(this.state.savedQuery);
  42. const pageFilterState = getPageFilterStorage(this.props.organization.slug);
  43. let query = {
  44. ...eventView.generateQueryStringObject(),
  45. };
  46. // Handle locked filters explicitly because we can't expect
  47. // PageFilterContainer to properly overwrite stored filters
  48. // when pushing the homepage query to the URL
  49. if (pageFilterState?.pinnedFilters) {
  50. pageFilterState.pinnedFilters.forEach(pinnedFilter => {
  51. if (pinnedFilter === 'projects') {
  52. query.project = pageFilterState.state.project?.map(String);
  53. } else if (pinnedFilter === 'datetime') {
  54. const {period, start, end, utc} = getDatetimeFromState(pageFilterState.state);
  55. query = {
  56. ...query,
  57. statsPeriod: period ?? undefined,
  58. utc: utc?.toString(),
  59. start: normalizeDateTimeString(start),
  60. end: normalizeDateTimeString(end),
  61. };
  62. } else {
  63. query[pinnedFilter] = pageFilterState.state[pinnedFilter];
  64. }
  65. });
  66. }
  67. browserHistory.replace({
  68. ...this.props.location,
  69. query,
  70. });
  71. }
  72. }
  73. getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
  74. const {organization} = this.props;
  75. const endpoints: ReturnType<AsyncComponent['getEndpoints']> = [];
  76. if (organization.features.includes('discover-query')) {
  77. endpoints.push([
  78. 'savedQuery',
  79. `/organizations/${organization.slug}/discover/homepage/`,
  80. ]);
  81. }
  82. return endpoints;
  83. }
  84. onRequestSuccess({stateKey, data}) {
  85. // No homepage query results in a 204, returning an empty string
  86. if (stateKey === 'savedQuery' && data === '') {
  87. this.setState({savedQuery: null});
  88. }
  89. }
  90. setSavedQuery = (newSavedQuery?: SavedQuery) => {
  91. this.setState({savedQuery: newSavedQuery});
  92. };
  93. renderBody(): React.ReactNode {
  94. const {savedQuery, loading} = this.state;
  95. return (
  96. <Results
  97. {...this.props}
  98. savedQuery={savedQuery ?? undefined}
  99. loading={loading}
  100. setSavedQuery={this.setSavedQuery}
  101. isHomepage
  102. />
  103. );
  104. }
  105. }
  106. function HomepageContainer(props: Props) {
  107. return (
  108. <PageFiltersContainer skipInitializeUrlParams>
  109. <HomepageQueryAPI {...props} />
  110. </PageFiltersContainer>
  111. );
  112. }
  113. export default withApi(withOrganization(withPageFilters(HomepageContainer)));