diff --git a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx index bb2e736a0cd623..f55776270fe2e1 100644 --- a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx +++ b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx @@ -1,4 +1,5 @@ import {EntryRequestFixture} from 'sentry-fixture/eventEntry'; +import {OrganizationFixture} from 'sentry-fixture/organization'; import { MockSpan, @@ -608,11 +609,21 @@ describe('SpanEvidenceKeyValueList', () => { builder.addSpan(parentSpan); it('Renders relevant fields', () => { + MockApiClient.addMockResponse({ + url: '/organizations/org-slug/dashboards/', + body: [], + }); + render( + />, + { + organization: OrganizationFixture({ + features: ['visibility-explore-view'], + }), + } ); expect(screen.getByRole('cell', {name: 'Transaction'})).toBeInTheDocument(); @@ -635,6 +646,8 @@ describe('SpanEvidenceKeyValueList', () => { screen.getByTestId('span-evidence-key-value-list.slow-db-query') ).toHaveTextContent('SELECT pokemon FROM pokedex'); expect(screen.getByRole('cell', {name: 'Duration Impact'})).toBeInTheDocument(); + + expect(screen.getByRole('link', {name: 'More Samples'})).toBeInTheDocument(); }); }); diff --git a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx index bd1882bb64b3de..665762b387a45b 100644 --- a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx +++ b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx @@ -8,6 +8,7 @@ import mapValues from 'lodash/mapValues'; import {LinkButton} from '@sentry/scraps/button'; import {CodeBlock} from '@sentry/scraps/code'; +import {Flex} from '@sentry/scraps/layout'; import {Link} from '@sentry/scraps/link'; import {Tooltip} from '@sentry/scraps/tooltip'; @@ -25,6 +26,7 @@ import { SpanSubTimingName, } from 'sentry/components/events/interfaces/spans/utils'; import {AnnotatedText} from 'sentry/components/events/meta/annotatedText'; +import {IconGraph} from 'sentry/icons/iconGraph'; import {t} from 'sentry/locale'; import type {Entry, EntryRequest, Event, EventTransaction} from 'sentry/types/event'; import {EntryType} from 'sentry/types/event'; @@ -43,6 +45,12 @@ import {SQLishFormatter} from 'sentry/utils/sqlish'; import {safeURL} from 'sentry/utils/url/safeURL'; import {useLocation} from 'sentry/utils/useLocation'; import {useOrganization} from 'sentry/utils/useOrganization'; +import {SpanFields} from 'sentry/views/insights/types'; +import {SpanSummaryLink} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/span/components/spanSummaryLink'; +import { + getSearchInExploreTarget, + TraceDrawerActionKind, +} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils'; import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils'; import {getPerformanceDuration} from 'sentry/views/performance/utils/getPerformanceDuration'; @@ -490,15 +498,54 @@ function SlowDBQueryEvidence({ projectSlug, location, }: SpanEvidenceKeyValueListProps) { + const span = offendingSpans[0]!; + const sentryTags = 'sentry_tags' in span ? span.sentry_tags : undefined; + const groupHash = sentryTags?.group ?? span.hash ?? ''; + const hasExplore = organization.features.includes('visibility-explore-view'); + + const queryValue = ( + + + + {formatter.toString(span.description ?? '')} + + + + + {hasExplore && span.description && ( + + + + {t('More Samples')} + + + )} + + + ); + return ( - ); @@ -858,3 +905,12 @@ function formatBasePath(span: Span, baseURL?: string): string { const NoPaddingClippedBox = styled(ClippedBox)` padding: 0; `; + +const QueryCard = styled('div')` + border-radius: ${p => p.theme.radius.md}; + overflow: hidden; + border: 1px solid ${p => p.theme.tokens.border.secondary}; + pre { + margin: 0 !important; + } +`;