IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-01 21:19:28 -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 React, { FC, useEffect, useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { SelectableValue } from '@grafana/data';
import { Alert, Card, Field, InputControl, RadioButtonList } from '@grafana/ui';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Alert, Card, Field, InputControl, RadioButtonList, useStyles2 } from '@grafana/ui';
import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
import { RuleFormValues } from '../../types/rule-form';
@ -53,8 +54,10 @@ export const ConditionField: FC = () => {
}
}, [condition, expressions, options, setValue]);
const styles = useStyles2(getStyles);
return options.length ? (
<Card>
<Card className={styles.container}>
<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.Actions>
@ -75,8 +78,14 @@ export const ConditionField: FC = () => {
</Card.Actions>
</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
</Alert>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
max-width: ${theme.breakpoints.values.sm}px;
`,
});