Skip to content

Show endpoint addresses alongside friendly names in resource overview - #21695

Merged
Maddy Montaquila (maddymontaquila) merged 6 commits into
mainfrom
ievangelist-visible-endpoint-addresses
Nov 5, 2026
Merged

Maddy Montaquila (maddymontaquila) merged 6 commits into
mainfrom
ievangelist-visible-endpoint-addresses

Conversation

@IEvangelist

@IEvangelist David Pine (IEvangelist) commented Nov 2, 2026 •

Copy link
Copy Markdown
Member

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

Mobile 390x844 compact endpoint addresses

Tablet: 768x1024

Tablet 768x1024 compact endpoint addresses

Desktop: 1440x900

Desktop 1440x900 compact endpoint addresses

Full masked URL on hover: mobile 390x844

Mobile 390x844 full masked URL on hover

Full masked URL on keyboard focus: tablet 768x1024

Tablet 768x1024 full masked URL on keyboard focus

The captures show the compact-address implementation on base 9f0961d0c7173732f45ce88d571c8b53f8059934, before refreshing this branch onto 00d1e6694a7fd94f0a7ee2fc48aa7ad2faef14c2. 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 in 6bac32fe281939a7a00640cd43eaf7cde309e404 and the focus-scrolling/credential-redaction corrections in ec6dde181aa008a8d37732e56d2e1f5e304dc983, 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 6bac32fe281939a7a00640cd43eaf7cde309e404 reported 143 successful and 17 skipped checks before this update; these local results do not replace CI results for the new head. The older 0c23450e0a8d603f7f5bbefcd9ce192e12733157 run concluded cancelled with separately investigated extension E2E failures.

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?
        • Yes
        • No
    • No

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Nov 2, 2026

Copy link
Copy Markdown
Contributor

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 21695

Or

  • Run remotely in PowerShell:
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21695"

@aspire-repo-bot
aspire-repo-bot Bot requested a balanced review from Copilot November 2, 2026 19:19
@IEvangelist

Copy link
Copy Markdown
Member Author

Resource overview endpoint presentation: compact addresses at mobile, tablet, and desktop sizes, followed by full masked URL tooltips on mobile hover and tablet keyboard focus. Synthetic demonstration data; captures taken before the base refresh, with relevant rendering and test inputs unchanged.

Mobile 390x844 compact endpoint addresses

Tablet 768x1024 compact endpoint addresses

Desktop 1440x900 compact endpoint addresses

Mobile 390x844 full masked URL on hover

Tablet 768x1024 full masked URL on keyboard focus

@github-actions

This comment has been minimized.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

No active review issues block approval of the endpoint address display changes.

No open issues 🎉

1 resolved since last review

Review effort: Balanced

@github-actions

This comment has been minimized.

@github-actions

github-actions Bot commented Nov 2, 2026

Copy link
Copy Markdown
Contributor

Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt.

@github-actions

github-actions Bot commented Nov 2, 2026

Copy link
Copy Markdown
Contributor

Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things to fix before merge:

  1. The keyboard tooltip is dismissed when tabbing to an address scrolls the Endpoints list.
  2. 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>
@github-actions

This comment has been minimized.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

There are no active review issues for the endpoint address display changes.

No open issues 🎉

Review effort: Balanced

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist

Copy link
Copy Markdown
Member Author

PR #21695 local validation

Provenance

  • Branch: ievangelist-visible-endpoint-addresses.
  • Existing remote PR head: ec6dde181aa008a8d37732e56d2e1f5e304dc983.
  • Fetched main: 09ea1711b3170d733c36cd0366cc59868c194382.
  • Clean local main integration: bcdca53d260e7028920d742f6d4363fe69bbea18.
  • Validated local HEAD including the test-only correction: 6a0088d4fcfa201c0387a8f3a7e913477f788323.
  • Product source tested: local merged branch, not downloaded PR artifacts.
  • One subsequent test-only correction constrains the scroll container during keyboard-scroll assertions and restores its height afterward. No UX changes.
  • No preservation branch or Keep dashboard resource filters within the viewport #21692-only tests included. Nothing pushed.

Commands and results

All commands ran from the feature worktree using its restored .NET 11 RC SDK.

Command Result
.\restore.cmd Passed; dependency advisory warnings emitted
dotnet build src\Aspire.Cli\Aspire.Cli.csproj --no-restore /p:SkipNativeBuild=true -v:q Passed; ILCompiler dependency advisory warning emitted
dotnet test --project tests\Aspire.Dashboard.Tests\Aspire.Dashboard.Tests.csproj -c Release --no-launch-profile -- --filter-class '*.DashboardUIHelpersTests' --filter-not-trait 'quarantined=true' --filter-not-trait 'outerloop=true' 22 passed, none skipped
dotnet test --project tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj -c Release --no-launch-profile -- --filter-class '*.ResourceOverviewEndpointTests' --filter-not-trait 'quarantined=true' --filter-not-trait 'outerloop=true' 5 passed, none skipped
dotnet test --project tests\Aspire.Dashboard.Playwright.Tests\Aspire.Dashboard.Playwright.Tests.csproj -c Release --no-launch-profile -- --filter-class '*.ResourceOverviewEndpointTests' --filter-not-trait 'quarantined=true' Initially 2 passed / 1 failed; after test-only setup correction, 3 passed, none skipped

PLAYWRIGHT_INSTALLED=true was set for browser coverage. Only the explicitly approved endpoint outerloop cases were selected.

Functional coverage

  • Friendly names remain visible alongside actual addresses.
  • Link destinations and safe new-tab attributes are preserved.
  • Query values are masked, user info and fragments excluded from display.
  • Non-HTTP addresses and secondary addresses remain keyboard accessible.
  • Phone (390x844), tablet (768x1024), and desktop (1440x900) cover long names/URLs, overflow, hover/focus tooltips, scroll-triggered repositioning, and Escape dismissal.
  • The initial tablet failure was an assertion that focus must scroll even when the target was already visible. The test now deliberately constrains the list height during this scenario rather than relying on responsive layout to hide the target.

Live preview

  • AppHost: E:\GitHub\copilot-worktrees\aspire\ievangelist-visible-endpoint-addresses\playground\TestShop\TestShop.AppHost\TestShop.AppHost.csproj.
  • Started once with the repo-built CLI, start --isolated --non-interactive, and trusted-local anonymous dashboard environment settings.
  • Dashboard: https://testshop.dev.localhost:59423
  • Open catalog example: https://testshop.dev.localhost:59423/resources/catalogservice-qbwbuzgy
  • aspire wait aspire-dashboard and aspire wait frontend both passed.
  • Browser inspection confirmed Catalog API and Swagger UI have their own visible addresses and correct destinations. An endpoint-card screenshot was captured in the browser canvas.
  • AppHost PID: 60428; retained for inspection.
  • The other session's existing AppHost was not changed or stopped.

Limitations

  • TerminalHost resources failed to start because their native executable is not built; their shell resources remain waiting.
  • Two sample parameters are unresolved: storefront certificate and support contact email.
  • Existing dependency advisory warnings remain; this validation does not establish their baseline status or remediate them.
  • Report posting approved by the user. No review requested, Agent merge enabled, PR merge performed, or remote branch push performed.

Logs

Alongside this report: restore.log, cli-build.log, helper-tests.log, component-tests.log, browser-tests.log, and testshop-start.log.

Result

Endpoint-focused validation passed: 30 cases total. Live TestShop retained for UX inspection; full application validation remains limited by the resources noted above.

@aspire-repo-bot
aspire-repo-bot Bot requested a balanced review from Copilot November 4, 2026 17:48
@github-actions

github-actions Bot commented Nov 4, 2026

Copy link
Copy Markdown
Contributor

Tests selector

13 / 101 PR test projects · 2 PR jobs, from 7 changed files.

Selected PR test projects (13 / 101)

Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests, Aspire.Hosting.Azure.Tests, Aspire.Hosting.Blazor.Tests, Aspire.Hosting.Dotnet.Tests, Aspire.Hosting.DotnetTool.Tests, Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests, Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests, Aspire.Templates.Tests

Selected PR jobs (2)

extension-e2e, native-dashboard-validation


How these were chosen — grouped by what changed

⚠️ 10 of the 13 selected test projects come from a single change — src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor.

🔧 src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor (changed source)
→ 10 via the project graph: Aspire.Hosting.Azure.Kubernetes.Tests (3 hops), Aspire.Hosting.Azure.Tests (2 hops), Aspire.Hosting.Blazor.Tests (2 hops), Aspire.Hosting.Dotnet.Tests (2 hops), Aspire.Hosting.DotnetTool.Tests (2 hops), Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests (2 hops), Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests (2 hops)

📦 affected project Aspire.Dashboard
→ 1 test: Aspire.Templates.Tests

🔧 src/Aspire.Dashboard/wwwroot/js/app-tooltips.js (changed source)
→ 1 via the project graph: Aspire.Dashboard.Tests

🧪 tests/Aspire.Dashboard.Components.Tests/Pages/ResourceOverviewEndpointTests.cs (changed test)
→ 1 directly: Aspire.Dashboard.Components.Tests

🧪 tests/Aspire.Dashboard.Tests/DashboardUIHelpersTests.cs (changed test)
→ 1 directly: Aspire.Dashboard.Tests

Job reasons

Job Triggered by
extension-e2e • src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor, src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor.css, src/Aspire.Dashboard/Utils/DashboardUIHelpers.cs, src/Aspire.Dashboard/wwwroot/js/app-tooltips.js
• affected project Aspire.Dashboard
native-dashboard-validation affected project Aspire.Dashboard

Selection computed for commit 6a0088d.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

No active review issues remain for the masked endpoint display and tooltip updates.

No open issues 🎉

Review effort: Balanced

@maddymontaquila
Maddy Montaquila (maddymontaquila) merged commit a039cca into main Nov 5, 2026
161 checks passed
@microsoft-github-policy-service microsoft-github-policy-service Bot added this to the 17.0 milestone Nov 5, 2026
@aspire-repo-bot

Copy link
Copy Markdown
Contributor

Pull request created: #2064

Generated by PR Documentation Check · copilot · auto · 20 AIC · ⌖ 1.04 AIC · ⊞ 7.4K

@aspire-repo-bot

Copy link
Copy Markdown
Contributor

📝 Documentation has been drafted in microsoft/aspire.dev#2064 targeting release/17.0.

Documented the resource Overview Endpoints card showing masked addresses next to friendly names in dashboard/explore.mdx. Triggered signals: dashboard_user_facing_page_changed (ResourceOverview.razor), pr_body_has_user_facing_section ("User-facing usage" heading), pr_body_has_cli_flag_mention (likely a false positive from test command text).

Note

This draft PR needs human review before merging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants