Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(profiling): View profile links from trace drawer #82893

Merged
merged 1 commit into from
Jan 6, 2025
Merged

fix(profiling): View profile links from trace drawer #82893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions static/app/views/performance/newTraceDetails/traceAnalytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ const trackViewContinuousProfile = (organization: Organization) =>
trackAnalytics('trace.trace_layout.view_continuous_profile', {
organization,
});
const trackViewTransactionProfile = (organization: Organization) =>
trackAnalytics('trace.trace_layout.view_transaction_profile', {
organization,
});

const trackTabPin = (organization: Organization) =>
trackAnalytics('trace.trace_layout.tab_pin', {
Expand Down Expand Up @@ -209,6 +213,7 @@ const traceAnalytics = {
trackShowInView,
trackViewEventJSON,
trackViewContinuousProfile,
trackViewTransactionProfile,
// Layout actions
trackLayoutChange,
trackDrawerMinimize,
Expand Down
131 changes: 86 additions & 45 deletions static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,10 @@ import {useParams} from 'sentry/utils/useParams';
import {traceAnalytics} from '../../traceAnalytics';
import {useTransaction} from '../../traceApi/useTransaction';
import {useDrawerContainerRef} from '../../traceDrawer/details/drawerContainerRefContext';
import {makeTraceContinuousProfilingLink} from '../../traceDrawer/traceProfilingLink';
import {
makeTraceContinuousProfilingLink,
makeTransactionProfilingLink,
} from '../../traceDrawer/traceProfilingLink';
import {
isAutogroupedNode,
isMissingInstrumentationNode,
Expand Down Expand Up @@ -798,30 +801,44 @@ function NodeActions(props: {
organization,
});

const profilerId: string = useMemo(() => {
if (isTransactionNode(props.node)) {
return props.node.value.profiler_id;
const transactionProfileTarget = useMemo(() => {
const profileId = isTransactionNode(props.node)
? props.node.value.profile_id
: isSpanNode(props.node)
? props.node.event?.contexts?.profile?.profile_id ?? ''
: '';
if (!profileId) {
return null;
}
if (isSpanNode(props.node)) {
return props.node.value.sentry_tags?.profiler_id ?? '';
return makeTransactionProfilingLink(profileId, {
orgSlug: props.organization.slug,
projectSlug: props.node.metadata.project_slug ?? '',
});
}, [props.node, props.organization]);

const continuousProfileTarget = useMemo(() => {
const profilerId = isTransactionNode(props.node)
? props.node.value.profiler_id
: isSpanNode(props.node)
? props.node.value.sentry_tags?.profiler_id ?? null
: null;
if (!profilerId) {
return null;
}
return '';
}, [props]);

const profileLink = makeTraceContinuousProfilingLink(props.node, profilerId, {
orgSlug: props.organization.slug,
projectSlug: props.node.metadata.project_slug ?? '',
traceId: params.traceSlug ?? '',
threadId: getThreadIdFromNode(props.node, transaction),
});
return makeTraceContinuousProfilingLink(props.node, profilerId, {
orgSlug: props.organization.slug,
projectSlug: props.node.metadata.project_slug ?? '',
traceId: params.traceSlug ?? '',
threadId: getThreadIdFromNode(props.node, transaction),
});
}, [params.traceSlug, props.node, props.organization, transaction]);

if (!hasNewTraceUi) {
return (
<LegacyNodeActions
{...props}
profileLink={profileLink}
profilerId={profilerId}
transaction={transaction}
continuousProfileTarget={continuousProfileTarget}
transactionProfileTarget={transactionProfileTarget}
/>
);
}
Expand Down Expand Up @@ -850,11 +867,23 @@ function NodeActions(props: {
/>
</Tooltip>
) : null}
{profileLink ? (
<Tooltip title={t('Continuous Profile')}>
{continuousProfileTarget ? (
<Tooltip title={t('Profile')}>
<ActionButton
onClick={() => traceAnalytics.trackViewContinuousProfile(props.organization)}
to={continuousProfileTarget}
size="xs"
aria-label={t('Profile')}
icon={<IconProfiling size="xs" />}
/>
</Tooltip>
) : transactionProfileTarget ? (
<Tooltip title={t('Profile')}>
<ActionButton
onClick={() => traceAnalytics.trackViewTransactionProfile(props.organization)}
to={transactionProfileTarget}
size="xs"
aria-label={t('Continuous Profile')}
aria-label={t('Profile')}
icon={<IconProfiling size="xs" />}
/>
</Tooltip>
Expand Down Expand Up @@ -888,6 +917,7 @@ const ActionWrapper = styled('div')`
`;

function LegacyNodeActions(props: {
continuousProfileTarget: LocationDescriptor | null;
node: TraceTreeNode<any>;
onTabScrollToNode: (
node:
Expand All @@ -896,20 +926,18 @@ function LegacyNodeActions(props: {
| SiblingAutogroupNode
| MissingInstrumentationNode
) => void;
profileLink: LocationDescriptor | null;
profilerId: string;
transaction: EventTransaction | undefined;
organization: Organization;
transactionProfileTarget: LocationDescriptor | null;
eventSize?: number | undefined;
}) {
const navigate = useNavigate();
const organization = useOrganization();

const items = useMemo((): MenuItemProps[] => {
const showInView: MenuItemProps = {
key: 'show-in-view',
label: t('Show in View'),
onAction: () => {
traceAnalytics.trackShowInView(organization);
traceAnalytics.trackShowInView(props.organization);
props.onTabScrollToNode(props.node);
},
};
Expand All @@ -925,9 +953,9 @@ function LegacyNodeActions(props: {
const jsonDetails: MenuItemProps = {
key: 'json-details',
onAction: () => {
traceAnalytics.trackViewEventJSON(organization);
traceAnalytics.trackViewEventJSON(props.organization);
window.open(
`/api/0/projects/${organization.slug}/${projectSlug}/events/${eventId}/json/`,
`/api/0/projects/${props.organization.slug}/${projectSlug}/events/${eventId}/json/`,
'_blank'
);
},
Expand All @@ -936,28 +964,37 @@ function LegacyNodeActions(props: {
(typeof eventSize === 'number' ? ` (${formatBytesBase10(eventSize, 0)})` : ''),
};

const continuousProfileLink: MenuItemProps | null = props.profileLink
const profileLink: MenuItemProps | null = props.continuousProfileTarget
? {
key: 'continuous-profile',
key: 'profile',
onAction: () => {
traceAnalytics.trackViewContinuousProfile(organization);
navigate(props.profileLink!);
traceAnalytics.trackViewContinuousProfile(props.organization);
navigate(props.continuousProfileTarget!);
},
label: t('Continuous Profile'),
label: t('View Profile'),
}
: null;
: props.transactionProfileTarget
? {
key: 'profile',
onAction: () => {
traceAnalytics.trackViewTransactionProfile(props.organization);
navigate(props.transactionProfileTarget!);
},
label: t('View Profile'),
}
: null;

if (isTransactionNode(props.node)) {
return [showInView, jsonDetails, continuousProfileLink].filter(TypeSafeBoolean);
return [showInView, jsonDetails, profileLink].filter(TypeSafeBoolean);
}
if (isSpanNode(props.node)) {
return [showInView, continuousProfileLink].filter(TypeSafeBoolean);
return [showInView, profileLink].filter(TypeSafeBoolean);
}
if (isMissingInstrumentationNode(props.node)) {
return [showInView, continuousProfileLink].filter(TypeSafeBoolean);
return [showInView, profileLink].filter(TypeSafeBoolean);
}
if (isTraceErrorNode(props.node)) {
return [showInView, continuousProfileLink].filter(TypeSafeBoolean);
return [showInView, profileLink].filter(TypeSafeBoolean);
}
if (isRootNode(props.node)) {
return [showInView];
Expand All @@ -967,20 +1004,24 @@ function LegacyNodeActions(props: {
}

return [showInView];
}, [props, navigate, organization]);
}, [props, navigate]);

return (
<ActionsContainer>
<Actions className="Actions">
{props.profileLink ? (
<LinkButton size="xs" to={props.profileLink}>
{t('Continuous Profile')}
{props.continuousProfileTarget ? (
<LinkButton size="xs" to={props.continuousProfileTarget}>
{t('View Profile')}
</LinkButton>
) : props.transactionProfileTarget ? (
<LinkButton size="xs" to={props.transactionProfileTarget}>
{t('View Profile')}
</LinkButton>
) : null}
<Button
size="xs"
onClick={_e => {
traceAnalytics.trackShowInView(organization);
traceAnalytics.trackShowInView(props.organization);
props.onTabScrollToNode(props.node);
}}
>
Expand All @@ -991,8 +1032,8 @@ function LegacyNodeActions(props: {
<LinkButton
size="xs"
icon={<IconOpen />}
onClick={() => traceAnalytics.trackViewEventJSON(organization)}
href={`/api/0/projects/${organization.slug}/${props.node.value.project_slug}/events/${props.node.value.event_id}/json/`}
onClick={() => traceAnalytics.trackViewEventJSON(props.organization)}
href={`/api/0/projects/${props.organization.slug}/${props.node.value.project_slug}/events/${props.node.value.event_id}/json/`}
external
>
{t('JSON')} (<FileSize bytes={props.eventSize ?? 0} />)
Expand Down
24 changes: 23 additions & 1 deletion static/app/views/performance/newTraceDetails/traceDrawer/traceProfilingLink.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import type {Location, LocationDescriptor} from 'history';

import {getDateFromTimestamp} from 'sentry/utils/dates';
import {generateContinuousProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
import {
generateContinuousProfileFlamechartRouteWithQuery,
generateProfileFlamechartRouteWithQuery,
} from 'sentry/utils/profiling/routes';

import {isSpanNode, isTransactionNode} from '../traceGuards';
import {TraceTree} from '../traceModels/traceTree';
Expand All @@ -25,6 +28,25 @@ function getEventId(node: TraceTreeNode<TraceTree.NodeValue>): string | undefine
return TraceTree.ParentTransaction(node)?.value?.event_id;
}

export function makeTransactionProfilingLink(
profileId: string,
options: {
orgSlug: string;
projectSlug: string;
},
query: Location['query'] = {}
): LocationDescriptor | null {
if (!options.projectSlug || !options.orgSlug) {
return null;
}
return generateProfileFlamechartRouteWithQuery({
orgSlug: options.orgSlug,
projectSlug: options.projectSlug,
profileId,
query,
});
}

/**
* Generates a link to a continuous profile for a given trace element type
*/
Expand Down
Loading