web: implement update and remove for list and view

5 files changed, 184 insertions, 36 deletions

diff --git a/mitmproxy/web/__init__.py b/mitmproxy/web/__init__.py
index 0dbde204..0444842e 100644
--- a/mitmproxy/web/__init__.py
+++ b/mitmproxy/web/__init__.py
@@ -43,7 +43,7 @@ class WebFlowView(flow.FlowView):
         app.ClientConnection.broadcast(
             type="UPDATE_FLOWS",
             cmd="remove",
-            data=f.id
+            data=dict(id=f.id)
         )
 
     def _recalculate(self, flows):
diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index 522f670f..128e8647 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -4495,9 +4495,9 @@ var UPDATE_LOG = exports.UPDATE_LOG = "UPDATE_EVENTLOG";
 var _makeList = (0, _list2.default)(UPDATE_LOG, "/events");
 
 var reduceList = _makeList.reduceList;
-var addToList = _makeList.addToList;
 var updateList = _makeList.updateList;
 var fetchList = _makeList.fetchList;
+var addItem = _makeList.addItem;
 
 
 var defaultState = {
@@ -4532,7 +4532,7 @@ function reducer() {
             var events = reduceList(state.events, action);
             return _extends({}, state, {
                 events: events,
-                filteredEvents: (0, _view.updateViewList)(state.filteredEvents, events, action, function (x) {
+                filteredEvents: (0, _view.updateViewList)(state.filteredEvents, state.events, events, action, function (x) {
                     return state.filter[x.level];
                 })
             });
@@ -4551,7 +4551,7 @@ var id = 0;
 function addLogEntry(message) {
     var level = arguments.length <= 1 || arguments[1] === undefined ? "web" : arguments[1];
 
-    return addToList({
+    return addItem({
         message: message,
         level: level,
         id: "log-" + id++
@@ -4646,7 +4646,7 @@ exports.default = rootReducer;
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.RECEIVE_LIST = exports.REQUEST_LIST = exports.ADD = undefined;
+exports.RECEIVE_LIST = exports.REQUEST_LIST = exports.REMOVE = exports.UPDATE = exports.ADD = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -4659,6 +4659,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 var ADD = exports.ADD = "ADD";
+var UPDATE = exports.UPDATE = "UPDATE";
+var REMOVE = exports.REMOVE = "REMOVE";
 var REQUEST_LIST = exports.REQUEST_LIST = "REQUEST_LIST";
 var RECEIVE_LIST = exports.RECEIVE_LIST = "RECEIVE_LIST";
 
@@ -4726,6 +4728,8 @@ function makeList(actionType, fetchURL) {
             });
         }
 
+        var list = void 0,
+            itemIndex = void 0;
         switch (action.cmd) {
             case ADD:
                 return {
@@ -4734,18 +4738,37 @@ function makeList(actionType, fetchURL) {
                     indexOf: _extends({}, state.indexOf, _defineProperty({}, action.item.id, state.list.length))
                 };
 
+            case UPDATE:
+
+                list = [].concat(_toConsumableArray(state.list));
+                itemIndex = state.indexOf[action.item.id];
+                list[itemIndex] = action.item;
+                return _extends({}, defaultState, {
+                    list: list
+                });
+
+            case REMOVE:
+                list = [].concat(_toConsumableArray(state.list));
+                itemIndex = state.indexOf[action.item.id];
+                list.splice(itemIndex, 1);
+                return _extends({}, defaultState, {
+                    list: list,
+                    byId: _extends({}, state.byId, _defineProperty({}, action.item.id, undefined)),
+                    indexOf: _extends({}, state.indexOf, _defineProperty({}, action.item.id, undefined))
+                });
+
             case REQUEST_LIST:
                 return _extends({}, defaultState, {
                     isFetching: true
                 });
 
             default:
-                console.debug("unknown action", action.type);
+                console.debug("unknown action", action);
                 return state;
         }
     }
 
-    function addToList(item) {
+    function addItem(item) {
         return {
             type: actionType,
             cmd: ADD,
@@ -4753,16 +4776,36 @@ function makeList(actionType, fetchURL) {
         };
     }
 
-    function updateList(action) {
+    function updateItem(item) {
+        return {
+            type: actionType,
+            cmd: UPDATE,
+            item: item
+        };
+    }
+
+    function removeItem(item) {
+        return {
+            type: actionType,
+            cmd: REMOVE,
+            item: item
+        };
+    }
+
+    function updateList(event) {
         /* This action creater takes all WebSocket events */
         return function (dispatch) {
-            switch (action.cmd) {
+            switch (event.cmd) {
                 case "add":
-                    return dispatch(addToList(action.data));
+                    return dispatch(addItem(event.data));
+                case "update":
+                    return dispatch(updateItem(event.data));
+                case "remove":
+                    return dispatch(removeItem(event.data));
                 case "reset":
                     return dispatch(fetchList());
                 default:
-                    console.error("unknown list update", action);
+                    console.error("unknown list update", event);
             }
         };
     }
@@ -4795,7 +4838,7 @@ function makeList(actionType, fetchURL) {
         };
     }
 
-    return { reduceList: reduceList, addToList: addToList, updateList: updateList, fetchList: fetchList };
+    return { reduceList: reduceList, updateList: updateList, fetchList: fetchList, addItem: addItem, updateItem: updateItem, removeItem: removeItem };
 }
 
 },{"../../utils":33}],27:[function(require,module,exports){
@@ -4847,10 +4890,17 @@ var sortedInsert = function sortedInsert(list, sortFn, item) {
     return l;
 };
 
+var sortedRemove = function sortedRemove(list, sortFn, item) {
+    var itemId = item.id;
+    return list.filter(function (x) {
+        return x.id !== itemId;
+    });
+};
+
 // for when the list changes
-function updateViewList(state, nextList, action) {
-    var filterFn = arguments.length <= 3 || arguments[3] === undefined ? defaultFilterFn : arguments[3];
-    var sortFn = arguments.length <= 4 || arguments[4] === undefined ? defaultSortFn : arguments[4];
+function updateViewList(state, currentList, nextList, action) {
+    var filterFn = arguments.length <= 4 || arguments[4] === undefined ? defaultFilterFn : arguments[4];
+    var sortFn = arguments.length <= 5 || arguments[5] === undefined ? defaultSortFn : arguments[5];
 
     switch (action.cmd) {
         case _list.REQUEST_LIST:
@@ -4858,7 +4908,30 @@ function updateViewList(state, nextList, action) {
         case _list.RECEIVE_LIST:
             return updateViewFilter(nextList.list, filterFn, sortFn);
         case _list.ADD:
-            if (filterFn(action.item)) return sortedInsert(state, sortFn, action.item);
+            if (filterFn(action.item)) {
+                return sortedInsert(state, sortFn, action.item);
+            }
+            return state;
+        case _list.UPDATE:
+            // let's determine if it's in the view currently and if it should be in the view.
+            var currentItemState = currentList.byId[action.item.id],
+                nextItemState = action.item,
+                isInView = filterFn(currentItemState),
+                shouldBeInView = filterFn(nextItemState);
+
+            if (!isInView && shouldBeInView) return sortedInsert(state, sortFn, action.item);
+            if (isInView && !shouldBeInView) return sortedRemove(state, sortFn, action.item);
+            if (isInView && shouldBeInView && sortFn(currentItemState) !== sortFn(nextItemState)) {
+                var s = [].concat(_toConsumableArray(state));
+                s.sort(sortFn);
+                return s;
+            }
+            return state;
+        case _list.REMOVE:
+            var isInView_ = filterFn(currentList.byId[action.item.id]);
+            if (isInView_) {
+                return sortedRemove(state, sortFn, action.item);
+            }
             return state;
         default:
             console.error("Unknown list action: ", action);
diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js
index 00b25bcf..e3661fe7 100644
--- a/web/src/js/ducks/eventLog.js
+++ b/web/src/js/ducks/eventLog.js
@@ -7,9 +7,9 @@ export const UPDATE_LOG = "UPDATE_EVENTLOG"
 
 const {
     reduceList,
-    addToList,
     updateList,
     fetchList,
+    addItem,
 } = makeList(UPDATE_LOG, "/events")
 
 
@@ -51,7 +51,9 @@ export default function reducer(state = defaultState, action) {
                 events,
                 filteredEvents: updateViewList(
                     state.filteredEvents,
-                    events, action,
+                    state.events,
+                    events,
+                    action,
                     x => state.filter[x.level]
                 )
             }
@@ -69,7 +71,7 @@ export function toggleEventLogVisibility() {
 }
 let id = 0
 export function addLogEntry(message, level = "web") {
-    return addToList({
+    return addItem({
         message,
         level,
         id: `log-${id++}`
diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js
index b750982e..e5ce75ef 100644
--- a/web/src/js/ducks/utils/list.js
+++ b/web/src/js/ducks/utils/list.js
@@ -1,6 +1,8 @@
-import {fetchApi} from "../../utils";
+import {fetchApi} from "../../utils"
 
 export const ADD = "ADD"
+export const UPDATE = "UPDATE"
+export const REMOVE = "REMOVE"
 export const REQUEST_LIST = "REQUEST_LIST"
 export const RECEIVE_LIST = "RECEIVE_LIST"
 
@@ -11,7 +13,7 @@ const defaultState = {
     actionsDuringFetch: [],
     byId: {},
     indexOf: {},
-};
+}
 
 export default function makeList(actionType, fetchURL) {
     function reduceList(state = defaultState, action = {}) {
@@ -45,6 +47,7 @@ export default function makeList(actionType, fetchURL) {
             }
         }
 
+        let list, itemIndex
         switch (action.cmd) {
             case ADD:
                 return {
@@ -53,6 +56,27 @@ export default function makeList(actionType, fetchURL) {
                     indexOf: {...state.indexOf, [action.item.id]: state.list.length},
                 }
 
+            case UPDATE:
+
+                list = [...state.list]
+                itemIndex = state.indexOf[action.item.id]
+                list[itemIndex] = action.item
+                return {
+                    ...defaultState,
+                    list
+                }
+
+            case REMOVE:
+                list = [...state.list]
+                itemIndex = state.indexOf[action.item.id]
+                list.splice(itemIndex, 1)
+                return {
+                    ...defaultState,
+                    list,
+                    byId: {...state.byId, [action.item.id]: undefined},
+                    indexOf: {...state.indexOf, [action.item.id]: undefined},
+                }
+
             case REQUEST_LIST:
                 return {
                     ...defaultState,
@@ -60,12 +84,12 @@ export default function makeList(actionType, fetchURL) {
                 }
 
             default:
-                console.debug("unknown action", action.type)
+                console.debug("unknown action", action)
                 return state
         }
     }
 
-    function addToList(item) {
+    function addItem(item) {
         return {
             type: actionType,
             cmd: ADD,
@@ -73,17 +97,37 @@ export default function makeList(actionType, fetchURL) {
         }
     }
 
+    function updateItem(item) {
+        return {
+            type: actionType,
+            cmd: UPDATE,
+            item
+        }
+    }
+
+    function removeItem(item) {
+        return {
+            type: actionType,
+            cmd: REMOVE,
+            item
+        }
+    }
+
 
-    function updateList(action) {
+    function updateList(event) {
         /* This action creater takes all WebSocket events */
         return dispatch => {
-            switch (action.cmd) {
+            switch (event.cmd) {
                 case "add":
-                    return dispatch(addToList(action.data))
+                    return dispatch(addItem(event.data))
+                case "update":
+                    return dispatch(updateItem(event.data))
+                case "remove":
+                    return dispatch(removeItem(event.data))
                 case "reset":
                     return dispatch(fetchList())
                 default:
-                    console.error("unknown list update", action)
+                    console.error("unknown list update", event)
             }
         }
     }
@@ -117,5 +161,5 @@ export default function makeList(actionType, fetchURL) {
     }
 
 
-    return {reduceList, addToList, updateList, fetchList}
+    return {reduceList, updateList, fetchList, addItem, updateItem, removeItem,}
 }
\ No newline at end of file
diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js
index 4b265f89..55fdf6c7 100644
--- a/web/src/js/ducks/utils/view.js
+++ b/web/src/js/ducks/utils/view.js
@@ -1,4 +1,4 @@
-import {ADD, REQUEST_LIST, RECEIVE_LIST} from "./list"
+import {ADD, UPDATE, REMOVE, REQUEST_LIST, RECEIVE_LIST} from "./list"
 
 const defaultFilterFn = x => true
 const defaultSortFn = false
@@ -6,13 +6,13 @@ const defaultSortFn = false
 const makeCompareFn = sortFn => {
     let compareFn = (a, b) => {
         let akey = sortFn(a),
-            bkey = sortFn(b);
+            bkey = sortFn(b)
         if (akey < bkey) {
-            return -1;
+            return -1
         } else if (akey > bkey) {
-            return 1;
+            return 1
         } else {
-            return 0;
+            return 0
         }
     }
     if (sortFn.reverse)
@@ -33,19 +33,48 @@ const sortedInsert = (list, sortFn, item) => {
     return l
 }
 
+const sortedRemove = (list, sortFn, item) => {
+    let itemId = item.id
+    return list.filter(x => x.id !== itemId)
+}
+
 // for when the list changes
-export function updateViewList(state, nextList, action, filterFn = defaultFilterFn, sortFn = defaultSortFn) {
+export function updateViewList(state, currentList, nextList, action, filterFn = defaultFilterFn, sortFn = defaultSortFn) {
     switch (action.cmd) {
         case REQUEST_LIST:
             return state
         case RECEIVE_LIST:
             return updateViewFilter(nextList.list, filterFn, sortFn)
         case ADD:
-            if (filterFn(action.item))
+            if (filterFn(action.item)) {
+                return sortedInsert(state, sortFn, action.item)
+            }
+            return state
+        case UPDATE:
+            // let's determine if it's in the view currently and if it should be in the view.
+            let currentItemState = currentList.byId[action.item.id],
+                nextItemState = action.item,
+                isInView = filterFn(currentItemState),
+                shouldBeInView = filterFn(nextItemState)
+
+            if (!isInView && shouldBeInView)
                 return sortedInsert(state, sortFn, action.item)
+            if (isInView && !shouldBeInView)
+                return sortedRemove(state, sortFn, action.item)
+            if (isInView && shouldBeInView && sortFn(currentItemState) !== sortFn(nextItemState)) {
+                let s = [...state]
+                s.sort(sortFn)
+                return s
+            }
+            return state
+        case REMOVE:
+            let isInView_ = filterFn(currentList.byId[action.item.id])
+            if (isInView_) {
+                return sortedRemove(state, sortFn, action.item)
+            }
             return state
         default:
-            console.error("Unknown list action: ", action);
+            console.error("Unknown list action: ", action)
             return state
     }
 }