Permalink
Browse files

updating gulp file and file structure

  • Loading branch information...
stevenweaver committed Oct 6, 2015
1 parent 8221286 commit 4e46c2d44f99ea0eaf06cab2a95aeff31e46414f
View
@@ -1,3 +1 @@
[submodule "contrib/bootstrap"]
path = contrib/bootstrap
url = git@github.com:twbs/bootstrap.git
No changes.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
View
@@ -0,0 +1,114 @@
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var Job = React.createClass({
mixins: [SetIntervalMixin],
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
},
tick: function() {
this.setState({
running_time : this.timeDiff(this.props.job.start_time),
queue_time : this.getQueueTime()
});
},
timeDiff : function(start_time) {
if(start_time) {
var zero = d3.format("02d"),
hours = moment().diff(start_time, 'hours'),
mins = moment().diff(start_time, 'minutes') % 60,
secs = moment().diff(start_time, 'seconds') % 60,
diff = zero(hours) + ':' + zero(mins) + ':' + zero(secs);
} else {
diff = '-';
}
return diff;
},
getQueueTime() {
var qtime = '-';
if(this.props.job.creation_time && !this.props.job.start_time) {
qtime = this.timeDiff(this.props.job.creation_time);
}
return qtime;
},
render: function() {
this.props.job.formatted_time = moment(this.props.job.creation_time).format('lll');
return (
<tr>
<td>{this.props.job.id}</td>
<td>{this.props.job.status}</td>
<td>{this.props.job.type}</td>
<td>{this.props.job.sequences}</td>
<td>{this.props.job.sites}</td>
<td>{this.state.running_time}</td>
<td>{this.props.job.formatted_time}</td>
<td>{this.state.queue_time}</td>
</tr>
);
}
});
var JobTable = React.createClass({
loadJobsFromServer: function() {
var self = this;
d3.json(this.props.url, function(data) {
self.setState({jobs: data});
});
},
getInitialState: function() {
return {jobs: []};
},
componentDidMount: function() {
this.loadJobsFromServer();
setInterval(this.loadJobsFromServer, this.props.pollInterval);
},
render: function() {
var cx = React.addons.classSet;
var classes = cx({
'table': true,
'table-bordered': true,
'table-hover': true,
'tablesorter': true,
'table-striped': true
});
var Jobs = this.state.jobs.map(function (job) {
return (
<Job job={job} />
)
});
return (
<table className={classes}>
<thead>
<tr><td>Ticket Number</td><td>Status</td><td>Kind</td><td>Sequences</td><td>Sites</td><td>Running Time</td><td>Creation Time</td><td>Queue Time</td></tr>
</thead>
<tbody>
{Jobs}
</tbody>
</table>
);
}
});
React.render(
<JobTable url='/jobqueue/json' pollInterval={2000} />,
document.getElementById('table')
);
View
@@ -0,0 +1,48 @@
@import "../bower-components/bootstrap/less/bootstrap.less";
// buttons
// -------------------------
@btn-primary-bg: #fc6736;
// hr border color
// -------------------------
@hrborder: #fc6736;
// inverted navbar
@navbar-inverse-bg : #e9e6f2;
@navbar-inverse-bg-highlight : #e8e6f2;
@navbar-inverse-border : #fc6736;
@navbar-inverse-text : #777777;
@navbar-inverse-link-color : #777777;
@navbar-inverse-link-hover-color : #555555;
@navbar-inverse-link-hover-bg : transparent;
// hero unit
// -------------------------
@jumbotron-bg: #e7e6f2;
// navbar styles
// -------------------------
.navbar-static-top {
border-width: 0 0 5px;
}
.navbar-inverse {
border-color: @navbar-inverse-border;
border-width: 0px 0px 5px 0px;
}
.navbar-collapse {
border-color: @navbar-inverse-border;
border-width: 5px 0px 0px 0px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: @navbar-inverse-border;
}
.navbar .btn-navbar .icon-bar {
.box-shadow(0 0px 0 rgba(0,0,0,.25));
}

0 comments on commit 4e46c2d

Please sign in to comment.