diff --git a/static/app/components/events/interfaces/performance/eventTraceView.spec.tsx b/static/app/components/events/interfaces/performance/eventTraceView.spec.tsx index 33fb521eb0b941..0fdba9b543ce6a 100644 --- a/static/app/components/events/interfaces/performance/eventTraceView.spec.tsx +++ b/static/app/components/events/interfaces/performance/eventTraceView.spec.tsx @@ -156,7 +156,7 @@ describe('EventTraceView', () => { render( ); - expect(await screen.findByText('Trace')).toBeInTheDocument(); + expect(await screen.findByText('Trace Preview')).toBeInTheDocument(); expect( await screen.findByRole('link', {name: 'View Full Trace'}) ).toBeInTheDocument(); @@ -192,6 +192,6 @@ describe('EventTraceView', () => { render(); - expect(await screen.findByText('Trace')).toBeInTheDocument(); + expect(await screen.findByText('Trace Preview')).toBeInTheDocument(); }); }); diff --git a/static/app/components/events/interfaces/performance/eventTraceView.tsx b/static/app/components/events/interfaces/performance/eventTraceView.tsx index ce2e3e7700d94a..2aaa4002775dfb 100644 --- a/static/app/components/events/interfaces/performance/eventTraceView.tsx +++ b/static/app/components/events/interfaces/performance/eventTraceView.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; import {LinkButton} from 'sentry/components/button'; +import ExternalLink from 'sentry/components/links/externalLink'; import Link from 'sentry/components/links/link'; import {generateTraceTarget} from 'sentry/components/quickTrace/utils'; import {IconOpen} from 'sentry/icons'; @@ -11,6 +12,7 @@ import type {Event} from 'sentry/types/event'; import {type Group, IssueCategory} from 'sentry/types/group'; import type {Organization} from 'sentry/types/organization'; import {defined} from 'sentry/utils'; +import {trackAnalytics} from 'sentry/utils/analytics'; import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; @@ -58,9 +60,15 @@ interface EventTraceViewInnerProps { event: Event; organization: Organization; traceId: string; + traceTarget: LocationDescriptor; } -function EventTraceViewInner({event, organization, traceId}: EventTraceViewInnerProps) { +function EventTraceViewInner({ + event, + organization, + traceId, + traceTarget, +}: EventTraceViewInnerProps) { const timestamp = new Date(event.dateReceived).getTime() / 1e3; const trace = useTrace({ @@ -108,7 +116,14 @@ function EventTraceViewInner({event, organization, traceId}: EventTraceViewInner replay={null} event={event} /> - + { + trackAnalytics('issue_details.view_full_trace_waterfall_clicked', { + organization, + }); + }} + /> ); @@ -129,39 +144,6 @@ function getHrefFromTraceTarget(traceTarget: LocationDescriptor) { return `${traceTarget.pathname}?${searchParams.toString()}`; } -function IssuesTraceOverlay({event}: {event: Event}) { - const location = useLocation(); - const organization = useOrganization(); - - const traceTarget = generateTraceTarget( - event, - organization, - { - ...location, - query: { - ...location.query, - groupId: event.groupID, - }, - }, - TraceViewSources.ISSUE_DETAILS - ); - - return ( - - } - href={getHrefFromTraceTarget(traceTarget)} - external - analyticsEventName="Issue Details: View Full Trace" - analyticsEventKey="issue_details.view_full_trace" - > - {t('View Full Trace')} - - - ); -} - function OneOtherIssueEvent({event}: {event: Event}) { const location = useLocation(); const organization = useOrganization(); @@ -200,38 +182,39 @@ const IssuesTraceContainer = styled('div')` position: relative; `; -const IssuesTraceOverlayContainer = styled('div')` +const IssuesTraceOverlayContainer = styled(ExternalLink)` position: absolute; inset: 0; z-index: 10; - - a { - display: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - &:hover { - background-color: rgba(128, 128, 128, 0.4); - - a { - display: block; - } - } `; -interface EventTraceViewProps extends Omit { +interface EventTraceViewProps { + event: Event; group: Group; + organization: Organization; } export function EventTraceView({group, event, organization}: EventTraceViewProps) { const traceId = event.contexts.trace?.trace_id; + const location = useLocation(); + if (!traceId) { return null; } + const traceTarget = generateTraceTarget( + event, + organization, + { + ...location, + query: { + ...location.query, + groupId: event.groupID, + }, + }, + TraceViewSources.ISSUE_DETAILS + ); + const hasProfilingFeature = organization.features.includes('profiling'); const hasTracePreviewFeature = hasProfilingFeature && @@ -239,13 +222,29 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps group.issueCategory !== IssueCategory.PERFORMANCE; return ( - + } + href={getHrefFromTraceTarget(traceTarget)} + external + analyticsEventName="Issue Details: View Full Trace Action Button Clicked" + analyticsEventKey="issue_details.view_full_trace_action_button_clicked" + > + {t('View Full Trace')} + + } + > {hasTracePreviewFeature && ( )} diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx index f58b933225b4c9..7d197f408b1191 100644 --- a/static/app/utils/analytics/issueAnalyticsEvents.tsx +++ b/static/app/utils/analytics/issueAnalyticsEvents.tsx @@ -158,6 +158,7 @@ export type IssueEventParameters = { 'issue_details.streamline_ui_toggle': { isEnabled: boolean; }; + 'issue_details.view_full_trace_waterfall_clicked': {}; 'issue_details.view_hierarchy.hover_rendering_system': { platform?: string; user_org_role?: string; @@ -453,6 +454,8 @@ export const issueEventMap: Record = { 'Issue Group Details: Tags distribution value bar clicked', 'integrations.integration_reinstall_clicked': 'Integration Reinstall Button Clicked', 'one_other_related_trace_issue.clicked': 'One Other Related Trace Issue Clicked', + 'issue_details.view_full_trace_waterfall_clicked': + ' Issue Details: View Full Trace Waterfall Clicked', // Performance Issue specific events here 'issue_details.performance.autogrouped_siblings_toggle':