Repository navigation
Improve responsive dashboard overviews and hide empty resource panels - #21691
Merged
David Pine (IEvangelist) merged 6 commits intoNov 4, 2026
Merged
Conversation
Reuse the resource header action slot and card packing, retain loading and filtered panels, and preserve mounted component state. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Keep dismiss controls at the upper edge, avoid dismiss-only action rows, and wrap real actions only when needed. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Keep resource status in a mobile footer, compact the picker and header, and size grid rows to their tallest content while preserving scroll and terminal viewports. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Keep Cards, Home and Graph available as icon choices across viewports and condense labels around unresolved parameter notices. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Populate the Properties card by default while preserving the explicit core-only filter and its controls in hide-empty mode. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
David Pine (IEvangelist)
requested review from
James Newton-King (JamesNK) and
Adam Ratzman (adamint)
as code owners
November 2, 2026 16:58
Contributor
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 21691Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21691" |
Member
Author
Responsive dashboard screenshot galleryCaptured from this PR's final combined build at Mobile - 390x844
Tablet - 768x1024
Desktop - 1440x900
Properties defaultHide empty remains selected while all five properties are shown by default. The explicit core-properties filter remains available.
|
This comment has been minimized.
This comment has been minimized.
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
CSS isolation prevents child panels from respecting the height and scrolling limits, while docked terminals remain in panel packing and leave unused row space.
2 open issues
1 file not reviewed
src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
What changed in this PR
This PR makes Aspire Dashboard resource overviews more compact and responsive while preserving mounted panel content and live updates.
Changes:
- Hide empty panels by default, add a Panels toggle, and initially show all resource properties.
- Replace fixed card heights with content-driven sizing and improve mobile headers, alerts, navigation, and status footers.
- Use consistent Cards / Home / Graph toggles across viewports, with localization entries and component tests.
| File | Description |
|---|---|
| tests/Aspire.Dashboard.Components.Tests/Shared/ResourceSetupHelpers.cs | Allow service customization during test setup. |
| tests/Aspire.Dashboard.Components.Tests/Pages/ResourceOverviewEmptyPanelsTests.cs | Cover panel visibility, updates, filters, and state preservation. |
| tests/Aspire.Dashboard.Components.Tests/Layout/ResourcesLayoutTests.cs | Verify footer status placement and updates. |
| tests/Aspire.Dashboard.Components.Tests/Controls/ApplicationSummaryTests.cs | Cover layout toggles across viewports and missing-parameter states. |
| src/Aspire.Dashboard/Resources/xlf/Resources.zh-Hant.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.zh-Hans.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.tr.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.ru.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.pt-BR.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.pl.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.ko.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.ja.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.it.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.fr.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.es.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.de.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/xlf/Resources.cs.xlf | Add panel-control localization entries. |
| src/Aspire.Dashboard/Resources/Resources.resx | Define Panels toggle labels. |
| src/Aspire.Dashboard/Resources/Resources.Designer.cs | Expose the new resource strings. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor.css | Add hidden-panel styling and content-driven card sizing. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor.cs | Manage panel choices and update sizing comments. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.razor | Add the panel selector and visibility-aware packing. |
| src/Aspire.Dashboard/Components/Pages/ResourceOverview.Details.cs | Show all properties by default. |
| src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.css | Adapt headers, navigation, and footers for narrow screens. |
| src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor | Reposition header controls and expose mobile status footers. |
| src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css | Allow wider application titles on mobile. |
| src/Aspire.Dashboard/Components/CustomIcons/AspireIcons.cs | Add the Hide empty panels icon. |
| src/Aspire.Dashboard/Components/Controls/DashboardMessageBar.razor.css | Compact responsive alerts and position dismiss controls. |
| src/Aspire.Dashboard/Components/Controls/ApplicationSummary.razor.css | Condense layout labels when space is limited. |
| src/Aspire.Dashboard/Components/Controls/ApplicationSummary.razor.cs | Remove obsolete mobile-menu helpers. |
| src/Aspire.Dashboard/Components/Controls/ApplicationSummary.razor | Use layout icon toggles on every viewport. |
Review effort: Balanced
Member
Author
Before / after: responsive alerts and navigationThese are real screenshots from two separately running builds, captured at matching viewport sizes and routes with the same unsecured-endpoint and feedback banners. No CSS replacement or simulated UI. Before: After: Resource state names, clock output, timestamps, and elapsed durations vary because the sample is live. Compare layout rather than those changing values. Mobile - 390x844The resource Overview comparison shows alerts with inline content and top-right dismiss controls, the full application title using available width, the compact resource picker/navigation, content-sized cards, and status moved to a persistent footer.
The All resources comparison shows the Cards / Home / Graph dropdown replaced by the same icon-toggle pattern as Panels, with the unresolved-parameter notice retained.
Tablet - 768x1024Alert actions share the content row where space permits. The smaller picker/header and content-driven cards leave more room for useful resource information.
|
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Contributor
Tests selector14 / 100 PR test projects · 2 PR jobs, from 31 changed files. Selected PR test projects (14 / 100)
Selected PR jobs (2)
How these were chosen — grouped by what changed
🔧 📦 affected project 🔧 🧪 🧪 🧪 🧪 Job reasons
Selection computed for commit |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
No active review issues are reported for the resource overview changes.
No open issues 🎉
2 resolved since last review
1 file not reviewed
src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
Review effort: Balanced
Contributor
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
23 tasks
Sébastien Ros (sebastienros)
approved these changes
Nov 4, 2026
Sébastien Ros (sebastienros)
left a comment
Sébastien Ros (sebastienros)
left a comment
Contributor
There was a problem hiding this comment.
LGTM — no high-confidence issues found in the reviewed diff. The docked-terminal packing and child-component scrolling fixes address the earlier findings.
Contributor
|
Pull request created: #2044
|
Contributor
|
📝 Documentation has been drafted in microsoft/aspire.dev#2044 targeting Updated Note This draft PR needs human review before merging. |
4 of 14 tasks
Maddy Montaquila (maddymontaquila)
pushed a commit
that referenced
this pull request
Nov 4, 2026
## Description The resource sidebar already provides resource browsing and actions. Remove the duplicate **Cards** overview layout for all resources, resource groups and multi-resource selections, leaving **Summary** and **Graph**. Relates to #21708 (UX-24). ### User-facing usage - Open Overview with all resources selected to see Summary. Select a group or multiple resources to scope the existing health, activity, insights, recent errors and failed traces widgets to that selection. - Choose Summary or Graph using the existing responsive icon controls, or in Settings. Summary uses the DataBarVertical icon, distinct from the unchanged Overview and Metrics navigation icons. - Open an individual resource to retain its existing detail panels. Parameter editors and the missing-parameter entry point remain available. - Existing saved `Cards` and older `Resources` choices are explicitly rewritten to `Summary`. Missing or invalid choices fall back to Summary; existing Summary/Graph choices and numeric values remain compatible. ### Scope and integration Based on freshly fetched upstream main `e626df45aea0be8ce47fe190f7cfbba350503489`, including merged #21691. Its all-screen responsive icon controls and single-resource panel improvements are preserved. The only default/preference overlap included is inseparable from removing Cards: first-use/default resolution, removed-choice compatibility and the disabled-Graph display fallback must point to a remaining layout. This does **not** include UX06's separate saved-default/active-layout policy, session-storage/reload logic, Settings label changes or a changed Graph restoration policy. Settings retains its existing immediate behavior, and a disabled saved Graph choice remains stored as before. Remove the Cards renderer and directly orphaned actions, styles, resources and unreachable table renderer. Preserve Summary widgets, single-resource Details, resource list density, sidebar search/selection, graph controls and parameter workflows. No widget customization or unrelated redesign. ### Screenshots / Recordings Actual Chromium captures from this branch's build with synthetic resources and telemetry. All 36 captures (six states at each size/theme) were inspected; the representative images below show the retained responsive controls, scoped Summary, Details and Graph. No horizontal overflow in the overview header/control checks; mobile/tablet content remains vertically scrollable. Console and page errors: **0** across the six capture contexts. | Viewport | Light Summary | Dark Summary | | --- | --- | --- | | 390 x 844 |  |  | | 768 x 1024 |  |  | | 1440 x 900 |  |  | <details> <summary>Settings: Summary and Graph only, at all three sizes in both themes</summary> | Viewport | Light Settings | Dark Settings | | --- | --- | --- | | 390 x 844 |  |  | | 768 x 1024 |  |  | | 1440 x 900 |  |  | </details> <details> <summary>Multi-selection, resource group, preserved single-resource Details and Graph</summary> | Scenario | Capture | | --- | --- | | Two selected resources: two logs/traces and only their errors/endpoints |  | | Project group: the same scoped Summary with group selection retained |  | | Single-resource detail panels remain, including in mobile dark mode |  | | Graph still shows the selected resources |  | </details> ### Validation Windows validation; quarantined tests excluded. Only the explicitly selected Playwright outerloop scenarios were opted into. | Check | Result | | --- | --- | | Fresh-main ApplicationSummary/Settings component baseline | 18 passed | | Final focused component union: summary, preferences, Settings, single-resource panels, layout and actions | **166 passed** | | Initial combined Playwright run | 7 passed | | Final Playwright run, after adding Graph deep-link and stronger group-transition checks | **All 6 new viewport/theme cases passed**; 1 existing tab-navigation case failed | | Pristine-main control of the existing failing navigation case | **Same failure reproduced** on unmodified `e626df45`: Overview click remained on `/consolelogs` instead of `/resources` | | Dashboard build | Passed, 0 errors | | UpdateXlf | Passed, 26 generated locale files updated | | Scoped formatting and `git diff --check` | Passed | | Synthetic browser checks | Cards migration/reload; selected telemetry 3 -> 2; sidebar search independent of telemetry scope; group selection; Details/Back; Summary/Graph keyboard activation and accessible names; Graph deep link; disabled-Graph Summary fallback; missing-parameter batch entry and inline editor | | Temporary host/browser cleanup | Closed; host exited 0 and its listener was gone | **Existing limitations, not hidden by reruns:** the pre-existing `AllResourcesRow_ClearsSelectionAndListsResourcesInOverview` navigation timing failure also reproduces without this change; no unrelated navigation fix is included. The pinned SDK package emits baseline warning NU1903 for `Microsoft.DotNet.ILCompiler` 11.0.0-rc.2.26504.105, identically on pristine main and this branch. SDK/dependencies are unchanged. Cross-platform CI remains to run. <details> <summary>Exact validation commands and results</summary> Restore: passed. ```powershell .\restore.cmd ``` Fresh-main component baseline: 18 passed. ```powershell dotnet test --project tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj --no-launch-profile '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\' -- --filter-class '*.ApplicationSummaryTests' --filter-class '*.SettingsDialogTests' --filter-not-trait 'quarantined=true' --filter-not-trait 'outerloop=true' ``` Final component union: 166 passed. ```powershell dotnet test --project tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj --no-launch-profile '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\' -- --filter-class '*.ApplicationSummaryTests' --filter-class '*.SettingsDialogTests' --filter-class '*.DashboardViewPreferencesTests' --filter-class '*.ResourceOverviewEmptyPanelsTests' --filter-class '*.ResourceOverviewTests' --filter-class '*.ResourcesLayoutTests' --filter-class '*.ResourceActionsTests' --filter-not-trait 'quarantined=true' --filter-not-trait 'outerloop=true' ``` Playwright: initial 7/7 passed; final six new cases passed and one existing navigation case failed as described above. ```powershell $env:PLAYWRIGHT_BROWSERS_PATH='D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\bin\playwright-deps' dotnet test --project tests\Aspire.Dashboard.Playwright.Tests\Aspire.Dashboard.Playwright.Tests.csproj --no-launch-profile '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\' -- --filter-method '*.RemovedCards_UsesSummaryAndPreservesScopeDetailsAndKeyboard' --filter-method '*.AllResourcesRow_ClearsSelectionAndListsResourcesInOverview' --filter-not-trait 'quarantined=true' ``` Pristine-main control, with the focused changes temporarily stashed: failed with the identical `/consolelogs` to `/resources` assertion. ```powershell dotnet test --project tests\Aspire.Dashboard.Playwright.Tests\Aspire.Dashboard.Playwright.Tests.csproj --no-launch-profile '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr-baseline-browser\' -- --filter-method '*.AllResourcesRow_ClearsSelectionAndListsResourcesInOverview' --filter-not-trait 'quarantined=true' ``` Build and localization: both passed. ```powershell dotnet build src\Aspire.Dashboard\Aspire.Dashboard.csproj --no-restore '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\' dotnet build src\Aspire.Dashboard\Aspire.Dashboard.csproj /t:UpdateXlf --no-restore '-p:ArtifactsDir=D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr\' ``` Formatting on the changed files, run before committing: all passed. An initial charset finding in ApplicationSummary.razor.cs was corrected with the formatter. ```powershell $env:ArtifactsDir='D:\GitHub\copilot-worktrees\aspire\ievangelist-super-garbanzo\artifacts\cards-pr-format\' $appFiles=@(git diff --name-only -- src | Where-Object { $_ -match '\.(cs|razor)$' }) dotnet format whitespace src\Aspire.Dashboard\Aspire.Dashboard.csproj --no-restore --verify-no-changes --include $appFiles $testFiles=@(git diff --name-only -- tests\Aspire.Dashboard.Components.Tests | Where-Object { $_ -match '\.cs$' }) + 'tests\Aspire.Dashboard.Components.Tests\Model\DashboardViewPreferencesTests.cs' dotnet format whitespace tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj --no-restore --verify-no-changes --include $testFiles dotnet format whitespace tests\Aspire.Dashboard.Playwright.Tests\Aspire.Dashboard.Playwright.Tests.csproj --no-restore --verify-no-changes --include tests\Aspire.Dashboard.Playwright.Tests\Integration\Playwright\OverviewLayoutTests.cs tests\Aspire.Dashboard.Playwright.Tests\Integration\Playwright\ResourcePaneInteractionTests.cs git diff --check ``` </details> ## Checklist - Is this feature complete? - [x] Yes. Ready to ship. - [ ] No. Follow-up changes expected. - Are you including unit tests for the changes and scenario tests if relevant? - [x] 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 - [x] 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 - [x] No --------- Co-authored-by: David Pine <7679720+IEvangelist@users.noreply.github.com> Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
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
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.
Description
Resource overviews currently spend space on empty panels and fixed-height cards, while narrow screens crowd alerts and navigation controls. This change makes the dashboard more useful across mobile, tablet, and desktop.
The original feature and subsequent user-approved responsive improvements remain separate commits within this PR. No new dependencies.
Fixes # (issue)
User-facing usage
Open an individual resource's Overview and use Panels to switch between hiding empty panels and showing all panels. In the Properties card, all properties are shown initially; choose Show core properties to narrow the list. On All resources, use the Cards / Home / Graph icon buttons, including on mobile and when parameters need values.
Screenshots / Recordings
Before / after: responsive alerts and navigation contains four matched mobile/tablet comparisons, with the same two alerts, routes, and viewport sizes. Before is the isolated feature-plus-Properties build
63e14708c4, before responsive UX commits (not unmodified main); after is the combined build6c62b9cc4a. Live sample state/timestamps vary.Full gallery: 22 combined-build screenshots covers sparse and populated resources in both panel modes, Cards / Home / Graph with an unresolved parameter, responsive alerts/navigation/status, and the Show all properties default. Captured from
6c62b9cc4a, including all approved responsive UX improvements. Images are GitHub attachments, not committed files. The subsequent review fixeb0de0e811corrects docked-terminal packing and child-component scrolling limits.Properties: all five entries shown by default
Validation
Focused component commands passed:
The branch's dashboard rebuilt successfully with 0 warnings/errors and reached healthy state in its isolated CustomResources AppHost. Combined-build Edge/Playwright checks passed 20 resource/panel/viewport combinations and 12 summary-layout/viewport combinations, including 320px and 1024px widths. Checked keyboard interaction, selected states/tooltips, mounted content, row sizing, responsive header/footer placement, alert-action containment, drawer controls, persisted layout selection, no horizontal overflow, and no browser errors. The Properties default/filter transition was also verified against live data (5 properties -> explicit core filter 0 -> restore 5), preserving controls across panel modes.
After the review fixes, expanded real Properties (13 rows, 416px content) and Environment (25 rows, 800px content) were verified at 390px, 768px and 1440px: each child grid remains capped at 340px and scrolls internally. The existing preview was resumed and reached healthy state.
Live terminal input was not exercised in this sample; existing terminal component tests passed.
git diff --checkpassed.Checklist
<remarks />and<code />elements on your triple slash comments?