From d2323e0cb8443780bd22556dd44ae206f433fd6a Mon Sep 17 00:00:00 2001
From: Conor Mongey <conor@mongey.net>
Date: Sat, 27 Apr 2019 15:52:24 +0100
Subject: [PATCH 1/2] Converts ANSI terminal codes to HTML in logs

---
 ui/app/templates/components/task-log.hbs | 2 +-
 ui/app/utils/classes/log.js              | 4 +++-
 ui/package.json                          | 1 +
 ui/yarn.lock                             | 5 +++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
index 6c3991a35..127cb35e4 100644
--- a/ui/app/templates/components/task-log.hbs
+++ b/ui/app/templates/components/task-log.hbs
@@ -18,5 +18,5 @@
   </span>
 </div>
 <div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
-  <pre data-test-log-cli class="cli-window"><code>{{logger.output}}</code></pre>
+  <pre data-test-log-cli class="cli-window"><code>{{{logger.output}}}</code></pre>
 </div>
diff --git a/ui/app/utils/classes/log.js b/ui/app/utils/classes/log.js
index 4f4d9dee3..51c4f6afe 100644
--- a/ui/app/utils/classes/log.js
+++ b/ui/app/utils/classes/log.js
@@ -7,6 +7,7 @@ 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 +38,8 @@ 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;
+    return Anser.ansiToHtml(logs);
   }),
 
   init() {
diff --git a/ui/package.json b/ui/package.json
index 020f0dbcb..957624384 100644
--- 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/yarn.lock b/ui/yarn.lock
index d3a137b2b..ba69e1755 100644
--- 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"

From aa4c1288f394b9bfb786007464a52ab52fbb7e66 Mon Sep 17 00:00:00 2001
From: Conor Mongey <conor@mongey.net>
Date: Sat, 27 Apr 2019 16:21:26 +0100
Subject: [PATCH 2/2] Return a htmlSafe string rather than use triple curlies

---
 ui/app/templates/components/task-log.hbs | 2 +-
 ui/app/utils/classes/log.js              | 4 +++-
 ui/tests/unit/utils/log-test.js          | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
index 127cb35e4..6c3991a35 100644
--- a/ui/app/templates/components/task-log.hbs
+++ b/ui/app/templates/components/task-log.hbs
@@ -18,5 +18,5 @@
   </span>
 </div>
 <div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
-  <pre data-test-log-cli class="cli-window"><code>{{{logger.output}}}</code></pre>
+  <pre data-test-log-cli class="cli-window"><code>{{logger.output}}</code></pre>
 </div>
diff --git a/ui/app/utils/classes/log.js b/ui/app/utils/classes/log.js
index 51c4f6afe..82f96ebc3 100644
--- a/ui/app/utils/classes/log.js
+++ b/ui/app/utils/classes/log.js
@@ -1,5 +1,6 @@
 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';
@@ -39,7 +40,8 @@ const Log = EmberObject.extend(Evented, {
   // the logPointer is pointed at head or tail
   output: computed('logPointer', 'head', 'tail', function() {
     let logs = this.logPointer === 'head' ? this.head : this.tail;
-    return Anser.ansiToHtml(logs);
+    let colouredLogs = Anser.ansiToHtml(logs);
+    return htmlSafe(colouredLogs);
   }),
 
   init() {
diff --git a/ui/tests/unit/utils/log-test.js b/ui/tests/unit/utils/log-test.js
index 59793669a..b3be1e18b 100644
--- 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'
     );