You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Fix Dashboard popup positioning and persistence - #20362
Dashboard popups could be misaligned with their trigger, overflow below the viewport, or disappear while live metric dimensions were updating. This change aligns affected popups to the right edge of their trigger, allows them to flip above when needed, keeps the Resources view-options button visible, and keeps an open chart-filter popup mounted while new dimension values arrive.
Chart filter popup state now belongs to the stable filter component rather than replaceable metric snapshots. Stable tab, row, trigger, and popover identities preserve the browser top-layer popup while its values update.
User-facing usage
On the Resources and Metrics pages, users can open filter, view-options, profile, and URL-overflow popups and have them remain aligned with their trigger. An open metric dimension filter remains open as live values such as process.id are added.
Screenshots / Recordings
This PR includes UI changes. Please add screenshots or screen recordings so reviewers can evaluate the visual changes without running locally.
For before/after comparisons, place them side-by-side or label them clearly.
For interactive changes (animations, transitions, new flows), prefer a short screen recording (GIF or video).
If you cannot capture visuals now, note what scenario to test and mark this section as TODO.
The Resources filter popup aligns its right edge with the filter button:
The always-visible view options button uses the same right-edge alignment:
Validation
Aspire.Dashboard.Components.Tests: 568 passed
Aspire.Dashboard.Tests: 1892 passed
Live Stress dashboard: the open process.id popup remained the same DOM host and stayed opened and :popover-open while values increased from 1173 to 1196
Fixes # (issue)
Checklist
Is this feature complete?
Yes. Ready to ship.
No. Follow-up changes expected.
Are you including unit tests for the changes and scenario tests if relevant?
Yes
No
Did you add public API?
Yes
If yes, did you have an API Review for it?
Yes
No
Did you add <remarks /> and <code /> elements on your triple slash comments?
Yes
No
No
Does the change make any security assumptions or guarantees?
Yes
If yes, have you done a threat model and had a security review?
The reason will be displayed to describe this comment to others. Learn more.
Validated the popup positioning and persistence behavior in the live dashboard. The tested URL overflow popup aligned correctly with its trigger, and I did not find a blocking functional issue.
Non-blocking follow-up: metric filter anchor IDs are derived from SanitizeHtmlId, which replaces invalid characters with _. Distinct dimension names such as foo.bar and foo/bar can therefore produce the same DOM ID and potentially target the wrong popover. This should be addressed with collision-safe ID generation and focused regression coverage.
This key omits ResourceKey, even though ChartContainer is reused when the selected resource changes and its request identity includes the resource. If two resources expose the same meter/instrument and filter name, _openFilterNames is retained and the new resource's popup opens automatically. Include ResourceKey so popup state is stable only within the same metric selection.
This issue also appears on line 52 of the same file.
Add browser regression for popover state after DOM updates
The regression being fixed is browser-only: an element can retain opened="true" in bUnit while no longer matching :popover-open after Blazor updates its DOM. These assertions therefore cannot catch the reported popup disappearance. Add a Playwright regression that opens a metric filter, publishes a new dimension value, and verifies the same popover host still matches :popover-open after the update.
Cache a stable hash of each original filter name so sanitized name collisions do not share an anchor. Cover colliding names in component tests.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace obsolete SetParametersAndRender calls with the Render pattern used by dashboard component tests.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Triggered, I just noticed that the dropdown content for the filters has square corners while the other dropdown has the preferred border-radius. We should fix that.
Replace deprecated WebHostBuilder/TestServer constructors with a shared generic-host test server setup for terminal stream coverage.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use bUnit Render in the menu test added on main so the PR merge builds on Linux and Windows.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Triggered signals (2): dashboard_user_facing_page_changed (Resources.razor / Resources.razor.cs edited for popup positioning/view-options visibility), pr_body_has_user_facing_section (PR body User-facing usage: "On the Resources and Metrics pages, users can open filter, view-options, profile, and URL-overflow popups and have them remain aligned with their trigger. An open metric dimension filter remains open as live values such as process.id are added."). Updated src/frontend/src/content/docs/dashboard/explore.mdx to note that the metrics dimension-filter popover now stays open while live tag values continue to update, matching the PRs core user-facing fix. Positioning/alignment fixes for the filter, view-options, profile, and URL-overflow popups are internal visual/CSS corrections with no new user-facing concept requiring separate prose.
Backports #20360, #20341, and #20362 to release/13.6.
## Customer Impact
Dashboard users can encounter popups that are misaligned, overflow the
viewport, or disappear while metric dimensions update. Resource graph
context menus may not reopen immediately after dismissal, and terminal
auto-fit can move focus away from the active control.
## Testing
Validated on the release/13.6 backport branch: 570
Aspire.Dashboard.Components.Tests and 1,892 Aspire.Dashboard.Tests
passed, excluding quarantined and outerloop tests. The source changes
also include targeted Playwright coverage for resources, terminal,
navigation, authentication, accessibility, and popup behavior. `git diff
--check` passes.
## Risk
Medium. The production changes are localized to Dashboard popup, focus,
and component-state behavior with no public API changes, but this
combines three related changes and a broad component-test migration.
## Regression?
Yes — fixes Dashboard behavior and test regressions introduced by the
Fluent UI v5 migration.
Backports #20360, #20341, and #20362 to release/13.6.
## Customer Impact
Dashboard users can encounter popups that are misaligned, overflow the
viewport, or disappear while metric dimensions update. Resource graph
context menus may not reopen immediately after dismissal, and terminal
auto-fit can move focus away from the active control.
## Testing
Validated on the release/13.6 backport branch: 570
Aspire.Dashboard.Components.Tests and 1,892 Aspire.Dashboard.Tests
passed, excluding quarantined and outerloop tests. The source changes
also include targeted Playwright coverage for resources, terminal,
navigation, authentication, accessibility, and popup behavior. `git diff
--check` passes.
## Risk
Medium. The production changes are localized to Dashboard popup, focus,
and component-state behavior with no public API changes, but this
combines three related changes and a broad component-test migration.
## Regression?
Yes — fixes Dashboard behavior and test regressions introduced by the
Fluent UI v5 migration.
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
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.
Mitch Denny (mitchdenny)
left a comment
Description
Dashboard popups could be misaligned with their trigger, overflow below the viewport, or disappear while live metric dimensions were updating. This change aligns affected popups to the right edge of their trigger, allows them to flip above when needed, keeps the Resources view-options button visible, and keeps an open chart-filter popup mounted while new dimension values arrive.
Chart filter popup state now belongs to the stable filter component rather than replaceable metric snapshots. Stable tab, row, trigger, and popover identities preserve the browser top-layer popup while its values update.
User-facing usage
On the Resources and Metrics pages, users can open filter, view-options, profile, and URL-overflow popups and have them remain aligned with their trigger. An open metric dimension filter remains open as live values such as
process.idare added.Screenshots / Recordings
The Resources filter popup aligns its right edge with the filter button:
The always-visible view options button uses the same right-edge alignment:
Validation
Aspire.Dashboard.Components.Tests: 568 passedAspire.Dashboard.Tests: 1892 passedprocess.idpopup remained the same DOM host and stayedopenedand:popover-openwhile values increased from 1173 to 1196Fixes # (issue)
Checklist
<remarks />and<code />elements on your triple slash comments?