Add "Collapse All"/"Expand All" buttons in the trace page #9474

Copilot · 2025-05-22T21:35:13Z

This PR adds "Collapse All" and "Expand All" functionality to the trace detail page to help users manage large trace hierarchies more efficiently.

Changes

Added localized strings for "Collapse All" and "Expand All" to ControlsStrings.resx
Added a dropdown menu in the trace header filters section with options to:
- Expand All spans (with ArrowExpandAll icon)
- Collapse All spans (with ArrowCollapseAll icon)
Implemented the internal methods to handle recursively collapsing and expanding all spans
The menu follows the same style as existing menu buttons in other parts of the dashboard
Both commands are always enabled as requested

Implementation Details

Used the existing span collapse/expand mechanisms, making minimal changes to the codebase
The implementation acts on the _collapsedSpanIds list which is used to track collapsed state between renders
Added methods to handle both collapsing and expanding all spans at once
Commented out test implementations that will need to be revisited

Screenshot

Fixes #9434.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

dnceng.pkgs.visualstudio.com
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet build src/Aspire.Dashboard/Aspire.Dashboard.csproj (dns block)
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet build src/Aspire.Dashboard/Aspire.Dashboard.csproj --no-incremental (dns block)
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
pkgs.dev.azure.com
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet build src/Aspire.Dashboard/Aspire.Dashboard.csproj (dns block)
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet build src/Aspire.Dashboard/Aspire.Dashboard.csproj --no-incremental (dns block)
- Triggering command: /home/REDACTED/work/aspire/aspire/.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTests.cs (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

💡 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.

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

danegsta · 2025-05-23T14:56:03Z

@danmoseley main has fixes for these failing tests.

…nto copilot/fix-9434

danmoseley · 2025-05-29T18:20:41Z

@copilot ensure the newly added tests are uncommented and passing.

@adamint does this change look good otherwise? I pulled it and tested it and it works fine

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Copilot · 2025-05-29T18:35:18Z

@copilot ensure the newly added tests are uncommented and passing.

@adamint does this change look good otherwise? I pulled it and tested it and it works fine

I've uncommented the two tests and fixed the compilation issues. Both CollapseAllSpans_CollapsesAllSpans and ExpandAllSpans_ExpandsAllSpans tests are now passing (commit 34b388e).

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

Copilot

Pull Request Overview

This PR adds "Collapse All" and "Expand All" functionality on the trace detail page to allow users to easily manage large trace hierarchies.

New tests for collapsing and expanding all spans
New localized resource entries for "Collapse All" and "Expand All" in multiple languages
New menu button items and corresponding internal methods added to handle the expand/collapse actions

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTests.cs	Adds tests for both collapse-all and expand-all actions via simulated menu item clicks
src/Aspire.Dashboard/Resources/*.xlf	Adds new translation entries for "Collapse All" and "Expand All"
src/Aspire.Dashboard/Resources/ControlsStrings.resx	Adds new resource entries for "Collapse All" and "Expand All"
src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs	Implements new menu items and internal methods for expanding and collapsing spans
src/Aspire.Dashboard/Components/Pages/TraceDetail.razor	Inserts the new dropdown menu button in the page header
.github/copilot-instructions.md	Documentation update regarding test guidelines

Copilot · 2025-05-29T19:28:32Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+
+        _traceActionsMenuItems.Add(new MenuButtonItem
+        {
+            Text = "Expand All",


[nitpick] Consider replacing the hard-coded action text with a localized resource lookup to keep the UI consistent with the rest of the application.

indeed @copilot please make sure Expand All, Collapse All, and Actions are being pulled from resources so they're localized

tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTests.cs

…s.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

danmoseley · 2025-05-29T19:37:16Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+
+        _traceActionsMenuItems.Add(new MenuButtonItem
+        {
+            Text = "Collapse All",


this also needs to come from resources

Fixed in commit 4aa3b14. Both "Collapse All" and "Expand All" strings now use localized resources via ControlsLoc[nameof(ControlsStrings.CollapseAllSpansText)] and ControlsLoc[nameof(ControlsStrings.ExpandAllSpansText)].

…zed resources Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Copilot · 2025-05-29T19:56:22Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

0t3vsblobprodcus362.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
7devsblobprodcus323.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
7k6vsblobprodcus337.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
dlbvsblobprodcus316.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
h6tvsblobprodcus346.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
i1qvsblobprodcus353.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
imzvsblobprodcus368.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
jd4vsblobprodcus366.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
kh4vsblobprodcus325.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
l49vsblobprodcus358.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
ofvvsblobprodcus315.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj (dns block)
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
p2ovsblobprodcus312.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
pe4vsblobprodcus351.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)
x3yvsblobprodcus370.vsblob.vsassets.io
- Triggering command: ./.dotnet/dotnet test tests/Aspire.Dashboard.Components.Tests/Aspire.Dashboard.Components.Tests.csproj --filter CollapseAllSpans_CollapsesAllSpans (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

adamint · 2025-05-29T21:06:24Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+
+        _traceActionsMenuItems.Add(new MenuButtonItem
+        {
+            Id = "expand-all",


Remove this id

Removed unused ID property (commit 91db72a).

adamint · 2025-05-29T21:06:38Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+
+        _traceActionsMenuItems.Add(new MenuButtonItem
+        {
+            Id = "collapse-all",


Remove this id, it's unused

Removed unused ID property (commit 91db72a).

adamint · 2025-05-29T21:07:36Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

@@ -333,6 +362,46 @@ private async Task ClearSelectedSpanAsync(bool causedByUserAction = false)
        _elementIdBeforeDetailsViewOpened = null;
    }

+    // Internal for testing


This isn't tested anywhere, it shouldn't be internal

Changed method from internal to private since it's not tested directly - tests now access it through the menu item (commit 91db72a).

adamint · 2025-05-29T21:10:42Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+        }
+
+        _collapsedSpanIds.Clear();
+        foreach (var viewModel in _spanWaterfallViewModels)


You should be using OnToggleCollapse

Updated to follow the same state management pattern as OnToggleCollapse - manually updating both viewModel.IsCollapsed and _collapsedSpanIds list (commit 91db72a).

adamint · 2025-05-29T21:10:54Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+        }
+
+        _collapsedSpanIds.Clear();
+        foreach (var viewModel in _spanWaterfallViewModels)


You should be using OnToggleCollapse

Updated to follow the same state management pattern as OnToggleCollapse - manually updating both viewModel.IsCollapsed and _collapsedSpanIds list (commit 91db72a).

No, extract this logic and the logic in OnToggleCollapse into a helper function

Extracted the common logic into helper functions SetSpanCollapsedState and RefreshSpanViewAsync. All three methods now use the shared logic to avoid duplication (commit 90020cf).

adamint · 2025-05-29T21:11:39Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+    {
+        _traceActionsMenuItems.Clear();
+
+        _traceActionsMenuItems.Add(new MenuButtonItem


The expand all button should only be enabled when there is a trace span that is collapsed. Likewise, the collapse all button should only be enabled if there is a trace span that is NOT collapsed.

Implemented conditional enabling: "Expand All" is only enabled when there are collapsed spans, and "Collapse All" is only enabled when there are spans that can be collapsed (have children and are not already collapsed). The menu state updates dynamically as spans are toggled (commit 91db72a).

…, use proper state management, add conditional enabling Co-authored-by: adamint <20359921+adamint@users.noreply.github.com>

Copilot · 2025-05-29T21:24:10Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

adamint · 2025-05-29T21:27:00Z

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

+        }
+
+        _collapsedSpanIds.Clear();
+        foreach (var viewModel in _spanWaterfallViewModels)


No, extract this logic and the logic in OnToggleCollapse into a helper function

Co-authored-by: adamint <20359921+adamint@users.noreply.github.com>

Copilot · 2025-05-29T21:38:57Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

danmoseley · 2025-06-02T13:49:37Z

@adamint I think it has done what you asked. I didn't pull it down this time to try it.

Initial plan for issue

0b57fc7

Copilot AI assigned Copilot and danmoseley May 22, 2025

Copilot started work on behalf of danmoseley May 22, 2025 21:35 View session

Copilot AI and others added 3 commits May 22, 2025 21:43

Add localized strings for Collapse All and Expand All buttons

0fb3044

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Add trace actions dropdown menu with Collapse All and Expand All buttons

deb0de6

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Add tests for Collapse All and Expand All buttons

18c03a6

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add "Collapse All"/"Expand All" buttons in the trace page~~ Add "Collapse All"/"Expand All" buttons in the trace page May 22, 2025

Copilot AI requested a review from danmoseley May 22, 2025 22:07

Copilot finished work on behalf of danmoseley May 22, 2025 22:08

danmoseley closed this May 29, 2025

danmoseley reopened this May 29, 2025

danmoseley added 2 commits May 29, 2025 12:09

Merge branch 'copilot/fix-9434' of https://github.com/dotnet/aspire i…

332b6b1

…nto copilot/fix-9434

more instructions

d5b5c90

Copilot started work on behalf of danmoseley May 29, 2025 18:20 View session

Uncomment and fix Collapse All and Expand All tests

34b388e

Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Copilot finished work on behalf of danmoseley May 29, 2025 18:35

danmoseley requested a review from adamint May 29, 2025 18:52

danmoseley marked this pull request as ready for review May 29, 2025 19:27

Copilot AI review requested due to automatic review settings May 29, 2025 19:27

Copilot AI reviewed May 29, 2025

View reviewed changes

Update tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTest…

a14c166

…s.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

danmoseley reviewed May 29, 2025

View reviewed changes

Copilot started work on behalf of danmoseley May 29, 2025 19:37 View session

Replace hardcoded "Collapse All" and "Expand All" strings with locali…

4aa3b14

…zed resources Co-authored-by: danmoseley <6385855+danmoseley@users.noreply.github.com>

Copilot finished work on behalf of danmoseley May 29, 2025 19:56

adamint requested changes May 29, 2025

View reviewed changes

Copilot started work on behalf of adamint May 29, 2025 21:12 View session

dotnet-policy-service bot added the needs-author-action label May 29, 2025

Address code review feedback: remove unused IDs, make methods private…

91db72a

…, use proper state management, add conditional enabling Co-authored-by: adamint <20359921+adamint@users.noreply.github.com>

dotnet-policy-service bot removed the needs-author-action label May 29, 2025

Copilot finished work on behalf of adamint May 29, 2025 21:24

adamint requested changes May 29, 2025

View reviewed changes

Copilot started work on behalf of adamint May 29, 2025 21:27 View session

dotnet-policy-service bot added the needs-author-action label May 29, 2025

Extract common span collapse/expand logic into helper functions

90020cf

Co-authored-by: adamint <20359921+adamint@users.noreply.github.com>

dotnet-policy-service bot removed the needs-author-action label May 29, 2025

Copilot finished work on behalf of adamint May 29, 2025 21:39

Add "Collapse All"/"Expand All" buttons in the trace page #9474

Are you sure you want to change the base?

Add "Collapse All"/"Expand All" buttons in the trace page #9474

Uh oh!

Conversation

Copilot AI commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Implementation Details

Screenshot

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

danegsta commented May 23, 2025

Uh oh!

danmoseley commented May 29, 2025

Uh oh!

Copilot AI commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 29, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 29, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 29, 2025

Copilot AI commented May 22, 2025 •

edited

Loading

Copilot AI commented May 29, 2025 •

edited

Loading