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
|
/** @jsx React.DOM */
var MainView = React.createClass({
getInitialState: function() {
return {
flows: [],
};
},
componentDidMount: function () {
console.log("get view");
this.flowStore = FlowStore.getView();
this.flowStore.addListener("change",this.onFlowChange);
},
componentWillUnmount: function () {
this.flowStore.removeListener("change",this.onFlowChange);
this.flowStore.close();
},
onFlowChange: function () {
this.setState({
flows: this.flowStore.getAll()
});
},
selectFlow: function(flow) {
if(flow){
ReactRouter.replaceWith(
"flow",
{
flowId: flow.id,
detailTab: this.props.params.detailTab || "request"
}
);
this.refs.flowTable.scrollIntoView(flow);
} else {
ReactRouter.replaceWith("flows");
}
},
selectDetailTab: function(panel) {
ReactRouter.replaceWith(
"flow",
{
flowId: this.props.params.flowId,
detailTab: panel
}
);
},
render: function() {
var selected = _.find(this.state.flows, { id: this.props.params.flowId });
var details = null;
if(selected){
details = (
<FlowDetail ref="flowDetails"
flow={selected}
selectTab={this.selectDetailTab}
active={this.props.params.detailTab}/>
);
}
return (
<div className="main-view">
<FlowTable ref="flowTable"
flows={this.state.flows}
selectFlow={this.selectFlow}
selected={selected} />
<Splitter/>
{details}
</div>
);
}
});
|
