Merge pull request #5620 from Mongey/cm-color-ui

Converts ANSI terminal codes to HTML in logs
hashicorp · May 6, 2019 · 63e5aea · 63e5aea
2 parents 9b3ff8f + aa4c128
commit 63e5aea
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/ui/app/utils/classes/log.js b/ui/app/utils/classes/log.js
@@ -1,12 +1,14 @@
 import { alias } from '@ember/object/computed';
 import { assert } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
 import Evented from '@ember/object/evented';
 import EmberObject, { computed } from '@ember/object';
 import { assign } from '@ember/polyfills';
 import queryString from 'query-string';
 import { task } from 'ember-concurrency';
 import StreamLogger from 'nomad-ui/utils/classes/stream-logger';
 import PollLogger from 'nomad-ui/utils/classes/poll-logger';
+import Anser from 'anser';
 
 const MAX_OUTPUT_LENGTH = 50000;
 
@@ -37,7 +39,9 @@ const Log = EmberObject.extend(Evented, {
   // The top or bottom of the log, depending on whether
   // the logPointer is pointed at head or tail
   output: computed('logPointer', 'head', 'tail', function() {
-    return this.logPointer === 'head' ? this.head : this.tail;
+    let logs = this.logPointer === 'head' ? this.head : this.tail;
+    let colouredLogs = Anser.ansiToHtml(logs);
+    return htmlSafe(colouredLogs);
   }),
 
   init() {

diff --git a/ui/package.json b/ui/package.json
@@ -25,6 +25,7 @@
     "'app/styles/**/*.*'": ["prettier --write", "git add"]
   },
   "devDependencies": {
+    "anser": "^1.4.8",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@ember/jquery": "^0.6.0",
     "@ember/optional-features": "^0.7.0",

diff --git a/ui/tests/unit/utils/log-test.js b/ui/tests/unit/utils/log-test.js
@@ -100,9 +100,9 @@ module('Unit | Util | Log', function(hooks) {
     });
 
     await settled();
-    assert.ok(log.get('output').endsWith(truncationMessage), 'Truncation message is shown');
+    assert.ok(log.get('output').toString().endsWith(truncationMessage), 'Truncation message is shown');
     assert.equal(
-      log.get('output').length,
+      log.get('output').toString().length,
       50000 + truncationMessage.length,
       'Output is truncated the appropriate amount'
     );

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1129,6 +1129,11 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+anser@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.8.tgz#19a3bfc5f0e31c49efaea38f58fd0d136597f2a3"
+  integrity sha512-tVHucTCKIt9VRrpQKzPtOlwm/3AmyQ7J+QE29ixFnvuE2hm83utEVrN7jJapYkHV6hI0HOHkEX9TOMCzHtwvuA==
+
 ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"