Skip to content

feat(traces): add 'Open in Logs' link to Logs view #110311

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

Merged
JoshuaKGoldberg merged 2 commits into from
Mar 11, 2026
Merged

feat(traces): add 'Open in Logs' link to Logs view #110311

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9035db3
feat(traces): add 'View in Logs' link to Logs view
JoshuaKGoldberg Mar 10, 2026
d4e897b
ref: switch from Container to Flex
JoshuaKGoldberg Mar 10, 2026
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
36 changes: 28 additions & 8 deletions static/app/views/performance/newTraceDetails/traceOurlogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,20 @@ import type React from 'react';
import {Fragment} from 'react';
import styled from '@emotion/styled';

import {LinkButton} from '@sentry/scraps/button';
import {Flex} from '@sentry/scraps/layout';

import usePageFilters from 'sentry/components/pageFilters/usePageFilters';
import Panel from 'sentry/components/panels/panel';
import {SearchQueryBuilder} from 'sentry/components/searchQueryBuilder';
import {t} from 'sentry/locale';
import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
import useOrganization from 'sentry/utils/useOrganization';
import {LogsPageDataProvider} from 'sentry/views/explore/contexts/logs/logsPageData';
import {useLogsFrozenTraceIds} from 'sentry/views/explore/logs/logsFrozenContext';
import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
import {LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
import {adjustLogTraceID, getLogsUrl} from 'sentry/views/explore/logs/utils';
import {
useQueryParamsSearch,
useSetQueryParamsQuery,
Expand Down Expand Up @@ -51,19 +58,32 @@ function LogsSectionContent({
}: {
scrollContainer: React.RefObject<HTMLDivElement | null>;
}) {
const organization = useOrganization();
const {selection} = usePageFilters();
const traceIds = useLogsFrozenTraceIds();
const setLogsQuery = useSetQueryParamsQuery();
const logsSearch = useQueryParamsSearch();

const traceId = traceIds?.[0] && adjustLogTraceID(traceIds[0]);
const logsUrl = getLogsUrl({
organization,
selection,
query: traceId ? `trace:${traceId}` : undefined,
});
Copy link
Member Author

@JoshuaKGoldberg JoshuaKGoldberg Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Question] I got these added lines from asking Cursor "I need to open the current sentry.io trace in /explore/logs. How do i construct that link?". Is this the right way to do that?

Copy link
Contributor

@nsdeschenes nsdeschenes Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, typically there are functions that we'll use to create links as theres some repetitiveness to it. Everything here looks fine.


return (
<Fragment>
<SearchQueryBuilder
placeholder={t('Search logs for this event')}
filterKeys={{}}
getTagValues={() => new Promise<string[]>(() => [])}
initialQuery={logsSearch.formatString()}
searchSource="ourlogs"
onSearch={query => setLogsQuery(query)}
/>
<Flex gap="lg">
<SearchQueryBuilder
placeholder={t('Search logs for this event')}
filterKeys={{}}
getTagValues={() => new Promise<string[]>(() => [])}
initialQuery={logsSearch.formatString()}
searchSource="ourlogs"
onSearch={query => setLogsQuery(query)}
/>
<LinkButton to={logsUrl}>{t('Open in Logs')}</LinkButton>
</Flex>
Copy link
Contributor

@cursor cursor bot Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Search bar won't stretch to fill available width

Medium Severity

The SearchQueryBuilder inside the Flex container has no flex: 1 or equivalent, so it won't grow to fill the available row width. The existing analogous pattern in ourlogsDrawer.tsx wraps the search builder in <Flex flex="1"> to ensure it stretches. Without this, the search bar will render at its intrinsic width and the LinkButton will sit immediately next to it, leaving empty space on the right — a visible layout regression.

Fix in Cursor Fix in Web

Copy link
Member Author

@JoshuaKGoldberg JoshuaKGoldberg Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot of the search bar with proper width

Tim Robinson "are you sure about that" animated meme

<TableContainer>
<LogsInfiniteTable embedded scrollContainer={scrollContainer} />
</TableContainer>
Expand Down
Loading