feat(static): Show the logs in chronological order and follow them pr…

…operly

README.md

@@ -44,11 +44,19 @@ through the same port, just with different domains (like `service1.local`).
 ## TODO
 
 - [X] Implement `direnv` support `direnv exec $dirname $command`.
-- [X] Implement keybind support in the web interface (`esc` to unselect server,
-      `t` to toggle server, `n` for next server, `p` for previous server).
-- [X] Implement an overview of the keybind in the web interface (press `h` to display popup).
+- [X] Implement keybind support in the web interface (`esc` to
+      unselect server, `t` to toggle server, `n` for next server, `p`
+      for previous server).
+- [X] Implement an overview of the keybind in the web interface (press
+      `h` to display popup).
 - [X] Refresh data and interface over websockets.
+- [X] Print logs in cronomological order in the web interface and stay
+      scrolled down. Also allow to disable the auto scroll and show a
+      button to scroll down if not scrolled down. Add keybind `e` to
+      scroll to end.
 - Improve the kill check for stopped processes.
 - Implement a dynamic favicon to include a number of running servers.
-- Implement parsing of terminal colors to display these in the web (and also terminate them at end of lines in CLI tail)
-- Implement a getting started overview in the web interface on the frontpage.
+- Implement parsing of terminal colors to display these in the web
+  (and also terminate them at end of lines in CLI tail)
+- Implement a getting started overview in the web interface on the
+  frontpage.

static/index.html

@@ -39,8 +39,8 @@ <h1 @click="selectedServer = null">goprocmgr</h1>
                     <div x-show="!selectedServer" id="frontpage" x-text="serverList.length === 0 ? 'No servers configured yet :&rpar;' : 'Select a server to view its logs :&rpar;'"></div>
                     <div x-show="selectedServer && !getServer(selectedServer)?.is_running" id="frontpage" x-text="'Server &ldquo;' + selectedServer + '&rdquo; is currently not started :&rpar;'"></div>
                     <div x-show="selectedServer && getServer(selectedServer)?.is_running">
-                        <ul id="logs-wrapper">
-                            <template x-for="line in serverLogs.slice().reverse()" :key="line.timestamp">
+                        <ul id="logs-wrapper" x-ref="logsWrapper" @scroll="checkScrollPosition">
+                            <template x-for="line in serverLogs" :key="line.timestamp">
                                 <li :class="{ 'stdout': line.output === 'stdout', 'stderr': line.output === 'stderr' }">
                                     <span x-text="formatTimestamp(line.timestamp)" class="timestamp"></span> |
                                     <span x-text="line.message" class="message"></span>
@@ -49,6 +49,9 @@ <h1 @click="selectedServer = null">goprocmgr</h1>
                         </ul>
                     </div>
                 </div>
+                <aside x-show="getServer(selectedServer)?.is_running && !autoScroll" id="scroll-to-bottom">
+                    <button @click="scrollToBottom()">&#8595;</button><!-- Arrow down symbol -->
+                </aside>
             </div>
 
             <!-- Popup for keybinds -->
@@ -58,6 +61,7 @@ <h2>Keybinds</h2>
                     <ul>
                         <li><strong>Esc</strong>: Deselect server</li>
                         <li><strong>t</strong>: Toggle server state</li>
+                        <li><strong>e</strong>: Scroll to end</li>
                         <li><strong>n</strong>: Select next server</li>
                         <li><strong>p</strong>: Select previous server</li>
                         <li><strong>h</strong>: Show this help popup</li>

static/script.js

@@ -19,6 +19,9 @@ document.addEventListener('alpine:init', () => {
         // The WebSocket connection, this is used to get data from the server.
         ws: null,
 
+        // Allow auto scrolling
+        autoScroll: true,
+
         // Initialize the application
         init() {
             // Setup the WebSocket connection to get data from the server.
@@ -37,6 +40,15 @@ document.addEventListener('alpine:init', () => {
                 this.serverLogs = []
                 this.subscribeToServer(value)
             })
+
+            // Watch for changes in the serverLogs array
+            this.$watch('serverLogs', (_) => {
+                this.$nextTick(() => {
+                    if (this.autoScroll) {
+                        this.scrollToBottom()
+                    }
+                })
+            })
         },
 
         // Setup the WebSocket connection to get data from the server.
@@ -79,6 +91,20 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        // Method to check scroll position to enable or disable autoScroll
+        checkScrollPosition() {
+            const logsWrapper = this.$refs.logsWrapper
+
+            // If the user is near the bottom, enable auto-scroll
+            this.autoScroll = logsWrapper.scrollTop + logsWrapper.clientHeight >= logsWrapper.scrollHeight - 10
+        },
+
+        scrollToBottom() {
+            if (this.$refs.logsWrapper) {
+                this.$refs.logsWrapper.scrollTop = this.$refs.logsWrapper.scrollHeight
+            }
+        },
+
         // Subscribe to updates for a specific server
         subscribeToServer(serverName) {
             if (this.ws && this.ws.readyState === WebSocket.OPEN && serverName) {
@@ -121,6 +147,10 @@ document.addEventListener('alpine:init', () => {
                 this.selectedServer = null
             }
 
+            if (this.keyEvent.key === 'e') {
+                this.scrollToBottom()
+            }
+
             if (this.keyEvent.key === 't' && this.selectedServer) {
                 this.toggleServer(this.selectedServer)
             }

static/style.css

@@ -10,6 +10,8 @@
     --nav-slider-fg-color: #ffffff;
     --nav-stderr-counter-color: #910000;
     --nav-stdout-counter-color: #015301;
+    --popup-button-bg-color: #007bff;
+    --popup-button-fg-color: #ffffff;
     --stderr-bg-color: #ffe5e5;
     --stdout-bg-color: #d5ffd5;
 }
@@ -204,6 +206,25 @@ body {
     transform: translateX(1.5rem);
 }
 
+#app aside#scroll-to-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+#app aside#scroll-to-bottom button {
+    background: var(--popup-button-bg-color);
+    border-radius: 1.5rem;
+    border: 0;
+    color: var(--popup-button-fg-color);
+    font-size: 2rem;
+    font-weight: bolder;
+    height: 3rem;
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+    width: 3rem;
+}
+
 #app div.popup {
     position: fixed;
     top: 0;
@@ -241,13 +262,13 @@ body {
 }
 
 #app div.popup div.popup-content button {
-    margin-top: 20px;
-    padding: 10px 20px;
-    border: none;
-    background: #007bff;
-    color: white;
+    background: var(--popup-button-bg-color);
     border-radius: 4px;
+    border: none;
+    color: var(--popup-button-fg-color);
     cursor: pointer;
+    margin-top: 20px;
+    padding: 10px 20px;
 }
 
 #app div.popup div.popup-content button:hover {