-
Notifications
You must be signed in to change notification settings - Fork 368
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
upcoming: [DI-23081] - Add filtering, pagination and sorting for resources section in CloudPulse alerts show details page #11541
upcoming: [DI-23081] - Add filtering, pagination and sorting for resources section in CloudPulse alerts show details page #11541
Conversation
…ure/alert_detail_resource_part1
…ure/alert_detail_resource_part1
…t_detail_resource_part2
…t_detail_resource_part2
This PR is still in progress, Once everything is set will be opening it for review |
Coverage Report: ✅ |
Cloud Manager UI test results🎉 474 passing tests on test run #20 ↗︎
|
Here OrderBy is not directly used for sorting inside the table, but we have taken sortData function from OrderBy component and reused the same. Also we have not used usePagination hook as well.
Also we have implemented, on any Page size change or sorting change, we move to first page and also we need to scroll to top till Resources section. @jaalah-akamai , this is done based on our discussion in the sync up. Thanks. |
@hkhalil-akamai / @pmakode-akamai , This PR is now ready for review |
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.
Looks good to me! Left a couple of minor comments
✅ Data & Filtering
✅ Pagination & Sorting
✅ All tests pass
thank you!
it('should handle sorting correctly', async () => { | ||
const { getByTestId } = renderWithTheme( | ||
<AlertResources alertResourceIds={['1', '2', '3']} serviceType="linode" /> | ||
); | ||
const resourceColumn = getByTestId('resource'); // get the resource header column | ||
await userEvent.click(resourceColumn); | ||
|
||
const tableBody = getByTestId('alert_resources_content'); | ||
let rows = Array.from(tableBody.querySelectorAll('tr')); | ||
expect( | ||
rows | ||
.map(({ textContent }) => textContent) | ||
.every((text, index) => { | ||
return text?.includes(linodes[linodes.length - 1 - index].label); | ||
}) | ||
).toBe(true); | ||
|
||
await userEvent.click(resourceColumn); // again reverse the sorting | ||
rows = Array.from(tableBody.querySelectorAll('tr')); | ||
expect( | ||
rows | ||
.map(({ textContent }) => textContent) | ||
.every((text, index) => text?.includes(linodes[index].label)) | ||
).toBe(true); | ||
|
||
const regionColumn = getByTestId('region'); // get the region header column | ||
|
||
await userEvent.click(regionColumn); // sort ascending for region | ||
rows = Array.from(tableBody.querySelectorAll('tr')); // refetch | ||
expect( | ||
rows | ||
.map(({ textContent }) => textContent) | ||
.every((text, index) => | ||
text?.includes(linodes[linodes.length - 1 - index].region) | ||
) | ||
).toBe(true); | ||
|
||
await userEvent.click(regionColumn); // reverse the sorting | ||
rows = Array.from(tableBody.querySelectorAll('tr')); | ||
expect( | ||
rows | ||
.map(({ textContent }) => textContent) | ||
.every((text, index) => text?.includes(linodes[index].region)) // validation | ||
).toBe(true); | ||
}); |
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.
it('should handle sorting correctly', async () => { | |
const { getByTestId } = renderWithTheme( | |
<AlertResources alertResourceIds={['1', '2', '3']} serviceType="linode" /> | |
); | |
const resourceColumn = getByTestId('resource'); // get the resource header column | |
await userEvent.click(resourceColumn); | |
const tableBody = getByTestId('alert_resources_content'); | |
let rows = Array.from(tableBody.querySelectorAll('tr')); | |
expect( | |
rows | |
.map(({ textContent }) => textContent) | |
.every((text, index) => { | |
return text?.includes(linodes[linodes.length - 1 - index].label); | |
}) | |
).toBe(true); | |
await userEvent.click(resourceColumn); // again reverse the sorting | |
rows = Array.from(tableBody.querySelectorAll('tr')); | |
expect( | |
rows | |
.map(({ textContent }) => textContent) | |
.every((text, index) => text?.includes(linodes[index].label)) | |
).toBe(true); | |
const regionColumn = getByTestId('region'); // get the region header column | |
await userEvent.click(regionColumn); // sort ascending for region | |
rows = Array.from(tableBody.querySelectorAll('tr')); // refetch | |
expect( | |
rows | |
.map(({ textContent }) => textContent) | |
.every((text, index) => | |
text?.includes(linodes[linodes.length - 1 - index].region) | |
) | |
).toBe(true); | |
await userEvent.click(regionColumn); // reverse the sorting | |
rows = Array.from(tableBody.querySelectorAll('tr')); | |
expect( | |
rows | |
.map(({ textContent }) => textContent) | |
.every((text, index) => text?.includes(linodes[index].region)) // validation | |
).toBe(true); | |
}); | |
it('should handle sorting correctly', () => { | |
const { getByTestId } = renderWithTheme( | |
<AlertResources alertResourceIds={['1', '2', '3']} serviceType="linode" /> | |
); | |
const resourceColumn = getByTestId('resource'); // Get the resource header column | |
const regionColumn = getByTestId('region'); // Get the region header column | |
const tableBody = getByTestId('alert_resources_content'); | |
const getRows = () => Array.from(tableBody.querySelectorAll('tr')); | |
const checkSorting = async ( | |
column: HTMLElement, | |
dataKey: 'label' | 'region' | |
) => { | |
// Test descending order | |
await userEvent.click(column); | |
let rows = getRows(); | |
expect( | |
rows.every((row, index) => | |
row.textContent?.includes( | |
linodes[linodes.length - 1 - index][dataKey] | |
) | |
) | |
).toBe(true); | |
// Test ascending order | |
await userEvent.click(column); | |
rows = getRows(); | |
expect( | |
rows.every((row, index) => | |
row.textContent?.includes(linodes[index][dataKey]) | |
) | |
).toBe(true); | |
}; | |
// Test sorting by 'resource' column | |
checkSorting(resourceColumn, 'label'); | |
// Test sorting by 'region' column | |
checkSorting(regionColumn, 'region'); | |
}); |
nit: Just to make it a bit cleaner and more readable
placeholder="Search for a Region or Resource" | ||
value={searchText || ''} | ||
/> | ||
{(isDataLoadingError || alertResourceIds.length) && ( // if there is data loading error display error message with empty table setup |
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.
{(isDataLoadingError || alertResourceIds.length) && ( // if there is data loading error display error message with empty table setup | |
{/* If there is a data loading error, display an error message with an empty table setup. */} | |
{(isDataLoadingError || alertResourceIds.length) && ( |
nit
expect(queryByText(linodes[0].label)).not.toBeInTheDocument(); | ||
expect(getByText(linodes[1].label)).toBeInTheDocument(); | ||
}); | ||
// clear the search input |
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.
very small nitpick, but also a personal preference: Since I’m seeing some comments start with a capital letter and others with lowercase, could we make sure to keep the first letter of every comment capitalized throughout for consistency?
Description 📝
Add filtering, pagination and sorting for Alert Resource section in CloudPulse show details page
Changes 🔄
Target release date 🗓️
25-01-2025
Preview 📷
How to test 🧪
Author Checklists
As an Author, to speed up the review process, I considered 🤔
👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support
As an Author, before moving this PR from Draft to Open, I confirmed ✅