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

Alerting: Fix group filter (#80358)

Browse Source 
* Fix group filter

* Fix Warning: Receivedfor a non-boolean attribute

* remove defaultQueryString.length > 3 from the logic to check if input is invalid
This commit is contained in:
Sonia Aguilar 2024-01-11 16:28:12 +01:00 committed by GitHub
parent 9501000856
commit e1af9bcecc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -1589,8 +1589,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"]

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

@ -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;
@ -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]
@ -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,
}),
});