Change outgoing request to arrow in trace span (#1684)

* Change outgoing request to arrow in trace span, change uninstrumented peer icon to arrow bounce

* change instrumented icon ArrowExportLtr

* update icons

---------

Co-authored-by: Adam Ratzman <adamratzman@microsoft.com>

Author: adamint

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

@@ -56,16 +56,33 @@
                 <FluentDataGrid Class="trace-view-grid" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="SpanWaterfallViewModel" RowClass="@GetRowClass" GridTemplateColumns="2fr 6fr">
                     <TemplateColumn Title="Name">
                         <div class="col-long-content" title="@context.GetTooltip()" @onclick="() => OnShowProperties(context)">
-                            <span class="span-name-container" style="@($"margin-left: {(context.Depth - 1) * 15}px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))};")">
+                            @{
+                                var isServerKind = context.Span.Kind == OtlpSpanKind.Server;
+                                var spanNameContainerStyle = $"margin-left: {(context.Depth - 1) * 15}px;";
+                                if (!isServerKind)
+                                {
+                                    spanNameContainerStyle += $"border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 5px;";
+                                }
+                            }
+                            <span class="span-name-container" style="@spanNameContainerStyle">
+                                @if (isServerKind)
+                                {
+                                    <FluentIcon
+                                        Class="server-request-icon"
+                                        Color="Color.Custom"
+                                        CustomColor="@ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))"
+                                        Icon="Icons.Filled.Size16.Server"/>
+                                }
+
                                 @if (context.IsError)
                                 {
-                                    <FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon" />
+                                    <FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon"/>
                                 }
                                 @GetResourceName(context.Span.Source)
                                 @if (context.HasUninstrumentedPeer)
                                 {
                                     <span class="uninstrumented-peer">
-                                        <FluentIcon Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")" Icon="Icons.Filled.Size16.ArrowCircleRight" Class="uninstrumented-peer-icon" />
+                                        <FluentIcon Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")" Icon="Icons.Filled.Size16.ArrowCircleRight" Class="uninstrumented-peer-icon"/>
                                         @context.UninstrumentedPeer
                                     </span>
                                 }

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

@@ -87,9 +87,6 @@
 }
 
 ::deep .span-name-container {
-    border-left-width: 5px;
-    border-left-style: solid;
-    padding-left: 5px;
     line-height: 28px;
 }
 
@@ -132,7 +129,12 @@
 }
 
 ::deep .uninstrumented-peer {
-    padding-left: 0.5rem;
+    padding-left: 0.25rem;
+}
+
+::deep .server-request-icon {
+    margin-right: 3px;
+    vertical-align: text-bottom;
 }
 
 ::deep .uninstrumented-peer-icon {