diff --git a/static/app/views/issueDetails/groupRelatedIssues/index.tsx b/static/app/views/issueDetails/groupRelatedIssues/index.tsx index 80e60f9528e2d8..5f825c1dd9ffc8 100644 --- a/static/app/views/issueDetails/groupRelatedIssues/index.tsx +++ b/static/app/views/issueDetails/groupRelatedIssues/index.tsx @@ -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'); - linkToTrace = ( - - {t('These issues were all found within ')} - - {t('this trace')} - - . - - ); - openIssuesButton = ( - - {t('Open in Issues')} - - ); + ({title, extraInfo, openIssuesButton} = getTraceConnectedContent( + traceMeta, + baseUrl, + orgSlug + )); } else { - title = t('Issues caused by the same root cause'); - openIssuesButton = ( - - {t('Open in Issues')} - + title = t('Issues with similar titles'); + extraInfo = t( + 'These issues have the same title and may have been caused by the same root cause.' + ); + openIssuesButton = getLinkButton( + `${baseUrl}&query=issue.id:[${groupId},${issues}]`, + 'Clicked Open Issues from same-root related issues', + 'similar_issues.same_root_cause_clicked_open_issues' ); } return ( - + {isPending ? ( ) : isError ? ( @@ -124,28 +105,67 @@ function RelatedIssuesSection({ /> ) : issues.length > 0 ? ( - {title} - - {linkToTrace} - {openIssuesButton} - + + {title} + + {extraInfo} + {openIssuesButton} + + ) : null} - + ); } +const getTraceConnectedContent = ( + 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 = ( + + {t('These issues were all found within')} + {t('this trace')}. + + ); + 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 ( + + {t('Open in Issues')} + + ); +}; + // Export the component without feature flag controls export {GroupRelatedIssues}; const Title = styled('h4')` + font-size: ${p => p.theme.fontSizeLarge}; margin-bottom: ${space(0.75)}; `; @@ -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%; `; diff --git a/static/app/views/issueDetails/groupSimilarIssues/similarIssues.tsx b/static/app/views/issueDetails/groupSimilarIssues/similarIssues.tsx index 1c6af8a65fe63d..ed78f418a0ff01 100644 --- a/static/app/views/issueDetails/groupSimilarIssues/similarIssues.tsx +++ b/static/app/views/issueDetails/groupSimilarIssues/similarIssues.tsx @@ -35,12 +35,12 @@ function GroupSimilarIssues() { return ( - - - + + + ); } diff --git a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx index 97e5626cd75962..d6768927e767f6 100644 --- a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx +++ b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx @@ -193,7 +193,7 @@ function SimilarStackTrace({project}: Props) { {status === 'ready' && !hasSimilarItems && !hasSimilarityEmbeddingsFeature && ( - {t("There don't seem to be any similar issues.")} + {t("There don't seem to be any similar issues.")} )}
{t("There don't seem to be any similar issues.")}