Enable Urls to display using FluentIcon

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");
 

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" AriaLabel="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >
+                            <FluentIcon Value="@icon" Width="16px" Title="@displayedUrl.Text" />
+                        </FluentButton>;
+            }
+
+
             return @<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">@displayedUrl.Text</a>;
         }
         else

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;
 }

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.

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, null);
 }
 
 public sealed record class VolumeViewModel(int index, string Source, string Target, string MountType, bool IsReadOnly) : IPropertyGridItem

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();
         }
 

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.

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; }
+
+    /// <summary>
+    /// The variant of the icon to display with this URL.
+    /// </summary>
+    public IconVariant? IconVariant { get; set; }
+
     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,
         };
     }
 }

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);
         }

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.

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) });
             }
         }
 

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;

tests/Aspire.Dashboard.Tests/Model/ResourceUrlHelpersTests.cs

@@ -244,10 +244,10 @@
     public void GetUrls_SortOrder_Combinations()
     {
         var endpoints = GetUrls(ModelTestHelpers.CreateResource(urls: [
-            new("Zero-Https", new("https://localhost:8079"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 0)),
-            new("Zero-Http", new("http://localhost:8080"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 0)),
-            new("Positive", new("http://localhost:8082"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 1)),
-            new("Negative", new("http://localhost:8083"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, -1))
+            new("Zero-Https", new("https://localhost:8079"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 0, null, null)),
+            new("Zero-Http", new("http://localhost:8080"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 0 null, null)),
+            new("Positive", new("http://localhost:8082"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, 1 null, null)),
+            new("Negative", new("http://localhost:8083"), isInternal: false, isInactive: false, displayProperties: new UrlDisplayPropertiesViewModel(string.Empty, -1 null, null))
         ]));
 
         Assert.Collection(endpoints,