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
{
+
-
+
}
@@ -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