diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 918b80fcabb..1b0c77acddc 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -46,8 +46,8 @@ export class AlertRuleList extends React.Component { }); }; - onSearchFilter = evt => { - this.props.alertList.setSearchState(evt.target.value); + onSearchQueryChange = evt => { + this.props.alertList.setSearchQuery(evt.target.value); }; render() { @@ -65,7 +65,7 @@ export class AlertRuleList extends React.Component { className="gf-form-input width-13" placeholder="Search alert" value={alertList.search} - onChange={this.onSearchFilter} + onChange={this.onSearchQueryChange} /> @@ -89,9 +89,9 @@ export class AlertRuleList extends React.Component {
    - {alertList - .searchFilter() - .map(rule => )} + {alertList.filteredRules.map(rule => ( + + ))}
diff --git a/public/app/stores/AlertListStore/AlertListStore.jest.ts b/public/app/stores/AlertListStore/AlertListStore.jest.ts new file mode 100644 index 00000000000..28b32858a39 --- /dev/null +++ b/public/app/stores/AlertListStore/AlertListStore.jest.ts @@ -0,0 +1,65 @@ +import { AlertListStore } from './AlertListStore'; +import { backendSrv } from 'test/mocks/common'; +import moment from 'moment'; + +function getRule(name, state, info) { + return { + id: 11, + dashboardId: 58, + panelId: 3, + name: name, + state: state, + newStateDate: moment() + .subtract(5, 'minutes') + .format(), + evalData: {}, + executionError: '', + dashboardUri: 'db/mygool', + stateText: state, + stateIcon: 'fa', + stateClass: 'asd', + stateAge: '10m', + info: info, + }; +} + +describe('AlertListStore', () => { + let store; + + beforeAll(() => { + store = AlertListStore.create( + { + rules: [ + getRule('Europe', 'OK', 'backend-01'), + getRule('Google', 'ALERTING', 'backend-02'), + getRule('Amazon', 'PAUSED', 'backend-03'), + getRule('West-Europe', 'PAUSED', 'backend-03'), + ], + search: '', + }, + { + backendSrv: backendSrv, + } + ); + }); + + it('search should filter list on name', () => { + store.setSearchQuery('urope'); + expect(store.filteredRules).toHaveLength(2); + }); + + it('search should filter list on state', () => { + store.setSearchQuery('ale'); + expect(store.filteredRules).toHaveLength(1); + }); + + it('search should filter list on info', () => { + store.setSearchQuery('-0'); + expect(store.filteredRules).toHaveLength(4); + }); + + it('search should be equal', () => { + store.setSearchQuery('alert'); + expect(store.search).toBe('alert'); + }); +}); diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 03998ff3065..05dd181f41e 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -12,7 +12,7 @@ export const AlertListStore = types search: types.optional(types.string, ''), }) .views(self => ({ - searchFilter() { + get filteredRules() { 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); @@ -40,7 +40,7 @@ export const AlertListStore = types self.rules.push(AlertRule.create(rule)); } }), - setSearchState(evt) { - self.search = evt; + setSearchQuery(query: string) { + self.search = query; }, }));