IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Fix MatcherFilter onChange handling (#87511)

Browse Source 
* Fix input onChange handler

* Remove unused variables
This commit is contained in:
Konrad Lalik 2024-05-10 15:42:23 +02:00 committed by GitHub
parent be1bb04e9b
commit c203a030e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/features/alerting/unified/components/alert-groups/MatcherFilter.test.tsx
View File

@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import lodash from 'lodash'; // eslint-disable-line lodash/import-scope
import React from 'react';
import * as analytics from '../../Analytics';
@ -10,18 +9,11 @@ import { MatcherFilter } from './MatcherFilter';
const logInfoSpy = jest.spyOn(analytics, 'logInfo');
describe('Analytics', () => {
beforeEach(() => {
lodash.debounce = jest.fn().mockImplementation((fn) => {
fn.cancel = () => {};
return fn;
});
});
it('Sends log info when filtering alert instances by label', async () => {
render(<MatcherFilter onFilterChange={jest.fn()} />);
const searchInput = screen.getByTestId('search-query-input');
await userEvent.type(searchInput, 'job=');
await userEvent.type(searchInput, 'job=', { delay: 600 }); // Delay waits for the MatcherFilter debounce
expect(logInfoSpy).toHaveBeenCalledWith(analytics.LogMessages.filterByLabel);
});
@ -32,7 +24,7 @@ describe('Analytics', () => {
render(<MatcherFilter defaultQueryString="foo" onFilterChange={onFilterMock} />);
const searchInput = screen.getByTestId('search-query-input');
await userEvent.type(searchInput, '=bar');
await userEvent.type(searchInput, '=bar', { delay: 600 }); // Delay waits for the MatcherFilter debounce
expect(onFilterMock).toHaveBeenLastCalledWith('foo=bar');
});

27
public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { debounce } from 'lodash';
import React, { FormEvent, useEffect, useMemo } from 'react';
import React from 'react';
import { useDebounce } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { Field, Icon, Input, Label, Stack, Tooltip, useStyles2 } from '@grafana/ui';
@ -16,17 +16,16 @@ interface Props {
export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) => {
const styles = useStyles2(getStyles);
const onSearchInputChanged = useMemo(
() =>
debounce((e: FormEvent<HTMLInputElement>) => {
logInfo(LogMessages.filterByLabel);
const target = e.currentTarget;
onFilterChange(target.value);
}, 600),
[onFilterChange]
);
const [filterQuery, setFilterQuery] = React.useState<string>(defaultQueryString ?? '');
useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);
useDebounce(
() => {
logInfo(LogMessages.filterByLabel);
onFilterChange(filterQuery);
},
600,
[filterQuery]
);
const searchIcon = <Icon name={'search'} />;
const inputInvalid = defaultQueryString ? parseMatchers(defaultQueryString).length === 0 : false;
@ -63,8 +62,8 @@ export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) =>
>
<Input
placeholder="Search"
defaultValue={defaultQueryString ?? ''}
onChange={onSearchInputChanged}
value={filterQuery}
onChange={(e) => setFilterQuery(e.currentTarget.value)}
data-testid="search-query-input"
prefix={searchIcon}
className={styles.inputWidth}