index.tsx 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import {Fragment, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {FeatureFeedback} from 'sentry/components/featureFeedback';
  4. import LoadingError from 'sentry/components/loadingError';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import {t} from 'sentry/locale';
  7. import {space} from 'sentry/styles/space';
  8. import type {Event, EventGroupVariant} from 'sentry/types/event';
  9. import {EventGroupVariantType} from 'sentry/types/event';
  10. import type {Group} from 'sentry/types/group';
  11. import {IssueCategory} from 'sentry/types/group';
  12. import {useApiQuery} from 'sentry/utils/queryClient';
  13. import useOrganization from 'sentry/utils/useOrganization';
  14. import SectionToggleButton from 'sentry/views/issueDetails/sectionToggleButton';
  15. import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
  16. import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
  17. import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
  18. import GroupingConfigSelect from './groupingConfigSelect';
  19. import GroupVariant from './groupingVariant';
  20. const groupingFeedbackTypes = [
  21. t('Too eager grouping'),
  22. t('Too specific grouping'),
  23. t('Other grouping issue'),
  24. ];
  25. type GroupingInfoProps = {
  26. event: Event;
  27. projectSlug: string;
  28. showGroupingConfig: boolean;
  29. group?: Group;
  30. };
  31. type EventGroupingInfoResponse = {
  32. [variant: string]: EventGroupVariant;
  33. };
  34. function generatePerformanceGroupInfo({
  35. event,
  36. group,
  37. }: {
  38. event: Event;
  39. group: Group;
  40. }): EventGroupingInfoResponse | null {
  41. if (!event.occurrence) {
  42. return null;
  43. }
  44. const {evidenceData} = event.occurrence;
  45. const hash = event.occurrence?.fingerprint[0] || '';
  46. return group
  47. ? {
  48. [group.issueType]: {
  49. description: t('performance problem'),
  50. hash: event.occurrence?.fingerprint[0] || '',
  51. hashMismatch: false,
  52. key: group.issueType,
  53. type: EventGroupVariantType.PERFORMANCE_PROBLEM,
  54. evidence: {
  55. op: evidenceData?.op,
  56. parent_span_ids: evidenceData?.parentSpanIds,
  57. cause_span_ids: evidenceData?.causeSpanIds,
  58. offender_span_ids: evidenceData?.offenderSpanIds,
  59. desc: t('performance problem'),
  60. fingerprint: hash,
  61. },
  62. },
  63. }
  64. : null;
  65. }
  66. function GroupConfigSelect({
  67. event,
  68. configOverride,
  69. setConfigOverride,
  70. }: {
  71. configOverride: string | null;
  72. event: Event;
  73. setConfigOverride: (value: string) => void;
  74. }) {
  75. if (!event.groupingConfig) {
  76. return null;
  77. }
  78. const configId = configOverride ?? event.groupingConfig?.id;
  79. return (
  80. <GroupingConfigSelect
  81. eventConfigId={event.groupingConfig.id}
  82. configId={configId}
  83. onSelect={selection => setConfigOverride(selection.value)}
  84. />
  85. );
  86. }
  87. function GroupInfoSummary({groupInfo}: {groupInfo: EventGroupingInfoResponse | null}) {
  88. const groupedBy = groupInfo
  89. ? Object.values(groupInfo)
  90. .filter(variant => variant.hash !== null && variant.description !== null)
  91. .map(variant => variant.description)
  92. .sort((a, b) => a!.toLowerCase().localeCompare(b!.toLowerCase()))
  93. .join(', ')
  94. : t('nothing');
  95. return (
  96. <p data-test-id="loaded-grouping-info">
  97. <strong>{t('Grouped by:')}</strong> {groupedBy}
  98. </p>
  99. );
  100. }
  101. export function EventGroupingInfo({
  102. event,
  103. projectSlug,
  104. showGroupingConfig,
  105. group,
  106. }: GroupingInfoProps) {
  107. const organization = useOrganization();
  108. const [isOpen, setIsOpen] = useState(false);
  109. const hasStreamlinedUI = useHasStreamlinedUI();
  110. const [configOverride, setConfigOverride] = useState<string | null>(null);
  111. const hasPerformanceGrouping =
  112. event.occurrence &&
  113. group?.issueCategory === IssueCategory.PERFORMANCE &&
  114. event.type === 'transaction';
  115. const {data, isLoading, isError, isSuccess} = useApiQuery<EventGroupingInfoResponse>(
  116. [
  117. `/projects/${organization.slug}/${projectSlug}/events/${event.id}/grouping-info/`,
  118. {query: configOverride ? {config: configOverride} : {}},
  119. ],
  120. {enabled: !hasPerformanceGrouping, staleTime: Infinity}
  121. );
  122. const groupInfo = hasPerformanceGrouping
  123. ? generatePerformanceGroupInfo({group, event})
  124. : data ?? null;
  125. const variants = groupInfo
  126. ? Object.values(groupInfo).sort((a, b) =>
  127. a.hash && !b.hash
  128. ? -1
  129. : a.description
  130. ?.toLowerCase()
  131. .localeCompare(b.description?.toLowerCase() ?? '') ?? 1
  132. )
  133. : [];
  134. const openState = hasStreamlinedUI ? true : isOpen;
  135. return (
  136. <InterimSection
  137. title={t('Event Grouping Information')}
  138. actions={
  139. hasStreamlinedUI ? null : (
  140. <SectionToggleButton isExpanded={isOpen} onExpandChange={setIsOpen} />
  141. )
  142. }
  143. type={FoldSectionKey.GROUPING_INFO}
  144. >
  145. {!openState ? <GroupInfoSummary groupInfo={groupInfo} /> : null}
  146. {openState ? (
  147. <Fragment>
  148. {hasStreamlinedUI ? <GroupInfoSummary groupInfo={groupInfo} /> : null}
  149. <ConfigHeader>
  150. <div>
  151. {showGroupingConfig && (
  152. <GroupConfigSelect
  153. event={event}
  154. configOverride={configOverride}
  155. setConfigOverride={setConfigOverride}
  156. />
  157. )}
  158. </div>
  159. <FeatureFeedback
  160. featureName="grouping"
  161. feedbackTypes={groupingFeedbackTypes}
  162. buttonProps={{size: 'sm'}}
  163. />
  164. </ConfigHeader>
  165. {isError ? (
  166. <LoadingError message={t('Failed to fetch grouping info.')} />
  167. ) : null}
  168. {isLoading && !hasPerformanceGrouping ? <LoadingIndicator /> : null}
  169. {hasPerformanceGrouping || isSuccess
  170. ? variants.map((variant, index) => (
  171. <Fragment key={variant.key}>
  172. <GroupVariant
  173. event={event}
  174. variant={variant}
  175. showGroupingConfig={showGroupingConfig}
  176. />
  177. {index < variants.length - 1 && <VariantDivider />}
  178. </Fragment>
  179. ))
  180. : null}
  181. </Fragment>
  182. ) : null}
  183. </InterimSection>
  184. );
  185. }
  186. const ConfigHeader = styled('div')`
  187. display: flex;
  188. align-items: center;
  189. justify-content: space-between;
  190. gap: ${space(1)};
  191. margin-bottom: ${space(2)};
  192. `;
  193. export const GroupingConfigItem = styled('span')<{
  194. isActive?: boolean;
  195. isHidden?: boolean;
  196. }>`
  197. font-family: ${p => p.theme.text.familyMono};
  198. opacity: ${p => (p.isHidden ? 0.5 : null)};
  199. font-weight: ${p => (p.isActive ? 'bold' : null)};
  200. font-size: ${p => p.theme.fontSizeSmall};
  201. `;
  202. const VariantDivider = styled('hr')`
  203. padding-top: ${space(1)};
  204. border-top: 1px solid ${p => p.theme.border};
  205. `;