aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--libmproxy/web/static/app.js87
-rw-r--r--web/src/js/actions.js5
-rw-r--r--web/src/js/app.js3
-rw-r--r--web/src/js/components/common.js34
-rw-r--r--web/src/js/components/eventlog.js1
-rw-r--r--web/src/js/components/header.js6
-rw-r--r--web/src/js/components/mainview.js17
-rw-r--r--web/src/js/components/proxyapp.js11
-rw-r--r--web/src/js/store/view.js7
9 files changed, 65 insertions, 106 deletions
diff --git a/libmproxy/web/static/app.js b/libmproxy/web/static/app.js
index f8f14fcc..8b6276ba 100644
--- a/libmproxy/web/static/app.js
+++ b/libmproxy/web/static/app.js
@@ -410,7 +410,7 @@ var FlowActions = {
}
};
-Query = {
+var Query = {
FILTER: "f",
HIGHLIGHT: "h",
SHOW_EVENTLOG: "e"
@@ -420,7 +420,8 @@ module.exports = {
ActionTypes: ActionTypes,
ConnectionActions: ConnectionActions,
FlowActions: FlowActions,
- StoreCmds: StoreCmds
+ StoreCmds: StoreCmds,
+ Query: Query
};
},{"jquery":"jquery"}],3:[function(require,module,exports){
@@ -428,14 +429,13 @@ module.exports = {
var React = require("react");
var ReactRouter = require("react-router");
var $ = require("jquery");
-
var Connection = require("./connection");
var proxyapp = require("./components/proxyapp.js");
$(function () {
window.ws = new Connection("/updates");
- ReactRouter.run(proxyapp.routes, function (Handler) {
+ ReactRouter.run(proxyapp.routes, function (Handler, state) {
React.render(React.createElement(Handler, null), document.body);
});
});
@@ -483,7 +483,7 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
q[i] = dict[i] || undefined; //falsey values shall be removed.
}
}
- q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599
+ q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
},
replaceWith: function(routeNameOrPath, params, query) {
@@ -493,38 +493,16 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
if(params === undefined){
params = this.context.getCurrentParams();
}
- if(query === undefined){
+ if(query === undefined) {
query = this.context.getCurrentQuery();
}
+
+ // FIXME: react-router is just broken.
ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
}
});
_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
-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
- });
- },
- 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;
- }
-});
-
var Splitter = React.createClass({displayName: "Splitter",
getDefaultProps: function () {
return {
@@ -631,16 +609,17 @@ var Splitter = React.createClass({displayName: "Splitter",
});
module.exports = {
- State: State,
+ State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future.
Navigation: Navigation,
StickyHeadMixin: StickyHeadMixin,
AutoScrollMixin: AutoScrollMixin,
Splitter: Splitter
-}
+};
},{"lodash":"lodash","react":"react","react-router":"react-router"}],5:[function(require,module,exports){
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");
@@ -796,7 +775,7 @@ var EventLog = React.createClass({displayName: "EventLog",
module.exports = EventLog;
-},{"../store/view.js":19,"./common.js":4,"./virtualscroll.js":13,"react":"react"}],6:[function(require,module,exports){
+},{"../actions.js":2,"../store/view.js":19,"./common.js":4,"./virtualscroll.js":13,"react":"react"}],6:[function(require,module,exports){
var React = require("react");
var _ = require("lodash");
@@ -1537,9 +1516,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({displayName: "FilterDocs",
statics: {
@@ -1564,12 +1543,12 @@ var FilterDocs = React.createClass({displayName: "FilterDocs",
return React.createElement("i", {className: "fa fa-spinner fa-spin"});
} else {
var commands = FilterDocs.doc.commands.map(function (c) {
- return React.createElement("tr", null,
+ return React.createElement("tr", {key: c[1]},
React.createElement("td", null, c[0].replace(" ", '\u00a0')),
React.createElement("td", null, c[1])
);
});
- commands.push(React.createElement("tr", null,
+ commands.push(React.createElement("tr", {key: "docs-link"},
React.createElement("td", {colSpan: "2"},
React.createElement("a", {href: "https://mitmproxy.org/doc/features/filters.html",
target: "_blank"},
@@ -1928,6 +1907,7 @@ 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");
@@ -1938,12 +1918,6 @@ var flowdetail = require("./flowdetail.js");
var MainView = React.createClass({displayName: "MainView",
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: []
};
@@ -1972,6 +1946,12 @@ var MainView = React.createClass({displayName: "MainView",
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.getViewSort());
+ }
},
openView: function (store) {
var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
@@ -1999,7 +1979,7 @@ var MainView = React.createClass({displayName: "MainView",
},
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);
}
},
@@ -2120,7 +2100,7 @@ var MainView = React.createClass({displayName: "MainView",
}
break;
case toputils.Key.V:
- if(e.shiftKey && flow && flow.modified) {
+ if (e.shiftKey && flow && flow.modified) {
actions.FlowActions.revert(flow);
}
break;
@@ -2172,6 +2152,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.
@@ -2211,7 +2192,6 @@ var ProxyAppMain = React.createClass({displayName: "ProxyAppMain",
});
},
render: function () {
-
var eventlog;
if (this.getQuery()[Query.SHOW_EVENTLOG]) {
eventlog = [
@@ -2221,11 +2201,13 @@ var ProxyAppMain = React.createClass({displayName: "ProxyAppMain",
} else {
eventlog = null;
}
-
return (
React.createElement("div", {id: "container"},
React.createElement(header.Header, {settings: this.state.settings.dict}),
- React.createElement(RouteHandler, {settings: this.state.settings.dict, flowStore: this.state.flowStore}),
+ React.createElement(RouteHandler, {
+ settings: this.state.settings.dict,
+ flowStore: this.state.flowStore,
+ query: this.getQuery()}),
eventlog,
React.createElement(Footer, {settings: this.state.settings.dict})
)
@@ -2254,9 +2236,7 @@ module.exports = {
routes: routes
};
-
-
-},{"../store/store.js":18,"./common.js":4,"./eventlog.js":5,"./footer.js":9,"./header.js":10,"./mainview.js":11,"lodash":"lodash","react":"react","react-router":"react-router"}],13:[function(require,module,exports){
+},{"../actions.js":2,"../store/store.js":18,"./common.js":4,"./eventlog.js":5,"./footer.js":9,"./header.js":10,"./mainview.js":11,"lodash":"lodash","react":"react","react-router":"react-router"}],13:[function(require,module,exports){
var React = require("react");
var VirtualScrollMixin = {
@@ -4425,7 +4405,6 @@ module.exports = {
};
},{"../actions.js":2,"../dispatcher.js":15,"../utils.js":20,"events":1,"jquery":"jquery","lodash":"lodash"}],19:[function(require,module,exports){
-
var EventEmitter = require('events').EventEmitter;
var _ = require("lodash");
@@ -4437,7 +4416,7 @@ function SortByStoreOrder(elem) {
}
var default_sort = SortByStoreOrder;
-var default_filt = function(elem){
+var default_filt = function (elem) {
return true;
};
@@ -4466,8 +4445,8 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
this.store.removeListener("update", this.update);
this.store.removeListener("remove", this.remove);
this.store.removeListener("recalculate", this.recalculate);
- },
- recalculate: function (filt, sortfun) {
+ },
+ recalculate: function (filt, sortfun) {
if (filt) {
this.filt = filt.bind(this);
}
diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 258501a4..64cd68a7 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -106,7 +106,7 @@ var FlowActions = {
}
};
-Query = {
+var Query = {
FILTER: "f",
HIGHLIGHT: "h",
SHOW_EVENTLOG: "e"
@@ -116,5 +116,6 @@ module.exports = {
ActionTypes: ActionTypes,
ConnectionActions: ConnectionActions,
FlowActions: FlowActions,
- StoreCmds: StoreCmds
+ StoreCmds: StoreCmds,
+ Query: Query
}; \ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index a7f3570e..63d782d4 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -2,14 +2,13 @@
var React = require("react");
var ReactRouter = require("react-router");
var $ = require("jquery");
-
var Connection = require("./connection");
var proxyapp = require("./components/proxyapp.js");
$(function () {
window.ws = new Connection("/updates");
- ReactRouter.run(proxyapp.routes, function (Handler) {
+ ReactRouter.run(proxyapp.routes, function (Handler, state) {
React.render(<Handler/>, document.body);
});
});
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 96262acc..ffaa717f 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -38,7 +38,7 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
q[i] = dict[i] || undefined; //falsey values shall be removed.
}
}
- q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599
+ q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
},
replaceWith: function(routeNameOrPath, params, query) {
@@ -48,38 +48,16 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
if(params === undefined){
params = this.context.getCurrentParams();
}
- if(query === undefined){
+ if(query === undefined) {
query = this.context.getCurrentQuery();
}
+
+ // FIXME: react-router is just broken.
ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
}
});
_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
-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
- });
- },
- 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;
- }
-});
-
var Splitter = React.createClass({
getDefaultProps: function () {
return {
@@ -186,9 +164,9 @@ var Splitter = React.createClass({
});
module.exports = {
- State: State,
+ State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future.
Navigation: Navigation,
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..23508275 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,5 +1,6 @@
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");
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 76a1a5fb..d1684fb2 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">
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 550a61da..18d7318f 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -2,6 +2,7 @@ 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");
@@ -12,12 +13,6 @@ var flowdetail = require("./flowdetail.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: []
};
@@ -46,6 +41,12 @@ var MainView = React.createClass({
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.getViewSort());
+ }
},
openView: function (store) {
var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
@@ -73,7 +74,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);
}
},
@@ -194,7 +195,7 @@ 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;
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
diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js
index b5db9287..9bf31c52 100644
--- a/web/src/js/store/view.js
+++ b/web/src/js/store/view.js
@@ -1,4 +1,3 @@
-
var EventEmitter = require('events').EventEmitter;
var _ = require("lodash");
@@ -10,7 +9,7 @@ function SortByStoreOrder(elem) {
}
var default_sort = SortByStoreOrder;
-var default_filt = function(elem){
+var default_filt = function (elem) {
return true;
};
@@ -39,8 +38,8 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
this.store.removeListener("update", this.update);
this.store.removeListener("remove", this.remove);
this.store.removeListener("recalculate", this.recalculate);
- },
- recalculate: function (filt, sortfun) {
+ },
+ recalculate: function (filt, sortfun) {
if (filt) {
this.filt = filt.bind(this);
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 15:12:19 +0000