diff --git a/client/components/routeservers/actions.jsx b/client/components/routeservers/actions.jsx index b53742e..2dd0930 100644 --- a/client/components/routeservers/actions.jsx +++ b/client/components/routeservers/actions.jsx @@ -27,6 +27,8 @@ export const LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS = '@birdseye/LOAD_ROUTESER export const LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS = '@birdseye/LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS'; export const SET_PROTOCOLS_FILTER_VALUE = '@birdseye/SET_PROTOCOLS_FILTER_VALUE'; +export const SET_PROTOCOLS_FILTER = '@birdseye/SET_PROTOCOLS_FILTER'; + export const SET_ROUTES_FILTER_VALUE = '@birdseye/SET_ROUTES_FILTER_VALUE'; @@ -220,7 +222,17 @@ export function setProtocolsFilterValue(value) { return { type: SET_PROTOCOLS_FILTER_VALUE, payload: { - protocolsFilterValue: value + value: value + } + } +} + + +export function setProtocolsFilter(value) { + return { + type: SET_PROTOCOLS_FILTER, + payload: { + value: value, } } } diff --git a/client/components/routeservers/page.jsx b/client/components/routeservers/page.jsx index 3f34c18..bdb1357 100644 --- a/client/components/routeservers/page.jsx +++ b/client/components/routeservers/page.jsx @@ -1,4 +1,6 @@ +import {debounce} from 'underscore' + import React from 'react' import {connect} from 'react-redux' @@ -10,16 +12,34 @@ import SearchInput from 'components/search-input' import Protocols from './protocols' -import {setProtocolsFilterValue} from './actions' +import {setProtocolsFilterValue, + setProtocolsFilter} from './actions' class RouteserversPage extends React.Component { - setFilter(value) { - this.props.dispatch( - setProtocolsFilterValue(value) - ); + constructor(props) { + super(props); + this.dispatchDebounced = debounce(this.props.dispatch, 350); } + + setFilter(value) { + // Set filter value (for input rendering) + this.props.dispatch(setProtocolsFilterValue(value)); + + // Set filter delayed + this.dispatchDebounced(setProtocolsFilter(value)); + + } + + + componentDidMount() { + // Reset Filters + this.props.dispatch(setProtocolsFilterValue("")); + this.props.dispatch(setProtocolsFilter("")); + } + + render() { return(
diff --git a/client/components/routeservers/protocols/index.jsx b/client/components/routeservers/protocols/index.jsx index 698f2d7..cf30ad2 100644 --- a/client/components/routeservers/protocols/index.jsx +++ b/client/components/routeservers/protocols/index.jsx @@ -16,6 +16,8 @@ import RelativeTimestamp import LoadingIndicator from 'components/loading-indicator/small' + + function _filteredProtocols(protocols, filter) { let filtered = []; if(filter == "") { @@ -26,7 +28,8 @@ function _filteredProtocols(protocols, filter) { // Filter protocols filtered = _.filter(protocols, (p) => { - return (p.address.toLowerCase().indexOf(filter) != -1 || + return (p.asn == filter || + p.address.toLowerCase().indexOf(filter) != -1 || p.description.toLowerCase().indexOf(filter) != -1); }); @@ -292,7 +295,7 @@ export default connect( return { isLoading: state.routeservers.protocolsAreLoading, protocols: state.routeservers.protocols, - filter: state.routeservers.protocolsFilterValue + filter: state.routeservers.protocolsFilter, } } )(Protocols); diff --git a/client/components/routeservers/reducer.jsx b/client/components/routeservers/reducer.jsx index 0eff22d..efd6da9 100644 --- a/client/components/routeservers/reducer.jsx +++ b/client/components/routeservers/reducer.jsx @@ -15,6 +15,8 @@ import {LOAD_ROUTESERVERS_REQUEST, LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS, SET_PROTOCOLS_FILTER_VALUE, + SET_PROTOCOLS_FILTER, + SET_ROUTES_FILTER_VALUE} from './actions' @@ -40,6 +42,8 @@ const initialState = { noexport_asn: 0, protocolsFilterValue: "", + protocolsFilter: "", + routesFilterValue: "", isLoading: false, @@ -120,6 +124,15 @@ export default function reducer(state = initialState, action) { }); case SET_PROTOCOLS_FILTER_VALUE: + return Object.assign({}, state, { + protocolsFilterValue: action.payload.value + }); + + case SET_PROTOCOLS_FILTER: + return Object.assign({}, state, { + protocolsFilter: action.payload.value + }); + case SET_ROUTES_FILTER_VALUE: return Object.assign({}, state, action.payload);