|
|
@@ -15,188 +15,8 @@ config = {
|
|
|
server: "orca",
|
|
|
};
|
|
|
|
|
|
-var ToggleContent = React.createClass({
|
|
|
- render: function() {
|
|
|
- var rightAlign = {
|
|
|
- marginRight: '10px',
|
|
|
- float: 'right'
|
|
|
- }
|
|
|
- var leftAlign = {
|
|
|
- marginLeft: '10px',
|
|
|
- float: 'left'
|
|
|
- };
|
|
|
- return (
|
|
|
- <div className={'toggle-content'}>
|
|
|
- <div><b style={leftAlign}>ID</b> <span style={rightAlign}>{this.props.id}</span></div><br/>
|
|
|
- <div><b style={leftAlign}>IP</b> <span style={rightAlign}>{this.props.ip_address}</span></div><br/>
|
|
|
- <div><b style={leftAlign}>Time to go</b> <span style={rightAlign}>{this.props.timeToGo}</span></div><br/>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-var MyComponent = React.createClass({
|
|
|
- mixins: [Backbone.React.Component.mixin],
|
|
|
- getInitialSate: function() {
|
|
|
- return {showMore: false}
|
|
|
- },
|
|
|
- onClick: function () {
|
|
|
- this.setState({showMore: !this.state.showMore})
|
|
|
- },
|
|
|
- millisecondsToStr: function (milliseconds) {
|
|
|
- // TIP: to find current time in milliseconds, use:
|
|
|
- // var current_time_milliseconds = new Date().getTime();
|
|
|
-
|
|
|
- function numberEnding (number) {
|
|
|
- return (number > 1) ? 's' : '';
|
|
|
- }
|
|
|
-
|
|
|
- var temp = Math.floor(milliseconds / 1000);
|
|
|
- var years = Math.floor(temp / 31536000);
|
|
|
- if (years) {
|
|
|
- return years + ' year' + numberEnding(years);
|
|
|
- }
|
|
|
- //TODO: Months! Maybe weeks?
|
|
|
- var days = Math.floor((temp %= 31536000) / 86400);
|
|
|
- if (days) {
|
|
|
- return days + ' day' + numberEnding(days);
|
|
|
- }
|
|
|
- var hours = Math.floor((temp %= 86400) / 3600);
|
|
|
- if (hours) {
|
|
|
- return hours + ' hour' + numberEnding(hours);
|
|
|
- }
|
|
|
- var minutes = Math.floor((temp %= 3600) / 60);
|
|
|
- if (minutes) {
|
|
|
- return minutes + ' minute' + numberEnding(minutes);
|
|
|
- }
|
|
|
- var seconds = temp % 60;
|
|
|
- if (seconds) {
|
|
|
- return seconds + ' second' + numberEnding(seconds);
|
|
|
- }
|
|
|
- return 'less than a second'; //'just now' //or other string you like;
|
|
|
- },
|
|
|
- render: function () {
|
|
|
- var arrowStyle = {
|
|
|
- display: 'block',
|
|
|
- marginLeft: 'auto',
|
|
|
- marginRight: 'auto',
|
|
|
- width: '20px'
|
|
|
- };
|
|
|
- var rightAlign = {
|
|
|
- marginRight: '10px',
|
|
|
- float: 'right'
|
|
|
- }
|
|
|
- var leftAlign = {
|
|
|
- marginLeft: '10px',
|
|
|
- float: 'left'
|
|
|
- };
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <h4>{this.props.name}</h4>
|
|
|
- <div><b style={leftAlign}>Experiment</b> <span style={rightAlign}>{this.props.experiment}</span></div><br/>
|
|
|
- <div><b style={leftAlign}>State</b> <span style={rightAlign}>{this.props.state ? 'Running' : 'Stopped'}</span></div><br/>
|
|
|
- <div><b style={leftAlign}>Run time</b> <span style={rightAlign}>{this.millisecondsToStr(this.props.uptime*1000)}</span></div><br/>
|
|
|
- { this.state.showMore
|
|
|
- ? <div><ToggleContent {...this.props} /> <img src="./images/arrow_up.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /></div>
|
|
|
- : <img src="./images/arrow_down.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /> }
|
|
|
- </div>);
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-var Run = Backbone.RelationalModel.extend({
|
|
|
- parse: function(resp) {
|
|
|
- if (typeof resp.data === 'undefined')
|
|
|
- return resp;
|
|
|
- else
|
|
|
- return resp.data[0];
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-var Runs = Backbone.Collection.extend({
|
|
|
- model: Run,
|
|
|
- parse: function(resp) {
|
|
|
- return resp.data;
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-var Machine = Backbone.Model.extend({
|
|
|
- parse: function(resp) {
|
|
|
- if (typeof resp.data === 'undefined')
|
|
|
- return resp;
|
|
|
- else
|
|
|
- return resp.data[0];
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-var Machines = Backbone.Collection.extend({
|
|
|
- model: Machine,
|
|
|
- parse: function(resp) {
|
|
|
- return resp.data;
|
|
|
- },
|
|
|
-
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-function setup0() {
|
|
|
- machines.fetch({
|
|
|
- error: function(c) {
|
|
|
- console.log('oops');
|
|
|
- },
|
|
|
- success: function(c) {
|
|
|
- _.each(c.models, function(model, key) {
|
|
|
- var _id = 'block' + (++key);
|
|
|
- React.render(<MyComponent model={model} />, document.getElementById(_id));
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function setup() {
|
|
|
- $.when( machines.fetch(), runs.fetch()).then( function(){
|
|
|
- var run_info = {}
|
|
|
- _.each(runs.models, function(run) {
|
|
|
- var run = run.attributes;
|
|
|
- run_info[run.machine_id] = run;
|
|
|
- });
|
|
|
- _.each(machines.models, function(machine, key) {
|
|
|
- var run = run_info[machine.attributes.machine_id];
|
|
|
- _.extend(machines.models[key].attributes, run);
|
|
|
- React.render(<MyComponent model={machines.models[key]} />, document.getElementById('block'+(key+1)));
|
|
|
- });
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function update() {
|
|
|
- $.when( machines.fetch(), runs.fetch()).then( function(){
|
|
|
- var run_info = {}
|
|
|
- _.each(runs.models, function(run) {
|
|
|
- run_info[run.machine_id] = run.attributes;
|
|
|
- });
|
|
|
- _.each(machines.models, function(machine, key) {
|
|
|
- var run = run_info[machine.attributes.machine_id];
|
|
|
- _.extend(machines.models[key].attributes, run);
|
|
|
- });
|
|
|
-
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-var url = config.url + config.server + "/";
|
|
|
-
|
|
|
-machines = new Machines({});
|
|
|
-machines.url = url+'machines';
|
|
|
-
|
|
|
-runs = new Runs({});
|
|
|
-runs.url = url + 'runs';
|
|
|
-
|
|
|
-//setup0();
|
|
|
-setup();
|
|
|
-
|
|
|
-
|
|
|
-setInterval(function() {
|
|
|
- update();
|
|
|
-}, 10000);
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
console.log('ready');
|
|
|
- page.toggleSidebar();
|
|
|
+ page.init();
|
|
|
});
|
Chuan Miao