Custom URLs improvements (#8743)

* Custom URLs improvements

- Control whether URL is visible on resources page or not
- Add helper method to get resource endpoint from ResourceUrlsCallbackContext
- Support relative URLs for endpoints
- Add overload of WithUrlForEndpoint for adding extra endpoint URLs

Fixes #8725, #8636, #8640, #8638, #6454

* Update tests

* Fix test name

* Always handle relative endpoint URLs

* Use enum for URL display location

Author: DamianEdwards

playground/TestShop/TestShop.AppHost/Program.cs

@@ -66,7 +66,12 @@
        .WithExternalHttpEndpoints()
        .WithReference(basketService)
        .WithReference(catalogService)
-       .WithUrls(c => c.Urls.ForEach(u => u.DisplayText = $"Online store ({u.Endpoint?.EndpointName})"));
+       // Modify the display text of the URLs
+       .WithUrls(c => c.Urls.ForEach(u => u.DisplayText = $"Online store ({u.Endpoint?.EndpointName})"))
+       // Don't show the non-HTTPS link on the resources page (details only)
+       .WithUrlForEndpoint("http", url => url.DisplayLocation = UrlDisplayLocation.DetailsOnly)
+       // Add health relative URL (show in details only)
+       .WithUrlForEndpoint("https", ep => new() { Url = "/health", DisplayText = "Health", DisplayLocation = UrlDisplayLocation.DetailsOnly });
 
 var _ = frontend.GetEndpoint("https").Exists ? frontend.WithHttpsHealthCheck("/health") : frontend.WithHttpHealthCheck("/health");
 

src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor

@@ -74,17 +74,25 @@
                                 ResizeType="DataGridResizeType.Discrete"
                                 Style="width:100%"
                                 RowSize="DataGridRowSize.Medium"
-                                GridTemplateColumns="1fr 1.5fr"
+                                GridTemplateColumns="1fr 1fr 0.5fr"
                                 ShowHover="true">
-                    <AspireTemplateColumn Sortable="true" SortBy="@_urlValueSort" Title="@ControlStringsLoc[nameof(ControlsStrings.LinkColumnHeader)]">
-                        <GridValue ValueDescription="@ControlStringsLoc[nameof(ControlsStrings.LinkColumnHeader)]"
+                    <AspireTemplateColumn Sortable="true" SortBy="@_urlValueSort" Title="@ControlStringsLoc[nameof(ControlsStrings.LinkAddressColumnHeader)]">
+                        <GridValue ValueDescription="@ControlStringsLoc[nameof(ControlsStrings.LinkAddressColumnHeader)]"
                                    Value="@context.OriginalUrlString"
                                    ValueTemplate="@(_ => RenderUrlValue(context, _filter))"
                                    EnableHighlighting="@(!string.IsNullOrEmpty(_filter))"
                                    IsMaskedChanged="@(_ => OnValueMaskedChanged(context))"
                                    HighlightText="@_filter" />
                     </AspireTemplateColumn>
-                                <AspireTemplateColumn Sortable="true" SortBy="@(GridSort<DisplayedUrl>.ByAscending(i => i.DisplayName))" Title="@ControlStringsLoc[nameof(ControlsStrings.EndpointNameColumnHeader)]">
+                    <AspireTemplateColumn Sortable="true" SortBy="@_urlValueSort" Title="@ControlStringsLoc[nameof(ControlsStrings.LinkTextColumnHeader)]">
+                        <GridValue ValueDescription="@ControlStringsLoc[nameof(ControlsStrings.LinkTextColumnHeader)]"
+                                   Value="@context.Text"
+                                   ValueTemplate="@(_ => RenderTextValue(context, _filter))"
+                                   EnableHighlighting="@(!string.IsNullOrEmpty(_filter))"
+                                   IsMaskedChanged="@(_ => OnValueMaskedChanged(context))"
+                                   HighlightText="@_filter" />
+                    </AspireTemplateColumn>
+                    <AspireTemplateColumn Sortable="true" SortBy="@(GridSort<DisplayedUrl>.ByAscending(i => i.DisplayName))" Title="@ControlStringsLoc[nameof(ControlsStrings.EndpointNameColumnHeader)]">
                         <GridValue ValueDescription="@ControlStringsLoc[nameof(ControlsStrings.EndpointNameColumnHeader)]"
                                    Value="@context.Name"
                                    EnableHighlighting="@(!string.IsNullOrEmpty(_filter) && context.Name != "-")"
@@ -292,15 +300,26 @@
             }
             return @<span>@vm.Text</span>;
         }
-        // If the URL and text are the same, render a link for the URL
-        else if (string.Equals(vm.Url, vm.Text, StringComparison.Ordinal))
+        // Otherwise, render a link for the URL
+        else
         {
             if (highlighting)
             {
                 return @<a href="@vm.Url" target="_blank"><FluentHighlighter HighlightedText="@filter" Text="@vm.Url" /></a>;
             }
             return @<a href="@vm.Url" target="_blank">@vm.Url</a>;
         }
+    }
+
+    private static RenderFragment RenderTextValue(DisplayedUrl vm, string filter)
+    {
+        var highlighting = !string.IsNullOrEmpty(filter) && vm.Text != "-";
+
+        // If there's no URL, e.g. this is a tcp:// URI, show nothing, or URL is same as Text, then show nothing
+        if (vm.Url is null || string.Equals(vm.Url, vm.Text, StringComparison.Ordinal))
+        {
+            return @<span></span>;
+        }
         // Otherwise, render a link with the text as the anchor text & title as the URL
         else
         {

src/Aspire.Dashboard/Resources/ControlsStrings.Designer.cs

@@ -466,8 +466,8 @@
   <data name="EndpointNameColumnHeader" xml:space="preserve">
     <value>Endpoint name</value>
   </data>
-  <data name="LinkColumnHeader" xml:space="preserve">
-    <value>Link</value>
+  <data name="LinkAddressColumnHeader" xml:space="preserve">
+    <value>Address</value>
   </data>
   <data name="ResourceGraphNoEndpoints" xml:space="preserve">
     <value>No endpoints</value>
@@ -484,4 +484,7 @@
   <data name="TotalItemsFooterCapturePaused" xml:space="preserve">
     <value>Capture paused</value>
   </data>
+  <data name="LinkTextColumnHeader" xml:space="preserve">
+    <value>Text</value>
+  </data>
 </root>