Automatically convert URLs in values into links in the dashboard

Author: JamesNK

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

@@ -5,23 +5,23 @@
 <div class="@GetContainerClass()" style="width: inherit;">
     @if (EnableMasking && IsMasked)
     {
-        <span class="cellText">
+        <span class="cellText" id="@_cellTextId">
             &#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;
         </span>
     }
-    else if (EnableHighlighting)
+    else if (EnableHighlighting && !string.IsNullOrEmpty(HighlightText))
     {
-        <span class="cellText" title="@(ToolTip ?? Value)">
+        <span class="cellText" title="@(ToolTip ?? Value)" id="@_cellTextId">
             @ContentBeforeValue
             <FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
             @ContentAfterValue
         </span>
     }
     else
     {
-        <span class="cellText" title="@(ToolTip ?? Value)">
+        <span class="cellText" title="@(ToolTip ?? Value)" id="@_cellTextId">
             @ContentBeforeValue
-            @(MaxDisplayLength.HasValue ? TrimLength(Value) : Value)
+            @((MarkupString)(_formattedValue ?? string.Empty))
             @ContentAfterValue
         </span>
     }

src/Aspire.Dashboard/Components/Controls/GridValue.razor.cs

@@ -1,6 +1,7 @@
 // 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.ConsoleLogs;
 using Aspire.Dashboard.Resources;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
@@ -66,9 +67,6 @@ public partial class GridValue
     [Parameter]
     public EventCallback<bool> IsMaskedChanged { get; set; }
 
-    [Parameter]
-    public int? MaxDisplayLength { get; set; }
-
     [Parameter]
     public string? ToolTip { get; set; }
 
@@ -80,8 +78,11 @@ public partial class GridValue
 
     private readonly Icon _maskIcon = new Icons.Regular.Size16.EyeOff();
     private readonly Icon _unmaskIcon = new Icons.Regular.Size16.Eye();
+    private readonly string _cellTextId = $"celltext-{Guid.NewGuid():N}";
     private readonly string _copyId = $"copy-{Guid.NewGuid():N}";
     private readonly string _menuAnchorId = $"menu-{Guid.NewGuid():N}";
+    private string? _value;
+    private string? _formattedValue;
     private bool _isMenuOpen;
 
     protected override void OnInitialized()
@@ -90,23 +91,44 @@ protected override void OnInitialized()
         PostCopyToolTip = Loc[nameof(ControlsStrings.GridValueCopied)];
     }
 
-    private string GetContainerClass() => EnableMasking ? "container masking-enabled" : "container";
-
-    private async Task ToggleMaskStateAsync()
+    protected override void OnParametersSet()
     {
-        IsMasked = !IsMasked;
-
-        await IsMaskedChanged.InvokeAsync(IsMasked);
+        if (_value != Value)
+        {
+            _value = Value;
+
+            if (UrlParser.TryParse(_value, out var url))
+            {
+                _formattedValue = url;
+            }
+            else
+            {
+                _formattedValue = _value;
+            }
+        }
     }
 
-    private string TrimLength(string? text)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (text is not null && MaxDisplayLength is int maxLength && text.Length > maxLength)
+        if (firstRender)
         {
-            return text[..maxLength];
+            // If the value and formatted value are different then there are hrefs in the text.
+            // Add a click event to the cell text that stops propagation if a href is clicked.
+            // This prevents details view from opening when the value is in a main page grid.
+            if (_value != _formattedValue)
+            {
+                await JS.InvokeVoidAsync("setCellTextClickHandler", _cellTextId);
+            }
         }
+    }
 
-        return text ?? "";
+    private string GetContainerClass() => EnableMasking ? "container masking-enabled" : "container";
+
+    private async Task ToggleMaskStateAsync()
+    {
+        IsMasked = !IsMasked;
+
+        await IsMaskedChanged.InvokeAsync(IsMasked);
     }
 
     private void ToggleMenuOpen()

src/Aspire.Dashboard/ConsoleLogs/UrlParser.cs

@@ -18,11 +18,13 @@ public static bool TryParse(string? text, [NotNullWhen(true)] out string? modifi
         {
             var urlMatch = s_urlRegEx.Match(text);
 
-            var builder = new StringBuilder(text.Length * 2);
+            StringBuilder? builder = null;
 
             var nextCharIndex = 0;
             while (urlMatch.Success)
             {
+                builder ??= new StringBuilder(text.Length * 2);
+
                 if (urlMatch.Index > 0)
                 {
                     builder.Append(text[(nextCharIndex)..urlMatch.Index]);
@@ -36,7 +38,7 @@ public static bool TryParse(string? text, [NotNullWhen(true)] out string? modifi
                 urlMatch = urlMatch.NextMatch();
             }
 
-            if (builder.Length > 0)
+            if (builder?.Length > 0)
             {
                 if (nextCharIndex < text.Length)
                 {

src/Aspire.Dashboard/wwwroot/js/app.js

@@ -350,4 +350,20 @@ window.registerOpenTextVisualizerOnClick = function(layout) {
 
 window.unregisterOpenTextVisualizerOnClick = function (obj) {
     document.removeEventListener('click', obj.onClickListener);
-}
+};
+
+window.setCellTextClickHandler = function (id) {
+    var cellTextElement = document.getElementById(id);
+    if (!cellTextElement) {
+        return;
+    }
+
+    cellTextElement.addEventListener('click', e => {
+        // Propagation behavior:
+        // - Link click stops. Link will open in a new window.
+        // - Any other text allows propagation. Potentially opens details view.
+        if (isElementTagName(e.target, 'a')) {
+            e.stopPropagation();
+        }
+    });
+};