localhots
/
cmdui
1
0
Fork 0
Code Releases Activity

Add ascii color conversion

This commit is contained in:
Gregory Eremin 2018-09-07 15:16:30 +02:00
parent 45cc50c371
commit f592145b60
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/package-lock.json generated
View File

@ -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",

1
frontend/package.json
View File

@ -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",

22
frontend/src/blocks/output.js
View File

@ -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()}