From ac2d8549e5cf6efaac78de8acc0c4967e63adcf9 Mon Sep 17 00:00:00 2001 From: Clemens Date: Mon, 6 Jun 2016 23:27:04 +0200 Subject: moved sort state to redux, missing apply sort --- web/src/js/components/flowtable.js | 89 +++++++++++++++++++------------------- web/src/js/components/mainview.js | 7 ++- web/src/js/ducks/flows.js | 13 ++++++ 3 files changed, 62 insertions(+), 47 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index d621387c..642ded17 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -46,61 +46,59 @@ const FlowRowContainer = connect( }) )(FlowRow) -class FlowTableHead extends React.Component { +function FlowTableHead({setSort, columns, sort}) { + + //const hasSort = Column.sortKeyFun; + + // 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); + + const sortColumn = sort.sortColumn; + const sortType = sort.sortDesc ? "sort-desc" : "sort-asc"; - static propTypes = { - setSortKeyFun: React.PropTypes.func.isRequired, - columns: React.PropTypes.array.isRequired, - }; - - constructor(props, context) { - super(props, context); - this.state = {sortColumn: undefined, sortDesc: false}; - } - - onClick(Column) { - const hasSort = Column.sortKeyFun; - - 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 ( - {this.props.columns.map(Column => ( + {columns.map(Column => ( 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} /> ))} ); - } } +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 {
- diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 22895991..99cdeb3c 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -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({
console.log("asdf")} + setSort={this.props.setSort} selected={this.props.selectedFlow} /> {details}
@@ -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, diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index fdbc42ee..bde53179 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -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, -- cgit v1.2.3 From ff2129773fba4cbcaca93f2c604a2fa72955868f Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 7 Jun 2016 00:17:09 +0200 Subject: start with sort, continue tomorrow --- web/src/js/components/flowtable.js | 5 +++-- web/src/js/components/mainview.js | 4 ---- 2 files changed, 3 insertions(+), 6 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index 642ded17..89bcfc39 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -94,7 +94,7 @@ FlowTableHead.propTypes = { }; const FlowTableHeadContainer = connect( - (state, ownProps) => ({ + (state) => ({ sort: state.flows.sort }) )(FlowTableHead) @@ -215,7 +215,8 @@ const parseFilter = _.memoize(Filt.parse) const FlowTableContainer = connect( state => ({ - flows: state.flows.view, + // first idea to sort here, but i think thats not good enough ( and not working yet)... + flows: state.flows.view.sort((a,b) => state.flows.sort.sortColumn ? a.response.status_code > b.response.status_code : 0), }) )(FlowTable) diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 99cdeb3c..5237bddb 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -23,9 +23,6 @@ var MainView = React.createClass({ this.props.setHighlight(nextProps.location.query[Query.HIGHLIGHT], false) } }, - setSortKeyFun: function (sortKeyFun) { - // FIXME: Move to redux. This requires that sortKeyFun is not a function anymore. - }, selectFlow: function (flow) { // TODO: This belongs into redux if (flow) { @@ -161,7 +158,6 @@ var MainView = React.createClass({
console.log("asdf")} setSort={this.props.setSort} selected={this.props.selectedFlow} /> {details} -- cgit v1.2.3 From 1aac283e2309339877907d2e08e79a06fbea1898 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 7 Jun 2016 00:40:36 +0200 Subject: moved redux state injection closer to child --- web/src/js/components/flowtable.js | 6 +++++- web/src/js/components/mainview.js | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index 89bcfc39..23469827 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -9,6 +9,7 @@ import AutoScroll from "./helpers/AutoScroll"; import {calcVScroll} from "./helpers/VirtualScroll"; import flowtable_columns from "./flowtable-columns.js"; import Filt from "../filt/filt"; +import {setSort} from "../ducks/flows"; FlowRow.propTypes = { @@ -94,8 +95,11 @@ FlowTableHead.propTypes = { }; const FlowTableHeadContainer = connect( - (state) => ({ + state => ({ sort: state.flows.sort + }), + dispatch => ({ + loc: (sort) => dispatch(setSort(sort)), }) )(FlowTableHead) diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 5237bddb..dae2856e 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -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, setSort} from "../ducks/flows"; +import {selectFlow, setFilter, setHighlight} from "../ducks/flows"; var MainView = React.createClass({ @@ -158,7 +158,6 @@ var MainView = React.createClass({
{details}
@@ -177,7 +176,6 @@ const MainViewContainer = connect( dispatch => ({ selectFlow: flowId => dispatch(selectFlow(flowId)), setFilter: filter => dispatch(setFilter(filter)), - setSort: (sort) => dispatch(setSort(sort)), setHighlight: highlight => dispatch(setHighlight(highlight)) }), undefined, -- cgit v1.2.3 From fa3ad2382bd13a76b38e1567d82636d349708371 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 7 Jun 2016 11:02:46 +0200 Subject: sorting done, ready to review --- web/src/js/components/flowtable.js | 30 ++---------------------------- web/src/js/ducks/flows.js | 26 ++++++++++++++++++++++---- web/src/js/ducks/utils/view.js | 4 ++-- 3 files changed, 26 insertions(+), 34 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index 23469827..5a0793ba 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -2,7 +2,6 @@ import React from "react"; import ReactDOM from "react-dom"; import {connect} from 'react-redux' import classNames from "classnames"; -import {reverseString} from "../utils.js"; import _ from "lodash"; import shallowEqual from "shallowequal"; import AutoScroll from "./helpers/AutoScroll"; @@ -48,30 +47,6 @@ const FlowRowContainer = connect( )(FlowRow) function FlowTableHead({setSort, columns, sort}) { - - //const hasSort = Column.sortKeyFun; - - // 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); - const sortColumn = sort.sortColumn; const sortType = sort.sortDesc ? "sort-desc" : "sort-asc"; @@ -99,7 +74,7 @@ const FlowTableHeadContainer = connect( sort: state.flows.sort }), dispatch => ({ - loc: (sort) => dispatch(setSort(sort)), + setSort: (sort) => dispatch(setSort(sort)), }) )(FlowTableHead) @@ -219,8 +194,7 @@ const parseFilter = _.memoize(Filt.parse) const FlowTableContainer = connect( state => ({ - // first idea to sort here, but i think thats not good enough ( and not working yet)... - flows: state.flows.view.sort((a,b) => state.flows.sort.sortColumn ? a.response.status_code > b.response.status_code : 0), + flows: state.flows.view }) )(FlowTable) diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index bde53179..c4444a9f 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -1,6 +1,8 @@ import makeList from "./utils/list" import Filt from "../filt/filt" -import {updateViewFilter, updateViewList} from "./utils/view" +import {updateViewFilterSort, updateViewList} from "./utils/view" +import {reverseString} from "../utils.js"; +import flowtable_columns from "../components/flowtable-columns.js"; export const UPDATE_FLOWS = "UPDATE_FLOWS" export const SET_FILTER = "SET_FLOW_FILTER" @@ -28,6 +30,21 @@ function makeFilterFn(filter) { return filter ? Filt.parse(filter) : () => true; } + +function makeSortFn(sort){ + let column = _.find(flowtable_columns, c => c.name == sort.sortColumn); + if (!column) return; + + let sortKeyFun = column.sortKeyFun; + if (sort.sortDesc) { + sortKeyFun = function () { + const k = column.sortKeyFun.apply(this, arguments); + return _.isString(k) ? reverseString("" + k) : -k; + }; + } + return sortKeyFun; +} + export default function reducer(state = defaultState, action) { switch (action.type) { case UPDATE_FLOWS: @@ -35,13 +52,13 @@ export default function reducer(state = defaultState, action) { return { ...state, all, - view: updateViewList(state.view, state.all, all, action, makeFilterFn(action.filter)) + view: updateViewList(state.view, state.all, all, action, makeFilterFn(action.filter), makeSortFn(state.sort)) } case SET_FILTER: return { ...state, filter: action.filter, - view: updateViewFilter(state.all, makeFilterFn(action.filter)) + view: updateViewFilterSort(state.all, makeFilterFn(action.filter), makeSortFn(state.sort)) } case SET_HIGHLIGHT: return { @@ -51,7 +68,8 @@ export default function reducer(state = defaultState, action) { case SET_SORT: return { ...state, - sort: action.sort + sort: action.sort, + view: updateViewFilterSort(state.all, makeFilterFn(state.filter), makeSortFn(action.sort)) } case SELECT_FLOW: return { diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js index fa23efcd..712c4d99 100644 --- a/web/src/js/ducks/utils/view.js +++ b/web/src/js/ducks/utils/view.js @@ -75,7 +75,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte case REQUEST_LIST: return currentView case RECEIVE_LIST: - return updateViewFilter(nextList, filterFn, sortFn) + return updateViewFilterSort(nextList, filterFn, sortFn) case ADD: if (filterFn(action.item)) { return sortedInsert(currentView, sortFn, action.item) @@ -113,7 +113,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte } } -export function updateViewFilter(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { +export function updateViewFilterSort(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { let filtered = list.list.filter(filterFn) if (sortFn){ filtered.sort(makeCompareFn(sortFn)) -- cgit v1.2.3 From dbbda030200e50768c92f48cf4189d96775b0684 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 7 Jun 2016 11:22:52 +0200 Subject: sorting done, ready to review --- web/src/js/ducks/flows.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src') diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index c4444a9f..83a7b12c 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -37,7 +37,7 @@ function makeSortFn(sort){ let sortKeyFun = column.sortKeyFun; if (sort.sortDesc) { - sortKeyFun = function () { + sortKeyFun = sortKeyFun && function () { const k = column.sortKeyFun.apply(this, arguments); return _.isString(k) ? reverseString("" + k) : -k; }; -- cgit v1.2.3 From ad84d650ded555213452e4a69c1dbea1bc771b3a Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 8 Jun 2016 10:29:33 +0200 Subject: sorting add pr review changes --- web/src/js/components/flowtable-columns.js | 14 +++++++------- web/src/js/components/mainview.js | 1 - web/src/js/ducks/flows.js | 14 +++++++------- web/src/js/ducks/utils/view.js | 14 ++++++++++++-- 4 files changed, 26 insertions(+), 17 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js index 1eae6409..799b3f9f 100644 --- a/web/src/js/components/flowtable-columns.js +++ b/web/src/js/components/flowtable-columns.js @@ -3,7 +3,7 @@ import {RequestUtils, ResponseUtils} from "../flow/utils.js" import {formatSize, formatTimeDelta} from "../utils.js" -function TLSColumn({flow}) { +export function TLSColumn({flow}) { let ssl = (flow.request.scheme === "https") let classes if (ssl) { @@ -17,7 +17,7 @@ TLSColumn.Title = ({className = "", ...props}) =>
-function PathColumn({flow}) { +export function PathColumn({flow}) { return } MethodColumn.Title = ({className = "", ...props}) => @@ -69,7 +69,7 @@ MethodColumn.Title = ({className = "", ...props}) => MethodColumn.sortKeyFun = flow => flow.request.method -function StatusColumn({flow}) { +export function StatusColumn({flow}) { let status if (flow.response) { status = flow.response.status_code @@ -84,7 +84,7 @@ StatusColumn.Title = ({className = "", ...props}) => StatusColumn.sortKeyFun = flow => flow.response ? flow.response.status_code : undefined -function SizeColumn({flow}) { +export function SizeColumn({flow}) { let total = flow.request.contentLength if (flow.response) { total += flow.response.contentLength || 0 @@ -104,7 +104,7 @@ SizeColumn.sortKeyFun = flow => { } -function TimeColumn({flow}) { +export function TimeColumn({flow}) { let time if (flow.response) { time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)) diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index dae2856e..5915c9fc 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -169,7 +169,6 @@ 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]] }), diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index 83a7b12c..6adde71c 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -1,8 +1,8 @@ import makeList from "./utils/list" import Filt from "../filt/filt" -import {updateViewFilterSort, updateViewList} from "./utils/view" +import {updateViewFilter, updateViewList, updateViewSort} from "./utils/view" import {reverseString} from "../utils.js"; -import flowtable_columns from "../components/flowtable-columns.js"; +import * as flow_table_columns from "../components/flowtable-columns.js"; export const UPDATE_FLOWS = "UPDATE_FLOWS" export const SET_FILTER = "SET_FLOW_FILTER" @@ -32,13 +32,13 @@ function makeFilterFn(filter) { function makeSortFn(sort){ - let column = _.find(flowtable_columns, c => c.name == sort.sortColumn); + let column = flow_table_columns[sort.sortColumn]; if (!column) return; let sortKeyFun = column.sortKeyFun; if (sort.sortDesc) { - sortKeyFun = sortKeyFun && function () { - const k = column.sortKeyFun.apply(this, arguments); + sortKeyFun = sortKeyFun && function (flow) { + const k = column.sortKeyFun(flow); return _.isString(k) ? reverseString("" + k) : -k; }; } @@ -58,7 +58,7 @@ export default function reducer(state = defaultState, action) { return { ...state, filter: action.filter, - view: updateViewFilterSort(state.all, makeFilterFn(action.filter), makeSortFn(state.sort)) + view: updateViewFilter(state.all, makeFilterFn(action.filter), makeSortFn(state.sort)) } case SET_HIGHLIGHT: return { @@ -69,7 +69,7 @@ export default function reducer(state = defaultState, action) { return { ...state, sort: action.sort, - view: updateViewFilterSort(state.all, makeFilterFn(state.filter), makeSortFn(action.sort)) + view: updateViewSort(state.view, makeSortFn(action.sort)) } case SELECT_FLOW: return { diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js index 712c4d99..2d23a39c 100644 --- a/web/src/js/ducks/utils/view.js +++ b/web/src/js/ducks/utils/view.js @@ -75,7 +75,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte case REQUEST_LIST: return currentView case RECEIVE_LIST: - return updateViewFilterSort(nextList, filterFn, sortFn) + return updateViewFilter(nextList, filterFn, sortFn) case ADD: if (filterFn(action.item)) { return sortedInsert(currentView, sortFn, action.item) @@ -113,7 +113,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte } } -export function updateViewFilterSort(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { +export function updateViewFilter(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { let filtered = list.list.filter(filterFn) if (sortFn){ filtered.sort(makeCompareFn(sortFn)) @@ -122,3 +122,13 @@ export function updateViewFilterSort(list, filterFn = defaultFilterFn, sortFn = return filtered } + +export function updateViewSort(list, sortFn = defaultSortFn) { + let sorted = list.slice(0) + if (sortFn) { + sorted.sort(makeCompareFn(sortFn)) + } + sorted.indexOf = x => sortedIndexOf(sorted, x, sortFn) + + return sorted +} -- cgit v1.2.3
flow.request.scheme -function IconColumn({flow}) { +export function IconColumn({flow}) { let icon if (flow.response) { var contentType = ResponseUtils.getContentType(flow.response) @@ -49,7 +49,7 @@ function IconColumn({flow}) { IconColumn.Title = ({className = "", ...props}) => {flow.request.is_replay ? : null} {flow.intercepted ? : null} @@ -61,7 +61,7 @@ PathColumn.Title = ({className = "", ...props}) => PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request) -function MethodColumn({flow}) { +export function MethodColumn({flow}) { return {flow.request.method}