123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- import {Fragment, useState} from 'react';
- import styled from '@emotion/styled';
- import {FeatureFeedback} from 'sentry/components/featureFeedback';
- import LoadingError from 'sentry/components/loadingError';
- import LoadingIndicator from 'sentry/components/loadingIndicator';
- import {t} from 'sentry/locale';
- import {space} from 'sentry/styles/space';
- import type {Event, EventGroupVariant} from 'sentry/types/event';
- import {EventGroupVariantType} from 'sentry/types/event';
- import type {Group} from 'sentry/types/group';
- import {IssueCategory} from 'sentry/types/group';
- import {useApiQuery} from 'sentry/utils/queryClient';
- import useOrganization from 'sentry/utils/useOrganization';
- import SectionToggleButton from 'sentry/views/issueDetails/sectionToggleButton';
- import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
- import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
- import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
- import GroupingConfigSelect from './groupingConfigSelect';
- import GroupVariant from './groupingVariant';
- const groupingFeedbackTypes = [
- t('Too eager grouping'),
- t('Too specific grouping'),
- t('Other grouping issue'),
- ];
- type GroupingInfoProps = {
- event: Event;
- projectSlug: string;
- showGroupingConfig: boolean;
- group?: Group;
- };
- type EventGroupingInfoResponse = {
- [variant: string]: EventGroupVariant;
- };
- function generatePerformanceGroupInfo({
- event,
- group,
- }: {
- event: Event;
- group: Group;
- }): EventGroupingInfoResponse | null {
- if (!event.occurrence) {
- return null;
- }
- const {evidenceData} = event.occurrence;
- const hash = event.occurrence?.fingerprint[0] || '';
- return group
- ? {
- [group.issueType]: {
- description: t('performance problem'),
- hash: event.occurrence?.fingerprint[0] || '',
- hashMismatch: false,
- key: group.issueType,
- type: EventGroupVariantType.PERFORMANCE_PROBLEM,
- evidence: {
- op: evidenceData?.op,
- parent_span_ids: evidenceData?.parentSpanIds,
- cause_span_ids: evidenceData?.causeSpanIds,
- offender_span_ids: evidenceData?.offenderSpanIds,
- desc: t('performance problem'),
- fingerprint: hash,
- },
- },
- }
- : null;
- }
- function GroupConfigSelect({
- event,
- configOverride,
- setConfigOverride,
- }: {
- configOverride: string | null;
- event: Event;
- setConfigOverride: (value: string) => void;
- }) {
- if (!event.groupingConfig) {
- return null;
- }
- const configId = configOverride ?? event.groupingConfig?.id;
- return (
- <GroupingConfigSelect
- eventConfigId={event.groupingConfig.id}
- configId={configId}
- onSelect={selection => setConfigOverride(selection.value)}
- />
- );
- }
- function GroupInfoSummary({groupInfo}: {groupInfo: EventGroupingInfoResponse | null}) {
- const groupedBy = groupInfo
- ? Object.values(groupInfo)
- .filter(variant => variant.hash !== null && variant.description !== null)
- .map(variant => variant.description)
- .sort((a, b) => a!.toLowerCase().localeCompare(b!.toLowerCase()))
- .join(', ')
- : t('nothing');
- return (
- <p data-test-id="loaded-grouping-info">
- <strong>{t('Grouped by:')}</strong> {groupedBy}
- </p>
- );
- }
- export function EventGroupingInfo({
- event,
- projectSlug,
- showGroupingConfig,
- group,
- }: GroupingInfoProps) {
- const organization = useOrganization();
- const [isOpen, setIsOpen] = useState(false);
- const hasStreamlinedUI = useHasStreamlinedUI();
- const [configOverride, setConfigOverride] = useState<string | null>(null);
- const hasPerformanceGrouping =
- event.occurrence &&
- group?.issueCategory === IssueCategory.PERFORMANCE &&
- event.type === 'transaction';
- const {data, isLoading, isError, isSuccess} = useApiQuery<EventGroupingInfoResponse>(
- [
- `/projects/${organization.slug}/${projectSlug}/events/${event.id}/grouping-info/`,
- {query: configOverride ? {config: configOverride} : {}},
- ],
- {enabled: !hasPerformanceGrouping, staleTime: Infinity}
- );
- const groupInfo = hasPerformanceGrouping
- ? generatePerformanceGroupInfo({group, event})
- : data ?? null;
- const variants = groupInfo
- ? Object.values(groupInfo).sort((a, b) =>
- a.hash && !b.hash
- ? -1
- : a.description
- ?.toLowerCase()
- .localeCompare(b.description?.toLowerCase() ?? '') ?? 1
- )
- : [];
- const openState = hasStreamlinedUI ? true : isOpen;
- return (
- <InterimSection
- title={t('Event Grouping Information')}
- actions={
- hasStreamlinedUI ? null : (
- <SectionToggleButton isExpanded={isOpen} onExpandChange={setIsOpen} />
- )
- }
- type={FoldSectionKey.GROUPING_INFO}
- >
- {!openState ? <GroupInfoSummary groupInfo={groupInfo} /> : null}
- {openState ? (
- <Fragment>
- {hasStreamlinedUI ? <GroupInfoSummary groupInfo={groupInfo} /> : null}
- <ConfigHeader>
- <div>
- {showGroupingConfig && (
- <GroupConfigSelect
- event={event}
- configOverride={configOverride}
- setConfigOverride={setConfigOverride}
- />
- )}
- </div>
- <FeatureFeedback
- featureName="grouping"
- feedbackTypes={groupingFeedbackTypes}
- buttonProps={{size: 'sm'}}
- />
- </ConfigHeader>
- {isError ? (
- <LoadingError message={t('Failed to fetch grouping info.')} />
- ) : null}
- {isLoading && !hasPerformanceGrouping ? <LoadingIndicator /> : null}
- {hasPerformanceGrouping || isSuccess
- ? variants.map((variant, index) => (
- <Fragment key={variant.key}>
- <GroupVariant
- event={event}
- variant={variant}
- showGroupingConfig={showGroupingConfig}
- />
- {index < variants.length - 1 && <VariantDivider />}
- </Fragment>
- ))
- : null}
- </Fragment>
- ) : null}
- </InterimSection>
- );
- }
- const ConfigHeader = styled('div')`
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: ${space(1)};
- margin-bottom: ${space(2)};
- `;
- export const GroupingConfigItem = styled('span')<{
- isActive?: boolean;
- isHidden?: boolean;
- }>`
- font-family: ${p => p.theme.text.familyMono};
- opacity: ${p => (p.isHidden ? 0.5 : null)};
- font-weight: ${p => (p.isActive ? 'bold' : null)};
- font-size: ${p => p.theme.fontSizeSmall};
- `;
- const VariantDivider = styled('hr')`
- padding-top: ${space(1)};
- border-top: 1px solid ${p => p.theme.border};
- `;
|