aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/src/js/components/Header.js35
-rw-r--r--web/src/js/components/Header/FlowMenu.jsx32
-rw-r--r--web/src/js/components/MainView.jsx5
-rw-r--r--web/src/js/components/common.js12
-rw-r--r--web/src/js/ducks/index.js4
-rw-r--r--web/src/js/ducks/view.js50
6 files changed, 124 insertions, 14 deletions
diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 7134f7d9..07ae3a9f 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -1,39 +1,39 @@
import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
import classnames from 'classnames'
import { toggleEventLogVisibility } from '../ducks/eventLog'
import MainMenu from './Header/MainMenu'
import ViewMenu from './Header/ViewMenu'
import OptionMenu from './Header/OptionMenu'
import FileMenu from './Header/FileMenu'
+import FlowMenu from './Header/FlowMenu'
+import {setActiveMenu} from '../ducks/view'
-export default class Header extends Component {
+class Header extends Component {
- static entries = [MainMenu, ViewMenu, OptionMenu]
+ static entries = [MainMenu, ViewMenu, OptionMenu, FlowMenu]
static propTypes = {
settings: PropTypes.object.isRequired,
}
- constructor(props, context) {
- super(props, context)
- this.state = { active: Header.entries[0] }
- }
-
handleClick(active, e) {
e.preventDefault()
- this.props.updateLocation(active.route)
- this.setState({ active })
+ this.props.setActiveMenu(active.title)
+ // this.props.updateLocation(active.route)
+ // this.setState({ active })
}
render() {
- const { active: Active } = this.state
- const { settings, updateLocation, query } = this.props
-
+ const { settings, updateLocation, query, selectedFlow, active_menu} = this.props
+ const Active = _.find(Header.entries, (e) => e.title == active_menu);
+ const entries = selectedFlow ? Header.entries : Header.entries.filter((h) => h != FlowMenu)
return (
<header>
<nav className="nav-tabs nav-tabs-lg">
<FileMenu/>
- {Header.entries.map(Entry => (
+ {entries.map(Entry => (
<a key={Entry.title}
href="#"
className={classnames({ active: Entry === Active })}
@@ -54,3 +54,12 @@ export default class Header extends Component {
)
}
}
+export default connect(
+ (state) => ({
+ selectedFlow: state.flows.selected[0],
+ active_menu: state.view.active_menu
+ }),
+ dispatch => bindActionCreators({
+ setActiveMenu,
+ }, dispatch)
+)(Header)
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
new file mode 100644
index 00000000..4a43f40f
--- /dev/null
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react'
+import { Button } from '../common.js'
+import {FlowActions} from "../../actions.js";
+import {MessageUtils} from "../../flow/utils.js";
+import { connect } from 'react-redux'
+
+FlowMenu.title = "Flow"
+
+FlowMenu.propTypes = {
+ flow: PropTypes.object.isRequired,
+}
+
+function FlowMenu({ flow }) {
+
+ return (
+ <div>
+ <div className="menu-row">
+ <Button disabled title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} />
+ <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} />
+ <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)}/>
+ <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
+ </div>
+ <div className="clearfix"/>
+ </div>
+ )
+}
+
+export default connect(
+ state => ({
+ flow: state.flows.all.byId[state.flows.selected[0]]
+ })
+)(FlowMenu)
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index dbea76e5..24013ca8 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -9,6 +9,7 @@ import { Splitter } from './common.js'
import FlowTable from './FlowTable'
import FlowView from './flowview/index.js'
import { selectFlow, setFilter, setHighlight } from '../ducks/flows'
+import { setDefaultMenu, setFlowMenu } from '../ducks/view'
class MainView extends Component {
@@ -39,8 +40,10 @@ class MainView extends Component {
*/
selectFlow(flow) {
if (flow) {
+ this.props.setFlowMenu()
this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
} else {
+ this.props.setDefaultMenu()
this.props.updateLocation('/flows')
}
}
@@ -192,6 +195,8 @@ export default connect(
}),
dispatch => bindActionCreators({
selectFlow,
+ setDefaultMenu,
+ setFlowMenu,
setFilter,
setHighlight,
}, dispatch),
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 3496f1de..1497e15d 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -121,6 +121,18 @@ ToggleButton.propTypes = {
text: React.PropTypes.string.isRequired
};
+export const Button = ({onClick, text, icon}) =>
+ <div className={"btn btn-default"} onClick={onClick}>
+ <i className={"fa fa-fw " + icon}/>
+ &nbsp;
+ {text}
+ </div>;
+
+Button.propTypes = {
+ onClick: React.PropTypes.func.isRequired,
+ text: React.PropTypes.string.isRequired
+};
+
export class ToggleInputButton extends React.Component {
constructor(props) {
super(props);
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
index 6c521a70..2638272d 100644
--- a/web/src/js/ducks/index.js
+++ b/web/src/js/ducks/index.js
@@ -2,11 +2,13 @@ import {combineReducers} from 'redux'
import eventLog from './eventLog'
import websocket from './websocket'
import flows from './flows'
+import view from './view'
const rootReducer = combineReducers({
eventLog,
websocket,
flows,
+ view
})
-export default rootReducer \ No newline at end of file
+export default rootReducer
diff --git a/web/src/js/ducks/view.js b/web/src/js/ducks/view.js
new file mode 100644
index 00000000..8a4c25a1
--- /dev/null
+++ b/web/src/js/ducks/view.js
@@ -0,0 +1,50 @@
+const ACTIVE_MENU = 'ACTIVE_MENU'
+const DEFAULT_MENU = 'DEFAULT_MENU'
+const FLOW_MENU = 'FLOW_MENU'
+
+
+const defaultState = {
+ active_menu: 'Start',
+}
+export default function reducer(state = defaultState, action) {
+ switch (action.type) {
+ case ACTIVE_MENU:
+ return {
+ ...state,
+ active_menu: action.active_menu
+ }
+ case DEFAULT_MENU:
+ return {
+ ...state,
+ active_menu: defaultState.active_menu
+ }
+ case FLOW_MENU:
+ return {
+ ... state,
+ active_menu: "Flow"
+ }
+
+
+ default:
+ return state
+ }
+}
+
+export function setDefaultMenu(active_menu) {
+ return {
+ type: DEFAULT_MENU,
+ }
+}
+export function setFlowMenu() {
+ return {
+ type: FLOW_MENU,
+ }
+}
+
+export function setActiveMenu(active_menu) {
+ return {
+ type: ACTIVE_MENU,
+ active_menu
+ }
+}
+
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-16 09:50:21 +0000