Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2025-02-07 02:28:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'redux-ducks'

Browse Source
This commit is contained in:
Maximilian Hils 2016-06-02 23:45:36 -07:00
commit e31aa39fc2
18 changed files with 3957 additions and 2537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mitmproxy/web/__init__.py
View File

@ -73,7 +73,7 @@ class WebState(flow.State):
}
self.events.append(entry)
app.ClientConnection.broadcast(
type="events",
type="UPDATE_EVENTLOG",
cmd="add",
data=entry
)

51
mitmproxy/web/static/app.css
View File

@ -164,49 +164,6 @@ header .menu {
max-height: 500px;
overflow-y: auto;
}
.menu .toggle-btn {
float: left;
width: 33.33333333%;
position: relative;
min-height: 1px;
padding-left: 2.5px;
padding-right: 2.5px;
margin-bottom: 5px;
}
@media (min-width: 768px) {
.menu .toggle-btn {
float: left;
width: 25%;
}
}
@media (min-width: 1200px) {
.menu .toggle-btn {
float: left;
width: 16.66666667%;
}
}
.menu .toggle-btn .btn {
width: 100%;
}
.menu .toggle-input-btn {
position: relative;
min-height: 1px;
padding-left: 2.5px;
padding-right: 2.5px;
margin-bottom: 5px;
}
@media (min-width: 768px) {
.menu .toggle-input-btn {
float: left;
width: 50%;
}
}
@media (min-width: 1200px) {
.menu .toggle-input-btn {
float: left;
width: 33.33333333%;
}
}
.flow-table {
width: 100%;
overflow-y: scroll;
@ -452,6 +409,14 @@ header .menu {
.eventlog .fa-close:hover {
color: black;
}
.eventlog .btn-toggle {
margin-top: -2px;
margin-left: 3px;
padding: 2px 2px;
font-size: 10px;
line-height: 10px;
border-radius: 2px;
}
.eventlog .label {
cursor: pointer;
vertical-align: middle;

618
mitmproxy/web/static/app.js
View File

@ -452,40 +452,56 @@ var Query = exports.Query = {
SHOW_EVENTLOG: "e"
};
},{"./dispatcher.js":22,"./utils.js":27,"jquery":"jquery"}],3:[function(require,module,exports){
"use strict";
},{"./dispatcher.js":22,"./utils.js":31,"jquery":"jquery"}],3:[function(require,module,exports){
'use strict';
var _react = require("react");
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _reactDom = require('react-dom');
var _jquery = require("jquery");
var _redux = require('redux');
var _jquery2 = _interopRequireDefault(_jquery);
var _reactRedux = require('react-redux');
var _connection = require("./connection");
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
var _connection = require('./connection');
var _connection2 = _interopRequireDefault(_connection);
var _proxyapp = require("./components/proxyapp.js");
var _proxyapp = require('./components/proxyapp.js');
var _actions = require("./actions.js");
var _index = require('./ducks/index');
var _index2 = _interopRequireDefault(_index);
var _eventLog = require('./ducks/eventLog');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _jquery2.default)(function () {
window.ws = new _connection2.default("/updates");
// logger must be last
var logger = (0, _reduxLogger2.default)();
var store = (0, _redux.createStore)(_index2.default, (0, _redux.applyMiddleware)(logger));
window.onerror = function (msg) {
_actions.EventLogActions.add_event(msg);
};
window.onerror = function (msg) {
store.dispatch((0, _eventLog.addLogEntry)(msg));
};
(0, _reactDom.render)(_proxyapp.app, document.getElementById("mitmproxy"));
document.addEventListener('DOMContentLoaded', function () {
window.ws = new _connection2.default("/updates", store.dispatch);
(0, _reactDom.render)(_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_proxyapp.App
), document.getElementById("mitmproxy"));
});
},{"./actions.js":2,"./components/proxyapp.js":20,"./connection":21,"jquery":"jquery","react":"react","react-dom":"react-dom"}],4:[function(require,module,exports){
},{"./components/proxyapp.js":20,"./connection":21,"./ducks/eventLog":23,"./ducks/index":24,"react":"react","react-dom":"react-dom","react-redux":"react-redux","redux":"redux","redux-logger":"redux-logger"}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -625,28 +641,23 @@ var Splitter = exports.Splitter = _react2.default.createClass({
}
});
var ToggleButton = exports.ToggleButton = function ToggleButton(props) {
var ToggleButton = exports.ToggleButton = function ToggleButton(_ref) {
var checked = _ref.checked;
var onToggle = _ref.onToggle;
var text = _ref.text;
return _react2.default.createElement(
"div",
{ className: "input-group toggle-btn" },
_react2.default.createElement(
"div",
{
className: "btn " + (props.checked ? "btn-primary" : "btn-default"),
onClick: props.onToggleChanged },
_react2.default.createElement(
"span",
{ className: "fa " + (props.checked ? "fa-check-square-o" : "fa-square-o") },
" ",
props.name
)
)
{ className: "btn btn-toggle " + (checked ? "btn-primary" : "btn-default"), onClick: onToggle },
_react2.default.createElement("i", { className: "fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o") }),
" ",
text
);
};
ToggleButton.propTypes = {
name: _react2.default.PropTypes.string.isRequired,
onToggleChanged: _react2.default.PropTypes.func.isRequired
checked: _react2.default.PropTypes.bool.isRequired,
onToggle: _react2.default.PropTypes.func.isRequired,
text: _react2.default.PropTypes.string.isRequired
};
var ToggleInputButton = exports.ToggleInputButton = function (_React$Component) {
@ -709,7 +720,7 @@ ToggleInputButton.propTypes = {
onToggleChanged: _react2.default.PropTypes.func.isRequired
};
},{"../utils.js":27,"lodash":"lodash","react":"react","react-dom":"react-dom"}],5:[function(require,module,exports){
},{"../utils.js":31,"lodash":"lodash","react":"react","react-dom":"react-dom"}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -967,12 +978,13 @@ var ValueEditor = exports.ValueEditor = _react2.default.createClass({
}
});
},{"../utils.js":27,"react":"react","react-dom":"react-dom"}],6:[function(require,module,exports){
},{"../utils.js":31,"react":"react","react-dom":"react-dom"}],6:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToggleEventLog = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@ -984,11 +996,13 @@ var _reactDom = require("react-dom");
var _reactDom2 = _interopRequireDefault(_reactDom);
var _reactRedux = require("react-redux");
var _shallowequal = require("shallowequal");
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _actions = require("../actions.js");
var _eventLog = require("../ducks/eventLog");
var _AutoScroll = require("./helpers/AutoScroll");
@ -996,11 +1010,7 @@ var _AutoScroll2 = _interopRequireDefault(_AutoScroll);
var _VirtualScroll = require("./helpers/VirtualScroll");
var _view = require("../store/view.js");
var _lodash = require("lodash");
var _lodash2 = _interopRequireDefault(_lodash);
var _common = require("./common");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -1010,22 +1020,36 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function LogIcon(_ref) {
var event = _ref.event;
var icon = { web: "html5", debug: "bug" }[event.level] || "info";
return _react2.default.createElement("i", { className: "fa fa-fw fa-" + icon });
}
function LogEntry(_ref2) {
var event = _ref2.event;
var registerHeight = _ref2.registerHeight;
return _react2.default.createElement(
"div",
{ ref: registerHeight },
_react2.default.createElement(LogIcon, { event: event }),
event.message
);
}
var EventLogContents = function (_React$Component) {
_inherits(EventLogContents, _React$Component);
function EventLogContents(props, context) {
function EventLogContents(props) {
_classCallCheck(this, EventLogContents);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(EventLogContents).call(this, props, context));
_this.view = new _view.StoreView(_this.context.eventStore, function (entry) {
return _this.props.filter[entry.level];
});
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(EventLogContents).call(this, props));
_this.heights = {};
_this.state = { entries: _this.view.list, vScroll: (0, _VirtualScroll.calcVScroll)() };
_this.state = { vScroll: (0, _VirtualScroll.calcVScroll)() };
_this.onChange = _this.onChange.bind(_this);
_this.onViewportUpdate = _this.onViewportUpdate.bind(_this);
return _this;
}
@ -1034,32 +1058,18 @@ var EventLogContents = function (_React$Component) {
key: "componentDidMount",
value: function componentDidMount() {
window.addEventListener("resize", this.onViewportUpdate);
this.view.addListener("add", this.onChange);
this.view.addListener("recalculate", this.onChange);
this.onViewportUpdate();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener("resize", this.onViewportUpdate);
this.view.removeListener("add", this.onChange);
this.view.removeListener("recalculate", this.onChange);
this.view.close();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.onViewportUpdate();
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.filter !== this.props.filter) {
this.view.recalculate(function (entry) {
return nextProps.filter[entry.level];
});
}
}
}, {
key: "onViewportUpdate",
value: function onViewportUpdate() {
@ -1068,11 +1078,11 @@ var EventLogContents = function (_React$Component) {
var viewport = _reactDom2.default.findDOMNode(this);
var vScroll = (0, _VirtualScroll.calcVScroll)({
itemCount: this.state.entries.length,
itemCount: this.props.events.length,
rowHeight: this.props.rowHeight,
viewportTop: viewport.scrollTop,
viewportHeight: viewport.offsetHeight,
itemHeights: this.state.entries.map(function (entry) {
itemHeights: this.props.events.map(function (entry) {
return _this2.heights[entry.id];
})
});
@ -1081,47 +1091,39 @@ var EventLogContents = function (_React$Component) {
this.setState({ vScroll: vScroll });
}
}
}, {
key: "onChange",
value: function onChange() {
this.setState({ entries: this.view.list });
}
}, {
key: "setHeight",
value: function setHeight(id, ref) {
if (ref && !this.heights[id]) {
var height = _reactDom2.default.findDOMNode(ref).offsetHeight;
value: function setHeight(id, node) {
console.log("setHeight", id, node);
if (node && !this.heights[id]) {
var height = node.offsetHeight;
if (this.heights[id] !== height) {
this.heights[id] = height;
this.onViewportUpdate();
}
}
}
}, {
key: "getIcon",
value: function getIcon(level) {
return { web: "html5", debug: "bug" }[level] || "info";
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var vScroll = this.state.vScroll;
var entries = this.state.entries.slice(vScroll.start, vScroll.end);
var events = this.props.events.slice(vScroll.start, vScroll.end).map(function (event) {
return _react2.default.createElement(LogEntry, {
event: event,
key: event.id,
registerHeight: function registerHeight(node) {
return _this3.setHeight(event.id, node);
}
});
});
return _react2.default.createElement(
"pre",
{ onScroll: this.onViewportUpdate },
_react2.default.createElement("div", { style: { height: vScroll.paddingTop } }),
entries.map(function (entry, index) {
return _react2.default.createElement(
"div",
{ key: entry.id, ref: _this3.setHeight.bind(_this3, entry.id) },
_react2.default.createElement("i", { className: "fa fa-fw fa-" + _this3.getIcon(entry.level) }),
entry.message
);
}),
events,
_react2.default.createElement("div", { style: { height: vScroll.paddingBottom } })
);
}
@ -1130,95 +1132,80 @@ var EventLogContents = function (_React$Component) {
return EventLogContents;
}(_react2.default.Component);
EventLogContents.contextTypes = {
eventStore: _react2.default.PropTypes.object.isRequired
};
EventLogContents.defaultProps = {
rowHeight: 18
};
ToggleFilter.propTypes = {
name: _react2.default.PropTypes.string.isRequired,
toggleLevel: _react2.default.PropTypes.func.isRequired,
active: _react2.default.PropTypes.bool
};
EventLogContents = (0, _AutoScroll2.default)(EventLogContents);
function ToggleFilter(_ref) {
var name = _ref.name;
var active = _ref.active;
var toggleLevel = _ref.toggleLevel;
var EventLogContentsContainer = (0, _reactRedux.connect)(function (state) {
return {
events: state.eventLog.filteredEvents
};
})(EventLogContents);
var className = "label ";
if (active) {
className += "label-primary";
} else {
className += "label-default";
}
var ToggleEventLog = exports.ToggleEventLog = (0, _reactRedux.connect)(function (state) {
return {
checked: state.eventLog.visible
};
}, function (dispatch) {
return {
onToggle: function onToggle() {
return dispatch((0, _eventLog.toggleEventLogVisibility)());
}
};
})(_common.ToggleButton);
function onClick(event) {
event.preventDefault();
toggleLevel(name);
}
var ToggleFilter = (0, _reactRedux.connect)(function (state, ownProps) {
return {
checked: state.eventLog.filter[ownProps.text]
};
}, function (dispatch, ownProps) {
return {
onToggle: function onToggle() {
return dispatch((0, _eventLog.toggleEventLogFilter)(ownProps.text));
}
};
})(_common.ToggleButton);
var EventLog = function EventLog(_ref3) {
var close = _ref3.close;
return _react2.default.createElement(
"a",
{
href: "#",
className: className,
onClick: onClick },
name
);
}
var AutoScrollEventLog = (0, _AutoScroll2.default)(EventLogContents);
var EventLog = _react2.default.createClass({
displayName: "EventLog",
getInitialState: function getInitialState() {
return {
filter: {
"debug": false,
"info": true,
"web": true
}
};
},
close: function close() {
var d = {};
d[_actions.Query.SHOW_EVENTLOG] = undefined;
this.props.updateLocation(undefined, d);
},
toggleLevel: function toggleLevel(level) {
var filter = _lodash2.default.extend({}, this.state.filter);
filter[level] = !filter[level];
this.setState({ filter: filter });
},
render: function render() {
return _react2.default.createElement(
"div",
{ className: "eventlog" },
_react2.default.createElement(
"div",
{ className: "eventlog" },
null,
"Eventlog",
_react2.default.createElement(
"div",
null,
"Eventlog",
_react2.default.createElement(
"div",
{ className: "pull-right" },
_react2.default.createElement(ToggleFilter, { name: "debug", active: this.state.filter.debug, toggleLevel: this.toggleLevel }),
_react2.default.createElement(ToggleFilter, { name: "info", active: this.state.filter.info, toggleLevel: this.toggleLevel }),
_react2.default.createElement(ToggleFilter, { name: "web", active: this.state.filter.web, toggleLevel: this.toggleLevel }),
_react2.default.createElement("i", { onClick: this.close, className: "fa fa-close" })
)
),
_react2.default.createElement(AutoScrollEventLog, { filter: this.state.filter })
);
}
});
{ className: "pull-right" },
_react2.default.createElement(ToggleFilter, { text: "debug" }),
_react2.default.createElement(ToggleFilter, { text: "info" }),
_react2.default.createElement(ToggleFilter, { text: "web" }),
_react2.default.createElement("i", { onClick: close, className: "fa fa-close" })
)
),
_react2.default.createElement(EventLogContentsContainer, null)
);
};
exports.default = EventLog;
EventLog.propTypes = {
close: _react2.default.PropTypes.func.isRequired
};
},{"../actions.js":2,"../store/view.js":26,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"lodash":"lodash","react":"react","react-dom":"react-dom","shallowequal":"shallowequal"}],7:[function(require,module,exports){
var EventLogContainer = (0, _reactRedux.connect)(undefined, function (dispatch) {
return {
close: function close() {
return dispatch((0, _eventLog.toggleEventLogVisibility)());
}
};
})(EventLog);
exports.default = EventLogContainer;
},{"../ducks/eventLog":23,"./common":4,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"react":"react","react-dom":"react-dom","react-redux":"react-redux","shallowequal":"shallowequal"}],7:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -1487,7 +1474,7 @@ var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn
exports.default = all_columns;
},{"../flow/utils.js":24,"../utils.js":27,"react":"react"}],8:[function(require,module,exports){
},{"../flow/utils.js":28,"../utils.js":31,"react":"react"}],8:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -1779,7 +1766,7 @@ FlowTable.defaultProps = {
};
exports.default = (0, _AutoScroll2.default)(FlowTable);
},{"../utils.js":27,"./flowtable-columns.js":7,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"classnames":"classnames","lodash":"lodash","react":"react","react-dom":"react-dom","shallowequal":"shallowequal"}],9:[function(require,module,exports){
},{"../utils.js":31,"./flowtable-columns.js":7,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"classnames":"classnames","lodash":"lodash","react":"react","react-dom":"react-dom","shallowequal":"shallowequal"}],9:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -2133,7 +2120,7 @@ var ContentView = _react2.default.createClass({
exports.default = ContentView;
},{"../../flow/utils.js":24,"../../utils.js":27,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
},{"../../flow/utils.js":28,"../../utils.js":31,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -2401,7 +2388,7 @@ var Details = _react2.default.createClass({
exports.default = Details;
},{"../../utils.js":27,"lodash":"lodash","react":"react"}],11:[function(require,module,exports){
},{"../../utils.js":31,"lodash":"lodash","react":"react"}],11:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -2895,7 +2882,7 @@ var Error = exports.Error = _react2.default.createClass({
}
});
},{"../../actions.js":2,"../../flow/utils.js":24,"../../utils.js":27,"../editor.js":5,"./contentview.js":9,"lodash":"lodash","react":"react","react-dom":"react-dom"}],13:[function(require,module,exports){
},{"../../actions.js":2,"../../flow/utils.js":28,"../../utils.js":31,"../editor.js":5,"./contentview.js":9,"lodash":"lodash","react":"react","react-dom":"react-dom"}],13:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -3078,7 +3065,7 @@ function Footer(_ref) {
);
}
},{"../utils.js":27,"./common.js":4,"react":"react"}],15:[function(require,module,exports){
},{"../utils.js":31,"./common.js":4,"react":"react"}],15:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -3098,6 +3085,8 @@ var _jquery = require("jquery");
var _jquery2 = _interopRequireDefault(_jquery);
var _reactRedux = require("react-redux");
var _filt = require("../filt/filt.js");
var _filt2 = _interopRequireDefault(_filt);
@ -3108,6 +3097,8 @@ var _common = require("./common.js");
var _actions = require("../actions.js");
var _eventlog = require("./eventlog");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var FilterDocs = _react2.default.createClass({
@ -3361,29 +3352,14 @@ var ViewMenu = _react2.default.createClass({
title: "View",
route: "flows"
},
toggleEventLog: function toggleEventLog() {
var d = {};
if (this.props.query[_actions.Query.SHOW_EVENTLOG]) {
d[_actions.Query.SHOW_EVENTLOG] = undefined;
} else {
d[_actions.Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
}
this.props.updateLocation(undefined, d);
console.log('toggleevent');
},
render: function render() {
var showEventLog = this.props.query[_actions.Query.SHOW_EVENTLOG];
return _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"div",
{ className: "menu-row" },
_react2.default.createElement(_common.ToggleButton, {
checked: showEventLog,
name: "Show Eventlog",
onToggleChanged: this.toggleEventLog })
_react2.default.createElement(_eventlog.ToggleEventLog, { text: "Show Event Log" })
),
_react2.default.createElement("div", { className: "clearfix" })
);
@ -3410,39 +3386,39 @@ var OptionMenu = exports.OptionMenu = function OptionMenu(props) {
_react2.default.createElement(
"div",
{ className: "menu-row" },
_react2.default.createElement(_common.ToggleButton, { name: "showhost",
_react2.default.createElement(_common.ToggleButton, { text: "showhost",
checked: showhost,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ showhost: !showhost });
}
}),
_react2.default.createElement(_common.ToggleButton, { name: "no_upstream_cert",
_react2.default.createElement(_common.ToggleButton, { text: "no_upstream_cert",
checked: no_upstream_cert,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ no_upstream_cert: !no_upstream_cert });
}
}),
_react2.default.createElement(_common.ToggleButton, { name: "rawtcp",
_react2.default.createElement(_common.ToggleButton, { text: "rawtcp",
checked: rawtcp,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ rawtcp: !rawtcp });
}
}),
_react2.default.createElement(_common.ToggleButton, { name: "http2",
_react2.default.createElement(_common.ToggleButton, { text: "http2",
checked: http2,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ http2: !http2 });
}
}),
_react2.default.createElement(_common.ToggleButton, { name: "anticache",
_react2.default.createElement(_common.ToggleButton, { text: "anticache",
checked: anticache,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ anticache: !anticache });
}
}),
_react2.default.createElement(_common.ToggleButton, { name: "anticomp",
_react2.default.createElement(_common.ToggleButton, { text: "anticomp",
checked: anticomp,
onToggleChanged: function onToggleChanged() {
onToggle: function onToggle() {
return _actions.SettingsActions.update({ anticomp: !anticomp });
}
}),
@ -3664,7 +3640,7 @@ var Header = exports.Header = _react2.default.createClass({
}
});
},{"../actions.js":2,"../filt/filt.js":23,"../utils.js":27,"./common.js":4,"jquery":"jquery","react":"react","react-dom":"react-dom"}],16:[function(require,module,exports){
},{"../actions.js":2,"../filt/filt.js":27,"../utils.js":31,"./common.js":4,"./eventlog":6,"jquery":"jquery","react":"react","react-dom":"react-dom","react-redux":"react-redux"}],16:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -4080,7 +4056,7 @@ var MainView = _react2.default.createClass({
exports.default = MainView;
},{"../actions.js":2,"../filt/filt.js":23,"../store/view.js":26,"../utils.js":27,"./common.js":4,"./flowtable.js":8,"./flowview/index.js":11,"react":"react"}],19:[function(require,module,exports){
},{"../actions.js":2,"../filt/filt.js":27,"../store/view.js":30,"../utils.js":31,"./common.js":4,"./flowtable.js":8,"./flowview/index.js":11,"react":"react"}],19:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -4216,13 +4192,13 @@ var Prompt = _react2.default.createClass({
exports.default = Prompt;
},{"../utils.js":27,"lodash":"lodash","react":"react","react-dom":"react-dom"}],20:[function(require,module,exports){
},{"../utils.js":31,"lodash":"lodash","react":"react","react-dom":"react-dom"}],20:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.app = undefined;
exports.App = undefined;
var _react = require("react");
@ -4236,6 +4212,10 @@ var _lodash = require("lodash");
var _lodash2 = _interopRequireDefault(_lodash);
var _reactRedux = require("react-redux");
var _reactRouter = require("react-router");
var _common = require("./common.js");
var _mainview = require("./mainview.js");
@ -4254,12 +4234,8 @@ var _eventlog2 = _interopRequireDefault(_eventlog);
var _store = require("../store/store.js");
var _actions = require("../actions.js");
var _utils = require("../utils.js");
var _reactRouter = require("react-router");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//TODO: Move out of here, just a stub.
@ -4377,8 +4353,8 @@ var ProxyAppMain = _react2.default.createClass({
render: function render() {
var query = this.getQuery();
var eventlog;
if (this.props.location.query[_actions.Query.SHOW_EVENTLOG]) {
eventlog = [_react2.default.createElement(_common.Splitter, { key: "splitter", axis: "y" }), _react2.default.createElement(_eventlog2.default, { key: "eventlog", updateLocation: this.updateLocation })];
if (this.props.showEventLog) {
eventlog = [_react2.default.createElement(_common.Splitter, { key: "splitter", axis: "y" }), _react2.default.createElement(_eventlog2.default, { key: "eventlog" })];
} else {
eventlog = null;
}
@ -4393,42 +4369,58 @@ var ProxyAppMain = _react2.default.createClass({
}
});
var app = exports.app = _react2.default.createElement(
var AppContainer = (0, _reactRedux.connect)(function (state) {
return {
showEventLog: state.eventLog.visible
};
})(ProxyAppMain);
var App = exports.App = _react2.default.createElement(
_reactRouter.Router,
{ history: _reactRouter.hashHistory },
_react2.default.createElement(_reactRouter.Redirect, { from: "/", to: "/flows" }),
_react2.default.createElement(
_reactRouter.Route,
{ path: "/", component: ProxyAppMain },
{ path: "/", component: AppContainer },
_react2.default.createElement(_reactRouter.Route, { path: "flows", component: _mainview2.default }),
_react2.default.createElement(_reactRouter.Route, { path: "flows/:flowId/:detailTab", component: _mainview2.default }),
_react2.default.createElement(_reactRouter.Route, { path: "reports", component: Reports })
)
);
},{"../actions.js":2,"../store/store.js":25,"../utils.js":27,"./common.js":4,"./eventlog.js":6,"./footer.js":14,"./header.js":15,"./mainview.js":18,"lodash":"lodash","react":"react","react-dom":"react-dom","react-router":"react-router"}],21:[function(require,module,exports){
},{"../store/store.js":29,"../utils.js":31,"./common.js":4,"./eventlog.js":6,"./footer.js":14,"./header.js":15,"./mainview.js":18,"lodash":"lodash","react":"react","react-dom":"react-dom","react-redux":"react-redux","react-router":"react-router"}],21:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Connection;
var _actions = require("./actions.js");
var _dispatcher = require("./dispatcher.js");
function Connection(url) {
var _websocket = require("./ducks/websocket");
var websocketActions = _interopRequireWildcard(_websocket);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function Connection(url, dispatch) {
if (url[0] === "/") {
url = location.origin.replace("http", "ws") + url;
}
var ws = new WebSocket(url);
ws.onopen = function () {
dispatch(websocketActions.connected());
_actions.ConnectionActions.open();
//TODO: fetch stuff!
};
ws.onmessage = function (message) {
var m = JSON.parse(message.data);
_dispatcher.AppDispatcher.dispatchServerAction(m);
ws.onmessage = function (m) {
var message = JSON.parse(m.data);
_dispatcher.AppDispatcher.dispatchServerAction(message);
dispatch(message);
};
ws.onerror = function () {
_actions.ConnectionActions.error();
@ -4437,13 +4429,12 @@ function Connection(url) {
ws.onclose = function () {
_actions.ConnectionActions.close();
_actions.EventLogActions.add_event("WebSocket connection closed.");
dispatch(websocketActions.disconnected());
};
return ws;
}
exports.default = Connection;
},{"./actions.js":2,"./dispatcher.js":22}],22:[function(require,module,exports){
},{"./actions.js":2,"./dispatcher.js":22,"./ducks/websocket":26}],22:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -4473,6 +4464,197 @@ AppDispatcher.dispatchServerAction = function (action) {
};
},{"flux":"flux"}],23:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = reducer;
exports.toggleEventLogFilter = toggleEventLogFilter;
exports.toggleEventLogVisibility = toggleEventLogVisibility;
exports.addLogEntry = addLogEntry;
var _list = require('./list');
var _list2 = _interopRequireDefault(_list);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var TOGGLE_FILTER = 'TOGGLE_EVENTLOG_FILTER';
var TOGGLE_VISIBILITY = 'TOGGLE_EVENTLOG_VISIBILITY';
var UPDATE_LIST = "UPDATE_EVENTLOG";
var defaultState = {
visible: false,
filter: {
"debug": false,
"info": true,
"web": true
},
events: (0, _list2.default)(),
filteredEvents: []
};
function reducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? defaultState : arguments[0];
var action = arguments[1];
switch (action.type) {
case TOGGLE_FILTER:
var filter = _extends({}, state.filter, _defineProperty({}, action.filter, !state.filter[action.filter]));
return _extends({}, state, {
filter: filter,
filteredEvents: state.events.list.filter(function (x) {
return filter[x.level];
})
});
case TOGGLE_VISIBILITY:
return _extends({}, state, {
visible: !state.visible
});
case UPDATE_LIST:
var events = (0, _list2.default)(state.events, action);
return _extends({}, state, {
events: events,
filteredEvents: events.list.filter(function (x) {
return state.filter[x.level];
})
});
default:
return state;
}
}
function toggleEventLogFilter(filter) {
return { type: TOGGLE_FILTER, filter: filter };
}
function toggleEventLogVisibility() {
return { type: TOGGLE_VISIBILITY };
}
var id = 0;
function addLogEntry(message) {
var level = arguments.length <= 1 || arguments[1] === undefined ? "web" : arguments[1];
return {
type: UPDATE_LIST,
cmd: _list.ADD,
data: { message: message, level: level, id: 'log-' + id++ }
};
}
},{"./list":25}],24:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _redux = require('redux');
var _eventLog = require('./eventLog.js');
var _eventLog2 = _interopRequireDefault(_eventLog);
var _websocket = require('./websocket.js');
var _websocket2 = _interopRequireDefault(_websocket);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var rootReducer = (0, _redux.combineReducers)({
eventLog: _eventLog2.default,
websocket: _websocket2.default
});
exports.default = rootReducer;
},{"./eventLog.js":23,"./websocket.js":26,"redux":"redux"}],25:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = getList;
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var ADD = exports.ADD = 'add';
var defaultState = {
list: [],
//isFetching: false,
//updateBeforeFetch: [],
indexOf: {}
};
//views: {}
function getList() {
var state = arguments.length <= 0 || arguments[0] === undefined ? defaultState : arguments[0];
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
switch (action.cmd) {
case ADD:
return {
list: [].concat(_toConsumableArray(state.list), [action.data]),
indexOf: _extends({}, state.indexOf, _defineProperty({}, action.data.id, state.list.length))
};
default:
return state;
}
}
},{}],26:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = reducer;
exports.connected = connected;
exports.disconnected = disconnected;
var CONNECTED = 'WEBSOCKET_CONNECTED';
var DISCONNECTED = 'WEBSOCKET_DISCONNECTED';
var defaultState = {
connected: true
};
/* we may want to have an error message attribute here at some point */
function reducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? defaultState : arguments[0];
var action = arguments[1];
switch (action.type) {
case CONNECTED:
return {
connected: true
};
case DISCONNECTED:
return {
connected: false
};
default:
return state;
}
}
function connected() {
return { type: CONNECTED };
}
function disconnected() {
return { type: DISCONNECTED };
}
},{}],27:[function(require,module,exports){
"use strict";
module.exports = function () {
@ -6376,7 +6558,7 @@ module.exports = function () {
};
}();
},{"../flow/utils.js":24}],24:[function(require,module,exports){
},{"../flow/utils.js":28}],28:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6510,7 +6692,7 @@ var parseHttpVersion = exports.parseHttpVersion = function parseHttpVersion(http
});
};
},{"jquery":"jquery","lodash":"lodash"}],25:[function(require,module,exports){
},{"jquery":"jquery","lodash":"lodash"}],29:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6697,7 +6879,7 @@ _lodash2.default.extend(EventLogStore.prototype, LiveListStore.prototype, {
}
});
},{"../actions.js":2,"../dispatcher.js":22,"events":1,"jquery":"jquery","lodash":"lodash"}],26:[function(require,module,exports){
},{"../actions.js":2,"../dispatcher.js":22,"events":1,"jquery":"jquery","lodash":"lodash"}],30:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6827,7 +7009,7 @@ _lodash2.default.extend(StoreView.prototype, _events.EventEmitter.prototype, {
}
});
},{"../utils.js":27,"events":1,"lodash":"lodash"}],27:[function(require,module,exports){
},{"../utils.js":31,"events":1,"lodash":"lodash"}],31:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {

5337
mitmproxy/web/static/vendor.js
View File

File diff suppressed because it is too large Load Diff

4
web/package.json
View File

@ -23,11 +23,15 @@
"lodash": "^4.11.2",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"shallowequal": "^0.2.2"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-eslint": "^6.0.4",
"babel-jest": "^12.0.2",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",

8
web/src/css/eventlog.less
View File

@ -33,6 +33,14 @@
}
}
.btn-toggle {
margin-top: -2px;
margin-left: 3px;
padding: 2px 2px;
font-size: 10px;
line-height: 10px;
border-radius: 2px;
}
.label {
cursor: pointer;
vertical-align: middle;

17
web/src/css/header.less
View File

@ -32,20 +32,3 @@ header {
overflow-y: auto;
}
}
.menu .toggle-btn {
.make-xs-column(4, @menu-row-gutter-width);
.make-sm-column(3, @menu-row-gutter-width);
.make-lg-column(2, @menu-row-gutter-width);
margin-bottom:5px;
}
.menu .toggle-btn .btn {
width: 100%;
}
.menu .toggle-input-btn {
.make-sm-column(6, @menu-row-gutter-width);
.make-lg-column(4, @menu-row-gutter-width);
margin-bottom:5px;
}

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

@ -1,17 +1,28 @@
import React from "react"
import { render } from 'react-dom'
import $ from "jquery"
import {render} from 'react-dom'
import {applyMiddleware, createStore} from 'redux'
import {Provider} from 'react-redux'
import createLogger from 'redux-logger';
import Connection from "./connection"
import {app} from "./components/proxyapp.js"
import { EventLogActions } from "./actions.js"
import {App} from "./components/proxyapp.js"
import rootReducer from './ducks/index';
import {addLogEntry} from "./ducks/eventLog";
$(function () {
window.ws = new Connection("/updates");
// logger must be last
const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger));
window.onerror = function (msg) {
EventLogActions.add_event(msg);
};
window.onerror = function (msg) {
store.dispatch(addLogEntry(msg));
};
document.addEventListener('DOMContentLoaded', () => {
window.ws = new Connection("/updates", store.dispatch);
render(
<Provider store={store}>{App}</Provider>,
document.getElementById("mitmproxy")
);
render(app, document.getElementById("mitmproxy"));
});

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

@ -108,18 +108,17 @@ export var Splitter = React.createClass({
}
});
export const ToggleButton = (props) =>
<div className="input-group toggle-btn">
<div
className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
onClick={props.onToggleChanged}>
<span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}>&nbsp;{props.name}</span>
</div>
export const ToggleButton = ({checked, onToggle, text}) =>
<div className={"btn btn-toggle " + (checked ? "btn-primary" : "btn-default")} onClick={onToggle}>
<i className={"fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o")}/>
&nbsp;
{text}
</div>;
ToggleButton.propTypes = {
name: React.PropTypes.string.isRequired,
onToggleChanged: React.PropTypes.func.isRequired
checked: React.PropTypes.bool.isRequired,
onToggle: React.PropTypes.func.isRequired,
text: React.PropTypes.string.isRequired
};
export class ToggleInputButton extends React.Component {

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

@ -1,86 +1,72 @@
import React from "react"
import ReactDOM from "react-dom"
import {connect} from 'react-redux'
import shallowEqual from "shallowequal"
import {Query} from "../actions.js"
import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog"
import AutoScroll from "./helpers/AutoScroll";
import {calcVScroll} from "./helpers/VirtualScroll"
import {StoreView} from "../store/view.js"
import _ from "lodash"
import {ToggleButton} from "./common";
function LogIcon({event}) {
let icon = {web: "html5", debug: "bug"}[event.level] || "info";
return <i className={`fa fa-fw fa-${icon}`}></i>
}
function LogEntry({event, registerHeight}) {
return <div ref={registerHeight}>
<LogIcon event={event}/>
{event.message}
</div>;
}
class EventLogContents extends React.Component {
static contextTypes = {
eventStore: React.PropTypes.object.isRequired,
};
static defaultProps = {
rowHeight: 18,
};
constructor(props, context) {
super(props, context);
this.view = new StoreView(
this.context.eventStore,
entry => this.props.filter[entry.level]
);
constructor(props) {
super(props);
this.heights = {};
this.state = { entries: this.view.list, vScroll: calcVScroll() };
this.state = {vScroll: calcVScroll()};
this.onChange = this.onChange.bind(this);
this.onViewportUpdate = this.onViewportUpdate.bind(this);
}
componentDidMount() {
window.addEventListener("resize", this.onViewportUpdate);
this.view.addListener("add", this.onChange);
this.view.addListener("recalculate", this.onChange);
this.onViewportUpdate();
}
componentWillUnmount() {
window.removeEventListener("resize", this.onViewportUpdate);
this.view.removeListener("add", this.onChange);
this.view.removeListener("recalculate", this.onChange);
this.view.close();
}
componentDidUpdate() {
this.onViewportUpdate();
}
componentWillReceiveProps(nextProps) {
if (nextProps.filter !== this.props.filter) {
this.view.recalculate(
entry => nextProps.filter[entry.level]
);
}
}
onViewportUpdate() {
const viewport = ReactDOM.findDOMNode(this);
const vScroll = calcVScroll({
itemCount: this.state.entries.length,
itemCount: this.props.events.length,
rowHeight: this.props.rowHeight,
viewportTop: viewport.scrollTop,
viewportHeight: viewport.offsetHeight,
itemHeights: this.state.entries.map(entry => this.heights[entry.id]),
itemHeights: this.props.events.map(entry => this.heights[entry.id]),
});
if (!shallowEqual(this.state.vScroll, vScroll)) {
this.setState({ vScroll });
this.setState({vScroll});
}
}
onChange() {
this.setState({ entries: this.view.list });
}
setHeight(id, ref) {
if (ref && !this.heights[id]) {
const height = ReactDOM.findDOMNode(ref).offsetHeight;
setHeight(id, node) {
console.log("setHeight", id, node);
if (node && !this.heights[id]) {
const height = node.offsetHeight;
if (this.heights[id] !== height) {
this.heights[id] = height;
this.onViewportUpdate();
@ -88,97 +74,81 @@ class EventLogContents extends React.Component {
}
}
getIcon(level) {
return { web: "html5", debug: "bug" }[level] || "info";
}
render() {
const vScroll = this.state.vScroll;
const entries = this.state.entries.slice(vScroll.start, vScroll.end);
const events = this.props.events
.slice(vScroll.start, vScroll.end)
.map(event =>
<LogEntry
event={event}
key={event.id}
registerHeight={(node) => this.setHeight(event.id, node)}
/>
);
return (
<pre onScroll={this.onViewportUpdate}>
<div style={{ height: vScroll.paddingTop }}></div>
{entries.map((entry, index) => (
<div key={entry.id} ref={this.setHeight.bind(this, entry.id)}>
<i className={`fa fa-fw fa-${this.getIcon(entry.level)}`}></i>
{entry.message}
</div>
))}
{events}
<div style={{ height: vScroll.paddingBottom }}></div>
</pre>
);
}
}
ToggleFilter.propTypes = {
name: React.PropTypes.string.isRequired,
toggleLevel: React.PropTypes.func.isRequired,
active: React.PropTypes.bool,
EventLogContents = AutoScroll(EventLogContents);
const EventLogContentsContainer = connect(
state => ({
events: state.eventLog.filteredEvents
})
)(EventLogContents);
export const ToggleEventLog = connect(
state => ({
checked: state.eventLog.visible
}),
dispatch => ({
onToggle: () => dispatch(toggleEventLogVisibility())
})
)(ToggleButton);
const ToggleFilter = connect(
(state, ownProps) => ({
checked: state.eventLog.filter[ownProps.text]
}),
(dispatch, ownProps) => ({
onToggle: () => dispatch(toggleEventLogFilter(ownProps.text))
})
)(ToggleButton);
const EventLog = ({close}) =>
<div className="eventlog">
<div>
Eventlog
<div className="pull-right">
<ToggleFilter text="debug"/>
<ToggleFilter text="info"/>
<ToggleFilter text="web"/>
<i onClick={close} className="fa fa-close"></i>
</div>
</div>
<EventLogContentsContainer/>
</div>;
EventLog.propTypes = {
close: React.PropTypes.func.isRequired
};
function ToggleFilter ({ name, active, toggleLevel }) {
let className = "label ";
if (active) {
className += "label-primary";
} else {
className += "label-default";
}
const EventLogContainer = connect(
undefined,
dispatch => ({
close: () => dispatch(toggleEventLogVisibility())
})
)(EventLog);
function onClick(event) {
event.preventDefault();
toggleLevel(name);
}
return (
<a
href="#"
className={className}
onClick={onClick}>
{name}
</a>
);
}
const AutoScrollEventLog = AutoScroll(EventLogContents);
var EventLog = React.createClass({
getInitialState() {
return {
filter: {
"debug": false,
"info": true,
"web": true
}
};
},
close() {
var d = {};
d[Query.SHOW_EVENTLOG] = undefined;
this.props.updateLocation(undefined, d);
},
toggleLevel(level) {
var filter = _.extend({}, this.state.filter);
filter[level] = !filter[level];
this.setState({filter: filter});
},
render() {
return (
<div className="eventlog">
<div>
Eventlog
<div className="pull-right">
<ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
<ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
<ToggleFilter name="web" active={this.state.filter.web} toggleLevel={this.toggleLevel}/>
<i onClick={this.close} className="fa fa-close"></i>
</div>
</div>
<AutoScrollEventLog filter={this.state.filter}/>
</div>
);
}
});
export default EventLog;
export default EventLogContainer;

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

@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from 'react-dom';
import $ from "jquery";
import {connect} from 'react-redux'
import Filt from "../filt/filt.js";
import {Key} from "../utils.js";
@ -8,6 +9,7 @@ import {ToggleInputButton, ToggleButton} from "./common.js";
import {SettingsActions, FlowActions} from "../actions.js";
import {Query} from "../actions.js";
import {SettingsState} from "./common.js";
import {ToggleEventLog} from "./eventlog"
var FilterDocs = React.createClass({
statics: {
@ -224,26 +226,11 @@ var ViewMenu = React.createClass({
title: "View",
route: "flows"
},
toggleEventLog: function () {
var d = {};
if (this.props.query[Query.SHOW_EVENTLOG]) {
d[Query.SHOW_EVENTLOG] = undefined;
} else {
d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
}
this.props.updateLocation(undefined, d);
console.log('toggleevent');
},
render: function () {
var showEventLog = this.props.query[Query.SHOW_EVENTLOG];
return (
<div>
<div className="menu-row">
<ToggleButton
checked={showEventLog}
name = "Show Eventlog"
onToggleChanged={this.toggleEventLog}/>
<ToggleEventLog text="Show Event Log"/>
</div>
<div className="clearfix"></div>
</div>
@ -256,29 +243,29 @@ export const OptionMenu = (props) => {
return (
<div>
<div className="menu-row">
<ToggleButton name="showhost"
<ToggleButton text="showhost"
checked={showhost}
onToggleChanged={() => SettingsActions.update({showhost: !showhost})}
onToggle={() => SettingsActions.update({showhost: !showhost})}
/>
<ToggleButton name="no_upstream_cert"
<ToggleButton text="no_upstream_cert"
checked={no_upstream_cert}
onToggleChanged={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
onToggle={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
/>
<ToggleButton name="rawtcp"
<ToggleButton text="rawtcp"
checked={rawtcp}
onToggleChanged={() => SettingsActions.update({rawtcp: !rawtcp})}
onToggle={() => SettingsActions.update({rawtcp: !rawtcp})}
/>
<ToggleButton name="http2"
<ToggleButton text="http2"
checked={http2}
onToggleChanged={() => SettingsActions.update({http2: !http2})}
onToggle={() => SettingsActions.update({http2: !http2})}
/>
<ToggleButton name="anticache"
<ToggleButton text="anticache"
checked={anticache}
onToggleChanged={() => SettingsActions.update({anticache: !anticache})}
onToggle={() => SettingsActions.update({anticache: !anticache})}
/>
<ToggleButton name="anticomp"
<ToggleButton text="anticomp"
checked={anticomp}
onToggleChanged={() => SettingsActions.update({anticomp: !anticomp})}
onToggle={() => SettingsActions.update({anticomp: !anticomp})}
/>
<ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
checked={Boolean(stickyauth)}

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

@ -1,6 +1,8 @@
import React from "react";
import ReactDOM from "react-dom";
import _ from "lodash";
import {connect} from 'react-redux'
import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"
import {Splitter} from "./common.js"
import MainView from "./mainview.js";
@ -8,7 +10,6 @@ import Footer from "./footer.js";
import {Header, MainMenu} from "./header.js";
import EventLog from "./eventlog.js"
import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js";
import {Query} from "../actions.js";
import {Key} from "../utils.js";
@ -120,10 +121,10 @@ var ProxyAppMain = React.createClass({
render: function () {
var query = this.getQuery();
var eventlog;
if (this.props.location.query[Query.SHOW_EVENTLOG]) {
if (this.props.showEventLog) {
eventlog = [
<Splitter key="splitter" axis="y"/>,
<EventLog key="eventlog" updateLocation={this.updateLocation}/>
<EventLog key="eventlog"/>
];
} else {
eventlog = null;
@ -142,13 +143,17 @@ var ProxyAppMain = React.createClass({
}
});
const AppContainer = connect(
state => ({
showEventLog: state.eventLog.visible
})
)(ProxyAppMain);
import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router";
export var app = (
export var App = (
<ReactRouter history={hashHistory}>
<Redirect from="/" to="/flows" />
<Route path="/" component={ProxyAppMain}>
<Route path="/" component={AppContainer}>
<Route path="flows" component={MainView}/>
<Route path="flows/:flowId/:detailTab" component={MainView}/>
<Route path="reports" component={Reports}/>

18
web/src/js/connection.js
View File

@ -1,19 +1,22 @@
import {ConnectionActions, EventLogActions} from "./actions.js";
import {AppDispatcher} from "./dispatcher.js";
import * as websocketActions from "./ducks/websocket"
function Connection(url) {
export default function Connection(url, dispatch) {
if (url[0] === "/") {
url = location.origin.replace("http", "ws") + url;
}
var ws = new WebSocket(url);
ws.onopen = function () {
dispatch(websocketActions.connected());
ConnectionActions.open();
//TODO: fetch stuff!
};
ws.onmessage = function (message) {
var m = JSON.parse(message.data);
AppDispatcher.dispatchServerAction(m);
ws.onmessage = function (m) {
var message = JSON.parse(m.data);
AppDispatcher.dispatchServerAction(message);
dispatch(message);
};
ws.onerror = function () {
ConnectionActions.error();
@ -22,8 +25,7 @@ function Connection(url) {
ws.onclose = function () {
ConnectionActions.close();
EventLogActions.add_event("WebSocket connection closed.");
dispatch(websocketActions.disconnected());
};
return ws;
}
export default Connection;
}

1
web/src/js/ducks/README.md Normal file
View File

@ -0,0 +1 @@
https://github.com/erikras/ducks-modular-redux

61
web/src/js/ducks/eventLog.js Normal file
View File

@ -0,0 +1,61 @@
import getList, {ADD} from "./list"
const TOGGLE_FILTER = 'TOGGLE_EVENTLOG_FILTER'
const TOGGLE_VISIBILITY = 'TOGGLE_EVENTLOG_VISIBILITY'
const UPDATE_LIST = "UPDATE_EVENTLOG"
const defaultState = {
visible: false,
filter: {
"debug": false,
"info": true,
"web": true
},
events: getList(),
filteredEvents: [],
}
export default function reducer(state = defaultState, action) {
switch (action.type) {
case TOGGLE_FILTER:
const filter = {
...state.filter,
[action.filter]: !state.filter[action.filter]
}
return {
...state,
filter,
filteredEvents: state.events.list.filter(x => filter[x.level])
}
case TOGGLE_VISIBILITY:
return {
...state,
visible: !state.visible
}
case UPDATE_LIST:
const events = getList(state.events, action)
return {
...state,
events,
filteredEvents: events.list.filter(x => state.filter[x.level])
}
default:
return state
}
}
export function toggleEventLogFilter(filter) {
return {type: TOGGLE_FILTER, filter}
}
export function toggleEventLogVisibility() {
return {type: TOGGLE_VISIBILITY}
}
let id = 0;
export function addLogEntry(message, level = "web") {
return {
type: UPDATE_LIST,
cmd: ADD,
data: {message, level, id: `log-${id++}`}
}
}

10
web/src/js/ducks/index.js Normal file
View File

@ -0,0 +1,10 @@
import {combineReducers} from 'redux'
import eventLog from './eventLog.js'
import websocket from './websocket.js'
const rootReducer = combineReducers({
eventLog,
websocket,
})
export default rootReducer

21
web/src/js/ducks/list.js Normal file
View File

@ -0,0 +1,21 @@
export const ADD = 'add'
const defaultState = {
list: [],
//isFetching: false,
//updateBeforeFetch: [],
indexOf: {},
//views: {}
};
export default function getList(state = defaultState, action = {}) {
switch (action.cmd) {
case ADD:
return {
list: [...state.list, action.data],
indexOf: {...state.indexOf, [action.data.id]: state.list.length},
}
default:
return state
}
}

30
web/src/js/ducks/websocket.js Normal file
View File

@ -0,0 +1,30 @@
const CONNECTED = 'WEBSOCKET_CONNECTED'
const DISCONNECTED = 'WEBSOCKET_DISCONNECTED'
const defaultState = {
connected: true,
/* we may want to have an error message attribute here at some point */
}
export default function reducer(state = defaultState, action) {
switch (action.type) {
case CONNECTED:
return {
connected: true
}
case DISCONNECTED:
return {
connected: false
}
default:
return state
}
}
export function connected() {
return {type: CONNECTED}
}
export function disconnected() {
return {type: DISCONNECTED}
}