diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor index 0fe48bfdff6..8bd27f95811 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor @@ -104,9 +104,7 @@ OnResize="@(r => _manager.SetWidthFraction(r.Orientation == Orientation.Horizontal ? r.Panel1Fraction : 1))"> @{ - var eventName = OtlpHelpers.GetValue(context!.LogEntry.Attributes, "event.name") - ?? OtlpHelpers.GetValue(context!.LogEntry.Attributes, "logrecord.event.name") - ?? Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsEntryDetails)]; + var eventName = StructureLogsDetailsViewModel.GetEventName(context!.LogEntry, Loc); }
diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor index 0b2180fc2ec..336b30ec834 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor @@ -6,8 +6,6 @@ @using Aspire.Dashboard.Components.Controls.Grid @using Aspire.Dashboard.Resources @using Aspire.Dashboard.Utils -@inject IStringLocalizer Loc -@inject IStringLocalizer ControlStringsLoc + IsSummaryDetailsViewOpen="@(SelectedData is not null)">

@@ -73,16 +71,31 @@ - @{ var shortedSpanId = OtlpHelpers.ToShortenedId(context!.Span.SpanId); } -
- @context!.Title - @shortedSpanId + @{ + string? title = null; + string? subtitle = null; + + if (context?.SpanViewModel is { } spanVm) + { + title = spanVm.Title; + subtitle = OtlpHelpers.ToShortenedId(spanVm.Span.SpanId); + } + else if (context?.LogEntryViewModel is { } logEntryVm) + { + title = StructureLogsDetailsViewModel.GetEventName(logEntryVm.LogEntry, StructuredLogsLoc); + subtitle = logEntryVm.LogEntry.Scope.Name; + } + } + +
+ @title + @subtitle
@@ -203,9 +216,58 @@
+ @{ + var spanColor = @ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source)); + }
-
-
+
+
+ @foreach (var item in context.SpanLogs) + { + var buttonId = $"{context.Span.SpanId}-{item.LogEntry.InternalId}"; + var eventName = StructureLogsDetailsViewModel.GetEventName(item.LogEntry, StructuredLogsLoc); + var isSelected = SelectedData?.LogEntryViewModel?.LogEntry.InternalId == item.LogEntry.InternalId; + var htmlTooltip = item.Index < 500; + + + @* + There is a performance impact to having many tooltips on the page. Limit to 500 tooltips. + The button continues to be displayed and clicking on it opens the details view. + A standard browser tooltip is displayed instead of the FluentTooltip. + *@ + @if (htmlTooltip) + { + +
+ @eventName @item.LogEntry.Scope.Name
+
+ + + + + + + + + + + + + +
@StructuredLogsLoc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsLevelColumnHeader)]@item.LogEntry.Severity
@StructuredLogsLoc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsTimestampColumnHeader)]@FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, item.LogEntry.TimeStamp, MillisecondsDisplay.Truncated)
@StructuredLogsLoc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsMessageColumnHeader)]@OtlpHelpers.TruncateString(item.LogEntry.Message, maxLength: 200)
+ + } + } +
+
@SpanWaterfallViewModel.GetTitle(context.Span, _applications) @DurationFormatter.FormatDuration(context.Span.Duration) @@ -233,7 +295,14 @@
- + @if (context?.SpanViewModel is { } spanVm) + { + + } + else if (context?.LogEntryViewModel is { } logEntryVm) + { + + }
diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs index da3b6c38d0b..3584084ff3d 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs @@ -8,12 +8,14 @@ using Aspire.Dashboard.Model.Otlp; using Aspire.Dashboard.Otlp.Model; using Aspire.Dashboard.Otlp.Storage; +using Aspire.Dashboard.Resources; +using Aspire.Dashboard.Telemetry; using Aspire.Dashboard.Utils; using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Localization; using Microsoft.FluentUI.AspNetCore.Components; -using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons; using Microsoft.JSInterop; -using Aspire.Dashboard.Telemetry; +using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons; namespace Aspire.Dashboard.Components.Pages; @@ -65,6 +67,15 @@ public partial class TraceDetail : ComponentBase, IComponentWithTelemetry, IDisp [Inject] public required ComponentTelemetryContextProvider TelemetryContextProvider { get; init; } + [Inject] + public required IStringLocalizer Loc { get; init; } + + [Inject] + public required IStringLocalizer StructuredLogsLoc { get; init; } + + [Inject] + public required IStringLocalizer ControlStringsLoc { get; init; } + protected override void OnInitialized() { TelemetryContextProvider.Initialize(TelemetryContext); @@ -196,8 +207,25 @@ private void UpdateDetailViewData() return; } + // Get logs for the trace. Note that there isn't a limit on this query so all logs are returned. + // There is a limit on the number of logs stored by the dashboard so this is implicitly limited. + // If there are performance issues with displaying all logs then consider adding a limit to this query. + var logsContext = new GetLogsContext + { + ApplicationKey = null, + Count = int.MaxValue, + StartIndex = 0, + Filters = [new TelemetryFilter + { + Field = KnownStructuredLogFields.TraceIdField, + Condition = FilterCondition.Equals, + Value = _trace.TraceId + }] + }; + var result = TelemetryRepository.GetLogs(logsContext); + Logger.LogInformation("Trace '{TraceId}' has {SpanCount} spans.", _trace.TraceId, _trace.Spans.Count); - _spanWaterfallViewModels = SpanWaterfallViewModel.Create(_trace, new SpanWaterfallViewModel.TraceDetailState(OutgoingPeerResolvers.ToArray(), _collapsedSpanIds)); + _spanWaterfallViewModels = SpanWaterfallViewModel.Create(_trace, result.Items, new SpanWaterfallViewModel.TraceDetailState(OutgoingPeerResolvers.ToArray(), _collapsedSpanIds)); _maxDepth = _spanWaterfallViewModels.Max(s => s.Depth); var apps = new HashSet(); @@ -214,7 +242,7 @@ private void UpdateDetailViewData() private async Task HandleAfterFilterBindAsync() { - SelectedSpan = null; + SelectedData = null; await InvokeAsync(StateHasChanged); await InvokeAsync(_dataGrid.SafeRefreshDataAsync); @@ -243,7 +271,7 @@ private void UpdateSubscription() private string GetRowClass(SpanWaterfallViewModel viewModel) { // Test with id rather than the object reference because the data and view model objects are recreated on trace updates. - if (viewModel.Span.SpanId == SelectedSpan?.Span.SpanId) + if (viewModel.Span.SpanId == SelectedData?.SpanViewModel?.Span.SpanId) { return "selected-row"; } @@ -251,7 +279,7 @@ private string GetRowClass(SpanWaterfallViewModel viewModel) return string.Empty; } - public SpanDetailsViewModel? SelectedSpan { get; set; } + public TraceDetailSelectedDataViewModel? SelectedData { get; set; } private async Task OnToggleCollapse(SpanWaterfallViewModel viewModel) { @@ -276,7 +304,7 @@ private async Task OnShowPropertiesAsync(SpanWaterfallViewModel viewModel, strin { _elementIdBeforeDetailsViewOpened = buttonId; - if (SelectedSpan?.Span.SpanId == viewModel.Span.SpanId) + if (SelectedData?.SpanViewModel?.Span.SpanId == viewModel.Span.SpanId) { await ClearSelectedSpanAsync(); } @@ -301,7 +329,10 @@ private async Task OnShowPropertiesAsync(SpanWaterfallViewModel viewModel, strin Backlinks = backlinks, }; - SelectedSpan = spanDetailsViewModel; + SelectedData = new TraceDetailSelectedDataViewModel + { + SpanViewModel = spanDetailsViewModel + }; } } @@ -324,7 +355,7 @@ private SpanLinkViewModel CreateLinkViewModel(string traceId, string spanId, Key private async Task ClearSelectedSpanAsync(bool causedByUserAction = false) { - SelectedSpan = null; + SelectedData = null; if (_elementIdBeforeDetailsViewOpened is not null && causedByUserAction) { @@ -336,6 +367,21 @@ private async Task ClearSelectedSpanAsync(bool causedByUserAction = false) private string GetResourceName(OtlpApplicationView app) => OtlpApplication.GetResourceName(app, _applications); + private async Task ToggleSpanLogsAsync(OtlpLogEntry logEntry) + { + if (SelectedData?.LogEntryViewModel?.LogEntry.InternalId == logEntry.InternalId) + { + await ClearSelectedSpanAsync(); + } + else + { + SelectedData = new TraceDetailSelectedDataViewModel + { + LogEntryViewModel = new StructureLogsDetailsViewModel { LogEntry = logEntry } + }; + } + } + public void Dispose() { foreach (var subscription in _peerChangesSubscriptions) diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css index cb5917be24f..377f36dedc3 100644 --- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css +++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css @@ -193,3 +193,75 @@ display: flex; column-gap: 8px; } + +::deep .span-button-container { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; +} + +::deep .span-log-entry-button { + position: absolute; + width: 15px; + height: 15px; + overflow: hidden; + border-radius: 50%; + align-self: center; + opacity: 0.8; + transform: translateX(-50%); + background: color-mix(in srgb, var(--span-color), white 30%); + border-color: color-mix(in srgb, var(--span-color), black 50%); +} + +::deep .span-log-entry-button:hover { + opacity: 1; + background: color-mix(in srgb, var(--span-color), white 50%); +} + +::deep .span-log-entry-selected { + opacity: 1; + background: color-mix(in srgb, var(--span-color), white 50%); + width: 20px; + height: 20px; +} + +::deep .log-tooltip-title { + font-weight: bold; + font-size: 16px; +} + +::deep .log-tooltip-subtitle { + color: var(--foreground-subtext-rest); + font-size: 12px; + padding-left: 0.5rem; +} + +::deep.log-tooltip-title-container { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-bottom: 8px; + margin-top: 4px; +} + +::deep.log-tooltip-table { + margin-bottom: 0; + width: 100%; + table-layout: fixed; +} + +::deep.log-tooltip-table td:nth-child(1) { + width: 25%; +} + +::deep.log-tooltip-table td { + padding: calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width))* 1px) 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + align-content: center; + border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest); +} diff --git a/src/Aspire.Dashboard/Model/Otlp/SpanLogEntryViewModel.cs b/src/Aspire.Dashboard/Model/Otlp/SpanLogEntryViewModel.cs new file mode 100644 index 00000000000..29680117dac --- /dev/null +++ b/src/Aspire.Dashboard/Model/Otlp/SpanLogEntryViewModel.cs @@ -0,0 +1,13 @@ +// 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.Otlp.Model; + +namespace Aspire.Dashboard.Model.Otlp; + +public sealed class SpanLogEntryViewModel +{ + public required int Index { get; init; } + public required OtlpLogEntry LogEntry { get; init; } + public required double LeftOffset { get; init; } +} diff --git a/src/Aspire.Dashboard/Model/Otlp/SpanWaterfallViewModel.cs b/src/Aspire.Dashboard/Model/Otlp/SpanWaterfallViewModel.cs index 5635e815356..10fabcdb77a 100644 --- a/src/Aspire.Dashboard/Model/Otlp/SpanWaterfallViewModel.cs +++ b/src/Aspire.Dashboard/Model/Otlp/SpanWaterfallViewModel.cs @@ -15,6 +15,7 @@ public sealed class SpanWaterfallViewModel public required int Depth { get; init; } public required bool LabelIsRight { get; init; } public required string? UninstrumentedPeer { get; init; } + public required List SpanLogs { get; init; } public bool IsHidden { get; set; } [MemberNotNullWhen(true, nameof(UninstrumentedPeer))] public bool HasUninstrumentedPeer => !string.IsNullOrEmpty(UninstrumentedPeer); @@ -114,13 +115,16 @@ public static string GetTitle(OtlpSpan span, List allApplicatio return $"{OtlpApplication.GetResourceName(span.Source, allApplications)}: {span.GetDisplaySummary()}"; } - public static List Create(OtlpTrace trace, TraceDetailState state) + public static List Create(OtlpTrace trace, List logs, TraceDetailState state) { var orderedSpans = new List(); + var groupedLogs = logs.GroupBy(l => l.SpanId).ToDictionary(l => l.Key, g => g.ToList()); + var currentSpanLogIndex = 0; TraceHelpers.VisitSpans(trace, (OtlpSpan span, SpanWaterfallViewModelState s) => { - var viewModel = CreateViewModel(span, s.Depth, s.Hidden, state); + groupedLogs.TryGetValue(span.SpanId, out var spanLogs); + var viewModel = CreateViewModel(span, s.Depth, s.Hidden, state, spanLogs, ref currentSpanLogIndex); orderedSpans.Add(viewModel); s.Parent?.Children.Add(viewModel); @@ -130,7 +134,7 @@ public static List Create(OtlpTrace trace, TraceDetailSt return orderedSpans; - static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, bool hidden, TraceDetailState state) + static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, bool hidden, TraceDetailState state, List? spanLogs, ref int currentSpanLogIndex) { var traceStart = span.Trace.FirstSpan.StartTime; var relativeStart = span.StartTime - traceStart; @@ -148,6 +152,22 @@ static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, bool hid var isUninstrumentedPeer = hasPeerService && span.Kind is OtlpSpanKind.Client or OtlpSpanKind.Producer && !span.GetChildSpans().Any(); var uninstrumentedPeer = isUninstrumentedPeer ? ResolveUninstrumentedPeerName(span, state.OutgoingPeerResolvers) : null; + var spanLogVms = new List(); + if (spanLogs != null) + { + foreach (var log in spanLogs) + { + var logRelativeStart = log.TimeStamp - traceStart; + + spanLogVms.Add(new SpanLogEntryViewModel + { + Index = currentSpanLogIndex++, + LogEntry = log, + LeftOffset = logRelativeStart.TotalMilliseconds / rootDuration * 100 + }); + } + } + var viewModel = new SpanWaterfallViewModel { Children = [], @@ -156,7 +176,8 @@ static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, bool hid Width = width, Depth = depth, LabelIsRight = labelIsRight, - UninstrumentedPeer = uninstrumentedPeer + UninstrumentedPeer = uninstrumentedPeer, + SpanLogs = spanLogVms }; // Restore hidden/collapsed state to new view model. diff --git a/src/Aspire.Dashboard/Model/Otlp/TraceDetailSelectedDataViewModel.cs b/src/Aspire.Dashboard/Model/Otlp/TraceDetailSelectedDataViewModel.cs new file mode 100644 index 00000000000..cf2975b0142 --- /dev/null +++ b/src/Aspire.Dashboard/Model/Otlp/TraceDetailSelectedDataViewModel.cs @@ -0,0 +1,10 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Aspire.Dashboard.Model.Otlp; + +public sealed class TraceDetailSelectedDataViewModel +{ + public SpanDetailsViewModel? SpanViewModel { get; init; } + public StructureLogsDetailsViewModel? LogEntryViewModel { get; init; } +} diff --git a/src/Aspire.Dashboard/Model/StructureLogsDetailsViewModel.cs b/src/Aspire.Dashboard/Model/StructureLogsDetailsViewModel.cs index f926ef07c49..002cdd53d47 100644 --- a/src/Aspire.Dashboard/Model/StructureLogsDetailsViewModel.cs +++ b/src/Aspire.Dashboard/Model/StructureLogsDetailsViewModel.cs @@ -2,10 +2,20 @@ // The .NET Foundation licenses this file to you under the MIT license. using Aspire.Dashboard.Otlp.Model; +using Microsoft.Extensions.Localization; namespace Aspire.Dashboard.Model; public sealed class StructureLogsDetailsViewModel { public required OtlpLogEntry LogEntry { get; init; } + + public static string GetEventName(OtlpLogEntry logEntry, IStringLocalizer loc) + { + var eventName = OtlpHelpers.GetValue(logEntry.Attributes, "event.name") + ?? OtlpHelpers.GetValue(logEntry.Attributes, "logrecord.event.name") + ?? loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsEntryDetails)]; + + return eventName; + } } diff --git a/tests/Aspire.Dashboard.Tests/Model/SpanWaterfallViewModelTests.cs b/tests/Aspire.Dashboard.Tests/Model/SpanWaterfallViewModelTests.cs index 4c7f4a0cdd3..34ede459094 100644 --- a/tests/Aspire.Dashboard.Tests/Model/SpanWaterfallViewModelTests.cs +++ b/tests/Aspire.Dashboard.Tests/Model/SpanWaterfallViewModelTests.cs @@ -26,7 +26,7 @@ public void Create_HasChildren_ChildrenPopulated() trace.AddSpan(TelemetryTestHelpers.CreateOtlpSpan(app2, trace, scope, spanId: "1-1", parentSpanId: "1", startDate: new DateTime(2001, 1, 1, 1, 1, 3, DateTimeKind.Utc))); // Act - var vm = SpanWaterfallViewModel.Create(trace, new SpanWaterfallViewModel.TraceDetailState([], [])); + var vm = SpanWaterfallViewModel.Create(trace, [], new SpanWaterfallViewModel.TraceDetailState([], [])); // Assert Assert.Collection(vm, @@ -56,7 +56,7 @@ public void Create_OutgoingPeers_BrowserLink() trace.AddSpan(TelemetryTestHelpers.CreateOtlpSpan(app2, trace, scope, spanId: "2", parentSpanId: null, startDate: new DateTime(2001, 2, 1, 1, 1, 2, DateTimeKind.Utc), kind: OtlpSpanKind.Client)); // Act - var vm = SpanWaterfallViewModel.Create(trace, new SpanWaterfallViewModel.TraceDetailState([new BrowserLinkOutgoingPeerResolver()], [])); + var vm = SpanWaterfallViewModel.Create(trace, [], new SpanWaterfallViewModel.TraceDetailState([new BrowserLinkOutgoingPeerResolver()], [])); // Assert Assert.Collection(vm, @@ -108,6 +108,7 @@ public void MatchesFilter_VariousCases_ReturnsExpected(string filter, bool expec var vm = SpanWaterfallViewModel.Create( trace, + [], new SpanWaterfallViewModel.TraceDetailState([], [])).First(); // Act @@ -130,7 +131,7 @@ public void MatchesFilter_ParentSpanIncludedWhenChildMatched() trace.AddSpan(parentSpan); trace.AddSpan(childSpan); - var vms = SpanWaterfallViewModel.Create(trace, new SpanWaterfallViewModel.TraceDetailState([], [])); + var vms = SpanWaterfallViewModel.Create(trace, [], new SpanWaterfallViewModel.TraceDetailState([], [])); var parent = vms[0]; var child = vms[1]; @@ -152,7 +153,7 @@ public void MatchesFilter_ChildSpanIncludedWhenParentMatched() trace.AddSpan(parentSpan); trace.AddSpan(childSpan); - var vms = SpanWaterfallViewModel.Create(trace, new SpanWaterfallViewModel.TraceDetailState([], [])); + var vms = SpanWaterfallViewModel.Create(trace, [], new SpanWaterfallViewModel.TraceDetailState([], [])); var parent = vms[0]; var child = vms[1];