filter by asn; debounced filtering; fixed filter reset

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, 
     }
   }
 }

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(
       <div className="routeservers-page">

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);

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);