aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js/components')
-rw-r--r--web/src/js/components/common.js48
-rw-r--r--web/src/js/components/eventlog.js2
-rw-r--r--web/src/js/components/flowdetail.js399
-rw-r--r--web/src/js/components/flowtable-columns.js83
-rw-r--r--web/src/js/components/flowtable.js78
-rw-r--r--web/src/js/components/flowview/contentview.js235
-rw-r--r--web/src/js/components/flowview/details.js181
-rw-r--r--web/src/js/components/flowview/index.js74
-rw-r--r--web/src/js/components/flowview/messages.js91
-rw-r--r--web/src/js/components/flowview/nav.js61
-rw-r--r--web/src/js/components/header.js22
-rw-r--r--web/src/js/components/mainview.js38
-rw-r--r--web/src/js/components/proxyapp.js11
13 files changed, 829 insertions, 494 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 96262acc..3ed035ee 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -32,51 +32,41 @@ var StickyHeadMixin = {
var Navigation = _.extend({}, ReactRouter.Navigation, {
setQuery: function (dict) {
- var q = this.context.getCurrentQuery();
+ var q = this.context.router.getCurrentQuery();
for(var i in dict){
if(dict.hasOwnProperty(i)){
q[i] = dict[i] || undefined; //falsey values shall be removed.
}
}
- q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599
- this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
+ q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
+ this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q);
},
replaceWith: function(routeNameOrPath, params, query) {
if(routeNameOrPath === undefined){
- routeNameOrPath = this.context.getCurrentPath();
+ routeNameOrPath = this.context.router.getCurrentPath();
}
if(params === undefined){
- params = this.context.getCurrentParams();
+ params = this.context.router.getCurrentParams();
}
- if(query === undefined){
- query = this.context.getCurrentQuery();
+ if(query === undefined) {
+ query = this.context.router.getCurrentQuery();
}
- ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
+
+ // FIXME: react-router is just broken,
+ // we hopefully just need to wait for the next release with https://github.com/rackt/react-router/pull/957.
+ this.context.router.replaceWith(routeNameOrPath, params, query);
}
});
-_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
+// react-router is fairly good at changing its API regularly.
+// We keep the old method for now - if it should turn out that their changes are permanent,
+// we may remove this mixin and access react-router directly again.
var State = _.extend({}, ReactRouter.State, {
- getInitialState: function () {
- this._query = this.context.getCurrentQuery();
- this._queryWatches = [];
- return null;
- },
- onQueryChange: function (key, callback) {
- this._queryWatches.push({
- key: key,
- callback: callback
- });
+ getQuery: function(){
+ return this.context.router.getCurrentQuery();
},
- componentWillReceiveProps: function (nextProps, nextState) {
- var q = this.context.getCurrentQuery();
- for (var i = 0; i < this._queryWatches.length; i++) {
- var watch = this._queryWatches[i];
- if (this._query[watch.key] !== q[watch.key]) {
- watch.callback(this._query[watch.key], q[watch.key], watch.key);
- }
- }
- this._query = q;
+ getParams: function(){
+ return this.context.router.getCurrentParams();
}
});
@@ -191,4 +181,4 @@ module.exports = {
StickyHeadMixin: StickyHeadMixin,
AutoScrollMixin: AutoScrollMixin,
Splitter: Splitter
-} \ No newline at end of file
+}; \ No newline at end of file
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index ae7cd093..de69462b 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,7 +1,9 @@
var React = require("react");
var common = require("./common.js");
+var Query = require("../actions.js").Query;
var VirtualScrollMixin = require("./virtualscroll.js");
var views = require("../store/view.js");
+var _ = require("lodash");
var LogMessage = React.createClass({
render: function () {
diff --git a/web/src/js/components/flowdetail.js b/web/src/js/components/flowdetail.js
deleted file mode 100644
index 1d019ffb..00000000
--- a/web/src/js/components/flowdetail.js
+++ /dev/null
@@ -1,399 +0,0 @@
-var React = require("react");
-var _ = require("lodash");
-
-var common = require("./common.js");
-var actions = require("../actions.js");
-var flowutils = require("../flow/utils.js");
-var toputils = require("../utils.js");
-
-var NavAction = React.createClass({
- onClick: function (e) {
- e.preventDefault();
- this.props.onClick();
- },
- render: function () {
- return (
- <a title={this.props.title}
- href="#"
- className="nav-action"
- onClick={this.onClick}>
- <i className={"fa fa-fw " + this.props.icon}></i>
- </a>
- );
- }
-});
-
-var FlowDetailNav = React.createClass({
- render: function () {
- var flow = this.props.flow;
-
- var tabs = this.props.tabs.map(function (e) {
- var str = e.charAt(0).toUpperCase() + e.slice(1);
- var className = this.props.active === e ? "active" : "";
- var onClick = function (event) {
- this.props.selectTab(e);
- event.preventDefault();
- }.bind(this);
- return <a key={e}
- href="#"
- className={className}
- onClick={onClick}>{str}</a>;
- }.bind(this));
-
- var acceptButton = null;
- if(flow.intercepted){
- acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
- }
- var revertButton = null;
- if(flow.modified){
- revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
- }
-
- return (
- <nav ref="head" className="nav-tabs nav-tabs-sm">
- {tabs}
- <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
- <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
- <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
- {acceptButton}
- {revertButton}
- </nav>
- );
- }
-});
-
-var Headers = React.createClass({
- render: function () {
- var rows = this.props.message.headers.map(function (header, i) {
- return (
- <tr key={i}>
- <td className="header-name">{header[0] + ":"}</td>
- <td className="header-value">{header[1]}</td>
- </tr>
- );
- });
- return (
- <table className="header-table">
- <tbody>
- {rows}
- </tbody>
- </table>
- );
- }
-});
-
-var FlowDetailRequest = React.createClass({
- render: function () {
- var flow = this.props.flow;
- var first_line = [
- flow.request.method,
- flowutils.RequestUtils.pretty_url(flow.request),
- "HTTP/" + flow.request.httpversion.join(".")
- ].join(" ");
- var content = null;
- if (flow.request.contentLength > 0) {
- content = "Request Content Size: " + toputils.formatSize(flow.request.contentLength);
- } else {
- content = <div className="alert alert-info">No Content</div>;
- }
-
- //TODO: Styling
-
- return (
- <section>
- <div className="first-line">{ first_line }</div>
- <Headers message={flow.request}/>
- <hr/>
- {content}
- </section>
- );
- }
-});
-
-var FlowDetailResponse = React.createClass({
- render: function () {
- var flow = this.props.flow;
- var first_line = [
- "HTTP/" + flow.response.httpversion.join("."),
- flow.response.code,
- flow.response.msg
- ].join(" ");
- var content = null;
- if (flow.response.contentLength > 0) {
- content = "Response Content Size: " + toputils.formatSize(flow.response.contentLength);
- } else {
- content = <div className="alert alert-info">No Content</div>;
- }
-
- //TODO: Styling
-
- return (
- <section>
- <div className="first-line">{ first_line }</div>
- <Headers message={flow.response}/>
- <hr/>
- {content}
- </section>
- );
- }
-});
-
-var FlowDetailError = React.createClass({
- render: function () {
- var flow = this.props.flow;
- return (
- <section>
- <div className="alert alert-warning">
- {flow.error.msg}
- <div>
- <small>{ toputils.formatTimeStamp(flow.error.timestamp) }</small>
- </div>
- </div>
- </section>
- );
- }
-});
-
-var TimeStamp = React.createClass({
- render: function () {
-
- if (!this.props.t) {
- //should be return null, but that triggers a React bug.
- return <tr></tr>;
- }
-
- var ts = toputils.formatTimeStamp(this.props.t);
-
- var delta;
- if (this.props.deltaTo) {
- delta = toputils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
- delta = <span className="text-muted">{"(" + delta + ")"}</span>;
- } else {
- delta = null;
- }
-
- return <tr>
- <td>{this.props.title + ":"}</td>
- <td>{ts} {delta}</td>
- </tr>;
- }
-});
-
-var ConnectionInfo = React.createClass({
-
- render: function () {
- var conn = this.props.conn;
- var address = conn.address.address.join(":");
-
- var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
- if (conn.sni) {
- sni = <tr key="sni">
- <td>
- <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
- </td>
- <td>{conn.sni}</td>
- </tr>;
- }
- return (
- <table className="connection-table">
- <tbody>
- <tr key="address">
- <td>Address:</td>
- <td>{address}</td>
- </tr>
- {sni}
- </tbody>
- </table>
- );
- }
-});
-
-var CertificateInfo = React.createClass({
- render: function () {
- //TODO: We should fetch human-readable certificate representation
- // from the server
- var flow = this.props.flow;
- var client_conn = flow.client_conn;
- var server_conn = flow.server_conn;
-
- var preStyle = {maxHeight: 100};
- return (
- <div>
- {client_conn.cert ? <h4>Client Certificate</h4> : null}
- {client_conn.cert ? <pre style={preStyle}>{client_conn.cert}</pre> : null}
-
- {server_conn.cert ? <h4>Server Certificate</h4> : null}
- {server_conn.cert ? <pre style={preStyle}>{server_conn.cert}</pre> : null}
- </div>
- );
- }
-});
-
-var Timing = React.createClass({
- render: function () {
- var flow = this.props.flow;
- var sc = flow.server_conn;
- var cc = flow.client_conn;
- var req = flow.request;
- var resp = flow.response;
-
- var timestamps = [
- {
- title: "Server conn. initiated",
- t: sc.timestamp_start,
- deltaTo: req.timestamp_start
- }, {
- title: "Server conn. TCP handshake",
- t: sc.timestamp_tcp_setup,
- deltaTo: req.timestamp_start
- }, {
- title: "Server conn. SSL handshake",
- t: sc.timestamp_ssl_setup,
- deltaTo: req.timestamp_start
- }, {
- title: "Client conn. established",
- t: cc.timestamp_start,
- deltaTo: req.timestamp_start
- }, {
- title: "Client conn. SSL handshake",
- t: cc.timestamp_ssl_setup,
- deltaTo: req.timestamp_start
- }, {
- title: "First request byte",
- t: req.timestamp_start,
- }, {
- title: "Request complete",
- t: req.timestamp_end,
- deltaTo: req.timestamp_start
- }
- ];
-
- if (flow.response) {
- timestamps.push(
- {
- title: "First response byte",
- t: resp.timestamp_start,
- deltaTo: req.timestamp_start
- }, {
- title: "Response complete",
- t: resp.timestamp_end,
- deltaTo: req.timestamp_start
- }
- );
- }
-
- //Add unique key for each row.
- timestamps.forEach(function (e) {
- e.key = e.title;
- });
-
- timestamps = _.sortBy(timestamps, 't');
-
- var rows = timestamps.map(function (e) {
- return <TimeStamp {...e}/>;
- });
-
- return (
- <div>
- <h4>Timing</h4>
- <table className="timing-table">
- <tbody>
- {rows}
- </tbody>
- </table>
- </div>
- );
- }
-});
-
-var FlowDetailConnectionInfo = React.createClass({
- render: function () {
- var flow = this.props.flow;
- var client_conn = flow.client_conn;
- var server_conn = flow.server_conn;
- return (
- <section>
-
- <h4>Client Connection</h4>
- <ConnectionInfo conn={client_conn}/>
-
- <h4>Server Connection</h4>
- <ConnectionInfo conn={server_conn}/>
-
- <CertificateInfo flow={flow}/>
-
- <Timing flow={flow}/>
-
- </section>
- );
- }
-});
-
-var allTabs = {
- request: FlowDetailRequest,
- response: FlowDetailResponse,
- error: FlowDetailError,
- details: FlowDetailConnectionInfo
-};
-
-var FlowDetail = React.createClass({
- mixins: [common.StickyHeadMixin, common.Navigation, common.State],
- 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}>
- <FlowDetailNav ref="head"
- flow={flow}
- tabs={tabs}
- active={active}
- selectTab={this.selectTab}/>
- <Tab flow={flow}/>
- </div>
- );
- }
-});
-
-module.exports = {
- FlowDetail: FlowDetail
-}; \ No newline at end of file
diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
index 39c4bd8d..a82c607a 100644
--- a/web/src/js/components/flowtable-columns.js
+++ b/web/src/js/components/flowtable-columns.js
@@ -1,11 +1,17 @@
var React = require("react");
-var flowutils = require("../flow/utils.js");
+var RequestUtils = require("../flow/utils.js").RequestUtils;
+var ResponseUtils = require("../flow/utils.js").ResponseUtils;
var utils = require("../utils.js");
var TLSColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="tls" className="col-tls"></th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-tls " + (this.props.className || "") }></th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ return flow.request.scheme;
}
},
render: function () {
@@ -24,16 +30,18 @@ var TLSColumn = React.createClass({
var IconColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="icon" className="col-icon"></th>;
- }
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-icon " + (this.props.className || "") }></th>;
+ }
+ })
},
render: function () {
var flow = this.props.flow;
var icon;
if (flow.response) {
- var contentType = flowutils.ResponseUtils.getContentType(flow.response);
+ var contentType = ResponseUtils.getContentType(flow.response);
//TODO: We should assign a type to the flow somewhere else.
if (flow.response.code == 304) {
@@ -64,8 +72,13 @@ var IconColumn = React.createClass({
var PathColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="path" className="col-path">Path</th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-path " + (this.props.className || "") }>Path</th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ return RequestUtils.pretty_url(flow.request);
}
},
render: function () {
@@ -73,7 +86,7 @@ var PathColumn = React.createClass({
return <td className="col-path">
{flow.request.is_replay ? <i className="fa fa-fw fa-repeat pull-right"></i> : null}
{flow.intercepted ? <i className="fa fa-fw fa-pause pull-right"></i> : null}
- {flow.request.scheme + "://" + flow.request.host + flow.request.path}
+ { RequestUtils.pretty_url(flow.request) }
</td>;
}
});
@@ -81,8 +94,13 @@ var PathColumn = React.createClass({
var MethodColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="method" className="col-method">Method</th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-method " + (this.props.className || "") }>Method</th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ return flow.request.method;
}
},
render: function () {
@@ -94,8 +112,13 @@ var MethodColumn = React.createClass({
var StatusColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="status" className="col-status">Status</th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-status " + (this.props.className || "") }>Status</th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ return flow.response ? flow.response.code : undefined;
}
},
render: function () {
@@ -113,8 +136,17 @@ var StatusColumn = React.createClass({
var SizeColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="size" className="col-size">Size</th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-size " + (this.props.className || "") }>Size</th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ var total = flow.request.contentLength;
+ if (flow.response) {
+ total += flow.response.contentLength || 0;
+ }
+ return total;
}
},
render: function () {
@@ -132,8 +164,15 @@ var SizeColumn = React.createClass({
var TimeColumn = React.createClass({
statics: {
- renderTitle: function () {
- return <th key="time" className="col-time">Time</th>;
+ Title: React.createClass({
+ render: function(){
+ return <th {...this.props} className={"col-time " + (this.props.className || "") }>Time</th>;
+ }
+ }),
+ sortKeyFun: function(flow){
+ if(flow.response) {
+ return flow.response.timestamp_end - flow.request.timestamp_start;
+ }
}
},
render: function () {
@@ -156,9 +195,7 @@ var all_columns = [
MethodColumn,
StatusColumn,
SizeColumn,
- TimeColumn];
-
-
-module.exports = all_columns;
-
+ TimeColumn
+];
+module.exports = all_columns; \ No newline at end of file
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index cd50b891..4217786a 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -1,5 +1,8 @@
var React = require("react");
var common = require("./common.js");
+var utils = require("../utils.js");
+var _ = require("lodash");
+
var VirtualScrollMixin = require("./virtualscroll.js");
var flowtable_columns = require("./flowtable-columns.js");
@@ -43,9 +46,56 @@ var FlowRow = React.createClass({
});
var FlowTableHead = React.createClass({
+ getInitialState: function(){
+ return {
+ sortColumn: undefined,
+ sortDesc: false
+ };
+ },
+ onClick: function(Column){
+ var sortDesc = this.state.sortDesc;
+ var hasSort = Column.sortKeyFun;
+ if(Column === this.state.sortColumn){
+ sortDesc = !sortDesc;
+ this.setState({
+ sortDesc: sortDesc
+ });
+ } else {
+ this.setState({
+ sortColumn: hasSort && Column,
+ sortDesc: false
+ })
+ }
+ var sortKeyFun;
+ if(!sortDesc){
+ sortKeyFun = Column.sortKeyFun;
+ } else {
+ sortKeyFun = hasSort && function(){
+ var k = Column.sortKeyFun.apply(this, arguments);
+ if(_.isString(k)){
+ return utils.reverseString(""+k);
+ } else {
+ return -k;
+ }
+ }
+ }
+ this.props.setSortKeyFun(sortKeyFun);
+ },
render: function () {
- var columns = this.props.columns.map(function (column) {
- return column.renderTitle();
+ var columns = this.props.columns.map(function (Column) {
+ var onClick = this.onClick.bind(this, Column);
+ var className;
+ if(this.state.sortColumn === Column) {
+ if(this.state.sortDesc){
+ className = "sort-desc";
+ } else {
+ className = "sort-asc";
+ }
+ }
+ return <Column.Title
+ key={Column.displayName}
+ onClick={onClick}
+ className={className} />;
}.bind(this));
return <thead>
<tr>{columns}</tr>
@@ -63,13 +113,17 @@ var FlowTable = React.createClass({
columns: flowtable_columns
};
},
- componentWillMount: function () {
- if (this.props.view) {
- this.props.view.addListener("add", this.onChange);
- this.props.view.addListener("update", this.onChange);
- this.props.view.addListener("remove", this.onChange);
- this.props.view.addListener("recalculate", this.onChange);
+ _listen: function(view){
+ if(!view){
+ return;
}
+ view.addListener("add", this.onChange);
+ view.addListener("update", this.onChange);
+ view.addListener("remove", this.onChange);
+ view.addListener("recalculate", this.onChange);
+ },
+ componentWillMount: function () {
+ this._listen(this.props.view);
},
componentWillReceiveProps: function (nextProps) {
if (nextProps.view !== this.props.view) {
@@ -79,10 +133,7 @@ var FlowTable = React.createClass({
this.props.view.removeListener("remove");
this.props.view.removeListener("recalculate");
}
- nextProps.view.addListener("add", this.onChange);
- nextProps.view.addListener("update", this.onChange);
- nextProps.view.addListener("remove", this.onChange);
- nextProps.view.addListener("recalculate", this.onChange);
+ this._listen(nextProps.view);
}
},
getDefaultProps: function () {
@@ -130,7 +181,8 @@ var FlowTable = React.createClass({
<div className="flow-table" onScroll={this.onScrollFlowTable}>
<table>
<FlowTableHead ref="head"
- columns={this.state.columns}/>
+ columns={this.state.columns}
+ setSortKeyFun={this.props.setSortKeyFun}/>
<tbody ref="body">
{ this.getPlaceholderTop(flows.length) }
{rows}
diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
new file mode 100644
index 00000000..828c6d08
--- /dev/null
+++ b/web/src/js/components/flowview/contentview.js
@@ -0,0 +1,235 @@
+var React = require("react");
+var _ = require("lodash");
+
+var MessageUtils = require("../../flow/utils.js").MessageUtils;
+var utils = require("../../utils.js");
+
+var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
+var ViewImage = React.createClass({
+ statics: {
+ matches: function (message) {
+ return image_regex.test(MessageUtils.getContentType(message));
+ }
+ },
+ render: function () {
+ var url = MessageUtils.getContentURL(this.props.flow, this.props.message);
+ return <div className="flowview-image">
+ <img src={url} alt="preview" className="img-thumbnail"/>
+ </div>;
+ }
+});
+
+var RawMixin = {
+ getInitialState: function () {
+ return {
+ content: undefined,
+ request: undefined
+ }
+ },
+ requestContent: function (nextProps) {
+ if(this.state.request){
+ this.state.request.abort();
+ }
+ var request = MessageUtils.getContent(nextProps.flow, nextProps.message);
+ this.setState({
+ content: undefined,
+ request: request
+ });
+ request.done(function (data) {
+ this.setState({content: data});
+ }.bind(this)).fail(function (jqXHR, textStatus, errorThrown) {
+ if(textStatus === "abort"){
+ return;
+ }
+ this.setState({content: "AJAX Error: " + textStatus + "\r\n" + errorThrown});
+ }.bind(this)).always(function(){
+ this.setState({request: undefined});
+ }.bind(this));
+
+ },
+ componentWillMount: function () {
+ this.requestContent(this.props);
+ },
+ componentWillReceiveProps: function (nextProps) {
+ if (nextProps.message !== this.props.message) {
+ this.requestContent(nextProps);
+ }
+ },
+ componentWillUnmount: function(){
+ if(this.state.request){
+ this.state.request.abort();
+ }
+ },
+ render: function () {
+ if (!this.state.content) {
+ return <div className="text-center">
+ <i className="fa fa-spinner fa-spin"></i>
+ </div>;
+ }
+ return this.renderContent();
+ }
+};
+
+var ViewRaw = React.createClass({
+ mixins: [RawMixin],
+ statics: {
+ matches: function (message) {
+ return true;
+ }
+ },
+ renderContent: function () {
+ return <pre>{this.state.content}</pre>;
+ }
+});
+
+var json_regex = /^application\/json$/i;
+var ViewJSON = React.createClass({
+ mixins: [RawMixin],
+ statics: {
+ matches: function (message) {
+ return json_regex.test(MessageUtils.getContentType(message));
+ }
+ },
+ renderContent: function () {
+ var json = this.state.content;
+ try {
+ json = JSON.stringify(JSON.parse(json), null, 2);
+ } catch(e) {
+ }
+ return <pre>{json}</pre>;
+ }
+});
+
+var ViewAuto = React.createClass({
+ statics: {
+ matches: function () {
+ return false; // don't match itself
+ },
+ findView: function (message) {
+ for (var i = 0; i < all.length; i++) {
+ if (all[i].matches(message)) {
+ return all[i];
+ }
+ }
+ return all[all.length - 1];
+ }
+ },
+ render: function () {
+ var View = ViewAuto.findView(this.props.message);
+ return <View {...this.props}/>;
+ }
+});
+
+var all = [ViewAuto, ViewImage, ViewJSON, ViewRaw];
+
+
+var ContentEmpty = React.createClass({
+ render: function () {
+ var message_name = this.props.flow.request === this.props.message ? "request" : "response";
+ return <div className="alert alert-info">No {message_name} content.</div>;
+ }
+});
+
+var ContentMissing = React.createClass({
+ render: function () {
+ var message_name = this.props.flow.request === this.props.message ? "Request" : "Response";
+ return <div className="alert alert-info">{message_name} content missing.</div>;
+ }
+});
+
+var TooLarge = React.createClass({
+ statics: {
+ isTooLarge: function(message){
+ var max_mb = ViewImage.matches(message) ? 10 : 0.2;
+ return message.contentLength > 1024 * 1024 * max_mb;
+ }
+ },
+ render: function () {
+ var size = utils.formatSize(this.props.message.contentLength);
+ return <div className="alert alert-warning">
+ <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
+ {size} content size.
+ </div>;
+ }
+});
+
+var ViewSelector = React.createClass({
+ render: function () {
+ var views = [];
+ for (var i = 0; i < all.length; i++) {
+ var view = all[i];
+ var className = "btn btn-default";
+ if (view === this.props.active) {
+ className += " active";
+ }
+ var text;
+ if (view === ViewAuto) {
+ text = "auto: " + ViewAuto.findView(this.props.message).displayName.toLowerCase().replace("view", "");
+ } else {
+ text = view.displayName.toLowerCase().replace("view", "");
+ }
+ views.push(
+ <button
+ key={view.displayName}
+ onClick={this.props.selectView.bind(null, view)}
+ className={className}>
+ {text}
+ </button>
+ );
+ }
+
+ return <div className="view-selector btn-group btn-group-xs">{views}</div>;
+ }
+});
+
+var ContentView = React.createClass({
+ getInitialState: function () {
+ return {
+ displayLarge: false,
+ View: ViewAuto
+ };
+ },
+ propTypes: {
+ // It may seem a bit weird at the first glance:
+ // Every view takes the flow and the message as props, e.g.
+ // <Auto flow={flow} message={flow.request}/>
+ flow: React.PropTypes.object.isRequired,
+ message: React.PropTypes.object.isRequired,
+ },
+ selectView: function (view) {
+ this.setState({
+ View: view
+ });
+ },
+ displayLarge: function () {
+ this.setState({displayLarge: true});
+ },
+ componentWillReceiveProps: function (nextProps) {
+ if (nextProps.message !== this.props.message) {
+ this.setState(this.getInitialState());
+ }
+ },
+ render: function () {
+ var message = this.props.message;
+ if (message.contentLength === 0) {
+ return <ContentEmpty {...this.props}/>;
+ } else if (message.contentLength === null) {
+ return <ContentMissing {...this.props}/>;
+ } else if (!this.state.displayLarge && TooLarge.isTooLarge(message)) {
+ return <TooLarge {...this.props} onClick={this.displayLarge}/>;
+ }
+
+ var downloadUrl = MessageUtils.getContentURL(this.props.flow, message);
+
+ return <div>
+ <this.state.View {...this.props} />
+ <div className="view-options text-center">
+ <ViewSelector selectView={this.selectView} active={this.state.View} message={message}/>
+ &nbsp;
+ <a className="btn btn-default btn-xs" href={downloadUrl}><i className="fa fa-download"/></a>
+ </div>
+ </div>;
+ }
+});
+
+module.exports = ContentView; \ No newline at end of file
diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js
new file mode 100644
index 00000000..00e0116c
--- /dev/null
+++ b/web/src/js/components/flowview/details.js
@@ -0,0 +1,181 @@
+var React = require("react");
+var _ = require("lodash");
+
+var utils = require("../../utils.js");
+
+var TimeStamp = React.createClass({
+ render: function () {
+
+ if (!this.props.t) {
+ //should be return null, but that triggers a React bug.
+ return <tr></tr>;
+ }
+
+ var ts = utils.formatTimeStamp(this.props.t);
+
+ var delta;
+ if (this.props.deltaTo) {
+ delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+ delta = <span className="text-muted">{"(" + delta + ")"}</span>;
+ } else {
+ delta = null;
+ }
+
+ return <tr>
+ <td>{this.props.title + ":"}</td>
+ <td>{ts} {delta}</td>
+ </tr>;
+ }
+});
+
+var ConnectionInfo = React.createClass({
+
+ render: function () {
+ var conn = this.props.conn;
+ var address = conn.address.address.join(":");
+
+ var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
+ if (conn.sni) {
+ sni = <tr key="sni">
+ <td>
+ <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
+ </td>
+ <td>{conn.sni}</td>
+ </tr>;
+ }
+ return (
+ <table className="connection-table">
+ <tbody>
+ <tr key="address">
+ <td>Address:</td>
+ <td>{address}</td>
+ </tr>
+ {sni}
+ </tbody>
+ </table>
+ );
+ }
+});
+
+var CertificateInfo = React.createClass({
+ render: function () {
+ //TODO: We should fetch human-readable certificate representation
+ // from the server
+ var flow = this.props.flow;
+ var client_conn = flow.client_conn;
+ var server_conn = flow.server_conn;
+
+ var preStyle = {maxHeight: 100};
+ return (
+ <div>
+ {client_conn.cert ? <h4>Client Certificate</h4> : null}
+ {client_conn.cert ? <pre style={preStyle}>{client_conn.cert}</pre> : null}
+
+ {server_conn.cert ? <h4>Server Certificate</h4> : null}
+ {server_conn.cert ? <pre style={preStyle}>{server_conn.cert}</pre> : null}
+ </div>
+ );
+ }
+});
+
+var Timing = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+ var sc = flow.server_conn;
+ var cc = flow.client_conn;
+ var req = flow.request;
+ var resp = flow.response;
+
+ var timestamps = [
+ {
+ title: "Server conn. initiated",
+ t: sc.timestamp_start,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "Server conn. TCP handshake",
+ t: sc.timestamp_tcp_setup,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "Server conn. SSL handshake",
+ t: sc.timestamp_ssl_setup,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "Client conn. established",
+ t: cc.timestamp_start,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "Client conn. SSL handshake",
+ t: cc.timestamp_ssl_setup,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "First request byte",
+ t: req.timestamp_start,
+ }, {
+ title: "Request complete",
+ t: req.timestamp_end,
+ deltaTo: req.timestamp_start
+ }
+ ];
+
+ if (flow.response) {
+ timestamps.push(
+ {
+ title: "First response byte",
+ t: resp.timestamp_start,
+ deltaTo: req.timestamp_start
+ }, {
+ title: "Response complete",
+ t: resp.timestamp_end,
+ deltaTo: req.timestamp_start
+ }
+ );
+ }
+
+ //Add unique key for each row.
+ timestamps.forEach(function (e) {
+ e.key = e.title;
+ });
+
+ timestamps = _.sortBy(timestamps, 't');
+
+ var rows = timestamps.map(function (e) {
+ return <TimeStamp {...e}/>;
+ });
+
+ return (
+ <div>
+ <h4>Timing</h4>
+ <table className="timing-table">
+ <tbody>
+ {rows}
+ </tbody>
+ </table>
+ </div>
+ );
+ }
+});
+
+var Details = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+ var client_conn = flow.client_conn;
+ var server_conn = flow.server_conn;
+ return (
+ <section>
+
+ <h4>Client Connection</h4>
+ <ConnectionInfo conn={client_conn}/>
+
+ <h4>Server Connection</h4>
+ <ConnectionInfo conn={server_conn}/>
+
+ <CertificateInfo flow={flow}/>
+
+ <Timing flow={flow}/>
+
+ </section>
+ );
+ }
+});
+
+module.exports = Details; \ No newline at end of file
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
new file mode 100644
index 00000000..0c31aca5
--- /dev/null
+++ b/web/src/js/components/flowview/index.js
@@ -0,0 +1,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.State],
+ 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; \ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
new file mode 100644
index 00000000..fe8fa200
--- /dev/null
+++ b/web/src/js/components/flowview/messages.js
@@ -0,0 +1,91 @@
+var React = require("react");
+
+var flowutils = require("../../flow/utils.js");
+var utils = require("../../utils.js");
+var ContentView = require("./contentview.js");
+
+var Headers = React.createClass({
+ render: function () {
+ var rows = this.props.message.headers.map(function (header, i) {
+ return (
+ <tr key={i}>
+ <td className="header-name">{header[0] + ":"}</td>
+ <td className="header-value">{header[1]}</td>
+ </tr>
+ );
+ });
+ return (
+ <table className="header-table">
+ <tbody>
+ {rows}
+ </tbody>
+ </table>
+ );
+ }
+});
+
+var Request = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+ var first_line = [
+ flow.request.method,
+ flowutils.RequestUtils.pretty_url(flow.request),
+ "HTTP/" + flow.request.httpversion.join(".")
+ ].join(" ");
+
+ //TODO: Styling
+
+ return (
+ <section>
+ <div className="first-line">{ first_line }</div>
+ <Headers message={flow.request}/>
+ <hr/>
+ <ContentView flow={flow} message={flow.request}/>
+ </section>
+ );
+ }
+});
+
+var Response = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+ var first_line = [
+ "HTTP/" + flow.response.httpversion.join("."),
+ flow.response.code,
+ flow.response.msg
+ ].join(" ");
+
+ //TODO: Styling
+
+ return (
+ <section>
+ <div className="first-line">{ first_line }</div>
+ <Headers message={flow.response}/>
+ <hr/>
+ <ContentView flow={flow} message={flow.response}/>
+ </section>
+ );
+ }
+});
+
+var Error = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+ return (
+ <section>
+ <div className="alert alert-warning">
+ {flow.error.msg}
+ <div>
+ <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small>
+ </div>
+ </div>
+ </section>
+ );
+ }
+});
+
+module.exports = {
+ Request: Request,
+ Response: Response,
+ Error: Error
+}; \ No newline at end of file
diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js
new file mode 100644
index 00000000..46eda707
--- /dev/null
+++ b/web/src/js/components/flowview/nav.js
@@ -0,0 +1,61 @@
+var React = require("react");
+
+var actions = require("../../actions.js");
+
+var NavAction = React.createClass({
+ onClick: function (e) {
+ e.preventDefault();
+ this.props.onClick();
+ },
+ render: function () {
+ return (
+ <a title={this.props.title}
+ href="#"
+ className="nav-action"
+ onClick={this.onClick}>
+ <i className={"fa fa-fw " + this.props.icon}></i>
+ </a>
+ );
+ }
+});
+
+var Nav = React.createClass({
+ render: function () {
+ var flow = this.props.flow;
+
+ var tabs = this.props.tabs.map(function (e) {
+ var str = e.charAt(0).toUpperCase() + e.slice(1);
+ var className = this.props.active === e ? "active" : "";
+ var onClick = function (event) {
+ this.props.selectTab(e);
+ event.preventDefault();
+ }.bind(this);
+ return <a key={e}
+ href="#"
+ className={className}
+ onClick={onClick}>{str}</a>;
+ }.bind(this));
+
+ var acceptButton = null;
+ if(flow.intercepted){
+ acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
+ }
+ var revertButton = null;
+ if(flow.modified){
+ revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
+ }
+
+ return (
+ <nav ref="head" className="nav-tabs nav-tabs-sm">
+ {tabs}
+ <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
+ <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
+ <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
+ {acceptButton}
+ {revertButton}
+ </nav>
+ );
+ }
+});
+
+module.exports = Nav; \ No newline at end of file
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 76a1a5fb..dcfdd2ae 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -3,9 +3,9 @@ var $ = require("jquery");
var Filt = require("../filt/filt.js");
var utils = require("../utils.js");
-
var common = require("./common.js");
var actions = require("../actions.js");
+var Query = require("../actions.js").Query;
var FilterDocs = React.createClass({
statics: {
@@ -30,12 +30,12 @@ var FilterDocs = React.createClass({
return <i className="fa fa-spinner fa-spin"></i>;
} else {
var commands = FilterDocs.doc.commands.map(function (c) {
- return <tr>
+ return <tr key={c[1]}>
<td>{c[0].replace(" ", '\u00a0')}</td>
<td>{c[1]}</td>
</tr>;
});
- commands.push(<tr>
+ commands.push(<tr key="docs-link">
<td colSpan="2">
<a href="https://mitmproxy.org/doc/features/filters.html"
target="_blank">
@@ -173,7 +173,7 @@ var MainMenu = React.createClass({
this.setQuery(d);
},
onInterceptChange: function (val) {
- SettingsActions.update({intercept: val});
+ actions.SettingsActions.update({intercept: val});
},
render: function () {
var filter = this.getQuery()[Query.FILTER] || "";
@@ -356,15 +356,17 @@ var Header = React.createClass({
},
render: function () {
var header = header_entries.map(function (entry, i) {
- var classes = React.addons.classSet({
- active: entry == this.state.active
- });
+ var className;
+ if(entry === this.state.active){
+ className = "active";
+ } else {
+ className = "";
+ }
return (
<a key={i}
href="#"
- className={classes}
- onClick={this.handleClick.bind(this, entry)}
- >
+ className={className}
+ onClick={this.handleClick.bind(this, entry)}>
{ entry.title}
</a>
);
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 550a61da..81bf3b03 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -2,24 +2,19 @@ var React = require("react");
var common = require("./common.js");
var actions = require("../actions.js");
+var Query = require("../actions.js").Query;
var toputils = require("../utils.js");
var views = require("../store/view.js");
var Filt = require("../filt/filt.js");
FlowTable = require("./flowtable.js");
-var flowdetail = require("./flowdetail.js");
-
+var FlowView = require("./flowview/index.js");
var MainView = React.createClass({
mixins: [common.Navigation, common.State],
getInitialState: function () {
- this.onQueryChange(Query.FILTER, function () {
- this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
- }.bind(this));
- this.onQueryChange(Query.HIGHLIGHT, function () {
- this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
- }.bind(this));
return {
- flows: []
+ flows: [],
+ sortKeyFun: false
};
},
getViewFilt: function () {
@@ -39,16 +34,20 @@ var MainView = React.createClass({
return filt(flow);
};
},
- getViewSort: function () {
- },
componentWillReceiveProps: function (nextProps) {
if (nextProps.flowStore !== this.props.flowStore) {
this.closeView();
this.openView(nextProps.flowStore);
}
+
+ var filterChanged = (this.props.query[Query.FILTER] !== nextProps.query[Query.FILTER]);
+ var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
+ if (filterChanged || highlightChanged) {
+ this.state.view.recalculate(this.getViewFilt(), this.state.sortKeyFun);
+ }
},
openView: function (store) {
- var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
+ var view = new views.StoreView(store, this.getViewFilt(), this.state.sortKeyFun);
this.setState({
view: view
});
@@ -73,7 +72,7 @@ var MainView = React.createClass({
},
onRemove: function (flow_id, index) {
if (flow_id === this.getParams().flowId) {
- var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length -1)];
+ var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length - 1)];
this.selectFlow(flow_to_select);
}
},
@@ -86,6 +85,12 @@ var MainView = React.createClass({
componentWillUnmount: function () {
this.closeView();
},
+ setSortKeyFun: function(sortKeyFun){
+ this.setState({
+ sortKeyFun: sortKeyFun
+ });
+ this.state.view.recalculate(this.getViewFilt(), sortKeyFun);
+ },
selectFlow: function (flow) {
if (flow) {
this.replaceWith(
@@ -194,10 +199,12 @@ var MainView = React.createClass({
}
break;
case toputils.Key.V:
- if(e.shiftKey && flow && flow.modified) {
+ if (e.shiftKey && flow && flow.modified) {
actions.FlowActions.revert(flow);
}
break;
+ case toputils.Key.SHIFT:
+ break;
default:
console.debug("keydown", e.keyCode);
return;
@@ -214,7 +221,7 @@ var MainView = React.createClass({
if (selected) {
details = [
<common.Splitter key="splitter"/>,
- <flowdetail.FlowDetail key="flowDetails" ref="flowDetails" flow={selected}/>
+ <FlowView key="flowDetails" ref="flowDetails" flow={selected}/>
];
} else {
details = null;
@@ -225,6 +232,7 @@ var MainView = React.createClass({
<FlowTable ref="flowTable"
view={this.state.view}
selectFlow={this.selectFlow}
+ setSortKeyFun={this.setSortKeyFun}
selected={selected} />
{details}
</div>
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index c5d7491d..863a9f53 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -8,6 +8,7 @@ var Footer = require("./footer.js");
var header = require("./header.js");
var EventLog = require("./eventlog.js");
var store = require("../store/store.js");
+var Query = require("../actions.js").Query;
//TODO: Move out of here, just a stub.
@@ -47,7 +48,6 @@ var ProxyAppMain = React.createClass({
});
},
render: function () {
-
var eventlog;
if (this.getQuery()[Query.SHOW_EVENTLOG]) {
eventlog = [
@@ -57,11 +57,13 @@ var ProxyAppMain = React.createClass({
} else {
eventlog = null;
}
-
return (
<div id="container">
<header.Header settings={this.state.settings.dict}/>
- <RouteHandler settings={this.state.settings.dict} flowStore={this.state.flowStore}/>
+ <RouteHandler
+ settings={this.state.settings.dict}
+ flowStore={this.state.flowStore}
+ query={this.getQuery()}/>
{eventlog}
<Footer settings={this.state.settings.dict}/>
</div>
@@ -88,5 +90,4 @@ var routes = (
module.exports = {
routes: routes
-};
-
+}; \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-14 15:43:47 +0000