Skip to content

Commit 513275d

Browse files
JamesNKJamesNK
authored
Automatically convert URLs in values into links in the dashboard (#6176)
1 parent a4ef97a commit 513275d

File tree

12 files changed

+170
-86
lines changed

12 files changed

+170
-86
lines changed

‎playground/Stress/Stress.ApiService/Program.cs‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33

44
using System.Diagnostics;
55
using System.Text;
6+
using System.Text.Json.Nodes;
67
using System.Threading.Channels;
8+
using System.Xml.Linq;
79
using Microsoft.AspNetCore.Mvc;
810
using Stress.ApiService;
911

@@ -184,6 +186,8 @@ async IAsyncEnumerable<string> WriteOutput()
184186

185187
var xmlWithComments = @"<hello><!-- world --></hello>";
186188

189+
var xmlWithUrl = new XElement(new XElement("url", "http://localhost:8080")).ToString();
190+
187191
// From https://microsoftedge.github.io/Demos/json-dummy-data/
188192
var jsonLarge = File.ReadAllText(Path.Combine("content", "example.json"));
189193

@@ -194,6 +198,11 @@ async IAsyncEnumerable<string> WriteOutput()
194198
1
195199
]";
196200

201+
var jsonWithUrl = new JsonObject
202+
{
203+
["url"] = "http://localhost:8080"
204+
}.ToString();
205+
197206
var sb = new StringBuilder();
198207
for (int i = 0; i < 26; i++)
199208
{
@@ -203,9 +212,15 @@ async IAsyncEnumerable<string> WriteOutput()
203212

204213
logger.LogInformation(@"XML large content: {XmlLarge}
205214
XML comment content: {XmlComment}
215+
XML URL content: {XmlUrl}
206216
JSON large content: {JsonLarge}
207217
JSON comment content: {JsonComment}
208-
Long line content: {LongLines}", xmlLarge, xmlWithComments, jsonLarge, jsonWithComments, sb.ToString());
218+
JSON URL content: {JsonUrl}
219+
Long line content: {LongLines}
220+
URL content: {UrlContent}
221+
Empty content: {EmptyContent}
222+
Whitespace content: {WhitespaceContent}
223+
Null content: {NullContent}", xmlLarge, xmlWithComments, xmlWithUrl, jsonLarge, jsonWithComments, jsonWithUrl, sb.ToString(), "http://localhost:8080", "", " ", null);
209224

210225
return "Log with formatted data";
211226
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@
88

99
@if (EnableMasking && IsMasked)
1010
{
11-
<span class="grid-value masked">
11+
<span class="grid-value masked" id="@_cellTextId">
1212
&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;
1313
</span>
1414
}
1515
else
1616
{
17-
<span class="grid-value" title="@(ToolTip ?? Value)">
17+
<span class="grid-value" title="@(ToolTip ?? Value)" id="@_cellTextId">
1818
@ContentBeforeValue
1919
@if (EnableHighlighting && !string.IsNullOrEmpty(HighlightText))
2020
{
2121
<FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
2222
}
23-
else
23+
else if (_formattedValue != null)
2424
{
25-
@Value
25+
@((MarkupString)_formattedValue)
2626
}
2727
@ContentAfterValue
2828
</span>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
// Licensed to the .NET Foundation under one or more agreements.
22
// The .NET Foundation licenses this file to you under the MIT license.
33

4+
using System.Net;
5+
using Aspire.Dashboard.ConsoleLogs;
46
using Aspire.Dashboard.Resources;
57
using Microsoft.AspNetCore.Components;
68
using Microsoft.FluentUI.AspNetCore.Components;
9+
using Microsoft.JSInterop;
710

811
namespace Aspire.Dashboard.Components.Controls;
912

@@ -81,10 +84,19 @@ public partial class GridValue
8184
[Parameter]
8285
public string PostCopyToolTip { get; set; } = null!;
8386

87+
[Parameter]
88+
public bool StopClickPropagation { get; set; }
89+
90+
[Inject]
91+
public required IJSRuntime JS { get; init; }
92+
8493
private readonly Icon _maskIcon = new Icons.Regular.Size16.EyeOff();
8594
private readonly Icon _unmaskIcon = new Icons.Regular.Size16.Eye();
95+
private readonly string _cellTextId = $"celltext-{Guid.NewGuid():N}";
8696
private readonly string _copyId = $"copy-{Guid.NewGuid():N}";
8797
private readonly string _menuAnchorId = $"menu-{Guid.NewGuid():N}";
98+
private string? _value;
99+
private string? _formattedValue;
88100
private bool _isMenuOpen;
89101

90102
protected override void OnInitialized()
@@ -93,6 +105,37 @@ protected override void OnInitialized()
93105
PostCopyToolTip = Loc[nameof(ControlsStrings.GridValueCopied)];
94106
}
95107

108+
protected override void OnParametersSet()
109+
{
110+
if (_value != Value)
111+
{
112+
_value = Value;
113+
114+
if (UrlParser.TryParse(_value, WebUtility.HtmlEncode, out var modifiedText))
115+
{
116+
_formattedValue = modifiedText;
117+
}
118+
else
119+
{
120+
_formattedValue = WebUtility.HtmlEncode(_value);
121+
}
122+
}
123+
}
124+
125+
protected override async Task OnAfterRenderAsync(bool firstRender)
126+
{
127+
if (firstRender)
128+
{
129+
// If the value and formatted value are different then there are hrefs in the text.
130+
// Add a click event to the cell text that stops propagation if a href is clicked.
131+
// This prevents details view from opening when the value is in a main page grid.
132+
if (StopClickPropagation && _value != _formattedValue)
133+
{
134+
await JS.InvokeVoidAsync("setCellTextClickHandler", _cellTextId);
135+
}
136+
}
137+
}
138+
96139
private string GetContainerClass() => EnableMasking ? "container masking-enabled" : "container";
97140

98141
private async Task ToggleMaskStateAsync()

‎src/Aspire.Dashboard/Components/ResourcesGridColumns/LogMessageColumnDisplay.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<GridValue Value="@LogEntry.Message"
1010
ValueDescription="@Loc[nameof(StructuredLogs.StructuredLogsMessageColumnHeader)]"
1111
EnableHighlighting="true"
12-
HighlightText="@FilterText">
12+
HighlightText="@FilterText"
13+
StopClickPropagation="true">
1314
<ContentInButtonArea>
1415
<ExceptionDetails ExceptionText="@_exceptionText" />
1516
</ContentInButtonArea>

‎src/Aspire.Dashboard/Components/ResourcesGridColumns/SourceColumnDisplay.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
EnableHighlighting="true"
1111
HighlightText="@FilterText"
1212
PreCopyToolTip="@Loc[nameof(Columns.SourceColumnDisplayCopyCommandToClipboard)]"
13-
ToolTip="@Tooltip">
13+
ToolTip="@Tooltip"
14+
StopClickPropagation="true">
1415
<ContentAfterValue>
1516
@if (ContentAfterValue is not null)
1617
{

‎src/Aspire.Dashboard/ConsoleLogs/LogLevelParser.cs‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/Aspire.Dashboard/ConsoleLogs/LogParser.cs‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,30 @@ public LogEntry CreateLogEntry(string rawText, bool isErrorOutput)
3131
timestamp = timestampParseResult.Value.Timestamp.UtcDateTime;
3232
}
3333

34-
// 2. HTML Encode the raw text for security purposes
35-
content = WebUtility.HtmlEncode(content);
34+
Func<string, string> callback = (s) =>
35+
{
36+
// This callback is run on text that isn't transformed into a clickable URL.
3637

37-
// 3. Parse the content to look for ANSI Control Sequences and color them if possible
38-
var conversionResult = AnsiParser.ConvertToHtml(content, _residualState);
39-
content = conversionResult.ConvertedText;
40-
_residualState = conversionResult.ResidualState;
38+
// 3a. HTML Encode the raw text for security purposes
39+
var updatedText = WebUtility.HtmlEncode(s);
4140

42-
// 4. Parse the content to look for URLs and make them links if possible
43-
if (UrlParser.TryParse(content, out var modifiedText))
41+
// 3b. Parse the content to look for ANSI Control Sequences and color them if possible
42+
var conversionResult = AnsiParser.ConvertToHtml(updatedText, _residualState);
43+
updatedText = conversionResult.ConvertedText;
44+
_residualState = conversionResult.ResidualState;
45+
46+
return updatedText ?? string.Empty;
47+
};
48+
49+
// 3. Parse the content to look for URLs and make them links if possible
50+
if (UrlParser.TryParse(content, callback, out var modifiedText))
4451
{
4552
content = modifiedText;
4653
}
54+
else
55+
{
56+
content = callback(content);
57+
}
4758

4859
// 5. Create the LogEntry
4960
var logEntry = new LogEntry

‎src/Aspire.Dashboard/ConsoleLogs/UrlParser.cs‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@ public static partial class UrlParser
1212
{
1313
private static readonly Regex s_urlRegEx = GenerateUrlRegEx();
1414

15-
public static bool TryParse(string? text, [NotNullWhen(true)] out string? modifiedText)
15+
public static bool TryParse(string? text, Func<string, string>? nonMatchFragmentCallback, [NotNullWhen(true)] out string? modifiedText)
1616
{
1717
if (text is not null)
1818
{
1919
var urlMatch = s_urlRegEx.Match(text);
2020

21-
var builder = new StringBuilder(text.Length * 2);
21+
StringBuilder? builder = null;
2222

2323
var nextCharIndex = 0;
2424
while (urlMatch.Success)
2525
{
26+
builder ??= new StringBuilder(text.Length * 2);
27+
2628
if (urlMatch.Index > 0)
2729
{
28-
builder.Append(text[(nextCharIndex)..urlMatch.Index]);
30+
AppendNonMatchFragment(builder, nonMatchFragmentCallback, text[(nextCharIndex)..urlMatch.Index]);
2931
}
3032

3133
var urlStart = urlMatch.Index;
@@ -36,11 +38,11 @@ public static bool TryParse(string? text, [NotNullWhen(true)] out string? modifi
3638
urlMatch = urlMatch.NextMatch();
3739
}
3840

39-
if (builder.Length > 0)
41+
if (builder?.Length > 0)
4042
{
4143
if (nextCharIndex < text.Length)
4244
{
43-
builder.Append(text[(nextCharIndex)..]);
45+
AppendNonMatchFragment(builder, nonMatchFragmentCallback, text[(nextCharIndex)..]);
4446
}
4547

4648
modifiedText = builder.ToString();
@@ -50,17 +52,30 @@ public static bool TryParse(string? text, [NotNullWhen(true)] out string? modifi
5052

5153
modifiedText = null;
5254
return false;
55+
56+
static void AppendNonMatchFragment(StringBuilder stringBuilder, Func<string, string>? nonMatchFragmentCallback, string text)
57+
{
58+
if (nonMatchFragmentCallback != null)
59+
{
60+
text = nonMatchFragmentCallback(text);
61+
}
62+
63+
stringBuilder.Append(text);
64+
}
5365
}
5466

5567
// Regular expression that detects http/https URLs in a log entry
56-
// Based on the RegEx used in Windows Terminal for the same purpose, but limited
57-
// to only http/https URLs
68+
// Based on the RegEx used in Windows Terminal for the same purpose. Some modifications:
69+
// - Can start at a non word boundary. This behavior is similar to how GitHub matches URLs in pretty printed code.
70+
// - Limited to only http/https URLs.
71+
// - Ignore case. That means it matches URLs starting with http and HTTP.
5872
//
5973
// Explanation:
60-
// /b - Match must start at a word boundary (after whitespace or at the start of the text)
6174
// https?:// - http:// or https://
6275
// [-A-Za-z0-9+&@#/%?=~_|$!:,.;]* - Any character in the list, matched zero or more times.
6376
// [A-Za-z0-9+&@#/%=~_|$] - Any character in the list, matched exactly once
64-
[GeneratedRegex("\\bhttps?://[-A-Za-z0-9+&@#/%?=~_|$!:,.;]*[A-Za-z0-9+&@#/%=~_|$]")]
65-
private static partial Regex GenerateUrlRegEx();
77+
[GeneratedRegex(
78+
"https?://[-A-Za-z0-9+&@#/%?=~_|$!:,.;]*[A-Za-z0-9+&@#/%=~_|$]",
79+
RegexOptions.IgnoreCase | RegexOptions.CultureInvariant)]
80+
public static partial Regex GenerateUrlRegEx();
6681
}

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,4 +355,20 @@ window.registerOpenTextVisualizerOnClick = function(layout) {
355355

356356
window.unregisterOpenTextVisualizerOnClick = function (obj) {
357357
document.removeEventListener('click', obj.onClickListener);
358-
}
358+
};
359+
360+
window.setCellTextClickHandler = function (id) {
361+
var cellTextElement = document.getElementById(id);
362+
if (!cellTextElement) {
363+
return;
364+
}
365+
366+
cellTextElement.addEventListener('click', e => {
367+
// Propagation behavior:
368+
// - Link click stops. Link will open in a new window.
369+
// - Any other text allows propagation. Potentially opens details view.
370+
if (isElementTagName(e.target, 'a')) {
371+
e.stopPropagation();
372+
}
373+
});
374+
};

‎tests/Aspire.Dashboard.Tests/ConsoleLogsTests/LogEntriesTests.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,4 +233,17 @@ public void InsertSorted_TrimsToMaximumEntryCount_OutOfOrder()
233233
l => Assert.Equal("2", l.Content),
234234
l => Assert.Equal("3", l.Content));
235235
}
236+
237+
[Fact]
238+
public void CreateLogEntry_AnsiAndUrl_HasUrlAnchor()
239+
{
240+
// Arrange
241+
var parser = new LogParser();
242+
243+
// Act
244+
var entry = parser.CreateLogEntry("\x1b[36mhttps://www.example.com\u001b[0m", isErrorOutput: false);
245+
246+
// Assert
247+
Assert.Equal("<span class=\"ansi-fg-cyan\"></span><a target=\"_blank\" href=\"https://www.example.com\">https://www.example.com</a>", entry.Content);
248+
}
236249
}

0 commit comments

Comments
 (0)