|
|
@@ -1,45 +1,195 @@
|
|
|
var React = require('react');
|
|
|
var Backbone = require('backbone');
|
|
|
+var _ = require('underscore');
|
|
|
require('backbone-react-component');
|
|
|
+require('backbone-relational');
|
|
|
Backbone.$ = $;
|
|
|
|
|
|
-var MyComponent = React.createClass({
|
|
|
- mixins: [Backbone.React.Component.mixin],
|
|
|
- render: function () {
|
|
|
+config = {
|
|
|
+ url: "http://katrin.kit.edu/newstatus/katrin/api/sql/",
|
|
|
+ server: "orca",
|
|
|
+};
|
|
|
+
|
|
|
+var ToggleContent = React.createClass({
|
|
|
+ render: function() {
|
|
|
+ var rightAlign = {
|
|
|
+ marginRight: '10px',
|
|
|
+ float: 'right'
|
|
|
+ }
|
|
|
+ var leftAlign = {
|
|
|
+ marginLeft: '10px',
|
|
|
+ float: 'left'
|
|
|
+ };
|
|
|
return (
|
|
|
- <div>
|
|
|
- <h3>{this.props.machine_name}</h3>
|
|
|
- <span>{this.props.machine_id}</span><br/>
|
|
|
- <span>{this.props.machine_ip}</span><br/>
|
|
|
- <span>{this.props.machine_uptime}</span>
|
|
|
+ <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 MachineModel = Backbone.Model.extend({
|
|
|
- urlRoot: "http://katrin.kit.edu/newstatus/katrin/api/sql/orca/machines/all.json",
|
|
|
- defaults: {
|
|
|
- machine_name: 'ORCA',
|
|
|
- machine_id: 0,
|
|
|
- machine_ip: '192.168.x.x',
|
|
|
- machine_uptime: 0
|
|
|
+var MyComponent = React.createClass({
|
|
|
+ mixins: [Backbone.React.Component.mixin],
|
|
|
+ getInitialSate: function() {
|
|
|
+ return {showMore: false}
|
|
|
},
|
|
|
- parse: function(resp) {
|
|
|
- return {
|
|
|
- machine_id: resp.data[0],
|
|
|
- machine_name: resp.data[1],
|
|
|
- machine_ip: resp.data[3],
|
|
|
- machine_uptime: resp.data[5],
|
|
|
+ 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'
|
|
|
+ };
|
|
|
+ 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="../image/arrow_up.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /></div>
|
|
|
+ : <img src="../image/arrow_down.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /> }
|
|
|
+ </div>);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-machine = new MachineModel({});
|
|
|
-machine.fetch();
|
|
|
+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();
|
|
|
|
|
|
-React.render(<MyComponent model={machine} />, document.getElementById('block1'));
|
|
|
|
|
|
setInterval(function() {
|
|
|
- machine.fetch();
|
|
|
-}, 5000);
|
|
|
+ update();
|
|
|
+}, 10000);
|
|
|
+
|
|
|
+$(document).ready(function() {
|
|
|
+ console.log('ready');
|
|
|
+});
|
Chuan Miao
