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
|
var React = require("react");
var _ = require("lodash");
var common = require("../common.js");
var Nav = require("./nav.js");
var Messages = require("./messages.js");
var Details = require("./details.js");
var allTabs = {
request: Messages.Request,
response: Messages.Response,
error: Messages.Error,
details: Details
};
var FlowView = React.createClass({
mixins: [common.StickyHeadMixin, common.Navigation, common.RouterState],
getTabs: function (flow) {
var tabs = [];
["request", "response", "error"].forEach(function (e) {
if (flow[e]) {
tabs.push(e);
}
});
tabs.push("details");
return tabs;
},
nextTab: function (i) {
var tabs = this.getTabs(this.props.flow);
var currentIndex = tabs.indexOf(this.getParams().detailTab);
// JS modulo operator doesn't correct negative numbers, make sure that we are positive.
var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
this.selectTab(tabs[nextIndex]);
},
selectTab: function (panel) {
this.replaceWith(
"flow",
{
flowId: this.getParams().flowId,
detailTab: panel
}
);
},
render: function () {
var flow = this.props.flow;
var tabs = this.getTabs(flow);
var active = this.getParams().detailTab;
if (!_.contains(tabs, active)) {
if (active === "response" && flow.error) {
active = "error";
} else if (active === "error" && flow.response) {
active = "response";
} else {
active = tabs[0];
}
this.selectTab(active);
}
var Tab = allTabs[active];
return (
<div className="flow-detail" onScroll={this.adjustHead}>
<Nav ref="head"
flow={flow}
tabs={tabs}
active={active}
selectTab={this.selectTab}/>
<Tab flow={flow}/>
</div>
);
}
});
module.exports = FlowView;
|
