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':