Skip to content

feat(related_groups): Move same title issues below similar stack traces #81177

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
merged 2 commits into from
Nov 22, 2024
Merged

feat(related_groups): Move same title issues below similar stack traces #81177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9982400
feat(related_groups): Move same title issues below similar stack traces
armenzg Nov 22, 2024
44b28c8
Add events back
armenzg Nov 22, 2024
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
102 changes: 62 additions & 40 deletions static/app/views/issueDetails/groupRelatedIssues/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,47 +74,28 @@ function RelatedIssuesSection({
// This is important for traces since issues can be for any project in the org
const baseUrl = `/organizations/${orgSlug}/issues/?project=-1`;
let title: React.ReactNode = null;
let linkToTrace: React.ReactNode = null;
let extraInfo: React.ReactNode = null;
let openIssuesButton: React.ReactNode = null;
if (relationType === 'trace_connected' && traceMeta) {
title = t('Issues in the same trace');
Copy link
Member Author

Choose a reason for hiding this comment

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

Moved these lines into a function.

linkToTrace = (
<small>
{t('These issues were all found within ')}
<Link
to={`/organizations/${orgSlug}/performance/trace/${traceMeta.trace_id}/?node=error-${traceMeta.event_id}`}
>
{t('this trace')}
</Link>
.
</small>
);
openIssuesButton = (
<LinkButton
to={`${baseUrl}&query=trace:${traceMeta.trace_id}`}
size="xs"
analyticsEventName="Clicked Open Issues from trace-connected related issues"
analyticsEventKey="similar_issues.trace_connected_issues_clicked_open_issues"
>
{t('Open in Issues')}
</LinkButton>
);
({title, extraInfo, openIssuesButton} = getTraceConnectedContent(
traceMeta,
baseUrl,
orgSlug
));
} else {
title = t('Issues caused by the same root cause');
openIssuesButton = (
<LinkButton
to={`${baseUrl}&query=issue.id:[${groupId},${issues}]`}
size="xs"
analyticsEventName="Clicked Open Issues from same-root related issues"
analyticsEventKey="similar_issues.same_root_cause_clicked_open_issues"
>
{t('Open in Issues')}
</LinkButton>
title = t('Issues with similar titles');
Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed the section.

extraInfo = t(
'These issues have the same title and may have been caused by the same root cause.'
);
openIssuesButton = getLinkButton(
Copy link
Member Author

Choose a reason for hiding this comment

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

We're now using a function to generate the button to share functionality.

`${baseUrl}&query=issue.id:[${groupId},${issues}]`,
'Clicked Open Issues from same-root related issues',
'similar_issues.same_root_cause_clicked_open_issues'
);
}

return (
<HeaderWrapper>
<Fragment>
{isPending ? (
<LoadingIndicator />
) : isError ? (
Expand All @@ -124,28 +105,67 @@ function RelatedIssuesSection({
/>
) : issues.length > 0 ? (
<Fragment>
<Title>{title}</Title>
<TextButtonWrapper>
{linkToTrace}
{openIssuesButton}
</TextButtonWrapper>
<HeaderWrapper>
<Title>{title}</Title>
<TextButtonWrapper>
<span>{extraInfo}</span>
{openIssuesButton}
</TextButtonWrapper>
</HeaderWrapper>
<GroupList
orgSlug={orgSlug}
queryParams={{query: query}}
source="similar-issues-tab"
canSelectGroups={false}
withChart={false}
withColumns={['event']}
/>
</Fragment>
) : null}
</HeaderWrapper>
</Fragment>
);
}

const getTraceConnectedContent = (
Copy link
Member Author

Choose a reason for hiding this comment

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

The code here is the same as what I grabbed from above.

traceMeta: RelatedIssuesResponse['meta'],
baseUrl: string,
orgSlug: string
) => {
const title = t('Issues in the same trace');
const url = `/organizations/${orgSlug}/performance/trace/${traceMeta.trace_id}/?node=error-${traceMeta.event_id}`;
const extraInfo = (
<small>
{t('These issues were all found within')}
<Link to={url}>{t('this trace')}</Link>.
</small>
);
const openIssuesButton = getLinkButton(
`${baseUrl}&query=trace:${traceMeta.trace_id}`,
'Clicked Open Issues from trace-connected related issues',
'similar_issues.trace_connected_issues_clicked_open_issues'
);

return {title, extraInfo, openIssuesButton};
};

const getLinkButton = (to: string, eventName: string, eventKey: string) => {
return (
<LinkButton
to={to}
size="xs"
analyticsEventName={eventName}
analyticsEventKey={eventKey}
>
{t('Open in Issues')}
</LinkButton>
);
};

// Export the component without feature flag controls
export {GroupRelatedIssues};

const Title = styled('h4')`
font-size: ${p => p.theme.fontSizeLarge};
Copy link
Member Author

Choose a reason for hiding this comment

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

Make it the same size as issue with similar stack traces header.

margin-bottom: ${space(0.75)};
`;

Expand All @@ -158,7 +178,9 @@ const HeaderWrapper = styled('div')`
`;

const TextButtonWrapper = styled('div')`
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: ${space(1)};
width: 100%;
`;
6 changes: 3 additions & 3 deletions static/app/views/issueDetails/groupSimilarIssues/similarIssues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ function GroupSimilarIssues() {

return (
<Fragment>
<Feature features="related-issues">
<GroupRelatedIssues />
</Feature>
<Feature features="similarity-view" project={project}>
<SimilarStackTrace project={project} />
</Feature>
<Feature features="related-issues">
<GroupRelatedIssues />
</Feature>
</Fragment>
);
}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ function SimilarStackTrace({project}: Props) {
{status === 'ready' && !hasSimilarItems && !hasSimilarityEmbeddingsFeature && (
<Panel>
<EmptyStateWarning>
<p>{t("There don't seem to be any similar issues.")}</p>
<Title>{t("There don't seem to be any similar issues.")}</Title>
Copy link
Member Author

Choose a reason for hiding this comment

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

This:
image

vs this:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

We should change the font for similarity embeddings as well here to match

</EmptyStateWarning>
</Panel>
)}
Expand Down
Loading