diff options
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/EventLog.jsx | 10 | ||||
-rw-r--r-- | web/src/js/components/FlowTable/FlowColumns.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/FlowTable/FlowTableHead.jsx | 10 | ||||
-rw-r--r-- | web/src/js/components/Header.jsx | 7 | ||||
-rw-r--r-- | web/src/js/components/Header/FileMenu.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/Header/FlowMenu.jsx | 2 | ||||
-rw-r--r-- | web/src/js/components/Header/ViewMenu.jsx | 4 | ||||
-rw-r--r-- | web/src/js/components/MainView.jsx | 21 |
8 files changed, 31 insertions, 39 deletions
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx index 169162ee..e426672a 100644 --- a/web/src/js/components/EventLog.jsx +++ b/web/src/js/components/EventLog.jsx @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' -import { toggleEventLogFilter, toggleEventLogVisibility } from '../ducks/eventLog' +import { toggleFilter, toggleVisibility } from '../ducks/eventLog' import ToggleButton from './common/ToggleButton' import EventList from './EventLog/EventList' @@ -69,11 +69,11 @@ class EventLog extends Component { export default connect( state => ({ - filters: state.eventLog.filter, - events: state.eventLog.filteredEvents, + filters: state.eventLog.filters, + events: state.eventLog.view.data, }), { - onClose: toggleEventLogVisibility, - onToggleFilter: toggleEventLogFilter, + onClose: toggleVisibility, + onToggleFilter: toggleFilter, } )(EventLog) diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx index 11c0796c..0ff80453 100644 --- a/web/src/js/components/FlowTable/FlowColumns.jsx +++ b/web/src/js/components/FlowTable/FlowColumns.jsx @@ -9,7 +9,6 @@ export function TLSColumn({ flow }) { ) } -TLSColumn.sortKeyFun = flow => flow.request.scheme TLSColumn.headerClass = 'col-tls' TLSColumn.headerName = '' @@ -68,7 +67,6 @@ export function PathColumn({ flow }) { ) } -PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request) PathColumn.headerClass = 'col-path' PathColumn.headerName = 'Path' @@ -78,7 +76,6 @@ export function MethodColumn({ flow }) { ) } -MethodColumn.sortKeyFun = flow => flow.request.method MethodColumn.headerClass = 'col-method' MethodColumn.headerName = 'Method' @@ -88,7 +85,6 @@ export function StatusColumn({ flow }) { ) } -StatusColumn.sortKeyFun = flow => flow.response && flow.response.status_code StatusColumn.headerClass = 'col-status' StatusColumn.headerName = 'Status' @@ -98,7 +94,7 @@ export function SizeColumn({ flow }) { ) } -SizeColumn.sortKeyFun = flow => { +SizeColumn.getTotalSize = flow => { let total = flow.request.contentLength if (flow.response) { total += flow.response.contentLength || 0 @@ -106,7 +102,6 @@ SizeColumn.sortKeyFun = flow => { return total } -SizeColumn.getTotalSize = SizeColumn.sortKeyFun SizeColumn.headerClass = 'col-size' SizeColumn.headerName = 'Size' @@ -122,7 +117,6 @@ export function TimeColumn({ flow }) { ) } -TimeColumn.sortKeyFun = flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start TimeColumn.headerClass = 'col-time' TimeColumn.headerName = 'Time' diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx index 840f6a34..6deee808 100644 --- a/web/src/js/components/FlowTable/FlowTableHead.jsx +++ b/web/src/js/components/FlowTable/FlowTableHead.jsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux' import classnames from 'classnames' import columns from './FlowColumns' -import { setSort } from "../../ducks/flows" +import { updateSorter } from '../../ducks/views/main' FlowTableHead.propTypes = { onSort: PropTypes.func.isRequired, @@ -19,7 +19,7 @@ function FlowTableHead({ sortColumn, sortDesc, onSort }) { {columns.map(Column => ( <th className={classnames(Column.headerClass, sortColumn === Column.name && sortType)} key={Column.name} - onClick={() => onSort({ sortColumn: Column.name, sortDesc: Column.name !== sortColumn ? false : !sortDesc })}> + onClick={() => onSort(Column.name, Column.name !== sortColumn ? false : !sortDesc)}> {Column.headerName} </th> ))} @@ -29,10 +29,10 @@ function FlowTableHead({ sortColumn, sortDesc, onSort }) { export default connect( state => ({ - sortDesc: state.flows.sort.sortDesc, - sortColumn: state.flows.sort.sortColumn, + sortDesc: state.flows.views.main.sorter.desc, + sortColumn: state.flows.views.main.sorter.column, }), { - onSort: setSort, + onSort: updateSorter, } )(FlowTableHead) diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index ab25eb41..545684bb 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -1,7 +1,6 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import classnames from 'classnames' -import { toggleEventLogVisibility } from '../ducks/eventLog' import MainMenu from './Header/MainMenu' import ViewMenu from './Header/ViewMenu' import OptionMenu from './Header/OptionMenu' @@ -52,9 +51,9 @@ class Header extends Component { } } export default connect( - (state) => ({ - selectedFlow: state.flows.selected[0], - activeMenu: state.ui.activeMenu + state => ({ + selectedFlow: state.flows.views.main.selected[0], + activeMenu: state.ui.activeMenu, }), { setActiveMenu, diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index b075b3c8..e1c62e28 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react' import classnames from 'classnames' -import { FlowActions } from '../../actions.js' +import * as flowActions from '../../ducks/flows' export default class FileMenu extends Component { @@ -35,7 +35,7 @@ export default class FileMenu extends Component { onNewClick(e) { e.preventDefault() if (confirm('Delete all flows?')) { - FlowActions.clear() + flowActions.clear() } } @@ -47,14 +47,14 @@ export default class FileMenu extends Component { onOpenFile(e) { e.preventDefault() if (e.target.files.length > 0) { - FlowActions.upload(e.target.files[0]) + flowActions.upload(e.target.files[0]) this.fileInput.value = '' } } onSaveClick(e) { e.preventDefault() - FlowActions.download() + flowActions.download() } render() { diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index abecf0dc..689cea5c 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -29,6 +29,6 @@ function FlowMenu({ flow }) { export default connect( state => ({ - flow: state.flows.all.byId[state.flows.selected[0]] + flow: state.flows.list.data[state.flows.views.main.selected[0]], }) )(FlowMenu) diff --git a/web/src/js/components/Header/ViewMenu.jsx b/web/src/js/components/Header/ViewMenu.jsx index 8d662c28..894fa71a 100644 --- a/web/src/js/components/Header/ViewMenu.jsx +++ b/web/src/js/components/Header/ViewMenu.jsx @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react' import { connect } from 'react-redux' import ToggleButton from '../common/ToggleButton' -import { toggleEventLogVisibility } from '../../ducks/eventLog' +import { toggleVisibility } from '../../ducks/eventLog' ViewMenu.title = 'View' ViewMenu.route = 'flows' @@ -27,6 +27,6 @@ export default connect( visible: state.eventLog.visible, }), { - onToggle: toggleEventLogVisibility, + onToggle: toggleVisibility, } )(ViewMenu) diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 7064d3bf..b3fe73ec 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -6,7 +6,7 @@ import { Key } from '../utils.js' import Splitter from './common/Splitter' import FlowTable from './FlowTable' import FlowView from './FlowView' -import { selectFlow, setFilter, setHighlight } from '../ducks/flows' +import { selectFlow, updateFilter, updateHighlight } from '../ducks/views/main' class MainView extends Component { @@ -25,10 +25,10 @@ class MainView extends Component { this.props.selectFlow(nextProps.routeParams.flowId) } if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) { - this.props.setFilter(nextProps.location.query[Query.SEARCH], false) + this.props.updateFilter(nextProps.location.query[Query.SEARCH], false) } if (nextProps.location.query[Query.HIGHLIGHT] !== nextProps.highlight) { - this.props.setHighlight(nextProps.location.query[Query.HIGHLIGHT], false) + this.props.updateHighlight(nextProps.location.query[Query.HIGHLIGHT], false) } } @@ -154,7 +154,7 @@ class MainView extends Component { } render() { - const { flows, selectedFlow, highlight, sort } = this.props + const { flows, selectedFlow, highlight } = this.props return ( <div className="main-view"> <FlowTable @@ -182,16 +182,15 @@ class MainView extends Component { export default 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]] + flows: state.flows.views.main.view.data, + filter: state.flows.views.main.filter, + highlight: state.flows.views.main.highlight, + selectedFlow: state.flows.list.data[state.flows.views.main.selected[0]] }), { selectFlow, - setFilter, - setHighlight, + updateFilter, + updateHighlight, }, undefined, { withRef: true } |