Alerting: Prevent preview if no condition is set (#39659)

* prevent preview if no condition is set

* fixes after pr feedback

* watch on type and condition
This commit is contained in:
Peter Holmberg 2021-09-28 11:35:10 +02:00 committed by GitHub
parent 79c797c232
commit cc94c55e48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 5 deletions

View File

@ -15,8 +15,8 @@ const fields: string[] = ['type', 'dataSourceName', 'condition', 'queries', 'exp
export function PreviewRule(): React.ReactElement | null {
const styles = useStyles2(getStyles);
const [preview, onPreview] = usePreview();
const { getValues } = useFormContext();
const [type] = getValues(fields);
const { watch } = useFormContext();
const [type, condition] = watch(['type', 'condition']);
if (type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) {
return null;
@ -25,7 +25,7 @@ export function PreviewRule(): React.ReactElement | null {
return (
<div className={styles.container}>
<HorizontalGroup>
<Button type="button" variant="primary" onClick={onPreview}>
<Button disabled={!condition} type="button" variant="primary" onClick={onPreview}>
Preview alerts
</Button>
</HorizontalGroup>

View File

@ -6,6 +6,7 @@ import { PanelRenderer } from '@grafana/runtime';
import { GrafanaTheme2, LoadingState } from '@grafana/data';
import { PreviewRuleResponse } from '../../types/preview';
import { RuleFormType } from '../../types/rule-form';
import { messageFromError } from '../../utils/redux';
type Props = {
preview: PreviewRuleResponse | undefined;
@ -30,7 +31,11 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
}
if (data.state === LoadingState.Error) {
return <div className={styles.container}>{data.error ?? 'Failed to preview alert rule'}</div>;
return (
<div className={styles.container}>
{data.error ? messageFromError(data.error) : 'Failed to preview alert rule'}
</div>
);
}
return (

View File

@ -137,7 +137,7 @@ export function isFetchError(e: unknown): e is FetchError {
return typeof e === 'object' && e !== null && 'status' in e && 'data' in e;
}
function messageFromError(e: Error | FetchError | SerializedError): string {
export function messageFromError(e: Error | FetchError | SerializedError): string {
if (isFetchError(e)) {
if (e.data?.message) {
let msg = e.data?.message;