feat: add sidebar filters to logs page#2731
Merged
Conversation
Contributor
Author
Contributor
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 4 minutes and 43 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis pull request introduces a sidebar filtering UI for the logs page. A new Changes
Sequence DiagramsequenceDiagram
actor User
participant LogsSidebar
participant LogsPage
participant LogsDataTable
participant API
User->>LogsSidebar: Toggle filter section / Select filter option
LogsSidebar->>LogsSidebar: Compute filter changes
LogsSidebar->>LogsPage: onFiltersChange(updatedFilters)
LogsPage->>LogsPage: setFilters(updatedFilters)
LogsPage->>LogsDataTable: Pass updated filters
LogsDataTable->>API: Fetch logs with filters
API-->>LogsDataTable: Return filtered results
LogsDataTable->>User: Render updated table
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
8 times, most recently
from
bfa3a9b to
41f44b7
Compare
This was referenced Apr 15, 2026
refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker
#2744
Merged
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
2 times, most recently
from
ca20027 to
5efc13f
Compare
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
from
5efc13f to
0c0c1d1
Compare
impoiler
changed the title
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
from
0c0c1d1 to
8dd7ef5
Compare
Contributor
Confidence Score: 3/5Not safe to merge until the date-range picker regression and stale metadata customInputs issues from prior threads are resolved. Two confirmed P1 defects from previous review threads remain in the codebase: (1) users in sidebar mode have no UI path to set a custom time range since DateTimePicker is hidden and the sidebar doesn't provide one, and (2) stale ui/app/workspace/logs/views/logsSidebar.tsx (date-range gap, stale customInputs) and ui/app/workspace/logs/views/filters.tsx (DateTimePicker gating). Important Files Changed
Reviews (5): Last reviewed commit: "improvement: logs page filter UI revamp" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui/app/workspace/logs/views/logsSidebar.tsx`:
- Around line 188-193: The current useAutoFocusOnOpen hook focuses whenever
isOpen is true (including initial mount), causing default-open sections like
ModelsFilter to steal focus; change useAutoFocusOnOpen to only call
ref.current?.focus() when isOpen transitioned from false to true (i.e., check
previous isOpen state using a useRef prevIsOpen or a didMount flag) so initial
true does not trigger focus, and reference/use this updated hook in the
ModelsFilter search input.
- Around line 44-76: The new sidebar misses stable data-testid attributes on
interactive controls; update the Reset Button (the Button with RotateCcw), the
collapsible triggers and their toggle buttons inside components like
StatusFilter, ModelsFilter, SelectedKeysFilter, VirtualKeysFilter,
ProvidersFilter, TypeFilter, AliasesFilter, RoutingEnginesFilter,
RoutingRulesFilter, SessionFilter, CostFilter and MetadataFilters, and any
checkboxes/inputs within those components to include data-testid following the
convention data-testid="<entity>-<element>-<qualifier>" (e.g.
"filters-reset-button", "status-filter-toggle", "models-filter-checkbox-<name>",
"selected-keys-input"); ensure each interactive element has a unique, stable
test id and apply the same pattern to the other referenced new controls in this
file so E2E selectors can rely on them.
- Around line 578-605: The MetadataFilters component currently returns null when
the query is skipped (via useGetAvailableFilterDataQuery skip) and entries are
empty, causing the entire Metadata section to disappear; update MetadataFilters
so it always renders the top-level section/header (respecting opened/defaultOpen
and the collapse UI) even when the query is skipped and entries are empty, and
only skip rendering the inputs/list; specifically, keep the existing
useGetAvailableFilterDataQuery(skip: !opened && !hasActive) logic but
remove/replace the early return (the check using
isUninitialized/isLoading/entries.length && !hasActive) with rendering a
collapsed/placeholder section UI that can toggle opened, then render the entries
list only when entries.length > 0 and/or when the query has returned data;
reference the MetadataFilters component, the opened/hasActive flags, entries,
and useGetAvailableFilterDataQuery.
In `@ui/app/workspace/logs/views/logsTable.tsx`:
- Around line 171-194: The current conditional passes hidePopoverFilters to
LogFiltersComponent when sidebarFilters is true, which causes
DateTimePickerWithRange and FilterPopover to be hidden (via
DateTimePickerWithRange / FilterPopover in filters.tsx) while the new
logsSidebar.tsx doesn't provide a replacement; remove or change that behavior so
the date-range picker remains available until the sidebar implements one: in the
sidebarFilters branch of the JSX (where LogFiltersComponent is rendered with
hidePopoverFilters) stop passing hidePopoverFilters (or explicitly pass a prop
to show the date picker, e.g., showDateRange=true), so DateTimePickerWithRange
and FilterPopover continue to render when needed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 48b4b27b-0d62-47c2-94ca-c9a8ffb8b20e
📒 Files selected for processing (8)
ui/app/workspace/logs/page.tsxui/app/workspace/logs/sheets/logDetailView.tsxui/app/workspace/logs/views/emptyState.tsxui/app/workspace/logs/views/filters.tsxui/app/workspace/logs/views/logsSidebar.tsxui/app/workspace/logs/views/logsTable.tsxui/app/workspace/logs/views/logsVolumeChart.tsxui/components/table/columnConfigDropdown.tsx
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
2 times, most recently
from
0c443fd to
ccad6cd
Compare
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
from
ccad6cd to
c7af46d
Compare
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
from
c7af46d to
faf3906
Compare
Contributor
Merge activity
|
18 tasks
impoiler
force-pushed
the
04-15-improvement_logs_page_filter_ui_revamp
branch
from
faf3906 to
dd37c8b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a collapsible sidebar to the logs page containing all filter options, replacing the previous popover-based filter interface. This provides better organization and easier access to filtering capabilities.
Changes
LogsSidebarcomponent with collapsible filter sections for status, models, providers, types, aliases, routing engines, routing rules, sessions, cost, and metadataLogFilterscomponent to conditionally hide popover filters when sidebar is activemissing_cost_onlyfilter initialization to default tofalseinstead of preserving previous stateType of change
Affected areas
How to test
Navigate to the logs page and verify:
Screenshots/Recordings
Add screenshots showing the new sidebar layout and filter interface
Breaking changes
Related issues
Link any related issues or feature requests
Security considerations
No security implications - this is a UI enhancement that doesn't affect authentication, data handling, or API endpoints.
Checklist
docs/contributing/README.mdand followed the guidelines