Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions DebugProbe.AspNetCore.Tests/Rendering/HtmlRendererTests.cs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using DebugProbe.AspNetCore.Internal.Rendering;
using DebugProbe.AspNetCore.Internal.Resources;
using DebugProbe.AspNetCore.Models;

namespace DebugProbe.AspNetCore.Tests.Rendering;
Expand Down Expand Up @@ -26,6 +27,40 @@ public void Render_index_page_builds_page_with_entries()
Assert.Contains("200", html);
}

[Fact]
public void Render_index_page_constrains_path_cell_and_preserves_full_path_title()
{
var path = "/" + new string('a', 240);
var query = "?filter=" + new string('b', 120);
var fullPath = path + query;

var html = HtmlRenderer.RenderIndexPage(
[
new DebugEntry
{
Id = "trace-1",
Method = "GET",
Path = path,
Query = query,
StatusCode = 200,
Timestamp = new DateTimeOffset(2026, 1, 2, 3, 4, 5, TimeSpan.Zero)
}
]);

Assert.Contains($@"<td class=""request-path""><span class=""request-path-value"" title=""{fullPath}"">{fullPath}</span></td>", html);
}

[Fact]
public void Embedded_css_keeps_request_index_table_fixed_with_ellipsized_paths()
{
Assert.Contains("#requestTable", EmbeddedResources.Css);
Assert.Contains("table-layout: fixed;", EmbeddedResources.Css);
Assert.Contains(".request-path-value", EmbeddedResources.Css);
Assert.Contains("overflow: hidden;", EmbeddedResources.Css);
Assert.Contains("text-overflow: ellipsis;", EmbeddedResources.Css);
Assert.Contains("white-space: nowrap;", EmbeddedResources.Css);
}

[Fact]
public void Details_page_renders_captured_values()
{
Expand Down
37 changes: 36 additions & 1 deletion DebugProbe.AspNetCore/Assets/css/debugprobe.css
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,30 @@ table {
border-collapse: collapse;
}

#requestTable {
table-layout: fixed;
}

#requestTable th:nth-child(1),
#requestTable td:nth-child(1) {
width: 80px;
}

#requestTable th:nth-child(2),
#requestTable td:nth-child(2) {
width: 96px;
}

#requestTable th:nth-child(4),
#requestTable td:nth-child(4) {
width: 92px;
}

#requestTable th:nth-child(5),
#requestTable td:nth-child(5) {
width: 100px;
}

.table-wrap {
overflow-x: auto;
background: #fff;
Expand Down Expand Up @@ -463,6 +487,18 @@ tbody tr:last-child td {
cursor: pointer;
}

.request-path {
min-width: 0;
}

.request-path-value {
display: block;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}

.method-pill {
display: inline-flex;
min-width: 60px;
Expand Down Expand Up @@ -1092,4 +1128,3 @@ pre {
background: #4a1717;
color: #ff8a8a !important;
}

12 changes: 8 additions & 4 deletions DebugProbe.AspNetCore/Internal/Rendering/HtmlRenderer.cs
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,23 @@ public static string RenderIndexPage(List<DebugEntry> items)
{
const int slowRequestThresholdMs = 1000;

var rows = string.Join("", items.Select(x => $@"
var rows = string.Join("", items.Select(x =>
{
var pathWithQuery = string.IsNullOrEmpty(x.Query) ? x.Path : $"{x.Path}{x.Query}";

return $@"
<tr data-url=""/debug/{Encode(x.Id)}""
data-method=""{Encode(x.Method)}""
data-status-family=""{x.StatusCode / 100}""
data-search=""{Encode($"{x.Id} {x.Method} {x.Path} {x.Query} {x.StatusCode}")}""
class=""clickable-row"">
<td>{x.Timestamp:HH:mm:ss}</td>
<td><span class=""method-pill"">{Encode(x.Method)}</span></td>
<td>{Encode(string.IsNullOrEmpty(x.Query) ? x.Path : $"{x.Path}{x.Query}")}</td>
<td class=""request-path""><span class=""request-path-value"" title=""{Encode(pathWithQuery)}"">{Encode(pathWithQuery)}</span></td>
<td><span class=""status {GetStatusClass(x.StatusCode)}"">{x.StatusCode}</span></td>
<td>{x.DurationMs} ms</td>
</tr>"
));
</tr>";
}));

if (string.IsNullOrEmpty(rows))
rows = "<tr class='empty-row'><td colspan='5'>No data</td></tr>";
Expand Down
Loading