43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import Timestamp from './timestamp.js';
|
|
import './job_list.css';
|
|
|
|
export default class JobList extends Component {
|
|
render() {
|
|
if (this.props.jobs === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="history-page">
|
|
<div className={"job-details short legend"}>
|
|
<div></div>
|
|
<div>ID</div>
|
|
<div>Command</div>
|
|
<div>User</div>
|
|
<div>Started</div>
|
|
<div>Took</div>
|
|
</div>
|
|
{this.props.jobs.map(this.renderJob)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
renderJob(job) {
|
|
let shortID = job.id.substring(0, 8);
|
|
return (
|
|
<div key={job.id} className={"job-details short"}>
|
|
<div className={"dot "+ job.state}></div>
|
|
<div className="id"><Link to={"/cmd/"+ job.command +"/jobs/"+ job.id}>{shortID}</Link></div>
|
|
<div className="command"><Link to={"/cmd/"+ job.command +"/jobs"}>{job.command}</Link></div>
|
|
<div className="user"><Link to={"/users/"+ job.user_id +"/jobs"}>{job.user.name}</Link></div>
|
|
<div className="started"><Timestamp date={job.started_at} /></div>
|
|
<div className="took"><Timestamp from={job.started_at} until={job.finished_at} /></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|