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.
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
feat(related_issues): Create separate sections for each relation type #70648
feat(related_issues): Create separate sections for each relation type #70648
Conversation
In #70504 I added support for the `type` parameter which allows getting separately the data for same-root issues vs trace-connected issues. This UI change allows each related issues section to fetch and render the data independently, thus, making the page load faster. These changes are required in order to support just fetching trace-connected issues from the Issues Details page.
|
||
const params = {groupId: groupId}; | ||
const errorType = 'RuntimeError'; | ||
const noData = { | ||
data: [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now, the shape of the data returned by the endpoint will only contain one type of relation.
For instance:
{
"type": "trace_connected",
"data": [
5290882209,
5291204527,
5298771767,
4939519003,
4808538909,
5298771743
],
"meta": {
"event_id": "fe2c6fbf76ac4e1886e7e150a9f9b98d",
"trace_id": "361d8fb1fb364a2693399b0a2541787e"
}
}
@@ -99,8 +77,12 @@ describe('Related Issues View', function () { | |||
}); | |||
|
|||
it('renders with no data', async function () { | |||
relatedIssuesMock = MockApiClient.addMockResponse({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We now need two different mocks.
function GroupRelatedIssues({params}: Props) { | ||
const {groupId} = params; | ||
|
||
const organization = useOrganization(); | ||
const orgSlug = organization.slug; | ||
|
||
return ( | ||
<Fragment> | ||
<RelatedIssuesSection |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have created a new component. Each component will do its fetches independently.
}, | ||
{same_root_cause: [], trace_connected: []} | ||
} = useApiQuery<RelatedIssuesResponse>( | ||
[`/issues/${groupId}/related-issues/?type=${relationType}`], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We now fetch with ?type=${relationType}
.
let linkToTrace; | ||
let openIssuesButton; | ||
let title; | ||
if (relationType === 'trace_connected' && traceMeta) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this block we initialize all the values specific to the trace-connected section.
@@ -17,48 +18,25 @@ describe('Related Issues View', function () { | |||
const group2 = '20'; | |||
// query=issue.id:[15,20] -> query=issue.id%3A%5B15%2C20%5D | |||
const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id%3A%5B${group1}%2C${group2}%5D`; | |||
// const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id:[${group1},${group2}]`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id:[${group1},${group2}]`; |
In #70504 I added support for the
type
parameter which allows getting the data for same-root issues vs trace-connected issues separately.This UI change allows each related issues section to fetch and render the data independently, thus, making the page load faster.
These changes are required to support fetching trace-connected issues from the Issues Details page without also fetching same-root-connected data.