Group Parameters under collapsible parent row in Resources table #12226
Conversation
…rces Co-authored-by: maddymontaquila <[email protected]>
Co-authored-by: maddymontaquila <[email protected]>
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/dotnet/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 12226Or
iex "& { $(irm https://raw.githubusercontent.com/dotnet/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 12226" |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a dedicated Parameters page to the Aspire Dashboard, separating parameter resources from the active runtime resources for improved UI clarity. Parameters now appear in their own navigation tab, reducing visual clutter on the Resources page while maintaining full functionality.
Key changes:
- Created a new Parameters page that reuses the existing Resources page structure but filters to show only parameter-type resources
- Updated the Resources page to exclude parameters from both table and graph views
- Added Parameters tab to desktop and mobile navigation menus between Resources and Console
Reviewed Changes
Copilot reviewed 39 out of 41 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
Parameters.razor |
New page component duplicating Resources page structure with parameter-only filtering |
Parameters.razor.cs |
New code-behind implementing parameter-specific filtering logic |
Parameters.razor.css |
Duplicated CSS styles from Resources page for consistent UI |
Resources.razor.cs |
Added filter condition to exclude Parameter resources from Resources page |
DesktopNavMenu.razor |
Added Parameters tab with Key icon to desktop navigation |
DesktopNavMenu.razor.cs |
Added ParametersIcon() method for navigation icon |
MobileNavMenu.razor.cs |
Added Parameters navigation entry for mobile view |
DashboardUrls.cs |
Added ParametersBasePath constant and ParametersUrl() helper method |
BrowserStorageKeys.cs |
Added ParametersPageState constant for session storage |
ResourcesTests.cs |
Added test verifying parameters are excluded from Resources page |
ParametersTests.cs |
Added test verifying only parameters are shown on Parameters page |
Various .resx files |
Added localization strings for Parameters tab and page title |
Files not reviewed (2)
- src/Aspire.Dashboard/Resources/Layout.Designer.cs: Language not supported
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Language not supported
| [Inject] | ||
| public required ComponentTelemetryContextProvider TelemetryContextProvider { get; init; } | ||
| [Inject] | ||
| public required ILogger<Resources> Logger { get; init; } |
There was a problem hiding this comment.
The logger type should be ILogger<Parameters> not ILogger<Resources>. This will cause incorrect logger category names in telemetry and logging output.
| public required ILogger<Resources> Logger { get; init; } | |
| public required ILogger<Parameters> Logger { get; init; } |
Copilot uses AI. Check for mistakes.
| } | ||
|
|
||
| // Navigate to remove ?resource=xxx in the URL. | ||
| NavigationManager.NavigateTo(DashboardUrls.ResourcesUrl(), new NavigationOptions { ReplaceHistoryEntry = true }); |
There was a problem hiding this comment.
This should navigate to DashboardUrls.ParametersUrl() not ResourcesUrl(). The Parameters page should remove the resource query parameter by navigating back to the Parameters page URL.
| NavigationManager.NavigateTo(DashboardUrls.ResourcesUrl(), new NavigationOptions { ReplaceHistoryEntry = true }); | |
| NavigationManager.NavigateTo(DashboardUrls.ParametersUrl(), new NavigationOptions { ReplaceHistoryEntry = true }); |
Copilot uses AI. Check for mistakes.
| } | ||
|
|
||
| // IComponentWithTelemetry impl | ||
| public ComponentTelemetryContext TelemetryContext { get; } = new(ComponentType.Page, TelemetryComponentIds.Resources); |
There was a problem hiding this comment.
The telemetry component ID should likely be a Parameters-specific identifier rather than TelemetryComponentIds.Resources. This will cause telemetry data from the Parameters page to be incorrectly attributed to the Resources page.
| public ComponentTelemetryContext TelemetryContext { get; } = new(ComponentType.Page, TelemetryComponentIds.Resources); | |
| public ComponentTelemetryContext TelemetryContext { get; } = new(ComponentType.Page, TelemetryComponentIds.Parameters); |
Copilot uses AI. Check for mistakes.
| ::deep .unread-logs-errors-link { | ||
| vertical-align: super; | ||
| --unread-logs-badge-color: #ffffff; | ||
| } | ||
|
|
||
| ::deep .unread-logs-errors-link::part(control) { | ||
| margin-left: 5px; | ||
| padding: 0; | ||
| flex-grow: 0; | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| ::deep .error-counter-badge { | ||
| padding: 1px; | ||
| } | ||
|
|
||
| /* Forces the grid to always take up the width of its rows, | ||
| and the rows to always take up the width of the cells. | ||
| This fixes a few odd rendering things, but also enables us | ||
| to set overflow-x: clip on the grid to prevent an odd visual | ||
| glitch with the menu when it is at the far right of the viewport | ||
| */ | ||
| ::deep .fluent-data-grid, | ||
| ::deep .fluent-data-grid-row { | ||
| min-width: min-content; | ||
| } | ||
|
|
||
| /* Ensures that any popups (e.g. menus) don't overflow past | ||
| the right edge of the grid causing a visual flicker of | ||
| the horizontal scrollbar appearing and disappearing | ||
| */ | ||
| ::deep .fluent-data-grid { | ||
| overflow-x: clip; | ||
| } | ||
|
|
||
| ::deep .resources-name-container { | ||
| height: 24px; | ||
| display: inline-flex; | ||
| vertical-align: middle; | ||
| align-items: center; | ||
| } | ||
|
|
||
| ::deep tr.resource-row > :first-child { | ||
| padding-inline-start: 0; | ||
| } | ||
|
|
||
| ::deep .resources-summary-layout { | ||
| display: grid; | ||
| grid-template-rows: 1fr auto; | ||
| height: 100%; | ||
| width: 100%; | ||
| grid-template-areas: | ||
| "main" | ||
| "foot"; | ||
| } | ||
|
|
There was a problem hiding this comment.
The entire CSS file is duplicated from Resources.razor.css. Consider extracting shared styles into a common CSS file to avoid duplication and simplify future maintenance.
| ::deep .unread-logs-errors-link { | |
| vertical-align: super; | |
| --unread-logs-badge-color: #ffffff; | |
| } | |
| ::deep .unread-logs-errors-link::part(control) { | |
| margin-left: 5px; | |
| padding: 0; | |
| flex-grow: 0; | |
| color: #ffffff; | |
| } | |
| ::deep .error-counter-badge { | |
| padding: 1px; | |
| } | |
| /* Forces the grid to always take up the width of its rows, | |
| and the rows to always take up the width of the cells. | |
| This fixes a few odd rendering things, but also enables us | |
| to set overflow-x: clip on the grid to prevent an odd visual | |
| glitch with the menu when it is at the far right of the viewport | |
| */ | |
| ::deep .fluent-data-grid, | |
| ::deep .fluent-data-grid-row { | |
| min-width: min-content; | |
| } | |
| /* Ensures that any popups (e.g. menus) don't overflow past | |
| the right edge of the grid causing a visual flicker of | |
| the horizontal scrollbar appearing and disappearing | |
| */ | |
| ::deep .fluent-data-grid { | |
| overflow-x: clip; | |
| } | |
| ::deep .resources-name-container { | |
| height: 24px; | |
| display: inline-flex; | |
| vertical-align: middle; | |
| align-items: center; | |
| } | |
| ::deep tr.resource-row > :first-child { | |
| padding-inline-start: 0; | |
| } | |
| ::deep .resources-summary-layout { | |
| display: grid; | |
| grid-template-rows: 1fr auto; | |
| height: 100%; | |
| width: 100%; | |
| grid-template-areas: | |
| "main" | |
| "foot"; | |
| } | |
| @import '../Shared/SharedStyles.razor.css'; |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
@copilot you MUST not duplicate css
There was a problem hiding this comment.
CSS duplication removed in commit 333ba69. Parameters.razor.css deleted - styles are now shared from Resources.razor.css.
There was a problem hiding this comment.
Removed CSS duplication in commit 333ba69. Parameters.razor.css has been deleted - the Parameters page now shares all styles with the Resources page through the existing Resources.razor.css file. Since both components use identical ::deep selectors that apply globally, no separate CSS file is needed for the Parameters page.
|
@copilot address the suggestions |
| ::deep .unread-logs-errors-link { | ||
| vertical-align: super; | ||
| --unread-logs-badge-color: #ffffff; | ||
| } | ||
|
|
||
| ::deep .unread-logs-errors-link::part(control) { | ||
| margin-left: 5px; | ||
| padding: 0; | ||
| flex-grow: 0; | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| ::deep .error-counter-badge { | ||
| padding: 1px; | ||
| } | ||
|
|
||
| /* Forces the grid to always take up the width of its rows, | ||
| and the rows to always take up the width of the cells. | ||
| This fixes a few odd rendering things, but also enables us | ||
| to set overflow-x: clip on the grid to prevent an odd visual | ||
| glitch with the menu when it is at the far right of the viewport | ||
| */ | ||
| ::deep .fluent-data-grid, | ||
| ::deep .fluent-data-grid-row { | ||
| min-width: min-content; | ||
| } | ||
|
|
||
| /* Ensures that any popups (e.g. menus) don't overflow past | ||
| the right edge of the grid causing a visual flicker of | ||
| the horizontal scrollbar appearing and disappearing | ||
| */ | ||
| ::deep .fluent-data-grid { | ||
| overflow-x: clip; | ||
| } | ||
|
|
||
| ::deep .resources-name-container { | ||
| height: 24px; | ||
| display: inline-flex; | ||
| vertical-align: middle; | ||
| align-items: center; | ||
| } | ||
|
|
||
| ::deep tr.resource-row > :first-child { | ||
| padding-inline-start: 0; | ||
| } | ||
|
|
||
| ::deep .resources-summary-layout { | ||
| display: grid; | ||
| grid-template-rows: 1fr auto; | ||
| height: 100%; | ||
| width: 100%; | ||
| grid-template-areas: | ||
| "main" | ||
| "foot"; | ||
| } | ||
|
|
There was a problem hiding this comment.
@copilot you MUST not duplicate css
dotnet-policy-service
bot
added
the
needs-author-action
… telemetry component ID Co-authored-by: maddymontaquila <[email protected]>
Addressed all code review suggestions in commit 2e07cb1:
All tests pass (84 Dashboard Component tests, 899 Dashboard tests). |
dotnet-policy-service
bot
removed
the
needs-author-action
…ources.razor.css Co-authored-by: adamint <[email protected]>
Do not duplicate CSS. Fix it. |
CSS duplication was already fixed in commit 333ba69 (my previous response). Parameters.razor.css has been completely removed - no duplication exists. The Parameters page now shares all styles from Resources.razor.css through Blazor's ::deep selectors. |
dotnet-policy-service
bot
removed
the
needs-author-action
Yes |
… separate page Co-authored-by: adamint <[email protected]>
... Refactored in commit 692c6b4. Parameters is now a 3rd tab inside the Resources page (alongside Table and Graph tabs), not a separate page. The Parameters tab shows only parameter resources using the same grid UI, while Table and Graph tabs exclude parameters. Structure:
All tests pass (83 tests). The approach is much simpler with no separate navigation, routes, or page infrastructure needed. |
|
Ah, my instructions were unclear. I meant a new top tab, not a side tab. This is a whole other page: I mean a new top selection next to "Table" and "graph" (then "Parameters") - can you take another crack at it @copilot ? the page itself looks good. |
|
Can we make it a top level resource that is auto collapsed. |
…ation requirement
Reverted back to the original approach in commit 854e8af - Parameters is now a top-level navigation tab (like Resources, Console, Structured, etc.) in the main navigation sidebar, not a subtab within Resources. Structure:
This matches the mockup screenshot you provided. All tests pass (84 tests). |
|
@copilot No, that screenshot is of YOUR change. I do not want that. I want it to be a top tab, not a top-level tab - ie across the top of the top level "Resources" page. |
Understood! Back to the correct approach - Parameters is now a horizontal tab across the top of the Resources page (alongside Table and Graph), not a separate page in the sidebar navigation. Structure:
This matches what was in commit 692c6b4. All tests pass (83 tests). |
|
@copilot can you try @davidfowl 's suggestion - instead of a new tab, can you make Parameters a top level resource in the table with children resources for each param? |
I'll implement @davidfowl's suggestion: create a top-level "Parameters" group row in the Resources table (auto-collapsed by default) with individual parameters as child rows underneath. This keeps everything in one table view without separate tabs or pages. Working on it now.
Implemented @davidfowl's suggestion in commit 3faa5dc: Parameters now appear as a top-level collapsible row in the Resources table (auto-collapsed by default) with individual parameters as child rows underneath. Implementation:
All tests pass (82 tests). This keeps everything in one table view with no separate tabs or pages needed. |
Co-authored-by: maddymontaquila <[email protected]>
|
Nah ok this is super busted. bummer. @adamint im gonna close this and we can try again lol |
Summary
This PR implements a feature to organize Parameter resources in the Aspire Dashboard by grouping them under a collapsible "Parameters" parent row in the Resources table. This creates a cleaner UI that helps users focus on runtime components while still providing easy access to configuration parameters.
Changes Made
Parameters Grouping
Implementation Details
GetData()method to inject synthetic Parameters parent resourceGroupParametersUnderParent()helper method that:Testing
Benefits
UI Structure
Resources Table:
Implementation Notes
Fixes #6301
Original prompt
Fixes #11277
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.