diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 4c1df8a7aae..69bddfbe593 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -46,15 +46,13 @@ export class AlertRuleList extends React.Component { }); }; - 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 (
@@ -66,8 +64,8 @@ export class AlertRuleList extends React.Component { 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} /> @@ -92,8 +90,8 @@ export class AlertRuleList extends React.Component {
    {alertList - .searchFilter(regex) - .map(rule => )} + .searchFilter() + .map(rule => )}
diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 6beef084ff8..03998ff3065 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/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; + }, }));