diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
index 127cb35e443..6c3991a359c 100644
--- a/ui/app/templates/components/task-log.hbs
+++ b/ui/app/templates/components/task-log.hbs
@@ -18,5 +18,5 @@
-
{{{logger.output}}}
+
{{logger.output}}
diff --git a/ui/app/utils/classes/log.js b/ui/app/utils/classes/log.js
index 51c4f6afecf..82f96ebc3a9 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 59793669ae2..b3be1e18b9f 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'
);