Add alert filtering: search by name, filter by tag and creator#2204
Open
Add alert filtering: search by name, filter by tag and creator#2204
Conversation
- Add search input (filters by alert display name and tags) - Add tag filter dropdown (populated from dashboard/saved search tags) - Add creator filter dropdown (populated from alert creators) - Tag and creator filters persist to URL via nuqs for bookmarking/sharing - Display tags on each alert card - Show empty state when filters match no alerts Co-authored-by: Mike Shi <mike@hyperdx.io>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Contributor
E2E Test Results✅ All tests passed • 166 passed • 3 skipped • 1142s
Tests ran across 4 shards in parallel. |
Use useQueryState('search') instead of local useState so the search
text is also persisted in the URL, making filtered views fully
bookmarkable and shareable.
Co-authored-by: Mike Shi <mike@hyperdx.io>
Tests cover: - Filter controls visibility (search, tag, creator dropdowns) - Search by name filtering and URL persistence - Tag filter with clear/restore behavior - Tag filter across alert sources (dashboard + saved search) - Empty state when no alerts match filters - Loading filtered view from URL params directly Co-authored-by: Mike Shi <mike@hyperdx.io>
Use path.join(__dirname, ...) for the auth state file in beforeAll so the test works regardless of the CWD. Co-authored-by: Mike Shi <mike@hyperdx.io>
Use three saved search alerts with different tags instead of dashboard tile alerts which require complex tile config formatting. This makes the test seeding simpler and more reliable. Co-authored-by: Mike Shi <mike@hyperdx.io>
…ook URL - Type the tag name in the searchable Select to narrow options before clicking, avoiding issues with many tags from parallel test runs - Use Date.now() suffix in webhook URL to avoid collisions on retries Co-authored-by: Mike Shi <mike@hyperdx.io>
Co-authored-by: Mike Shi <mike@hyperdx.io>
Co-authored-by: Mike Shi <mike@hyperdx.io>
…double-seeding
- selectTag/selectCreator: In Mantine v9, data-testid on Select is applied to
the <input> element directly (via ...others spread to InputBase/Input). Use
.fill() directly on the locator instead of .getByRole('combobox'/.fill().
- clearTagFilter/clearCreatorFilter: Mantine v9's ComboboxClearButton sets
aria-hidden='true' on the clear button, making getByRole('button') unable to
find it. Use locator('..').locator('button') instead (CSS selector bypasses
aria-hidden filtering).
- Alert Filtering describe block: Add test.describe.configure({ mode: 'serial' })
so that beforeAll seeding runs exactly once. Without this, Playwright runs
tests from the block across multiple workers, each calling beforeAll
independently and creating duplicate alert cards for the same timestamp,
causing strict mode violations.
Co-authored-by: Mike Shi <mike@hyperdx.io>
github-actions
Bot
added
the
review/tier-2
Contributor
🔵 Tier 2 — Low RiskSmall, isolated change with no API route or data model modifications. Why this tier:
Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns. Stats
|
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 filtering capabilities to the Alerts page so teams with many alerts can quickly find relevant ones. This addresses the customer request in HDX-4151 for filtering alerts by naming convention, tags, or creator.
Three filter controls are added at the top of the alerts page:
nuqs(?search=...).?tag=...).?creator=...).All three filters are persisted to the URL so filtered views can be bookmarked and shared.
Tags are now also displayed as badges on each alert card for visibility.
The implementation follows the existing pattern from
DashboardsListPagewhich uses the sameuseQueryState+Selectapproach for tag filtering.E2E Tests
Added a comprehensive Playwright E2E test suite (
Alert Filteringdescribe block inalerts.spec.ts) with 6 tests:Also added filter-related methods to the
AlertsPagepage object.Screenshots or video
Alerts page with all filters visible:
Alerts page with filter controls
Search filter in action (filtering by "Production"):
Search filter results
Tag filter (filtering by "staging"):
Tag filter results
Creator filter (filtering by "Alice Smith"):
Creator filter results
Full demo video:
alert_filtering_demo.mp4
How to test locally or on Vercel
yarn dev/alerts— filter controls appear at the top when alerts exist?search=...,?tag=...and?creator=...query parameters./scripts/test-e2e.sh --quiet alerts --grep "Alert Filtering"References
To show artifacts inline, enable in settings.
Linear Issue: HDX-4151