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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
/** @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()
});
},
selectDetailTab: function(panel) {
ReactRouter.replaceWith(
"flow",
{
flowId: this.props.params.flowId,
detailTab: panel
}
);
},
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");
}
},
selectFlowRelative: function(i){
var index;
if(!this.props.params.flowId){
if(i > 0){
index = this.state.flows.length-1;
} else {
index = 0;
}
} else {
index = _.findIndex(this.state.flows, function(f){
return f.id === this.props.params.flowId;
}.bind(this));
index = Math.min(Math.max(0, index+i), this.state.flows.length-1);
}
this.selectFlow(this.state.flows[index]);
},
onKeyDown: function(e){
switch(e.keyCode){
case Key.K:
case Key.UP:
this.selectFlowRelative(-1);
break;
case Key.J:
case Key.DOWN:
this.selectFlowRelative(+1);
break;
case Key.SPACE:
case Key.PAGE_DOWN:
this.selectFlowRelative(+10);
break;
case Key.PAGE_UP:
this.selectFlowRelative(-10);
break;
case Key.ESC:
this.selectFlow(null);
break;
case Key.H:
case Key.LEFT:
if(this.refs.flowDetails){
this.refs.flowDetails.nextTab(-1);
}
break;
case Key.L:
case Key.TAB:
case Key.RIGHT:
if(this.refs.flowDetails){
this.refs.flowDetails.nextTab(+1);
}
break;
default:
console.debug("keydown", e.keyCode);
return;
}
return false;
},
render: function() {
var selected = _.find(this.state.flows, { id: this.props.params.flowId });
var details;
if(selected){
details = (
<FlowDetail ref="flowDetails"
flow={selected}
selectTab={this.selectDetailTab}
active={this.props.params.detailTab}/>
);
} else {
details = null;
}
return (
<div className="main-view" onKeyDown={this.onKeyDown} tabIndex="0">
<FlowTable ref="flowTable"
flows={this.state.flows}
selectFlow={this.selectFlow}
selected={selected} />
{ details ? <Splitter/> : null }
{details}
</div>
);
}
});
|
