diff --git a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs index d155d9b..5d74a4a 100644 --- a/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs +++ b/DebugProbe.AspNetCore/Internal/HtmlRenderer.cs @@ -48,11 +48,21 @@ public static string RenderDetailsPage(DebugEntry x, string req, string res) ? x.Path : $"{x.Path}{x.Query}"; + var statusClass = x.StatusCode switch + { + >= 200 and < 300 => "status-200", + >= 300 and < 400 => "status-300", + >= 400 and < 500 => "status-400", + >= 500 => "status-500", + _ => "" + }; + var content = EmbeddedResources.Details .Replace("{{method}}", Encode(x.Method)) .Replace("{{path}}", Encode(pathWithQuery)) - .Replace("{{status}}", x.StatusCode.ToString()) - .Replace("{{tradeId}}", x.Id.ToString()) + .Replace("{{status}}", string.Format($"{x.StatusCode} {((HttpStatusCode)x.StatusCode)}")) + .Replace("{{statusClass}}", statusClass) + .Replace("{{traceId}}", x.Id.ToString()) .Replace("{{time}}", x.Timestamp.ToString("yyyy-MM-dd HH:mm:ss.fff")) .Replace("{{local}}", x.Timestamp.ToLocalTime().ToString("HH:mm:ss")) @@ -70,10 +80,6 @@ public static string RenderDetailsPage(DebugEntry x, string req, string res) .Replace("{{dateFormat}}", x.DateFormat ?? "") .Replace("{{assemblyVersion}}", Encode(x.AssemblyVersion)) - - - - .Replace("{{requestUrl}}", Encode(string.IsNullOrEmpty(x.RequestUrl) ? "(empty)" : x.RequestUrl)) .Replace("{{request}}", Encode(string.IsNullOrEmpty(req) ? "(empty)" : req)) .Replace("{{response}}", Encode(string.IsNullOrEmpty(res) ? "(empty)" : res)) diff --git a/DebugProbe.AspNetCore/Resources/css/debugprobe.css b/DebugProbe.AspNetCore/Resources/css/debugprobe.css index 9256076..92db731 100644 --- a/DebugProbe.AspNetCore/Resources/css/debugprobe.css +++ b/DebugProbe.AspNetCore/Resources/css/debugprobe.css @@ -98,6 +98,7 @@ a { } .details-item { + min-height: 32px; display: flex; justify-content: space-between; align-items: center; @@ -233,6 +234,22 @@ pre { background: #3a3a3a; } + +.trace-id-button { + background: #f3f4f6; + border: none; + border-radius: 6px; + font-size: 13px; + padding: 6px 10px; + cursor: pointer; + font-family: monospace; + font-weight: 600; +} + + .trace-id-button:hover { + background: #e5e7eb; + } + /* ========================= Status ========================= */ @@ -246,6 +263,31 @@ pre { font-weight: bold; } +.status { + display: inline-flex; + align-items: center; + padding: 4px 10px; + border-radius: 999px; + font-size: 13px; + font-weight: 600; +} + +.status-200 { + background: #dcfce7; + color: #166534; +} + +.status-300 { + background: #dbeafe; + color: #1d4ed8; +} + +.status-400, +.status-500 { + background: #fecaca; + color: #991b1b; +} + /* ========================= Accordion diff --git a/DebugProbe.AspNetCore/Resources/html/details.html b/DebugProbe.AspNetCore/Resources/html/details.html index 04dc444..23a0843 100644 --- a/DebugProbe.AspNetCore/Resources/html/details.html +++ b/DebugProbe.AspNetCore/Resources/html/details.html @@ -11,12 +11,17 @@

{{method}} {{path}}

Status - {{status}} + + {{status}} +
TraceId - {{tradeId}} +