index.tsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import {Component} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import * as qs from 'query-string';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import LoadingError from 'sentry/components/loadingError';
  7. import LoadingIndicator from 'sentry/components/loadingIndicator';
  8. import QueryCount from 'sentry/components/queryCount';
  9. import {t, tct} from 'sentry/locale';
  10. import GroupingStore, {Fingerprint} from 'sentry/stores/groupingStore';
  11. import {space} from 'sentry/styles/space';
  12. import {Group, Organization, Project} from 'sentry/types';
  13. import {trackAnalytics} from 'sentry/utils/analytics';
  14. import withOrganization from 'sentry/utils/withOrganization';
  15. import MergedList from './mergedList';
  16. type Props = RouteComponentProps<
  17. {groupId: Group['id']; orgId: Organization['slug']},
  18. {}
  19. > & {
  20. organization: Organization;
  21. project: Project;
  22. };
  23. type State = {
  24. error: boolean;
  25. loading: boolean;
  26. mergedItems: Array<Fingerprint>;
  27. query: string;
  28. mergedLinks?: string;
  29. };
  30. class GroupMergedView extends Component<Props, State> {
  31. state: State = {
  32. mergedItems: [],
  33. loading: true,
  34. error: false,
  35. query: this.props.location.query.query || '',
  36. };
  37. componentDidMount() {
  38. this.fetchData();
  39. }
  40. UNSAFE_componentWillReceiveProps(nextProps: Props) {
  41. if (
  42. nextProps.params.groupId !== this.props.params.groupId ||
  43. nextProps.location.search !== this.props.location.search
  44. ) {
  45. const queryParams = nextProps.location.query;
  46. this.setState(
  47. {
  48. query: queryParams.query,
  49. },
  50. this.fetchData
  51. );
  52. }
  53. }
  54. componentWillUnmount() {
  55. this.listener?.();
  56. }
  57. onGroupingChange = ({mergedItems, mergedLinks, loading, error}) => {
  58. if (mergedItems) {
  59. this.setState({
  60. mergedItems,
  61. mergedLinks,
  62. loading: typeof loading !== 'undefined' ? loading : false,
  63. error: typeof error !== 'undefined' ? error : false,
  64. });
  65. }
  66. };
  67. listener = GroupingStore.listen(this.onGroupingChange, undefined);
  68. getEndpoint() {
  69. const {params, location, organization} = this.props;
  70. const {groupId} = params;
  71. const queryParams = {
  72. ...location.query,
  73. limit: 50,
  74. query: this.state.query,
  75. };
  76. return `/organizations/${organization.slug}/issues/${groupId}/hashes/?${qs.stringify(
  77. queryParams
  78. )}`;
  79. }
  80. fetchData = () => {
  81. GroupingStore.onFetch([
  82. {
  83. endpoint: this.getEndpoint(),
  84. dataKey: 'merged',
  85. queryParams: this.props.location.query,
  86. },
  87. ]);
  88. };
  89. handleUnmerge = () => {
  90. const {organization, params} = this.props;
  91. GroupingStore.onUnmerge({
  92. groupId: params.groupId,
  93. orgSlug: organization.slug,
  94. loadingMessage: t('Unmerging events\u2026'),
  95. successMessage: t('Events successfully queued for unmerging.'),
  96. errorMessage: t('Unable to queue events for unmerging.'),
  97. });
  98. const unmergeKeys = [...GroupingStore.getState().unmergeList.values()];
  99. trackAnalytics('issue_details.merged_tab.unmerge_clicked', {
  100. organization,
  101. group_id: params.groupId,
  102. event_ids_unmerged: unmergeKeys.join(','),
  103. total_unmerged: unmergeKeys.length,
  104. });
  105. };
  106. render() {
  107. const {project, organization, params} = this.props;
  108. const {groupId} = params;
  109. const {loading: isLoading, error, mergedItems, mergedLinks} = this.state;
  110. const isError = error && !isLoading;
  111. const isLoadedSuccessfully = !isError && !isLoading;
  112. const fingerprintsWithLatestEvent = mergedItems.filter(
  113. ({latestEvent}) => !!latestEvent
  114. );
  115. return (
  116. <Layout.Body>
  117. <Layout.Main fullWidth>
  118. <HeaderWrapper>
  119. <Title>
  120. {tct('Fingerprints included in this issue [count]', {
  121. count: <QueryCount count={fingerprintsWithLatestEvent.length} />,
  122. })}
  123. </Title>
  124. <small>
  125. {
  126. // TODO: Once clickhouse is upgraded and the lag is no longer an issue, revisit this wording.
  127. // See https://github.com/getsentry/sentry/issues/56334.
  128. t(
  129. 'This is an experimental feature. All changes may take up to 24 hours take effect.'
  130. )
  131. }
  132. </small>
  133. </HeaderWrapper>
  134. {isLoading && <LoadingIndicator />}
  135. {isError && (
  136. <LoadingError
  137. message={t('Unable to load merged events, please try again later')}
  138. onRetry={this.fetchData}
  139. />
  140. )}
  141. {isLoadedSuccessfully && (
  142. <MergedList
  143. project={project}
  144. organization={organization}
  145. fingerprints={mergedItems}
  146. pageLinks={mergedLinks}
  147. groupId={groupId}
  148. onUnmerge={this.handleUnmerge}
  149. onToggleCollapse={GroupingStore.onToggleCollapseFingerprints}
  150. />
  151. )}
  152. </Layout.Main>
  153. </Layout.Body>
  154. );
  155. }
  156. }
  157. export {GroupMergedView};
  158. export default withOrganization(GroupMergedView);
  159. const Title = styled('h4')`
  160. margin-bottom: ${space(0.75)};
  161. `;
  162. const HeaderWrapper = styled('div')`
  163. margin-bottom: ${space(2)};
  164. small {
  165. color: ${p => p.theme.subText};
  166. }
  167. `;