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

Narrow the alert condition picker (#49570)

Browse Source
This commit is contained in:
Konrad Lalik 2022-05-26 11:46:54 +02:00 committed by GitHub
parent b54817033a
commit 20a83ba14f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
View File

@ -1,9 +1,10 @@
import { css } from '@emotion/css';
import { last } from 'lodash'; import { last } from 'lodash';
import React, { FC, useEffect, useMemo } from 'react'; import React, { FC, useEffect, useMemo } from 'react';
import { useFormContext } from 'react-hook-form'; import { useFormContext } from 'react-hook-form';
import { SelectableValue } from '@grafana/data'; import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Alert, Card, Field, InputControl, RadioButtonList } from '@grafana/ui'; import { Alert, Card, Field, InputControl, RadioButtonList, useStyles2 } from '@grafana/ui';
import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource'; import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
import { RuleFormValues } from '../../types/rule-form'; import { RuleFormValues } from '../../types/rule-form';
@ -53,8 +54,10 @@ export const ConditionField: FC = () => {
} }
}, [condition, expressions, options, setValue]); }, [condition, expressions, options, setValue]);
const styles = useStyles2(getStyles);
return options.length ? ( return options.length ? (
<Card> <Card className={styles.container}>
<Card.Heading>Set alert condition</Card.Heading> <Card.Heading>Set alert condition</Card.Heading>
<Card.Meta>Select one of your queries or expressions set above that contains your alert condition.</Card.Meta> <Card.Meta>Select one of your queries or expressions set above that contains your alert condition.</Card.Meta>
<Card.Actions> <Card.Actions>
@ -75,8 +78,14 @@ export const ConditionField: FC = () => {
</Card.Actions> </Card.Actions>
</Card> </Card>
) : ( ) : (
<Alert title="No queries or expressions have been configured" severity="warning"> <Alert title="No queries or expressions have been configured" severity="warning" className={styles.container}>
Create at least one query or expression to be alerted on Create at least one query or expression to be alerted on
</Alert> </Alert>
); );
}; };
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
max-width: ${theme.breakpoints.values.sm}px;
`,
});