Support ansi colors and hyperlinks in logfile view

Everythind that looks like an http(s) url will be rendered as hyperlink and ansi-color escapes are now supported. In order to have ansi-colors in the file output you need to set a custom pattern. e.g.: logging.pattern.file="%clr(%d{yyyy-MM-dd HH:mm:ss.SSS}){faint} %clr(%5p) %clr(${PID}){magenta} %clr(---){faint} %clr([%15.15t]){faint} %clr(%-40.40logger{39}){cyan} %clr(:){faint} %m%n%wEx" closes codecentric#670

Author: joshiste

spring-boot-admin-docs/src/main/asciidoc/client.adoc

@@ -43,6 +43,25 @@ In case you are using the `spring-boot-admin-starter-client` it will be pulled i
 </dependency>
 ----
 
+[[logfile]]
+=== Logfile viewer ===
+
+By default the logfile is not accessible via actuator endpoints and therefore not visible in Spring Boot Admin.
+In order to enable the logfile actuator endpoint you need to configure Spring Boot to write a logfile, either by setting
+`logging.path` or `logging.file`.
+
+Spring Boot Admin will detect everything that looks like an URL and render it as hyperlink.
+
+ANSI color-escapes are also supported. You need to set a custom file log pattern as Spring Boot's default one doesn't use colors.
+
+.application.properties
+----
+logging.file=/var/log/sample-boot-application.log <1>
+logging.pattern.file=%clr(%d{yyyy-MM-dd HH:mm:ss.SSS}){faint} %clr(%5p) %clr(${PID}){magenta} %clr(---){faint} %clr([%15.15t]){faint} %clr(%-40.40logger{39}){cyan} %clr(:){faint} %m%n%wEx <2>
+----
+<1> Destination the logfile is written to. Enables the logfile actuator endpoint.
+<2> File log pattern using ANSI colors.
+
 [[spring-boot-admin-client]]
 === Spring Boot Admin Client ===
 

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/resources/application.yml

@@ -1,10 +1,12 @@
 ---
 info:
  scm-url: "@scm.url@"
- build-url: "http://travis-ci.org/@env.TRAVIS_REPO_SLUG@/builds/@env.TRxAVIS_BUILD_ID@"
+ build-url: "http://travis-ci.org/@env.TRAVIS_REPO_SLUG@/builds/@env.TRAVIS_BUILD_ID@"
 
 logging:
  file: "target/boot-admin-sample-servlet.log"
+ pattern:
+ file: "%clr(%d{yyyy-MM-dd HH:mm:ss.SSS}){faint} %clr(%5p) %clr(${PID}){magenta} %clr(---){faint} %clr([%15.15t]){faint} %clr(%-40.40logger{39}){cyan} %clr(:){faint} %m%n%wEx"
 
 management:
  endpoints:

spring-boot-admin-server-ui/package-lock.json

@@ -14,6 +14,7 @@
  "@fortawesome/fontawesome-free-regular": "^5.0.13",
  "@fortawesome/fontawesome-free-solid": "^5.0.13",
  "@fortawesome/vue-fontawesome": "0.0.23",
+ "ansi_up": "^3.0.0",
  "axios": "^0.18.0",
  "bulma": "^0.7.1",
  "bulma-badge": "^1.0.1",

spring-boot-admin-server-ui/package.json

@@ -63,7 +63,7 @@
  <configuration>
  <executable>npm</executable>
  <arguments>
- <argument>install</argument>
+ <argument>ci</argument>
  </arguments>
  </configuration>
  </execution>

spring-boot-admin-server-ui/pom.xml

@@ -31,7 +31,7 @@
  },
  computed: {
  yaml() {
- return linkify(yaml.stringify(this.value, 2), 50);
+ return linkify(yaml.stringify(this.value, 2), {maxLength: 50});
  }
  }
  }

spring-boot-admin-server-ui/src/main/frontend/components/sba-formatted-obj.vue

@@ -43,12 +43,13 @@ const shorten = (value, max) => {
  }
 };
 
-export default (input, maxLength) => linkifyStr(input, {
+export default (input, options) => linkifyStr(input, {
  className: null,
  format(value, type) {
  if (type === 'url') {
- return shorten(value, maxLength || Number.MAX_VALUE);
+ return shorten(value, options.maxLength || Number.MAX_VALUE);
  }
  return value;
- }
+ },
+ ...options
 });

spring-boot-admin-server-ui/src/main/frontend/utils/linkify.js

@@ -44,7 +44,9 @@
 <script>
  import subscribing from '@/mixins/subscribing';
  import Instance from '@/services/instance';
+ import linkify from '@/utils/linkify';
  import {animationFrame, Observable} from '@/utils/rxjs';
+ import AnsiUp from 'ansi_up';
  import _ from 'lodash';
  import prettyBytes from 'pretty-bytes';
 
@@ -63,6 +65,9 @@
  atTop: false,
  skippedBytes: null
  }),
+ created() {
+ this.ansiUp = new AnsiUp();
+ },
  mounted() {
  window.addEventListener('scroll', this.onScroll);
  },
@@ -84,7 +89,13 @@
  vm.hasLoaded = true;
  lines.forEach(line => {
  const child = document.createElement('pre');
- child.textContent = line;
+ child.innerHTML = this.ansiUp.ansi_to_html(linkify(line, {
+ validate: {
+ url(value) {
+ return /^(http|ftp)s?:\/\//.test(value);
+ }
+ }
+ }));
  vm.$el.appendChild(child);
  });