Enable Urls to display using FluentIcon

mcumming · mcumming · commit 1589fa18b5ec · 2025-10-24T09:45:21.000-04:00
Added IconName, IconVarient to ResourceUrlAnnotaion and plumbed through.
diff --git a/playground/TestShop/TestShop.AppHost/Program.cs b/playground/TestShop/TestShop.AppHost/Program.cs
@@ -8,7 +8,12 @@
                        .WithDataVolume()
                        .WithPgAdmin(resource =>
                        {
-                           resource.WithUrlForEndpoint("http", u => u.DisplayText = "PG Admin");
+                           resource.WithUrlForEndpoint("http", u =>
+                           {
+                               u.DisplayText = "PG Admin";
+                               u.IconName = "DatabaseStack";
+                               u.IconVariant = IconVariant.Filled;
+                           });
                        })
                        .AddDatabase("catalogdb");
 
diff --git a/src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor b/src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor
@@ -45,7 +45,7 @@ else if (DisplayedUrls.Count > 1)
                             {
                                 var d = (DisplayedUrl)item.Data!;
                                 <div class="url-link">
-                                    @WriteUrl(d)
+                                    @WriteUrl(d, displayLabel: true)
                                 </div>
                             }
                         </div>
@@ -62,10 +62,18 @@ else if (DisplayedUrls.Count > 1)
 }
 
 @code {
-    RenderFragment WriteUrl(DisplayedUrl displayedUrl)
+    RenderFragment WriteUrl(DisplayedUrl displayedUrl, bool displayLabel = false)
     {
         if (displayedUrl.Url != null)
         {
+            if (string.IsNullOrWhiteSpace(displayedUrl.IconName) == false && IconResolver.ResolveIconName(displayedUrl.IconName, IconSize.Size16, iconVariant: displayedUrl.IconVariant) is { } icon)
+            {
+                return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >
+                            <FluentIcon Value="@icon" Width="16px" Title="@displayedUrl.Text" />
+                        </FluentButton>;
+            }
+            //<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">
+
             return @<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">@displayedUrl.Text</a>;
         }
         else
diff --git a/src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor.cs b/src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor.cs
@@ -5,6 +5,7 @@
 using Aspire.Dashboard.Resources;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using Microsoft.JSInterop;
 
 namespace Aspire.Dashboard.Components;
 
@@ -25,5 +26,14 @@ public partial class UrlsColumnDisplay
     [Inject]
     public required IStringLocalizer<Columns> Loc { get; init; }
 
+    [Inject]
+    public required IconResolver IconResolver { get; init; }
+
+    [Inject]
+    public required NavigationManager NavigationManager { get; init; }
+
+    [Inject]
+    public required IJSRuntime JSRuntime { get; init; }
+    
     private bool _popoverVisible;
 }
diff --git a/src/Aspire.Dashboard/Model/ResourceUrlHelpers.cs b/src/Aspire.Dashboard/Model/ResourceUrlHelpers.cs
@@ -3,6 +3,7 @@
 
 using System.Diagnostics;
 using Aspire.Dashboard.Components.Controls;
+using Microsoft.FluentUI.AspNetCore.Components;
 
 namespace Aspire.Dashboard.Model;
 
@@ -51,7 +52,9 @@ public static List<DisplayedUrl> GetUrls(ResourceViewModel resource, bool includ
                     SortOrder = url.DisplayProperties.SortOrder,
                     DisplayName = string.IsNullOrEmpty(url.DisplayProperties.DisplayName) ? null : url.DisplayProperties.DisplayName,
                     OriginalUrlString = url.Url.OriginalString,
-                    Text = string.IsNullOrEmpty(url.DisplayProperties.DisplayName) ? url.Url.OriginalString : url.DisplayProperties.DisplayName
+                    Text = string.IsNullOrEmpty(url.DisplayProperties.DisplayName) ? url.Url.OriginalString : url.DisplayProperties.DisplayName,
+                    IconName = url.DisplayProperties.IconName,
+                    IconVariant = url.DisplayProperties.IconVariant,
                 });
                 index++;
             }
@@ -86,6 +89,9 @@ public sealed class DisplayedUrl : IPropertyGridItem
     public string? DisplayName { get; set; }
     public required string OriginalUrlString { get; set; }
 
+    public string? IconName { get; set; }
+    public IconVariant? IconVariant { get; set; }
+
     /// <summary>
     /// Don't display a plain string value here. The URL will be displayed as a hyperlink
     /// in <see cref="ResourceDetails.RenderAddressValue(DisplayedUrl, string)"/> instead.
diff --git a/src/Aspire.Dashboard/Model/ResourceViewModel.cs b/src/Aspire.Dashboard/Model/ResourceViewModel.cs
@@ -428,9 +428,9 @@ public UrlViewModel(string? endpointName, Uri url, bool isInternal, bool isInact
     }
 }
 
-public record UrlDisplayPropertiesViewModel(string DisplayName, int SortOrder)
+public record UrlDisplayPropertiesViewModel(string DisplayName, int SortOrder, string? IconName, IconVariant? IconVariant)
 {
-    public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0);
+    public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, (IconVariant)(-1));
 }
 
 public sealed record class VolumeViewModel(int index, string Source, string Target, string MountType, bool IsReadOnly) : IPropertyGridItem
diff --git a/src/Aspire.Dashboard/ServiceClient/Partials.cs b/src/Aspire.Dashboard/ServiceClient/Partials.cs
@@ -98,11 +98,21 @@ static string TranslateKnownUrlName(Url url)
                 };
             }
 
+            static FluentUIIconVariant MapIconVariant(IconVariant iconVariant)
+            {
+                return iconVariant switch
+                {
+                    IconVariant.Regular => FluentUIIconVariant.Regular,
+                    IconVariant.Filled => FluentUIIconVariant.Filled,
+                    _ => throw new InvalidOperationException("Unknown icon variant: " + iconVariant),
+                };
+            }
+
             // Filter out bad urls
             return (from u in Urls
                     let parsedUri = Uri.TryCreate(u.FullUrl, UriKind.Absolute, out var uri) ? uri : null
                     where parsedUri != null
-                    select new UrlViewModel(u.EndpointName, parsedUri, u.IsInternal, u.IsInactive, new UrlDisplayPropertiesViewModel(TranslateKnownUrlName(u), u.DisplayProperties.SortOrder)))
+                    select new UrlViewModel(u.EndpointName, parsedUri, u.IsInternal, u.IsInactive, new UrlDisplayPropertiesViewModel(TranslateKnownUrlName(u), u.DisplayProperties.SortOrder, u.DisplayProperties.IconName, MapIconVariant(u.DisplayProperties.IconVariant))))
                 .ToImmutableArray();
         }
 
diff --git a/src/Aspire.Hosting/ApplicationModel/CustomResourceSnapshot.cs b/src/Aspire.Hosting/ApplicationModel/CustomResourceSnapshot.cs
@@ -228,7 +228,10 @@ internal void Deconstruct(out string? name, out string url, out bool isInternal,
 /// </summary>
 /// <param name="DisplayName">The display name of the url.</param>
 /// <param name="SortOrder">The order of the url in UI. Higher numbers are displayed first in the UI.</param>
-public sealed record UrlDisplayPropertiesSnapshot(string DisplayName = "", int SortOrder = 0);
+/// <param name="IconName">The icon name for the Url. The name should be a valid FluentUI icon name. https://aka.ms/fluentui-system-icons</param>
+/// <param name="IconVariant">The icon variant.</param>
+/// 
+public sealed record UrlDisplayPropertiesSnapshot(string DisplayName = "", int SortOrder = 0, string? IconName = null, IconVariant? IconVariant = null);
 
 /// <summary>
 /// A snapshot of a volume, mounted to a container.
diff --git a/src/Aspire.Hosting/ApplicationModel/ResourceUrlAnnotation.cs b/src/Aspire.Hosting/ApplicationModel/ResourceUrlAnnotation.cs
@@ -36,6 +36,16 @@ public sealed class ResourceUrlAnnotation : IResourceAnnotation
     /// </summary>
     public UrlDisplayLocation DisplayLocation { get; set; } = UrlDisplayLocation.SummaryAndDetails;
 
+    /// <summary>
+    /// The name of the icon to display with this URL.
+    /// </summary>
+    public string IconName { get; set; } = string.Empty;
+    
+    /// <summary>
+    /// The variant of the icon to display with this URL.
+    /// </summary>
+    public IconVariant IconVariant { get; set; } = IconVariant.Regular;
+
     internal bool IsInternal => DisplayLocation == UrlDisplayLocation.DetailsOnly;
 
     internal ResourceUrlAnnotation WithEndpoint(EndpointReference endpoint)
@@ -46,7 +56,7 @@ internal ResourceUrlAnnotation WithEndpoint(EndpointReference endpoint)
             DisplayText = DisplayText,
             Endpoint = endpoint,
             DisplayOrder = DisplayOrder,
-            DisplayLocation = DisplayLocation
+            DisplayLocation = DisplayLocation,
         };
     }
 }
diff --git a/src/Aspire.Hosting/Dashboard/proto/Partials.cs b/src/Aspire.Hosting/Dashboard/proto/Partials.cs
@@ -66,6 +66,16 @@ public static Resource FromSnapshot(ResourceSnapshot snapshot)
                 displayProperties.SortOrder = urlSnapshot.DisplayProperties.SortOrder;
             }
 
+            if (urlSnapshot.DisplayProperties?.IconName is not null)
+            {
+                displayProperties.IconName = urlSnapshot.DisplayProperties.IconName;
+            }
+
+            if (urlSnapshot.DisplayProperties?.IconVariant is not null)
+            {
+                displayProperties.IconVariant = MapIconVariant(urlSnapshot.DisplayProperties.IconVariant);
+            }
+            
             url.DisplayProperties = displayProperties;
             resource.Urls.Add(url);
         }
diff --git a/src/Aspire.Hosting/Dashboard/proto/dashboard_service.proto b/src/Aspire.Hosting/Dashboard/proto/dashboard_service.proto
@@ -143,6 +143,11 @@ message UrlDisplayProperties {
   int32 sort_order = 1;
   // The display name of the url, to appear in the UI.
   string display_name = 2;
+  // Optional icon name. This name should be a valid FluentUI icon name.
+  // https://aka.ms/fluentui-system-icons
+  optional string icon_name = 3;
+  // Optional icon variant.
+  optional IconVariant icon_variant = 4;
 }
 
 // Data about a volume mounted to a container.
diff --git a/src/Aspire.Hosting/Dcp/ResourceSnapshotBuilder.cs b/src/Aspire.Hosting/Dcp/ResourceSnapshotBuilder.cs
@@ -255,15 +255,15 @@ private ImmutableArray<UrlSnapshot> GetUrls(CustomResource resource, string? res
                     var activeEndpoint = _resourceState.EndpointsMap.SingleOrDefault(e => e.Value.Spec.ServiceName == serviceName && e.Value.Metadata.OwnerReferences?.Any(or => or.Kind == resource.Kind && or.Name == name) == true).Value;
                     var isInactive = activeEndpoint is null;
 
-                    urls.Add(new(Name: endpointUrl.Endpoint!.EndpointName, Url: endpointUrl.Url, IsInternal: endpointUrl.IsInternal) { IsInactive = isInactive, DisplayProperties = new(endpointUrl.DisplayText ?? "", endpointUrl.DisplayOrder ?? 0) });
+                    urls.Add(new(Name: endpointUrl.Endpoint!.EndpointName, Url: endpointUrl.Url, IsInternal: endpointUrl.IsInternal) { IsInactive = isInactive, DisplayProperties = new(endpointUrl.DisplayText ?? "", endpointUrl.DisplayOrder ?? 0, endpointUrl.IconName, endpointUrl.IconVariant) });
                 }
             }
 
             // Add the non-endpoint URLs
             var resourceRunning = string.Equals(resourceState, KnownResourceStates.Running, StringComparisons.ResourceState);
             foreach (var url in nonEndpointUrls)
             {
-                urls.Add(new(Name: null, Url: url.Url, IsInternal: url.IsInternal) { IsInactive = !resourceRunning, DisplayProperties = new(url.DisplayText ?? "", url.DisplayOrder ?? 0) });
+                urls.Add(new(Name: null, Url: url.Url, IsInternal: url.IsInternal) { IsInactive = !resourceRunning, DisplayProperties = new(url.DisplayText ?? "", url.DisplayOrder ?? 0, url.IconName, url.IconVariant) });
             }
         }
 
diff --git a/src/Aspire.Hosting/Orchestrator/ApplicationOrchestrator.cs b/src/Aspire.Hosting/Orchestrator/ApplicationOrchestrator.cs
@@ -147,7 +147,7 @@ private static IEnumerable<UrlSnapshot> GetResourceUrls(IResource resource)
                 // Endpoint URLs are inactive (hidden in the dashboard) when published here. It is assumed they will get activated later when the endpoint is considered active
                 // by whatever allocated the endpoint in the first place, e.g. for resources controlled by DCP, when DCP detects the endpoint is listening.
                 IsInactive = url.Endpoint is not null,
-                DisplayProperties = new(url.DisplayText ?? "", url.DisplayOrder ?? 0)
+                DisplayProperties = new(url.DisplayText ?? "", url.DisplayOrder ?? 0, url.IconName, url.IconVariant)
             });
         }
         return urls;

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ else if (DisplayedUrls.Count > 1)`
`45`	`45`	`{`
`46`	`46`	`var d = (DisplayedUrl)item.Data!;`
`47`	`47`	`<div class="url-link">`
`48`		`- @WriteUrl(d)`
	`48`	`+ @WriteUrl(d, displayLabel: true)`
`49`	`49`	`</div>`
`50`	`50`	`}`
`51`	`51`	`</div>`
`@@ -62,10 +62,18 @@ else if (DisplayedUrls.Count > 1)`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`@code {`
`65`		`- RenderFragment WriteUrl(DisplayedUrl displayedUrl)`
	`65`	`+ RenderFragment WriteUrl(DisplayedUrl displayedUrl, bool displayLabel = false)`
`66`	`66`	`{`
`67`	`67`	`if (displayedUrl.Url != null)`
`68`	`68`	`{`
	`69`	`+ if (string.IsNullOrWhiteSpace(displayedUrl.IconName) == false && IconResolver.ResolveIconName(displayedUrl.IconName, IconSize.Size16, iconVariant: displayedUrl.IconVariant) is { } icon)`
	`70`	`+ {`
	`71`	`+ return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >`
	`72`	`+ <FluentIcon Value="@icon" Width="16px" Title="@displayedUrl.Text" />`
	`73`	`+ </FluentButton>;`
	`74`	`+ }`
	`75`	`+ //<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">`
	`76`	`+`
`69`	`77`	`return @<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">@displayedUrl.Text</a>;`
`70`	`78`	`}`
`71`	`79`	`else`
Original file line number	Diff line number	Diff line change
`@@ -428,9 +428,9 @@ public UrlViewModel(string? endpointName, Uri url, bool isInternal, bool isInact`
`428`	`428`	`}`
`429`	`429`	`}`
`430`	`430`
`431`		`-public record UrlDisplayPropertiesViewModel(string DisplayName, int SortOrder)`
	`431`	`+public record UrlDisplayPropertiesViewModel(string DisplayName, int SortOrder, string? IconName, IconVariant? IconVariant)`
`432`	`432`	`{`
`433`		`- public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0);`
	`433`	`+ public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, (IconVariant)(-1));`
`434`	`434`	`}`
`435`	`435`
`436`	`436`	`public sealed record class VolumeViewModel(int index, string Source, string Target, string MountType, bool IsReadOnly) : IPropertyGridItem`