fix(#5370): fix logfile view styling issues and make sure that links are rendered with an underline similarly to what already happens in other views

Author: cdprete

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/QuartzJobsConfiguration.java

@@ -24,6 +24,8 @@
 import org.quartz.SimpleScheduleBuilder;
 import org.quartz.Trigger;
 import org.quartz.TriggerBuilder;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.scheduling.quartz.QuartzJobBean;
@@ -108,9 +110,11 @@ public Trigger hourlyTestTrigger() {
 	 */
 	public static class SampleJob extends QuartzJobBean {
 
+		private static final Logger logger = LoggerFactory.getLogger(SampleJob.class);
+
 		@Override
 		protected void executeInternal(org.quartz.JobExecutionContext context) {
-			System.out.println("Sample Quartz Job executed at " + new java.util.Date());
+			logger.info("Sample Quartz Job executed at {}", new java.util.Date());
 		}
 
 	}
@@ -120,9 +124,11 @@ protected void executeInternal(org.quartz.JobExecutionContext context) {
 	 */
 	public static class AnotherSampleJob extends QuartzJobBean {
 
+		private static final Logger logger = LoggerFactory.getLogger(AnotherSampleJob.class);
+
 		@Override
 		protected void executeInternal(org.quartz.JobExecutionContext context) {
-			System.out.println("Another Quartz Job executed at " + new java.util.Date());
+			logger.info("Another Quartz Job executed at {}", new java.util.Date());
 		}
 
 	}

spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts

@@ -18,6 +18,7 @@ import { EMPTY, Observable, catchError, concatMap, of, timer } from './rxjs';
 export default (getFn, interval, initialSize = 300 * 1024) => {
   let range = `bytes=-${initialSize}`;
   let size = 0;
+  let atTheEnd = false;
 
   return timer(0, interval).pipe(
     concatMap(() => {
@@ -46,7 +47,10 @@ export default (getFn, interval, initialSize = 300 * 1024) => {
         size = contentLength;
         range = `bytes=${size - 1}-`;
       } else if (response.status === 206) {
-        size = parseInt(response.headers['content-range'].split('/')[1]);
+        const contentRangeParts = response.headers['content-range'].split('/');
+        size = parseInt(contentRangeParts[1]);
+        // The end value of the range is always one byte less than the size when at the end
+        atTheEnd = parseInt(contentRangeParts[0].split('-')[1]) == size - 1;
         range = `bytes=${size - 1}-`;
       } else if (response.status === 416) {
         size = 0;
@@ -68,13 +72,14 @@ export default (getFn, interval, initialSize = 300 * 1024) => {
           skipped = size - addendum.length;
         }
       } else if (response.data.length > 1) {
-        // Remove the first byte which has been part of the previos response.
+        // Remove the first byte which has been part of the previous response.
         addendum = response.data.substring(1);
       }
 
       return addendum
         ? of({
             totalBytes: size,
+            atTheEnd,
             skipped,
             addendum,
           })

spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue

@@ -95,7 +95,7 @@
       :class="{ 'wrap-lines': wrapLines }"
       class="log-viewer overflow-x-auto text-sm -mx-6 -my-20 pt-14"
     >
-      <table class="table-striped" />
+      <table ref="logContainer" class="table-striped min-w-full" />
     </div>
   </sba-instance-section>
 </template>
@@ -136,6 +136,7 @@ export default {
     atBottom: false,
     atTop: true,
     skippedBytes: null,
+    logEnded: false,
     wrapLines: false,
     scrollSubscription: null,
   }),
@@ -184,21 +185,35 @@ export default {
           tap(
             (part) => (this.skippedBytes = this.skippedBytes || part.skipped),
           ),
+          tap((part) => (this.logEnded = part.atTheEnd)),
           concatMap((part) => chunk(part.addendum.split(/\r?\n/), 250)),
           map((lines) => of(lines, animationFrameScheduler)),
           concatAll(),
         )
         .subscribe({
           next: (lines) => {
             this.hasLoaded = true;
-            lines.forEach((line) => {
-              const row = document.createElement('tr');
-              const col = document.createElement('td');
-              const pre = document.createElement('pre');
-              pre.innerHTML = autolink(this.ansiUp.ansi_to_html(line));
-              col.appendChild(pre);
-              row.appendChild(col);
-              document.querySelector('.log-viewer > table')?.appendChild(row);
+            const logContainer = this.$refs.logContainer;
+            lines.forEach((line, index) => {
+              let content;
+              if (line) {
+                content = document.createElement('pre');
+                content.innerHTML = autolink(this.ansiUp.ansi_to_html(line));
+              } else if (!this.logEnded || index < lines.length - 1) {
+                /*
+                  If we're not at the end of the log file, probably this new line is indeed valid.
+                  If we're at the end of the log file, then it may a temporary one since the log file always ends with a new line until the next one gets written.
+                  In such a case, we ignore it if it's the last entry of the batch of lines.
+                 */
+                content = document.createElement('br');
+              }
+              if (content) {
+                const row = document.createElement('tr');
+                const col = document.createElement('td');
+                col.appendChild(content);
+                row.appendChild(col);
+                logContainer.appendChild(row);
+              }
             });
 
             if (this.atBottom) {
@@ -269,15 +284,25 @@ export default {
   max-height: 100%;
 }
 
+.log-viewer tr,
+.log-viewer td {
+  @apply w-full;
+}
+
 .log-viewer pre {
   padding: 0 0.75em;
   margin-bottom: 1px;
+  @apply w-full;
 }
 
 .log-viewer pre:hover {
   background: #dbdbdb;
 }
 
+.log-viewer a[href] {
+  @apply underline;
+}
+
 .log-viewer.wrap-lines pre {
   @apply whitespace-pre-wrap;
   word-break: break-all;