moved state handling for search to store

This commit is contained in:
Patrick O'Carroll 2018-01-09 13:05:50 +01:00
parent 025835c9bf
commit bebcc24f3d
2 changed files with 13 additions and 10 deletions

View File

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

View File

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