diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 0d32a4fca1b..472909fe511 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -23,6 +23,7 @@ export class AlertRuleList extends React.Component { this.props.nav.load('alerting', 'alert-list'); this.fetchRules(); + this.state = { search: '' }; } onStateFilterChanged = evt => { @@ -44,9 +45,19 @@ export class AlertRuleList extends React.Component { }); }; + 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 (
@@ -58,8 +69,8 @@ export class AlertRuleList extends React.Component { type="text" className="gf-form-input width-13" placeholder="Search alert" - value={this.searchQuery} - onChange={this.onQueryUpdated} + value={this.state.search} + onChange={this.onSearchFilter.bind(this)} /> @@ -83,7 +94,7 @@ export class AlertRuleList extends React.Component {
    - {alertList.rules.map(rule => )} + {filteredAlerts.map(rule => )}