From 426f71fd986bb2bf7c294d8160c0960618ee072e Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 13:08:13 -0400
Subject: [PATCH] convert ansi colors to spans

---
 embark-ui/package.json              | 1 +
 embark-ui/src/components/Process.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/embark-ui/package.json b/embark-ui/package.json
index 3804bdd46..1032f1fb1 100644
--- a/embark-ui/package.json
+++ b/embark-ui/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "ace-mode-solidity": "^0.1.0",
+    "ansi-to-html": "^0.6.6",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^4.3.0",
diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
index 6475b0075..c13b411c1 100644
--- a/embark-ui/src/components/Process.js
+++ b/embark-ui/src/components/Process.js
@@ -1,16 +1,18 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Page} from "tabler-react";
+import Convert from 'ansi-to-html';
+const convert = new Convert();
 
 class Process extends Component {
   render() {
     const {processLogs, process}= this.props;
     return (
-      <Page.Content className="text-capitalize" title={process.name}>
+      <Page.Content title={process.name}>
         <p className="text-capitalize">State: {process.state}</p>
         <div className="logs">
           {
-            processLogs.map((item, i) => <p key={i} className={item.logLevel}>{item.msg_clear || item.msg}</p>)
+            processLogs.map((item, i) => <p key={i} className={item.logLevel} dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
           }
         </div>
       </Page.Content>