Advanced Search improvements. Closes #2764#3354
Advanced Search improvements. Closes #2764#3354AshwinGajbhiye wants to merge 2 commits intointelowlproject:developfrom
Conversation
- Fixed TypeScript errors in search components - Improved error handling and pagination (errors no longer clear data) - Enhanced name field with searchable plugin dropdown - Added datetime format helpers and tooltips - Enabled table filters on Analyzable, Name, Type, and Status columns - Added JSDoc types for better type safety - Better UX with dismissible error alerts
There was a problem hiding this comment.
Pull request overview
This PR improves the Advanced Search frontend for plugin reports by moving to page-by-page fetching (instead of downloading all pages up-front), enhancing the search form UX, and adding table filtering while improving error resilience.
Changes:
- Refactored the search API and UI flow to support server-side pagination and preserve existing results on errors.
- Upgraded the search form with a searchable plugin-name dropdown, URL param syncing, and datetime format tooltips.
- Enabled column filters and added an “Analyzable” column in the results table.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/components/search/ReportsSearch.jsx | Adds error alert state, ReactSelect plugin dropdown, URL param syncing, and manual/server-side pagination wiring for the DataTable. |
| frontend/src/components/search/searchTableColumns.jsx | Adds Analyzable column and enables filters (text + select) for key columns. |
| frontend/src/components/search/searchApi.jsx | Changes the query helper to fetch a single page and return {results, count, totalPages} for pagination. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } catch (error) { | ||
| addToast("Query failed!", prettifyErrors(error), "danger", true); | ||
| return Promise.reject(error); |
There was a problem hiding this comment.
pluginReportQueries always emits a toast on failure, but ReportsSearch also surfaces the same failure via the local error state + <Alert />. This will result in duplicate user-facing error notifications for the same failure. Consider letting the caller decide how to present errors (e.g., remove the toast here, or add an optional flag/callback to suppress the toast when the caller shows an inline alert).
| columns={searchTableColumns} | ||
| autoResetPage | ||
| manualPagination | ||
| pageCount={Math.ceil(totalCount / tableInitialState.pageSize)} |
There was a problem hiding this comment.
currentPage is updated in handlePageChange (and reverted on error), but it is never passed into DataTable as a controlled page index. As a result, the “revert to previous page on error” logic may not actually move the table back to the prior page, and autoResetPage={false} can also leave the table on a stale page index after a new search. Consider wiring pagination state to the table (controlled pageIndex/onPageChange) or re-enabling page reset on query changes so the UI page and fetched data stay consistent.
| pageCount={Math.ceil(totalCount / tableInitialState.pageSize)} | |
| pageCount={Math.ceil(totalCount / tableInitialState.pageSize)} | |
| pageIndex={currentPage} |
| Object.entries(formik.values).forEach(([key, value]) => { | ||
| // Skip empty values and datetime fields that are still at defaults | ||
| if (value && value !== "") { |
There was a problem hiding this comment.
The inline comment says this effect “Skip[s] empty values and datetime fields that are still at defaults”, but the implementation only skips empty strings and will still write default datetime values into the URL. Either update the comment to match current behavior or extend the logic to actually omit default datetime values (to keep URLs shorter and reduce needless history churn).
| Object.entries(formik.values).forEach(([key, value]) => { | |
| // Skip empty values and datetime fields that are still at defaults | |
| if (value && value !== "") { | |
| const initialValues = formik.initialValues || {}; | |
| Object.entries(formik.values).forEach(([key, value]) => { | |
| // Skip empty values and datetime fields that are still at defaults | |
| const defaultValue = initialValues[key]; | |
| let isDefaultDateTime = false; | |
| if ( | |
| typeof value === "string" && | |
| value !== "" && | |
| typeof defaultValue === "string" && | |
| defaultValue !== "" | |
| ) { | |
| const parsedCurrent = Date.parse(value); | |
| const parsedDefault = Date.parse(defaultValue); | |
| if (!Number.isNaN(parsedCurrent) && !Number.isNaN(parsedDefault) && parsedCurrent === parsedDefault) { | |
| isDefaultDateTime = true; | |
| } | |
| } | |
| if (value && value !== "" && !isDefaultDateTime) { |
| {[ | ||
| { value: true, label: "Reports with errors" }, | ||
| { value: false, label: "Reports without errors" }, | ||
| { value: "true", label: "Reports with errors" }, | ||
| { value: "false", label: "Reports without errors" }, | ||
| ] | ||
| .sort() | ||
| .map((option) => ( |
There was a problem hiding this comment.
.sort() is being called on an array of objects without a comparator. In JavaScript this sorts by stringifying the objects (effectively leaving the order unchanged and making the intent unclear). If ordering matters here, sort explicitly by option.label (or remove the sort since there are only two fixed options).
|
the tests are still failing, fix them please then ask for a review |
Description
This PR implements frontend improvements for the Advanced Search feature as requested in #2764. The changes improve user experience, error handling, and add new UI components to make searching plugin reports more efficient.
Key improvements:
Type of change
Checklist
developRuff) gave 0 errorsChanges Made
1. Fixed TypeScript Errors
ReportsSearch.jsxstartTime/endTime→fromStartTime/fromEndTime)@ts-ignoresuppressions where needed2. Improved Error Handling & Pagination
errorstate management with user-friendly messages3. Enhanced Name Field
4. Improved DateTime Fields
titleattributes for accessibility5. Added Table Filters
enableFilters: truein table configDefaultColumnFilterto Analyzable and Name columnsSelectOptionsFilterto Type and Status columns with appropriate optionsFiles Changed
frontend/src/components/search/ReportsSearch.jsx- Main search component improvementsfrontend/src/components/search/searchTableColumns.jsx- Added filters to table columnsfrontend/src/components/search/searchApi.jsx- Added JSDoc typesScreenshots
Testing Notes
Note: The Advanced Search feature requires Elasticsearch to be configured on the backend. The frontend improvements are complete and will work once Elasticsearch is enabled. Without Elasticsearch, the API returns 501 Not Implemented, which is expected and handled gracefully by the new error handling.
All frontend improvements can be visually verified: