aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js/components')
-rw-r--r--web/src/js/components/Header/FlowMenu.jsx62
-rw-r--r--web/src/js/components/Header/MenuToggle.jsx2
-rw-r--r--web/src/js/components/Header/OptionMenu.jsx92
-rw-r--r--web/src/js/components/common/Button.jsx16
4 files changed, 109 insertions, 63 deletions
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e0c59afe..420cb054 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -1,13 +1,13 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import Button from '../common/Button'
-import { MessageUtils } from '../../flow/utils.js'
-import * as flowsActions from '../../ducks/flows'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import Button from "../common/Button"
+import { MessageUtils } from "../../flow/utils.js"
+import * as flowsActions from "../../ducks/flows"
FlowMenu.title = 'Flow'
FlowMenu.propTypes = {
- flow: PropTypes.object.isRequired,
+ flow: PropTypes.object,
acceptFlow: PropTypes.func.isRequired,
replayFlow: PropTypes.func.isRequired,
duplicateFlow: PropTypes.func.isRequired,
@@ -16,14 +16,52 @@ FlowMenu.propTypes = {
}
function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+ if (!flow)
+ return <div/>
return (
<div>
- <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
- <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
- <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
- <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
- <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
- <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
+ <div className="menu-group">
+ <div className="menu-content">
+ <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+ Replay
+ </Button>
+ <Button title="[D]uplicate flow" icon="fa-copy text-info"
+ onClick={() => duplicateFlow(flow)}>
+ Duplicate
+ </Button>
+ <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]"
+ icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
+ Revert
+ </Button>
+ <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+ Delete
+ </Button>
+ </div>
+ <div className="menu-legend">Flow Modification</div>
+ </div>
+ <div className="menu-group">
+ <div className="menu-content">
+ <Button title="download" icon="fa-download"
+ onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}>
+ Download
+ </Button>
+ </div>
+ <div className="menu-legend">Export</div>
+ </div>
+ <div className="menu-group">
+ <div className="menu-content">
+ <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
+ icon="fa-play text-success" onClick={() => acceptFlow(flow)}
+ >
+ Resume
+ </Button>
+
+ </div>
+ <div className="menu-legend">Interception</div>
+ </div>
+
+
+
</div>
)
}
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
index 726db7bd..8977f3b9 100644
--- a/web/src/js/components/Header/MenuToggle.jsx
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -11,7 +11,7 @@ MenuToggle.propTypes = {
export function MenuToggle({ value, onChange, children }) {
return (
- <div className="entry">
+ <div className="menu-entry">
<label>
<input type="checkbox"
value={value}
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 4fb5dc1f..d6a8dfc2 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,7 +1,7 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import {SettingsToggle, EventlogToggle} from './MenuToggle'
-import DocsLink from '../common/DocsLink'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import { SettingsToggle, EventlogToggle } from "./MenuToggle"
+import DocsLink from "../common/DocsLink"
OptionMenu.title = 'Options'
@@ -9,51 +9,57 @@ export default function OptionMenu() {
return (
<div>
<div className="menu-group">
- <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
- <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
- <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
- <div className="description">Protocol Support</div>
+ <div className="menu-content">
+ <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
+ <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
+ <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
+ </div>
+ <div className="menu-legend">Protocol Support</div>
</div>
<div className="menu-group">
- <SettingsToggle setting="anticache">
- Disable Caching <DocsLink resource="features/anticache.html"/>
- </SettingsToggle>
- <SettingsToggle setting="anticomp">
- Disable Compression <i className="fa fa-question-circle" title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
- </SettingsToggle>
- <div className="entry"/>
- <div className="description">HTTP Options</div>
+ <div className="menu-content">
+ <SettingsToggle setting="anticache">
+ Disable Caching <DocsLink resource="features/anticache.html"/>
+ </SettingsToggle>
+ <SettingsToggle setting="anticomp">
+ Disable Compression <i className="fa fa-question-circle"
+ title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
+ </SettingsToggle>
+ </div>
+ <div className="menu-legend">HTTP Options</div>
</div>
<div className="menu-group">
- <SettingsToggle setting="showhost">
- Use Host Header <i className="fa fa-question-circle" title="Use the Host header to construct URLs for display."></i>
- </SettingsToggle>
- <EventlogToggle/>
- <div className="entry"/>
- <div className="description">View Options</div>
+ <div className="menu-content">
+ <SettingsToggle setting="showhost">
+ Use Host Header <i className="fa fa-question-circle"
+ title="Use the Host header to construct URLs for display."></i>
+ </SettingsToggle>
+ <EventlogToggle/>
+ </div>
+ <div className="menu-legend">View Options</div>
</div>
{ /*
- <ToggleButton text="no_upstream_cert"
- checked={settings.no_upstream_cert}
- onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
- />
- <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
- checked={!!settings.stickyauth}
- txt={settings.stickyauth}
- onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
- />
- <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
- checked={!!settings.stickycookie}
- txt={settings.stickycookie}
- onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
- />
- <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
- checked={!!settings.stream_large_bodies}
- txt={settings.stream_large_bodies}
- inputType="number"
- onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
- />
- */}
+ <ToggleButton text="no_upstream_cert"
+ checked={settings.no_upstream_cert}
+ onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
+ />
+ <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+ checked={!!settings.stickyauth}
+ txt={settings.stickyauth}
+ onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
+ />
+ <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+ checked={!!settings.stickycookie}
+ txt={settings.stickycookie}
+ onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
+ />
+ <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
+ checked={!!settings.stream_large_bodies}
+ txt={settings.stream_large_bodies}
+ inputType="number"
+ onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
+ />
+ */}
</div>
)
}
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx
index bfbb455d..69471f25 100644
--- a/web/src/js/components/common/Button.jsx
+++ b/web/src/js/components/common/Button.jsx
@@ -1,19 +1,21 @@
-import React, { PropTypes } from 'react'
-import classnames from 'classnames'
+import React, { PropTypes } from "react"
+import classnames from "classnames"
Button.propTypes = {
onClick: PropTypes.func.isRequired,
- text: PropTypes.string,
- icon: PropTypes.string
+ children: PropTypes.node.isRequired,
+ icon: PropTypes.string,
+ title: PropTypes.string,
}
-export default function Button({ onClick, text, icon, disabled, className }) {
+export default function Button({ onClick, children, icon, disabled, className, title }) {
return (
<div className={classnames(className, 'btn btn-default')}
onClick={onClick}
- disabled={disabled}>
+ disabled={disabled}
+ title={title}>
{icon && (<i className={"fa fa-fw " + icon}/> )}
- {text && text}
+ {children}
</div>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-03 15:47:55 +0000