diff options
Diffstat (limited to 'web/src/js/ducks')
| -rw-r--r-- | web/src/js/ducks/eventLog.js | 4 | ||||
| -rw-r--r--[-rwxr-xr-x] | web/src/js/ducks/flowView.js (renamed from web/src/js/ducks/views/main.js) | 147 | ||||
| -rw-r--r-- | web/src/js/ducks/flows.js | 84 | ||||
| -rw-r--r-- | web/src/js/ducks/index.js | 2 | ||||
| -rw-r--r-- | web/src/js/ducks/ui.js | 247 | ||||
| -rw-r--r-- | web/src/js/ducks/utils/list.js | 8 | ||||
| -rwxr-xr-x | web/src/js/ducks/utils/view.js | 24 | ||||
| -rwxr-xr-x | web/src/js/ducks/views.js | 40 | ||||
| -rw-r--r-- | web/src/js/ducks/websocket.js | 2 |
9 files changed, 362 insertions, 196 deletions
diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js index 52eec1cd..f72d7bd6 100644 --- a/web/src/js/ducks/eventLog.js +++ b/web/src/js/ducks/eventLog.js @@ -35,7 +35,7 @@ export default function reduce(state = defaultState, action) { return { ...state, filters, - view: reduceView(state.view, viewActions.updateFilter(state.list, log => filters[log.level])), + view: reduceView(state.view, viewActions.updateFilter(state.list.data, log => filters[log.level])), } case ADD: @@ -55,7 +55,7 @@ export default function reduce(state = defaultState, action) { return { ...state, list: reduceList(state.list, listActions.receive(action.list)), - view: reduceView(state.view, viewActions.receive(list, log => state.filters[log.level])), + view: reduceView(state.view, viewActions.receive(action.list, log => state.filters[log.level])), } default: diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/flowView.js index f4968de4..dd5bea41 100755..100644 --- a/web/src/js/ducks/views/main.js +++ b/web/src/js/ducks/flowView.js @@ -1,12 +1,12 @@ -import Filt from '../../filt/filt' -import { RequestUtils } from '../../flow/utils' -import reduceView, * as viewActions from '../utils/view' -import * as viewsActions from '../views' +import reduceView, * as viewActions from './utils/view' +import * as flowActions from './flows' +import Filt from '../filt/filt' +import { RequestUtils } from '../flow/utils' + +export const UPDATE_FILTER = 'FLOWVIEW_UPDATE_FILTER' +export const UPDATE_SORT = 'FLOWVIEW_UPDATE_SORT' +export const UPDATE_HIGHLIGHT = 'FLOWVIEW_UPDATE_HIGHLIGHT' -export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER' -export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT' -export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT' -export const SELECT = 'FLOW_VIEWS_MAIN_SELECT' const sortKeyFuns = { @@ -29,12 +29,37 @@ const sortKeyFuns = { }, } +export function makeFilter(filter) { + if (!filter) { + return + } + return Filt.parse(filter) +} + +export function makeSort({ column, desc }) { + const sortKeyFun = sortKeyFuns[column] + if (!sortKeyFun) { + return + } + return (a, b) => { + const ka = sortKeyFun(a) + const kb = sortKeyFun(b) + if (ka > kb) { + return desc ? -1 : 1 + } + if (ka < kb) { + return desc ? 1 : -1 + } + return 0 + } +} + + const defaultState = { highlight: null, - selected: [], filter: null, sort: { column: null, desc: false }, - view: undefined, + ...reduceView(undefined, {}) } export default function reduce(state = defaultState, action) { @@ -46,44 +71,35 @@ export default function reduce(state = defaultState, action) { highlight: action.highlight, } - case SELECT: - return { - ...state, - selected: [action.id] - } - case UPDATE_FILTER: return { - ...state, - filter: action.filter, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.updateFilter( - action.list, + action.flows, makeFilter(action.filter), makeSort(state.sort) ) ), + filter: action.filter, } case UPDATE_SORT: const sort = { column: action.column, desc: action.desc } return { - ...state, - sort, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.updateSort( makeSort(sort) ) ), + sort, } - case viewsActions.ADD: + case flowActions.ADD: return { - ...state, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.add( action.item, makeFilter(state.filter), @@ -92,13 +108,11 @@ export default function reduce(state = defaultState, action) { ), } - case viewsActions.UPDATE: + case flowActions.UPDATE: return { - ...state, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.update( - action.id, action.item, makeFilter(state.filter), makeSort(state.sort) @@ -106,22 +120,20 @@ export default function reduce(state = defaultState, action) { ), } - case viewsActions.REMOVE: + case flowActions.REMOVE: return { - ...state, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.remove( action.id ) ), } - case viewsActions.RECEIVE: + case flowActions.RECEIVE: return { - ...state, - view: reduceView( - state.view, + ...reduceView( + state, viewActions.receive( action.list, makeFilter(state.filter), @@ -132,8 +144,7 @@ export default function reduce(state = defaultState, action) { default: return { - ...state, - view: reduceView(state.view, action) + ...reduceView(state, action), } } } @@ -143,7 +154,7 @@ export default function reduce(state = defaultState, action) { */ export function updateFilter(filter) { return (dispatch, getState) => { - dispatch({ type: UPDATE_FILTER, filter, list: getState().flows.list }) + dispatch({ type: UPDATE_FILTER, filter, flows: getState().flows.data }) } } @@ -161,42 +172,24 @@ export function updateSort(column, desc) { return { type: UPDATE_SORT, column, desc } } + /** * @public */ -export function select(id) { +export function selectRelative(shift) { return (dispatch, getState) => { - dispatch({ type: SELECT, currentSelection: getState().flows.views.main.selected[0], id }) - } -} - -/** - * @private - */ -function makeFilter(filter) { - if (!filter) { - return - } - return Filt.parse(filter) -} - -/** - * @private - */ -function makeSort({ column, desc }) { - const sortKeyFun = sortKeyFuns[column] - if (!sortKeyFun) { - return - } - return (a, b) => { - const ka = sortKeyFun(a) - const kb = sortKeyFun(b) - if (ka > kb) { - return desc ? -1 : 1 + let currentSelectionIndex = getState().flowView.indexOf[getState().flows.selected[0]] + let minIndex = 0 + let maxIndex = getState().flowView.data.length - 1 + let newIndex + if (currentSelectionIndex === undefined) { + newIndex = (shift < 0) ? minIndex : maxIndex + } else { + newIndex = currentSelectionIndex + shift + newIndex = Math.max(newIndex, minIndex) + newIndex = Math.min(newIndex, maxIndex) } - if (ka < kb) { - return desc ? 1 : -1 - } - return 0 + let flow = getState().flowView.data[newIndex] + dispatch(flowActions.select(flow ? flow.id : undefined)) } } diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index eea91924..ffb7ac87 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -1,25 +1,25 @@ import { fetchApi } from '../utils' import reduceList, * as listActions from './utils/list' -import reduceViews, * as viewsActions from './views' + import * as msgQueueActions from './msgQueue' import * as websocketActions from './websocket' export const MSG_TYPE = 'UPDATE_FLOWS' export const DATA_URL = '/flows' -export const ADD = 'FLOWS_ADD' -export const UPDATE = 'FLOWS_UPDATE' -export const REMOVE = 'FLOWS_REMOVE' -export const RECEIVE = 'FLOWS_RECEIVE' +export const ADD = 'FLOWS_ADD' +export const UPDATE = 'FLOWS_UPDATE' +export const REMOVE = 'FLOWS_REMOVE' +export const RECEIVE = 'FLOWS_RECEIVE' export const REQUEST_ACTION = 'FLOWS_REQUEST_ACTION' -export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD' -export const FETCH_ERROR = 'FLOWS_FETCH_ERROR' -export const SET_MODIFIED_FLOW_CONTENT = "FLOWS_SET_MODIFIED_FLOW" +export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD' +export const FETCH_ERROR = 'FLOWS_FETCH_ERROR' +export const SELECT = 'FLOWS_SELECT' + const defaultState = { - list: undefined, - views: undefined, - modifiedFlow: {headers: "", content: ""} + selected: [], + ...reduceList(undefined, {}), } export default function reduce(state = defaultState, action) { @@ -28,43 +28,37 @@ export default function reduce(state = defaultState, action) { case ADD: return { ...state, - list: reduceList(state.list, listActions.add(action.item)), - views: reduceViews(state.views, viewsActions.add(action.item)), + ...reduceList(state, listActions.add(action.item)), } case UPDATE: return { ...state, - list: reduceList(state.list, listActions.update(action.id, action.item)), - views: reduceViews(state.views, viewsActions.update(action.id, action.item)), + ...reduceList(state, listActions.update(action.item)), } case REMOVE: return { ...state, - list: reduceList(state.list, listActions.remove(action.id)), - views: reduceViews(state.views, viewsActions.remove(action.id)), + ...reduceList(state, listActions.remove(action.id)), } case RECEIVE: - const list = reduceList(state.list, listActions.receive(action.list)) return { ...state, - list, - views: reduceViews(state.views, viewsActions.receive(list)), + ...reduceList(state, listActions.receive(action.list)), } - case SET_MODIFIED_FLOW_CONTENT: - return{ + + case SELECT: + return { ...state, - modifiedFlow: {...state.modifiedFlow, content: action.content} + selected: action.flowIds } - default: return { ...state, - list: reduceList(state.list, action), - views: reduceViews(state.views, action), + ...reduceList(state, action), } } } @@ -72,17 +66,6 @@ export default function reduce(state = defaultState, action) { /** * @public */ -export function setModifiedFlowContent(content) { - return { - type: SET_MODIFIED_FLOW_CONTENT, - content - } -} - - -/** - * @public - */ export function accept(flow) { fetchApi(`/flows/${flow.id}/accept`, { method: 'POST' }) return { type: REQUEST_ACTION } @@ -172,6 +155,15 @@ export function upload(file) { return { type: REQUEST_ACTION } } + +export function select(id) { + return { + type: SELECT, + flowIds: id ? [id] : [] + } +} + + /** * This action creater takes all WebSocket events * @@ -181,16 +173,16 @@ export function handleWsMsg(msg) { switch (msg.cmd) { case websocketActions.CMD_ADD: - return addItem(msg.data) + return addFlow(msg.data) case websocketActions.CMD_UPDATE: - return updateItem(msg.data.id, msg.data) + return updateFlow(msg.data) case websocketActions.CMD_REMOVE: - return removeItem(msg.data.id) + return removeFlow(msg.data.id) case websocketActions.CMD_RESET: - return fetchData() + return fetchFlows() default: return { type: UNKNOWN_CMD, msg } @@ -200,7 +192,7 @@ export function handleWsMsg(msg) { /** * @public websocket */ -export function fetchData() { +export function fetchFlows() { return msgQueueActions.fetchData(MSG_TYPE) } @@ -214,20 +206,20 @@ export function receiveData(list) { /** * @private */ -export function addItem(item) { +export function addFlow(item) { return { type: ADD, item } } /** * @private */ -export function updateItem(id, item) { - return { type: UPDATE, id, item } +export function updateFlow(item) { + return { type: UPDATE, item } } /** * @private */ -export function removeItem(id) { +export function removeFlow(id) { return { type: REMOVE, id } } diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js index c2488d70..16193530 100644 --- a/web/src/js/ducks/index.js +++ b/web/src/js/ducks/index.js @@ -2,6 +2,7 @@ import { combineReducers } from 'redux' import eventLog from './eventLog' import websocket from './websocket' import flows from './flows' +import flowView from './flowView' import settings from './settings' import ui from './ui' import msgQueue from './msgQueue' @@ -10,6 +11,7 @@ export default combineReducers({ eventLog, websocket, flows, + flowView, settings, ui, msgQueue, diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index f8234fdb..f745f0af 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -1,42 +1,259 @@ -import {SELECT} from "./views/main" -export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU'; +import { selectRelative as selectFlowRelative } from './flowView' +import { Key } from '../utils.js' +import * as flowsActions from './flows' +export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' +export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' +export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT' +export const UPDATE_QUERY = 'UI_UPDATE_QUERY' +export const SELECT_TAB = 'UI_SELECT_TAB' +export const SET_PROMPT = 'UI_SET_PROMPT' +export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' const defaultState = { activeMenu: 'Start', + isFlowSelected: false, + selectedInput: null, + displayLarge: false, + promptOpen: false, + contentView: 'ViewAuto', + query: {}, + panel: 'request' } + export default function reducer(state = defaultState, action) { switch (action.type) { + case SET_ACTIVE_MENU: return { ...state, - activeMenu: action.activeMenu + activeMenu: action.activeMenu, } - case SELECT: - let isNewSelect = (action.flowId && !action.currentSelection) - let isDeselect = (!action.flowId && action.currentSelection) - if(isNewSelect) { + + case flowsActions.SELECT: + if (action.flowIds.length && !state.isFlowSelected) { return { ...state, - activeMenu: "Flow" + displayLarge: false, + activeMenu: 'Flow', + isFlowSelected: true, } } - if(isDeselect && state.activeMenu === "Flow") { + + if (!action.flowIds.length && state.isFlowSelected) { + let activeMenu = state.activeMenu + if (activeMenu == 'Flow') { + activeMenu = 'Start' + } return { ...state, - activeMenu: "Start" + activeMenu, + isFlowSelected: false, } } - return state + + return { + ...state, + displayLarge: false, + } + + case SET_CONTENT_VIEW: + return { + ...state, + contentView: action.contentView, + } + + case SET_SELECTED_INPUT: + return { + ...state, + selectedInput: action.input + } + + case UPDATE_QUERY: + return { + ...state, + query: { ...state.query, ...action.query } + } + + case SELECT_TAB: + return { + ...state, + panel: action.panel + } + + case SET_PROMPT: + return { + ...state, + promptOpen: action.open, + } + + case SET_DISPLAY_LARGE: + return { + ...state, + displayLarge: action.displayLarge, + } + default: return state } } export function setActiveMenu(activeMenu) { - return { - type: SET_ACTIVE_MENU, - activeMenu - } + return { type: SET_ACTIVE_MENU, activeMenu } +} + +export function setContentView(contentView) { + return { type: SET_CONTENT_VIEW, contentView } } +export function setSelectedInput(input) { + return { type: SET_SELECTED_INPUT, input } +} + +export function updateQuery(query) { + return { type: UPDATE_QUERY, query } +} + +export function selectTab(panel) { + return { type: SELECT_TAB, panel } +} + +export function setPrompt(open) { + return { type: SET_PROMPT, open } +} + +export function setDisplayLarge(displayLarge) { + return { type: SET_DISPLAY_LARGE, displayLarge } +} + +export function onKeyDown(e) { + if (e.ctrlKey) { + return () => { + } + } + var key = e.keyCode + var shiftKey = e.shiftKey + e.preventDefault() + return (dispatch, getState) => { + + const flow = getState().flows.byId[getState().flows.selected[0]] + + switch (key) { + + case Key.I: + dispatch(setSelectedInput('intercept')) + break + + case Key.L: + dispatch(setSelectedInput('search')) + break + + case Key.H: + dispatch(setSelectedInput('highlight')) + break + + case Key.K: + case Key.UP: + dispatch(selectFlowRelative(-1)) + break + + case Key.J: + case Key.DOWN: + dispatch(selectFlowRelative(+1)) + break + + case Key.SPACE: + case Key.PAGE_DOWN: + dispatch(selectFlowRelative(+10)) + break + + case Key.PAGE_UP: + dispatch(selectFlowRelative(-10)) + break + + case Key.END: + dispatch(selectFlowRelative(+1e10)) + break + + case Key.HOME: + dispatch(selectFlowRelative(-1e10)) + break + + case Key.ESC: + dispatch(flowsActions.select(null)) + break + + case Key.LEFT: + { + let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']), + currentTab = getState().ui.panel, + nextTab = tabs[(tabs.indexOf(currentTab) - 1 + tabs.length) % tabs.length] + dispatch(selectTab(nextTab)) + break + } + + case Key.TAB: + case Key.RIGHT: + { + let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']), + currentTab = getState().ui.panel, + nextTab = tabs[(tabs.indexOf(currentTab) + 1) % tabs.length] + dispatch(selectTab(nextTab)) + break + } + + case Key.C: + if (shiftKey) { + dispatch(flowsActions.clear()) + } + break + + case Key.D: + { + if (!flow) { + return + } + if (shiftKey) { + dispatch(flowsActions.duplicate(flow)) + } else { + dispatch(flowsActions.remove(flow)) + } + break + } + + case Key.A: + { + if (shiftKey) { + dispatch(flowsActions.acceptAll()) + } else if (flow && flow.intercepted) { + dispatch(flowsActions.accept(flow)) + } + break + } + + case Key.R: + { + if (!shiftKey && flow) { + dispatch(flowsActions.replay(flow)) + } + break + } + + case Key.V: + { + if (!shiftKey && flow && flow.modified) { + dispatch(flowsActions.revert(flow)) + } + break + } + + case Key.E: + dispatch(setPrompt(true)) + break + + default: + return () => { + } + } + } +} diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js index 4f631590..fdeb5856 100644 --- a/web/src/js/ducks/utils/list.js +++ b/web/src/js/ducks/utils/list.js @@ -23,7 +23,7 @@ export default function reduce(state = defaultState, action) { } case UPDATE: { - const index = state.indexOf[action.id] + const index = state.indexOf[action.item.id] if (index == null) { return state @@ -36,7 +36,7 @@ export default function reduce(state = defaultState, action) { return { ...state, data, - byId: { ...state.byId, [action.id]: action.item } + byId: { ...state.byId, [action.item.id]: action.item } } } @@ -86,8 +86,8 @@ export function add(item) { /** * @public */ -export function update(id, item) { - return { type: UPDATE, id, item } +export function update(item) { + return { type: UPDATE, item } } /** diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js index 0349a398..c00f00bd 100755 --- a/web/src/js/ducks/utils/view.js +++ b/web/src/js/ducks/utils/view.js @@ -15,8 +15,9 @@ const defaultState = { export default function reduce(state = defaultState, action) { switch (action.type) { - case UPDATE_FILTER: { - const data = action.list.data.filter(action.filter).sort(action.sort) + case UPDATE_FILTER: + { + const data = action.list.filter(action.filter).sort(action.sort) return { ...state, data, @@ -24,7 +25,8 @@ export default function reduce(state = defaultState, action) { } } - case UPDATE_SORT: { + case UPDATE_SORT: + { const data = [...state.data].sort(action.sort) return { ...state, @@ -51,13 +53,13 @@ export default function reduce(state = defaultState, action) { ...sortedRemove(state, action.id), } - case UPDATE: { - if (state.indexOf[action.id] == null) { + case UPDATE: + if (state.indexOf[action.item.id] == null) { return } const nextState = { ...state, - ...sortedRemove(state, action.id), + ...sortedRemove(state, action.item.id), } if (!action.filter(action.item)) { return nextState @@ -66,10 +68,10 @@ export default function reduce(state = defaultState, action) { ...nextState, ...sortedInsert(nextState, action.item, action.sort) } - } - case RECEIVE: { - const data = action.list.data.filter(action.filter).sort(action.sort) + case RECEIVE: + { + const data = action.list.filter(action.filter).sort(action.sort) return { ...state, data, @@ -94,8 +96,8 @@ export function add(item, filter = defaultFilter, sort = defaultSort) { return { type: ADD, item, filter, sort } } -export function update(id, item, filter = defaultFilter, sort = defaultSort) { - return { type: UPDATE, id, item, filter, sort } +export function update(item, filter = defaultFilter, sort = defaultSort) { + return { type: UPDATE, item, filter, sort } } export function remove(id) { diff --git a/web/src/js/ducks/views.js b/web/src/js/ducks/views.js deleted file mode 100755 index e1e46c2e..00000000 --- a/web/src/js/ducks/views.js +++ /dev/null @@ -1,40 +0,0 @@ -import { combineReducers } from 'redux' -import * as viewActions from './utils/view' -import main from './views/main.js' - -export const ADD = 'FLOW_VIEWS_ADD' -export const UPDATE = 'FLOW_VIEWS_UPDATE' -export const REMOVE = 'FLOW_VIEWS_REMOVE' -export const RECEIVE = 'FLOW_VIEWS_RECEIVE' - -export default combineReducers({ - main, -}) - -/** - * @public - */ -export function add(item) { - return { type: ADD, item } -} - -/** - * @public - */ -export function update(id, item) { - return { type: UPDATE, id, item } -} - -/** - * @public - */ -export function remove(id) { - return { type: REMOVE, id } -} - -/** - * @public - */ -export function receive(list) { - return { type: RECEIVE, list } -} diff --git a/web/src/js/ducks/websocket.js b/web/src/js/ducks/websocket.js index 5ba7baef..21400bb5 100644 --- a/web/src/js/ducks/websocket.js +++ b/web/src/js/ducks/websocket.js @@ -68,7 +68,7 @@ export function onConnect() { return dispatch => { dispatch({ type: CONNECTED }) dispatch(settingsActions.fetchData()) - dispatch(flowsActions.fetchData()) + dispatch(flowsActions.fetchFlows()) dispatch(eventLogActions.fetchData()) } } |