Add more icons to dashboard property values (#10767)

JamesNK · Copilot · web-flow · commit 0b5fd1fd65e5 · 2025-07-31T13:02:20.000-04:00
* Add more icons to dashboard property values

* More

* Update src/Aspire.Dashboard/Model/TraceHelpers.cs

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;

* Relationship icons

---------

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyValues/ResourceNameValue.razor.cs b/src/Aspire.Dashboard/Components/Controls/PropertyValues/ResourceNameValue.razor.cs
@@ -11,8 +11,8 @@ public partial class ResourceNameValue
     [Parameter, EditorRequired]
     public required string Value { get; set; }
 
-    [Parameter, EditorRequired]
-    public required string HighlightText { get; set; }
+    [Parameter]
+    public string? HighlightText { get; set; }
 
     [Parameter, EditorRequired]
     public required ResourceViewModel Resource { get; set; }
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanIdValue.razor b/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanIdValue.razor
@@ -0,0 +1,7 @@
+﻿@using Aspire.Dashboard.Utils
+
+@* Do this to trim significant whitespace so there isn't a space added between icon and text *@
+@{
+    <FluentIcon Icon="Icons.Regular.Size16.GanttChart" Color="Color.Neutral" Class="severity-icon" />
+}
+<FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanIdValue.razor.cs b/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanIdValue.razor.cs
@@ -0,0 +1,15 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Microsoft.AspNetCore.Components;
+
+namespace Aspire.Dashboard.Components.Controls.PropertyValues;
+
+public partial class SpanIdValue
+{
+    [Parameter, EditorRequired]
+    public required string Value { get; set; }
+
+    [Parameter, EditorRequired]
+    public required string HighlightText { get; set; }
+}
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanKindValue.razor b/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanKindValue.razor
@@ -0,0 +1,8 @@
+﻿@using Aspire.Dashboard.Utils
+
+@if (_icon != null)
+{
+    <FluentIcon Value="@_icon" Color="Color.Neutral" Class="severity-icon" />
+}
+
+<FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanKindValue.razor.cs b/src/Aspire.Dashboard/Components/Controls/PropertyValues/SpanKindValue.razor.cs
@@ -0,0 +1,28 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Otlp.Model;
+using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components;
+
+namespace Aspire.Dashboard.Components.Controls.PropertyValues;
+
+public partial class SpanKindValue
+{
+    private Icon? _icon;
+
+    [Parameter, EditorRequired]
+    public required string Value { get; set; }
+
+    [Parameter, EditorRequired]
+    public required string HighlightText { get; set; }
+
+    [Parameter, EditorRequired]
+    public required OtlpSpan Span { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        _icon = TraceHelpers.TryGetSpanIcon(Span, IconVariant.Regular);
+    }
+}
diff --git a/src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor b/src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor
@@ -1,4 +1,5 @@
 ﻿@using Aspire.Dashboard.Components.Controls.Grid
+@using Aspire.Dashboard.Components.Controls.PropertyValues
 @using Aspire.Dashboard.Model
 @using Aspire.Dashboard.Resources
 @using Aspire.Dashboard.Utils
@@ -165,13 +166,13 @@
                                 GridTemplateColumns="1fr 1fr 0.5fr"
                                 ShowHover="true">
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ResourceDetailsResourceHeader)]">
-                        @context.ResourceName
+                        <ResourceNameValue Resource="@context.Resource" Value="@context.ResourceName" FormatName="@FormatName" />
                     </TemplateColumn>
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ResourceDetailsTypeHeader)]" TooltipText="@(c => string.Join(", ", c.Types))">
                         @string.Join(", ", context.Types)
                     </TemplateColumn>
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]" Class="no-ellipsis">
-                        <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => OnViewRelationshipAsync(context))">@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
+                        <FluentButton Appearance="Appearance.Lightweight" Class="button-hyperlink-no-icon" OnClick="@(() => OnViewRelationshipAsync(context))">@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
                     </TemplateColumn>
                 </FluentDataGrid>
             </FluentAccordionItem>
@@ -194,13 +195,13 @@
                                 GridTemplateColumns="1fr 1fr 0.5fr"
                                 ShowHover="true">
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ResourceDetailsResourceHeader)]">
-                        @context.ResourceName
+                        <ResourceNameValue Resource="@context.Resource" Value="@context.ResourceName" FormatName="@FormatName" />
                     </TemplateColumn>
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ResourceDetailsTypeHeader)]" TooltipText="@(c => string.Join(", ", c.Types))">
                         @string.Join(", ", context.Types)
                     </TemplateColumn>
                     <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]" Class="no-ellipsis">
-                        <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => OnViewRelationshipAsync(context))">@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
+                        <FluentButton Appearance="Appearance.Lightweight" Class="button-hyperlink-no-icon" OnClick="@(() => OnViewRelationshipAsync(context))">@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
                     </TemplateColumn>
                 </FluentDataGrid>
             </FluentAccordionItem>
diff --git a/src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor.cs b/src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor.cs
@@ -158,7 +158,7 @@ protected override void OnParametersSet()
                 [KnownProperties.Resource.DisplayName] = new ComponentMetadata
                 {
                     Type = typeof(ResourceNameValue),
-                    Parameters = { ["Resource"] = _resource, ["FormatName"] = (ResourceViewModel r) => ResourceViewModel.GetResourceName(r, ResourceByName) }
+                    Parameters = { ["Resource"] = _resource, ["FormatName"] = new Func<ResourceViewModel, string>(FormatName) }
                 },
                 [KnownProperties.Resource.HealthState] = new ComponentMetadata
                 {
@@ -293,6 +293,11 @@ private void OnValueMaskedChanged(IPropertyGridItem vm)
         }
     }
 
+    private string FormatName(ResourceViewModel resource)
+    {
+        return ResourceViewModel.GetResourceName(resource, ResourceByName);
+    }
+
     public Task OnViewRelationshipAsync(ResourceDetailRelationshipViewModel relationship)
     {
         NavigationManager.NavigateTo(DashboardUrls.ResourcesUrl(resource: relationship.Resource.Name));
diff --git a/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor b/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor
@@ -116,7 +116,9 @@
                         @WriteSpanLink(context)
                     </TemplateColumn>
                     <TemplateColumn Title="@Loc[nameof(ControlsStrings.SpanDetailsDetailsColumnHeader)]">
-                        <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => OnViewDetailsAsync(context))">@Loc[nameof(ControlsStrings.ViewAction)]</FluentButton>
+                        <FluentButton OnClick="@(() => OnViewDetailsAsync(context))" Appearance="Appearance.Lightweight" Class="button-hyperlink" IconStart="new Icons.Regular.Size16.GanttChart()">
+                            @OtlpHelpers.ToShortenedId(context.SpanId)
+                        </FluentButton>
                     </TemplateColumn>
                 </FluentDataGrid>
             </FluentAccordionItem>
@@ -142,7 +144,9 @@
                         @WriteSpanLink(context)
                     </TemplateColumn>
                     <TemplateColumn Title="@Loc[nameof(ControlsStrings.SpanDetailsDetailsColumnHeader)]">
-                        <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => OnViewDetailsAsync(context))">@Loc[nameof(ControlsStrings.ViewAction)]</FluentButton>
+                        <FluentButton OnClick="@(() => OnViewDetailsAsync(context))" Appearance="Appearance.Lightweight" Class="button-hyperlink" IconStart="new Icons.Regular.Size16.GanttChart()">
+                            @OtlpHelpers.ToShortenedId(context.SpanId)
+                        </FluentButton>
                     </TemplateColumn>
                 </FluentDataGrid>
             </FluentAccordionItem>
diff --git a/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor.cs b/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor.cs
@@ -140,6 +140,15 @@ protected override void OnParametersSet()
                     Type = typeof(SpanStatusValue),
                     Parameters = { ["Span"] = _viewModel.Span }
                 },
+                [KnownTraceFields.KindField] = new ComponentMetadata
+                {
+                    Type = typeof(SpanKindValue),
+                    Parameters = { ["Span"] = _viewModel.Span }
+                },
+                [KnownTraceFields.SpanIdField] = new ComponentMetadata
+                {
+                    Type = typeof(SpanIdValue)
+                },
             };
         }
     }
diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
@@ -152,7 +152,7 @@
                                                 <FluentIcon Class="span-kind-icon"
                                                             Color="Color.Custom"
                                                             CustomColor="@ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))"
-                                                            Value="@GetSpanIcon(context.Span)"/>
+                                                            Value="@TraceHelpers.TryGetSpanIcon(context.Span, IconVariant.Filled)"/>
                                             }
 
                                             @if (context.IsError)
diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs
@@ -15,7 +15,6 @@
 using Microsoft.Extensions.Localization;
 using Microsoft.FluentUI.AspNetCore.Components;
 using Microsoft.JSInterop;
-using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Components.Pages;
 
@@ -149,26 +148,6 @@ internal ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(Grid
         return $"{GetResourceName(headerSpan.Source)}: {headerSpan.Name}";
     }
 
-    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}");
-        }
-    }
-
     protected override async Task OnParametersSetAsync()
     {
         if (TraceId != _trace?.TraceId)
diff --git a/src/Aspire.Dashboard/Model/TraceHelpers.cs b/src/Aspire.Dashboard/Model/TraceHelpers.cs
@@ -2,6 +2,8 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using Aspire.Dashboard.Otlp.Model;
+using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Model;
 
@@ -90,6 +92,60 @@ private static void ProcessSpanApp(OtlpSpan span, OtlpApplication application, D
                 new OrderedApplication(application, appFirstTimes.Count, currentMinDate, totalSpans: 1, erroredSpans: span.Status == OtlpSpanStatusCode.Error ? 1 : 0));
         }
     }
+
+    private static readonly Icon s_serverFilled = new Icons.Filled.Size16.Server();
+    private static readonly Icon s_serverRegular = new Icons.Regular.Size16.Server();
+
+    private static readonly Icon s_mailboxFilled = new Icons.Filled.Size16.Mailbox();
+    private static readonly Icon s_mailboxRegular = new Icons.Regular.Size16.Mailbox();
+
+    private static readonly Icon s_contentSettingsFilled = new Icons.Filled.Size16.ContentSettings();
+    private static readonly Icon s_contentSettingsRegular = new Icons.Regular.Size16.ContentSettings();
+
+    private static readonly Icon s_mailFilled = new Icons.Filled.Size16.Mail();
+    private static readonly Icon s_mailRegular = new Icons.Regular.Size16.Mail();
+
+    private static readonly Icon s_boxFilled = new Icons.Filled.Size16.Box();
+    private static readonly Icon s_boxRegular = new Icons.Regular.Size16.Box();
+
+    public static Icon? TryGetSpanIcon(OtlpSpan span, IconVariant iconVariant)
+    {
+        switch (span.Kind)
+        {
+            case OtlpSpanKind.Server:
+                return GetIcon(s_serverRegular, s_serverFilled, iconVariant);
+            case OtlpSpanKind.Consumer:
+                if (span.Attributes.HasKey("messaging.system"))
+                {
+                    return GetIcon(s_mailboxRegular, s_mailboxFilled, iconVariant);
+                }
+                else
+                {
+                    return GetIcon(s_contentSettingsRegular, s_contentSettingsFilled, iconVariant);
+                }
+            case OtlpSpanKind.Producer:
+                if (span.Attributes.HasKey("messaging.system"))
+                {
+                    return GetIcon(s_mailRegular, s_mailFilled, iconVariant);
+                }
+                else
+                {
+                    return GetIcon(s_boxRegular, s_boxFilled, iconVariant);
+                }
+            default:
+                return null;
+        }
+
+        static Icon GetIcon(Icon regular, Icon filled, IconVariant iconVariant)
+        {
+            return iconVariant switch
+            {
+                IconVariant.Filled => filled,
+                IconVariant.Regular => regular,
+                _ => throw new ArgumentOutOfRangeException(nameof(iconVariant), iconVariant, $"Unsupported icon variant: {iconVariant}")
+            };
+        }
+    }
 }
 
 public sealed class OrderedApplication(OtlpApplication application, int index, DateTime firstDateTime, int totalSpans, int erroredSpans)
diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css
@@ -325,7 +325,7 @@ td .long-inner-content {
     flex-grow: 0;
 }
 
-.button-hyperlink::part(control) {
+.button-hyperlink::part(control), .button-hyperlink-no-icon::part(control) {
     padding: 0;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ protected override void OnParametersSet()`
`158`	`158`	`[KnownProperties.Resource.DisplayName] = new ComponentMetadata`
`159`	`159`	`{`
`160`	`160`	`Type = typeof(ResourceNameValue),`
`161`		`- Parameters = { ["Resource"] = _resource, ["FormatName"] = (ResourceViewModel r) => ResourceViewModel.GetResourceName(r, ResourceByName) }`
	`161`	`+ Parameters = { ["Resource"] = _resource, ["FormatName"] = new Func<ResourceViewModel, string>(FormatName) }`
`162`	`162`	`},`
`163`	`163`	`[KnownProperties.Resource.HealthState] = new ComponentMetadata`
`164`	`164`	`{`
`@@ -293,6 +293,11 @@ private void OnValueMaskedChanged(IPropertyGridItem vm)`
`293`	`293`	`}`
`294`	`294`	`}`
`295`	`295`
	`296`	`+ private string FormatName(ResourceViewModel resource)`
	`297`	`+ {`
	`298`	`+ return ResourceViewModel.GetResourceName(resource, ResourceByName);`
	`299`	`+ }`
	`300`	`+`
`296`	`301`	`public Task OnViewRelationshipAsync(ResourceDetailRelationshipViewModel relationship)`
`297`	`302`	`{`
`298`	`303`	`NavigationManager.NavigateTo(DashboardUrls.ResourcesUrl(resource: relationship.Resource.Name));`
Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@`
`152`	`152`	`<FluentIcon Class="span-kind-icon"`
`153`	`153`	`Color="Color.Custom"`
`154`	`154`	`CustomColor="@ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))"`
`155`		`- Value="@GetSpanIcon(context.Span)"/>`
	`155`	`+ Value="@TraceHelpers.TryGetSpanIcon(context.Span, IconVariant.Filled)"/>`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`@if (context.IsError)`