Return a htmlSafe string rather than use triple curlies

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>

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() {

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'
     );