From f306cfa8b6445dd04c5f7188d1a5022bcb747a62 Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 9 Jun 2016 17:46:14 +0800 Subject: [web] separate flowtable to multiple files --- web/src/js/app.js | 41 ----- web/src/js/app.jsx | 41 +++++ web/src/js/components/FlowTable.jsx | 120 +++++++++++++ web/src/js/components/FlowTable/FlowColumns.jsx | 137 +++++++++++++++ web/src/js/components/FlowTable/FlowRow.jsx | 28 +++ web/src/js/components/FlowTable/FlowTableHead.jsx | 43 +++++ web/src/js/components/MainView.js | 191 -------------------- web/src/js/components/MainView.jsx | 200 +++++++++++++++++++++ web/src/js/components/ProxyApp.js | 169 ------------------ web/src/js/components/ProxyApp.jsx | 170 ++++++++++++++++++ web/src/js/components/flowtable-columns.js | 131 -------------- web/src/js/components/flowtable.js | 201 ---------------------- web/src/js/ducks/flows.js | 6 +- 13 files changed, 742 insertions(+), 736 deletions(-) delete mode 100644 web/src/js/app.js create mode 100644 web/src/js/app.jsx create mode 100644 web/src/js/components/FlowTable.jsx create mode 100644 web/src/js/components/FlowTable/FlowColumns.jsx create mode 100644 web/src/js/components/FlowTable/FlowRow.jsx create mode 100644 web/src/js/components/FlowTable/FlowTableHead.jsx delete mode 100644 web/src/js/components/MainView.js create mode 100644 web/src/js/components/MainView.jsx delete mode 100644 web/src/js/components/ProxyApp.js create mode 100644 web/src/js/components/ProxyApp.jsx delete mode 100644 web/src/js/components/flowtable-columns.js delete mode 100644 web/src/js/components/flowtable.js (limited to 'web/src/js') diff --git a/web/src/js/app.js b/web/src/js/app.js deleted file mode 100644 index 8fa52a00..00000000 --- a/web/src/js/app.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react" -import { render } from 'react-dom' -import { applyMiddleware, createStore } from 'redux' -import { Provider } from 'react-redux' -import createLogger from 'redux-logger' -import thunkMiddleware from 'redux-thunk' -import { Route, Router as ReactRouter, hashHistory, Redirect } from "react-router" - -import Connection from "./connection" -import ProxyApp from "./components/ProxyApp" -import MainView from './components/MainView' -import rootReducer from './ducks/index' -import { addLogEntry } from "./ducks/eventLog" - -// logger must be last -const store = createStore( - rootReducer, - applyMiddleware(thunkMiddleware, createLogger()) -) - -window.addEventListener('error', msg => { - store.dispatch(addLogEntry(msg)) -}) - -// @todo remove this -document.addEventListener('DOMContentLoaded', () => { - window.ws = new Connection("/updates", store.dispatch) - - render( - - - - - - - - - , - document.getElementById("mitmproxy") - ) -}) diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx new file mode 100644 index 00000000..8fa52a00 --- /dev/null +++ b/web/src/js/app.jsx @@ -0,0 +1,41 @@ +import React from "react" +import { render } from 'react-dom' +import { applyMiddleware, createStore } from 'redux' +import { Provider } from 'react-redux' +import createLogger from 'redux-logger' +import thunkMiddleware from 'redux-thunk' +import { Route, Router as ReactRouter, hashHistory, Redirect } from "react-router" + +import Connection from "./connection" +import ProxyApp from "./components/ProxyApp" +import MainView from './components/MainView' +import rootReducer from './ducks/index' +import { addLogEntry } from "./ducks/eventLog" + +// logger must be last +const store = createStore( + rootReducer, + applyMiddleware(thunkMiddleware, createLogger()) +) + +window.addEventListener('error', msg => { + store.dispatch(addLogEntry(msg)) +}) + +// @todo remove this +document.addEventListener('DOMContentLoaded', () => { + window.ws = new Connection("/updates", store.dispatch) + + render( + + + + + + + + + , + document.getElementById("mitmproxy") + ) +}) diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx new file mode 100644 index 00000000..eddeed62 --- /dev/null +++ b/web/src/js/components/FlowTable.jsx @@ -0,0 +1,120 @@ +import React, { PropTypes } from 'react' +import ReactDOM from 'react-dom' +import shallowEqual from 'shallowequal' +import AutoScroll from './helpers/AutoScroll' +import { calcVScroll } from './helpers/VirtualScroll' +import FlowTableHead from './FlowTable/FlowTableHead' +import FlowRow from './FlowTable/FlowRow' +import Filt from "../filt/filt" + +class FlowTable extends React.Component { + + static propTypes = { + onSelect: PropTypes.func.isRequired, + flows: PropTypes.array.isRequired, + rowHeight: PropTypes.number, + highlight: PropTypes.string, + selected: PropTypes.object, + } + + static defaultProps = { + rowHeight: 32, + } + + constructor(props, context) { + super(props, context) + + this.state = { vScroll: calcVScroll() } + this.onViewportUpdate = this.onViewportUpdate.bind(this) + } + + componentWillMount() { + window.addEventListener('resize', this.onViewportUpdate) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.onViewportUpdate) + } + + componentDidUpdate() { + this.onViewportUpdate() + + if (!this.shouldScrollIntoView) { + return + } + + this.shouldScrollIntoView = false + + const { rowHeight, flows, selected } = this.props + const viewport = ReactDOM.findDOMNode(this) + const head = ReactDOM.findDOMNode(this.refs.head) + + const headHeight = head ? head.offsetHeight : 0 + + const rowTop = (flows.indexOf(selected) * rowHeight) + headHeight + const rowBottom = rowTop + rowHeight + + const viewportTop = viewport.scrollTop + const viewportHeight = viewport.offsetHeight + + // Account for pinned thead + if (rowTop - headHeight < viewportTop) { + viewport.scrollTop = rowTop - headHeight + } else if (rowBottom > viewportTop + viewportHeight) { + viewport.scrollTop = rowBottom - viewportHeight + } + } + + componentWillReceiveProps(nextProps) { + if (nextProps.selected && nextProps.selected !== this.props.selected) { + this.shouldScrollIntoView = true + } + } + + onViewportUpdate() { + const viewport = ReactDOM.findDOMNode(this) + const viewportTop = viewport.scrollTop + + const vScroll = calcVScroll({ + viewportTop, + viewportHeight: viewport.offsetHeight, + itemCount: this.props.flows.length, + rowHeight: this.props.rowHeight, + }) + + if (this.state.viewportTop !== viewportTop || !shallowEqual(this.state.vScroll, vScroll)) { + this.setState({ vScroll, viewportTop }) + } + } + + render() { + const { vScroll, viewportTop } = this.state + const { flows, selected, highlight } = this.props + const isHighlighted = highlight ? Filt.parse(highlight) : () => false + + return ( +
+ + + + + + + {flows.slice(vScroll.start, vScroll.end).map(flow => ( + + ))} + + +
+
+ ) + } +} + +export default AutoScroll(FlowTable) diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx new file mode 100644 index 00000000..11c0796c --- /dev/null +++ b/web/src/js/components/FlowTable/FlowColumns.jsx @@ -0,0 +1,137 @@ +import React, { Component } from 'react' +import classnames from 'classnames' +import { RequestUtils, ResponseUtils } from '../../flow/utils.js' +import { formatSize, formatTimeDelta } from '../../utils.js' + +export function TLSColumn({ flow }) { + return ( + + ) +} + +TLSColumn.sortKeyFun = flow => flow.request.scheme +TLSColumn.headerClass = 'col-tls' +TLSColumn.headerName = '' + +export function IconColumn({ flow }) { + return ( + +
+ + ) +} + +IconColumn.headerClass = 'col-icon' +IconColumn.headerName = '' + +IconColumn.getIcon = flow => { + if (!flow.response) { + return 'resource-icon-plain' + } + + var contentType = ResponseUtils.getContentType(flow.response) || '' + + // @todo We should assign a type to the flow somewhere else. + if (flow.response.status_code === 304) { + return 'resource-icon-not-modified' + } + if (300 <= flow.response.status_code && flow.response.status_code < 400) { + return 'resource-icon-redirect' + } + if (contentType.indexOf('image') >= 0) { + return 'resource-icon-image' + } + if (contentType.indexOf('javascript') >= 0) { + return 'resource-icon-js' + } + if (contentType.indexOf('css') >= 0) { + return 'resource-icon-css' + } + if (contentType.indexOf('html') >= 0) { + return 'resource-icon-document' + } + + return 'resource-icon-plain' +} + +export function PathColumn({ flow }) { + return ( + + {flow.request.is_replay && ( + + )} + {flow.intercepted && ( + + )} + {RequestUtils.pretty_url(flow.request)} + + ) +} + +PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request) +PathColumn.headerClass = 'col-path' +PathColumn.headerName = 'Path' + +export function MethodColumn({ flow }) { + return ( + {flow.request.method} + ) +} + +MethodColumn.sortKeyFun = flow => flow.request.method +MethodColumn.headerClass = 'col-method' +MethodColumn.headerName = 'Method' + +export function StatusColumn({ flow }) { + return ( + {flow.response && flow.response.status_code} + ) +} + +StatusColumn.sortKeyFun = flow => flow.response && flow.response.status_code +StatusColumn.headerClass = 'col-status' +StatusColumn.headerName = 'Status' + +export function SizeColumn({ flow }) { + return ( + {formatSize(SizeColumn.getTotalSize(flow))} + ) +} + +SizeColumn.sortKeyFun = flow => { + let total = flow.request.contentLength + if (flow.response) { + total += flow.response.contentLength || 0 + } + return total +} + +SizeColumn.getTotalSize = SizeColumn.sortKeyFun +SizeColumn.headerClass = 'col-size' +SizeColumn.headerName = 'Size' + +export function TimeColumn({ flow }) { + return ( + + {flow.response ? ( + formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)) + ) : ( + '...' + )} + + ) +} + +TimeColumn.sortKeyFun = flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start +TimeColumn.headerClass = 'col-time' +TimeColumn.headerName = 'Time' + +export default [ + TLSColumn, + IconColumn, + PathColumn, + MethodColumn, + StatusColumn, + SizeColumn, + TimeColumn, +] diff --git a/web/src/js/components/FlowTable/FlowRow.jsx b/web/src/js/components/FlowTable/FlowRow.jsx new file mode 100644 index 00000000..749bc0ce --- /dev/null +++ b/web/src/js/components/FlowTable/FlowRow.jsx @@ -0,0 +1,28 @@ +import React, { PropTypes } from 'react' +import classnames from 'classnames' +import columns from './FlowColumns' + +FlowRow.propTypes = { + onSelect: PropTypes.func.isRequired, + flow: PropTypes.object.isRequired, + highlighted: PropTypes.bool, + selected: PropTypes.bool, +} + +export default function FlowRow({ flow, selected, highlighted, onSelect }) { + const className = classnames({ + 'selected': selected, + 'highlighted': highlighted, + 'intercepted': flow.intercepted, + 'has-request': flow.request, + 'has-response': flow.response, + }) + + return ( + onSelect(flow)}> + {columns.map(Column => ( + + ))} + + ) +} diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx new file mode 100644 index 00000000..a46219d1 --- /dev/null +++ b/web/src/js/components/FlowTable/FlowTableHead.jsx @@ -0,0 +1,43 @@ +import React, { PropTypes } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import classnames from 'classnames' +import columns from './FlowColumns' + +import { setSort } from "../../ducks/flows" + +FlowTableHead.propTypes = { + onSort: PropTypes.func.isRequired, + sortDesc: React.PropTypes.bool.isRequired, + sortColumn: React.PropTypes.string, +} + +function FlowTableHead({ sortColumn, sortDesc, onSort }) { + const sortType = sortDesc ? 'sort-desc' : 'sort-asc' + + return ( + + {columns.map(Column => ( + onClick(Column)}> + {Column.headerName} + + ))} + + ) + + function onClick(Column) { + onSort({ sortColumn: Column.name, sortDesc: Column.name !== sortColumn ? false : !sortDesc }) + } +} + +export default connect( + state => ({ + sortDesc: state.flows.sort.sortDesc, + sortColumn: state.flows.sort.sortColumn, + }), + dispatch => bindActionCreators({ + onSort: setSort, + }, dispatch) +)(FlowTableHead) diff --git a/web/src/js/components/MainView.js b/web/src/js/components/MainView.js deleted file mode 100644 index 6172ce77..00000000 --- a/web/src/js/components/MainView.js +++ /dev/null @@ -1,191 +0,0 @@ -import React, { Component } from "react" - -import { FlowActions } from "../actions.js" -import { Query } from "../actions.js" -import { Key } from "../utils.js" -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" - -class MainView extends Component { - - /** - * @todo move to actions - * @todo replace with mapStateToProps - */ - componentWillReceiveProps(nextProps) { - // Update redux store with route changes - if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) { - this.props.selectFlow(nextProps.routeParams.flowId) - } - if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) { - this.props.setFilter(nextProps.location.query[Query.SEARCH], false) - } - if (nextProps.location.query[Query.HIGHLIGHT] !== nextProps.highlight) { - this.props.setHighlight(nextProps.location.query[Query.HIGHLIGHT], false) - } - } - - /** - * @todo move to actions - */ - selectFlow(flow) { - if (flow) { - this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || "request"}`) - } else { - this.props.updateLocation("/flows") - } - } - - /** - * @todo move to actions - */ - selectFlowRelative(shift) { - const { flows, routeParams, selectedFlow } = this.props - let index = 0 - if (!routeParams.flowId) { - if (shift < 0) { - index = flows.length - 1 - } - } else { - index = Math.min( - Math.max(0, flows.indexOf(selectedFlow) + shift), - flows.length - 1 - ) - } - this.selectFlow(flows[index]) - } - - /** - * @todo move to actions - */ - onMainKeyDown(e) { - var flow = this.props.selectedFlow - if (e.ctrlKey) { - return - } - switch (e.keyCode) { - case Key.K: - case Key.UP: - this.selectFlowRelative(-1) - break - case Key.J: - case Key.DOWN: - this.selectFlowRelative(+1) - break - case Key.SPACE: - case Key.PAGE_DOWN: - this.selectFlowRelative(+10) - break - case Key.PAGE_UP: - this.selectFlowRelative(-10) - break - case Key.END: - this.selectFlowRelative(+1e10) - break - case Key.HOME: - this.selectFlowRelative(-1e10) - break - case Key.ESC: - this.selectFlow(null) - break - case Key.H: - case Key.LEFT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(-1) - } - break - case Key.L: - case Key.TAB: - case Key.RIGHT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(+1) - } - break - case Key.C: - if (e.shiftKey) { - FlowActions.clear() - } - break - case Key.D: - if (flow) { - if (e.shiftKey) { - FlowActions.duplicate(flow) - } else { - FlowActions.delete(flow) - } - } - break - case Key.A: - if (e.shiftKey) { - FlowActions.accept_all() - } else if (flow && flow.intercepted) { - FlowActions.accept(flow) - } - break - case Key.R: - if (!e.shiftKey && flow) { - FlowActions.replay(flow) - } - break - case Key.V: - if (e.shiftKey && flow && flow.modified) { - FlowActions.revert(flow) - } - break - case Key.E: - if (this.refs.flowDetails) { - this.refs.flowDetails.promptEdit() - } - break - case Key.SHIFT: - break - default: - console.debug("keydown", e.keyCode) - return - } - e.preventDefault() - } - - render() { - const { selectedFlow } = this.props - return ( -
- this.selectFlow(flow)} - selected={selectedFlow} - /> - {selectedFlow && [ - , - - ]} -
- ) - } -} - -export default connect( - state => ({ - flows: state.flows.view, - filter: state.flows.filter, - highlight: state.flows.highlight, - selectedFlow: state.flows.all.byId[state.flows.selected[0]] - }), - dispatch => ({ - selectFlow: flowId => dispatch(selectFlow(flowId)), - setFilter: filter => dispatch(setFilter(filter)), - setHighlight: highlight => dispatch(setHighlight(highlight)) - }), - undefined, - { withRef: true } -)(MainView) diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx new file mode 100644 index 00000000..dbea76e5 --- /dev/null +++ b/web/src/js/components/MainView.jsx @@ -0,0 +1,200 @@ +import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' + +import { FlowActions } from '../actions.js' +import { Query } from '../actions.js' +import { Key } from '../utils.js' +import { Splitter } from './common.js' +import FlowTable from './FlowTable' +import FlowView from './flowview/index.js' +import { selectFlow, setFilter, setHighlight } from '../ducks/flows' + +class MainView extends Component { + + static propTypes = { + highlight: PropTypes.string, + sort: PropTypes.object, + } + + /** + * @todo move to actions + * @todo replace with mapStateToProps + */ + componentWillReceiveProps(nextProps) { + // Update redux store with route changes + if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) { + this.props.selectFlow(nextProps.routeParams.flowId) + } + if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) { + this.props.setFilter(nextProps.location.query[Query.SEARCH], false) + } + if (nextProps.location.query[Query.HIGHLIGHT] !== nextProps.highlight) { + this.props.setHighlight(nextProps.location.query[Query.HIGHLIGHT], false) + } + } + + /** + * @todo move to actions + */ + selectFlow(flow) { + if (flow) { + this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`) + } else { + this.props.updateLocation('/flows') + } + } + + /** + * @todo move to actions + */ + selectFlowRelative(shift) { + const { flows, routeParams, selectedFlow } = this.props + let index = 0 + if (!routeParams.flowId) { + if (shift < 0) { + index = flows.length - 1 + } + } else { + index = Math.min( + Math.max(0, flows.indexOf(selectedFlow) + shift), + flows.length - 1 + ) + } + this.selectFlow(flows[index]) + } + + /** + * @todo move to actions + */ + onMainKeyDown(e) { + var flow = this.props.selectedFlow + if (e.ctrlKey) { + return + } + switch (e.keyCode) { + case Key.K: + case Key.UP: + this.selectFlowRelative(-1) + break + case Key.J: + case Key.DOWN: + this.selectFlowRelative(+1) + break + case Key.SPACE: + case Key.PAGE_DOWN: + this.selectFlowRelative(+10) + break + case Key.PAGE_UP: + this.selectFlowRelative(-10) + break + case Key.END: + this.selectFlowRelative(+1e10) + break + case Key.HOME: + this.selectFlowRelative(-1e10) + break + case Key.ESC: + this.selectFlow(null) + break + case Key.H: + case Key.LEFT: + if (this.refs.flowDetails) { + this.refs.flowDetails.nextTab(-1) + } + break + case Key.L: + case Key.TAB: + case Key.RIGHT: + if (this.refs.flowDetails) { + this.refs.flowDetails.nextTab(+1) + } + break + case Key.C: + if (e.shiftKey) { + FlowActions.clear() + } + break + case Key.D: + if (flow) { + if (e.shiftKey) { + FlowActions.duplicate(flow) + } else { + FlowActions.delete(flow) + } + } + break + case Key.A: + if (e.shiftKey) { + FlowActions.accept_all() + } else if (flow && flow.intercepted) { + FlowActions.accept(flow) + } + break + case Key.R: + if (!e.shiftKey && flow) { + FlowActions.replay(flow) + } + break + case Key.V: + if (e.shiftKey && flow && flow.modified) { + FlowActions.revert(flow) + } + break + case Key.E: + if (this.refs.flowDetails) { + this.refs.flowDetails.promptEdit() + } + break + case Key.SHIFT: + break + default: + console.debug('keydown', e.keyCode) + return + } + e.preventDefault() + } + + render() { + const { flows, selectedFlow, highlight, sort } = this.props + return ( +
+ this.selectFlow(flow)} + /> + {selectedFlow && [ + , + + ]} +
+ ) + } +} + +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]] + }), + dispatch => bindActionCreators({ + selectFlow, + setFilter, + setHighlight, + }, dispatch), + undefined, + { withRef: true } +)(MainView) diff --git a/web/src/js/components/ProxyApp.js b/web/src/js/components/ProxyApp.js deleted file mode 100644 index 71a7bf9b..00000000 --- a/web/src/js/components/ProxyApp.js +++ /dev/null @@ -1,169 +0,0 @@ -import React, { Component, PropTypes } from "react" -import ReactDOM from "react-dom" -import _ from "lodash" -import { connect } from 'react-redux' - -import { Splitter } from "./common.js" -import { Header, MainMenu } from "./header.js" -import EventLog from "./eventlog.js" -import Footer from "./footer.js" -import { SettingsStore } from "../store/store.js" -import { Key } from "../utils.js" - -class ProxyAppMain extends Component { - - static childContextTypes = { - returnFocus: PropTypes.func.isRequired, - location: PropTypes.object.isRequired, - } - - static contextTypes = { - router: PropTypes.object.isRequired, - } - - constructor(props, context) { - super(props, context) - - this.settingsStore = new SettingsStore() - - // Default Settings before fetch - _.extend(this.settingsStore.dict, {}) - - this.state = { settings: this.settingsStore.dict } - - this.onKeyDown = this.onKeyDown.bind(this) - this.updateLocation = this.updateLocation.bind(this) - this.onSettingsChange = this.onSettingsChange.bind(this) - } - - /** - * @todo move to actions - */ - updateLocation(pathname, queryUpdate) { - if (pathname === undefined) { - pathname = this.props.location.pathname - } - const query = this.props.location.query - for (const key of Object.keys(queryUpdate || {})) { - query[i] = queryUpdate[i] || undefined - } - this.context.router.replace({ pathname, query }) - } - - /** - * @todo pass in with props - */ - getQuery() { - // For whatever reason, react-router always returns the same object, which makes comparing - // the current props with nextProps impossible. As a workaround, we just clone the query object. - return _.clone(this.props.location.query) - } - - /** - * @todo remove settings store - * @todo connect websocket here - * @todo listen to window's key events - */ - componentDidMount() { - this.focus() - this.settingsStore.addListener("recalculate", this.onSettingsChange) - } - - /** - * @todo remove settings store - * @todo disconnect websocket here - * @todo stop listening to window's key events - */ - componentWillUnmount() { - this.settingsStore.removeListener("recalculate", this.onSettingsChange) - } - - /** - * @todo move to actions - */ - onSettingsChange() { - this.setState({ settings: this.settingsStore.dict }) - } - - /** - * @todo use props - */ - getChildContext() { - return { - returnFocus: this.focus, - location: this.props.location - } - } - - /** - * @todo remove it - */ - focus() { - document.activeElement.blur() - window.getSelection().removeAllRanges() - ReactDOM.findDOMNode(this).focus() - } - - /** - * @todo move to actions - */ - onKeyDown(e) { - let name = null - - switch (e.keyCode) { - case Key.I: - name = "intercept" - break - case Key.L: - name = "search" - break - case Key.H: - name = "highlight" - break - default: - let main = this.refs.view - if (this.refs.view.getWrappedInstance) { - main = this.refs.view.getWrappedInstance() - } - if (main.onMainKeyDown) { - main.onMainKeyDown(e) - } - return // don't prevent default then - } - - if (name) { - const headerComponent = this.refs.header - headerComponent.setState({active: MainMenu}, function () { - headerComponent.refs.active.refs[name].select() - }) - } - - e.preventDefault() - } - - render() { - const { showEventLog, location, children } = this.props - const { settings } = this.state - const query = this.getQuery() - return ( -
-
- {React.cloneElement( - children, - { ref: "view", location, query, updateLocation: this.updateLocation } - )} - {showEventLog && [ - , - - ]} -
-
- ) - } -} - -export default connect( - state => ({ - showEventLog: state.eventLog.visible - }) -)(ProxyAppMain) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx new file mode 100644 index 00000000..9f497a7d --- /dev/null +++ b/web/src/js/components/ProxyApp.jsx @@ -0,0 +1,170 @@ +import React, { Component, PropTypes } from "react" +import ReactDOM from "react-dom" +import _ from "lodash" +import { connect } from 'react-redux' + +import { Splitter } from "./common.js" +import { Header, MainMenu } from "./header.js" +import EventLog from "./eventlog.js" +import Footer from "./footer.js" +import { SettingsStore } from "../store/store.js" +import { Key } from "../utils.js" + +class ProxyAppMain extends Component { + + static childContextTypes = { + returnFocus: PropTypes.func.isRequired, + location: PropTypes.object.isRequired, + } + + static contextTypes = { + router: PropTypes.object.isRequired, + } + + constructor(props, context) { + super(props, context) + + this.settingsStore = new SettingsStore() + + // Default Settings before fetch + _.extend(this.settingsStore.dict, {}) + + this.state = { settings: this.settingsStore.dict } + + this.focus = this.focus.bind(this) + this.onKeyDown = this.onKeyDown.bind(this) + this.updateLocation = this.updateLocation.bind(this) + this.onSettingsChange = this.onSettingsChange.bind(this) + } + + /** + * @todo move to actions + */ + updateLocation(pathname, queryUpdate) { + if (pathname === undefined) { + pathname = this.props.location.pathname + } + const query = this.props.location.query + for (const key of Object.keys(queryUpdate || {})) { + query[key] = queryUpdate[key] || undefined + } + this.context.router.replace({ pathname, query }) + } + + /** + * @todo pass in with props + */ + getQuery() { + // For whatever reason, react-router always returns the same object, which makes comparing + // the current props with nextProps impossible. As a workaround, we just clone the query object. + return _.clone(this.props.location.query) + } + + /** + * @todo remove settings store + * @todo connect websocket here + * @todo listen to window's key events + */ + componentDidMount() { + this.focus() + this.settingsStore.addListener("recalculate", this.onSettingsChange) + } + + /** + * @todo remove settings store + * @todo disconnect websocket here + * @todo stop listening to window's key events + */ + componentWillUnmount() { + this.settingsStore.removeListener("recalculate", this.onSettingsChange) + } + + /** + * @todo move to actions + */ + onSettingsChange() { + this.setState({ settings: this.settingsStore.dict }) + } + + /** + * @todo use props + */ + getChildContext() { + return { + returnFocus: this.focus, + location: this.props.location + } + } + + /** + * @todo remove it + */ + focus() { + document.activeElement.blur() + window.getSelection().removeAllRanges() + ReactDOM.findDOMNode(this).focus() + } + + /** + * @todo move to actions + */ + onKeyDown(e) { + let name = null + + switch (e.keyCode) { + case Key.I: + name = "intercept" + break + case Key.L: + name = "search" + break + case Key.H: + name = "highlight" + break + default: + let main = this.refs.view + if (this.refs.view.getWrappedInstance) { + main = this.refs.view.getWrappedInstance() + } + if (main.onMainKeyDown) { + main.onMainKeyDown(e) + } + return // don't prevent default then + } + + if (name) { + const headerComponent = this.refs.header + headerComponent.setState({active: MainMenu}, function () { + headerComponent.refs.active.refs[name].select() + }) + } + + e.preventDefault() + } + + render() { + const { showEventLog, location, children } = this.props + const { settings } = this.state + const query = this.getQuery() + return ( +
+
+ {React.cloneElement( + children, + { ref: "view", location, query, updateLocation: this.updateLocation } + )} + {showEventLog && [ + , + + ]} +
+
+ ) + } +} + +export default connect( + state => ({ + showEventLog: state.eventLog.visible + }) +)(ProxyAppMain) diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js deleted file mode 100644 index 799b3f9f..00000000 --- a/web/src/js/components/flowtable-columns.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from "react" -import {RequestUtils, ResponseUtils} from "../flow/utils.js" -import {formatSize, formatTimeDelta} from "../utils.js" - - -export function TLSColumn({flow}) { - let ssl = (flow.request.scheme === "https") - let classes - if (ssl) { - classes = "col-tls col-tls-https" - } else { - classes = "col-tls col-tls-http" - } - return -} -TLSColumn.Title = ({className = "", ...props}) => -TLSColumn.sortKeyFun = flow => flow.request.scheme - - -export function IconColumn({flow}) { - let icon - if (flow.response) { - var contentType = ResponseUtils.getContentType(flow.response) - - //TODO: We should assign a type to the flow somewhere else. - if (flow.response.status_code === 304) { - icon = "resource-icon-not-modified" - } else if (300 <= flow.response.status_code && flow.response.status_code < 400) { - icon = "resource-icon-redirect" - } else if (contentType && contentType.indexOf("image") >= 0) { - icon = "resource-icon-image" - } else if (contentType && contentType.indexOf("javascript") >= 0) { - icon = "resource-icon-js" - } else if (contentType && contentType.indexOf("css") >= 0) { - icon = "resource-icon-css" - } else if (contentType && contentType.indexOf("html") >= 0) { - icon = "resource-icon-document" - } - } - if (!icon) { - icon = "resource-icon-plain" - } - - icon += " resource-icon" - return -
- -} -IconColumn.Title = ({className = "", ...props}) => - - -export function PathColumn({flow}) { - return - {flow.request.is_replay ? : null} - {flow.intercepted ? : null} - { RequestUtils.pretty_url(flow.request) } - -} -PathColumn.Title = ({className = "", ...props}) => - Path -PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request) - - -export function MethodColumn({flow}) { - return {flow.request.method} -} -MethodColumn.Title = ({className = "", ...props}) => - Method -MethodColumn.sortKeyFun = flow => flow.request.method - - -export function StatusColumn({flow}) { - let status - if (flow.response) { - status = flow.response.status_code - } else { - status = null - } - return {status} - -} -StatusColumn.Title = ({className = "", ...props}) => - Status -StatusColumn.sortKeyFun = flow => flow.response ? flow.response.status_code : undefined - - -export function SizeColumn({flow}) { - let total = flow.request.contentLength - if (flow.response) { - total += flow.response.contentLength || 0 - } - let size = formatSize(total) - return {size} - -} -SizeColumn.Title = ({className = "", ...props}) => - Size -SizeColumn.sortKeyFun = flow => { - let total = flow.request.contentLength - if (flow.response) { - total += flow.response.contentLength || 0 - } - return total -} - - -export function TimeColumn({flow}) { - let time - if (flow.response) { - time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)) - } else { - time = "..." - } - return {time} -} -TimeColumn.Title = ({className = "", ...props}) => - Time -TimeColumn.sortKeyFun = flow => flow.response.timestamp_end - flow.request.timestamp_start - - -var all_columns = [ - TLSColumn, - IconColumn, - PathColumn, - MethodColumn, - StatusColumn, - SizeColumn, - TimeColumn -] - -export default all_columns diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js deleted file mode 100644 index 5a0793ba..00000000 --- a/web/src/js/components/flowtable.js +++ /dev/null @@ -1,201 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import {connect} from 'react-redux' -import classNames from "classnames"; -import _ from "lodash"; -import shallowEqual from "shallowequal"; -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 = { - selectFlow: React.PropTypes.func.isRequired, - columns: React.PropTypes.array.isRequired, - flow: React.PropTypes.object.isRequired, - highlight: React.PropTypes.string, - selected: React.PropTypes.bool, -}; - -function FlowRow({flow, selected, highlight, columns, selectFlow}) { - - const className = classNames({ - "selected": selected, - "highlighted": highlight && parseFilter(highlight)(flow), - "intercepted": flow.intercepted, - "has-request": flow.request, - "has-response": flow.response, - }); - - return ( - selectFlow(flow)}> - {columns.map(Column => ( - - ))} - - ); -} - -const FlowRowContainer = connect( - (state, ownProps) => ({ - flow: state.flows.all.byId[ownProps.flowId], - highlight: state.flows.highlight, - selected: state.flows.selected.indexOf(ownProps.flowId) >= 0 - }) -)(FlowRow) - -function FlowTableHead({setSort, columns, sort}) { - const sortColumn = sort.sortColumn; - const sortType = sort.sortDesc ? "sort-desc" : "sort-asc"; - - return ( - - {columns.map(Column => ( - 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 => ({ - sort: state.flows.sort - }), - dispatch => ({ - setSort: (sort) => dispatch(setSort(sort)), - }) -)(FlowTableHead) - -class FlowTable extends React.Component { - - static propTypes = { - rowHeight: React.PropTypes.number, - }; - - static defaultProps = { - rowHeight: 32, - }; - - constructor(props, context) { - super(props, context); - - this.state = {vScroll: calcVScroll()}; - - this.onViewportUpdate = this.onViewportUpdate.bind(this); - } - - componentWillMount() { - window.addEventListener("resize", this.onViewportUpdate); - } - - componentWillUnmount() { - window.removeEventListener("resize", this.onViewportUpdate); - } - - componentWillReceiveProps(nextProps) { - if (nextProps.selected && nextProps.selected !== this.props.selected) { - window.setTimeout(() => this.scrollIntoView(nextProps.selected), 1) - } - } - - componentDidUpdate() { - this.onViewportUpdate(); - } - - onViewportUpdate() { - const viewport = ReactDOM.findDOMNode(this); - const viewportTop = viewport.scrollTop; - - const vScroll = calcVScroll({ - viewportTop, - viewportHeight: viewport.offsetHeight, - itemCount: this.props.flows.length, - rowHeight: this.props.rowHeight, - }); - - if (!shallowEqual(this.state.vScroll, vScroll) || - this.state.viewportTop !== viewportTop) { - this.setState({vScroll, viewportTop}); - } - } - - scrollIntoView(flow) { - const viewport = ReactDOM.findDOMNode(this); - const index = this.props.flows.indexOf(flow); - const rowHeight = this.props.rowHeight; - const head = ReactDOM.findDOMNode(this.refs.head); - - const headHeight = head ? head.offsetHeight : 0; - - const rowTop = (index * rowHeight) + headHeight; - const rowBottom = rowTop + rowHeight; - - const viewportTop = viewport.scrollTop; - const viewportHeight = viewport.offsetHeight; - - // Account for pinned thead - if (rowTop - headHeight < viewportTop) { - viewport.scrollTop = rowTop - headHeight; - } else if (rowBottom > viewportTop + viewportHeight) { - viewport.scrollTop = rowBottom - viewportHeight; - } - } - - render() { - const vScroll = this.state.vScroll; - const flows = this.props.flows.slice(vScroll.start, vScroll.end); - - const transform = `translate(0,${this.state.viewportTop}px)`; - - return ( -
- - - - - - - {flows.map(flow => ( - - ))} - - -
-
- ); - } -} - -FlowTable = AutoScroll(FlowTable) - - -const parseFilter = _.memoize(Filt.parse) - -const FlowTableContainer = connect( - state => ({ - flows: state.flows.view - }) -)(FlowTable) - -export default FlowTableContainer; diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index 6adde71c..f7a5538a 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -2,7 +2,7 @@ import makeList from "./utils/list" import Filt from "../filt/filt" import {updateViewFilter, updateViewList, updateViewSort} from "./utils/view" import {reverseString} from "../utils.js"; -import * as flow_table_columns from "../components/flowtable-columns.js"; +import * as columns from "../components/FlowTable/FlowColumns"; export const UPDATE_FLOWS = "UPDATE_FLOWS" export const SET_FILTER = "SET_FLOW_FILTER" @@ -32,7 +32,7 @@ function makeFilterFn(filter) { function makeSortFn(sort){ - let column = flow_table_columns[sort.sortColumn]; + let column = columns[sort.sortColumn]; if (!column) return; let sortKeyFun = column.sortKeyFun; @@ -108,4 +108,4 @@ export function selectFlow(flowId) { } -export {updateList as updateFlows, fetchList as fetchFlows} \ No newline at end of file +export {updateList as updateFlows, fetchList as fetchFlows} -- cgit v1.2.3