Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-23 00:01:36 +00:00
Code Issues Projects Releases Wiki Activity

web: 🐣

Browse Source
This commit is contained in:
Maximilian Hils 2016-06-02 17:46:18 -07:00
parent 7a388560d7
commit 698d38b28e
14 changed files with 339 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;

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

@ -455,10 +455,6 @@ var _redux = require('redux');
var _reactRedux = require('react-redux');
var _reducers = require('./reducers');
var _reducers2 = _interopRequireDefault(_reducers);
var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
@ -471,9 +467,13 @@ var _proxyapp = require('./components/proxyapp.js');
var _actions = require('./actions.js');
var _index = require('./ducks/index');
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var store = (0, _redux.createStore)(_reducers2.default);
var store = (0, _redux.createStore)(_index2.default);
(0, _jquery2.default)(function () {
window.ws = new _connection2.default("/updates");
@ -489,7 +489,7 @@ var store = (0, _redux.createStore)(_reducers2.default);
), document.getElementById("mitmproxy"));
});
},{"./actions.js":2,"./components/proxyapp.js":20,"./connection":21,"./reducers":26,"jquery":"jquery","react":"react","react-dom":"react-dom","react-redux":"react-redux","redux":"redux"}],4:[function(require,module,exports){
},{"./actions.js":2,"./components/proxyapp.js":20,"./connection":21,"./ducks/index":24,"jquery":"jquery","react":"react","react-dom":"react-dom","react-redux":"react-redux","redux":"redux"}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -629,28 +629,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) {
@ -713,7 +708,7 @@ ToggleInputButton.propTypes = {
onToggleChanged: _react2.default.PropTypes.func.isRequired
};
},{"../utils.js":30,"lodash":"lodash","react":"react","react-dom":"react-dom"}],5:[function(require,module,exports){
},{"../utils.js":29,"lodash":"lodash","react":"react","react-dom":"react-dom"}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -971,12 +966,13 @@ var ValueEditor = exports.ValueEditor = _react2.default.createClass({
}
});
},{"../utils.js":30,"react":"react","react-dom":"react-dom"}],6:[function(require,module,exports){
},{"../utils.js":29,"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; }; }();
@ -994,9 +990,7 @@ var _shallowequal = require("shallowequal");
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _actions = require("../actions.js");
var _reduxActions = require("../reduxActions");
var _eventLog = require("../ducks/eventLog");
var _AutoScroll = require("./helpers/AutoScroll");
@ -1006,6 +1000,8 @@ var _VirtualScroll = require("./helpers/VirtualScroll");
var _view = require("../store/view.js");
var _common = require("./common");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -1142,93 +1138,75 @@ EventLogContents.defaultProps = {
};
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 className = "label ";
if (active) {
className += "label-primary";
} else {
className += "label-default";
}
function onClick(event) {
event.preventDefault();
toggleLevel();
}
return _react2.default.createElement(
"a",
{
href: "#",
className: className,
onClick: onClick },
name
);
}
var mapStateToProps = function mapStateToProps(state, ownProps) {
var EventLogContentsContainer = (0, _reactRedux.connect)(function (state) {
return {
active: state.eventLog.visibilityFilter[ownProps.name]
filter: state.eventLog.filter
};
};
})(EventLogContents);
var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
var ToggleEventLog = exports.ToggleEventLog = (0, _reactRedux.connect)(function (state) {
return {
toggleLevel: function toggleLevel() {
dispatch((0, _reduxActions.toggleEventLogFilter)(ownProps.name));
checked: state.eventLog.visible
};
}, function (dispatch) {
return {
onToggle: function onToggle() {
return dispatch((0, _eventLog.toggleEventLogVisibility)());
}
};
};
})(_common.ToggleButton);
var ToggleEventLogFilter = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ToggleFilter);
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 AutoScrollEventLog = (0, _AutoScroll2.default)(EventLogContents);
var VisibleAutoScrollEventLog = (0, _reactRedux.connect)(function mapStateToProps(state, ownProps) {
return { filter: state.eventLog.visibilityFilter };
})(AutoScrollEventLog);
var EventLog = _react2.default.createClass({
displayName: "EventLog",
close: function close() {
var d = {};
d[_actions.Query.SHOW_EVENTLOG] = undefined;
this.props.updateLocation(undefined, d);
},
render: function render() {
return _react2.default.createElement(
var EventLog = function EventLog(_ref) {
var close = _ref.close;
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(ToggleEventLogFilter, { name: "debug" }),
_react2.default.createElement(ToggleEventLogFilter, { name: "info" }),
_react2.default.createElement(ToggleEventLogFilter, { name: "web" }),
_react2.default.createElement("i", { onClick: this.close, className: "fa fa-close" })
)
),
_react2.default.createElement(VisibleAutoScrollEventLog, null)
);
}
});
{ 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,"../reduxActions":27,"../store/view.js":29,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"react":"react","react-dom":"react-dom","react-redux":"react-redux","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,"../store/view.js":28,"./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", {
@ -1497,7 +1475,7 @@ var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn
exports.default = all_columns;
},{"../flow/utils.js":24,"../utils.js":30,"react":"react"}],8:[function(require,module,exports){
},{"../flow/utils.js":26,"../utils.js":29,"react":"react"}],8:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -1789,7 +1767,7 @@ FlowTable.defaultProps = {
};
exports.default = (0, _AutoScroll2.default)(FlowTable);
},{"../utils.js":30,"./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":29,"./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", {
@ -2143,7 +2121,7 @@ var ContentView = _react2.default.createClass({
exports.default = ContentView;
},{"../../flow/utils.js":24,"../../utils.js":30,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
},{"../../flow/utils.js":26,"../../utils.js":29,"lodash":"lodash","react":"react"}],10:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -2411,7 +2389,7 @@ var Details = _react2.default.createClass({
exports.default = Details;
},{"../../utils.js":30,"lodash":"lodash","react":"react"}],11:[function(require,module,exports){
},{"../../utils.js":29,"lodash":"lodash","react":"react"}],11:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -2905,7 +2883,7 @@ var Error = exports.Error = _react2.default.createClass({
}
});
},{"../../actions.js":2,"../../flow/utils.js":24,"../../utils.js":30,"../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":26,"../../utils.js":29,"../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", {
@ -3088,7 +3066,7 @@ function Footer(_ref) {
);
}
},{"../utils.js":30,"./common.js":4,"react":"react"}],15:[function(require,module,exports){
},{"../utils.js":29,"./common.js":4,"react":"react"}],15:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -3108,6 +3086,8 @@ var _jquery = require("jquery");
var _jquery2 = _interopRequireDefault(_jquery);
var _reactRedux = require("react-redux");
var _filt = require("../filt/filt.js");
var _filt2 = _interopRequireDefault(_filt);
@ -3118,6 +3098,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({
@ -3371,29 +3353,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" })
);
@ -3642,7 +3609,7 @@ var Header = exports.Header = _react2.default.createClass({
}
});
},{"../actions.js":2,"../filt/filt.js":23,"../utils.js":30,"./common.js":4,"jquery":"jquery","react":"react","react-dom":"react-dom"}],16:[function(require,module,exports){
},{"../actions.js":2,"../filt/filt.js":25,"../utils.js":29,"./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", {
@ -4058,7 +4025,7 @@ var MainView = _react2.default.createClass({
exports.default = MainView;
},{"../actions.js":2,"../filt/filt.js":23,"../store/view.js":29,"../utils.js":30,"./common.js":4,"./flowtable.js":8,"./flowview/index.js":11,"react":"react"}],19:[function(require,module,exports){
},{"../actions.js":2,"../filt/filt.js":25,"../store/view.js":28,"../utils.js":29,"./common.js":4,"./flowtable.js":8,"./flowview/index.js":11,"react":"react"}],19:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -4194,7 +4161,7 @@ var Prompt = _react2.default.createClass({
exports.default = Prompt;
},{"../utils.js":30,"lodash":"lodash","react":"react","react-dom":"react-dom"}],20:[function(require,module,exports){
},{"../utils.js":29,"lodash":"lodash","react":"react","react-dom":"react-dom"}],20:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -4214,6 +4181,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");
@ -4232,12 +4203,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.
@ -4355,8 +4322,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;
}
@ -4371,20 +4338,26 @@ var ProxyAppMain = _react2.default.createClass({
}
});
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":28,"../utils.js":30,"./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":27,"../utils.js":29,"./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", {
@ -4451,6 +4424,78 @@ 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;
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 defaultState = {
visible: false,
filter: {
"debug": false,
"info": true,
"web": true
}
};
function reducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? defaultState : arguments[0];
var action = arguments[1];
switch (action.type) {
case TOGGLE_FILTER:
return _extends({}, state, {
filter: _extends({}, state.filter, _defineProperty({}, action.filter, !state.filter[action.filter]))
});
case TOGGLE_VISIBILITY:
return _extends({}, state, {
visible: !state.visible
});
default:
return state;
}
}
function toggleEventLogFilter(filter) {
return { type: TOGGLE_FILTER, filter: filter };
}
function toggleEventLogVisibility() {
return { type: TOGGLE_VISIBILITY };
}
},{}],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);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var rootReducer = (0, _redux.combineReducers)({
eventLog: _eventLog2.default
});
exports.default = rootReducer;
},{"./eventLog.js":23,"redux":"redux"}],25:[function(require,module,exports){
"use strict";
module.exports = function () {
@ -6354,7 +6399,7 @@ module.exports = function () {
};
}();
},{"../flow/utils.js":24}],24:[function(require,module,exports){
},{"../flow/utils.js":26}],26:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6488,96 +6533,7 @@ var parseHttpVersion = exports.parseHttpVersion = function parseHttpVersion(http
});
};
},{"jquery":"jquery","lodash":"lodash"}],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; };
var _redux = require("redux");
var _reduxActions = require("../reduxActions");
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 defaultVisibility = {
"debug": false,
"info": true,
"web": true
};
var visibilityFilter = function visibilityFilter() {
var state = arguments.length <= 0 || arguments[0] === undefined ? defaultVisibility : arguments[0];
var action = arguments[1];
switch (action.type) {
case _reduxActions.TOGGLE_EVENTLOG_FILTER:
return _extends({}, state, _defineProperty({}, action.filter, !state[action.filter]));
default:
return state;
}
};
var entries = function entries() {
var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
var action = arguments[1];
return state;
};
var eventLog = (0, _redux.combineReducers)({
visibilityFilter: visibilityFilter,
entries: entries
});
exports.default = eventLog;
},{"../reduxActions":27,"redux":"redux"}],26:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _redux = require('redux');
var _eventlog = require('./eventlog');
var _eventlog2 = _interopRequireDefault(_eventlog);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var mitmproxyApp = (0, _redux.combineReducers)({
eventLog: _eventlog2.default
});
exports.default = mitmproxyApp;
},{"./eventlog":25,"redux":"redux"}],27:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.toggleEventLogFilter = toggleEventLogFilter;
var TOGGLE_EVENTLOG_FILTER = exports.TOGGLE_EVENTLOG_FILTER = 'TOGGLE_EVENTLOG_FILTER';
var HIDE_EVENTLOG = exports.HIDE_EVENTLOG = 'HIDE_EVENTLOG';
var SHOW_EVENTLOG = exports.SHOW_EVENTLOG = 'SHOW_EVENTLOG';
var EventLogFilters = exports.EventLogFilters = {
DEBUG: 'debug',
INFO: 'info',
WEB: 'web'
};
function toggleEventLogFilter(filter) {
return { type: TOGGLE_EVENTLOG_FILTER, filter: filter };
}
},{}],28:[function(require,module,exports){
},{"jquery":"jquery","lodash":"lodash"}],27:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6764,7 +6720,7 @@ _lodash2.default.extend(EventLogStore.prototype, LiveListStore.prototype, {
}
});
},{"../actions.js":2,"../dispatcher.js":22,"events":1,"jquery":"jquery","lodash":"lodash"}],29:[function(require,module,exports){
},{"../actions.js":2,"../dispatcher.js":22,"events":1,"jquery":"jquery","lodash":"lodash"}],28:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -6894,7 +6850,7 @@ _lodash2.default.extend(StoreView.prototype, _events.EventEmitter.prototype, {
}
});
},{"../utils.js":30,"events":1,"lodash":"lodash"}],30:[function(require,module,exports){
},{"../utils.js":29,"events":1,"lodash":"lodash"}],29:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {

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

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

@ -2,14 +2,14 @@ import React from "react"
import {render} from 'react-dom'
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import mitmproxyApp from './reducers'
import $ from "jquery"
import Connection from "./connection"
import {App} from "./components/proxyapp.js"
import {EventLogActions} from "./actions.js"
import rootReducer from './ducks/index';
let store = createStore(mitmproxyApp);
let store = createStore(rootReducer);
$(function () {
window.ws = new Connection("/updates");

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 {

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

@ -1,12 +1,12 @@
import React from "react"
import ReactDOM from "react-dom"
import { connect } from 'react-redux'
import {connect} from 'react-redux'
import shallowEqual from "shallowequal"
import {Query} from "../actions.js"
import {toggleEventLogFilter} from "../reduxActions"
import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog"
import AutoScroll from "./helpers/AutoScroll";
import {calcVScroll} from "./helpers/VirtualScroll"
import {StoreView} from "../store/view.js"
import {ToggleButton} from "./common";
class EventLogContents extends React.Component {
@ -27,7 +27,7 @@ class EventLogContents extends React.Component {
);
this.heights = {};
this.state = { entries: this.view.list, vScroll: calcVScroll() };
this.state = {entries: this.view.list, vScroll: calcVScroll()};
this.onChange = this.onChange.bind(this);
this.onViewportUpdate = this.onViewportUpdate.bind(this);
@ -71,12 +71,12 @@ class EventLogContents extends React.Component {
});
if (!shallowEqual(this.state.vScroll, vScroll)) {
this.setState({ vScroll });
this.setState({vScroll});
}
}
onChange() {
this.setState({ entries: this.view.list });
this.setState({entries: this.view.list});
}
setHeight(id, ref) {
@ -90,7 +90,7 @@ class EventLogContents extends React.Component {
}
getIcon(level) {
return { web: "html5", debug: "bug" }[level] || "info";
return {web: "html5", debug: "bug"}[level] || "info";
}
render() {
@ -112,87 +112,59 @@ class EventLogContents extends React.Component {
}
}
ToggleFilter.propTypes = {
name: React.PropTypes.string.isRequired,
toggleLevel: React.PropTypes.func.isRequired,
active: React.PropTypes.bool,
};
function ToggleFilter ({ name, active, toggleLevel }) {
let className = "label ";
if (active) {
className += "label-primary";
} else {
className += "label-default";
}
function onClick(event) {
event.preventDefault();
toggleLevel();
}
return (
<a
href="#"
className={className}
onClick={onClick}>
{name}
</a>
);
}
const mapStateToProps = (state, ownProps) => {
return {
active: state.eventLog.visibilityFilter[ownProps.name]
}
};
const mapDispatchToProps = (dispatch, ownProps) => {
return {
toggleLevel: () => {
dispatch(toggleEventLogFilter(ownProps.name))
}
}
};
const ToggleEventLogFilter = connect(
mapStateToProps,
mapDispatchToProps
)(ToggleFilter);
EventLogContents = AutoScroll(EventLogContents);
const AutoScrollEventLog = AutoScroll(EventLogContents);
const EventLogContentsContainer = connect(
state => ({
filter: state.eventLog.filter
})
)(EventLogContents);
const VisibleAutoScrollEventLog = connect(
function mapStateToProps(state, ownProps) {
return {filter: state.eventLog.visibilityFilter}
})(AutoScrollEventLog);
export const ToggleEventLog = connect(
state => ({
checked: state.eventLog.visible
}),
dispatch => ({
onToggle: () => dispatch(toggleEventLogVisibility())
})
)(ToggleButton);
var EventLog = React.createClass({
close() {
var d = {};
d[Query.SHOW_EVENTLOG] = undefined;
this.props.updateLocation(undefined, d);
},
render() {
return (
<div className="eventlog">
<div>
Eventlog
<div className="pull-right">
<ToggleEventLogFilter name="debug"/>
<ToggleEventLogFilter name="info"/>
<ToggleEventLogFilter name="web"/>
<i onClick={this.close} className="fa fa-close"></i>
</div>
const ToggleFilter = connect(
(state, ownProps) => ({
checked: state.eventLog.filter[ownProps.text]
}),
(dispatch, ownProps) => ({
onToggle: () => dispatch(toggleEventLogFilter(ownProps.text))
})
)(ToggleButton);
</div>
<VisibleAutoScrollEventLog/>
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>;
export default EventLog;
EventLog.propTypes = {
close: React.PropTypes.func.isRequired
};
const EventLogContainer = connect(
undefined,
dispatch => ({
close: () => dispatch(toggleEventLogVisibility())
})
)(EventLog);
export default EventLogContainer;

19
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>

15
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 = (
<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}/>

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

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

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

@ -0,0 +1,39 @@
const TOGGLE_FILTER = 'TOGGLE_EVENTLOG_FILTER'
const TOGGLE_VISIBILITY = 'TOGGLE_EVENTLOG_VISIBILITY'
const defaultState = {
visible: false,
filter: {
"debug": false,
"info": true,
"web": true
}
}
export default function reducer(state = defaultState, action) {
switch (action.type) {
case TOGGLE_FILTER:
return {
...state,
filter: {
...state.filter,
[action.filter]: !state.filter[action.filter]
}
}
case TOGGLE_VISIBILITY:
return {
...state,
visible: !state.visible
}
default:
return state
}
}
export function toggleEventLogFilter(filter) {
return {type: TOGGLE_FILTER, filter}
}
export function toggleEventLogVisibility() {
return {type: TOGGLE_VISIBILITY}
}

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

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

31
web/src/js/reducers/eventLog.js
View File

@ -1,31 +0,0 @@
import {combineReducers} from 'redux'
import {TOGGLE_EVENTLOG_FILTER} from "../reduxActions"
const defaultVisibility = {
"debug": false,
"info": true,
"web": true
};
const visibilityFilter = (state = defaultVisibility, action) => {
switch (action.type) {
case TOGGLE_EVENTLOG_FILTER:
return {
...state,
[action.filter]: !state[action.filter]
};
default:
return state;
}
};
const entries = (state = [], action) => {
return state;
};
const eventLog = combineReducers({
visibilityFilter,
entries
});
export default eventLog

13
web/src/js/reduxActions.js
View File

@ -1,13 +0,0 @@
export const TOGGLE_EVENTLOG_FILTER = 'TOGGLE_EVENTLOG_FILTER';
export const HIDE_EVENTLOG = 'HIDE_EVENTLOG';
export const SHOW_EVENTLOG = 'SHOW_EVENTLOG';
export const EventLogFilters = {
DEBUG: 'debug',
INFO: 'info',
WEB: 'web'
};
export function toggleEventLogFilter(filter) {
return {type: TOGGLE_EVENTLOG_FILTER, filter}
}