feat(static): Display time in the log message viewer

TaserudConsulting · Jun 8, 2024 · 4accb68 · 4accb68
1 parent 2283003
commit 4accb68
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/static/index.html b/static/index.html
@@ -41,7 +41,10 @@ <h1 @click="selectedServer = null">goprocmgr</h1>
                     <div x-show="selectedServer && getServer(selectedServer)?.running">
                         <ul id="logs-wrapper">
                             <template x-for="line in [...getServer(selectedServer)?.logs ?? []].reverse()">
-                                <li :class="{ 'stdout': line.output === 'stdout', 'stderr': line.output === 'stderr' }" x-text="line.message"></li>
+                                <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>
+                                </li>
                             </template>
                         </ul>
                     </div>

diff --git a/static/script.js b/static/script.js
@@ -56,6 +56,15 @@ document.addEventListener('alpine:init', () => {
         countLogsByOutput(name, output) {
             return this.getServer(name).logs.filter(log => log.output === output).length
         },
+        formatTimestamp(timestamp) {
+            // Format the timestamp to HH:MM:SS
+            return new Date(timestamp).toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false,
+            })
+        },
         handleKeyEvents() {
             if (this.keyEvent.key === 'Escape') {
                 this.selectedServer = null

diff --git a/static/style.css b/static/style.css
@@ -126,6 +126,10 @@ body {
     padding: 0;
 }
 
+#app div#content ul#logs-wrapper li span.timestamp {
+    font-weight: bold;
+}
+
 #app div#content ul#logs-wrapper li.stdout {
     background-color: var(--stdout-bg-color);
 }