diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fdf7c1a..5a516d0 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 71c02a7..d4254d3 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/blocks/output.js b/frontend/src/blocks/output.js
index af82530..f8a7675 100644
--- a/frontend/src/blocks/output.js
+++ b/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, "
")
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 (