[web] fix eventLog ducks

6 files changed, 100 insertions, 71 deletions

diff --git a/web/src/js/components/FlowTable/FlowColumns.jsx b/web/src/js/components/FlowTable/FlowColumns.jsx
index 11c0796c..0ff80453 100644
--- a/web/src/js/components/FlowTable/FlowColumns.jsx
+++ b/web/src/js/components/FlowTable/FlowColumns.jsx
@@ -9,7 +9,6 @@ export function TLSColumn({ flow }) {
     )
 }
 
-TLSColumn.sortKeyFun = flow => flow.request.scheme
 TLSColumn.headerClass = 'col-tls'
 TLSColumn.headerName = ''
 
@@ -68,7 +67,6 @@ export function PathColumn({ flow }) {
     )
 }
 
-PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request)
 PathColumn.headerClass = 'col-path'
 PathColumn.headerName = 'Path'
 
@@ -78,7 +76,6 @@ export function MethodColumn({ flow }) {
     )
 }
 
-MethodColumn.sortKeyFun = flow => flow.request.method
 MethodColumn.headerClass = 'col-method'
 MethodColumn.headerName = 'Method'
 
@@ -88,7 +85,6 @@ export function StatusColumn({ flow }) {
     )
 }
 
-StatusColumn.sortKeyFun = flow => flow.response && flow.response.status_code
 StatusColumn.headerClass = 'col-status'
 StatusColumn.headerName = 'Status'
 
@@ -98,7 +94,7 @@ export function SizeColumn({ flow }) {
     )
 }
 
-SizeColumn.sortKeyFun = flow => {
+SizeColumn.getTotalSize = flow => {
     let total = flow.request.contentLength
     if (flow.response) {
         total += flow.response.contentLength || 0
@@ -106,7 +102,6 @@ SizeColumn.sortKeyFun = flow => {
     return total
 }
 
-SizeColumn.getTotalSize = SizeColumn.sortKeyFun
 SizeColumn.headerClass = 'col-size'
 SizeColumn.headerName = 'Size'
 
@@ -122,7 +117,6 @@ export function TimeColumn({ flow }) {
     )
 }
 
-TimeColumn.sortKeyFun = flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start
 TimeColumn.headerClass = 'col-time'
 TimeColumn.headerName = 'Time'
 
diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js
index 61b5882f..aa472592 100644
--- a/web/src/js/ducks/eventLog.js
+++ b/web/src/js/ducks/eventLog.js
@@ -1,6 +1,7 @@
-import { fetchApi as fetch } from '../utils'
-import { CMD_RESET as WS_CMD_RESET } from './websocket'
+import { fetchApi } from '../utils'
 import reduceList, * as listActions from './utils/list'
+import reduceView, * as viewActions from './utils/view'
+import * as websocketActions from './websocket'
 
 export const WS_MSG_TYPE = 'UPDATE_LOG'
 
@@ -11,13 +12,14 @@ export const WS_MSG = 'EVENTLOG_WS_MSG'
 export const REQUEST = 'EVENTLOG_REQUEST'
 export const RECEIVE = 'EVENTLOG_RECEIVE'
 export const FETCH_ERROR = 'EVENTLOG_FETCH_ERROR'
+export const UNKNOWN_CMD = 'EVENTLOG_UNKNOWN_CMD'
 
 const defaultState = {
     logId: 0,
     visible: false,
     filters: { debug: false, info: true, web: true },
-    list: reduceList(undefined, { type: Symbol('EVENTLOG_INIT_LIST') }),
-    view: reduceView(undefined, viewActions.init([]))
+    list: null,
+    view: null,
 }
 
 export default function reduce(state = defaultState, action) {
@@ -31,40 +33,39 @@ export default function reduce(state = defaultState, action) {
             return {
                 ...state,
                 filters,
-                view: reduceView(state.list, listActions.updateFilter(e => filters[e.level], state.list))
+                view: reduceView(state.view, viewActions.updateFilter(state.list, log => filters[log.level])),
             }
 
         case ADD:
-            return {
-                ...state,
-                logId: state.logId + 1,
-                list: reduceList(state.list, listActions.add({
-                    id: `log-${state.logId}`,
-                    message: action.message,
-                    level: action.level,
-                }))
+            const item = {
+                id: `log-${state.logId}`,
+                message: action.message,
+                level: action.level,
             }
-
-        case WS_MSG:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.handleWsMsg(action.msg))
+                logId: state.logId + 1,
+                list: reduceList(state.list, listActions.add(item)),
+                view: reduceView(state.view, viewActions.add(item, log => state.filters[log.level])),
             }
 
         case REQUEST:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.request())
+                list: reduceList(state.list, listActions.request()),
             }
 
         case RECEIVE:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.receive(action.list))
+                list: reduceList(state.list, listActions.receive(action.list)),
             }
 
         default:
-            return state
+            return {
+                ...state,
+                list: reduceList(state.list, action),
+            }
     }
 }
 
@@ -97,10 +98,17 @@ export function add(message, level = 'web') {
  * @public websocket
  */
 export function handleWsMsg(msg) {
-    if (msg.cmd === WS_CMD_RESET) {
-        return fetchData()
+    switch (msg.cmd) {
+
+        case websocketActions.CMD_ADD:
+            return add(msg.data.message, msg.data.level)
+
+        case websocketActions.CMD_RESET:
+            return fetchData()
+
+        default:
+            return { type: UNKNOWN_CMD, msg }
     }
-    return { type: WS_MSG, msg }
 }
 
 /**
@@ -110,7 +118,7 @@ export function fetchData() {
     return dispatch => {
         dispatch(request())
 
-        return fetch('/events')
+        return fetchApi('/events')
             .then(res => res.json())
             .then(json =>  dispatch(receive(json.data)))
             .catch(error => dispatch(fetchError(error)))
diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js
index 4111c8bc..02cf1b3b 100644
--- a/web/src/js/ducks/flows.js
+++ b/web/src/js/ducks/flows.js
@@ -1,5 +1,7 @@
+import { fetchApi } from '../utils'
 import reduceList, * as listActions from './utils/list'
 import reduceViews, * as viewsActions from './views'
+import * as websocketActions from './websocket'
 
 export const WS_MSG_TYPE = 'UPDATE_FLOWS'
 
@@ -11,6 +13,7 @@ export const RECEIVE = 'FLOWS_RECEIVE'
 export const WS_MSG = 'FLOWS_WS_MSG'
 export const REQUEST_ACTION = 'FLOWS_REQUEST_ACTION'
 export const FETCH_ERROR = 'FLOWS_FETCH_ERROR'
+export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD'
 
 const defaultState = {
     list: null,
@@ -68,7 +71,7 @@ export default function reduce(state = defaultState, action) {
  * @public
  */
 export function accept(flow) {
-    fetch(`/flows/${flow.id}/accept`, { method: 'POST' })
+    fetchApi(`/flows/${flow.id}/accept`, { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -76,7 +79,7 @@ export function accept(flow) {
  * @public
  */
 export function acceptAll() {
-    fetch('/flows/accept', { method: 'POST' })
+    fetchApi('/flows/accept', { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -84,7 +87,7 @@ export function acceptAll() {
  * @public
  */
 export function remove(flow) {
-    fetch(`/flows/${flow.id}`, { method: 'DELETE' })
+    fetchApi(`/flows/${flow.id}`, { method: 'DELETE' })
     return { type: REQUEST_ACTION }
 }
 
@@ -92,7 +95,7 @@ export function remove(flow) {
  * @public
  */
 export function duplicate(flow) {
-    fetch(`/flows/${flow.id}/duplicate`, { method: 'POST' })
+    fetchApi(`/flows/${flow.id}/duplicate`, { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -100,7 +103,7 @@ export function duplicate(flow) {
  * @public
  */
 export function replay(flow) {
-    fetch(`/flows/${flow.id}/replay`, { method: 'POST' })
+    fetchApi(`/flows/${flow.id}/replay`, { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -108,7 +111,7 @@ export function replay(flow) {
  * @public
  */
 export function revert(flow) {
-    fetch(`/flows/${flow.id}/revert`, { method: 'POST' })
+    fetchApi(`/flows/${flow.id}/revert`, { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -116,7 +119,7 @@ export function revert(flow) {
  * @public
  */
 export function update(flow, body) {
-    fetch(`/flows/${flow.id}`, { method: 'PUT', body })
+    fetchApi(`/flows/${flow.id}`, { method: 'PUT', body })
     return { type: REQUEST_ACTION }
 }
 
@@ -124,7 +127,7 @@ export function update(flow, body) {
  * @public
  */
 export function clear() {
-    fetch('/clear', { method: 'POST' })
+    fetchApi('/clear', { method: 'POST' })
     return { type: REQUEST_ACTION }
 }
 
@@ -142,7 +145,7 @@ export function download() {
 export function upload(file) {
     const body = new FormData()
     body.append('file', file)
-    fetch('/flows/dump',  { method: 'post', body })
+    fetchApi('/flows/dump',  { method: 'post', body })
     return { type: REQUEST_ACTION }
 }
 
@@ -152,10 +155,23 @@ export function upload(file) {
  * @public websocket
  */
 export function handleWsMsg(msg) {
-    if (msg.cmd === WS_CMD_RESET) {
-        return fetchData()
+    switch (msg.cmd) {
+
+        case websocketActions.CMD_ADD:
+            return add(msg.data)
+
+        case websocketActions.CMD_UPDATE:
+            return update(msg.data.id, msg.data)
+
+        case websocketActions.CMD_REMOVE:
+            return remove(msg.data.id)
+
+        case websocketActions.CMD_RESET:
+            return fetchData()
+
+        default:
+            return { type: UNKNOWN_CMD, msg }
     }
-    return { type: WS_MSG, msg }
 }
 
 /**
@@ -165,7 +181,7 @@ export function fetchData() {
     return dispatch => {
         dispatch(request())
 
-        return fetch('/flows')
+        return fetchApi('/flows')
             .then(res => res.json())
             .then(json => dispatch(receive(json.data)))
             .catch(error => dispatch(fetchError(error)))
diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js
index b95a4527..9649dde3 100644
--- a/web/src/js/ducks/utils/list.js
+++ b/web/src/js/ducks/utils/list.js
@@ -1,9 +1,7 @@
 import _ from 'lodash'
-import * as websocketActions from '../websocket'
 
 export const SET = 'LIST_SET'
 export const CLEAR = 'LIST_CLEAR'
-export const UNKNOWN_CMD = 'LIST_UNKNOWN_CMD'
 export const REQUEST = 'LIST_REQUEST'
 export const RECEIVE = 'LIST_RECEIVE'
 
@@ -86,23 +84,3 @@ export function request() {
 export function receive(list) {
     return { type: RECEIVE, list }
 }
-
-/**
- * @public websocket
- */
-export function handleWsMsg(msg) {
-    switch (msg.cmd) {
-
-        case websocketActions.CMD_ADD:
-            return add(msg.data)
-
-        case websocketActions.CMD_UPDATE:
-            return update(msg.data.id, msg.data)
-
-        case websocketActions.CMD_REMOVE:
-            return remove(msg.data.id)
-
-        default:
-            return { type: UNKNOWN_CMD, msg }
-    }
-}
diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js
index adf7fc6a..20260537 100755
--- a/web/src/js/ducks/utils/view.js
+++ b/web/src/js/ducks/utils/view.js
@@ -72,19 +72,19 @@ export default function reduce(state = defaultState, action) {
     }
 }
 
-export function updateFilter(list, filter, sorter) {
+export function updateFilter(list, filter = defaultFilter, sorter = defaultSorter) {
     return { type: UPDATE_FILTER, list, filter, sorter }
 }
 
-export function updateSorter(sorter) {
+export function updateSorter(sorter = defaultSorter) {
     return { type: UPDATE_SORTER, sorter }
 }
 
-export function add(item, filter, sorter) {
+export function add(item, filter = defaultFilter, sorter = defaultSorter) {
     return { type: ADD, item, filter, sorter }
 }
 
-export function update(id, item, filter, sorter) {
+export function update(id, item, filter = defaultFilter, sorter = defaultSorter) {
     return { type: UPDATE, id, item, filter, sorter }
 }
 
@@ -92,7 +92,7 @@ export function remove(id) {
     return { type: REMOVE, id }
 }
 
-export function receive(list, filter, sorter) {
+export function receive(list, filter = defaultFilter, sorter = defaultSorter) {
     return { type: RECEIVE, list, filter, sorter }
 }
 
@@ -137,3 +137,11 @@ function sortedIndex(list, item, sorter) {
 
     return low
 }
+
+function defaultFilter() {
+    return true
+}
+
+function defaultSorter(a, b) {
+    return 0
+}
diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/views/main.js
index a9700584..26632bb0 100755
--- a/web/src/js/ducks/views/main.js
+++ b/web/src/js/ducks/views/main.js
@@ -6,6 +6,28 @@ export const UPDATE_SORTER = 'MAIN_VIEW_UPDATE_SORTER'
 export const UPDATE_HIGHLIGHT = 'MAIN_VIEW_UPDATE_HIGHLIGHT'
 export const SELECT = 'MAIN_VIEW_SELECT'
 
+const sortKeyFuns = {
+
+    TLSColumn: flow => flow.request.scheme,
+
+    PathColumn: flow => RequestUtils.pretty_url(flow.request),
+
+    MethodColumn: flow => flow.request.method,
+
+    StatusColumn: flow => flow.response && flow.response.status_code,
+
+    TimeColumn: flow => flow.response && flow.response.timestamp_end - flow.request.timestamp_start,
+
+    SizeColumn: flow => {
+        let total = flow.request.contentLength
+        if (flow.response) {
+            total += flow.response.contentLength || 0
+        }
+        return total
+    },
+}
+
+
 const defaultState = {
     filter: null,
     sorter: null,
@@ -144,7 +166,7 @@ export function select(id) {
  * @private
  */
 function makeFilter(filter) {
-    return filter ? Filt.parse(filter) : () => true
+    return filter && Filt.parse(filter)
 }
 
 /**
@@ -152,6 +174,9 @@ function makeFilter(filter) {
  */
 function makeSorter(column, desc) {
     const sortKeyFun = sortKeyFuns[column]
+    if (!sortKeyFun) {
+        return
+    }
     return (a, b) => {
         const ka = sortKeyFun(a)
         const kb = sortKeyFun(b)