diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx index cedbd4abadb3..f05b56596baa 100644 --- a/public/app/features/alerting/unified/components/expressions/Expression.tsx +++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx @@ -4,7 +4,7 @@ import React, { FC, useCallback, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { DataFrame, dateTimeFormat, GrafanaTheme2, isTimeSeriesFrames, LoadingState, PanelData } from '@grafana/data'; -import { AutoSizeInput, Button, clearButtonStyles, IconButton, Stack, useStyles2 } from '@grafana/ui'; +import { Alert, AutoSizeInput, Button, clearButtonStyles, IconButton, Stack, useStyles2 } from '@grafana/ui'; import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions'; import { Math } from 'app/features/expressions/components/Math'; import { Reduce } from 'app/features/expressions/components/Reduce'; @@ -136,12 +136,20 @@ export const Expression: FC = ({ onUpdateRefId={(newRefId) => onUpdateRefId(query.refId, newRefId)} onUpdateExpressionType={(type) => onUpdateExpressionType(query.refId, type)} onSetCondition={onSetCondition} - warning={warning} - error={error} query={query} alertCondition={alertCondition} />
+ {error && ( + + {error.message} + + )} + {warning && ( + + {warning.message} + + )}
{selectedExpressionDescription}
{renderExpressionType(query)}
@@ -275,8 +283,6 @@ interface HeaderProps { onUpdateRefId: (refId: string) => void; onRemoveExpression: () => void; onUpdateExpressionType: (type: ExpressionQueryType) => void; - warning?: Error; - error?: Error; onSetCondition: (refId: string) => void; query: ExpressionQuery; alertCondition: boolean; @@ -287,11 +293,9 @@ const Header: FC = ({ queryType, onUpdateRefId, onRemoveExpression, - warning, onSetCondition, alertCondition, query, - error, }) => { const styles = useStyles2(getStyles); const clearButton = useStyles2(clearButtonStyles); @@ -335,12 +339,7 @@ const Header: FC = ({
{getExpressionLabel(queryType)}
- onSetCondition(query.refId)} - isCondition={alertCondition} - /> + onSetCondition(query.refId)} isCondition={alertCondition} /> { - it('should render two elements when error and not condition', () => { - render(); - - expect(screen.getByText('Warning')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Set as alert condition' })).toBeInTheDocument(); - }); - - it('should render one element when warning and condition', () => { - render(); - - expect(screen.getByText('Alert condition')).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Set as alert condition' })).not.toBeInTheDocument(); - }); - - it('should render two elements when error and not condition', () => { - render(); - - expect(screen.getByText('Error')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Set as alert condition' })).toBeInTheDocument(); - }); - - it('should render one element when error and condition', () => { - render(); - - expect(screen.getByText('Alert condition')).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Set as alert condition' })).not.toBeInTheDocument(); - }); - it('should render one element if condition', () => { render(); - expect(screen.queryByText('Error')).not.toBeInTheDocument(); - expect(screen.queryByText('Warning')).not.toBeInTheDocument(); expect(screen.getByText('Alert condition')).toBeInTheDocument(); }); it('should render one element if not condition', () => { render(); - expect(screen.queryByText('Error')).not.toBeInTheDocument(); - expect(screen.queryByText('Warning')).not.toBeInTheDocument(); expect(screen.queryByRole('button', { name: 'Alert condition' })).not.toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Set as alert condition' })).toBeInTheDocument(); }); diff --git a/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx b/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx index 28a668e25b03..71dbdd91297f 100644 --- a/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx +++ b/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx @@ -5,35 +5,17 @@ import { GrafanaTheme2 } from '@grafana/data'; import { Badge, clearButtonStyles, useStyles2 } from '@grafana/ui'; interface AlertConditionProps { - warning?: Error; - error?: Error; isCondition?: boolean; onSetCondition?: () => void; } -export const ExpressionStatusIndicator = ({ error, warning, isCondition, onSetCondition }: AlertConditionProps) => { +export const ExpressionStatusIndicator = ({ isCondition, onSetCondition }: AlertConditionProps) => { const styles = useStyles2(getStyles); - const elements: JSX.Element[] = []; - - if (error && isCondition) { - return ; - } else if (error) { - elements.push(); - } - - if (warning && isCondition) { - return ; - } else if (warning) { - elements.push( - - ); - } - if (isCondition) { - elements.unshift(); + return ; } else { - elements.unshift( + return (