moved state handling for search to store

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -46,15 +46,13 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
     });
   };
 
-  onSearchFilter(event) {
-    this.setState({ search: event.target.value });
-  }
+  onSearchFilter = evt => {
+    this.props.alertList.setSearchState(evt.target.value);
+  };
 
   render() {
     const { nav, alertList } = this.props;
 
-    let regex = new RegExp(this.state.search, 'i');
-
     return (
       <div>
         <PageHeader model={nav as any} />
@@ -66,8 +64,8 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
                   type="text"
                   className="gf-form-input width-13"
                   placeholder="Search alert"
-                  value={this.state.search}
-                  onChange={this.onSearchFilter.bind(this)}
+                  value={alertList.search}
+                  onChange={this.onSearchFilter}
                 />
                 <i className="gf-form-input-icon fa fa-search" />
               </label>
@@ -92,8 +90,8 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
           <section>
             <ol className="alert-rule-list">
               {alertList
-                .searchFilter(regex)
-                .map(rule => <AlertRuleItem rule={rule} key={rule.id} search={this.state.search} />)}
+                .searchFilter()
+                .map(rule => <AlertRuleItem rule={rule} key={rule.id} search={alertList.search} />)}
             </ol>
           </section>
         </div>

public/app/stores/AlertListStore/AlertListStore.ts

@@ -9,9 +9,11 @@ export const AlertListStore = types
   .model('AlertListStore', {
     rules: types.array(AlertRule),
     stateFilter: types.optional(types.string, 'all'),
+    search: types.optional(types.string, ''),
   })
   .views(self => ({
-    searchFilter(regex) {
+    searchFilter() {
+      let regex = new RegExp(self.search, 'i');
       return self.rules.filter(alert => {
         return regex.test(alert.name) || regex.test(alert.stateText) || regex.test(alert.info);
       });
@@ -38,4 +40,7 @@ export const AlertListStore = types
         self.rules.push(AlertRule.create(rule));
       }
     }),
+    setSearchState(evt) {
+      self.search = evt;
+    },
   }));