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 ++- 2 files changed, 49 insertions(+), 47 deletions(-) (limited to 'web/src/js/components') 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, -- 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/js/components') 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/js/components') 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 ++---------------------------- 1 file changed, 2 insertions(+), 28 deletions(-) (limited to 'web/src/js/components') 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) -- 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 - 2 files changed, 7 insertions(+), 8 deletions(-) (limited to 'web/src/js/components') 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]] }), -- 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}