From 3797054eb4e1db0dde14b3dced8ec37abaab8335 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Fri, 5 Jan 2018 14:17:50 +0100
Subject: [PATCH] made a view of filtered list

---
 public/app/containers/AlertRuleList/AlertRuleList.tsx | 6 +-----
 public/app/stores/AlertListStore/AlertListStore.ts    | 7 +++++++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx
index 472909fe511..39fb0c73749 100644
--- a/public/app/containers/AlertRuleList/AlertRuleList.tsx
+++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx
@@ -47,16 +47,12 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
 
   onSearchFilter(event) {
     this.setState({ search: event.target.value });
-    console.log('yo');
   }
 
   render() {
     const { nav, alertList } = this.props;
 
     let regex = new RegExp(this.state.search, 'ig');
-    const filteredAlerts = alertList.rules.filter(alert => {
-      return regex.test(alert.name) || regex.test(alert.stateText);
-    });
 
     return (
       <div>
@@ -94,7 +90,7 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
 
           <section>
             <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>
           </section>
         </div>
diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts
index 78799f6dfd8..10bf9be7fa9 100644
--- a/public/app/stores/AlertListStore/AlertListStore.ts
+++ b/public/app/stores/AlertListStore/AlertListStore.ts
@@ -31,4 +31,11 @@ export const AlertListStore = types
         self.rules.push(AlertRule.create(rule));
       }
     }),
+  }))
+  .views(self => ({
+    searchFilter(regex) {
+      return self.rules.filter(alert => {
+        return regex.test(alert.name) || regex.test(alert.stateText);
+      });
+    },
   }));