From 2e6f56c4e7de1d375eb91e188c3697383b31638f Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sun, 2 Jul 2017 12:19:32 +0800 Subject: [web] Try toggle options in option modal. --- web/src/js/backends/websocket.js | 1 + web/src/js/components/Modal/OptionModal.jsx | 6 +++- web/src/js/components/Modal/OptionTypes.jsx | 48 +++++++++++++++++++++++++++++ web/src/js/ducks/index.js | 2 ++ 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 web/src/js/components/Modal/OptionTypes.jsx (limited to 'web/src') diff --git a/web/src/js/backends/websocket.js b/web/src/js/backends/websocket.js index 01094ac4..d7e13bb2 100644 --- a/web/src/js/backends/websocket.js +++ b/web/src/js/backends/websocket.js @@ -27,6 +27,7 @@ export default class WebsocketBackend { this.fetchData("settings") this.fetchData("flows") this.fetchData("events") + this.fetchData("options") this.store.dispatch(connectionActions.startFetching()) } diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index 500495c4..c9a56d09 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -1,6 +1,8 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import * as modalAction from '../../ducks/ui/modal' +import { SettingsToggle } from '../Header/MenuToggle' +import { OptionsToggle } from './OptionTypes' class PureOptionModal extends Component { @@ -26,7 +28,9 @@ class PureOptionModal extends Component {
- ... + HTTP/2.0 + Anticache + Anticomp
diff --git a/web/src/js/components/Modal/OptionTypes.jsx b/web/src/js/components/Modal/OptionTypes.jsx new file mode 100644 index 00000000..8a9325e1 --- /dev/null +++ b/web/src/js/components/Modal/OptionTypes.jsx @@ -0,0 +1,48 @@ +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { update as updateOptions } from '../../ducks/options' + +MenuToggle.propTypes = { + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, +} + +export function MenuToggle({ value, onChange, children }) { + return ( +
+ +
+ ) +} + +OptionsToggle.propTypes = { + option: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +} + +export function OptionsToggle({ option, children, options, updateOptions }) { + return ( + {console.log(options[option]); + updateOptions({ [option]: !(options[option].value)}) }} + > + {children} + + ) +} + +OptionsToggle = connect( + state => ({ + options: state.options, + }), + { + updateOptions, + } +)(OptionsToggle) diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js index 0f2426ec..be2f2885 100644 --- a/web/src/js/ducks/index.js +++ b/web/src/js/ducks/index.js @@ -4,6 +4,7 @@ import flows from "./flows" import settings from "./settings" import ui from "./ui/index" import connection from "./connection" +import options from './options' export default combineReducers({ eventLog, @@ -11,4 +12,5 @@ export default combineReducers({ settings, connection, ui, + options, }) -- cgit v1.2.3 From aa01a62df7ce015ba4bf3c5ba9f3074616530496 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Wed, 5 Jul 2017 08:40:21 +0800 Subject: [web] Add keys argument for dump_dict in optmanager. --- web/src/js/components/Modal/OptionMaster.jsx | 138 +++++++++++++++++++++++++++ web/src/js/components/Modal/OptionTypes.jsx | 48 ---------- 2 files changed, 138 insertions(+), 48 deletions(-) create mode 100644 web/src/js/components/Modal/OptionMaster.jsx delete mode 100644 web/src/js/components/Modal/OptionTypes.jsx (limited to 'web/src') diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx new file mode 100644 index 00000000..e16319fb --- /dev/null +++ b/web/src/js/components/Modal/OptionMaster.jsx @@ -0,0 +1,138 @@ +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { update as updateOptions } from '../../ducks/options' + +PureBooleanOption.PropTypes = { + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, +} + +function PureBooleanOption({ value, onChange, name, help}) { + return ( +
+ +
+ ) +} + +PureStringOption.PropTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} + +function PureStringOption( { value, onChange, name, help }) { + let onKeyDown = (e) => {e.stopPropagation()} + return ( +
+ +
+ ) +} + +PureNumberOption.PropTypes = { + value: PropTypes.number.isRequired, + onChange: PropTypes.func.isRequired, +} + +function PureNumberOption( {value, onChange, name, help }) { + let onKeyDown = (e) => {e.stopPropagation()} + return ( +
+ +
+ ) +} + +PureChoicesOption.PropTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} + +function PureChoicesOption( { value, onChange, name, help, choices }) { + return ( +
+ +
+ ) +} + +const OptionTypes = { + bool: PureBooleanOption, + str: PureStringOption, + int: PureNumberOption, + "optional str": PureStringOption, + "sequence of str": PureStringOption, +} + +Wrapper.displayName = 'OptionWrapper' + + +function Wrapper({option, options, updateOptions, ...props}) { + let optionObj = options[option], + WrappedComponent = null + if (optionObj.choices) { + WrappedComponent = PureChoicesOption + } else { + WrappedComponent = OptionTypes[optionObj.type] + } + + let onChange = (e) => { + switch (optionObj.type) { + case 'bool' : + updateOptions({[option]: !optionObj.value}) + break + case 'int': + updateOptions({[option]: parseInt(e.target.value)}) + break + default: + updateOptions({[option]: e.target.value}) + } + } + return +} + +export default connect( + state => ({ + options: state.options, + }), + { + updateOptions, + } +)(Wrapper) diff --git a/web/src/js/components/Modal/OptionTypes.jsx b/web/src/js/components/Modal/OptionTypes.jsx deleted file mode 100644 index 8a9325e1..00000000 --- a/web/src/js/components/Modal/OptionTypes.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import PropTypes from 'prop-types' -import { connect } from 'react-redux' -import { update as updateOptions } from '../../ducks/options' - -MenuToggle.propTypes = { - value: PropTypes.bool.isRequired, - onChange: PropTypes.func.isRequired, - children: PropTypes.node.isRequired, -} - -export function MenuToggle({ value, onChange, children }) { - return ( -
- -
- ) -} - -OptionsToggle.propTypes = { - option: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, -} - -export function OptionsToggle({ option, children, options, updateOptions }) { - return ( - {console.log(options[option]); - updateOptions({ [option]: !(options[option].value)}) }} - > - {children} - - ) -} - -OptionsToggle = connect( - state => ({ - options: state.options, - }), - { - updateOptions, - } -)(OptionsToggle) -- cgit v1.2.3 From d889892ba570297047eb4ada342ddf5584b0e43d Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Wed, 5 Jul 2017 08:45:31 +0800 Subject: [web] List all options in option modal. --- web/src/js/components/Modal/OptionModal.jsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index c9a56d09..582ac55f 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -1,18 +1,17 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import * as modalAction from '../../ducks/ui/modal' -import { SettingsToggle } from '../Header/MenuToggle' -import { OptionsToggle } from './OptionTypes' +import Option from './OptionMaster' class PureOptionModal extends Component { constructor(props, context) { super(props, context) - this.state = { title: 'Options', } + this.state = { title: 'Options' } } render() { - const { hideModal } = this.props + const { hideModal, options } = this.props const { title } = this.state return (
@@ -28,9 +27,11 @@ class PureOptionModal extends Component {
- HTTP/2.0 - Anticache - Anticomp + { + Object.keys(options).sort().map((key) => ( +
@@ -43,7 +44,7 @@ class PureOptionModal extends Component { export default connect( state => ({ - + options: state.options }), { hideModal: modalAction.hideModal } )(PureOptionModal) -- cgit v1.2.3 From e8f3b740c944401a01d3c57e8d1c6051e92b8236 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Wed, 5 Jul 2017 08:46:16 +0800 Subject: [web] Update css for modal. --- web/src/css/app.less | 1 + web/src/css/modal.less | 10 ++++++++++ 2 files changed, 11 insertions(+) (limited to 'web/src') diff --git a/web/src/css/app.less b/web/src/css/app.less index 353e412a..b9b5b310 100644 --- a/web/src/css/app.less +++ b/web/src/css/app.less @@ -19,3 +19,4 @@ html { @import (less) "footer.less"; @import (less) "codemirror.less"; @import (less) "contentview.less"; +@import (less) "modal.less"; diff --git a/web/src/css/modal.less b/web/src/css/modal.less index b08e309a..8d578f03 100644 --- a/web/src/css/modal.less +++ b/web/src/css/modal.less @@ -1,3 +1,13 @@ .modal-visible { display: block; } + + +.modal-dialog { + overflow-y: initial !important; +} + +.modal-body { + max-height: calc(100vh - 20px); + overflow-y: auto; +} -- cgit v1.2.3 From 7516f706b41de0c10c2bf9b88278afb6e3edcd4a Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Wed, 5 Jul 2017 18:55:56 +0800 Subject: [web] Update Option Modal UI and its tests. --- .../Modal/__snapshots__/ModalSpec.js.snap | 79 +++++++++++++++++++++- web/src/js/__tests__/ducks/tutils.js | 30 ++++++++ web/src/js/components/Modal/OptionMaster.jsx | 65 +++++++----------- web/src/js/components/Modal/OptionModal.jsx | 20 ++++-- 4 files changed, 147 insertions(+), 47 deletions(-) (limited to 'web/src') diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap index 4fe163d1..af587ae4 100644 --- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap +++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap @@ -46,7 +46,84 @@ exports[`Modal Component should render correctly 2`] = `
- ... +
+ +
+
+ +
+
+ +
+
+ +
-
) } @@ -30,7 +26,6 @@ PureStringOption.PropTypes = { function PureStringOption( { value, onChange, name, help }) { let onKeyDown = (e) => {e.stopPropagation()} return ( -
-
) } @@ -52,7 +46,6 @@ PureNumberOption.PropTypes = { function PureNumberOption( {value, onChange, name, help }) { let onKeyDown = (e) => {e.stopPropagation()} return ( -
-
) } @@ -73,16 +65,14 @@ PureChoicesOption.PropTypes = { function PureChoicesOption( { value, onChange, name, help, choices }) { return ( -
-
) } @@ -94,45 +84,36 @@ const OptionTypes = { "sequence of str": PureStringOption, } -Wrapper.displayName = 'OptionWrapper' - - -function Wrapper({option, options, updateOptions, ...props}) { - let optionObj = options[option], - WrappedComponent = null - if (optionObj.choices) { +export default function OptionMaster({option, name, updateOptions, ...props}) { + let WrappedComponent = null + if (option.choices) { WrappedComponent = PureChoicesOption } else { - WrappedComponent = OptionTypes[optionObj.type] + WrappedComponent = OptionTypes[option.type] } let onChange = (e) => { - switch (optionObj.type) { + switch (option.type) { case 'bool' : - updateOptions({[option]: !optionObj.value}) + updateOptions({[name]: !option.value}) break case 'int': - updateOptions({[option]: parseInt(e.target.value)}) + updateOptions({[name]: parseInt(e.target.value)}) break default: - updateOptions({[option]: e.target.value}) + updateOptions({[name]: e.target.value}) } } - return + return ( +
+ +
+ ) } - -export default connect( - state => ({ - options: state.options, - }), - { - updateOptions, - } -)(Wrapper) diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index 582ac55f..ef3a224a 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import * as modalAction from '../../ducks/ui/modal' +import { update as updateOptions } from '../../ducks/options' import Option from './OptionMaster' class PureOptionModal extends Component { @@ -28,9 +29,17 @@ class PureOptionModal extends Component {
{ - Object.keys(options).sort().map((key) => ( -
@@ -46,5 +55,8 @@ export default connect( state => ({ options: state.options }), - { hideModal: modalAction.hideModal } + { + hideModal: modalAction.hideModal, + updateOptions: updateOptions, + } )(PureOptionModal) -- cgit v1.2.3