Ensure visible trace spans stay sorted by start time and fix traces view expand/collapse icons (#8771)

adamint · web-flow · commit 97a7e526292d · 2025-04-21T23:56:39.000Z
diff --git a/playground/Stress/Stress.ApiService/Program.cs b/playground/Stress/Stress.ApiService/Program.cs
@@ -15,7 +15,9 @@
 builder.AddServiceDefaults();
 
 builder.Services.AddOpenTelemetry()
-    .WithTracing(tracing => tracing.AddSource(TraceCreator.ActivitySourceName, ProducerConsumer.ActivitySourceName))
+    .WithTracing(tracing => tracing
+        .AddSource(TraceCreator.ActivitySourceName, ProducerConsumer.ActivitySourceName)
+        .AddSource("Services.Api"))
     .WithMetrics(metrics => metrics.AddMeter(TestMetrics.MeterName));
 builder.Services.AddSingleton<TestMetrics>();
 
@@ -285,4 +287,68 @@ async IAsyncEnumerable<string> WriteOutput()
     return $"Created {TraceCount} traces.";
 });
 
+app.MapGet("/nested-trace-spans", async () =>
+    {
+        var forecast = Enumerable.Range(1, 5).Select(index =>
+                new WeatherForecast
+                (
+                    DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
+                    Random.Shared.Next(-20, 55),
+                    "Sample Text"
+                ))
+            .ToArray();
+        ActivitySource source = new("Services.Api", "1.0.0");
+        ActivitySource.AddActivityListener(new ActivityListener
+        {
+            ShouldListenTo = _ => true,
+            Sample = (ref ActivityCreationOptions<ActivityContext> _) => ActivitySamplingResult.AllData,
+        });
+        using var activity = source.StartActivity("ValidateAndUpdateCacheService.ExecuteAsync");
+        await Task.Delay(100);
+        Debug.Assert(activity is not null);
+        using var innerActivity = source.StartActivity("ValidateAndUpdateCacheService.activeUser",
+            ActivityKind.Internal, parentContext: activity.Context);
+        await Task.Delay(100);
+        Debug.Assert(innerActivity is not null);
+        using (source.StartActivity("Perform1", ActivityKind.Internal, parentContext: innerActivity.Context))
+        {
+            await Task.Delay(10);
+        }
+
+        using (source.StartActivity("Perform2", ActivityKind.Internal, parentContext: innerActivity.Context))
+        {
+            await Task.Delay(20);
+        }
+
+        using (source.StartActivity("Perform3", ActivityKind.Internal, parentContext: innerActivity.Context))
+        {
+            await Task.Delay(30);
+        }
+
+        using var innerActivity2 = source.StartActivity("ValidateAndUpdateCacheService.activeUser",
+            ActivityKind.Internal, parentContext: activity.Context);
+        await Task.Delay(100);
+        Debug.Assert(innerActivity2 is not null);
+
+        using (source.StartActivity("Perform1", ActivityKind.Internal, parentContext: innerActivity2.Context))
+        {
+            await Task.Delay(30);
+        }
+
+        using (source.StartActivity("Perform2", ActivityKind.Internal, parentContext: innerActivity2.Context))
+        {
+            await Task.Delay(20);
+        }
+
+        using (source.StartActivity("Perform3", ActivityKind.Internal, parentContext: innerActivity2.Context))
+        {
+            await Task.Delay(10);
+        }
+
+        return forecast;
+    })
+    .WithName("GetWeatherForecast");
+
 app.Run();
+
+public record WeatherForecast(DateOnly Date, int TemperatureC, string Summary);
diff --git a/playground/Stress/Stress.AppHost/Program.cs b/playground/Stress/Stress.AppHost/Program.cs
@@ -69,6 +69,7 @@
 serviceBuilder.WithHttpCommand("/log-message-limit", "Log message limit", commandOptions: new() { Method = HttpMethod.Get, IconName = "ContentViewGalleryLightning" });
 serviceBuilder.WithHttpCommand("/multiple-traces-linked", "Multiple traces linked", commandOptions: new() { Method = HttpMethod.Get, IconName = "ContentViewGalleryLightning" });
 serviceBuilder.WithHttpCommand("/overflow-counter", "Overflow counter", commandOptions: new() { Method = HttpMethod.Get, IconName = "ContentViewGalleryLightning" });
+serviceBuilder.WithHttpCommand("/nested-trace-spans", "Out of order nested spans", commandOptions: new() { Method = HttpMethod.Get, IconName = "ContentViewGalleryLightning" });
 
 builder.AddProject<Projects.Stress_TelemetryService>("stress-telemetryservice")
        .WithUrls(c => c.Urls.Add(new() { Url = "https://someplace.com", DisplayText = "Some place" }))
diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs
@@ -79,24 +79,31 @@ protected override void OnInitialized()
         }
     }
 
-    private ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridItemsProviderRequest<SpanWaterfallViewModel> request)
+    // Internal to be used in unit tests
+    internal ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridItemsProviderRequest<SpanWaterfallViewModel> request)
     {
         Debug.Assert(_spanWaterfallViewModels != null);
 
         var visibleViewModels = new HashSet<SpanWaterfallViewModel>();
         foreach (var viewModel in _spanWaterfallViewModels)
         {
-            if (!viewModel.IsHidden && viewModel.MatchesFilter(_filter, GetResourceName, out var matchedDescendents))
+            if (viewModel.IsHidden || visibleViewModels.Contains(viewModel))
+            {
+                continue;
+            }
+
+            if (viewModel.MatchesFilter(_filter, GetResourceName, out var matchedDescendents))
             {
                 visibleViewModels.Add(viewModel);
-                foreach (var descendent in matchedDescendents)
+                foreach (var descendent in matchedDescendents.Where(d => !d.IsHidden))
                 {
                     visibleViewModels.Add(descendent);
                 }
             }
         }
 
-        var page = visibleViewModels.AsEnumerable();
+        var page = _spanWaterfallViewModels.Where(visibleViewModels.Contains).AsEnumerable();
+        var totalItemCount = page.Count();
         if (request.StartIndex > 0)
         {
             page = page.Skip(request.StartIndex);
@@ -106,7 +113,7 @@ private ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridI
         return ValueTask.FromResult(new GridItemsProviderResult<SpanWaterfallViewModel>
         {
             Items = page.ToList(),
-            TotalItemCount = visibleViewModels.Count
+            TotalItemCount = totalItemCount
         });
     }
 
@@ -242,6 +249,7 @@ private async Task OnToggleCollapse(SpanWaterfallViewModel viewModel)
             _collapsedSpanIds.Add(viewModel.Span.SpanId);
         }
 
+        UpdateDetailViewData();
         await _dataGrid.SafeRefreshDataAsync();
     }
 
diff --git a/tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTests.cs b/tests/Aspire.Dashboard.Components.Tests/Pages/TraceDetailsTests.cs
@@ -156,6 +156,158 @@ await AsyncTestHelpers.AssertIsTrueRetryAsync(() =>
         }, "Expected rows to be rendered.", logger);
     }
 
+    [Fact]
+    public async Task Render_SpansOrderedByStartTime_RowsRenderedInCorrectOrder()
+    {
+        // Arrange
+        SetupTraceDetailsServices();
+
+        var viewport = new ViewportInformation(IsDesktop: true, IsUltraLowHeight: false, IsUltraLowWidth: false);
+
+        var dimensionManager = Services.GetRequiredService<DimensionManager>();
+        dimensionManager.InvokeOnViewportInformationChanged(viewport);
+
+        var telemetryRepository = Services.GetRequiredService<TelemetryRepository>();
+        telemetryRepository.AddTraces(new AddContext(),
+            new RepeatedField<ResourceSpans>
+            {
+                new ResourceSpans
+                {
+                    Resource = CreateResource(),
+                    ScopeSpans =
+                    {
+                        new ScopeSpans
+                        {
+                            Scope = CreateScope(),
+                            Spans =
+                            {
+                                CreateSpan(traceId: "1", spanId: "1-1",
+                                    startTime: s_testTime.AddMinutes(1),
+                                    endTime: s_testTime.AddMinutes(10)),
+                                CreateSpan(traceId: "1", spanId: "2-1",
+                                    startTime: s_testTime.AddMinutes(1),
+                                    endTime: s_testTime.AddMinutes(10),
+                                    parentSpanId: "1-1"),
+                                CreateSpan(traceId: "1", spanId: "3-1",
+                                    startTime: s_testTime.AddMinutes(1),
+                                    endTime: s_testTime.AddMinutes(10),
+                                    parentSpanId: "2-1"),
+                                CreateSpan(traceId: "1", spanId: "3-3",
+                                    startTime: s_testTime.AddMinutes(3),
+                                    endTime: s_testTime.AddMinutes(5),
+                                    parentSpanId: "2-1"),
+                                CreateSpan(traceId: "1", spanId: "3-2",
+                                    startTime: s_testTime.AddMinutes(2),
+                                    endTime: s_testTime.AddMinutes(6),
+                                    parentSpanId: "2-1")
+                            }
+                        }
+                    }
+                }
+            });
+
+        // Act
+        var traceId = Convert.ToHexString(Encoding.UTF8.GetBytes("1"));
+        var cut = RenderComponent<TraceDetail>(builder =>
+        {
+            builder.Add(p => p.TraceId, traceId);
+            builder.AddCascadingValue(viewport);
+        });
+
+        var data = await cut.Instance.GetData(new GridItemsProviderRequest<SpanWaterfallViewModel>());
+
+        // Assert
+        Assert.Collection(data.Items,
+            item => Assert.Equal("Test span. Id: 1-1", item.Span.Name),
+            item => Assert.Equal("Test span. Id: 2-1", item.Span.Name),
+            item => Assert.Equal("Test span. Id: 3-1", item.Span.Name),
+            item => Assert.Equal("Test span. Id: 3-2", item.Span.Name),
+            item => Assert.Equal("Test span. Id: 3-3", item.Span.Name));
+    }
+
+    [Fact]
+    public void ToggleCollapse_SpanStateChanges()
+    {
+        // Arrange
+        SetupTraceDetailsServices();
+
+        var viewport = new ViewportInformation(IsDesktop: true, IsUltraLowHeight: false, IsUltraLowWidth: false);
+        var dimensionManager = Services.GetRequiredService<DimensionManager>();
+        dimensionManager.InvokeOnViewportInformationChanged(viewport);
+
+        var telemetryRepository = Services.GetRequiredService<TelemetryRepository>();
+        telemetryRepository.AddTraces(new AddContext(),
+            new RepeatedField<ResourceSpans>
+            {
+                new ResourceSpans
+                {
+                    Resource = CreateResource(),
+                    ScopeSpans =
+                    {
+                        new ScopeSpans
+                        {
+                            Scope = CreateScope(),
+                            Spans =
+                            {
+                                CreateSpan(traceId: "1", spanId: "1-1",
+                                    startTime: s_testTime.AddMinutes(1),
+                                    endTime: s_testTime.AddMinutes(10)),
+                                CreateSpan(traceId: "1", spanId: "2-1",
+                                    startTime: s_testTime.AddMinutes(5),
+                                    endTime: s_testTime.AddMinutes(10), parentSpanId: "1-1"),
+                                CreateSpan(traceId: "1", spanId: "3-1",
+                                    startTime: s_testTime.AddMinutes(6),
+                                    endTime: s_testTime.AddMinutes(10), parentSpanId: "2-1")
+                            }
+                        }
+                    }
+                }
+            });
+
+        var traceId = Convert.ToHexString(Encoding.UTF8.GetBytes("1"));
+        var cut = RenderComponent<TraceDetail>(builder =>
+        {
+            builder.Add(p => p.TraceId, traceId);
+            builder.AddCascadingValue(viewport);
+        });
+
+        cut.WaitForAssertion(() => Assert.Equal(2, cut.FindAll(".main-grid-expand-button").Count));
+        // Act and assert
+
+        // Collapse the middle span
+        cut.FindAll(".main-grid-expand-button")[1].Click();
+
+        cut.WaitForAssertion(() =>
+        {
+            var expandContainers = cut.FindAll(".main-grid-expand-container");
+            // There should now be two containers since the 3rd level element should now be filtered out
+            Assert.Collection(expandContainers,
+                container => Assert.True(container.ClassList.Contains("main-grid-expanded")),
+                container => Assert.True(container.ClassList.Contains("main-grid-collapsed")));
+        });
+
+        // Collapse the parent span
+        cut.FindAll(".main-grid-expand-button")[0].Click();
+        cut.WaitForAssertion(() =>
+        {
+            var expandContainers = cut.FindAll(".main-grid-expand-container");
+            // There should now be one container since the 2nd level element should now be filtered out
+            Assert.Collection(expandContainers,
+                container => Assert.True(container.ClassList.Contains("main-grid-collapsed")));
+        });
+
+        // Expand the parent span, we should now see the same two containers as before
+        cut.FindAll(".main-grid-expand-button")[0].Click();
+        cut.WaitForAssertion(() =>
+        {
+            var expandContainers = cut.FindAll(".main-grid-expand-container");
+            // There should now be two containers since the 3rd level element should now be filtered out
+            Assert.Collection(expandContainers,
+                container => Assert.True(container.ClassList.Contains("main-grid-expanded")),
+                container => Assert.True(container.ClassList.Contains("main-grid-collapsed")));
+        });
+    }
+
     private void SetupTraceDetailsServices(ILoggerFactory? loggerFactory = null)
     {
         var version = typeof(FluentMain).Assembly.GetName().Version!;

Original file line number	Diff line number	Diff line change
`@@ -79,24 +79,31 @@ protected override void OnInitialized()`
`79`	`79`	`}`
`80`	`80`	`}`
`81`	`81`
`82`		`- private ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridItemsProviderRequest<SpanWaterfallViewModel> request)`
	`82`	`+ // Internal to be used in unit tests`
	`83`	`+ internal ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridItemsProviderRequest<SpanWaterfallViewModel> request)`
`83`	`84`	`{`
`84`	`85`	`Debug.Assert(_spanWaterfallViewModels != null);`
`85`	`86`
`86`	`87`	`var visibleViewModels = new HashSet<SpanWaterfallViewModel>();`
`87`	`88`	`foreach (var viewModel in _spanWaterfallViewModels)`
`88`	`89`	`{`
`89`		`- if (!viewModel.IsHidden && viewModel.MatchesFilter(_filter, GetResourceName, out var matchedDescendents))`
	`90`	`+ if (viewModel.IsHidden \|\| visibleViewModels.Contains(viewModel))`
	`91`	`+ {`
	`92`	`+ continue;`
	`93`	`+ }`
	`94`	`+`
	`95`	`+ if (viewModel.MatchesFilter(_filter, GetResourceName, out var matchedDescendents))`
`90`	`96`	`{`
`91`	`97`	`visibleViewModels.Add(viewModel);`
`92`		`- foreach (var descendent in matchedDescendents)`
	`98`	`+ foreach (var descendent in matchedDescendents.Where(d => !d.IsHidden))`
`93`	`99`	`{`
`94`	`100`	`visibleViewModels.Add(descendent);`
`95`	`101`	`}`
`96`	`102`	`}`
`97`	`103`	`}`
`98`	`104`
`99`		`- var page = visibleViewModels.AsEnumerable();`
	`105`	`+ var page = _spanWaterfallViewModels.Where(visibleViewModels.Contains).AsEnumerable();`
	`106`	`+ var totalItemCount = page.Count();`
`100`	`107`	`if (request.StartIndex > 0)`
`101`	`108`	`{`
`102`	`109`	`page = page.Skip(request.StartIndex);`
`@@ -106,7 +113,7 @@ private ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridI`
`106`	`113`	`return ValueTask.FromResult(new GridItemsProviderResult<SpanWaterfallViewModel>`
`107`	`114`	`{`
`108`	`115`	`Items = page.ToList(),`
`109`		`- TotalItemCount = visibleViewModels.Count`
	`116`	`+ TotalItemCount = totalItemCount`
`110`	`117`	`});`
`111`	`118`	`}`
`112`	`119`
`@@ -242,6 +249,7 @@ private async Task OnToggleCollapse(SpanWaterfallViewModel viewModel)`
`242`	`249`	`_collapsedSpanIds.Add(viewModel.Span.SpanId);`
`243`	`250`	`}`
`244`	`251`
	`252`	`+ UpdateDetailViewData();`
`245`	`253`	`await _dataGrid.SafeRefreshDataAsync();`
`246`	`254`	`}`
`247`	`255`