import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Timestamp from './timestamp.js';
import { api, httpGET, httpStreamGET } from '../http.js';
import './output.css';
export default class Output extends Component {
constructor(props) {
super(props);
this.state = {
job: null,
xhr: null
};
}
componentDidMount() {
let jobID = this.props.jobID;
if (jobID !== null) {
this.loadCommandLog(jobID);
this.loadJobDetails(jobID);
}
}
componentWillUnmount() {
if (this.state.xhr !== null) {
this.state.xhr.abort();
}
}
loadJobDetails(id) {
if (id === null) {
return;
}
httpGET(api("/jobs/" + id),
(status, body) => {
this.setState({job: JSON.parse(body)});
},
(error) => {
console.log("Failed to load job details:", error);
}
);
}
loadCommandLog(id) {
if (id === null || this.state.xhr !== null) {
return;
}
let xhr = httpStreamGET(api("/jobs/" + id + "/log"),
(chunk) => { // Progress
let target = this.refs["output"];
target.innerHTML += chunk.replace(/\n/g, "
");
this.autoScroll();
},
(status) => { // Complete
// Request cancelled
if (status === 0) {
return;
}
// Reload job details
this.setState({xhr: null});
this.loadJobDetails(id);
},
(error) => {
let target = this.refs["output"];
target.innerHTML = "Failed to fetch command log: "+ error;
}
);
this.setState({xhr: xhr});
}
autoScroll() {
// TODO: Figure out how to make it convinient
}
render() {
var outputClass = "output";
if (this.state.job) {
outputClass += " visible";
}
return (