mergedItem.tsx 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import Checkbox from 'sentry/components/checkbox';
  5. import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader';
  6. import {Tooltip} from 'sentry/components/tooltip';
  7. import {IconChevron} from 'sentry/icons';
  8. import {t} from 'sentry/locale';
  9. import type {Fingerprint} from 'sentry/stores/groupingStore';
  10. import GroupingStore from 'sentry/stores/groupingStore';
  11. import {space} from 'sentry/styles/space';
  12. import type {Organization} from 'sentry/types';
  13. type Props = {
  14. fingerprint: Fingerprint;
  15. organization: Organization;
  16. totalFingerprint: number;
  17. };
  18. type State = {
  19. busy: boolean;
  20. checked: boolean;
  21. collapsed: boolean;
  22. };
  23. class MergedItem extends Component<Props, State> {
  24. state: State = {
  25. collapsed: false,
  26. checked: false,
  27. busy: false,
  28. };
  29. listener = GroupingStore.listen(data => this.onGroupChange(data), undefined);
  30. onGroupChange = ({unmergeState}) => {
  31. if (!unmergeState) {
  32. return;
  33. }
  34. const {fingerprint} = this.props;
  35. const stateForId = unmergeState.has(fingerprint.id)
  36. ? unmergeState.get(fingerprint.id)
  37. : undefined;
  38. if (!stateForId) {
  39. return;
  40. }
  41. Object.keys(stateForId).forEach(key => {
  42. if (stateForId[key] === this.state[key]) {
  43. return;
  44. }
  45. this.setState(prevState => ({...prevState, [key]: stateForId[key]}));
  46. });
  47. };
  48. handleToggleEvents = () => {
  49. const {fingerprint} = this.props;
  50. GroupingStore.onToggleCollapseFingerprint(fingerprint.id);
  51. };
  52. // Disable default behavior of toggling checkbox
  53. handleLabelClick(event: React.MouseEvent) {
  54. event.preventDefault();
  55. }
  56. handleToggle = () => {
  57. const {fingerprint} = this.props;
  58. const {latestEvent} = fingerprint;
  59. if (this.state.busy) {
  60. return;
  61. }
  62. // clicking anywhere in the row will toggle the checkbox
  63. GroupingStore.onToggleUnmerge([fingerprint.id, latestEvent.id]);
  64. };
  65. handleCheckClick() {
  66. // noop because of react warning about being a controlled input without `onChange`
  67. // we handle change via row click
  68. }
  69. renderFingerprint(id: string, label?: string) {
  70. if (!label) {
  71. return id;
  72. }
  73. return (
  74. <Tooltip title={id}>
  75. <code>{label}</code>
  76. </Tooltip>
  77. );
  78. }
  79. render() {
  80. const {fingerprint, organization, totalFingerprint} = this.props;
  81. const {latestEvent, id, label} = fingerprint;
  82. const {collapsed, busy, checked} = this.state;
  83. const checkboxDisabled = busy || totalFingerprint === 1;
  84. // `latestEvent` can be null if last event w/ fingerprint is not within retention period
  85. return (
  86. <MergedGroup busy={busy}>
  87. <Controls expanded={!collapsed}>
  88. <FingerprintLabel onClick={this.handleToggle}>
  89. <Tooltip
  90. containerDisplayMode="flex"
  91. disabled={!checkboxDisabled}
  92. title={
  93. checkboxDisabled && totalFingerprint === 1
  94. ? t('To check, the list must contain 2 or more items')
  95. : undefined
  96. }
  97. >
  98. <Checkbox
  99. value={id}
  100. checked={checked}
  101. disabled={checkboxDisabled}
  102. onChange={this.handleCheckClick}
  103. size="xs"
  104. />
  105. </Tooltip>
  106. {this.renderFingerprint(id, label)}
  107. </FingerprintLabel>
  108. <Button
  109. aria-label={
  110. collapsed
  111. ? t('Show %s fingerprints', id)
  112. : t('Collapse %s fingerprints', id)
  113. }
  114. size="zero"
  115. borderless
  116. icon={<IconChevron direction={collapsed ? 'down' : 'up'} size="xs" />}
  117. onClick={this.handleToggleEvents}
  118. />
  119. </Controls>
  120. {!collapsed && (
  121. <MergedEventList className="event-list">
  122. {latestEvent && (
  123. <EventDetails className="event-details">
  124. <EventOrGroupHeader
  125. data={latestEvent}
  126. organization={organization}
  127. hideIcons
  128. hideLevel
  129. source="merged-item"
  130. />
  131. </EventDetails>
  132. )}
  133. </MergedEventList>
  134. )}
  135. </MergedGroup>
  136. );
  137. }
  138. }
  139. const MergedGroup = styled('div')<{busy: boolean}>`
  140. ${p => p.busy && 'opacity: 0.2'};
  141. `;
  142. const Controls = styled('div')<{expanded: boolean}>`
  143. display: flex;
  144. justify-content: space-between;
  145. background-color: ${p => p.theme.backgroundSecondary};
  146. ${p => p.expanded && `border-bottom: 1px solid ${p.theme.innerBorder}`};
  147. padding: ${space(0.5)} ${space(1)};
  148. ${MergedGroup}:not(:first-child) & {
  149. border-top: 1px solid ${p => p.theme.innerBorder};
  150. }
  151. ${MergedGroup}:last-child & {
  152. ${p => !p.expanded && `border-bottom: none`};
  153. ${p =>
  154. !p.expanded &&
  155. `border-radius: 0 0 ${p.theme.borderRadius} ${p.theme.borderRadius}`};
  156. }
  157. `;
  158. const FingerprintLabel = styled('label')`
  159. display: flex;
  160. align-items: center;
  161. gap: ${space(1)};
  162. font-family: ${p => p.theme.text.familyMono};
  163. line-height: 1;
  164. font-weight: 400;
  165. margin: 0;
  166. `;
  167. const MergedEventList = styled('div')`
  168. overflow: hidden;
  169. border: none;
  170. background-color: ${p => p.theme.background};
  171. `;
  172. const EventDetails = styled('div')`
  173. display: flex;
  174. justify-content: space-between;
  175. .event-list & {
  176. padding: ${space(1)};
  177. }
  178. `;
  179. export default MergedItem;