Add ascii color conversion

frontend/package-lock.json

@@ -135,6 +135,14 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi-to-html": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.6.tgz",
+      "integrity": "sha512-90M/2sZna3OsoOEbSyXK46poFnlClBC53Rx6etNKQK7iShsX5fI5E/M9Ld6FurtLaxAWLuAPi0Jp8p3y5oAkxg==",
+      "requires": {
+        "entities": "^1.1.1"
+      }
+    },
     "anymatch": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "ansi-to-html": "^0.6.6",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
     "react-router-dom": "^4.3.1",

frontend/src/blocks/output.js

@@ -5,10 +5,13 @@ import Timestamp from './timestamp.js'
 import { api, httpGET, httpStreamGET } from '../http.js'
 import './output.css'
 
+let Convert = require('ansi-to-html')
+let converter = new Convert()
+
 export default class Output extends Component {
     constructor(props) {
         super(props)
-        this.state = {job: null, xhr: null}
+        this.state = { job: null, xhr: null }
     }
 
     componentWillReceiveProps(props) {
@@ -38,7 +41,7 @@ export default class Output extends Component {
     loadJobDetails(id) {
         httpGET(api("/jobs/" + id),
             (status, body) => {
-                this.setState({job: JSON.parse(body)})
+                this.setState({ job: JSON.parse(body) })
             },
             (error) => {
                 console.log("Failed to load job details:", error)
@@ -54,6 +57,7 @@ export default class Output extends Component {
         let xhr = httpStreamGET(api("/jobs/" + id + "/log"),
             (chunk) => { // Progress
                 let target = this.refs["output"]
+                chunk = converter.toHtml(chunk)
                 target.innerHTML += chunk.replace(/\n/g, "<br/>")
                 this.autoScroll()
             },
@@ -64,15 +68,15 @@ export default class Output extends Component {
                 }
 
                 // Reload job details
-                this.setState({xhr: null})
+                this.setState({ xhr: null })
                 this.loadJobDetails(id)
             },
             (error) => {
                 let target = this.refs["output"]
-                target.innerHTML = "Failed to fetch command log: "+ error
+                target.innerHTML = "Failed to fetch command log: " + error
             }
         )
-        this.setState({xhr: xhr})
+        this.setState({ xhr: xhr })
     }
 
     autoScroll() {
@@ -106,21 +110,21 @@ export default class Output extends Component {
         return (
             <div className="job-details full">
                 <div className="item command">
-                    <span className="command"><Link to={"/cmd/"+ details.command + "/jobs"}>{details.command}</Link></span>
+                    <span className="command"><Link to={"/cmd/" + details.command + "/jobs"}>{details.command}</Link></span>
                     {args}
                     <span className="flags">{details.flags}</span>
                 </div>
                 <div className="item id">
                     <div className="name">ID</div>
-                    <div className="val"><Link to={"/cmd/"+ details.command + "/jobs/"+ details.id}>{details.id}</Link></div>
+                    <div className="val"><Link to={"/cmd/" + details.command + "/jobs/" + details.id}>{details.id}</Link></div>
                 </div>
                 <div className="item state">
                     <div className="name">Status</div>
-                    <div className={"val "+details.state}>{state}</div>
+                    <div className={"val " + details.state}>{state}</div>
                 </div>
                 <div className="item user">
                     <div className="name">User</div>
-                    <div className="val"><Link to={"/users/"+ details.user.id +"/jobs"}>{details.user.name}</Link></div>
+                    <div className="val"><Link to={"/users/" + details.user.id + "/jobs"}>{details.user.name}</Link></div>
                 </div>
                 {this.renderStarted()}
                 {this.renderFinished()}