Magic-Mirror/mitmproxy
1
0
Fork 0
mirror of https://github.com/mitmproxy/mitmproxy.git synced 2024-11-29 08:10:37 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

web: smaller changes

Browse Source
This commit is contained in:
Maximilian Hils 2015-03-15 22:05:50 +01:00
parent 3650d73662
commit 4a92c42517
9 changed files with 65 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
libmproxy/web/static/app.js
View File

@ -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);
}

5
web/src/js/actions.js
View File

@ -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
};

3
web/src/js/app.js
View File

@ -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);
});
});

34
web/src/js/components/common.js
View File

@ -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
}
};

1
web/src/js/components/eventlog.js
View File

@ -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");

6
web/src/js/components/header.js
View File

@ -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">

17
web/src/js/components/mainview.js
View File

@ -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;

9
web/src/js/components/proxyapp.js
View File

@ -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>
@ -89,4 +91,3 @@ var routes = (
module.exports = {
routes: routes
};

7
web/src/js/store/view.js
View File

@ -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);
}