Repository navigation
Show endpoint addresses alongside friendly names in resource overview - #21695
Maddy Montaquila (maddymontaquila) merged 6 commits into
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 21695Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21695" |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟡 Changes recommended
Long, unbroken endpoint friendly names lack clipping or word breaking, causing horizontal overflow in the overview list at narrow widths.
1 open issue
What changed in this PR
This PR updates the modern resource overview to show masked endpoint addresses alongside friendly names, making destinations visible without hovering.
Changes:
- Displays primary and grouped secondary addresses while preserving link destinations and query-value masking.
- Keeps addresses on one line with ellipsis and makes non-clickable addresses keyboard-focusable for tooltips.
- Adds browser coverage at mobile, tablet, and desktop viewport sizes.
| File | Description |
|---|---|
| tests/Aspire.Dashboard.Playwright.Tests/Integration/Playwright/ResourceOverviewEndpointTests.cs | Adds coverage for masked addresses, link attributes, tooltips, keyboard focus, and overflow. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor.css | Adds stacked endpoint layout and single-line address truncation. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor | Renders friendly names with masked addresses and focusable secondary addresses. |
Review effort: Balanced
Allow unbroken friendly names to wrap while keeping endpoint addresses on one line. Cover inner-list containment at mobile, tablet, and desktop sizes. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
Sébastien Ros (sebastienros)
left a comment
There was a problem hiding this comment.
Two things to fix before merge:
- The keyboard tooltip is dismissed when tabbing to an address scrolls the Endpoints list.
- Credentials in the URL's userinfo, and tokens in its fragment, are now shown in the card for friendly-named URLs.
The test comment at line 79 goes with the first fix. The other two test comments are smaller and can be handled in this PR or as a quick follow-up.
I did not build this PR or run the dashboard or its tests. I checked the tooltip behavior by running this PR's app-tooltips.js in headless Chromium, on a stand-in scrolling list with a stubbed fluent-tooltip. The masking finding comes from reading the code.
Keep keyboard-focused tooltips available after focus-driven list scrolling without reopening Escape-dismissed tooltips. Remove URL userinfo and fragments from endpoint display text while preserving original link destinations. Add regular component masking coverage and focus-scroll browser regressions, and remove screenshot capture leftovers. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
…ndpoint-addresses
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
PR #21695 local validationProvenance
Commands and resultsAll commands ran from the feature worktree using its restored .NET 11 RC SDK.
Functional coverage
Live preview
Limitations
LogsAlongside this report: ResultEndpoint-focused validation passed: 30 cases total. Live TestShop retained for UX inspection; full application validation remains limited by the resources noted above. |
Tests selector13 / 101 PR test projects · 2 PR jobs, from 7 changed files. Selected PR test projects (13 / 101)
Selected PR jobs (2)
How these were chosen — grouped by what changed
🔧 📦 affected project 🔧 🧪 🧪 Job reasons
Selection computed for commit |
|
Pull request created: #2064
|
|
📝 Documentation has been drafted in microsoft/aspire.dev#2064 targeting Documented the resource Overview Endpoints card showing masked addresses next to friendly names in Note This draft PR needs human review before merging. |






Description
Friendly endpoint names currently hide the destination address in the resource overview. Show the masked destination alongside the friendly name so developers can identify the host and port without hovering or navigating.
Each explicit address stays on one line and uses an ellipsis when space is limited. The existing dashboard tooltip exposes the complete masked display URL on hover and keyboard focus, including when tabbing scrolls the endpoint list. Escape dismissal remains effective after scrolling. Grouped secondary addresses remain visible, and non-clickable addresses are keyboard focusable so their tooltips are accessible too. Long unbroken friendly names wrap within the endpoint list without introducing horizontal scrolling; addresses do not wrap.
Endpoint display and tooltip text omit URL userinfo and fragments and mask query values. Original link destinations, new-tab behavior, and unsupported-scheme handling are preserved. Redaction is for display only: the original, untruncated URL remains in the link's href.
The endpoint presentation change is limited to the modern resource overview; the shared tooltip provider also receives the focus-scrolling correction. This does not change Internal endpoint terminology, hosting behavior, or URL helper contracts. No new dependencies or supported public APIs.
Related issue: None.
User-facing usage
Open a resource's Overview and read its Endpoints card. A friendly name such as Catalog API appears with its masked address. Hover an ellipsized address or focus it with the keyboard to read the full masked display value. The original, untruncated destination is still used when opening a link.
Screenshots / Recordings
This PR includes UI changes. These synthetic-data captures show ordinary, grouped secondary, and long endpoint addresses. Each address is one line in the card; the full masked URL is available through the existing tooltip.
Mobile: 390x844
Tablet: 768x1024
Desktop: 1440x900
Full masked URL on hover: mobile 390x844
Full masked URL on keyboard focus: tablet 768x1024
The captures show the compact-address implementation on base
9f0961d0c7173732f45ce88d571c8b53f8059934, before refreshing this branch onto00d1e6694a7fd94f0a7ee2fc48aa7ad2faef14c2. The relevant dashboard, browser-test, shared-test, and build inputs are unchanged between those bases. They are implementation-state captures, not a main-branch before/after comparison. They predate the long-friendly-name containment correction in6bac32fe281939a7a00640cd43eaf7cde309e404and the focus-scrolling/credential-redaction corrections inec6dde181aa008a8d37732e56d2e1f5e304dc983, and do not demonstrate those edge cases. Long-friendly-name containment was separately reproduced and visually inspected at all three sizes. The later corrections are covered by the rendering and browser regressions below; the existing captures are not presented as fresh evidence for them.Validation
Current review corrections in
ec6dde181aa008a8d37732e56d2e1f5e304dc983:dotnet test --project tests\Aspire.Dashboard.Tests\Aspire.Dashboard.Tests.csproj --no-launch-profile -- --filter-class "*.DashboardUIHelpersTests" --filter-not-trait "quarantined=true" --filter-not-trait "outerloop=true"— Passed, 22/22. Covers userinfo/fragment removal, query-value masking, escaped paths, IPv6 authority, and preservation of non-credential path characters.dotnet test --project tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj --no-launch-profile -- --filter-class "*.ResourceOverviewEndpointTests" --filter-class "*.ResourceOverviewPersistenceTests" --filter-class "*.ResourceOverviewTerminalTests" --filter-not-trait "quarantined=true" --filter-not-trait "outerloop=true"— Passed, 14/14. The five new endpoint cases assert exact display/tooltip text, unchanged href/target/rel, and primary/secondary/plain/unsupported-scheme semantics. Before the fix, four redaction cases failed and the query-only control passed.dotnet test --project tests\Aspire.Dashboard.Playwright.Tests\Aspire.Dashboard.Playwright.Tests.csproj --no-launch-profile -- --filter-method "*.Endpoints_ShowMaskedAddressesAndFullTooltipsOnHoverAndKeyboardFocus" --filter-method "*.AppBar_TooltipDoesNotBlockAdjacentHeaderActions" --filter-not-trait "quarantined=true"— Passed, 4/4. Explicitly opts into only these browser outerloop scenarios. Real Tab navigation scrolls the endpoint list for links, secondary addresses, and unsupported-scheme spans at 390x844, 768x1024, and 1440x900; the complete masked tooltip remains visible after scroll-event processing. Also checks Escape dismissal, hover behavior, one-line clipping, long-name containment, original link attributes, and the adjacent header-action interaction. The focus-scroll endpoint regression failed at all three sizes before the correction. Screenshot capture leftovers were removed from the permanent test.git diff --check— Passed.Earlier validation: the targeted endpoint browser class passed 3/3 before the base refresh; the extended long-name containment regression failed 3/3 before its CSS fix and passed 3/3 afterward. The persistence/terminal component classes passed 9/9 after the base refresh and are included in the current 14-test run above. Temporary test hosts and browsers were disposed. Touch-only interaction and screen-reader speech were not manually verified.
CI results are head-specific. Checks on
6bac32fe281939a7a00640cd43eaf7cde309e404reported 143 successful and 17 skipped checks before this update; these local results do not replace CI results for the new head. The older0c23450e0a8d603f7f5bbefcd9ce192e12733157run concluded cancelled with separately investigated extension E2E failures.Checklist
<remarks />and<code />elements on your triple slash comments?