Update job item list
import * as React from "react";
-import {Button, ButtonToolbar} from "react-bootstrap";
-import {LinkContainer} from "react-router-bootstrap";
+import * as moment from "moment";
import {JobModel} from "../models/job";
-import {getCssClassForStatus} from "../constants/utils"
+import {getCssClassForStatus, humanizeTimeDelta} from "../constants/utils"
export interface Props {
@@ -13,37 +12,59 @@ export interface Props {
function Job({job, onDelete}: Props) {
+ let totalRun = humanizeTimeDelta(job.started_at, job.finished_at);
let statusCssClass = getCssClassForStatus(job.last_status);
let jobDetailUrl = `jobs/${job.sequence}/`;
return (
<div className="row">
- <div className="col-md-12 block">
- <ButtonToolbar className="pull-right">
- <LinkContainer to={jobDetailUrl}>
- <Button className="button">
- Details
- <i className="fa fa-list-alt icon" aria-hidden="true"></i>
- </Button>
- </LinkContainer>
- </ButtonToolbar>
+ <div className="col-md-10 block">
<span className="title">
- <i className="fa fa-cube icon" aria-hidden="true"></i>
+ <i className="fa fa-tasks icon" aria-hidden="true"></i>
{job.unique_name}
<span className={`status alert alert-${statusCssClass}`}>{job.last_status}</span>
</span>
- {job.started_at &&
<div className="meta">
+ </div>
+ <div className="meta">
+ <span className="meta-info">
+ <i className="fa fa-certificate icon" aria-hidden="true"></i>
+ <span className="title">Role:</span>
+ {job.role}
+ </span>
+ <span className="meta-info">
+ <i className="fa fa-circle icon" aria-hidden="true"></i>
+ <span className="title">Sequence:</span>
+ {job.sequence}
+ </span>
+ </div>
+ </div>
+ <div className="col-md-2 block">
+ {job.started_at &&
+ <div className="row meta">
+ <span className="meta-info">
<i className="fa fa-clock-o icon" aria-hidden="true"></i>
- <span className="title">Started at:</span>
- {job.started_at}
+ <span className="title">Started:</span>
+ {moment(job.started_at).fromNow()}
+ </span>
</div>
}
{job.finished_at &&
- <div className="meta">
+ <div className="row meta">
+ <span className="meta-info">
<i className="fa fa-clock-o icon" aria-hidden="true"></i>
- <span className="title">Finished at:</span>
- {job.finished_at}
+ <span className="title">Finished:</span>
+ {moment(job.finished_at).fromNow()}
+ </span>
+ </div>
+ }
+ {totalRun &&
+ <div className="row meta">
+ <span className="meta-info">
+ <i className="fa fa-hourglass icon" aria-hidden="true"></i>
+ <span className="title">Total run:</span>
+ {totalRun}
+ </span>
</div>
}
</div>
