From 793819c2eb50ce335f7fbc8048dc5fee85bb104f Mon Sep 17 00:00:00 2001
From: Erik O'Leary <969938+onionhammer@users.noreply.github.com>
Date: Tue, 6 Apr 2021 11:36:19 -0500
Subject: [PATCH] Implements autoscroll within log view (#1001)

---
 .../Dashboard/Pages/Logs.razor                | 43 ++++++++++++++++++-
 .../Dashboard/Pages/_Host.cshtml              |  1 +
 .../wwwroot/js/utilities.js                   |  6 +++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/Microsoft.Tye.Hosting/wwwroot/js/utilities.js
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
 
+<style>
+    #logview {
+        overflow-y: scroll;
+        position: absolute;
+        height: 70vh;
+        width: 75%;
+        color: white;
+        background-color: black;
+        padding: 10px;
+    }
+</style>
+
 <h3>Logs for @ServiceName</h3>
 
 @if (ApplicationLogs == null)
@@ -12,11 +25,15 @@ else
 {
     <div style="padding:10px">
         <button type="button" class="btn btn-primary" @onclick=ClearLogs>Clear Log</button>
+        <button type="button" class="btn btn-primary @(@_autoScroll ? "active" : "")" 
+                @onclick=ToggleAutoScroll>
+            Follow Logs [@(_autoScroll ? "ON" : "OFF")]
+        </button>
     </div>
-    <div style="overflow-y: scroll;position: absolute;height: 84%; width:75%; color:white;background-color:black;padding:10px">
+    <div id="logview" class="autoscroll" @onmousedown=DisableAutoScroll>
         @foreach (var log in ApplicationLogs)
         {
-            <div style="width:100%">@log.Text</div>
+            <div>@log.Text</div>
         }
     </div>
 }
@@ -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
         }
     </style>
+    <script src="js/utilities.js"></script>
 </head>
 <body>
     <app>
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
