Support ansi colors and hyperlinks in logfile view

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

 ---
 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

@@ -386,6 +386,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi_up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-3.0.0.tgz",
+      "integrity": "sha1-J/Rdj0V9nO/1nk6gPI5vE8GjA+g="
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",

spring-boot-admin-server-ui/package.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/pom.xml

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

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

@@ -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/utils/linkify.js

@@ -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/views/instances/logfile/index.vue

@@ -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);
               });