diff options
| -rw-r--r-- | mitmproxy/web/__init__.py | 2 | ||||
| -rw-r--r-- | mitmproxy/web/static/app.js | 103 | ||||
| -rw-r--r-- | web/src/js/ducks/eventLog.js | 8 | ||||
| -rw-r--r-- | web/src/js/ducks/utils/list.js | 62 | ||||
| -rw-r--r-- | web/src/js/ducks/utils/view.js | 45 | 
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      }  } | 
