added flowMenu

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)

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)

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),

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);

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
+export default rootReducer

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
+    }
+}
+