aboutsummaryrefslogtreecommitdiffstats
path: root/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/src')
-rw-r--r--web/src/js/actions.js23
-rw-r--r--web/src/js/components/Footer.jsx9
-rw-r--r--web/src/js/components/Header.jsx9
-rw-r--r--web/src/js/components/Header/MainMenu.jsx39
-rw-r--r--web/src/js/components/Header/OptionMenu.jsx33
-rw-r--r--web/src/js/components/ProxyApp.jsx7
-rw-r--r--web/src/js/ducks/settings.js20
7 files changed, 65 insertions, 75 deletions
diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 588245ae..bb1d0dd6 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -39,27 +39,6 @@ export var ConnectionActions = {
}
};
-export var SettingsActions = {
- update: function (settings) {
-
- $.ajax({
- type: "PUT",
- url: "/settings",
- contentType: 'application/json',
- data: JSON.stringify(settings)
- });
-
- /*
- //Facebook Flux: We do an optimistic update on the client already.
- AppDispatcher.dispatchViewAction({
- type: ActionTypes.SETTINGS_STORE,
- cmd: StoreCmds.UPDATE,
- data: settings
- });
- */
- }
-};
-
export var FlowActions = {
accept: function (flow) {
$.post("/flows/" + flow.id + "/accept");
@@ -119,4 +98,4 @@ export var Query = {
SEARCH: "s",
HIGHLIGHT: "h",
SHOW_EVENTLOG: "e"
-}; \ No newline at end of file
+};
diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 1f6de2d7..82d6d8a1 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -1,11 +1,12 @@
import React from 'react'
+import { connect } from 'react-redux'
import { formatSize } from '../utils.js'
Footer.propTypes = {
settings: React.PropTypes.object.isRequired,
}
-export default function Footer({ settings }) {
+function Footer({ settings }) {
return (
<footer>
{settings.mode && settings.mode != "regular" && (
@@ -44,3 +45,9 @@ export default function Footer({ settings }) {
</footer>
)
}
+
+export default connect(
+ state => ({
+ settings: state.settings.settings,
+ })
+)(Footer)
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index 93ca5154..ab25eb41 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -12,10 +12,6 @@ import {setActiveMenu} from '../ducks/ui.js'
class Header extends Component {
static entries = [MainMenu, ViewMenu, OptionMenu]
- static propTypes = {
- settings: PropTypes.object.isRequired,
- }
-
handleClick(active, e) {
e.preventDefault()
this.props.setActiveMenu(active.title)
@@ -24,7 +20,7 @@ class Header extends Component {
}
render() {
- const { settings, updateLocation, query, selectedFlow, activeMenu} = this.props
+ const { updateLocation, query, selectedFlow, activeMenu} = this.props
let entries = [...Header.entries]
if(selectedFlow)
@@ -47,10 +43,9 @@ class Header extends Component {
</nav>
<div className="menu">
<Active
- settings={settings}
updateLocation={updateLocation}
query={query}
- />
+ />
</div>
</header>
)
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 7b0b542c..a466a980 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -1,8 +1,8 @@
import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
import FilterInput from './FilterInput'
import { Query } from '../../actions.js'
-import {setInterceptPattern} from "../../ducks/settings"
-import { connect } from 'react-redux'
+import { updateSettings } from '../../ducks/settings'
class MainMenu extends Component {
@@ -10,14 +10,16 @@ class MainMenu extends Component {
static route = 'flows'
static propTypes = {
- settings: React.PropTypes.object.isRequired,
+ query: PropTypes.object.isRequired,
+ settings: PropTypes.object.isRequired,
+ updateLocation: PropTypes.func.isRequired,
+ onSettingsChange: PropTypes.func.isRequired,
}
constructor(props, context) {
super(props, context)
this.onSearchChange = this.onSearchChange.bind(this)
this.onHighlightChange = this.onHighlightChange.bind(this)
- this.onInterceptChange = this.onInterceptChange.bind(this)
}
onSearchChange(val) {
@@ -28,16 +30,8 @@ class MainMenu extends Component {
this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val })
}
- onInterceptChange(val) {
- this.props.setInterceptPattern(val);
- }
-
render() {
- const { query, settings } = this.props
-
- const search = query[Query.SEARCH] || ''
- const highlight = query[Query.HIGHLIGHT] || ''
- const intercept = settings.intercept || ''
+ const { query, settings, onSettingsChange } = this.props
return (
<div>
@@ -47,7 +41,7 @@ class MainMenu extends Component {
placeholder="Search"
type="search"
color="black"
- value={search}
+ value={query[Query.SEARCH] || ''}
onChange={this.onSearchChange}
/>
<FilterInput
@@ -55,7 +49,7 @@ class MainMenu extends Component {
placeholder="Highlight"
type="tag"
color="hsl(48, 100%, 50%)"
- value={highlight}
+ value={query[Query.HIGHLIGHT] || ''}
onChange={this.onHighlightChange}
/>
<FilterInput
@@ -63,8 +57,8 @@ class MainMenu extends Component {
placeholder="Intercept"
type="pause"
color="hsl(208, 56%, 53%)"
- value={intercept}
- onChange={this.onInterceptChange}
+ value={settings.intercept || ''}
+ onChange={intercept => onSettingsChange({ intercept })}
/>
</div>
<div className="clearfix"></div>
@@ -73,6 +67,11 @@ class MainMenu extends Component {
}
}
-export default connect(undefined, {
- setInterceptPattern
-})(MainMenu);
+export default connect(
+ state => ({
+ settings: state.settings.settings,
+ }),
+ {
+ onSettingsChange: updateSettings,
+ }
+)(MainMenu);
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 44f309fd..f871ec92 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,61 +1,72 @@
import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
import ToggleButton from '../common/ToggleButton'
import ToggleInputButton from '../common/ToggleInputButton'
-import { SettingsActions } from '../../actions.js'
+import { updateSettings } from '../../ducks/settings'
OptionMenu.title = 'Options'
OptionMenu.propTypes = {
settings: PropTypes.object.isRequired,
+ onSettingsChange: PropTypes.func.isRequired,
}
-export default function OptionMenu({ settings }) {
+function OptionMenu({ settings, onSettingsChange }) {
// @todo use settings.map
return (
<div>
<div className="menu-row">
<ToggleButton text="showhost"
checked={settings.showhost}
- onToggle={() => SettingsActions.update({ showhost: !settings.showhost })}
+ onToggle={() => onSettingsChange({ showhost: !settings.showhost })}
/>
<ToggleButton text="no_upstream_cert"
checked={settings.no_upstream_cert}
- onToggle={() => SettingsActions.update({ no_upstream_cert: !settings.no_upstream_cert })}
+ onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })}
/>
<ToggleButton text="rawtcp"
checked={settings.rawtcp}
- onToggle={() => SettingsActions.update({ rawtcp: !settings.rawtcp })}
+ onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })}
/>
<ToggleButton text="http2"
checked={settings.http2}
- onToggle={() => SettingsActions.update({ http2: !settings.http2 })}
+ onToggle={() => onSettingsChange({ http2: !settings.http2 })}
/>
<ToggleButton text="anticache"
checked={settings.anticache}
- onToggle={() => SettingsActions.update({ anticache: !settings.anticache })}
+ onToggle={() => onSettingsChange({ anticache: !settings.anticache })}
/>
<ToggleButton text="anticomp"
checked={settings.anticomp}
- onToggle={() => SettingsActions.update({ anticomp: !settings.anticomp })}
+ onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })}
/>
<ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
checked={!!settings.stickyauth}
txt={settings.stickyauth || ''}
- onToggleChanged={txt => SettingsActions.update({ stickyauth: !settings.stickyauth ? txt : null })}
+ onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })}
/>
<ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
checked={!!settings.stickycookie}
txt={settings.stickycookie || ''}
- onToggleChanged={txt => SettingsActions.update({ stickycookie: !settings.stickycookie ? txt : null })}
+ onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })}
/>
<ToggleInputButton name="stream" placeholder="stream..."
checked={!!settings.stream}
txt={settings.stream || ''}
inputType="number"
- onToggleChanged={txt => SettingsActions.update({ stream: !settings.stream ? txt : null })}
+ onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })}
/>
</div>
<div className="clearfix"/>
</div>
)
}
+
+export default connect(
+ state => ({
+ settings: state.settings.settings,
+ }),
+ {
+ onSettingsChange: updateSettings,
+ }
+)(OptionMenu)
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 39cadff5..5d795b57 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -111,11 +111,11 @@ class ProxyAppMain extends Component {
}
render() {
- const { showEventLog, location, children, settings } = this.props
+ const { showEventLog, location, children } = this.props
const query = this.getQuery()
return (
<div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
- <Header ref="header" settings={settings} updateLocation={this.updateLocation} query={query} />
+ <Header ref="header" updateLocation={this.updateLocation} query={query} />
{React.cloneElement(
children,
{ ref: 'view', location, query, updateLocation: this.updateLocation }
@@ -123,7 +123,7 @@ class ProxyAppMain extends Component {
{showEventLog && (
<EventLog key="eventlog"/>
)}
- <Footer settings={settings}/>
+ <Footer />
</div>
)
}
@@ -132,6 +132,5 @@ class ProxyAppMain extends Component {
export default connect(
state => ({
showEventLog: state.eventLog.visible,
- settings: state.settings.settings,
})
)(ProxyAppMain)
diff --git a/web/src/js/ducks/settings.js b/web/src/js/ducks/settings.js
index 73c62120..3e6c8366 100644
--- a/web/src/js/ducks/settings.js
+++ b/web/src/js/ducks/settings.js
@@ -1,8 +1,8 @@
-import {fetchApi} from "../utils";
+import {fetchApi} from '../utils';
-export const REQUEST_SETTINGS = "REQUEST_SETTINGS"
-export const RECEIVE_SETTINGS = "RECEIVE_SETTINGS"
-export const UPDATE_SETTINGS = "UPDATE_SETTINGS"
+export const REQUEST_SETTINGS = 'REQUEST_SETTINGS'
+export const RECEIVE_SETTINGS = 'RECEIVE_SETTINGS'
+export const UPDATE_SETTINGS = 'UPDATE_SETTINGS'
const defaultState = {
settings: {},
@@ -49,20 +49,20 @@ export default function reducer(state = defaultState, action) {
export function updateSettings(event) {
/* This action creator takes all WebSocket events */
- if (event.cmd === "update") {
+ if (event.cmd === 'update') {
return {
type: UPDATE_SETTINGS,
settings: event.data
}
}
- console.error("unknown settings update", event)
+ console.error('unknown settings update', event)
}
export function fetchSettings() {
return dispatch => {
dispatch({type: REQUEST_SETTINGS})
- return fetchApi("/settings")
+ return fetchApi('/settings')
.then(response => response.json())
.then(json =>
dispatch({type: RECEIVE_SETTINGS, settings: json.data})
@@ -71,7 +71,7 @@ export function fetchSettings() {
}
}
-export function setInterceptPattern(intercept) {
- return dispatch =>
- fetchApi.put("/settings", {intercept})
+export function updateSettings(settings) {
+ fetchApi.put('/settings', settings)
+ return { type: SET_INTERCEPT }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-19 13:54:35 +0000