diff --git a/src/Microsoft.Tye.Hosting/Dashboard/Pages/Logs.razor b/src/Microsoft.Tye.Hosting/Dashboard/Pages/Logs.razor index f6862557..34130514 100644 --- a/src/Microsoft.Tye.Hosting/Dashboard/Pages/Logs.razor +++ b/src/Microsoft.Tye.Hosting/Dashboard/Pages/Logs.razor @@ -1,7 +1,20 @@ @page "/logs/{ServiceName}" +@inject IJSRuntime JS @inject Application application @implements IDisposable + +

Logs for @ServiceName

@if (ApplicationLogs == null) @@ -12,11 +25,15 @@ else {
+
-
+
@foreach (var log in ApplicationLogs) { -
@log.Text
+
@log.Text
}
} @@ -29,6 +46,8 @@ else private IDisposable? _subscription; + private bool _autoScroll = true; + protected override void OnInitialized() { // TODO: handle this returning false @@ -36,6 +55,7 @@ else { ApplicationLogs = service.CachedLogs.Select((item, index) => (item, index)).ToList(); var count = ApplicationLogs.Count; + StateHasChanged(); _subscription = service.Logs.Subscribe(log => { @@ -51,13 +71,32 @@ else base.OnInitialized(); } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (_autoScroll) + { + await ScrollToBottom(); + } + + await base.OnAfterRenderAsync(firstRender); + } + private void ClearLogs() { ApplicationLogs?.Clear(); } + + private void ToggleAutoScroll() => _autoScroll = !_autoScroll; + + private void DisableAutoScroll() => _autoScroll = false; void IDisposable.Dispose() { _subscription?.Dispose(); } + + ValueTask ScrollToBottom() + { + return JS.InvokeVoidAsync("scrollToBottom", "logview"); + } } diff --git a/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml b/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml index 78c6d557..1ed44016 100644 --- a/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml +++ b/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml @@ -40,6 +40,7 @@ display: inherit } + diff --git a/src/Microsoft.Tye.Hosting/wwwroot/js/utilities.js b/src/Microsoft.Tye.Hosting/wwwroot/js/utilities.js new file mode 100644 index 00000000..703de4a5 --- /dev/null +++ b/src/Microsoft.Tye.Hosting/wwwroot/js/utilities.js @@ -0,0 +1,6 @@ +/** Scroll to the bottom of the input element */ +function scrollToBottom(elementId) { + var elem = document.getElementById(elementId); + + elem.scrollTop = elem.scrollHeight; +} \ No newline at end of file