Rooba
/
mitmproxy
mirror of https://github.com/mitmproxy/mitmproxy.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

moved sort state to redux, missing apply sort

This commit is contained in:
Clemens 2016-06-06 23:27:04 +02:00
parent c98c83190b
commit ac2d8549e5
5 changed files with 1051 additions and 785 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1530,88 +1530,77 @@ var FlowRowContainer = (0, _reactRedux.connect)(function (state, ownProps) {
};
})(FlowRow);
var FlowTableHead = function (_React$Component) {
_inherits(FlowTableHead, _React$Component);
function FlowTableHead(_ref2) {
var setSort = _ref2.setSort;
var columns = _ref2.columns;
var sort = _ref2.sort;
function FlowTableHead(props, context) {
_classCallCheck(this, FlowTableHead);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(FlowTableHead).call(this, props, context));
//const hasSort = Column.sortKeyFun;
_this.state = { sortColumn: undefined, sortDesc: false };
return _this;
}
// let sortDesc = this.props.sort.sortDesc;
//
// if (Column === this.props.sort.sortColumn) {
// sortDesc = !sortDesc;
// this.props.setSort(sortColumn, sortDesc);
// } else {
// this.props.setSort({sortColumn: hasSort && Column, sortDesc: false});
// }
//
// let sortKeyFun = Column.sortKeyFun;
// if (sortDesc) {
// sortKeyFun = hasSort && function () {
// const k = Column.sortKeyFun.apply(this, arguments);
// if (_.isString(k)) {
// return reverseString("" + k);
// }
// return -k;
// };
// }
//this.props.setSortKeyFun(sortKeyFun);
_createClass(FlowTableHead, [{
key: "onClick",
value: function onClick(Column) {
var hasSort = Column.sortKeyFun;
var sortColumn = sort.sortColumn;
var sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
var sortDesc = this.state.sortDesc;
if (Column === this.state.sortColumn) {
sortDesc = !sortDesc;
this.setState({ sortDesc: sortDesc });
} else {
this.setState({ sortColumn: hasSort && Column, sortDesc: false });
}
var sortKeyFun = Column.sortKeyFun;
if (sortDesc) {
sortKeyFun = hasSort && function () {
var k = Column.sortKeyFun.apply(this, arguments);
if (_lodash2.default.isString(k)) {
return (0, _utils.reverseString)("" + k);
}
return -k;
};
}
this.props.setSortKeyFun(sortKeyFun);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var sortColumn = this.state.sortColumn;
var sortType = this.state.sortDesc ? "sort-desc" : "sort-asc";
return _react2.default.createElement(
"tr",
null,
this.props.columns.map(function (Column) {
return _react2.default.createElement(Column.Title, {
key: Column.name,
onClick: function onClick() {
return _this2.onClick(Column);
},
className: sortColumn === Column ? sortType : undefined
});
})
);
}
}]);
return FlowTableHead;
}(_react2.default.Component);
return _react2.default.createElement(
"tr",
null,
columns.map(function (Column) {
return _react2.default.createElement(Column.Title, {
key: Column.name,
onClick: function onClick() {
return setSort({ sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc });
},
className: sortColumn === Column.name ? sortType : undefined
});
})
);
}
FlowTableHead.propTypes = {
setSortKeyFun: _react2.default.PropTypes.func.isRequired,
setSort: _react2.default.PropTypes.func.isRequired,
sort: _react2.default.PropTypes.object.isRequired,
columns: _react2.default.PropTypes.array.isRequired
};
var FlowTable = function (_React$Component2) {
_inherits(FlowTable, _React$Component2);
var FlowTableHeadContainer = (0, _reactRedux.connect)(function (state, ownProps) {
return {
sort: state.flows.sort
};
})(FlowTableHead);
var FlowTable = function (_React$Component) {
_inherits(FlowTable, _React$Component);
function FlowTable(props, context) {
_classCallCheck(this, FlowTable);
var _this3 = _possibleConstructorReturn(this, Object.getPrototypeOf(FlowTable).call(this, props, context));
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(FlowTable).call(this, props, context));
_this3.state = { vScroll: (0, _VirtualScroll.calcVScroll)() };
_this.state = { vScroll: (0, _VirtualScroll.calcVScroll)() };
_this3.onViewportUpdate = _this3.onViewportUpdate.bind(_this3);
return _this3;
_this.onViewportUpdate = _this.onViewportUpdate.bind(_this);
return _this;
}
_createClass(FlowTable, [{
@ -1627,11 +1616,11 @@ var FlowTable = function (_React$Component2) {
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this4 = this;
var _this2 = this;
if (nextProps.selected && nextProps.selected !== this.props.selected) {
window.setTimeout(function () {
return _this4.scrollIntoView(nextProps.selected);
return _this2.scrollIntoView(nextProps.selected);
}, 1);
}
}
@ -1683,7 +1672,7 @@ var FlowTable = function (_React$Component2) {
}, {
key: "render",
value: function render() {
var _this5 = this;
var _this3 = this;
var vScroll = this.state.vScroll;
var flows = this.props.flows.slice(vScroll.start, vScroll.end);
@ -1699,9 +1688,10 @@ var FlowTable = function (_React$Component2) {
_react2.default.createElement(
"thead",
{ ref: "head", style: { transform: transform } },
_react2.default.createElement(FlowTableHead, {
_react2.default.createElement(FlowTableHeadContainer, {
columns: _flowtableColumns2.default,
setSortKeyFun: this.props.setSortKeyFun
setSortKeyFun: this.props.setSortKeyFun,
setSort: this.props.setSort
})
),
_react2.default.createElement(
@ -1713,7 +1703,7 @@ var FlowTable = function (_React$Component2) {
key: flow.id,
flowId: flow.id,
columns: _flowtableColumns2.default,
selectFlow: _this5.props.selectFlow
selectFlow: _this3.props.selectFlow
});
}),
_react2.default.createElement("tr", { style: { height: vScroll.paddingBottom } })
@ -3944,7 +3934,10 @@ var MainView = _react2.default.createClass({
{ className: "main-view" },
_react2.default.createElement(_flowtable2.default, { ref: "flowTable",
selectFlow: this.selectFlow,
setSortKeyFun: this.setSortKeyFun,
setSortKeyFun: function setSortKeyFun(f) {
return console.log("asdf");
},
setSort: this.props.setSort,
selected: this.props.selectedFlow }),
details
);
@ -3955,6 +3948,7 @@ var MainViewContainer = (0, _reactRedux.connect)(function (state) {
return {
flows: state.flows.view,
filter: state.flows.filter,
sort: state.flows.sort,
highlight: state.flows.highlight,
selectedFlow: state.flows.all.byId[state.flows.selected[0]]
};
@ -3966,6 +3960,9 @@ var MainViewContainer = (0, _reactRedux.connect)(function (state) {
setFilter: function setFilter(filter) {
return dispatch((0, _flows.setFilter)(filter));
},
setSort: function setSort(sort) {
return dispatch((0, _flows.setSort)(sort));
},
setHighlight: function setHighlight(highlight) {
return dispatch((0, _flows.setHighlight)(highlight));
}
@ -4496,13 +4493,14 @@ exports.fetchLogEntries = fetchList;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.fetchFlows = exports.updateFlows = exports.SELECT_FLOW = exports.SET_HIGHLIGHT = exports.SET_FILTER = exports.UPDATE_FLOWS = undefined;
exports.fetchFlows = exports.updateFlows = exports.SELECT_FLOW = exports.SET_SORT = exports.SET_HIGHLIGHT = exports.SET_FILTER = exports.UPDATE_FLOWS = undefined;
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.setFilter = setFilter;
exports.setHighlight = setHighlight;
exports.setSort = setSort;
exports.selectFlow = selectFlow;
var _list = require("./utils/list");
@ -4520,6 +4518,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var UPDATE_FLOWS = exports.UPDATE_FLOWS = "UPDATE_FLOWS";
var SET_FILTER = exports.SET_FILTER = "SET_FLOW_FILTER";
var SET_HIGHLIGHT = exports.SET_HIGHLIGHT = "SET_FLOW_HIGHLIGHT";
var SET_SORT = exports.SET_SORT = "SET_FLOW_SORT";
var SELECT_FLOW = exports.SELECT_FLOW = "SELECT_FLOW";
var _makeList = (0, _list2.default)(UPDATE_FLOWS, "/flows");
@ -4534,7 +4533,8 @@ var defaultState = {
selected: [],
view: [],
filter: undefined,
highlight: undefined
highlight: undefined,
sort: { sortColumn: undefined, sortDesc: false }
};
function makeFilterFn(filter) {
@ -4563,6 +4563,10 @@ function reducer() {
return _extends({}, state, {
highlight: action.highlight
});
case SET_SORT:
return _extends({}, state, {
sort: action.sort
});
case SELECT_FLOW:
return _extends({}, state, {
selected: [action.flowId]
@ -4584,6 +4588,12 @@ function setHighlight(highlight) {
highlight: highlight
};
}
function setSort(sort) {
return {
type: SET_SORT,
sort: sort
};
}
function selectFlow(flowId) {
return {
type: SELECT_FLOW,

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

File diff suppressed because it is too large Load Diff

83
web/src/js/components/flowtable.js
View File

@ -46,61 +46,59 @@ const FlowRowContainer = connect(
})
)(FlowRow)
class FlowTableHead extends React.Component {
function FlowTableHead({setSort, columns, sort}) {
static propTypes = {
setSortKeyFun: React.PropTypes.func.isRequired,
columns: React.PropTypes.array.isRequired,
};
//const hasSort = Column.sortKeyFun;
constructor(props, context) {
super(props, context);
this.state = {sortColumn: undefined, sortDesc: false};
}
// let sortDesc = this.props.sort.sortDesc;
//
// if (Column === this.props.sort.sortColumn) {
// sortDesc = !sortDesc;
// this.props.setSort(sortColumn, sortDesc);
// } else {
// this.props.setSort({sortColumn: hasSort && Column, sortDesc: false});
// }
//
// let sortKeyFun = Column.sortKeyFun;
// if (sortDesc) {
// sortKeyFun = hasSort && function () {
// const k = Column.sortKeyFun.apply(this, arguments);
// if (_.isString(k)) {
// return reverseString("" + k);
// }
// return -k;
// };
// }
//this.props.setSortKeyFun(sortKeyFun);
onClick(Column) {
const hasSort = Column.sortKeyFun;
const sortColumn = sort.sortColumn;
const sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
let sortDesc = this.state.sortDesc;
if (Column === this.state.sortColumn) {
sortDesc = !sortDesc;
this.setState({sortDesc});
} else {
this.setState({sortColumn: hasSort && Column, sortDesc: false});
}
let sortKeyFun = Column.sortKeyFun;
if (sortDesc) {
sortKeyFun = hasSort && function () {
const k = Column.sortKeyFun.apply(this, arguments);
if (_.isString(k)) {
return reverseString("" + k);
}
return -k;
};
}
this.props.setSortKeyFun(sortKeyFun);
}
render() {
const sortColumn = this.state.sortColumn;
const sortType = this.state.sortDesc ? "sort-desc" : "sort-asc";
return (
<tr>
{this.props.columns.map(Column => (
{columns.map(Column => (
<Column.Title
key={Column.name}
onClick={() => this.onClick(Column)}
className={sortColumn === Column ? sortType : undefined}
onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})}
className={sortColumn === Column.name ? sortType : undefined}
/>
))}
</tr>
);
}
}
FlowTableHead.propTypes = {
setSort: React.PropTypes.func.isRequired,
sort: React.PropTypes.object.isRequired,
columns: React.PropTypes.array.isRequired
};
const FlowTableHeadContainer = connect(
(state, ownProps) => ({
sort: state.flows.sort
})
)(FlowTableHead)
class FlowTable extends React.Component {
static propTypes = {
@ -186,9 +184,10 @@ class FlowTable extends React.Component {
<div className="flow-table" onScroll={this.onViewportUpdate}>
<table>
<thead ref="head" style={{ transform }}>
<FlowTableHead
<FlowTableHeadContainer
columns={flowtable_columns}
setSortKeyFun={this.props.setSortKeyFun}
setSort={this.props.setSort}
/>
</thead>
<tbody>

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

@ -7,7 +7,7 @@ import {Splitter} from "./common.js"
import FlowTable from "./flowtable.js";
import FlowView from "./flowview/index.js";
import {connect} from 'react-redux'
import {selectFlow, setFilter, setHighlight} from "../ducks/flows";
import {selectFlow, setFilter, setHighlight, setSort} from "../ducks/flows";
var MainView = React.createClass({
@ -161,7 +161,8 @@ var MainView = React.createClass({
<div className="main-view">
<FlowTable ref="flowTable"
selectFlow={this.selectFlow}
setSortKeyFun={this.setSortKeyFun}
setSortKeyFun={(f) => console.log("asdf")}
setSort={this.props.setSort}
selected={this.props.selectedFlow} />
{details}
</div>
@ -173,12 +174,14 @@ const MainViewContainer = connect(
state => ({
flows: state.flows.view,
filter: state.flows.filter,
sort: state.flows.sort,
highlight: state.flows.highlight,
selectedFlow: state.flows.all.byId[state.flows.selected[0]]
}),
dispatch => ({
selectFlow: flowId => dispatch(selectFlow(flowId)),
setFilter: filter => dispatch(setFilter(filter)),
setSort: (sort) => dispatch(setSort(sort)),
setHighlight: highlight => dispatch(setHighlight(highlight))
}),
undefined,

13
web/src/js/ducks/flows.js
View File

@ -5,6 +5,7 @@ import {updateViewFilter, updateViewList} from "./utils/view"
export const UPDATE_FLOWS = "UPDATE_FLOWS"
export const SET_FILTER = "SET_FLOW_FILTER"
export const SET_HIGHLIGHT = "SET_FLOW_HIGHLIGHT"
export const SET_SORT = "SET_FLOW_SORT"
export const SELECT_FLOW = "SELECT_FLOW"
const {
@ -20,6 +21,7 @@ const defaultState = {
view: [],
filter: undefined,
highlight: undefined,
sort: {sortColumn: undefined, sortDesc: false},
}
function makeFilterFn(filter) {
@ -46,6 +48,11 @@ export default function reducer(state = defaultState, action) {
...state,
highlight: action.highlight
}
case SET_SORT:
return {
...state,
sort: action.sort
}
case SELECT_FLOW:
return {
...state,
@ -69,6 +76,12 @@ export function setHighlight(highlight) {
highlight
}
}
export function setSort(sort){
return {
type: SET_SORT,
sort
}
}
export function selectFlow(flowId) {
return {
type: SELECT_FLOW,