diff --git a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor index a6c101ed3b2..f5dde633a70 100644 --- a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor +++ b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor @@ -34,39 +34,37 @@ } -
+
- - - - @context.Application.ApplicationName - - - - - - - @if (!string.IsNullOrEmpty(context.TraceId)) - { - - @OtlpHelpers.ToShortenedId(context.TraceId) - - } - - - View - - - -  No semantic logs found - - -
- - } - -
-} + + + + @context.Application.ApplicationName + + + + + + + @if (!string.IsNullOrEmpty(context.TraceId)) + { + + @OtlpHelpers.ToShortenedId(context.TraceId) + + } + + + View + + + +  No semantic logs found + + + + + + @code { private static readonly ApplicationViewModel AllApplication = new ApplicationViewModel { Id = null, Name = "(All)" }; @@ -142,6 +140,7 @@ _applications = TelemetryRepository.GetApplications().Select(a => new ApplicationViewModel { Id = a.InstanceId, Name = a.ApplicationName }).ToList(); _applications.Insert(0, AllApplication); _selectedApplication = _applications.SingleOrDefault(e => e.Id == ApplicationInstanceId) ?? AllApplication; + UpdateSubscription(); return Task.CompletedTask; } @@ -150,6 +149,8 @@ { NavigationManager.NavigateTo($"/SemanticLogs/{_selectedApplication.Id}"); _applicationChanged = true; + UpdateSubscription(); + return Task.CompletedTask; } @@ -225,10 +226,13 @@ { if (_applicationChanged) { - await JS.InvokeVoidAsync("switchLogsApplication"); + await JS.InvokeVoidAsync("resetContinuousScrollPosition"); _applicationChanged = false; } - await JS.InvokeVoidAsync("scollToLogsEnd"); + if (firstRender) + { + await JS.InvokeVoidAsync("initializeContinuousScroll"); + } } public void Dispose() diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor b/src/Aspire.Dashboard/Components/Pages/Traces.razor index e23b314ac72..a6029485da8 100644 --- a/src/Aspire.Dashboard/Components/Pages/Traces.razor +++ b/src/Aspire.Dashboard/Components/Pages/Traces.razor @@ -23,7 +23,7 @@ @bind-SelectedOption="_selectedApplication" @bind-SelectedOption:after="HandleSelectedApplicationChangedAsync" /> -
+
@@ -138,6 +138,7 @@ _applications = TelemetryRepository.GetApplications().Select(a => new ApplicationViewModel { Id = a.InstanceId, Name = a.ApplicationName }).ToList(); _applications.Insert(0, AllApplication); _selectedApplication = _applications.SingleOrDefault(e => e.Id == ApplicationInstanceId) ?? AllApplication; + UpdateSubscription(); return Task.CompletedTask; } @@ -171,10 +172,10 @@ { if (_applicationChanged) { - await JS.InvokeVoidAsync("switchLogsApplication"); + await JS.InvokeVoidAsync("resetContinuousScrollPosition"); _applicationChanged = false; } - await JS.InvokeVoidAsync("scollToLogsEnd"); + await JS.InvokeVoidAsync("initializeContinuousScroll"); } public void Dispose() diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index c0dc12c7c42..f70c533c3f1 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/src/Aspire.Dashboard/wwwroot/css/app.css @@ -149,7 +149,7 @@ fluent-toolbar[orientation=horizontal] { width: 100%; overflow: auto; } - .datagrid-overflow-area fluent-data-grid { + .datagrid-overflow-area .empty-content { width: 100%; - height: 100%; + height: 100px; } diff --git a/src/Aspire.Dashboard/wwwroot/js/app.js b/src/Aspire.Dashboard/wwwroot/js/app.js index 7df20360665..ac4d5bf5e40 100644 --- a/src/Aspire.Dashboard/wwwroot/js/app.js +++ b/src/Aspire.Dashboard/wwwroot/js/app.js @@ -25,15 +25,14 @@ window.scrollToEndInTextArea = function (classSelector) { let isScrolledToContent = false; -window.switchLogsApplication = function () { +window.resetContinuousScrollPosition = function () { // Reset to scrolling to the end of the content after switching. isScrolledToContent = false; } -window.scollToLogsEnd = function () { - const container = document.querySelector('.SemanticLogsOverflow'); - const grid = document.querySelector('.SemanticLogsDataGrid'); - if (container == null || grid == null) { +window.initializeContinuousScroll = function () { + const container = document.querySelector('.continuous-scroll-overflow'); + if (container == null) { return; } @@ -50,7 +49,9 @@ window.scollToLogsEnd = function () { container.scrollTop = container.scrollHeight; } }); - observer.observe(grid); + for (const child of container.children) { + observer.observe(child); + } }; function isScrolledToBottom(container) {