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"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],
"public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx:5381": [ "public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"]
], ],
"public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [ "public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [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 React, { FormEvent, useEffect, useMemo } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; 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 { logInfo, LogMessages } from '../../Analytics';
import { parseMatchers } from '../../utils/alertmanager';
interface Props { interface Props {
className?: string; className?: string;
@ -20,8 +21,7 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
() => () =>
debounce((e: FormEvent<HTMLInputElement>) => { debounce((e: FormEvent<HTMLInputElement>) => {
logInfo(LogMessages.filterByLabel); logInfo(LogMessages.filterByLabel);
const target = e.target as HTMLInputElement;
const target = e.currentTarget;
onFilterChange(target.value); onFilterChange(target.value);
}, 600), }, 600),
[onFilterChange] [onFilterChange]
@ -30,42 +30,57 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]); useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);
const searchIcon = <Icon name={'search'} />; const searchIcon = <Icon name={'search'} />;
const inputInvalid = defaultQueryString ? parseMatchers(defaultQueryString).length === 0 : false;
return ( return (
<div className={className}> <div className={className}>
<Label> <Field
<Stack gap={0.5}> invalid={inputInvalid || undefined}
<span>Search by label</span> error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
<Tooltip label={
content={ <Label>
<div> <Stack gap={0.5}>
Filter alerts using label querying, ex: <span>Search by label</span>
<pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre> <Tooltip
</div> content={
} <div>
> Filter alerts using label querying without spaces, ex:
<Icon className={styles.icon} name="info-circle" size="sm" /> <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
</Tooltip> Invalid use of spaces:
</Stack> <pre>{`{severity= "critical"}`}</pre>
</Label> <pre>{`{severity ="critical"}`}</pre>
<Input Valid use of spaces:
placeholder="Search" <pre>{`{severity=" critical"}`}</pre>
defaultValue={defaultQueryString} Filter alerts using label querying without braces, ex:
onChange={onSearchInputChanged} <pre>{`severity="critical", instance=~"cluster-us-.+"`}</pre>
data-testid="search-query-input" </div>
prefix={searchIcon} }
className={styles.inputWidth} >
/> <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> </div>
); );
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
icon: css` icon: css({
margin-right: ${theme.spacing(0.5)}; marginRight: theme.spacing(0.5),
`, }),
inputWidth: css` inputWidth: css({
width: 340px; width: 340,
flex-grow: 0; flexGrow: 0,
`, }),
}); });