made a view of filtered list

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -47,16 +47,12 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
 
 
   onSearchFilter(event) {
   onSearchFilter(event) {
     this.setState({ search: event.target.value });
     this.setState({ search: event.target.value });
-    console.log('yo');
   }
   }
 
 
   render() {
   render() {
     const { nav, alertList } = this.props;
     const { nav, alertList } = this.props;
 
 
     let regex = new RegExp(this.state.search, 'ig');
     let regex = new RegExp(this.state.search, 'ig');
-    const filteredAlerts = alertList.rules.filter(alert => {
-      return regex.test(alert.name) || regex.test(alert.stateText);
-    });
 
 
     return (
     return (
       <div>
       <div>
@@ -94,7 +90,7 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
 
 
           <section>
           <section>
             <ol className="alert-rule-list">
             <ol className="alert-rule-list">
-              {filteredAlerts.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
+              {alertList.searchFilter(regex).map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
             </ol>
             </ol>
           </section>
           </section>
         </div>
         </div>

public/app/stores/AlertListStore/AlertListStore.ts

@@ -31,4 +31,11 @@ export const AlertListStore = types
         self.rules.push(AlertRule.create(rule));
         self.rules.push(AlertRule.create(rule));
       }
       }
     }),
     }),
+  }))
+  .views(self => ({
+    searchFilter(regex) {
+      return self.rules.filter(alert => {
+        return regex.test(alert.name) || regex.test(alert.stateText);
+      });
+    },
   }));
   }));