Skip to content

Commit

Permalink
Alerting: Fix group filter (#80358)
Browse files Browse the repository at this point in the history
* Fix group filter

* Fix Warning: Receivedfor a non-boolean attribute

* remove defaultQueryString.length > 3 from the logic to check if input is invalid
  • Loading branch information
soniaAguilarPeiron authored and yuesenxiong committed Nov 25, 2024
1 parent 542b0df commit e904d4f
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 35 deletions.
3 changes: 1 addition & 2 deletions .betterer.results
Original file line number Diff line number Diff line change
Expand Up @@ -1592,8 +1592,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import { debounce } from 'lodash';
import React, { FormEvent, useEffect, useMemo } from 'react';

import { GrafanaTheme2 } from '@grafana/data';
import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
import { Field, Icon, Input, Label, Stack, Tooltip, useStyles2 } from '@grafana/ui';

import { logInfo, LogMessages } from '../../Analytics';
import { parseMatchers } from '../../utils/alertmanager';

interface Props {
className?: string;
Expand All @@ -20,8 +21,7 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
() =>
debounce((e: FormEvent<HTMLInputElement>) => {
logInfo(LogMessages.filterByLabel);

const target = e.currentTarget;
const target = e.target as HTMLInputElement;
onFilterChange(target.value);
}, 600),
[onFilterChange]
Expand All @@ -30,42 +30,57 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);

const searchIcon = <Icon name={'search'} />;
const inputInvalid = defaultQueryString ? parseMatchers(defaultQueryString).length === 0 : false;

return (
<div className={className}>
<Label>
<Stack gap={0.5}>
<span>Search by label</span>
<Tooltip
content={
<div>
Filter alerts using label querying, ex:
<pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
</div>
}
>
<Icon className={styles.icon} name="info-circle" size="sm" />
</Tooltip>
</Stack>
</Label>
<Input
placeholder="Search"
defaultValue={defaultQueryString}
onChange={onSearchInputChanged}
data-testid="search-query-input"
prefix={searchIcon}
className={styles.inputWidth}
/>
<Field
invalid={inputInvalid || undefined}
error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
label={
<Label>
<Stack gap={0.5}>
<span>Search by label</span>
<Tooltip
content={
<div>
Filter alerts using label querying without spaces, ex:
<pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
Invalid use of spaces:
<pre>{`{severity= "critical"}`}</pre>
<pre>{`{severity ="critical"}`}</pre>
Valid use of spaces:
<pre>{`{severity=" critical"}`}</pre>
Filter alerts using label querying without braces, ex:
<pre>{`severity="critical", instance=~"cluster-us-.+"`}</pre>
</div>
}
>
<Icon className={styles.icon} name="info-circle" size="sm" />
</Tooltip>
</Stack>
</Label>
}
>
<Input
placeholder="Search"
defaultValue={defaultQueryString ?? ''}
onChange={onSearchInputChanged}
data-testid="search-query-input"
prefix={searchIcon}
className={styles.inputWidth}
/>
</Field>
</div>
);
};

const getStyles = (theme: GrafanaTheme2) => ({
icon: css`
margin-right: ${theme.spacing(0.5)};
`,
inputWidth: css`
width: 340px;
flex-grow: 0;
`,
icon: css({
marginRight: theme.spacing(0.5),
}),
inputWidth: css({
width: 340,
flexGrow: 0,
}),
});

0 comments on commit e904d4f

Please sign in to comment.