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;
+ }
+`;