blob: cdb6221d0c25c6e7591b512754aec1252fab53b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/** @jsx React.DOM */
var App = React.createClass({
getInitialState: function () {
return {
settings: {} //TODO: How explicit should we get here?
//List all subattributes?
};
},
componentDidMount: function () {
//TODO: Replace DummyStore with real settings over WS (https://facebook.github.io/react/tips/initial-ajax.html)
var settingsStore = new DummySettings({
version: "0.12"
});
this.setState({settingsStore: settingsStore});
settingsStore.addChangeListener(this.onSettingsChange);
},
onSettingsChange: function(event, settings){
this.setState({settings: settings.getAll()});
},
render: function () {
return (
<div id="container">
<Header settings={this.state.settings}/>
<div id="main">
<this.props.activeRouteHandler settings={this.state.settings}/>
</div>
<Footer/>
</div>
);
}
});
var TrafficTable = React.createClass({
getInitialState: function(){
return {
flows: []
};
},
componentDidMount: function () {
var flowStore = new DummyFlowStore([]);
this.setState({flowStore: flowStore});
flowStore.addChangeListener(this.onFlowsChange);
$.getJSON("/flows.json").success(function (flows) {
flows.forEach(function (flow, i) {
window.setTimeout(function () {
flowStore.addFlow(flow);
}, _.random(i*400,i*400+1000));
});
}.bind(this));
},
componentWillUnmount: function(){
this.state.flowStore.close();
},
onFlowsChange: function(event, flows){
this.setState({flows: flows.getAll()});
},
render: function () {
var flows = this.state.flows.map(function(flow){
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
});
return <pre>{flows}</pre>;
}
});
var Reports = React.createClass({
render: function(){
return (<div>Report Editor</div>);
}
});
var routes = (
<ReactRouter.Routes location="hash">
<ReactRouter.Route name="app" path="/" handler={App}>
<ReactRouter.Route name="main" handler={TrafficTable}/>
<ReactRouter.Route name="reports" handler={Reports}/>
<ReactRouter.Redirect to="main"/>
</ReactRouter.Route>
</ReactRouter.Routes>
);
|
