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/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>
@@ -194,11 +194,16 @@ export default {
             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);
+              let content;
+              if (line) {
+                content = document.createElement('pre');
+                content.innerHTML = autolink(this.ansiUp.ansi_to_html(line));
+              } else {
+                content = document.createElement('br');
+              }
+              col.appendChild(content);
               row.appendChild(col);
-              document.querySelector('.log-viewer > table')?.appendChild(row);
+              this.$refs.logContainer.appendChild(row);
             });
 
             if (this.atBottom) {
@@ -269,15 +274,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;