diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-06-02 17:46:18 -0700 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-06-02 17:46:18 -0700 |
commit | 698d38b28e43ce0685ce8ce8c119926af2083cbc (patch) | |
tree | 1859fc8ac63104a6b4f1fa0030764f81bf431872 /web/src/js/components | |
parent | 7a388560d7d3ef22be0bdef1811414ad18ff2484 (diff) | |
download | mitmproxy-698d38b28e43ce0685ce8ce8c119926af2083cbc.tar.gz mitmproxy-698d38b28e43ce0685ce8ce8c119926af2083cbc.tar.bz2 mitmproxy-698d38b28e43ce0685ce8ce8c119926af2083cbc.zip |
web: :hatching_chick:
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/common.js | 17 | ||||
-rw-r--r-- | web/src/js/components/eventlog.js | 146 | ||||
-rw-r--r-- | web/src/js/components/header.js | 19 | ||||
-rw-r--r-- | web/src/js/components/proxyapp.js | 15 |
4 files changed, 80 insertions, 117 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 87c34ffc..3496f1de 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -108,18 +108,17 @@ export var Splitter = React.createClass({ } }); -export const ToggleButton = (props) => - <div className="input-group toggle-btn"> - <div - className={"btn " + (props.checked ? "btn-primary" : "btn-default")} - onClick={props.onToggleChanged}> - <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}> {props.name}</span> - </div> +export const ToggleButton = ({checked, onToggle, text}) => + <div className={"btn btn-toggle " + (checked ? "btn-primary" : "btn-default")} onClick={onToggle}> + <i className={"fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o")}/> + + {text} </div>; ToggleButton.propTypes = { - name: React.PropTypes.string.isRequired, - onToggleChanged: React.PropTypes.func.isRequired + checked: React.PropTypes.bool.isRequired, + onToggle: React.PropTypes.func.isRequired, + text: React.PropTypes.string.isRequired }; export class ToggleInputButton extends React.Component { diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index 687c5265..a2e6a0c1 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,12 +1,12 @@ import React from "react" import ReactDOM from "react-dom" -import { connect } from 'react-redux' +import {connect} from 'react-redux' import shallowEqual from "shallowequal" -import {Query} from "../actions.js" -import {toggleEventLogFilter} from "../reduxActions" +import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog" import AutoScroll from "./helpers/AutoScroll"; import {calcVScroll} from "./helpers/VirtualScroll" import {StoreView} from "../store/view.js" +import {ToggleButton} from "./common"; class EventLogContents extends React.Component { @@ -27,7 +27,7 @@ class EventLogContents extends React.Component { ); this.heights = {}; - this.state = { entries: this.view.list, vScroll: calcVScroll() }; + this.state = {entries: this.view.list, vScroll: calcVScroll()}; this.onChange = this.onChange.bind(this); this.onViewportUpdate = this.onViewportUpdate.bind(this); @@ -71,12 +71,12 @@ class EventLogContents extends React.Component { }); if (!shallowEqual(this.state.vScroll, vScroll)) { - this.setState({ vScroll }); + this.setState({vScroll}); } } onChange() { - this.setState({ entries: this.view.list }); + this.setState({entries: this.view.list}); } setHeight(id, ref) { @@ -90,7 +90,7 @@ class EventLogContents extends React.Component { } getIcon(level) { - return { web: "html5", debug: "bug" }[level] || "info"; + return {web: "html5", debug: "bug"}[level] || "info"; } render() { @@ -112,87 +112,59 @@ class EventLogContents extends React.Component { } } -ToggleFilter.propTypes = { - name: React.PropTypes.string.isRequired, - toggleLevel: React.PropTypes.func.isRequired, - active: React.PropTypes.bool, -}; - -function ToggleFilter ({ name, active, toggleLevel }) { - let className = "label "; - if (active) { - className += "label-primary"; - } else { - className += "label-default"; - } - - function onClick(event) { - event.preventDefault(); - toggleLevel(); - } - - return ( - <a - href="#" - className={className} - onClick={onClick}> - {name} - </a> - ); -} - -const mapStateToProps = (state, ownProps) => { - return { - active: state.eventLog.visibilityFilter[ownProps.name] - } -}; +EventLogContents = AutoScroll(EventLogContents); + + +const EventLogContentsContainer = connect( + state => ({ + filter: state.eventLog.filter + }) +)(EventLogContents); + + +export const ToggleEventLog = connect( + state => ({ + checked: state.eventLog.visible + }), + dispatch => ({ + onToggle: () => dispatch(toggleEventLogVisibility()) + }) +)(ToggleButton); + + +const ToggleFilter = connect( + (state, ownProps) => ({ + checked: state.eventLog.filter[ownProps.text] + }), + (dispatch, ownProps) => ({ + onToggle: () => dispatch(toggleEventLogFilter(ownProps.text)) + }) +)(ToggleButton); + + +const EventLog = ({close}) => + <div className="eventlog"> + <div> + Eventlog + <div className="pull-right"> + <ToggleFilter text="debug"/> + <ToggleFilter text="info"/> + <ToggleFilter text="web"/> + <i onClick={close} className="fa fa-close"></i> + </div> + </div> + <EventLogContentsContainer/> + </div>; -const mapDispatchToProps = (dispatch, ownProps) => { - return { - toggleLevel: () => { - dispatch(toggleEventLogFilter(ownProps.name)) - } - } +EventLog.propTypes = { + close: React.PropTypes.func.isRequired }; -const ToggleEventLogFilter = connect( - mapStateToProps, - mapDispatchToProps -)(ToggleFilter); - - -const AutoScrollEventLog = AutoScroll(EventLogContents); - - -const VisibleAutoScrollEventLog = connect( - function mapStateToProps(state, ownProps) { - return {filter: state.eventLog.visibilityFilter} - })(AutoScrollEventLog); - - -var EventLog = React.createClass({ - close() { - var d = {}; - d[Query.SHOW_EVENTLOG] = undefined; - this.props.updateLocation(undefined, d); - }, - render() { - return ( - <div className="eventlog"> - <div> - Eventlog - <div className="pull-right"> - <ToggleEventLogFilter name="debug"/> - <ToggleEventLogFilter name="info"/> - <ToggleEventLogFilter name="web"/> - <i onClick={this.close} className="fa fa-close"></i> - </div> - - </div> - <VisibleAutoScrollEventLog/> - </div> - ); - } -}); +const EventLogContainer = connect( + undefined, + dispatch => ({ + close: () => dispatch(toggleEventLogVisibility()) + }) +)(EventLog); -export default EventLog; +export default EventLogContainer; diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 643659c3..76c4744a 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from 'react-dom'; import $ from "jquery"; +import {connect} from 'react-redux' import Filt from "../filt/filt.js"; import {Key} from "../utils.js"; @@ -8,6 +9,7 @@ import {ToggleInputButton, ToggleButton} from "./common.js"; import {SettingsActions, FlowActions} from "../actions.js"; import {Query} from "../actions.js"; import {SettingsState} from "./common.js"; +import {ToggleEventLog} from "./eventlog" var FilterDocs = React.createClass({ statics: { @@ -224,26 +226,11 @@ var ViewMenu = React.createClass({ title: "View", route: "flows" }, - toggleEventLog: function () { - var d = {}; - if (this.props.query[Query.SHOW_EVENTLOG]) { - d[Query.SHOW_EVENTLOG] = undefined; - } else { - d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short - } - - this.props.updateLocation(undefined, d); - console.log('toggleevent'); - }, render: function () { - var showEventLog = this.props.query[Query.SHOW_EVENTLOG]; return ( <div> <div className="menu-row"> - <ToggleButton - checked={showEventLog} - name = "Show Eventlog" - onToggleChanged={this.toggleEventLog}/> + <ToggleEventLog text="Show Event Log"/> </div> <div className="clearfix"></div> </div> diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 4c790d3d..99b64580 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -1,6 +1,8 @@ import React from "react"; import ReactDOM from "react-dom"; import _ from "lodash"; +import {connect} from 'react-redux' +import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router" import {Splitter} from "./common.js" import MainView from "./mainview.js"; @@ -8,7 +10,6 @@ import Footer from "./footer.js"; import {Header, MainMenu} from "./header.js"; import EventLog from "./eventlog.js" import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js"; -import {Query} from "../actions.js"; import {Key} from "../utils.js"; @@ -120,10 +121,10 @@ var ProxyAppMain = React.createClass({ render: function () { var query = this.getQuery(); var eventlog; - if (this.props.location.query[Query.SHOW_EVENTLOG]) { + if (this.props.showEventLog) { eventlog = [ <Splitter key="splitter" axis="y"/>, - <EventLog key="eventlog" updateLocation={this.updateLocation}/> + <EventLog key="eventlog"/> ]; } else { eventlog = null; @@ -142,13 +143,17 @@ var ProxyAppMain = React.createClass({ } }); +const AppContainer = connect( + state => ({ + showEventLog: state.eventLog.visible + }) +)(ProxyAppMain); -import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"; export var App = ( <ReactRouter history={hashHistory}> <Redirect from="/" to="/flows" /> - <Route path="/" component={ProxyAppMain}> + <Route path="/" component={AppContainer}> <Route path="flows" component={MainView}/> <Route path="flows/:flowId/:detailTab" component={MainView}/> <Route path="reports" component={Reports}/> |