diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor index aee0711f2ee..62321c1058a 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor @@ -57,13 +57,13 @@
@{ - var isServerKind = context.Span.Kind == OtlpSpanKind.Server; + var isServerOrConsumer = context.Span.Kind == OtlpSpanKind.Server || context.Span.Kind == OtlpSpanKind.Consumer; // Indent the span name based on the depth of the span. var marginLeft = (context.Depth - 1) * 15; // We want to have consistent margin for both client and server spans. string spanNameContainerStyle; - if (!isServerKind) + if (!isServerOrConsumer) { // Client span has 19px extra content: // - 5px extra margin-left @@ -73,7 +73,7 @@ } else { - // Server span has 19px extra content: + // Span with icon has 19px extra content: // - 16px icon // - 3px padding-left spanNameContainerStyle = string.Empty; @@ -88,12 +88,12 @@ } - @if (isServerKind) + @if (isServerOrConsumer) { - + Value="@GetSpanIcon(context.Span)" /> } @if (context.IsError) diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs index 639398a750f..e8ae0a02387 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs @@ -57,6 +57,26 @@ private ValueTask> GetData(GridI }); } + private static Icon GetSpanIcon(OtlpSpan span) + { + switch (span.Kind) + { + case OtlpSpanKind.Server: + return new Icons.Filled.Size16.Server(); + case OtlpSpanKind.Consumer: + if (span.Attributes.HasKey("messaging.system")) + { + return new Icons.Filled.Size16.Mailbox(); + } + else + { + return new Icons.Filled.Size16.ContentSettings(); + } + default: + throw new InvalidOperationException($"Unsupported span kind when resolving icon: {span.Kind}"); + } + } + private static List CreateSpanWaterfallViewModels(OtlpTrace trace, TraceDetailState state) { var orderedSpans = new List(); diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css index edb40577a8f..56a7933eb9d 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css @@ -133,7 +133,7 @@ padding-left: 0.25rem; } -::deep .server-request-icon { +::deep .span-kind-icon { margin-right: 3px; vertical-align: text-bottom; }