IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added search function

Browse Source
This commit is contained in:
Patrick O'Carroll 2018-01-04 15:27:09 +01:00
parent 0068e82718
commit 2248bf437c
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/containers/AlertRuleList/AlertRuleList.tsx
View File

@ -23,6 +23,7 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
this.props.nav.load('alerting', 'alert-list');
this.fetchRules();
this.state = { search: '' };
}
onStateFilterChanged = evt => {
@ -44,9 +45,19 @@ 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>
<PageHeader model={nav as any} />
@ -58,8 +69,8 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
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)}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
@ -83,7 +94,7 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
<section>
<ol className="alert-rule-list">
{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
{filteredAlerts.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
</ol>
</section>
</div>